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

package/components/virtualization/GridVirtualScrollerFiller.js

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { styled } from '@mui/system';
+import { fastMemo } from '../../utils/fastMemo';
+import { useGridSelector } from '../../hooks/utils/useGridSelector';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { gridDimensionsSelector } from '../../hooks/features/dimensions';
+import { gridClasses } from '../../constants';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const Filler = styled('div')({
+  display: 'flex',
+  flexDirection: 'row',
+  width: 'var(--DataGrid-rowWidth)',
+  boxSizing: 'border-box'
+});
+const Pinned = styled('div')({
+  position: 'sticky',
+  height: '100%',
+  boxSizing: 'border-box',
+  borderTop: '1px solid var(--DataGrid-rowBorderColor)',
+  backgroundColor: 'var(--DataGrid-pinnedBackground)'
+});
+const PinnedLeft = styled(Pinned)({
+  left: 0,
+  borderRight: '1px solid var(--DataGrid-rowBorderColor)'
+});
+const PinnedRight = styled(Pinned)({
+  right: 0,
+  borderLeft: '1px solid var(--DataGrid-rowBorderColor)'
+});
+const Main = styled('div')({
+  flexGrow: 1,
+  borderTop: '1px solid var(--DataGrid-rowBorderColor)'
+});
+function GridVirtualScrollerFiller() {
+  const apiRef = useGridApiContext();
+  const {
+    viewportOuterSize,
+    minimumSize,
+    hasScrollX,
+    scrollbarSize,
+    leftPinnedWidth,
+    rightPinnedWidth
+  } = useGridSelector(apiRef, gridDimensionsSelector);
+  const scrollbarHeight = hasScrollX ? scrollbarSize : 0;
+  const expandedHeight = viewportOuterSize.height - minimumSize.height - scrollbarHeight;
+  const height = Math.max(scrollbarHeight, expandedHeight);
+  if (height === 0) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(Filler, {
+    className: gridClasses.filler,
+    role: "presentation",
+    style: {
+      height
+    },
+    children: [leftPinnedWidth > 0 && /*#__PURE__*/_jsx(PinnedLeft, {
+      className: gridClasses['filler--pinnedLeft'],
+      style: {
+        width: leftPinnedWidth
+      }
+    }), /*#__PURE__*/_jsx(Main, {}), rightPinnedWidth > 0 && /*#__PURE__*/_jsx(PinnedRight, {
+      className: gridClasses['filler--pinnedRight'],
+      style: {
+        width: rightPinnedWidth
+      }
+    })]
+  });
+}
+const Memoized = fastMemo(GridVirtualScrollerFiller);
+export { Memoized as GridVirtualScrollerFiller };

package/components/virtualization/GridVirtualScrollerRenderZone.js

@@ -25,7 +25,8 @@ const VirtualScrollerRenderZoneRoot = styled('div', {
   position: 'absolute',
   display: 'flex',
   // Prevents margin collapsing when using `getRowSpacing`
-  flexDirection: 'column'
+  flexDirection: 'column',
+  transform: 'translate3d(0, var(--DataGrid-offsetTop), 0)'
 });
 const GridVirtualScrollerRenderZone = /*#__PURE__*/React.forwardRef(function GridVirtualScrollerRenderZone(props, ref) {
   const {

package/constants/defaultGridSlotsComponents.js

@@ -1,22 +1,26 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { GridSkeletonCell, GridColumnsPanel, GridFilterPanel, GridFooter, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridRow, GridColumnHeaderFilterIconButton, GridRowCount } from '../components';
-import { GridCellV7 } from '../components/cell/GridCell';
+import { GridCell } from '../components/cell/GridCell';
 import { GridColumnHeaders } from '../components/GridColumnHeaders';
 import { GridColumnMenu } from '../components/menu/columnMenu/GridColumnMenu';
+import { GridDetailPanels } from '../components/GridDetailPanels';
+import { GridPinnedRows } from '../components/GridPinnedRows';
 import { GridNoResultsOverlay } from '../components/GridNoResultsOverlay';
 import materialSlots from '../material';
 
 // TODO: camelCase these key. It's a private helper now.
 // Remove then need to call `uncapitalizeObjectKeys`.
 export const DATA_GRID_DEFAULT_SLOTS_COMPONENTS = _extends({}, materialSlots, {
-  cell: GridCellV7,
+  cell: GridCell,
   skeletonCell: GridSkeletonCell,
   columnHeaderFilterIconButton: GridColumnHeaderFilterIconButton,
   columnMenu: GridColumnMenu,
   columnHeaders: GridColumnHeaders,
+  detailPanels: GridDetailPanels,
   footer: GridFooter,
   footerRowCount: GridRowCount,
   toolbar: null,
+  pinnedRows: GridPinnedRows,
   loadingOverlay: GridLoadingOverlay,
   noResultsOverlay: GridNoResultsOverlay,
   noRowsOverlay: GridNoRowsOverlay,

package/constants/gridClasses.d.ts

@@ -75,6 +75,14 @@ export interface GridClasses {
      * Styles applied to the cell element if it is at the right edge of a cell selection range.
      */
     'cell--rangeRight': string;
+    /**
+     * Styles applied to the cell element if it is pinned to the left.
+     */
+    'cell--pinnedLeft': string;
+    /**
+     * Styles applied to the cell element if it is pinned to the right.
+     */
+    'cell--pinnedRight': string;
     /**
      * Styles applied to the cell element if it is in a cell selection range.
      */
@@ -91,6 +99,10 @@ export interface GridClasses {
      * Styles applied to the cell checkbox element.
      */
     cellCheckbox: string;
+    /**
+     * Styles applied to the empty cell element.
+     */
+    cellEmpty: string;
     /**
      * Styles applied to the skeleton cell element.
      */
@@ -223,6 +235,14 @@ export interface GridClasses {
      * Styles applied to the columns panel row element.
      */
     columnsPanelRow: string;
+    /**
+     * Styles applied to the top container.
+     */
+    'container--top': string;
+    /**
+     * Styles applied to the bottom container.
+     */
+    'container--bottom': string;
     /**
      * Styles applied to the detail panel element.
      */
@@ -271,6 +291,18 @@ export interface GridClasses {
      * Styles applied to root of the boolean edit component.
      */
     editBooleanCell: string;
+    /**
+     * Styles applied to the filler row.
+     */
+    filler: string;
+    /**
+     * Styles applied to the filler row pinned left section.
+     */
+    'filler--pinnedLeft': string;
+    /**
+     * Styles applied to the filler row pinned right section.
+     */
+    'filler--pinnedRight': string;
     /**
      * Styles applied to the root of the filter form component.
      */
@@ -323,6 +355,10 @@ export interface GridClasses {
      * Styles applied to the main container element.
      */
     main: string;
+    /**
+     * Styles applied to the main container element when it has right pinned columns.
+     */
+    'main--hasPinnedRight': string;
     /**
      * Styles applied to the menu element.
      */
@@ -375,14 +411,6 @@ export interface GridClasses {
      * Styles applied to the pinned columns.
      */
     pinnedColumns: string;
-    /**
-     * Styles applied to the left pinned columns.
-     */
-    'pinnedColumns--left': string;
-    /**
-     * Styles applied to the right pinned columns.
-     */
-    'pinnedColumns--right': string;
     /**
      * Styles applied to the pinned column headers.
      */
@@ -427,6 +455,10 @@ export interface GridClasses {
      * Styles applied to the floating special row reorder cell element when it is dragged.
      */
     'row--dragging': string;
+    /**
+     * Styles applied to the first visible row element on every page of the grid.
+     */
+    'row--firstVisible': string;
     /**
      * Styles applied to the last visible row element on every page of the grid.
      */
@@ -472,6 +504,18 @@ export interface GridClasses {
      * Styles applied to the right scroll area element.
      */
     'scrollArea--right': string;
+    /**
+     * Styles applied to the scrollbars.
+     */
+    scrollbar: string;
+    /**
+     * Styles applied to the horizontal scrollbar.
+     */
+    'scrollbar--horizontal': string;
+    /**
+     * Styles applied to the horizontal scrollbar.
+     */
+    'scrollbar--vertical': string;
     /**
      * Styles applied to the footer selected row count element.
      */
@@ -488,6 +532,10 @@ export interface GridClasses {
      * Styles applied to the toolbar filter list element.
      */
     toolbarFilterList: string;
+    /**
+     * Styles applied the grid if `showColumnVerticalBorder={true}`.
+     */
+    withVerticalBorder: string;
     /**
      * Styles applied to cells, column header and other elements that have border.
      * Sets border color only.
@@ -497,6 +545,10 @@ export interface GridClasses {
      * Styles applied the cell if `showColumnVerticalBorder={true}`.
      */
     'cell--withRightBorder': string;
+    /**
+     * Styles applied the cell if `showColumnVerticalBorder={true}`.
+     */
+    'cell--withLeftBorder': string;
     /**
      * Styles applied the column header if `showColumnVerticalBorder={true}`.
      */

package/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { unstable_generateUtilityClasses as generateUtilityClasses, unstable_gen
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--selectionMode', 'cell', 'cellContent', 'cellCheckbox', 'cellSkeleton', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnGroupHeader', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeader--showColumnBorder', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorderColor', 'cell--withRightBorder', 'columnHeader--withRightBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);
+export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellContent', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnGroupHeader', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeader--showColumnBorder', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);

package/hooks/core/gridCoreSelector.d.ts

@@ -0,0 +1,6 @@
+import { GridStateCommunity } from '../../models/gridStateCommunity';
+/**
+ * Get the theme state
+ * @category Core
+ */
+export declare const gridThemeSelector: (state: GridStateCommunity) => import("@mui/material").Theme;

package/hooks/core/gridCoreSelector.js

@@ -0,0 +1,5 @@
+/**
+ * Get the theme state
+ * @category Core
+ */
+export const gridThemeSelector = state => state.theme;

package/hooks/core/useGridInitialization.js

@@ -1,3 +1,5 @@
+import { useGridRefs } from './useGridRefs';
+import { useGridTheme } from './useGridTheme';
 import { useGridLoggerFactory } from './useGridLoggerFactory';
 import { useGridApiInitialization } from './useGridApiInitialization';
 import { useGridLocaleText } from './useGridLocaleText';
@@ -10,6 +12,8 @@ import { useGridStateInitialization } from './useGridStateInitialization';
  */
 export const useGridInitialization = (inputApiRef, props) => {
   const privateApiRef = useGridApiInitialization(inputApiRef, props);
+  useGridRefs(privateApiRef);
+  useGridTheme(privateApiRef);
   useGridLoggerFactory(privateApiRef, props);
   useGridStateInitialization(privateApiRef, props);
   useGridPipeProcessing(privateApiRef);

package/hooks/core/useGridLoggerFactory.js

@@ -13,13 +13,13 @@ const LOG_LEVELS = ['debug', 'info', 'warn', 'error'];
 function getAppender(name, logLevel, appender = console) {
   const minLogLevelIdx = LOG_LEVELS.indexOf(logLevel);
   if (minLogLevelIdx === -1) {
-    throw new Error(`MUI: Log level ${logLevel} not recognized.`);
+    throw new Error(`MUI X: Log level ${logLevel} not recognized.`);
   }
   const logger = LOG_LEVELS.reduce((loggerObj, method, idx) => {
     if (idx >= minLogLevelIdx) {
       loggerObj[method] = (...args) => {
         const [message, ...other] = args;
-        appender[method](`MUI: ${name} - ${message}`, ...other);
+        appender[method](`MUI X: ${name} - ${message}`, ...other);
       };
     } else {
       loggerObj[method] = noop;

package/hooks/core/useGridRefs.d.ts

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

package/hooks/core/useGridRefs.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export const useGridRefs = apiRef => {
+  const rootElementRef = React.useRef(null);
+  const mainElementRef = React.useRef(null);
+  const virtualScrollerRef = React.useRef(null);
+  apiRef.current.register('public', {
+    rootElementRef
+  });
+  apiRef.current.register('private', {
+    mainElementRef,
+    virtualScrollerRef
+  });
+};

package/hooks/core/useGridTheme.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { GridPrivateApiCommon } from '../../models/api/gridApiCommon';
+export declare const useGridTheme: (apiRef: React.MutableRefObject<GridPrivateApiCommon>) => void;

package/hooks/core/useGridTheme.js

@@ -0,0 +1,19 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useTheme } from '@mui/material/styles';
+export const useGridTheme = apiRef => {
+  const theme = useTheme();
+  if (!apiRef.current.state.theme) {
+    apiRef.current.state.theme = theme;
+  }
+  const isFirstEffect = React.useRef(true);
+  React.useEffect(() => {
+    if (isFirstEffect.current) {
+      isFirstEffect.current = false;
+    } else {
+      apiRef.current.setState(state => _extends({}, state, {
+        theme
+      }));
+    }
+  }, [apiRef, theme]);
+};

package/hooks/features/columnGrouping/gridColumnGroupsUtils.js

@@ -4,7 +4,7 @@ import { isDeepEqual } from '../../../utils/utils';
 const recurrentUnwrapGroupingColumnModel = (columnGroupNode, parents, unwrappedGroupingModelToComplete) => {
   if (isLeaf(columnGroupNode)) {
     if (unwrappedGroupingModelToComplete[columnGroupNode.field] !== undefined) {
-      throw new Error([`MUI: columnGroupingModel contains duplicated field`, `column field ${columnGroupNode.field} occurs two times in the grouping model:`, `- ${unwrappedGroupingModelToComplete[columnGroupNode.field].join(' > ')}`, `- ${parents.join(' > ')}`].join('\n'));
+      throw new Error([`MUI X: columnGroupingModel contains duplicated field`, `column field ${columnGroupNode.field} occurs two times in the grouping model:`, `- ${unwrappedGroupingModelToComplete[columnGroupNode.field].join(' > ')}`, `- ${parents.join(' > ')}`].join('\n'));
     }
     unwrappedGroupingModelToComplete[columnGroupNode.field] = parents;
     return;

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

@@ -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' | 'experimentalFeatures'>) => void;
+export declare const useGridColumnGrouping: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'columnGroupingModel'>) => void;

package/hooks/features/columnGrouping/useGridColumnGrouping.js

@@ -20,17 +20,19 @@ const createGroupLookup = columnGroupingModel => {
       } = node,
       other = _objectWithoutPropertiesLoose(node, _excluded);
     if (!groupId) {
-      throw new Error('MUI: An element of the columnGroupingModel does not have either `field` or `groupId`.');
+      throw new Error('MUI X: An element of the columnGroupingModel does not have either `field` or `groupId`.');
     }
-    if (!children) {
-      console.warn(`MUI: group groupId=${groupId} has no children.`);
+    if (process.env.NODE_ENV !== 'production') {
+      if (!children) {
+        console.warn(`MUI X: group groupId=${groupId} has no children.`);
+      }
     }
     const groupParam = _extends({}, other, {
       groupId
     });
     const subTreeLookup = createGroupLookup(children);
     if (subTreeLookup[groupId] !== undefined || groupLookup[groupId] !== undefined) {
-      throw new Error(`MUI: The groupId ${groupId} is used multiple times in the columnGroupingModel.`);
+      throw new Error(`MUI X: The groupId ${groupId} is used multiple times in the columnGroupingModel.`);
     }
     groupLookup = _extends({}, groupLookup, subTreeLookup, {
       [groupId]: groupParam
@@ -39,16 +41,15 @@ const createGroupLookup = columnGroupingModel => {
   return _extends({}, groupLookup);
 };
 export const columnGroupsStateInitializer = (state, props, apiRef) => {
-  var _props$experimentalFe, _props$columnGrouping, _props$columnGrouping2, _apiRef$current$state;
-  if (!((_props$experimentalFe = props.experimentalFeatures) != null && _props$experimentalFe.columnGrouping)) {
+  var _props$columnGrouping, _props$columnGrouping2, _apiRef$current$state;
+  if (!props.columnGroupingModel) {
     return state;
   }
   const columnFields = gridColumnFieldsSelector(apiRef);
   const visibleColumnFields = gridVisibleColumnFieldsSelector(apiRef);
   const groupLookup = createGroupLookup((_props$columnGrouping = props.columnGroupingModel) != null ? _props$columnGrouping : []);
   const unwrappedGroupingModel = unwrapGroupingColumnModel((_props$columnGrouping2 = props.columnGroupingModel) != null ? _props$columnGrouping2 : []);
-  const columnGroupsHeaderStructure = getColumnGroupsHeaderStructure(columnFields, unwrappedGroupingModel, // @ts-expect-error Move this part to `Pro` package
-  (_apiRef$current$state = apiRef.current.state.pinnedColumns) != null ? _apiRef$current$state : {});
+  const columnGroupsHeaderStructure = getColumnGroupsHeaderStructure(columnFields, unwrappedGroupingModel, (_apiRef$current$state = apiRef.current.state.pinnedColumns) != null ? _apiRef$current$state : {});
   const maxDepth = visibleColumnFields.length === 0 ? 0 : Math.max(...visibleColumnFields.map(field => {
     var _unwrappedGroupingMod, _unwrappedGroupingMod2;
     return (_unwrappedGroupingMod = (_unwrappedGroupingMod2 = unwrappedGroupingModel[field]) == null ? void 0 : _unwrappedGroupingMod2.length) != null ? _unwrappedGroupingMod : 0;
@@ -68,7 +69,6 @@ export const columnGroupsStateInitializer = (state, props, apiRef) => {
  * @requires useGridParamsApi (method)
  */
 export const useGridColumnGrouping = (apiRef, props) => {
-  var _props$experimentalFe3;
   /**
    * API METHODS
    */
@@ -82,8 +82,8 @@ export const useGridColumnGrouping = (apiRef, props) => {
     return columnGroupLookup;
   }, [apiRef]);
   const columnGroupingApi = {
-    unstable_getColumnGroupPath: getColumnGroupPath,
-    unstable_getAllGroupDetails: getAllGroupDetails
+    getColumnGroupPath,
+    getAllGroupDetails
   };
   useGridApiMethod(apiRef, columnGroupingApi, 'public');
   const handleColumnIndexChange = React.useCallback(() => {
@@ -92,8 +92,6 @@ export const useGridColumnGrouping = (apiRef, props) => {
     apiRef.current.setState(state => {
       var _state$columns$ordere, _state$columns, _state$pinnedColumns;
       const orderedFields = (_state$columns$ordere = (_state$columns = state.columns) == null ? void 0 : _state$columns.orderedFields) != null ? _state$columns$ordere : [];
-
-      // @ts-expect-error Move this logic to `Pro` package
       const pinnedColumns = (_state$pinnedColumns = state.pinnedColumns) != null ? _state$pinnedColumns : {};
       const columnGroupsHeaderStructure = getColumnGroupsHeaderStructure(orderedFields, unwrappedGroupingModel, pinnedColumns);
       return _extends({}, state, {
@@ -104,10 +102,7 @@ export const useGridColumnGrouping = (apiRef, props) => {
     });
   }, [apiRef, props.columnGroupingModel]);
   const updateColumnGroupingState = React.useCallback(columnGroupingModel => {
-    var _props$experimentalFe2, _apiRef$current$getPi, _apiRef$current$getPi2, _apiRef$current;
-    if (!((_props$experimentalFe2 = props.experimentalFeatures) != null && _props$experimentalFe2.columnGrouping)) {
-      return;
-    }
+    var _apiRef$current$getPi, _apiRef$current$getPi2, _apiRef$current;
     // @ts-expect-error Move this logic to `Pro` package
     const pinnedColumns = (_apiRef$current$getPi = (_apiRef$current$getPi2 = (_apiRef$current = apiRef.current).getPinnedColumns) == null ? void 0 : _apiRef$current$getPi2.call(_apiRef$current)) != null ? _apiRef$current$getPi : {};
     const columnFields = gridColumnFieldsSelector(apiRef);
@@ -129,7 +124,7 @@ export const useGridColumnGrouping = (apiRef, props) => {
         }
       });
     });
-  }, [apiRef, (_props$experimentalFe3 = props.experimentalFeatures) == null ? void 0 : _props$experimentalFe3.columnGrouping]);
+  }, [apiRef]);
   useGridApiEventHandler(apiRef, 'columnIndexChange', handleColumnIndexChange);
   useGridApiEventHandler(apiRef, 'columnsChange', () => {
     updateColumnGroupingState(props.columnGroupingModel);

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

@@ -5,20 +5,17 @@ import { GridSortColumnLookup } from '../sorting';
 import { GridFilterActiveItemsLookup } from '../filter';
 import { GridColumnGroupIdentifier, GridColumnIdentifier } from '../focus';
 import { GridColumnMenuState } from '../columnMenu';
-import { GridColumnVisibilityModel } from '../columns';
+import { GridPinnedColumnPosition, GridColumnVisibilityModel } from '../columns';
 import { GridGroupingStructure } from '../columnGrouping/gridColumnGroupsInterfaces';
 export interface UseGridColumnHeadersProps {
     innerRef?: React.Ref<HTMLDivElement>;
-    minColumnIndex?: number;
     visibleColumns: GridStateColDef[];
     sortColumnLookup: GridSortColumnLookup;
     filterColumnLookup: GridFilterActiveItemsLookup;
-    columnPositions: number[];
     columnHeaderTabIndexState: GridColumnIdentifier | null;
     columnGroupHeaderTabIndexState: GridColumnGroupIdentifier | null;
     columnHeaderFocus: GridColumnIdentifier | null;
     columnGroupHeaderFocus: GridColumnGroupIdentifier | null;
-    densityFactor: number;
     headerGroupingMaxDepth: number;
     columnMenuState: GridColumnMenuState;
     columnVisibility: GridColumnVisibilityModel;
@@ -26,32 +23,30 @@ export interface UseGridColumnHeadersProps {
     hasOtherElementInTabSequence: boolean;
 }
 export interface GetHeadersParams {
-    renderContext: GridRenderContext | null;
+    position?: GridPinnedColumnPosition;
+    renderContext?: GridRenderContext;
     minFirstColumn?: number;
     maxLastColumn?: number;
 }
+export declare const GridColumnHeaderRow: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    ownerState: {
+        params?: GetHeadersParams;
+        leftOverflow?: number;
+    };
+}, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const useGridColumnHeaders: (props: UseGridColumnHeadersProps) => {
-    renderContext: GridRenderContext | null;
-    getColumnHeaders: (params?: GetHeadersParams, other?: {}) => React.JSX.Element | null;
+    renderContext: GridRenderContext;
+    getFiller: (params: GetHeadersParams | undefined, borderTop?: boolean) => React.JSX.Element;
+    getColumnHeaders: (params?: GetHeadersParams, other?: {}) => React.JSX.Element;
     getColumnsToRender: (params?: GetHeadersParams) => {
         renderedColumns: GridStateColDef[];
         firstColumnToRender: number;
         lastColumnToRender: number;
-        minFirstColumn: number;
-        maxLastColumn: number;
-    } | null;
+    };
     getColumnGroupHeaders: (params?: GetHeadersParams) => React.JSX.Element[] | null;
     isDragging: boolean;
-    getRootProps: (other?: {}) => {
-        style: {
-            minHeight: number;
-            maxHeight: number;
-            lineHeight: string;
-        };
-    };
     getInnerProps: () => {
         ref: ((instance: HTMLDivElement | null) => void) | null;
         role: string;
     };
-    headerHeight: number;
 };