@mui/x-data-grid 8.0.0-alpha.8 → 8.0.0-beta.0

package/esm/hooks/core/useGridStateInitialization.js

@@ -0,0 +1,95 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridApiMethod } from "../utils/index.js";
+import { isFunction } from "../../utils/utils.js";
+export const useGridStateInitialization = apiRef => {
+  const controlStateMapRef = React.useRef({});
+  const registerControlState = React.useCallback(controlStateItem => {
+    controlStateMapRef.current[controlStateItem.stateId] = controlStateItem;
+  }, []);
+  const setState = React.useCallback((state, reason) => {
+    let newState;
+    if (isFunction(state)) {
+      newState = state(apiRef.current.state);
+    } else {
+      newState = state;
+    }
+    if (apiRef.current.state === newState) {
+      return false;
+    }
+    const apiRefWithNewState = {
+      current: {
+        state: newState
+      }
+    };
+    let ignoreSetState = false;
+
+    // Apply the control state constraints
+    const updatedControlStateIds = [];
+    Object.keys(controlStateMapRef.current).forEach(stateId => {
+      const controlState = controlStateMapRef.current[stateId];
+      const oldSubState = controlState.stateSelector(apiRef);
+      const newSubState = controlState.stateSelector(apiRefWithNewState);
+      if (newSubState === oldSubState) {
+        return;
+      }
+      updatedControlStateIds.push({
+        stateId: controlState.stateId,
+        hasPropChanged: newSubState !== controlState.propModel
+      });
+
+      // The state is controlled, the prop should always win
+      if (controlState.propModel !== undefined && newSubState !== controlState.propModel) {
+        ignoreSetState = true;
+      }
+    });
+    if (updatedControlStateIds.length > 1) {
+      // Each hook modify its own state, and it should not leak
+      // Events are here to forward to other hooks and apply changes.
+      // You are trying to update several states in a no isolated way.
+      throw new Error(`You're not allowed to update several sub-state in one transaction. You already updated ${updatedControlStateIds[0].stateId}, therefore, you're not allowed to update ${updatedControlStateIds.map(el => el.stateId).join(', ')} in the same transaction.`);
+    }
+    if (!ignoreSetState) {
+      // We always assign it as we mutate rows for perf reason.
+      apiRef.current.state = newState;
+      apiRef.current.publishEvent('stateChange', newState);
+      apiRef.current.store.update(newState);
+    }
+    if (updatedControlStateIds.length === 1) {
+      const {
+        stateId,
+        hasPropChanged
+      } = updatedControlStateIds[0];
+      const controlState = controlStateMapRef.current[stateId];
+      const model = controlState.stateSelector(apiRefWithNewState);
+      if (controlState.propOnChange && hasPropChanged) {
+        controlState.propOnChange(model, {
+          reason,
+          api: apiRef.current
+        });
+      }
+      if (!ignoreSetState) {
+        apiRef.current.publishEvent(controlState.changeEvent, model, {
+          reason
+        });
+      }
+    }
+    return !ignoreSetState;
+  }, [apiRef]);
+  const updateControlState = React.useCallback((key, state, reason) => {
+    return apiRef.current.setState(previousState => {
+      return _extends({}, previousState, {
+        [key]: state(previousState[key])
+      });
+    }, reason);
+  }, [apiRef]);
+  const publicStateApi = {
+    setState
+  };
+  const privateStateApi = {
+    updateControlState,
+    registerControlState
+  };
+  useGridApiMethod(apiRef, publicStateApi, 'public');
+  useGridApiMethod(apiRef, privateStateApi, 'private');
+};

package/esm/hooks/features/clipboard/useGridClipboard.d.ts

@@ -0,0 +1,8 @@
+import { RefObject } from '@mui/x-internals/types';
+import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
+import type { DataGridProcessedProps } from '../../../models/props/DataGridProps';
+/**
+ * @requires useGridCsvExport (method)
+ * @requires useGridSelection (method)
+ */
+export declare const useGridClipboard: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "ignoreValueFormatterDuringExport" | "onClipboardCopy" | "clipboardCopyCellDelimiter">) => void;

package/esm/hooks/features/clipboard/useGridClipboard.js

@@ -0,0 +1,97 @@
+import * as React from 'react';
+import { useGridApiOptionHandler, useGridNativeEventListener } from "../../utils/index.js";
+import { gridFocusCellSelector } from "../focus/gridFocusStateSelector.js";
+import { serializeCellValue } from "../export/serializers/csvSerializer.js";
+import { isCopyShortcut } from "../../../utils/keyboardUtils.js";
+import { gridRowSelectionCountSelector } from "../rowSelection/index.js";
+function writeToClipboardPolyfill(data) {
+  const span = document.createElement('span');
+  span.style.whiteSpace = 'pre';
+  span.style.userSelect = 'all';
+  span.style.opacity = '0px';
+  span.textContent = data;
+  document.body.appendChild(span);
+  const range = document.createRange();
+  range.selectNode(span);
+  const selection = window.getSelection();
+  selection.removeAllRanges();
+  selection.addRange(range);
+  try {
+    document.execCommand('copy');
+  } finally {
+    document.body.removeChild(span);
+  }
+}
+function copyToClipboard(data) {
+  if (navigator.clipboard) {
+    navigator.clipboard.writeText(data).catch(() => {
+      writeToClipboardPolyfill(data);
+    });
+  } else {
+    writeToClipboardPolyfill(data);
+  }
+}
+function hasNativeSelection(element) {
+  // When getSelection is called on an <iframe> that is not displayed Firefox will return null.
+  if (window.getSelection()?.toString()) {
+    return true;
+  }
+
+  // window.getSelection() returns an empty string in Firefox for selections inside a form element.
+  // See: https://bugzilla.mozilla.org/show_bug.cgi?id=85686.
+  // Instead, we can use element.selectionStart that is only defined on form elements.
+  if (element && (element.selectionEnd || 0) - (element.selectionStart || 0) > 0) {
+    return true;
+  }
+  return false;
+}
+
+/**
+ * @requires useGridCsvExport (method)
+ * @requires useGridSelection (method)
+ */
+export const useGridClipboard = (apiRef, props) => {
+  const ignoreValueFormatterProp = props.ignoreValueFormatterDuringExport;
+  const ignoreValueFormatter = (typeof ignoreValueFormatterProp === 'object' ? ignoreValueFormatterProp?.clipboardExport : ignoreValueFormatterProp) || false;
+  const clipboardCopyCellDelimiter = props.clipboardCopyCellDelimiter;
+  const handleCopy = React.useCallback(event => {
+    if (!isCopyShortcut(event)) {
+      return;
+    }
+
+    // Do nothing if there's a native selection
+    if (hasNativeSelection(event.target)) {
+      return;
+    }
+    let textToCopy = '';
+    const selectedRowsCount = gridRowSelectionCountSelector(apiRef);
+    if (selectedRowsCount > 0) {
+      textToCopy = apiRef.current.getDataAsCsv({
+        includeHeaders: false,
+        delimiter: clipboardCopyCellDelimiter,
+        shouldAppendQuotes: false,
+        escapeFormulas: false
+      });
+    } else {
+      const focusedCell = gridFocusCellSelector(apiRef);
+      if (focusedCell) {
+        const cellParams = apiRef.current.getCellParams(focusedCell.id, focusedCell.field);
+        textToCopy = serializeCellValue(cellParams, {
+          csvOptions: {
+            delimiter: clipboardCopyCellDelimiter,
+            shouldAppendQuotes: false,
+            escapeFormulas: false
+          },
+          ignoreValueFormatter
+        });
+      }
+    }
+    textToCopy = apiRef.current.unstable_applyPipeProcessors('clipboardCopy', textToCopy);
+    if (textToCopy) {
+      copyToClipboard(textToCopy);
+      apiRef.current.publishEvent('clipboardCopy', textToCopy);
+    }
+  }, [apiRef, ignoreValueFormatter, clipboardCopyCellDelimiter]);
+  useGridNativeEventListener(apiRef, () => apiRef.current.rootElementRef.current, 'keydown', handleCopy);
+  useGridApiOptionHandler(apiRef, 'clipboardCopy', props.onClipboardCopy);
+};

package/esm/hooks/features/columnGrouping/gridColumnGroupsInterfaces.d.ts

@@ -0,0 +1,16 @@
+import { GridColumnGroup } from "../../../models/gridColumnGrouping.js";
+export type GridColumnGroupLookup = {
+  [groupId: string]: Omit<GridColumnGroup, 'children'>;
+};
+export type GridGroupingStructure = {
+  groupId: null | string;
+  columnFields: string[];
+};
+export interface GridColumnsGroupingState {
+  lookup: GridColumnGroupLookup;
+  headerStructure: GridGroupingStructure[][];
+  unwrappedGroupingModel: {
+    [columnField: string]: GridColumnGroup['groupId'][];
+  };
+  maxDepth: number;
+}

package/esm/hooks/features/columnGrouping/gridColumnGroupsInterfaces.js

@@ -0,0 +1 @@
+export {};

package/esm/hooks/features/columnGrouping/gridColumnGroupsSelector.d.ts

@@ -0,0 +1,12 @@
+import { GridStateCommunity } from "../../../models/gridStateCommunity.js";
+/**
+ * @category ColumnGrouping
+ * @ignore - do not document.
+ */
+export declare const gridColumnGroupingSelector: import("../../..").OutputSelector<GridStateCommunity, unknown, import("./gridColumnGroupsInterfaces").GridColumnsGroupingState>;
+export declare const gridColumnGroupsUnwrappedModelSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridColumnGroupsInterfaces").GridColumnsGroupingState, {
+  [columnField: string]: string[];
+}>;
+export declare const gridColumnGroupsLookupSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridColumnGroupsInterfaces").GridColumnsGroupingState, import("./gridColumnGroupsInterfaces").GridColumnGroupLookup>;
+export declare const gridColumnGroupsHeaderStructureSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridColumnGroupsInterfaces").GridColumnsGroupingState, import("./gridColumnGroupsInterfaces").GridGroupingStructure[][]>;
+export declare const gridColumnGroupsHeaderMaxDepthSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridColumnGroupsInterfaces").GridColumnsGroupingState, number>;

package/esm/hooks/features/columnGrouping/gridColumnGroupsSelector.js

@@ -0,0 +1,10 @@
+import { createSelector, createRootSelector, createSelectorMemoized } from "../../../utils/createSelector.js";
+/**
+ * @category ColumnGrouping
+ * @ignore - do not document.
+ */
+export const gridColumnGroupingSelector = createRootSelector(state => state.columnGrouping);
+export const gridColumnGroupsUnwrappedModelSelector = createSelectorMemoized(gridColumnGroupingSelector, columnGrouping => columnGrouping?.unwrappedGroupingModel ?? {});
+export const gridColumnGroupsLookupSelector = createSelectorMemoized(gridColumnGroupingSelector, columnGrouping => columnGrouping?.lookup ?? {});
+export const gridColumnGroupsHeaderStructureSelector = createSelectorMemoized(gridColumnGroupingSelector, columnGrouping => columnGrouping?.headerStructure ?? []);
+export const gridColumnGroupsHeaderMaxDepthSelector = createSelector(gridColumnGroupingSelector, columnGrouping => columnGrouping?.maxDepth ?? 0);

package/esm/hooks/features/columnGrouping/gridColumnGroupsUtils.d.ts

@@ -0,0 +1,18 @@
+import { GridColumnGroupingModel, GridColumnGroup } from "../../../models/gridColumnGrouping.js";
+import { GridColDef } from "../../../models/colDef/index.js";
+import { GridGroupingStructure } from "./gridColumnGroupsInterfaces.js";
+type UnwrappedGroupingModel = {
+  [key: GridColDef['field']]: GridColumnGroup['groupId'][];
+};
+/**
+ * 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 declare const unwrapGroupingColumnModel: (columnGroupingModel?: GridColumnGroupingModel) => UnwrappedGroupingModel;
+export declare const getColumnGroupsHeaderStructure: (orderedColumns: string[], unwrappedGroupingModel: UnwrappedGroupingModel, pinnedFields: {
+  right?: string[];
+  left?: string[];
+}) => GridGroupingStructure[][];
+export {};

package/esm/hooks/features/columnGrouping/gridColumnGroupsUtils.js

@@ -0,0 +1,82 @@
+import { isLeaf } from "../../../models/gridColumnGrouping.js";
+import { isDeepEqual } from "../../../utils/utils.js";
+// 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(...orderedColumns.map(field => getParents(field).length));
+  const haveSameParents = (field1, field2, depth) => isDeepEqual(getParents(field1).slice(0, depth + 1), getParents(field2).slice(0, depth + 1));
+  const haveDifferentContainers = (field1, field2) => {
+    if (pinnedFields?.left && pinnedFields.left.includes(field1) && !pinnedFields.left.includes(field2)) {
+      return true;
+    }
+    if (pinnedFields?.right && !pinnedFields.right.includes(field1) && pinnedFields.right.includes(field2)) {
+      return true;
+    }
+    return false;
+  };
+  for (let depth = 0; depth < maxDepth; depth += 1) {
+    const depthStructure = orderedColumns.reduce((structure, newField) => {
+      const groupId = getParents(newField)[depth] ?? null;
+      if (structure.length === 0) {
+        return [{
+          columnFields: [newField],
+          groupId
+        }];
+      }
+      const lastGroup = structure[structure.length - 1];
+      const prevField = lastGroup.columnFields[lastGroup.columnFields.length - 1];
+      const prevGroupId = lastGroup.groupId;
+      if (prevGroupId !== groupId || !haveSameParents(prevField, newField, depth) ||
+      // Fix for https://github.com/mui/mui-x/issues/7041
+      haveDifferentContainers(prevField, newField)) {
+        // It's a new group
+        return [...structure, {
+          columnFields: [newField],
+          groupId
+        }];
+      }
+
+      // It extends the previous group
+      return [...structure.slice(0, structure.length - 1), {
+        columnFields: [...lastGroup.columnFields, newField],
+        groupId
+      }];
+    }, []);
+    groupingHeaderStructure.push(depthStructure);
+  }
+  return groupingHeaderStructure;
+};

package/esm/hooks/features/columnGrouping/index.d.ts

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

package/esm/hooks/features/columnGrouping/index.js

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

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

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

package/esm/hooks/features/columnGrouping/useGridColumnGrouping.js

@@ -0,0 +1,131 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+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)) {
+      return;
+    }
+    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') {
+      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 X: The groupId ${groupId} is used multiple times in the columnGroupingModel.`);
+    }
+    groupLookup = _extends({}, groupLookup, subTreeLookup, {
+      [groupId]: groupParam
+    });
+  });
+  return _extends({}, groupLookup);
+};
+export const columnGroupsStateInitializer = (state, props, apiRef) => {
+  if (!props.columnGroupingModel) {
+    return state;
+  }
+  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 => {
+    // @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]);
+  useGridApiEventHandler(apiRef, 'columnIndexChange', handleColumnIndexChange);
+  useGridApiEventHandler(apiRef, 'columnsChange', () => {
+    updateColumnGroupingState(props.columnGroupingModel);
+  });
+  useGridApiEventHandler(apiRef, 'columnVisibilityModelChange', () => {
+    updateColumnGroupingState(props.columnGroupingModel);
+  });
+
+  /**
+   * EFFECTS
+   */
+  React.useEffect(() => {
+    updateColumnGroupingState(props.columnGroupingModel);
+  }, [updateColumnGroupingState, props.columnGroupingModel]);
+};

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

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
+import type { GridColumnsRenderContext } from '../../../models/params/gridScrollParams';
+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;
+}
+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").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) => 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 {};