@mui/x-data-grid-pro 5.5.0 → 5.6.1

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

@@ -0,0 +1,297 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridColumnPinning = exports.columnPinningStateInitializer = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _Divider = _interopRequireDefault(require("@mui/material/Divider"));
+
+var _xDataGrid = require("@mui/x-data-grid");
+
+var _internals = require("@mui/x-data-grid/internals");
+
+var _GridColumnPinningMenuItems = require("../../../components/GridColumnPinningMenuItems");
+
+var _gridColumnPinningInterface = require("./gridColumnPinningInterface");
+
+var _gridColumnPinningSelector = require("./gridColumnPinningSelector");
+
+var _DataGridProVirtualScroller = require("../../../components/DataGridProVirtualScroller");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const Divider = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
+  onClick: event => event.stopPropagation()
+});
+
+const columnPinningStateInitializer = (state, props) => {
+  var _props$initialState;
+
+  let 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 (0, _extends2.default)({}, state, {
+    pinnedColumns: model
+  });
+};
+
+exports.columnPinningStateInitializer = columnPinningStateInitializer;
+
+const mergeStateWithPinnedColumns = pinnedColumns => state => (0, _extends2.default)({}, state, {
+  pinnedColumns
+});
+
+const useGridColumnPinning = (apiRef, props) => {
+  const pinnedColumns = (0, _xDataGrid.useGridSelector)(apiRef, _gridColumnPinningSelector.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.
+
+  const updateHoveredClassOnSiblingRows = React.useCallback(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;
+    }
+
+    const nbLeftPinnedColumns = (_pinnedColumns$left$l = (_pinnedColumns$left = pinnedColumns.left) == null ? void 0 : _pinnedColumns$left.length) != null ? _pinnedColumns$left$l : 0;
+    const nbRightPinnedColumns = (_pinnedColumns$right$ = (_pinnedColumns$right = pinnedColumns.right) == null ? void 0 : _pinnedColumns$right.length) != null ? _pinnedColumns$right$ : 0;
+
+    if (nbLeftPinnedColumns + nbRightPinnedColumns === 0) {
+      return;
+    }
+
+    const index = event.currentTarget.dataset.rowindex;
+    const rowElements = apiRef.current.windowRef.current.querySelectorAll(`.${_xDataGrid.gridClasses.row}[data-rowindex="${index}"]`);
+    rowElements.forEach(row => {
+      // Ignore rows from other grid inside the hovered row
+      if (row.closest(`.${_xDataGrid.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]);
+  const handleMouseEnter = React.useCallback((params, event) => {
+    updateHoveredClassOnSiblingRows(event);
+  }, [updateHoveredClassOnSiblingRows]);
+  const handleMouseLeave = React.useCallback((params, event) => {
+    updateHoveredClassOnSiblingRows(event);
+  }, [updateHoveredClassOnSiblingRows]);
+  (0, _xDataGrid.useGridApiEventHandler)(apiRef, _xDataGrid.GridEvents.rowMouseEnter, handleMouseEnter);
+  (0, _xDataGrid.useGridApiEventHandler)(apiRef, _xDataGrid.GridEvents.rowMouseLeave, handleMouseLeave);
+  /**
+   * PRE-PROCESSING
+   */
+
+  const calculateScrollLeft = React.useCallback((initialValue, params) => {
+    if (props.disableColumnPinning) {
+      return initialValue;
+    }
+
+    const visibleColumnFields = (0, _xDataGrid.gridVisibleColumnFieldsSelector)(apiRef);
+    const [leftPinnedColumns, rightPinnedColumns] = (0, _DataGridProVirtualScroller.filterColumns)(pinnedColumns, visibleColumnFields);
+
+    if (!params.colIndex || leftPinnedColumns.length === 0 && rightPinnedColumns.length === 0) {
+      return initialValue;
+    }
+
+    const visibleColumns = (0, _xDataGrid.gridVisibleColumnDefinitionsSelector)(apiRef);
+    const columnsTotalWidth = (0, _xDataGrid.gridColumnsTotalWidthSelector)(apiRef);
+    const columnPositions = (0, _xDataGrid.gridColumnPositionsSelector)(apiRef);
+    const clientWidth = apiRef.current.windowRef.current.clientWidth;
+    const scrollLeft = apiRef.current.windowRef.current.scrollLeft;
+    const offsetWidth = visibleColumns[params.colIndex].computedWidth;
+    const offsetLeft = columnPositions[params.colIndex];
+    const leftPinnedColumnsWidth = columnPositions[leftPinnedColumns.length];
+    const rightPinnedColumnsWidth = columnsTotalWidth - columnPositions[columnPositions.length - rightPinnedColumns.length];
+    const elementBottom = offsetLeft + offsetWidth;
+
+    if (elementBottom - (clientWidth - rightPinnedColumnsWidth) > scrollLeft) {
+      const left = elementBottom - (clientWidth - rightPinnedColumnsWidth);
+      return (0, _extends2.default)({}, initialValue, {
+        left
+      });
+    }
+
+    if (offsetLeft < scrollLeft + leftPinnedColumnsWidth) {
+      const left = offsetLeft - leftPinnedColumnsWidth;
+      return (0, _extends2.default)({}, initialValue, {
+        left
+      });
+    }
+
+    return initialValue;
+  }, [apiRef, pinnedColumns, props.disableColumnPinning]);
+  const addColumnMenuButtons = React.useCallback((initialValue, column) => {
+    if (props.disableColumnPinning) {
+      return initialValue;
+    }
+
+    if (column.pinnable === false) {
+      return initialValue;
+    }
+
+    return [...initialValue, /*#__PURE__*/(0, _jsxRuntime.jsx)(Divider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnPinningMenuItems.GridColumnPinningMenuItems, {})];
+  }, [props.disableColumnPinning]);
+  const checkIfCanBeReordered = React.useCallback((initialValue, {
+    targetIndex
+  }) => {
+    const visibleColumnFields = (0, _xDataGrid.gridVisibleColumnFieldsSelector)(apiRef);
+    const [leftPinnedColumns, rightPinnedColumns] = (0, _DataGridProVirtualScroller.filterColumns)(pinnedColumns, visibleColumnFields);
+
+    if (leftPinnedColumns.length === 0 && rightPinnedColumns.length === 0) {
+      return initialValue;
+    }
+
+    if (leftPinnedColumns.length > 0 && targetIndex < leftPinnedColumns.length) {
+      return false;
+    }
+
+    if (rightPinnedColumns.length > 0) {
+      const visibleColumns = (0, _xDataGrid.gridVisibleColumnDefinitionsSelector)(apiRef);
+      const firstRightPinnedColumnIndex = visibleColumns.length - rightPinnedColumns.length;
+      return targetIndex >= firstRightPinnedColumnIndex ? false : initialValue;
+    }
+
+    return initialValue;
+  }, [apiRef, pinnedColumns]);
+  const stateExportPreProcessing = React.useCallback(prevState => {
+    const pinnedColumnsToExport = (0, _gridColumnPinningSelector.gridPinnedColumnsSelector)(apiRef.current.state);
+
+    if ((!pinnedColumnsToExport.left || pinnedColumnsToExport.left.length === 0) && (!pinnedColumnsToExport.right || pinnedColumnsToExport.right.length === 0)) {
+      return prevState;
+    }
+
+    return (0, _extends2.default)({}, prevState, {
+      pinnedColumns: pinnedColumnsToExport
+    });
+  }, [apiRef]);
+  const stateRestorePreProcessing = React.useCallback((params, context) => {
+    const newPinnedColumns = context.stateToRestore.pinnedColumns;
+
+    if (newPinnedColumns != null) {
+      apiRef.current.setState(mergeStateWithPinnedColumns(newPinnedColumns));
+    }
+
+    return params;
+  }, [apiRef]);
+  (0, _internals.useGridRegisterPreProcessor)(apiRef, 'scrollToIndexes', calculateScrollLeft);
+  (0, _internals.useGridRegisterPreProcessor)(apiRef, 'columnMenu', addColumnMenuButtons);
+  (0, _internals.useGridRegisterPreProcessor)(apiRef, 'canBeReordered', checkIfCanBeReordered);
+  (0, _internals.useGridRegisterPreProcessor)(apiRef, 'exportState', stateExportPreProcessing);
+  (0, _internals.useGridRegisterPreProcessor)(apiRef, 'restoreState', stateRestorePreProcessing);
+  apiRef.current.unstable_updateControlState({
+    stateId: 'pinnedColumns',
+    propModel: props.pinnedColumns,
+    propOnChange: props.onPinnedColumnsChange,
+    stateSelector: _gridColumnPinningSelector.gridPinnedColumnsSelector,
+    changeEvent: _xDataGrid.GridEvents.pinnedColumnsChange
+  });
+  const checkIfEnabled = React.useCallback(methodName => {
+    if (props.disableColumnPinning) {
+      throw new Error(`MUI: You cannot call \`apiRef.current.${methodName}\` when \`disableColumnPinning\` is true.`);
+    }
+  }, [props.disableColumnPinning]);
+  const pinColumn = React.useCallback((field, side) => {
+    checkIfEnabled('pinColumn');
+
+    if (apiRef.current.isColumnPinned(field) === side) {
+      return;
+    }
+
+    apiRef.current.setState(state => {
+      const otherSide = side === _gridColumnPinningInterface.GridPinnedPosition.right ? _gridColumnPinningInterface.GridPinnedPosition.left : _gridColumnPinningInterface.GridPinnedPosition.right;
+      const newPinnedColumns = (0, _extends2.default)({}, state.pinnedColumns, {
+        [side]: [...(state.pinnedColumns[side] || []), field],
+        [otherSide]: (state.pinnedColumns[otherSide] || []).filter(column => column !== field)
+      });
+      return (0, _extends2.default)({}, state, {
+        pinnedColumns: newPinnedColumns
+      });
+    });
+    apiRef.current.forceUpdate();
+  }, [apiRef, checkIfEnabled]);
+  const unpinColumn = React.useCallback(field => {
+    checkIfEnabled('unpinColumn');
+    apiRef.current.setState(state => {
+      const newPinnedColumns = (0, _extends2.default)({}, state.pinnedColumns, {
+        left: (state.pinnedColumns.left || []).filter(column => column !== field),
+        right: (state.pinnedColumns.right || []).filter(column => column !== field)
+      });
+      return (0, _extends2.default)({}, state, {
+        pinnedColumns: newPinnedColumns
+      });
+    });
+    apiRef.current.forceUpdate();
+  }, [apiRef, checkIfEnabled]);
+  const getPinnedColumns = React.useCallback(() => {
+    checkIfEnabled('getPinnedColumns');
+    return (0, _gridColumnPinningSelector.gridPinnedColumnsSelector)(apiRef.current.state);
+  }, [apiRef, checkIfEnabled]);
+  const setPinnedColumns = React.useCallback(newPinnedColumns => {
+    checkIfEnabled('setPinnedColumns');
+    apiRef.current.setState(mergeStateWithPinnedColumns(newPinnedColumns));
+    apiRef.current.forceUpdate();
+  }, [apiRef, checkIfEnabled]);
+  const isColumnPinned = React.useCallback(field => {
+    checkIfEnabled('isColumnPinned');
+    const leftPinnedColumns = pinnedColumns.left || [];
+
+    if (leftPinnedColumns.includes(field)) {
+      return _gridColumnPinningInterface.GridPinnedPosition.left;
+    }
+
+    const rightPinnedColumns = pinnedColumns.right || [];
+
+    if (rightPinnedColumns.includes(field)) {
+      return _gridColumnPinningInterface.GridPinnedPosition.right;
+    }
+
+    return false;
+  }, [pinnedColumns.left, pinnedColumns.right, checkIfEnabled]);
+  const columnPinningApi = {
+    pinColumn,
+    unpinColumn,
+    getPinnedColumns,
+    setPinnedColumns,
+    isColumnPinned
+  };
+  (0, _xDataGrid.useGridApiMethod)(apiRef, columnPinningApi, 'columnPinningApi');
+  React.useEffect(() => {
+    if (props.pinnedColumns) {
+      apiRef.current.setPinnedColumns(props.pinnedColumns);
+    }
+  }, [apiRef, props.pinnedColumns]);
+};
+
+exports.useGridColumnPinning = useGridColumnPinning;

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

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridColumnPinningPreProcessors = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _internals = require("@mui/x-data-grid/internals");
+
+var _gridColumnPinningSelector = require("./gridColumnPinningSelector");
+
+var _useGridColumnPinning = require("./useGridColumnPinning");
+
+var _DataGridProVirtualScroller = require("../../../components/DataGridProVirtualScroller");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const useGridColumnPinningPreProcessors = (apiRef, props) => {
+  const {
+    disableColumnPinning,
+    pinnedColumns: pinnedColumnsProp,
+    initialState
+  } = props;
+  let pinnedColumns = (0, _gridColumnPinningSelector.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.
+    const initializedState = (0, _useGridColumnPinning.columnPinningStateInitializer)(apiRef.current.state, {
+      disableColumnPinning,
+      pinnedColumns: pinnedColumnsProp,
+      initialState
+    }, apiRef);
+    pinnedColumns = (0, _gridColumnPinningSelector.gridPinnedColumnsSelector)(initializedState);
+  }
+
+  const reorderPinnedColumns = React.useCallback(columnsState => {
+    if (columnsState.all.length === 0 || disableColumnPinning) {
+      return columnsState;
+    }
+
+    const [leftPinnedColumns, rightPinnedColumns] = (0, _DataGridProVirtualScroller.filterColumns)(pinnedColumns, columnsState.all);
+
+    if (leftPinnedColumns.length === 0 && rightPinnedColumns.length === 0) {
+      return columnsState;
+    }
+
+    const centerColumns = columnsState.all.filter(field => {
+      return !leftPinnedColumns.includes(field) && !rightPinnedColumns.includes(field);
+    });
+    return (0, _extends2.default)({}, columnsState, {
+      all: [...leftPinnedColumns, ...centerColumns, ...rightPinnedColumns]
+    });
+  }, [disableColumnPinning, pinnedColumns]);
+  (0, _internals.useGridRegisterPreProcessor)(apiRef, 'hydrateColumns', reorderPinnedColumns);
+};
+
+exports.useGridColumnPinningPreProcessors = useGridColumnPinningPreProcessors;

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.gridColumnReorderSelector = exports.gridColumnReorderDragColSelector = void 0;
+
+var _internals = require("@mui/x-data-grid/internals");
+
+const gridColumnReorderSelector = state => state.columnReorder;
+
+exports.gridColumnReorderSelector = gridColumnReorderSelector;
+const gridColumnReorderDragColSelector = (0, _internals.createSelector)(gridColumnReorderSelector, columnReorder => columnReorder.dragCol);
+exports.gridColumnReorderDragColSelector = gridColumnReorderDragColSelector;

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

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _columnReorderSelector = require("./columnReorderSelector");
+
+Object.keys(_columnReorderSelector).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _columnReorderSelector[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _columnReorderSelector[key];
+    }
+  });
+});

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

@@ -0,0 +1,188 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridColumnReorder = exports.columnReorderStateInitializer = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _material = require("@mui/material");
+
+var _xDataGrid = require("@mui/x-data-grid");
+
+var _columnReorderSelector = require("./columnReorderSelector");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const CURSOR_MOVE_DIRECTION_LEFT = 'left';
+const CURSOR_MOVE_DIRECTION_RIGHT = 'right';
+
+const getCursorMoveDirectionX = (currentCoordinates, nextCoordinates) => {
+  return currentCoordinates.x <= nextCoordinates.x ? CURSOR_MOVE_DIRECTION_RIGHT : CURSOR_MOVE_DIRECTION_LEFT;
+};
+
+const hasCursorPositionChanged = (currentCoordinates, nextCoordinates) => currentCoordinates.x !== nextCoordinates.x || currentCoordinates.y !== nextCoordinates.y;
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    columnHeaderDragging: ['columnHeader--dragging']
+  };
+  return (0, _material.unstable_composeClasses)(slots, _xDataGrid.getDataGridUtilityClass, classes);
+};
+
+const columnReorderStateInitializer = state => (0, _extends2.default)({}, state, {
+  columnReorder: {
+    dragCol: ''
+  }
+});
+/**
+ * Only available in DataGridPro
+ * @requires useGridColumns (method)
+ */
+
+
+exports.columnReorderStateInitializer = columnReorderStateInitializer;
+
+const useGridColumnReorder = (apiRef, props) => {
+  const logger = (0, _xDataGrid.useGridLogger)(apiRef, 'useGridColumnReorder');
+  const dragColNode = React.useRef(null);
+  const cursorPosition = React.useRef({
+    x: 0,
+    y: 0
+  });
+  const originColumnIndex = React.useRef(null);
+  const removeDnDStylesTimeout = React.useRef();
+  const ownerState = {
+    classes: props.classes
+  };
+  const classes = useUtilityClasses(ownerState);
+  React.useEffect(() => {
+    return () => {
+      clearTimeout(removeDnDStylesTimeout.current);
+    };
+  }, []);
+  const handleColumnHeaderDragStart = React.useCallback((params, event) => {
+    if (props.disableColumnReorder || params.colDef.disableReorder) {
+      return;
+    }
+
+    logger.debug(`Start dragging col ${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(state => (0, _extends2.default)({}, state, {
+      columnReorder: (0, _extends2.default)({}, state.columnReorder, {
+        dragCol: params.field
+      })
+    }));
+    apiRef.current.forceUpdate();
+    removeDnDStylesTimeout.current = setTimeout(() => {
+      dragColNode.current.classList.remove(classes.columnHeaderDragging);
+    });
+    originColumnIndex.current = apiRef.current.getColumnIndex(params.field, false);
+  }, [props.disableColumnReorder, classes.columnHeaderDragging, logger, apiRef]);
+  const handleDragEnter = React.useCallback((params, event) => {
+    event.preventDefault(); // Prevent drag events propagation.
+    // For more information check here https://github.com/mui/mui-x/issues/2680.
+
+    event.stopPropagation();
+  }, []);
+  const handleDragOver = React.useCallback((params, event) => {
+    const dragColField = (0, _columnReorderSelector.gridColumnReorderDragColSelector)(apiRef);
+
+    if (!dragColField) {
+      return;
+    }
+
+    logger.debug(`Dragging over col ${params.field}`);
+    event.preventDefault(); // Prevent drag events propagation.
+    // For more information check here https://github.com/mui/mui-x/issues/2680.
+
+    event.stopPropagation();
+    const coordinates = {
+      x: event.clientX,
+      y: event.clientY
+    };
+
+    if (params.field !== dragColField && hasCursorPositionChanged(cursorPosition.current, coordinates)) {
+      const targetColIndex = apiRef.current.getColumnIndex(params.field, false);
+      const targetColVisibleIndex = apiRef.current.getColumnIndex(params.field, true);
+      const targetCol = apiRef.current.getColumn(params.field);
+      const dragColIndex = apiRef.current.getColumnIndex(dragColField, false);
+      const visibleColumns = apiRef.current.getVisibleColumns();
+      const cursorMoveDirectionX = getCursorMoveDirectionX(cursorPosition.current, coordinates);
+      const hasMovedLeft = cursorMoveDirectionX === CURSOR_MOVE_DIRECTION_LEFT && targetColIndex < dragColIndex;
+      const hasMovedRight = cursorMoveDirectionX === CURSOR_MOVE_DIRECTION_RIGHT && dragColIndex < targetColIndex;
+
+      if (hasMovedLeft || hasMovedRight) {
+        let 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;
+        }
+
+        const canBeReorderedProcessed = apiRef.current.unstable_applyPreProcessors('canBeReordered', canBeReordered, {
+          targetIndex: targetColVisibleIndex
+        });
+
+        if (canBeReorderedProcessed) {
+          apiRef.current.setColumnIndex(dragColField, targetColIndex);
+        }
+      }
+
+      cursorPosition.current = coordinates;
+    }
+  }, [apiRef, logger]);
+  const handleDragEnd = React.useCallback((params, event) => {
+    const dragColField = (0, _columnReorderSelector.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(state => (0, _extends2.default)({}, state, {
+      columnReorder: (0, _extends2.default)({}, state.columnReorder, {
+        dragCol: ''
+      })
+    }));
+    apiRef.current.forceUpdate();
+  }, [props.disableColumnReorder, logger, apiRef]);
+  (0, _xDataGrid.useGridApiEventHandler)(apiRef, _xDataGrid.GridEvents.columnHeaderDragStart, handleColumnHeaderDragStart);
+  (0, _xDataGrid.useGridApiEventHandler)(apiRef, _xDataGrid.GridEvents.columnHeaderDragEnter, handleDragEnter);
+  (0, _xDataGrid.useGridApiEventHandler)(apiRef, _xDataGrid.GridEvents.columnHeaderDragOver, handleDragOver);
+  (0, _xDataGrid.useGridApiEventHandler)(apiRef, _xDataGrid.GridEvents.columnHeaderDragEnd, handleDragEnd);
+  (0, _xDataGrid.useGridApiEventHandler)(apiRef, _xDataGrid.GridEvents.cellDragEnter, handleDragEnter);
+  (0, _xDataGrid.useGridApiEventHandler)(apiRef, _xDataGrid.GridEvents.cellDragOver, handleDragOver);
+};
+
+exports.useGridColumnReorder = useGridColumnReorder;

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

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.gridResizingColumnFieldSelector = exports.gridColumnResizeSelector = void 0;
+
+var _internals = require("@mui/x-data-grid/internals");
+
+const gridColumnResizeSelector = state => state.columnResize;
+
+exports.gridColumnResizeSelector = gridColumnResizeSelector;
+const gridResizingColumnFieldSelector = (0, _internals.createSelector)(gridColumnResizeSelector, columnResize => columnResize.resizingColumnField);
+exports.gridResizingColumnFieldSelector = gridResizingColumnFieldSelector;

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _columnResizeSelector = require("./columnResizeSelector");
+
+Object.keys(_columnResizeSelector).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _columnResizeSelector[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _columnResizeSelector[key];
+    }
+  });
+});
+
+var _columnResizeState = require("./columnResizeState");
+
+Object.keys(_columnResizeState).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _columnResizeState[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _columnResizeState[key];
+    }
+  });
+});