@mui/x-data-grid-pro 5.4.0 → 5.6.0

package/legacy/hooks/features/columnPinning/useGridColumnPinning.js

@@ -0,0 +1,298 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import MuiDivider from '@mui/material/Divider';
+import { useGridSelector, gridVisibleColumnDefinitionsSelector, gridColumnsTotalWidthSelector, gridColumnPositionsSelector, gridVisibleColumnFieldsSelector, gridClasses, GridEvents, useGridApiMethod, useGridApiEventHandler } from '@mui/x-data-grid';
+import { useGridRegisterPreProcessor } from '@mui/x-data-grid/internals';
+import { GridColumnPinningMenuItems } from '../../../components/GridColumnPinningMenuItems';
+import { GridPinnedPosition } from './gridColumnPinningInterface';
+import { gridPinnedColumnsSelector } from './gridColumnPinningSelector';
+import { filterColumns } from '../../../components/DataGridProVirtualScroller';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+var Divider = function Divider() {
+  return /*#__PURE__*/_jsx(MuiDivider, {
+    onClick: function onClick(event) {
+      return event.stopPropagation();
+    }
+  });
+};
+
+export var columnPinningStateInitializer = function columnPinningStateInitializer(state, props) {
+  var _props$initialState;
+
+  var model;
+
+  if (props.disableColumnPinning) {
+    model = {};
+  } else if (props.pinnedColumns) {
+    model = props.pinnedColumns;
+  } else if ((_props$initialState = props.initialState) != null && _props$initialState.pinnedColumns) {
+    var _props$initialState2;
+
+    model = (_props$initialState2 = props.initialState) == null ? void 0 : _props$initialState2.pinnedColumns;
+  } else {
+    model = {};
+  }
+
+  return _extends({}, state, {
+    pinnedColumns: model
+  });
+};
+
+var mergeStateWithPinnedColumns = function mergeStateWithPinnedColumns(pinnedColumns) {
+  return function (state) {
+    return _extends({}, state, {
+      pinnedColumns: pinnedColumns
+    });
+  };
+};
+
+export var useGridColumnPinning = function useGridColumnPinning(apiRef, props) {
+  var pinnedColumns = useGridSelector(apiRef, gridPinnedColumnsSelector); // Each visible row (not to be confused with a filter result) is composed of a central .MuiDataGrid-row element
+  // and up to two additional .MuiDataGrid-row's, one for the columns pinned to the left and another
+  // for those on the right side. When hovering any of these elements, the :hover styles are applied only to
+  // the row element that was actually hovered, not its additional siblings. To make it look like a contiguous row,
+  // this method adds/removes the .Mui-hovered class to all of the row elements inside one visible row.
+
+  var updateHoveredClassOnSiblingRows = React.useCallback(function (event) {
+    var _pinnedColumns$left$l, _pinnedColumns$left, _pinnedColumns$right$, _pinnedColumns$right;
+
+    if (props.disableColumnPinning) {
+      return;
+    }
+
+    if (!Array.isArray(pinnedColumns.left) && !Array.isArray(pinnedColumns.right)) {
+      return;
+    }
+
+    var nbLeftPinnedColumns = (_pinnedColumns$left$l = (_pinnedColumns$left = pinnedColumns.left) == null ? void 0 : _pinnedColumns$left.length) != null ? _pinnedColumns$left$l : 0;
+    var nbRightPinnedColumns = (_pinnedColumns$right$ = (_pinnedColumns$right = pinnedColumns.right) == null ? void 0 : _pinnedColumns$right.length) != null ? _pinnedColumns$right$ : 0;
+
+    if (nbLeftPinnedColumns + nbRightPinnedColumns === 0) {
+      return;
+    }
+
+    var index = event.currentTarget.dataset.rowindex;
+    var rowElements = apiRef.current.windowRef.current.querySelectorAll(".".concat(gridClasses.row, "[data-rowindex=\"").concat(index, "\"]"));
+    rowElements.forEach(function (row) {
+      // Ignore rows from other grid inside the hovered row
+      if (row.closest(".".concat(gridClasses.virtualScroller)) === apiRef.current.windowRef.current) {
+        if (event.type === 'mouseenter') {
+          row.classList.add('Mui-hovered');
+        } else {
+          row.classList.remove('Mui-hovered');
+        }
+      }
+    });
+  }, [apiRef, pinnedColumns.left, pinnedColumns.right, props.disableColumnPinning]);
+  var handleMouseEnter = React.useCallback(function (params, event) {
+    updateHoveredClassOnSiblingRows(event);
+  }, [updateHoveredClassOnSiblingRows]);
+  var handleMouseLeave = React.useCallback(function (params, event) {
+    updateHoveredClassOnSiblingRows(event);
+  }, [updateHoveredClassOnSiblingRows]);
+  useGridApiEventHandler(apiRef, GridEvents.rowMouseEnter, handleMouseEnter);
+  useGridApiEventHandler(apiRef, GridEvents.rowMouseLeave, handleMouseLeave);
+  /**
+   * PRE-PROCESSING
+   */
+
+  var calculateScrollLeft = React.useCallback(function (initialValue, params) {
+    if (props.disableColumnPinning) {
+      return initialValue;
+    }
+
+    var visibleColumnFields = gridVisibleColumnFieldsSelector(apiRef);
+
+    var _filterColumns = filterColumns(pinnedColumns, visibleColumnFields),
+        _filterColumns2 = _slicedToArray(_filterColumns, 2),
+        leftPinnedColumns = _filterColumns2[0],
+        rightPinnedColumns = _filterColumns2[1];
+
+    if (!params.colIndex || leftPinnedColumns.length === 0 && rightPinnedColumns.length === 0) {
+      return initialValue;
+    }
+
+    var visibleColumns = gridVisibleColumnDefinitionsSelector(apiRef);
+    var columnsTotalWidth = gridColumnsTotalWidthSelector(apiRef);
+    var columnPositions = gridColumnPositionsSelector(apiRef);
+    var clientWidth = apiRef.current.windowRef.current.clientWidth;
+    var scrollLeft = apiRef.current.windowRef.current.scrollLeft;
+    var offsetWidth = visibleColumns[params.colIndex].computedWidth;
+    var offsetLeft = columnPositions[params.colIndex];
+    var leftPinnedColumnsWidth = columnPositions[leftPinnedColumns.length];
+    var rightPinnedColumnsWidth = columnsTotalWidth - columnPositions[columnPositions.length - rightPinnedColumns.length];
+    var elementBottom = offsetLeft + offsetWidth;
+
+    if (elementBottom - (clientWidth - rightPinnedColumnsWidth) > scrollLeft) {
+      var left = elementBottom - (clientWidth - rightPinnedColumnsWidth);
+      return _extends({}, initialValue, {
+        left: left
+      });
+    }
+
+    if (offsetLeft < scrollLeft + leftPinnedColumnsWidth) {
+      var _left = offsetLeft - leftPinnedColumnsWidth;
+
+      return _extends({}, initialValue, {
+        left: _left
+      });
+    }
+
+    return initialValue;
+  }, [apiRef, pinnedColumns, props.disableColumnPinning]);
+  var addColumnMenuButtons = React.useCallback(function (initialValue, column) {
+    if (props.disableColumnPinning) {
+      return initialValue;
+    }
+
+    if (column.pinnable === false) {
+      return initialValue;
+    }
+
+    return [].concat(_toConsumableArray(initialValue), [/*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(GridColumnPinningMenuItems, {})]);
+  }, [props.disableColumnPinning]);
+  var checkIfCanBeReordered = React.useCallback(function (initialValue, _ref) {
+    var targetIndex = _ref.targetIndex;
+    var visibleColumnFields = gridVisibleColumnFieldsSelector(apiRef);
+
+    var _filterColumns3 = filterColumns(pinnedColumns, visibleColumnFields),
+        _filterColumns4 = _slicedToArray(_filterColumns3, 2),
+        leftPinnedColumns = _filterColumns4[0],
+        rightPinnedColumns = _filterColumns4[1];
+
+    if (leftPinnedColumns.length === 0 && rightPinnedColumns.length === 0) {
+      return initialValue;
+    }
+
+    if (leftPinnedColumns.length > 0 && targetIndex < leftPinnedColumns.length) {
+      return false;
+    }
+
+    if (rightPinnedColumns.length > 0) {
+      var visibleColumns = gridVisibleColumnDefinitionsSelector(apiRef);
+      var firstRightPinnedColumnIndex = visibleColumns.length - rightPinnedColumns.length;
+      return targetIndex >= firstRightPinnedColumnIndex ? false : initialValue;
+    }
+
+    return initialValue;
+  }, [apiRef, pinnedColumns]);
+  var stateExportPreProcessing = React.useCallback(function (prevState) {
+    var pinnedColumnsToExport = gridPinnedColumnsSelector(apiRef.current.state);
+
+    if ((!pinnedColumnsToExport.left || pinnedColumnsToExport.left.length === 0) && (!pinnedColumnsToExport.right || pinnedColumnsToExport.right.length === 0)) {
+      return prevState;
+    }
+
+    return _extends({}, prevState, {
+      pinnedColumns: pinnedColumnsToExport
+    });
+  }, [apiRef]);
+  var stateRestorePreProcessing = React.useCallback(function (params, context) {
+    var newPinnedColumns = context.stateToRestore.pinnedColumns;
+
+    if (newPinnedColumns != null) {
+      apiRef.current.setState(mergeStateWithPinnedColumns(newPinnedColumns));
+    }
+
+    return params;
+  }, [apiRef]);
+  useGridRegisterPreProcessor(apiRef, 'scrollToIndexes', calculateScrollLeft);
+  useGridRegisterPreProcessor(apiRef, 'columnMenu', addColumnMenuButtons);
+  useGridRegisterPreProcessor(apiRef, 'canBeReordered', checkIfCanBeReordered);
+  useGridRegisterPreProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPreProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+  apiRef.current.unstable_updateControlState({
+    stateId: 'pinnedColumns',
+    propModel: props.pinnedColumns,
+    propOnChange: props.onPinnedColumnsChange,
+    stateSelector: gridPinnedColumnsSelector,
+    changeEvent: GridEvents.pinnedColumnsChange
+  });
+  var checkIfEnabled = React.useCallback(function (methodName) {
+    if (props.disableColumnPinning) {
+      throw new Error("MUI: You cannot call `apiRef.current.".concat(methodName, "` when `disableColumnPinning` is true."));
+    }
+  }, [props.disableColumnPinning]);
+  var pinColumn = React.useCallback(function (field, side) {
+    checkIfEnabled('pinColumn');
+
+    if (apiRef.current.isColumnPinned(field) === side) {
+      return;
+    }
+
+    apiRef.current.setState(function (state) {
+      var _extends2;
+
+      var otherSide = side === GridPinnedPosition.right ? GridPinnedPosition.left : GridPinnedPosition.right;
+
+      var newPinnedColumns = _extends({}, state.pinnedColumns, (_extends2 = {}, _defineProperty(_extends2, side, [].concat(_toConsumableArray(state.pinnedColumns[side] || []), [field])), _defineProperty(_extends2, otherSide, (state.pinnedColumns[otherSide] || []).filter(function (column) {
+        return column !== field;
+      })), _extends2));
+
+      return _extends({}, state, {
+        pinnedColumns: newPinnedColumns
+      });
+    });
+    apiRef.current.forceUpdate();
+  }, [apiRef, checkIfEnabled]);
+  var unpinColumn = React.useCallback(function (field) {
+    checkIfEnabled('unpinColumn');
+    apiRef.current.setState(function (state) {
+      var newPinnedColumns = _extends({}, state.pinnedColumns, {
+        left: (state.pinnedColumns.left || []).filter(function (column) {
+          return column !== field;
+        }),
+        right: (state.pinnedColumns.right || []).filter(function (column) {
+          return column !== field;
+        })
+      });
+
+      return _extends({}, state, {
+        pinnedColumns: newPinnedColumns
+      });
+    });
+    apiRef.current.forceUpdate();
+  }, [apiRef, checkIfEnabled]);
+  var getPinnedColumns = React.useCallback(function () {
+    checkIfEnabled('getPinnedColumns');
+    return gridPinnedColumnsSelector(apiRef.current.state);
+  }, [apiRef, checkIfEnabled]);
+  var setPinnedColumns = React.useCallback(function (newPinnedColumns) {
+    checkIfEnabled('setPinnedColumns');
+    apiRef.current.setState(mergeStateWithPinnedColumns(newPinnedColumns));
+    apiRef.current.forceUpdate();
+  }, [apiRef, checkIfEnabled]);
+  var isColumnPinned = React.useCallback(function (field) {
+    checkIfEnabled('isColumnPinned');
+    var leftPinnedColumns = pinnedColumns.left || [];
+
+    if (leftPinnedColumns.includes(field)) {
+      return GridPinnedPosition.left;
+    }
+
+    var rightPinnedColumns = pinnedColumns.right || [];
+
+    if (rightPinnedColumns.includes(field)) {
+      return GridPinnedPosition.right;
+    }
+
+    return false;
+  }, [pinnedColumns.left, pinnedColumns.right, checkIfEnabled]);
+  var columnPinningApi = {
+    pinColumn: pinColumn,
+    unpinColumn: unpinColumn,
+    getPinnedColumns: getPinnedColumns,
+    setPinnedColumns: setPinnedColumns,
+    isColumnPinned: isColumnPinned
+  };
+  useGridApiMethod(apiRef, columnPinningApi, 'columnPinningApi');
+  React.useEffect(function () {
+    if (props.pinnedColumns) {
+      apiRef.current.setPinnedColumns(props.pinnedColumns);
+    }
+  }, [apiRef, props.pinnedColumns]);
+};

package/legacy/hooks/features/columnPinning/useGridColumnPinningPreProcessors.js

@@ -0,0 +1,48 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import * as React from 'react';
+import { useGridRegisterPreProcessor } from '@mui/x-data-grid/internals';
+import { gridPinnedColumnsSelector } from './gridColumnPinningSelector';
+import { columnPinningStateInitializer } from './useGridColumnPinning';
+import { filterColumns } from '../../../components/DataGridProVirtualScroller';
+export var useGridColumnPinningPreProcessors = function useGridColumnPinningPreProcessors(apiRef, props) {
+  var disableColumnPinning = props.disableColumnPinning,
+      pinnedColumnsProp = props.pinnedColumns,
+      initialState = props.initialState;
+  var pinnedColumns = gridPinnedColumnsSelector(apiRef.current.state);
+
+  if (pinnedColumns == null) {
+    // Since the state is not ready yet lets use the initializer to get which
+    // columns should be pinned initially.
+    var initializedState = columnPinningStateInitializer(apiRef.current.state, {
+      disableColumnPinning: disableColumnPinning,
+      pinnedColumns: pinnedColumnsProp,
+      initialState: initialState
+    }, apiRef);
+    pinnedColumns = gridPinnedColumnsSelector(initializedState);
+  }
+
+  var reorderPinnedColumns = React.useCallback(function (columnsState) {
+    if (columnsState.all.length === 0 || disableColumnPinning) {
+      return columnsState;
+    }
+
+    var _filterColumns = filterColumns(pinnedColumns, columnsState.all),
+        _filterColumns2 = _slicedToArray(_filterColumns, 2),
+        leftPinnedColumns = _filterColumns2[0],
+        rightPinnedColumns = _filterColumns2[1];
+
+    if (leftPinnedColumns.length === 0 && rightPinnedColumns.length === 0) {
+      return columnsState;
+    }
+
+    var centerColumns = columnsState.all.filter(function (field) {
+      return !leftPinnedColumns.includes(field) && !rightPinnedColumns.includes(field);
+    });
+    return _extends({}, columnsState, {
+      all: [].concat(_toConsumableArray(leftPinnedColumns), _toConsumableArray(centerColumns), _toConsumableArray(rightPinnedColumns))
+    });
+  }, [disableColumnPinning, pinnedColumns]);
+  useGridRegisterPreProcessor(apiRef, 'hydrateColumns', reorderPinnedColumns);
+};

package/legacy/hooks/features/columnReorder/columnReorderInterfaces.js

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

package/legacy/hooks/features/columnReorder/columnReorderSelector.js

@@ -0,0 +1,7 @@
+import { createSelector } from '@mui/x-data-grid/internals';
+export var gridColumnReorderSelector = function gridColumnReorderSelector(state) {
+  return state.columnReorder;
+};
+export var gridColumnReorderDragColSelector = createSelector(gridColumnReorderSelector, function (columnReorder) {
+  return columnReorder.dragCol;
+});

package/legacy/hooks/features/columnReorder/index.js

@@ -0,0 +1,2 @@
+export * from './columnReorderSelector';
+export {};

package/legacy/hooks/features/columnReorder/useGridColumnReorder.js

@@ -0,0 +1,172 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { useGridApiEventHandler, getDataGridUtilityClass, GridEvents, useGridLogger } from '@mui/x-data-grid';
+import { useGridStateInit } from '@mui/x-data-grid/internals';
+import { gridColumnReorderDragColSelector } from './columnReorderSelector';
+var CURSOR_MOVE_DIRECTION_LEFT = 'left';
+var CURSOR_MOVE_DIRECTION_RIGHT = 'right';
+
+var getCursorMoveDirectionX = function getCursorMoveDirectionX(currentCoordinates, nextCoordinates) {
+  return currentCoordinates.x <= nextCoordinates.x ? CURSOR_MOVE_DIRECTION_RIGHT : CURSOR_MOVE_DIRECTION_LEFT;
+};
+
+var hasCursorPositionChanged = function hasCursorPositionChanged(currentCoordinates, nextCoordinates) {
+  return currentCoordinates.x !== nextCoordinates.x || currentCoordinates.y !== nextCoordinates.y;
+};
+
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes;
+  var slots = {
+    columnHeaderDragging: ['columnHeader--dragging']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+/**
+ * Only available in DataGridPro
+ * @requires useGridColumns (method)
+ */
+
+
+export var useGridColumnReorder = function useGridColumnReorder(apiRef, props) {
+  var logger = useGridLogger(apiRef, 'useGridColumnReorder');
+  useGridStateInit(apiRef, function (state) {
+    return _extends({}, state, {
+      columnReorder: {
+        dragCol: ''
+      }
+    });
+  });
+  var dragColNode = React.useRef(null);
+  var cursorPosition = React.useRef({
+    x: 0,
+    y: 0
+  });
+  var originColumnIndex = React.useRef(null);
+  var removeDnDStylesTimeout = React.useRef();
+  var ownerState = {
+    classes: props.classes
+  };
+  var classes = useUtilityClasses(ownerState);
+  React.useEffect(function () {
+    return function () {
+      clearTimeout(removeDnDStylesTimeout.current);
+    };
+  }, []);
+  var handleColumnHeaderDragStart = React.useCallback(function (params, event) {
+    if (props.disableColumnReorder || params.colDef.disableReorder) {
+      return;
+    }
+
+    logger.debug("Start dragging col ".concat(params.field)); // Prevent drag events propagation.
+    // For more information check here https://github.com/mui/mui-x/issues/2680.
+
+    event.stopPropagation();
+    dragColNode.current = event.currentTarget;
+    dragColNode.current.classList.add(classes.columnHeaderDragging);
+    apiRef.current.setState(function (state) {
+      return _extends({}, state, {
+        columnReorder: _extends({}, state.columnReorder, {
+          dragCol: params.field
+        })
+      });
+    });
+    apiRef.current.forceUpdate();
+    removeDnDStylesTimeout.current = setTimeout(function () {
+      dragColNode.current.classList.remove(classes.columnHeaderDragging);
+    });
+    originColumnIndex.current = apiRef.current.getColumnIndex(params.field, false);
+  }, [props.disableColumnReorder, classes.columnHeaderDragging, logger, apiRef]);
+  var handleDragEnter = React.useCallback(function (params, event) {
+    event.preventDefault(); // Prevent drag events propagation.
+    // For more information check here https://github.com/mui/mui-x/issues/2680.
+
+    event.stopPropagation();
+  }, []);
+  var handleDragOver = React.useCallback(function (params, event) {
+    var dragColField = gridColumnReorderDragColSelector(apiRef);
+
+    if (!dragColField) {
+      return;
+    }
+
+    logger.debug("Dragging over col ".concat(params.field));
+    event.preventDefault(); // Prevent drag events propagation.
+    // For more information check here https://github.com/mui/mui-x/issues/2680.
+
+    event.stopPropagation();
+    var coordinates = {
+      x: event.clientX,
+      y: event.clientY
+    };
+
+    if (params.field !== dragColField && hasCursorPositionChanged(cursorPosition.current, coordinates)) {
+      var targetColIndex = apiRef.current.getColumnIndex(params.field, false);
+      var targetColVisibleIndex = apiRef.current.getColumnIndex(params.field, true);
+      var targetCol = apiRef.current.getColumn(params.field);
+      var dragColIndex = apiRef.current.getColumnIndex(dragColField, false);
+      var visibleColumns = apiRef.current.getVisibleColumns();
+      var cursorMoveDirectionX = getCursorMoveDirectionX(cursorPosition.current, coordinates);
+      var hasMovedLeft = cursorMoveDirectionX === CURSOR_MOVE_DIRECTION_LEFT && targetColIndex < dragColIndex;
+      var hasMovedRight = cursorMoveDirectionX === CURSOR_MOVE_DIRECTION_RIGHT && dragColIndex < targetColIndex;
+
+      if (hasMovedLeft || hasMovedRight) {
+        var canBeReordered;
+
+        if (!targetCol.disableReorder) {
+          canBeReordered = true;
+        } else if (hasMovedLeft) {
+          canBeReordered = targetColIndex > 0 && !visibleColumns[targetColIndex - 1].disableReorder;
+        } else {
+          canBeReordered = targetColIndex < visibleColumns.length - 1 && !visibleColumns[targetColIndex + 1].disableReorder;
+        }
+
+        var canBeReorderedProcessed = apiRef.current.unstable_applyPreProcessors('canBeReordered', canBeReordered, {
+          targetIndex: targetColVisibleIndex
+        });
+
+        if (canBeReorderedProcessed) {
+          apiRef.current.setColumnIndex(dragColField, targetColIndex);
+        }
+      }
+
+      cursorPosition.current = coordinates;
+    }
+  }, [apiRef, logger]);
+  var handleDragEnd = React.useCallback(function (params, event) {
+    var dragColField = gridColumnReorderDragColSelector(apiRef);
+
+    if (props.disableColumnReorder || !dragColField) {
+      return;
+    }
+
+    logger.debug('End dragging col');
+    event.preventDefault(); // Prevent drag events propagation.
+    // For more information check here https://github.com/mui/mui-x/issues/2680.
+
+    event.stopPropagation();
+    clearTimeout(removeDnDStylesTimeout.current);
+    dragColNode.current = null; // Check if the column was dropped outside the grid.
+
+    if (event.dataTransfer.dropEffect === 'none') {
+      // Accessing params.field may contain the wrong field as header elements are reused
+      apiRef.current.setColumnIndex(dragColField, originColumnIndex.current);
+      originColumnIndex.current = null;
+    }
+
+    apiRef.current.setState(function (state) {
+      return _extends({}, state, {
+        columnReorder: _extends({}, state.columnReorder, {
+          dragCol: ''
+        })
+      });
+    });
+    apiRef.current.forceUpdate();
+  }, [props.disableColumnReorder, logger, apiRef]);
+  useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragStart, handleColumnHeaderDragStart);
+  useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragEnter, handleDragEnter);
+  useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragOver, handleDragOver);
+  useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragEnd, handleDragEnd);
+  useGridApiEventHandler(apiRef, GridEvents.cellDragEnter, handleDragEnter);
+  useGridApiEventHandler(apiRef, GridEvents.cellDragOver, handleDragOver);
+};

package/legacy/hooks/features/columnResize/columnResizeSelector.js

@@ -0,0 +1,7 @@
+import { createSelector } from '@mui/x-data-grid/internals';
+export var gridColumnResizeSelector = function gridColumnResizeSelector(state) {
+  return state.columnResize;
+};
+export var gridResizingColumnFieldSelector = createSelector(gridColumnResizeSelector, function (columnResize) {
+  return columnResize.resizingColumnField;
+});

package/legacy/hooks/features/columnResize/columnResizeState.js

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

package/legacy/hooks/features/columnResize/index.js

@@ -0,0 +1,2 @@
+export * from './columnResizeSelector';
+export * from './columnResizeState';