@mui/x-data-grid 8.28.7 → 8.29.1

package/hooks/features/columnGrouping/gridColumnGroupsUtils.mjs

@@ -0,0 +1,119 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["groupId", "children"];
+import { isLeaf } from "../../../models/gridColumnGrouping.mjs";
+export const createGroupLookup = columnGroupingModel => {
+  const groupLookup = {};
+  for (let i = 0; i < columnGroupingModel.length; i += 1) {
+    const node = columnGroupingModel[i];
+    if (isLeaf(node)) {
+      continue;
+    }
+    const {
+        groupId,
+        children
+      } = node,
+      other = _objectWithoutPropertiesLoose(node, _excluded);
+    if (!groupId) {
+      throw new Error('MUI X: An element of the columnGroupingModel does not have either `field` or `groupId`.');
+    }
+    if (process.env.NODE_ENV !== 'production' && !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 X: The groupId ${groupId} is used multiple times in the columnGroupingModel.`);
+    }
+    Object.assign(groupLookup, subTreeLookup);
+    groupLookup[groupId] = groupParam;
+  }
+  return groupLookup;
+};
+
+// This is the recurrence function that help writing `unwrapGroupingColumnModel()`
+const recurrentUnwrapGroupingColumnModel = (columnGroupNode, parents, unwrappedGroupingModelToComplete) => {
+  if (isLeaf(columnGroupNode)) {
+    if (unwrappedGroupingModelToComplete[columnGroupNode.field] !== undefined) {
+      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;
+  }
+  const {
+    groupId,
+    children
+  } = columnGroupNode;
+  children.forEach(child => {
+    recurrentUnwrapGroupingColumnModel(child, [...parents, groupId], unwrappedGroupingModelToComplete);
+  });
+};
+
+/**
+ * This is a function that provide for each column the array of its parents.
+ * Parents are ordered from the root to the leaf.
+ * @param columnGroupingModel The model such as provided in DataGrid props
+ * @returns An object `{[field]: groupIds}` where `groupIds` is the parents of the column `field`
+ */
+export const unwrapGroupingColumnModel = columnGroupingModel => {
+  if (!columnGroupingModel) {
+    return {};
+  }
+  const unwrappedSubTree = {};
+  columnGroupingModel.forEach(columnGroupNode => {
+    recurrentUnwrapGroupingColumnModel(columnGroupNode, [], unwrappedSubTree);
+  });
+  return unwrappedSubTree;
+};
+export const getColumnGroupsHeaderStructure = (orderedColumns, unwrappedGroupingModel, pinnedFields) => {
+  const getParents = field => unwrappedGroupingModel[field] ?? [];
+  const groupingHeaderStructure = [];
+  const maxDepth = Math.max(0, ...orderedColumns.map(field => getParents(field).length));
+  const haveSameParents = (field1, field2, depth) => {
+    const a = getParents(field1);
+    const b = getParents(field2);
+    for (let i = 0; i <= depth; i += 1) {
+      if (a[i] !== b[i]) {
+        return false;
+      }
+    }
+    return true;
+  };
+  const haveDifferentContainers = (field1, field2) => {
+    const left = pinnedFields?.left;
+    const right = pinnedFields?.right;
+    const inLeft1 = !!left?.includes(field1);
+    const inLeft2 = !!left?.includes(field2);
+    const inRight1 = !!right?.includes(field1);
+    const inRight2 = !!right?.includes(field2);
+    return inLeft1 !== inLeft2 || inRight1 !== inRight2;
+  };
+  for (let depth = 0; depth < maxDepth; depth += 1) {
+    const depthStructure = [];
+    for (let i = 0; i < orderedColumns.length; i += 1) {
+      const field = orderedColumns[i];
+      const groupId = getParents(field)[depth] ?? null;
+      if (depthStructure.length === 0) {
+        depthStructure.push({
+          columnFields: [field],
+          groupId
+        });
+        continue;
+      }
+      const lastGroup = depthStructure[depthStructure.length - 1];
+      const prevField = lastGroup.columnFields[lastGroup.columnFields.length - 1];
+      if (lastGroup.groupId !== groupId || !haveSameParents(prevField, field, depth) || haveDifferentContainers(prevField, field)) {
+        depthStructure.push({
+          columnFields: [field],
+          groupId
+        });
+      } else {
+        lastGroup.columnFields.push(field);
+      }
+    }
+    groupingHeaderStructure.push(depthStructure);
+  }
+  return groupingHeaderStructure;
+};

package/hooks/features/columnGrouping/index.d.mts

@@ -0,0 +1,2 @@
+export * from "./gridColumnGroupsSelector.mjs";
+export type { GridColumnsGroupingState } from "./gridColumnGroupsInterfaces.mjs";

package/hooks/features/columnGrouping/index.mjs

@@ -0,0 +1,2 @@
+export * from "./gridColumnGroupsSelector.mjs";
+export {};

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

@@ -0,0 +1,10 @@
+import type { RefObject } from '@mui/x-internals/types';
+import type { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.mjs";
+import type { DataGridProcessedProps } from "../../../models/props/DataGridProps.mjs";
+import type { GridStateInitializer } from "../../utils/useGridInitializeState.mjs";
+export declare const columnGroupsStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'columnGroupingModel'>>;
+/**
+ * @requires useGridColumns (method, event)
+ * @requires useGridParamsApi (method)
+ */
+export declare const useGridColumnGrouping: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "columnGroupingModel">) => void;

package/hooks/features/columnGrouping/useGridColumnGrouping.mjs

@@ -0,0 +1,110 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { gridColumnGroupsLookupSelector, gridColumnGroupsUnwrappedModelSelector } from "./gridColumnGroupsSelector.mjs";
+import { useGridApiMethod } from "../../utils/useGridApiMethod.mjs";
+import { createGroupLookup, getColumnGroupsHeaderStructure, unwrapGroupingColumnModel } from "./gridColumnGroupsUtils.mjs";
+import { useGridEvent } from "../../utils/useGridEvent.mjs";
+import { gridColumnFieldsSelector, gridVisibleColumnFieldsSelector } from "../columns/index.mjs";
+export const columnGroupsStateInitializer = (state, props, apiRef) => {
+  apiRef.current.caches.columnGrouping = {
+    lastColumnGroupingModel: props.columnGroupingModel
+  };
+  if (!props.columnGroupingModel) {
+    return _extends({}, state, {
+      columnGrouping: undefined
+    });
+  }
+  const columnFields = gridColumnFieldsSelector(apiRef);
+  const visibleColumnFields = gridVisibleColumnFieldsSelector(apiRef);
+  const groupLookup = createGroupLookup(props.columnGroupingModel ?? []);
+  const unwrappedGroupingModel = unwrapGroupingColumnModel(props.columnGroupingModel ?? []);
+  const columnGroupsHeaderStructure = 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, {
+    columnGrouping: {
+      lookup: groupLookup,
+      unwrappedGroupingModel,
+      headerStructure: columnGroupsHeaderStructure,
+      maxDepth
+    }
+  });
+};
+
+/**
+ * @requires useGridColumns (method, event)
+ * @requires useGridParamsApi (method)
+ */
+export const useGridColumnGrouping = (apiRef, props) => {
+  /**
+   * API METHODS
+   */
+  const getColumnGroupPath = React.useCallback(field => {
+    const unwrappedGroupingModel = gridColumnGroupsUnwrappedModelSelector(apiRef);
+    return unwrappedGroupingModel[field] ?? [];
+  }, [apiRef]);
+  const getAllGroupDetails = React.useCallback(() => {
+    const columnGroupLookup = gridColumnGroupsLookupSelector(apiRef);
+    return columnGroupLookup;
+  }, [apiRef]);
+  const columnGroupingApi = {
+    getColumnGroupPath,
+    getAllGroupDetails
+  };
+  useGridApiMethod(apiRef, columnGroupingApi, 'public');
+  const handleColumnIndexChange = React.useCallback(() => {
+    const unwrappedGroupingModel = 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, {
+          headerStructure: columnGroupsHeaderStructure
+        })
+      });
+    });
+  }, [apiRef, props.columnGroupingModel]);
+  const updateColumnGroupingState = React.useCallback(columnGroupingModel => {
+    if (!columnGroupingModel && !apiRef.current.caches.columnGrouping.lastColumnGroupingModel) {
+      return;
+    }
+    apiRef.current.caches.columnGrouping.lastColumnGroupingModel = columnGroupingModel;
+    // @ts-expect-error Move this logic to `Pro` package
+    const pinnedColumns = apiRef.current.getPinnedColumns?.() ?? {};
+    const columnFields = gridColumnFieldsSelector(apiRef);
+    const visibleColumnFields = gridVisibleColumnFieldsSelector(apiRef);
+    const groupLookup = createGroupLookup(columnGroupingModel ?? []);
+    const unwrappedGroupingModel = unwrapGroupingColumnModel(columnGroupingModel ?? []);
+    const columnGroupsHeaderStructure = 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, {
+        columnGrouping: {
+          lookup: groupLookup,
+          unwrappedGroupingModel,
+          headerStructure: columnGroupsHeaderStructure,
+          maxDepth
+        }
+      });
+    });
+  }, [apiRef]);
+  useGridEvent(apiRef, 'columnIndexChange', handleColumnIndexChange);
+  useGridEvent(apiRef, 'columnsChange', () => {
+    updateColumnGroupingState(props.columnGroupingModel);
+  });
+  useGridEvent(apiRef, 'columnVisibilityModelChange', () => {
+    updateColumnGroupingState(props.columnGroupingModel);
+  });
+
+  /**
+   * EFFECTS
+   */
+  React.useEffect(() => {
+    if (props.columnGroupingModel === apiRef.current.caches.columnGrouping.lastColumnGroupingModel) {
+      return;
+    }
+    updateColumnGroupingState(props.columnGroupingModel);
+  }, [apiRef, updateColumnGroupingState, props.columnGroupingModel]);
+};

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

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import type { DataGridProcessedProps } from "../../../models/props/DataGridProps.mjs";
+import type { GridColumnsRenderContext } from "../../../models/params/gridScrollParams.mjs";
+import type { GridStateColDef } from "../../../models/colDef/gridColDef.mjs";
+import type { GridSortColumnLookup } from "../sorting/index.mjs";
+import type { GridFilterActiveItemsLookup } from "../filter/index.mjs";
+import type { GridColumnGroupIdentifier, GridColumnIdentifier } from "../focus/index.mjs";
+import type { GridColumnMenuState } from "../columnMenu/index.mjs";
+import { type GridColumnVisibilityModel, gridColumnPositionsSelector } from "../columns/index.mjs";
+import type { GridGroupingStructure } from "../columnGrouping/gridColumnGroupsInterfaces.mjs";
+import { PinnedColumnPosition } from "../../../internals/constants.mjs";
+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;
+}
+export interface GetHeadersParams {
+  position?: PinnedColumnPosition;
+  renderContext?: GridColumnsRenderContext;
+  maxLastColumn?: number;
+}
+type OwnerState = DataGridProcessedProps;
+export declare const GridColumnHeaderRow: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+  ownerState: OwnerState;
+}, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.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) => import("react/jsx-runtime").JSX.Element;
+  getColumnHeadersRow: () => import("react/jsx-runtime").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 {};

package/hooks/features/columnHeaders/useGridColumnHeaders.mjs

@@ -0,0 +1,316 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import clsx from 'clsx';
+import { styled } from '@mui/material/styles';
+import { computeOffsetLeft } from '@mui/x-virtualizer';
+import { useGridSelector } from "../../utils/index.mjs";
+import { useGridRootProps } from "../../utils/useGridRootProps.mjs";
+import { useGridPrivateApiContext } from "../../utils/useGridPrivateApiContext.mjs";
+import { useGridEvent } from "../../utils/useGridEvent.mjs";
+import { GridColumnHeaderItem } from "../../../components/columnHeaders/GridColumnHeaderItem.mjs";
+import { gridColumnsTotalWidthSelector, gridGroupHeaderHeightSelector, gridHasFillerSelector, gridHeaderHeightSelector, gridVerticalScrollbarWidthSelector } from "../dimensions/gridDimensionsSelectors.mjs";
+import { gridRenderContextColumnsSelector } from "../virtualization/index.mjs";
+import { GridColumnGroupHeader } from "../../../components/columnHeaders/GridColumnGroupHeader.mjs";
+import { gridColumnPositionsSelector, gridVisiblePinnedColumnDefinitionsSelector, gridColumnLookupSelector } from "../columns/index.mjs";
+import { gridColumnGroupsUnwrappedModelSelector } from "../columnGrouping/gridColumnGroupsSelector.mjs";
+import { GridScrollbarFillerCell as ScrollbarFiller } from "../../../components/GridScrollbarFillerCell.mjs";
+import { getPinnedCellOffset } from "../../../internals/utils/getPinnedCellOffset.mjs";
+import { GridColumnHeaderSeparatorSides } from "../../../components/columnHeaders/GridColumnHeaderSeparator.mjs";
+import { gridClasses } from "../../../constants/gridClasses.mjs";
+import { shouldCellShowLeftBorder, shouldCellShowRightBorder } from "../../../utils/cellBorderUtils.mjs";
+import { PinnedColumnPosition } from "../../../internals/constants.mjs";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const GridColumnHeaderRow = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ColumnHeaderRow'
+})({
+  display: 'flex'
+});
+export const useGridColumnHeaders = props => {
+  const {
+    visibleColumns,
+    sortColumnLookup,
+    filterColumnLookup,
+    columnHeaderTabIndexState,
+    columnGroupHeaderTabIndexState,
+    columnHeaderFocus,
+    columnGroupHeaderFocus,
+    headerGroupingMaxDepth,
+    columnMenuState,
+    columnVisibility,
+    columnGroupsHeaderStructure,
+    hasOtherElementInTabSequence
+  } = 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 handleColumnResizeStart = React.useCallback(params => setResizeCol(params.field), []);
+  const handleColumnResizeStop = React.useCallback(() => setResizeCol(''), []);
+  const handleColumnReorderStart = React.useCallback(params => setDragCol(params.field), []);
+  const handleColumnReorderStop = React.useCallback(() => setDragCol(''), []);
+  const leftRenderContext = React.useMemo(() => {
+    return pinnedColumns.left.length ? {
+      firstColumnIndex: 0,
+      lastColumnIndex: pinnedColumns.left.length
+    } : null;
+  }, [pinnedColumns.left.length]);
+  const rightRenderContext = React.useMemo(() => {
+    return pinnedColumns.right.length ? {
+      firstColumnIndex: visibleColumns.length - pinnedColumns.right.length,
+      lastColumnIndex: visibleColumns.length
+    } : null;
+  }, [pinnedColumns.right.length, visibleColumns.length]);
+  useGridEvent(apiRef, 'columnResizeStart', handleColumnResizeStart);
+  useGridEvent(apiRef, 'columnResizeStop', handleColumnResizeStop);
+  useGridEvent(apiRef, 'columnHeaderDragStart', handleColumnReorderStart);
+  useGridEvent(apiRef, 'columnHeaderDragEndNative', handleColumnReorderStop);
+
+  // Helper for computation common between getColumnHeaders and getColumnGroupHeaders
+  const getColumnsToRender = params => {
+    const {
+      renderContext: currentContext = renderContext
+    } = params || {};
+    const firstColumnToRender = currentContext.firstColumnIndex;
+    // HACK: renderContext ins't always synchronized, this should be handled properly.
+    const lastColumnToRender = Math.min(currentContext.lastColumnIndex, visibleColumns.length);
+    const renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender);
+    return {
+      renderedColumns,
+      firstColumnToRender,
+      lastColumnToRender
+    };
+  };
+  const getFillers = (params, children, leftOverflow, borderBottom = false) => {
+    const isPinnedRight = params?.position === 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", {
+        role: "presentation",
+        style: {
+          width: leftOffsetWidth
+        }
+      }), children, isNotPinned && /*#__PURE__*/_jsx("div", {
+        role: "presentation",
+        className: clsx(gridClasses.filler, borderBottom && gridClasses['filler--borderBottom'])
+      }), hasScrollbarFiller && /*#__PURE__*/_jsx(ScrollbarFiller, {
+        pinnedRight: isPinnedRight
+      })]
+    });
+  };
+  if (process.env.NODE_ENV !== "production") getFillers.displayName = "getFillers";
+  const getColumnHeaders = (params, other = {}) => {
+    const {
+      renderedColumns,
+      firstColumnToRender
+    } = getColumnsToRender(params);
+    const columns = [];
+    for (let i = 0; i < renderedColumns.length; i += 1) {
+      const colDef = renderedColumns[i];
+      const columnIndex = firstColumnToRender + i;
+      const isFirstColumn = columnIndex === 0;
+      const tabIndex = columnHeaderTabIndexState !== null && columnHeaderTabIndexState.field === colDef.field || isFirstColumn && !hasOtherElementInTabSequence ? 0 : -1;
+      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 isSiblingFocused = siblingWithBorderingSeparator ? columnHeaderFocus !== null && columnHeaderFocus.field === siblingWithBorderingSeparator.field : false;
+      const indexInSection = i;
+      const sectionLength = renderedColumns.length;
+      const showLeftBorder = shouldCellShowLeftBorder(pinnedPosition, indexInSection, rootProps.showColumnVerticalBorder, rootProps.pinnedColumnsSectionSeparator);
+      const showRightBorder = shouldCellShowRightBorder(pinnedPosition, indexInSection, sectionLength, rootProps.showColumnVerticalBorder, gridHasFiller, rootProps.pinnedColumnsSectionSeparator);
+      columns.push(/*#__PURE__*/_jsx(GridColumnHeaderItem, _extends({}, sortColumnLookup[colDef.field], {
+        columnMenuOpen: open,
+        filterItemsCounter: filterColumnLookup[colDef.field] && filterColumnLookup[colDef.field].length,
+        headerHeight: headerHeight,
+        isDragging: colDef.field === dragCol,
+        colDef: colDef,
+        colIndex: columnIndex,
+        isResizing: resizeCol === colDef.field,
+        isLast: columnIndex === columnPositions.length - 1,
+        hasFocus: hasFocus,
+        tabIndex: tabIndex,
+        pinnedPosition: pinnedPosition,
+        pinnedOffset: pinnedOffset,
+        isSiblingFocused: isSiblingFocused,
+        showLeftBorder: showLeftBorder,
+        showRightBorder: showRightBorder
+      }, other), colDef.field));
+    }
+    return getFillers(params, columns, 0);
+  };
+  const getColumnHeadersRow = () => {
+    return /*#__PURE__*/_jsxs(GridColumnHeaderRow, {
+      role: "row",
+      "aria-rowindex": headerGroupingMaxDepth + 1,
+      ownerState: rootProps,
+      className: gridClasses['row--borderBottom'],
+      style: {
+        height: headerHeight
+      },
+      children: [leftRenderContext && getColumnHeaders({
+        position: PinnedColumnPosition.LEFT,
+        renderContext: leftRenderContext
+      }, {
+        disableReorder: true
+      }), getColumnHeaders({
+        renderContext
+      }), rightRenderContext && getColumnHeaders({
+        position: PinnedColumnPosition.RIGHT,
+        renderContext: rightRenderContext
+      }, {
+        disableReorder: true,
+        separatorSide: GridColumnHeaderSeparatorSides.Left
+      })]
+    });
+  };
+  if (process.env.NODE_ENV !== "production") getColumnHeadersRow.displayName = "getColumnHeadersRow";
+  const getColumnGroupHeaders = ({
+    depth,
+    params
+  }) => {
+    const columnsToRender = getColumnsToRender(params);
+    if (columnsToRender.renderedColumns.length === 0) {
+      return null;
+    }
+    const {
+      firstColumnToRender,
+      lastColumnToRender
+    } = columnsToRender;
+    const rowStructure = columnGroupsHeaderStructure[depth];
+    const firstColumnFieldToRender = visibleColumns[firstColumnToRender].field;
+    const firstGroupToRender = columnGroupsModel[firstColumnFieldToRender]?.[depth] ?? null;
+    const firstGroupIndex = rowStructure.findIndex(({
+      groupId,
+      columnFields
+    }) => groupId === firstGroupToRender && columnFields.includes(firstColumnFieldToRender));
+    const lastColumnFieldToRender = visibleColumns[lastColumnToRender - 1].field;
+    const lastGroupToRender = columnGroupsModel[lastColumnFieldToRender]?.[depth] ?? null;
+    const lastGroupIndex = rowStructure.findIndex(({
+      groupId,
+      columnFields
+    }) => groupId === lastGroupToRender && columnFields.includes(lastColumnFieldToRender));
+    const visibleColumnGroupHeader = rowStructure.slice(firstGroupIndex, lastGroupIndex + 1).map(groupStructure => {
+      return _extends({}, groupStructure, {
+        columnFields: groupStructure.columnFields.filter(field => columnVisibility[field] !== false)
+      });
+    }).filter(groupStructure => groupStructure.columnFields.length > 0);
+    const firstVisibleColumnIndex = visibleColumnGroupHeader[0].columnFields.indexOf(firstColumnFieldToRender);
+    const hiddenGroupColumns = visibleColumnGroupHeader[0].columnFields.slice(0, firstVisibleColumnIndex);
+    const leftOverflow = hiddenGroupColumns.reduce((acc, field) => {
+      const column = columnsLookup[field];
+      return acc + (column.computedWidth ?? 0);
+    }, 0);
+    let columnIndex = firstColumnToRender;
+    const children = visibleColumnGroupHeader.map(({
+      groupId,
+      columnFields
+    }, index) => {
+      const hasFocus = columnGroupHeaderFocus !== null && columnGroupHeaderFocus.depth === depth && columnFields.includes(columnGroupHeaderFocus.field);
+      const tabIndex = columnGroupHeaderTabIndexState !== null && columnGroupHeaderTabIndexState.depth === depth && columnFields.includes(columnGroupHeaderTabIndexState.field) ? 0 : -1;
+      const headerInfo = {
+        groupId,
+        width: columnFields.reduce((acc, field) => acc + columnsLookup[field].computedWidth, 0),
+        fields: columnFields,
+        colIndex: columnIndex,
+        hasFocus,
+        tabIndex
+      };
+      const pinnedPosition = params.position;
+      const pinnedOffset = getPinnedCellOffset(pinnedPosition, headerInfo.width, columnIndex, columnPositions, columnsTotalWidth, scrollbarWidth);
+      columnIndex += columnFields.length;
+      let indexInSection = index;
+      if (pinnedPosition === PinnedColumnPosition.LEFT) {
+        // Group headers can expand to multiple columns, we need to adjust the index
+        indexInSection = columnIndex - 1;
+      }
+      return /*#__PURE__*/_jsx(GridColumnGroupHeader, {
+        groupId: groupId,
+        width: headerInfo.width,
+        fields: headerInfo.fields,
+        colIndex: headerInfo.colIndex,
+        depth: depth,
+        isLastColumn: index === visibleColumnGroupHeader.length - 1,
+        maxDepth: headerGroupingMaxDepth,
+        height: groupHeaderHeight,
+        hasFocus: hasFocus,
+        tabIndex: tabIndex,
+        pinnedPosition: pinnedPosition,
+        pinnedOffset: pinnedOffset,
+        showLeftBorder: shouldCellShowLeftBorder(pinnedPosition, indexInSection, rootProps.showColumnVerticalBorder, rootProps.pinnedColumnsSectionSeparator),
+        showRightBorder: shouldCellShowRightBorder(pinnedPosition, indexInSection, visibleColumnGroupHeader.length, rootProps.showColumnVerticalBorder, gridHasFiller, rootProps.pinnedColumnsSectionSeparator)
+      }, index);
+    });
+    return getFillers(params, children, leftOverflow);
+  };
+  const getColumnGroupHeadersRows = () => {
+    if (headerGroupingMaxDepth === 0) {
+      return null;
+    }
+    const headerRows = [];
+    for (let depth = 0; depth < headerGroupingMaxDepth; depth += 1) {
+      headerRows.push(/*#__PURE__*/_jsxs(GridColumnHeaderRow, {
+        role: "row",
+        "aria-rowindex": depth + 1,
+        ownerState: rootProps,
+        style: {
+          height: groupHeaderHeight
+        },
+        children: [leftRenderContext && getColumnGroupHeaders({
+          depth,
+          params: {
+            position: PinnedColumnPosition.LEFT,
+            renderContext: leftRenderContext,
+            maxLastColumn: leftRenderContext.lastColumnIndex
+          }
+        }), getColumnGroupHeaders({
+          depth,
+          params: {
+            renderContext
+          }
+        }), rightRenderContext && getColumnGroupHeaders({
+          depth,
+          params: {
+            position: PinnedColumnPosition.RIGHT,
+            renderContext: rightRenderContext,
+            maxLastColumn: rightRenderContext.lastColumnIndex
+          }
+        })]
+      }, depth));
+    }
+    return headerRows;
+  };
+  return {
+    renderContext,
+    leftRenderContext,
+    rightRenderContext,
+    pinnedColumns,
+    visibleColumns,
+    columnPositions,
+    getFillers,
+    getColumnHeadersRow,
+    getColumnsToRender,
+    getColumnGroupHeadersRows,
+    getPinnedCellOffset,
+    isDragging: !!dragCol,
+    getInnerProps: () => ({
+      role: 'rowgroup'
+    })
+  };
+};

package/hooks/features/columnMenu/columnMenuSelector.d.mts

@@ -0,0 +1,2 @@
+import type { GridStateCommunity } from "../../../models/gridStateCommunity.mjs";
+export declare const gridColumnMenuSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, unknown, import("@mui/x-data-grid").GridColumnMenuState>;

package/hooks/features/columnMenu/columnMenuSelector.mjs

@@ -0,0 +1,2 @@
+import { createRootSelector } from "../../../utils/createSelector.mjs";
+export const gridColumnMenuSelector = createRootSelector(state => state.columnMenu);

package/hooks/features/columnMenu/getColumnMenuItemKeys.d.mts

@@ -0,0 +1,17 @@
+import type { RefObject } from '@mui/x-internals/types';
+import type { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.mjs";
+import type { GridColDef } from "../../../models/colDef/gridColDef.mjs";
+import type { GridColumnMenuSlotProps } from "./columnMenuInterfaces.mjs";
+export interface GetColumnMenuItemKeysParams {
+  apiRef: RefObject<GridPrivateApiCommunity>;
+  colDef: GridColDef;
+  defaultSlots: Record<string, any>;
+  defaultSlotProps: Record<string, GridColumnMenuSlotProps>;
+  slots?: Record<string, any>;
+  slotProps?: Record<string, GridColumnMenuSlotProps>;
+}
+/**
+ * Returns the list of column menu item keys (sorted by `displayOrder`) that should be rendered for a given column.
+ * This is shared between the column header (to know if menu is empty) and the menu itself (to render items).
+ */
+export declare function getColumnMenuItemKeys(params: GetColumnMenuItemKeysParams): string[];

package/hooks/features/columnMenu/index.d.mts

@@ -0,0 +1,2 @@
+export * from "./columnMenuInterfaces.mjs";
+export * from "./columnMenuSelector.mjs";

package/hooks/features/columnMenu/index.mjs

@@ -0,0 +1,2 @@
+export * from "./columnMenuInterfaces.mjs";
+export * from "./columnMenuSelector.mjs";