@mui/x-data-grid 8.0.0-alpha.11 → 8.0.0-alpha.13

package/hooks/features/columnGrouping/useGridColumnGrouping.js

@@ -1,24 +1,32 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridColumnGrouping = exports.columnGroupsStateInitializer = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _gridColumnGrouping = require("../../../models/gridColumnGrouping");
+var _gridColumnGroupsSelector = require("./gridColumnGroupsSelector");
+var _useGridApiMethod = require("../../utils/useGridApiMethod");
+var _gridColumnGroupsUtils = require("./gridColumnGroupsUtils");
+var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
+var _columns = require("../columns");
 const _excluded = ["groupId", "children"];
-import * as React from 'react';
-import { isLeaf } from "../../../models/gridColumnGrouping.js";
-import { gridColumnGroupsLookupSelector, gridColumnGroupsUnwrappedModelSelector } from "./gridColumnGroupsSelector.js";
-import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
-import { getColumnGroupsHeaderStructure, unwrapGroupingColumnModel } from "./gridColumnGroupsUtils.js";
-import { useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
-import { gridColumnFieldsSelector, gridVisibleColumnFieldsSelector } from "../columns/index.js";
 const createGroupLookup = columnGroupingModel => {
   let groupLookup = {};
   columnGroupingModel.forEach(node => {
-    if (isLeaf(node)) {
+    if ((0, _gridColumnGrouping.isLeaf)(node)) {
       return;
     }
     const {
         groupId,
         children
       } = node,
-      other = _objectWithoutPropertiesLoose(node, _excluded);
+      other = (0, _objectWithoutPropertiesLoose2.default)(node, _excluded);
     if (!groupId) {
       throw new Error('MUI X: An element of the columnGroupingModel does not have either `field` or `groupId`.');
     }
@@ -27,30 +35,30 @@ const createGroupLookup = columnGroupingModel => {
         console.warn(`MUI X: group groupId=${groupId} has no children.`);
       }
     }
-    const groupParam = _extends({}, other, {
+    const groupParam = (0, _extends2.default)({}, other, {
       groupId
     });
     const subTreeLookup = createGroupLookup(children);
     if (subTreeLookup[groupId] !== undefined || groupLookup[groupId] !== undefined) {
       throw new Error(`MUI X: The groupId ${groupId} is used multiple times in the columnGroupingModel.`);
     }
-    groupLookup = _extends({}, groupLookup, subTreeLookup, {
+    groupLookup = (0, _extends2.default)({}, groupLookup, subTreeLookup, {
       [groupId]: groupParam
     });
   });
-  return _extends({}, groupLookup);
+  return (0, _extends2.default)({}, groupLookup);
 };
-export const columnGroupsStateInitializer = (state, props, apiRef) => {
+const columnGroupsStateInitializer = (state, props, apiRef) => {
   if (!props.columnGroupingModel) {
     return state;
   }
-  const columnFields = gridColumnFieldsSelector(apiRef);
-  const visibleColumnFields = gridVisibleColumnFieldsSelector(apiRef);
+  const columnFields = (0, _columns.gridColumnFieldsSelector)(apiRef);
+  const visibleColumnFields = (0, _columns.gridVisibleColumnFieldsSelector)(apiRef);
   const groupLookup = createGroupLookup(props.columnGroupingModel ?? []);
-  const unwrappedGroupingModel = unwrapGroupingColumnModel(props.columnGroupingModel ?? []);
-  const columnGroupsHeaderStructure = getColumnGroupsHeaderStructure(columnFields, unwrappedGroupingModel, apiRef.current.state.pinnedColumns ?? {});
+  const unwrappedGroupingModel = (0, _gridColumnGroupsUtils.unwrapGroupingColumnModel)(props.columnGroupingModel ?? []);
+  const columnGroupsHeaderStructure = (0, _gridColumnGroupsUtils.getColumnGroupsHeaderStructure)(columnFields, unwrappedGroupingModel, apiRef.current.state.pinnedColumns ?? {});
   const maxDepth = visibleColumnFields.length === 0 ? 0 : Math.max(...visibleColumnFields.map(field => unwrappedGroupingModel[field]?.length ?? 0));
-  return _extends({}, state, {
+  return (0, _extends2.default)({}, state, {
     columnGrouping: {
       lookup: groupLookup,
       unwrappedGroupingModel,
@@ -64,31 +72,32 @@ export const columnGroupsStateInitializer = (state, props, apiRef) => {
  * @requires useGridColumns (method, event)
  * @requires useGridParamsApi (method)
  */
-export const useGridColumnGrouping = (apiRef, props) => {
+exports.columnGroupsStateInitializer = columnGroupsStateInitializer;
+const useGridColumnGrouping = (apiRef, props) => {
   /**
    * API METHODS
    */
   const getColumnGroupPath = React.useCallback(field => {
-    const unwrappedGroupingModel = gridColumnGroupsUnwrappedModelSelector(apiRef);
+    const unwrappedGroupingModel = (0, _gridColumnGroupsSelector.gridColumnGroupsUnwrappedModelSelector)(apiRef);
     return unwrappedGroupingModel[field] ?? [];
   }, [apiRef]);
   const getAllGroupDetails = React.useCallback(() => {
-    const columnGroupLookup = gridColumnGroupsLookupSelector(apiRef);
+    const columnGroupLookup = (0, _gridColumnGroupsSelector.gridColumnGroupsLookupSelector)(apiRef);
     return columnGroupLookup;
   }, [apiRef]);
   const columnGroupingApi = {
     getColumnGroupPath,
     getAllGroupDetails
   };
-  useGridApiMethod(apiRef, columnGroupingApi, 'public');
+  (0, _useGridApiMethod.useGridApiMethod)(apiRef, columnGroupingApi, 'public');
   const handleColumnIndexChange = React.useCallback(() => {
-    const unwrappedGroupingModel = unwrapGroupingColumnModel(props.columnGroupingModel ?? []);
+    const unwrappedGroupingModel = (0, _gridColumnGroupsUtils.unwrapGroupingColumnModel)(props.columnGroupingModel ?? []);
     apiRef.current.setState(state => {
       const orderedFields = state.columns?.orderedFields ?? [];
       const pinnedColumns = state.pinnedColumns ?? {};
-      const columnGroupsHeaderStructure = getColumnGroupsHeaderStructure(orderedFields, unwrappedGroupingModel, pinnedColumns);
-      return _extends({}, state, {
-        columnGrouping: _extends({}, state.columnGrouping, {
+      const columnGroupsHeaderStructure = (0, _gridColumnGroupsUtils.getColumnGroupsHeaderStructure)(orderedFields, unwrappedGroupingModel, pinnedColumns);
+      return (0, _extends2.default)({}, state, {
+        columnGrouping: (0, _extends2.default)({}, state.columnGrouping, {
           headerStructure: columnGroupsHeaderStructure
         })
       });
@@ -97,14 +106,14 @@ export const useGridColumnGrouping = (apiRef, props) => {
   const updateColumnGroupingState = React.useCallback(columnGroupingModel => {
     // @ts-expect-error Move this logic to `Pro` package
     const pinnedColumns = apiRef.current.getPinnedColumns?.() ?? {};
-    const columnFields = gridColumnFieldsSelector(apiRef);
-    const visibleColumnFields = gridVisibleColumnFieldsSelector(apiRef);
+    const columnFields = (0, _columns.gridColumnFieldsSelector)(apiRef);
+    const visibleColumnFields = (0, _columns.gridVisibleColumnFieldsSelector)(apiRef);
     const groupLookup = createGroupLookup(columnGroupingModel ?? []);
-    const unwrappedGroupingModel = unwrapGroupingColumnModel(columnGroupingModel ?? []);
-    const columnGroupsHeaderStructure = getColumnGroupsHeaderStructure(columnFields, unwrappedGroupingModel, pinnedColumns);
+    const unwrappedGroupingModel = (0, _gridColumnGroupsUtils.unwrapGroupingColumnModel)(columnGroupingModel ?? []);
+    const columnGroupsHeaderStructure = (0, _gridColumnGroupsUtils.getColumnGroupsHeaderStructure)(columnFields, unwrappedGroupingModel, pinnedColumns);
     const maxDepth = visibleColumnFields.length === 0 ? 0 : Math.max(...visibleColumnFields.map(field => unwrappedGroupingModel[field]?.length ?? 0));
     apiRef.current.setState(state => {
-      return _extends({}, state, {
+      return (0, _extends2.default)({}, state, {
         columnGrouping: {
           lookup: groupLookup,
           unwrappedGroupingModel,
@@ -114,11 +123,11 @@ export const useGridColumnGrouping = (apiRef, props) => {
       });
     });
   }, [apiRef]);
-  useGridApiEventHandler(apiRef, 'columnIndexChange', handleColumnIndexChange);
-  useGridApiEventHandler(apiRef, 'columnsChange', () => {
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnIndexChange', handleColumnIndexChange);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnsChange', () => {
     updateColumnGroupingState(props.columnGroupingModel);
   });
-  useGridApiEventHandler(apiRef, 'columnVisibilityModelChange', () => {
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnVisibilityModelChange', () => {
     updateColumnGroupingState(props.columnGroupingModel);
   });
 
@@ -128,4 +137,5 @@ export const useGridColumnGrouping = (apiRef, props) => {
   React.useEffect(() => {
     updateColumnGroupingState(props.columnGroupingModel);
   }, [updateColumnGroupingState, props.columnGroupingModel]);
-};
+};
+exports.useGridColumnGrouping = useGridColumnGrouping;

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

@@ -1,65 +1,65 @@
 import * as React from 'react';
-import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
+import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
 import type { GridColumnsRenderContext } from '../../../models/params/gridScrollParams';
-import { GridStateColDef } from '../../../models/colDef/gridColDef';
-import { GridSortColumnLookup } from '../sorting';
-import { GridFilterActiveItemsLookup } from '../filter';
-import { GridColumnGroupIdentifier, GridColumnIdentifier } from '../focus';
-import { GridColumnMenuState } from '../columnMenu';
-import { GridColumnVisibilityModel, gridColumnPositionsSelector } from '../columns';
-import { GridGroupingStructure } from '../columnGrouping/gridColumnGroupsInterfaces';
-import { PinnedColumnPosition } from '../../../internals/constants';
+import { GridStateColDef } from "../../../models/colDef/gridColDef.js";
+import { GridSortColumnLookup } from "../sorting/index.js";
+import { GridFilterActiveItemsLookup } from "../filter/index.js";
+import { GridColumnGroupIdentifier, GridColumnIdentifier } from "../focus/index.js";
+import { GridColumnMenuState } from "../columnMenu/index.js";
+import { GridColumnVisibilityModel, gridColumnPositionsSelector } from "../columns/index.js";
+import { GridGroupingStructure } from "../columnGrouping/gridColumnGroupsInterfaces.js";
+import { PinnedColumnPosition } from "../../../internals/constants.js";
 export interface UseGridColumnHeadersProps {
-    visibleColumns: GridStateColDef[];
-    sortColumnLookup: GridSortColumnLookup;
-    filterColumnLookup: GridFilterActiveItemsLookup;
-    columnHeaderTabIndexState: GridColumnIdentifier | null;
-    columnGroupHeaderTabIndexState: GridColumnGroupIdentifier | null;
-    columnHeaderFocus: GridColumnIdentifier | null;
-    columnGroupHeaderFocus: GridColumnGroupIdentifier | null;
-    headerGroupingMaxDepth: number;
-    columnMenuState: GridColumnMenuState;
-    columnVisibility: GridColumnVisibilityModel;
-    columnGroupsHeaderStructure: GridGroupingStructure[][];
-    hasOtherElementInTabSequence: boolean;
+  visibleColumns: GridStateColDef[];
+  sortColumnLookup: GridSortColumnLookup;
+  filterColumnLookup: GridFilterActiveItemsLookup;
+  columnHeaderTabIndexState: GridColumnIdentifier | null;
+  columnGroupHeaderTabIndexState: GridColumnGroupIdentifier | null;
+  columnHeaderFocus: GridColumnIdentifier | null;
+  columnGroupHeaderFocus: GridColumnGroupIdentifier | null;
+  headerGroupingMaxDepth: number;
+  columnMenuState: GridColumnMenuState;
+  columnVisibility: GridColumnVisibilityModel;
+  columnGroupsHeaderStructure: GridGroupingStructure[][];
+  hasOtherElementInTabSequence: boolean;
 }
 export interface GetHeadersParams {
-    position?: PinnedColumnPosition;
-    renderContext?: GridColumnsRenderContext;
-    maxLastColumn?: number;
+  position?: PinnedColumnPosition;
+  renderContext?: GridColumnsRenderContext;
+  maxLastColumn?: number;
 }
 type OwnerState = DataGridProcessedProps;
 export declare const GridColumnHeaderRow: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
-    ownerState: OwnerState;
+  ownerState: OwnerState;
 }, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const useGridColumnHeaders: (props: UseGridColumnHeadersProps) => {
-    renderContext: GridColumnsRenderContext;
-    leftRenderContext: {
-        firstColumnIndex: number;
-        lastColumnIndex: number;
-    } | null;
-    rightRenderContext: {
-        firstColumnIndex: number;
-        lastColumnIndex: number;
-    } | null;
-    pinnedColumns: {
-        left: GridStateColDef[];
-        right: GridStateColDef[];
-    };
-    visibleColumns: GridStateColDef[];
-    columnPositions: number[];
-    getFillers: (params: GetHeadersParams | undefined, children: React.ReactNode, leftOverflow: number, borderBottom?: boolean) => React.JSX.Element;
-    getColumnHeadersRow: () => React.JSX.Element;
-    getColumnsToRender: (params?: GetHeadersParams) => {
-        renderedColumns: GridStateColDef[];
-        firstColumnToRender: number;
-        lastColumnToRender: number;
-    };
-    getColumnGroupHeadersRows: () => React.JSX.Element[] | null;
-    getPinnedCellOffset: (pinnedPosition: PinnedColumnPosition | undefined, computedWidth: number, columnIndex: number, columnPositions: ReturnType<typeof gridColumnPositionsSelector>, columnsTotalWidth: number, scrollbarWidth: number) => number | undefined;
-    isDragging: boolean;
-    getInnerProps: () => {
-        role: string;
-    };
+  renderContext: GridColumnsRenderContext;
+  leftRenderContext: {
+    firstColumnIndex: number;
+    lastColumnIndex: number;
+  } | null;
+  rightRenderContext: {
+    firstColumnIndex: number;
+    lastColumnIndex: number;
+  } | null;
+  pinnedColumns: {
+    left: GridStateColDef[];
+    right: GridStateColDef[];
+  };
+  visibleColumns: GridStateColDef[];
+  columnPositions: number[];
+  getFillers: (params: GetHeadersParams | undefined, children: React.ReactNode, leftOverflow: number, borderBottom?: boolean) => React.JSX.Element;
+  getColumnHeadersRow: () => React.JSX.Element;
+  getColumnsToRender: (params?: GetHeadersParams) => {
+    renderedColumns: GridStateColDef[];
+    firstColumnToRender: number;
+    lastColumnToRender: number;
+  };
+  getColumnGroupHeadersRows: () => React.JSX.Element[] | null;
+  getPinnedCellOffset: (pinnedPosition: PinnedColumnPosition | undefined, computedWidth: number, columnIndex: number, columnPositions: ReturnType<typeof gridColumnPositionsSelector>, columnsTotalWidth: number, scrollbarWidth: number) => number | undefined;
+  isDragging: boolean;
+  getInnerProps: () => {
+    role: string;
+  };
 };
-export {};
+export {};

package/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -1,33 +1,41 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import clsx from 'clsx';
-import { styled } from '@mui/material/styles';
-import { useGridSelector } from "../../utils/index.js";
-import { useGridRootProps } from "../../utils/useGridRootProps.js";
-import { useGridPrivateApiContext } from "../../utils/useGridPrivateApiContext.js";
-import { useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
-import { GridColumnHeaderItem } from "../../../components/columnHeaders/GridColumnHeaderItem.js";
-import { gridColumnsTotalWidthSelector, gridGroupHeaderHeightSelector, gridHasFillerSelector, gridHeaderHeightSelector, gridVerticalScrollbarWidthSelector } from "../dimensions/gridDimensionsSelectors.js";
-import { gridRenderContextColumnsSelector } from "../virtualization/index.js";
-import { computeOffsetLeft } from "../virtualization/useGridVirtualScroller.js";
-import { GridColumnGroupHeader } from "../../../components/columnHeaders/GridColumnGroupHeader.js";
-import { gridColumnPositionsSelector, gridVisiblePinnedColumnDefinitionsSelector, gridColumnLookupSelector } from "../columns/index.js";
-import { gridColumnGroupsUnwrappedModelSelector } from "../columnGrouping/gridColumnGroupsSelector.js";
-import { GridScrollbarFillerCell as ScrollbarFiller } from "../../../components/GridScrollbarFillerCell.js";
-import { getPinnedCellOffset } from "../../../internals/utils/getPinnedCellOffset.js";
-import { GridColumnHeaderSeparatorSides } from "../../../components/columnHeaders/GridColumnHeaderSeparator.js";
-import { gridClasses } from "../../../constants/gridClasses.js";
-import { shouldCellShowLeftBorder, shouldCellShowRightBorder } from "../../../utils/cellBorderUtils.js";
-import { PinnedColumnPosition } from "../../../internals/constants.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const GridColumnHeaderRow = styled('div', {
+"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.useGridColumnHeaders = exports.GridColumnHeaderRow = void 0;
+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 _utils = require("../../utils");
+var _useGridRootProps = require("../../utils/useGridRootProps");
+var _useGridPrivateApiContext = require("../../utils/useGridPrivateApiContext");
+var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
+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");
+var _GridScrollbarFillerCell = require("../../../components/GridScrollbarFillerCell");
+var _getPinnedCellOffset = require("../../../internals/utils/getPinnedCellOffset");
+var _GridColumnHeaderSeparator = require("../../../components/columnHeaders/GridColumnHeaderSeparator");
+var _gridClasses = require("../../../constants/gridClasses");
+var _cellBorderUtils = require("../../../utils/cellBorderUtils");
+var _constants = require("../../../internals/constants");
+var _jsxRuntime = require("react/jsx-runtime");
+const GridColumnHeaderRow = exports.GridColumnHeaderRow = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'ColumnHeaderRow',
   overridesResolver: (_, styles) => styles.columnHeaderRow
 })({
   display: 'flex'
 });
-export const useGridColumnHeaders = props => {
+const useGridColumnHeaders = props => {
   const {
     visibleColumns,
     sortColumnLookup,
@@ -44,19 +52,19 @@ export const useGridColumnHeaders = props => {
   } = props;
   const [dragCol, setDragCol] = React.useState('');
   const [resizeCol, setResizeCol] = React.useState('');
-  const apiRef = useGridPrivateApiContext();
-  const rootProps = useGridRootProps();
-  const columnGroupsModel = useGridSelector(apiRef, gridColumnGroupsUnwrappedModelSelector);
-  const columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
-  const renderContext = useGridSelector(apiRef, gridRenderContextColumnsSelector);
-  const pinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
-  const columnsLookup = useGridSelector(apiRef, gridColumnLookupSelector);
-  const offsetLeft = computeOffsetLeft(columnPositions, renderContext, pinnedColumns.left.length);
-  const columnsTotalWidth = useGridSelector(apiRef, gridColumnsTotalWidthSelector);
-  const gridHasFiller = useGridSelector(apiRef, gridHasFillerSelector);
-  const headerHeight = useGridSelector(apiRef, gridHeaderHeightSelector);
-  const groupHeaderHeight = useGridSelector(apiRef, gridGroupHeaderHeightSelector);
-  const scrollbarWidth = useGridSelector(apiRef, gridVerticalScrollbarWidthSelector);
+  const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const columnGroupsModel = (0, _utils.useGridSelector)(apiRef, _gridColumnGroupsSelector.gridColumnGroupsUnwrappedModelSelector);
+  const columnPositions = (0, _utils.useGridSelector)(apiRef, _columns.gridColumnPositionsSelector);
+  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 columnsTotalWidth = (0, _utils.useGridSelector)(apiRef, _gridDimensionsSelectors.gridColumnsTotalWidthSelector);
+  const gridHasFiller = (0, _utils.useGridSelector)(apiRef, _gridDimensionsSelectors.gridHasFillerSelector);
+  const headerHeight = (0, _utils.useGridSelector)(apiRef, _gridDimensionsSelectors.gridHeaderHeightSelector);
+  const groupHeaderHeight = (0, _utils.useGridSelector)(apiRef, _gridDimensionsSelectors.gridGroupHeaderHeightSelector);
+  const scrollbarWidth = (0, _utils.useGridSelector)(apiRef, _gridDimensionsSelectors.gridVerticalScrollbarWidthSelector);
   const handleColumnResizeStart = React.useCallback(params => setResizeCol(params.field), []);
   const handleColumnResizeStop = React.useCallback(() => setResizeCol(''), []);
   const handleColumnReorderStart = React.useCallback(params => setDragCol(params.field), []);
@@ -73,10 +81,10 @@ export const useGridColumnHeaders = props => {
       lastColumnIndex: visibleColumns.length
     } : null;
   }, [pinnedColumns.right.length, visibleColumns.length]);
-  useGridApiEventHandler(apiRef, 'columnResizeStart', handleColumnResizeStart);
-  useGridApiEventHandler(apiRef, 'columnResizeStop', handleColumnResizeStop);
-  useGridApiEventHandler(apiRef, 'columnHeaderDragStart', handleColumnReorderStart);
-  useGridApiEventHandler(apiRef, 'columnHeaderDragEnd', handleColumnReorderStop);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnResizeStart', handleColumnResizeStart);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnResizeStop', handleColumnResizeStop);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnHeaderDragStart', handleColumnReorderStart);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnHeaderDragEnd', handleColumnReorderStop);
 
   // Helper for computation common between getColumnHeaders and getColumnGroupHeaders
   const getColumnsToRender = params => {
@@ -93,20 +101,20 @@ export const useGridColumnHeaders = props => {
     };
   };
   const getFillers = (params, children, leftOverflow, borderBottom = false) => {
-    const isPinnedRight = params?.position === PinnedColumnPosition.RIGHT;
+    const isPinnedRight = params?.position === _constants.PinnedColumnPosition.RIGHT;
     const isNotPinned = params?.position === undefined;
     const hasScrollbarFiller = pinnedColumns.right.length > 0 && isPinnedRight || pinnedColumns.right.length === 0 && isNotPinned;
     const leftOffsetWidth = offsetLeft - leftOverflow;
-    return /*#__PURE__*/_jsxs(React.Fragment, {
-      children: [isNotPinned && /*#__PURE__*/_jsx("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+      children: [isNotPinned && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         role: "presentation",
         style: {
           width: leftOffsetWidth
         }
-      }), children, isNotPinned && /*#__PURE__*/_jsx("div", {
+      }), children, isNotPinned && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         role: "presentation",
-        className: clsx(gridClasses.filler, borderBottom && gridClasses['filler--borderBottom'])
-      }), hasScrollbarFiller && /*#__PURE__*/_jsx(ScrollbarFiller, {
+        className: (0, _clsx.default)(_gridClasses.gridClasses.filler, borderBottom && _gridClasses.gridClasses['filler--borderBottom'])
+      }), hasScrollbarFiller && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollbarFillerCell.GridScrollbarFillerCell, {
         header: true,
         pinnedRight: isPinnedRight,
         borderBottom: borderBottom,
@@ -128,15 +136,15 @@ export const useGridColumnHeaders = props => {
       const hasFocus = columnHeaderFocus !== null && columnHeaderFocus.field === colDef.field;
       const open = columnMenuState.open && columnMenuState.field === colDef.field;
       const pinnedPosition = params?.position;
-      const pinnedOffset = getPinnedCellOffset(pinnedPosition, colDef.computedWidth, columnIndex, columnPositions, columnsTotalWidth, scrollbarWidth);
-      const siblingWithBorderingSeparator = pinnedPosition === PinnedColumnPosition.RIGHT ? renderedColumns[i - 1] : renderedColumns[i + 1];
+      const pinnedOffset = (0, _getPinnedCellOffset.getPinnedCellOffset)(pinnedPosition, colDef.computedWidth, columnIndex, columnPositions, columnsTotalWidth, scrollbarWidth);
+      const siblingWithBorderingSeparator = pinnedPosition === _constants.PinnedColumnPosition.RIGHT ? renderedColumns[i - 1] : renderedColumns[i + 1];
       const isSiblingFocused = siblingWithBorderingSeparator ? columnHeaderFocus !== null && columnHeaderFocus.field === siblingWithBorderingSeparator.field : false;
       const isLastUnpinned = columnIndex + 1 === columnPositions.length - pinnedColumns.right.length;
       const indexInSection = i;
       const sectionLength = renderedColumns.length;
-      const showLeftBorder = shouldCellShowLeftBorder(pinnedPosition, indexInSection);
-      const showRightBorder = shouldCellShowRightBorder(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder, gridHasFiller);
-      columns.push(/*#__PURE__*/_jsx(GridColumnHeaderItem, _extends({}, sortColumnLookup[colDef.field], {
+      const showLeftBorder = (0, _cellBorderUtils.shouldCellShowLeftBorder)(pinnedPosition, indexInSection);
+      const showRightBorder = (0, _cellBorderUtils.shouldCellShowRightBorder)(pinnedPosition, indexInSection, sectionLength, rootProps.showColumnVerticalBorder, gridHasFiller);
+      columns.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnHeaderItem.GridColumnHeaderItem, (0, _extends2.default)({}, sortColumnLookup[colDef.field], {
         columnMenuOpen: open,
         filterItemsCounter: filterColumnLookup[colDef.field] && filterColumnLookup[colDef.field].length,
         headerHeight: headerHeight,
@@ -158,24 +166,27 @@ export const useGridColumnHeaders = props => {
     return getFillers(params, columns, 0);
   };
   const getColumnHeadersRow = () => {
-    return /*#__PURE__*/_jsxs(GridColumnHeaderRow, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridColumnHeaderRow, {
       role: "row",
       "aria-rowindex": headerGroupingMaxDepth + 1,
       ownerState: rootProps,
-      className: gridClasses['row--borderBottom'],
+      className: _gridClasses.gridClasses['row--borderBottom'],
+      style: {
+        height: headerHeight
+      },
       children: [leftRenderContext && getColumnHeaders({
-        position: PinnedColumnPosition.LEFT,
+        position: _constants.PinnedColumnPosition.LEFT,
         renderContext: leftRenderContext
       }, {
         disableReorder: true
       }), getColumnHeaders({
         renderContext
       }), rightRenderContext && getColumnHeaders({
-        position: PinnedColumnPosition.RIGHT,
+        position: _constants.PinnedColumnPosition.RIGHT,
         renderContext: rightRenderContext
       }, {
         disableReorder: true,
-        separatorSide: GridColumnHeaderSeparatorSides.Left
+        separatorSide: _GridColumnHeaderSeparator.GridColumnHeaderSeparatorSides.Left
       })]
     });
   };
@@ -205,7 +216,7 @@ export const useGridColumnHeaders = props => {
       columnFields
     }) => groupId === lastGroupToRender && columnFields.includes(lastColumnFieldToRender));
     const visibleColumnGroupHeader = rowStructure.slice(firstGroupIndex, lastGroupIndex + 1).map(groupStructure => {
-      return _extends({}, groupStructure, {
+      return (0, _extends2.default)({}, groupStructure, {
         columnFields: groupStructure.columnFields.filter(field => columnVisibility[field] !== false)
       });
     }).filter(groupStructure => groupStructure.columnFields.length > 0);
@@ -231,14 +242,14 @@ export const useGridColumnHeaders = props => {
         tabIndex
       };
       const pinnedPosition = params.position;
-      const pinnedOffset = getPinnedCellOffset(pinnedPosition, headerInfo.width, columnIndex, columnPositions, columnsTotalWidth, scrollbarWidth);
+      const pinnedOffset = (0, _getPinnedCellOffset.getPinnedCellOffset)(pinnedPosition, headerInfo.width, columnIndex, columnPositions, columnsTotalWidth, scrollbarWidth);
       columnIndex += columnFields.length;
       let indexInSection = index;
-      if (pinnedPosition === PinnedColumnPosition.LEFT) {
+      if (pinnedPosition === _constants.PinnedColumnPosition.LEFT) {
         // Group headers can expand to multiple columns, we need to adjust the index
         indexInSection = columnIndex - 1;
       }
-      return /*#__PURE__*/_jsx(GridColumnGroupHeader, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnGroupHeader.GridColumnGroupHeader, {
         groupId: groupId,
         width: headerInfo.width,
         fields: headerInfo.fields,
@@ -251,8 +262,8 @@ export const useGridColumnHeaders = props => {
         tabIndex: tabIndex,
         pinnedPosition: pinnedPosition,
         pinnedOffset: pinnedOffset,
-        showLeftBorder: shouldCellShowLeftBorder(pinnedPosition, indexInSection),
-        showRightBorder: shouldCellShowRightBorder(pinnedPosition, indexInSection, visibleColumnGroupHeader.length, rootProps.showCellVerticalBorder, gridHasFiller)
+        showLeftBorder: (0, _cellBorderUtils.shouldCellShowLeftBorder)(pinnedPosition, indexInSection),
+        showRightBorder: (0, _cellBorderUtils.shouldCellShowRightBorder)(pinnedPosition, indexInSection, visibleColumnGroupHeader.length, rootProps.showColumnVerticalBorder, gridHasFiller)
       }, index);
     });
     return getFillers(params, children, leftOverflow);
@@ -263,14 +274,17 @@ export const useGridColumnHeaders = props => {
     }
     const headerRows = [];
     for (let depth = 0; depth < headerGroupingMaxDepth; depth += 1) {
-      headerRows.push(/*#__PURE__*/_jsxs(GridColumnHeaderRow, {
+      headerRows.push(/*#__PURE__*/(0, _jsxRuntime.jsxs)(GridColumnHeaderRow, {
         role: "row",
         "aria-rowindex": depth + 1,
         ownerState: rootProps,
+        style: {
+          height: groupHeaderHeight
+        },
         children: [leftRenderContext && getColumnGroupHeaders({
           depth,
           params: {
-            position: PinnedColumnPosition.LEFT,
+            position: _constants.PinnedColumnPosition.LEFT,
             renderContext: leftRenderContext,
             maxLastColumn: leftRenderContext.lastColumnIndex
           }
@@ -282,7 +296,7 @@ export const useGridColumnHeaders = props => {
         }), rightRenderContext && getColumnGroupHeaders({
           depth,
           params: {
-            position: PinnedColumnPosition.RIGHT,
+            position: _constants.PinnedColumnPosition.RIGHT,
             renderContext: rightRenderContext,
             maxLastColumn: rightRenderContext.lastColumnIndex
           }
@@ -302,10 +316,11 @@ export const useGridColumnHeaders = props => {
     getColumnHeadersRow,
     getColumnsToRender,
     getColumnGroupHeadersRows,
-    getPinnedCellOffset,
+    getPinnedCellOffset: _getPinnedCellOffset.getPinnedCellOffset,
     isDragging: !!dragCol,
     getInnerProps: () => ({
       role: 'rowgroup'
     })
   };
-};
+};
+exports.useGridColumnHeaders = useGridColumnHeaders;