@mui/x-data-grid 8.0.0-beta.2 → 8.0.0

package/modern/hooks/core/useGridLoggerFactory.js

@@ -1,44 +0,0 @@
-import * as React from 'react';
-import { localStorageAvailable } from "../../utils/utils.js";
-import { useGridApiMethod } from "../utils/index.js";
-const forceDebug = localStorageAvailable() && window.localStorage.getItem('DEBUG') != null;
-const noop = () => {};
-const noopLogger = {
-  debug: noop,
-  info: noop,
-  warn: noop,
-  error: noop
-};
-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 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 X: ${name} - ${message}`, ...other);
-      };
-    } else {
-      loggerObj[method] = noop;
-    }
-    return loggerObj;
-  }, {});
-  return logger;
-}
-export const useGridLoggerFactory = (apiRef, props) => {
-  const getLogger = React.useCallback(name => {
-    if (forceDebug) {
-      return getAppender(name, 'debug', props.logger);
-    }
-    if (!props.logLevel) {
-      return noopLogger;
-    }
-    return getAppender(name, props.logLevel.toString(), props.logger);
-  }, [props.logLevel, props.logger]);
-  useGridApiMethod(apiRef, {
-    getLogger
-  }, 'private');
-};

package/modern/hooks/core/useGridProps.d.ts

@@ -1,8 +0,0 @@
-import type { RefObject } from '@mui/x-internals/types';
-import type { DataGridProps } from '../../models/props/DataGridProps';
-import type { GridPrivateApiCommon } from '../../models/api/gridApiCommon';
-import type { GridStateInitializer } from '../utils/useGridInitializeState';
-type Props = Pick<DataGridProps, 'getRowId'>;
-export declare const propsStateInitializer: GridStateInitializer<Props>;
-export declare const useGridProps: <PrivateApi extends GridPrivateApiCommon>(apiRef: RefObject<PrivateApi>, props: Props) => void;
-export {};

package/modern/hooks/core/useGridProps.js

@@ -1,18 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-export const propsStateInitializer = (state, props) => {
-  return _extends({}, state, {
-    props: {
-      getRowId: props.getRowId
-    }
-  });
-};
-export const useGridProps = (apiRef, props) => {
-  React.useEffect(() => {
-    apiRef.current.setState(state => _extends({}, state, {
-      props: {
-        getRowId: props.getRowId
-      }
-    }));
-  }, [apiRef, props.getRowId]);
-};

package/modern/hooks/core/useGridRefs.d.ts

@@ -1,3 +0,0 @@
-import { RefObject } from '@mui/x-internals/types';
-import type { GridPrivateApiCommon } from '../../models/api/gridApiCommon';
-export declare const useGridRefs: <PrivateApi extends GridPrivateApiCommon>(apiRef: RefObject<PrivateApi>) => void;

package/modern/hooks/core/useGridRefs.js

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

package/modern/hooks/core/useGridStateInitialization.d.ts

@@ -1,3 +0,0 @@
-import { RefObject } from '@mui/x-internals/types';
-import type { GridPrivateApiCommon } from '../../models/api/gridApiCommon';
-export declare const useGridStateInitialization: <PrivateApi extends GridPrivateApiCommon>(apiRef: RefObject<PrivateApi>) => void;

package/modern/hooks/core/useGridStateInitialization.js

@@ -1,95 +0,0 @@
-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/modern/hooks/features/clipboard/useGridClipboard.d.ts

@@ -1,8 +0,0 @@
-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/modern/hooks/features/clipboard/useGridClipboard.js

@@ -1,97 +0,0 @@
-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/modern/hooks/features/columnGrouping/gridColumnGroupsInterfaces.d.ts

@@ -1,16 +0,0 @@
-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/modern/hooks/features/columnGrouping/gridColumnGroupsInterfaces.js

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

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

@@ -1,12 +0,0 @@
-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/modern/hooks/features/columnGrouping/gridColumnGroupsSelector.js

@@ -1,10 +0,0 @@
-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/modern/hooks/features/columnGrouping/gridColumnGroupsUtils.d.ts

@@ -1,18 +0,0 @@
-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/modern/hooks/features/columnGrouping/gridColumnGroupsUtils.js

@@ -1,82 +0,0 @@
-import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
-import { isLeaf } from "../../../models/gridColumnGrouping.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/modern/hooks/features/columnGrouping/index.d.ts

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

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

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

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

@@ -1,10 +0,0 @@
-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/modern/hooks/features/columnGrouping/useGridColumnGrouping.js

@@ -1,131 +0,0 @@
-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]);
-};