@mui/x-data-grid-pro 6.5.0 → 6.6.0

package/modern/components/GridScrollArea.js

@@ -0,0 +1,140 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses, unstable_useEventCallback as useEventCallback } from '@mui/utils';
+import { styled } from '@mui/system';
+import { getTotalHeaderHeight } from '@mui/x-data-grid/internals';
+import { getDataGridUtilityClass, gridClasses, gridDensityFactorSelector, useGridApiContext, useGridApiEventHandler, useGridSelector, gridColumnsTotalWidthSelector } from '@mui/x-data-grid';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+const CLIFF = 1;
+const SLOP = 1.5;
+const useUtilityClasses = ownerState => {
+  const {
+    scrollDirection,
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['scrollArea', `scrollArea--${scrollDirection}`]
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const GridScrollAreaRawRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ScrollArea',
+  overridesResolver: (props, styles) => [{
+    [`&.${gridClasses['scrollArea--left']}`]: styles['scrollArea--left']
+  }, {
+    [`&.${gridClasses['scrollArea--right']}`]: styles['scrollArea--right']
+  }, styles.scrollArea]
+})(() => ({
+  position: 'absolute',
+  top: 0,
+  zIndex: 101,
+  width: 20,
+  bottom: 0,
+  [`&.${gridClasses['scrollArea--left']}`]: {
+    left: 0
+  },
+  [`&.${gridClasses['scrollArea--right']}`]: {
+    right: 0
+  }
+}));
+function GridScrollAreaRaw(props) {
+  const {
+    scrollDirection
+  } = props;
+  const rootRef = React.useRef(null);
+  const apiRef = useGridApiContext();
+  const timeout = React.useRef();
+  const [dragging, setDragging] = React.useState(false);
+  const [canScrollMore, setCanScrollMore] = React.useState(true);
+  const densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
+  const columnsTotalWidth = useGridSelector(apiRef, gridColumnsTotalWidthSelector);
+  const scrollPosition = React.useRef({
+    left: 0,
+    top: 0
+  });
+  const rootProps = useGridRootProps();
+  const ownerState = _extends({}, rootProps, {
+    scrollDirection
+  });
+  const classes = useUtilityClasses(ownerState);
+  const totalHeaderHeight = getTotalHeaderHeight(apiRef, rootProps.columnHeaderHeight);
+  const headerHeight = Math.floor(rootProps.columnHeaderHeight * densityFactor);
+  const handleScrolling = React.useCallback(newScrollPosition => {
+    scrollPosition.current = newScrollPosition;
+    const dimensions = apiRef.current.getRootDimensions();
+    setCanScrollMore(() => {
+      if (scrollDirection === 'left') {
+        // Only render if the user has not reached yet the start of the list
+        return scrollPosition.current.left > 0;
+      }
+      if (scrollDirection === 'right') {
+        // Only render if the user has not reached yet the end of the list
+        const maxScrollLeft = columnsTotalWidth - dimensions.viewportInnerSize.width;
+        return scrollPosition.current.left < maxScrollLeft;
+      }
+      return false;
+    });
+  }, [apiRef, columnsTotalWidth, scrollDirection]);
+  const handleDragOver = React.useCallback(event => {
+    let offset;
+
+    // Prevents showing the forbidden cursor
+    event.preventDefault();
+    if (scrollDirection === 'left') {
+      offset = event.clientX - rootRef.current.getBoundingClientRect().right;
+    } else if (scrollDirection === 'right') {
+      offset = Math.max(1, event.clientX - rootRef.current.getBoundingClientRect().left);
+    } else {
+      throw new Error('MUI: Wrong drag direction');
+    }
+    offset = (offset - CLIFF) * SLOP + CLIFF;
+    clearTimeout(timeout.current);
+    // Avoid freeze and inertia.
+    timeout.current = setTimeout(() => {
+      apiRef.current.scroll({
+        left: scrollPosition.current.left + offset,
+        top: scrollPosition.current.top
+      });
+    });
+  }, [scrollDirection, apiRef]);
+  React.useEffect(() => {
+    return () => {
+      clearTimeout(timeout.current);
+    };
+  }, []);
+  const handleColumnHeaderDragStart = useEventCallback(() => {
+    setDragging(true);
+  });
+  const handleColumnHeaderDragEnd = useEventCallback(() => {
+    setDragging(false);
+  });
+  useGridApiEventHandler(apiRef, 'scrollPositionChange', handleScrolling);
+  useGridApiEventHandler(apiRef, 'columnHeaderDragStart', handleColumnHeaderDragStart);
+  useGridApiEventHandler(apiRef, 'columnHeaderDragEnd', handleColumnHeaderDragEnd);
+  if (!dragging || !canScrollMore) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(GridScrollAreaRawRoot, {
+    ref: rootRef,
+    className: clsx(classes.root),
+    ownerState: ownerState,
+    onDragOver: handleDragOver,
+    style: {
+      height: headerHeight,
+      top: totalHeaderHeight - headerHeight
+    }
+  });
+}
+process.env.NODE_ENV !== "production" ? GridScrollAreaRaw.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  scrollDirection: PropTypes.oneOf(['left', 'right']).isRequired
+} : void 0;
+const GridScrollArea = /*#__PURE__*/React.memo(GridScrollAreaRaw);
+export { GridScrollArea };

package/modern/hooks/features/columnResize/useGridColumnResize.js

@@ -130,7 +130,7 @@ export const useGridColumnResize = (apiRef, props) => {
       div.style.maxWidth = finalWidth;
     });
   };
-  const handleResizeMouseUp = useEventCallback(nativeEvent => {
+  const finishResize = nativeEvent => {
     // eslint-disable-next-line @typescript-eslint/no-use-before-define
     stopListening();
     apiRef.current.updateColumns([colDefRef.current]);
@@ -146,7 +146,8 @@ export const useGridColumnResize = (apiRef, props) => {
       }
     });
     logger.debug(`Updating col ${colDefRef.current.field} with new width: ${colDefRef.current.width}`);
-  });
+  };
+  const handleResizeMouseUp = useEventCallback(finishResize);
   const handleResizeMouseMove = useEventCallback(nativeEvent => {
     // Cancel move in case some other element consumed a mouseup event and it was not fired.
     if (nativeEvent.buttons === 0) {
@@ -196,21 +197,16 @@ export const useGridColumnResize = (apiRef, props) => {
     initialOffsetToSeparator.current = computeOffsetToSeparator(event.clientX, colElementRef.current.getBoundingClientRect(), resizeDirection.current);
     doc.addEventListener('mousemove', handleResizeMouseMove);
     doc.addEventListener('mouseup', handleResizeMouseUp);
+
+    // Fixes https://github.com/mui/mui-x/issues/4777
+    colElementRef.current.style.pointerEvents = 'none';
   });
   const handleTouchEnd = useEventCallback(nativeEvent => {
     const finger = trackFinger(nativeEvent, touchId.current);
     if (!finger) {
       return;
     }
-
-    // eslint-disable-next-line @typescript-eslint/no-use-before-define
-    stopListening();
-    apiRef.current.updateColumns([colDefRef.current]);
-    clearTimeout(stopResizeEventTimeout.current);
-    stopResizeEventTimeout.current = setTimeout(() => {
-      apiRef.current.publishEvent('columnResizeStop', null, nativeEvent);
-    });
-    logger.debug(`Updating col ${colDefRef.current.field} with new width: ${colDefRef.current.width}`);
+    finishResize(nativeEvent);
   });
   const handleTouchMove = useEventCallback(nativeEvent => {
     const finger = trackFinger(nativeEvent, touchId.current);
@@ -272,7 +268,10 @@ export const useGridColumnResize = (apiRef, props) => {
     doc.removeEventListener('mouseup', handleResizeMouseUp);
     doc.removeEventListener('touchmove', handleTouchMove);
     doc.removeEventListener('touchend', handleTouchEnd);
-  }, [apiRef, handleResizeMouseMove, handleResizeMouseUp, handleTouchMove, handleTouchEnd]);
+    if (colElementRef.current) {
+      colElementRef.current.style.pointerEvents = 'unset';
+    }
+  }, [apiRef, colElementRef, handleResizeMouseMove, handleResizeMouseUp, handleTouchMove, handleTouchEnd]);
   const handleResizeStart = React.useCallback(({
     field
   }) => {

package/modern/hooks/features/detailPanel/useGridDetailPanel.js

@@ -166,15 +166,13 @@ export const useGridDetailPanel = (apiRef, props) => {
   }, [apiRef, props.getDetailPanelContent, props.getDetailPanelHeight]);
   const addDetailHeight = React.useCallback((initialValue, row) => {
     if (!expandedRowIds || expandedRowIds.length === 0 || !expandedRowIds.includes(row.id)) {
-      return _extends({}, initialValue, {
-        detail: 0
-      });
+      initialValue.detail = 0;
+      return initialValue;
     }
     updateCachesIfNeeded();
     const heightCache = gridDetailPanelExpandedRowsHeightCacheSelector(apiRef);
-    return _extends({}, initialValue, {
-      detail: heightCache[row.id] ?? 0 // Fallback to zero because the cache might not be ready yet (e.g. page was changed)
-    });
+    initialValue.detail = heightCache[row.id] ?? 0; // Fallback to zero because the cache might not be ready yet (e.g. page was changed)
+    return initialValue;
   }, [apiRef, expandedRowIds, updateCachesIfNeeded]);
   useGridRegisterPipeProcessor(apiRef, 'rowHeight', addDetailHeight);
   const isFirstRender = React.useRef(true);

package/modern/hooks/features/treeData/gridTreeDataUtils.js

@@ -12,7 +12,6 @@ export const filterRowTreeFromTreeData = params => {
     disableChildrenFiltering,
     isRowMatchingFilters
   } = params;
-  const visibleRowsLookup = {};
   const filteredRowsLookup = {};
   const filteredDescendantCountLookup = {};
   const filterTreeNode = (node, isParentMatchingFilters, areAncestorsExpanded) => {
@@ -55,13 +54,7 @@ export const filterRowTreeFromTreeData = params => {
           break;
         }
     }
-    visibleRowsLookup[node.id] = shouldPassFilters && areAncestorsExpanded;
     filteredRowsLookup[node.id] = shouldPassFilters;
-
-    // TODO: Should we keep storing the visibility status of footer independently or rely on the group visibility in the selector ?
-    if (node.type === 'group' && node.footerId != null) {
-      visibleRowsLookup[node.footerId] = shouldPassFilters && areAncestorsExpanded && !!node.childrenExpanded;
-    }
     if (!shouldPassFilters) {
       return 0;
     }
@@ -79,7 +72,6 @@ export const filterRowTreeFromTreeData = params => {
     }
   }
   return {
-    visibleRowsLookup,
     filteredRowsLookup,
     filteredDescendantCountLookup
   };

package/modern/hooks/features/treeData/useGridTreeDataPreProcessors.js

@@ -10,6 +10,7 @@ import { GridTreeDataGroupingCell } from '../../../components';
 import { createRowTree } from '../../../utils/tree/createRowTree';
 import { sortRowTree } from '../../../utils/tree/sortRowTree';
 import { updateRowTree } from '../../../utils/tree/updateRowTree';
+import { getVisibleRowsLookup } from '../../../utils/tree/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const useGridTreeDataPreProcessors = (privateApiRef, props) => {
   const setStrategyAvailability = React.useCallback(() => {
@@ -121,6 +122,7 @@ export const useGridTreeDataPreProcessors = (privateApiRef, props) => {
   useGridRegisterStrategyProcessor(privateApiRef, TREE_DATA_STRATEGY, 'rowTreeCreation', createRowTreeForTreeData);
   useGridRegisterStrategyProcessor(privateApiRef, TREE_DATA_STRATEGY, 'filtering', filterRows);
   useGridRegisterStrategyProcessor(privateApiRef, TREE_DATA_STRATEGY, 'sorting', sortRows);
+  useGridRegisterStrategyProcessor(privateApiRef, TREE_DATA_STRATEGY, 'visibleRowsLookupCreation', getVisibleRowsLookup);
 
   /**
    * 1ST RENDER

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v6.5.0
+ * @mui/x-data-grid-pro v6.6.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/modern/internals/index.js

@@ -25,4 +25,4 @@ export { useGridLazyLoaderPreProcessors } from '../hooks/features/lazyLoader/use
 export { createRowTree } from '../utils/tree/createRowTree';
 export { updateRowTree } from '../utils/tree/updateRowTree';
 export { sortRowTree } from '../utils/tree/sortRowTree';
-export { insertNodeInTree, removeNodeFromTree } from '../utils/tree/utils';
+export { insertNodeInTree, removeNodeFromTree, getVisibleRowsLookup } from '../utils/tree/utils';

package/modern/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTY4NDQ0MzYwMDAwMA==";
+  const releaseInfo = "MTY4NTU3MDQwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/modern/utils/tree/utils.js

@@ -176,4 +176,36 @@ export const createUpdatedGroupsManager = () => ({
     }
     this.value[groupId][action] = true;
   }
-});
+});
+export const getVisibleRowsLookup = ({
+  tree,
+  filteredRowsLookup
+}) => {
+  if (!filteredRowsLookup) {
+    return {};
+  }
+  const visibleRowsLookup = {};
+  const handleTreeNode = (node, areAncestorsExpanded) => {
+    const isPassingFiltering = filteredRowsLookup[node.id];
+    if (node.type === 'group') {
+      node.children.forEach(childId => {
+        const childNode = tree[childId];
+        handleTreeNode(childNode, areAncestorsExpanded && !!node.childrenExpanded);
+      });
+    }
+    visibleRowsLookup[node.id] = isPassingFiltering && areAncestorsExpanded;
+
+    // TODO rows v6: Should we keep storing the visibility status of footer independently or rely on the group visibility in the selector ?
+    if (node.type === 'group' && node.footerId != null) {
+      visibleRowsLookup[node.footerId] = isPassingFiltering && areAncestorsExpanded && !!node.childrenExpanded;
+    }
+  };
+  const nodes = Object.values(tree);
+  for (let i = 0; i < nodes.length; i += 1) {
+    const node = nodes[i];
+    if (node.depth === 0) {
+      handleTreeNode(node, true);
+    }
+  }
+  return visibleRowsLookup;
+};

package/node/DataGridPro/DataGridPro.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DataGridPro = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _xLicensePro = require("@mui/x-license-pro");
@@ -27,11 +28,12 @@ const DataGridProRaw = /*#__PURE__*/React.forwardRef(function DataGridPro(inProp
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGrid.GridContextProvider, {
     privateApiRef: privateApiRef,
     props: props,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_xDataGrid.GridRoot, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_xDataGrid.GridRoot, (0, _extends2.default)({
       className: props.className,
       style: props.style,
       sx: props.sx,
-      ref: ref,
+      ref: ref
+    }, props.forwardedProps, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGrid.GridHeader, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGrid.GridBody, {
         VirtualScrollerComponent: _DataGridProVirtualScroller.DataGridProVirtualScroller,
         ColumnHeadersProps: {
@@ -42,7 +44,7 @@ const DataGridProRaw = /*#__PURE__*/React.forwardRef(function DataGridPro(inProp
           releaseInfo: releaseInfo
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGrid.GridFooterPlaceholder, {})]
-    })
+    }))
   });
 });
 const DataGridPro = /*#__PURE__*/React.memo(DataGridProRaw);
@@ -264,6 +266,11 @@ DataGridProRaw.propTypes = {
     quickFilterLogicOperator: _propTypes.default.oneOf(['and', 'or']),
     quickFilterValues: _propTypes.default.array
   }),
+  /**
+   * Forwarded props for the grid root element.
+   * @ignore - do not document.
+   */
+  forwardedProps: _propTypes.default.object,
   /**
    * Function that applies CSS classes dynamically on cells.
    * @param {GridCellParams} params With all properties from [[GridCellParams]].

package/node/components/DataGridProVirtualScroller.js

@@ -185,8 +185,17 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
       bottomPinnedRowsRenderZoneRef.current.style.transform = `translate3d(${left}px, 0px, 0px)`;
     }
   }, []);
+
+  // Create a lookup for faster check if the row is expanded
+  const expandedRowIdsLookup = React.useMemo(() => {
+    const lookup = new Set();
+    expandedRowIds.forEach(id => {
+      lookup.add(id);
+    });
+    return lookup;
+  }, [expandedRowIds]);
   const getRowProps = React.useCallback(id => {
-    if (!expandedRowIds.includes(id)) {
+    if (!expandedRowIdsLookup.has(id)) {
       return null;
     }
     const height = detailPanelsHeights[id];
@@ -195,7 +204,7 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
         marginBottom: height
       }
     };
-  }, [detailPanelsHeights, expandedRowIds]);
+  }, [detailPanelsHeights, expandedRowIdsLookup]);
   const pinnedColumns = (0, _xDataGrid.useGridSelector)(apiRef, _columnPinning.gridPinnedColumnsSelector);
   const [leftPinnedColumns, rightPinnedColumns] = filterColumns(pinnedColumns, visibleColumnFields, theme.direction === 'rtl');
   const pinnedRows = (0, _xDataGrid.useGridSelector)(apiRef, _gridRowPinningSelector.gridPinnedRowsSelector);
@@ -235,15 +244,6 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
     firstColumnIndex: visibleColumnFields.length - rightPinnedColumns.length,
     lastColumnIndex: visibleColumnFields.length
   }) : null;
-
-  // Create a lookup for faster check if the row is expanded
-  const expandedRowIdsLookup = React.useMemo(() => {
-    const lookup = {};
-    expandedRowIds.forEach(id => {
-      lookup[id] = true;
-    });
-    return lookup;
-  }, [expandedRowIds]);
   const getDetailPanel = rowId => {
     const rowsMeta = (0, _xDataGrid.gridRowsMetaSelector)(apiRef.current.state);
     const content = detailPanelsContent[rowId];
@@ -284,7 +284,7 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
       if (rootProps.getDetailPanelContent == null) {
         return;
       }
-      if (!expandedRowIdsLookup[rowId]) {
+      if (!expandedRowIdsLookup.has(rowId)) {
         return;
       }
       const detailPanel = getDetailPanel(rowId);

package/node/components/GridColumnHeaders.js

@@ -16,8 +16,9 @@ var _internals = require("@mui/x-data-grid/internals");
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 var _columnPinning = require("../hooks/features/columnPinning");
-var _DataGridProVirtualScroller = require("./DataGridProVirtualScroller");
 var _useGridColumnHeaders = require("../hooks/features/columnHeaders/useGridColumnHeaders");
+var _DataGridProVirtualScroller = require("./DataGridProVirtualScroller");
+var _GridScrollArea = require("./GridScrollArea");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["style", "className", "innerRef", "visibleColumns", "sortColumnLookup", "filterColumnLookup", "columnPositions", "columnHeaderTabIndexState", "columnGroupHeaderTabIndexState", "columnHeaderFocus", "columnGroupHeaderFocus", "densityFactor", "headerGroupingMaxDepth", "columnMenuState", "columnVisibility", "columnGroupsHeaderStructure", "hasOtherElementInTabSequence", "pinnedColumns"];
 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); }
@@ -193,7 +194,9 @@ const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeade
         minFirstColumn: leftRenderContext.firstColumnIndex,
         maxLastColumn: leftRenderContext.lastColumnIndex
       })]
-    })), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.GridColumnHeadersInner, (0, _extends2.default)({
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollArea.GridScrollArea, {
+      scrollDirection: "left"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.GridColumnHeadersInner, (0, _extends2.default)({
       isDragging: isDragging
     }, innerProps, {
       children: [getColumnGroupHeaders({
@@ -209,7 +212,9 @@ const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeade
         minFirstColumn: leftPinnedColumns.length,
         maxLastColumn: visibleColumnFields.length - rightPinnedColumns.length
       })]
-    })), rightRenderContext && /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridColumnHeadersPinnedColumnHeaders, (0, _extends2.default)({
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollArea.GridScrollArea, {
+      scrollDirection: "right"
+    }), rightRenderContext && /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridColumnHeadersPinnedColumnHeaders, (0, _extends2.default)({
       ownerState: (0, _extends2.default)({}, ownerState, {
         side: _columnPinning.GridPinnedPosition.right,
         showCellVerticalBorder: rootProps.showCellVerticalBorder

package/node/components/GridScrollArea.js

@@ -0,0 +1,149 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridScrollArea = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _utils = require("@mui/utils");
+var _system = require("@mui/system");
+var _internals = require("@mui/x-data-grid/internals");
+var _xDataGrid = require("@mui/x-data-grid");
+var _useGridRootProps = require("../hooks/utils/useGridRootProps");
+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 CLIFF = 1;
+const SLOP = 1.5;
+const useUtilityClasses = ownerState => {
+  const {
+    scrollDirection,
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['scrollArea', `scrollArea--${scrollDirection}`]
+  };
+  return (0, _utils.unstable_composeClasses)(slots, _xDataGrid.getDataGridUtilityClass, classes);
+};
+const GridScrollAreaRawRoot = (0, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'ScrollArea',
+  overridesResolver: (props, styles) => [{
+    [`&.${_xDataGrid.gridClasses['scrollArea--left']}`]: styles['scrollArea--left']
+  }, {
+    [`&.${_xDataGrid.gridClasses['scrollArea--right']}`]: styles['scrollArea--right']
+  }, styles.scrollArea]
+})(() => ({
+  position: 'absolute',
+  top: 0,
+  zIndex: 101,
+  width: 20,
+  bottom: 0,
+  [`&.${_xDataGrid.gridClasses['scrollArea--left']}`]: {
+    left: 0
+  },
+  [`&.${_xDataGrid.gridClasses['scrollArea--right']}`]: {
+    right: 0
+  }
+}));
+function GridScrollAreaRaw(props) {
+  const {
+    scrollDirection
+  } = props;
+  const rootRef = React.useRef(null);
+  const apiRef = (0, _xDataGrid.useGridApiContext)();
+  const timeout = React.useRef();
+  const [dragging, setDragging] = React.useState(false);
+  const [canScrollMore, setCanScrollMore] = React.useState(true);
+  const densityFactor = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridDensityFactorSelector);
+  const columnsTotalWidth = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridColumnsTotalWidthSelector);
+  const scrollPosition = React.useRef({
+    left: 0,
+    top: 0
+  });
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const ownerState = (0, _extends2.default)({}, rootProps, {
+    scrollDirection
+  });
+  const classes = useUtilityClasses(ownerState);
+  const totalHeaderHeight = (0, _internals.getTotalHeaderHeight)(apiRef, rootProps.columnHeaderHeight);
+  const headerHeight = Math.floor(rootProps.columnHeaderHeight * densityFactor);
+  const handleScrolling = React.useCallback(newScrollPosition => {
+    scrollPosition.current = newScrollPosition;
+    const dimensions = apiRef.current.getRootDimensions();
+    setCanScrollMore(() => {
+      if (scrollDirection === 'left') {
+        // Only render if the user has not reached yet the start of the list
+        return scrollPosition.current.left > 0;
+      }
+      if (scrollDirection === 'right') {
+        // Only render if the user has not reached yet the end of the list
+        const maxScrollLeft = columnsTotalWidth - dimensions.viewportInnerSize.width;
+        return scrollPosition.current.left < maxScrollLeft;
+      }
+      return false;
+    });
+  }, [apiRef, columnsTotalWidth, scrollDirection]);
+  const handleDragOver = React.useCallback(event => {
+    let offset;
+
+    // Prevents showing the forbidden cursor
+    event.preventDefault();
+    if (scrollDirection === 'left') {
+      offset = event.clientX - rootRef.current.getBoundingClientRect().right;
+    } else if (scrollDirection === 'right') {
+      offset = Math.max(1, event.clientX - rootRef.current.getBoundingClientRect().left);
+    } else {
+      throw new Error('MUI: Wrong drag direction');
+    }
+    offset = (offset - CLIFF) * SLOP + CLIFF;
+    clearTimeout(timeout.current);
+    // Avoid freeze and inertia.
+    timeout.current = setTimeout(() => {
+      apiRef.current.scroll({
+        left: scrollPosition.current.left + offset,
+        top: scrollPosition.current.top
+      });
+    });
+  }, [scrollDirection, apiRef]);
+  React.useEffect(() => {
+    return () => {
+      clearTimeout(timeout.current);
+    };
+  }, []);
+  const handleColumnHeaderDragStart = (0, _utils.unstable_useEventCallback)(() => {
+    setDragging(true);
+  });
+  const handleColumnHeaderDragEnd = (0, _utils.unstable_useEventCallback)(() => {
+    setDragging(false);
+  });
+  (0, _xDataGrid.useGridApiEventHandler)(apiRef, 'scrollPositionChange', handleScrolling);
+  (0, _xDataGrid.useGridApiEventHandler)(apiRef, 'columnHeaderDragStart', handleColumnHeaderDragStart);
+  (0, _xDataGrid.useGridApiEventHandler)(apiRef, 'columnHeaderDragEnd', handleColumnHeaderDragEnd);
+  if (!dragging || !canScrollMore) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridScrollAreaRawRoot, {
+    ref: rootRef,
+    className: (0, _clsx.default)(classes.root),
+    ownerState: ownerState,
+    onDragOver: handleDragOver,
+    style: {
+      height: headerHeight,
+      top: totalHeaderHeight - headerHeight
+    }
+  });
+}
+process.env.NODE_ENV !== "production" ? GridScrollAreaRaw.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  scrollDirection: _propTypes.default.oneOf(['left', 'right']).isRequired
+} : void 0;
+const GridScrollArea = /*#__PURE__*/React.memo(GridScrollAreaRaw);
+exports.GridScrollArea = GridScrollArea;

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

@@ -140,7 +140,7 @@ const useGridColumnResize = (apiRef, props) => {
       div.style.maxWidth = finalWidth;
     });
   };
-  const handleResizeMouseUp = (0, _utils.unstable_useEventCallback)(nativeEvent => {
+  const finishResize = nativeEvent => {
     // eslint-disable-next-line @typescript-eslint/no-use-before-define
     stopListening();
     apiRef.current.updateColumns([colDefRef.current]);
@@ -156,7 +156,8 @@ const useGridColumnResize = (apiRef, props) => {
       }
     });
     logger.debug(`Updating col ${colDefRef.current.field} with new width: ${colDefRef.current.width}`);
-  });
+  };
+  const handleResizeMouseUp = (0, _utils.unstable_useEventCallback)(finishResize);
   const handleResizeMouseMove = (0, _utils.unstable_useEventCallback)(nativeEvent => {
     // Cancel move in case some other element consumed a mouseup event and it was not fired.
     if (nativeEvent.buttons === 0) {
@@ -206,21 +207,16 @@ const useGridColumnResize = (apiRef, props) => {
     initialOffsetToSeparator.current = computeOffsetToSeparator(event.clientX, colElementRef.current.getBoundingClientRect(), resizeDirection.current);
     doc.addEventListener('mousemove', handleResizeMouseMove);
     doc.addEventListener('mouseup', handleResizeMouseUp);
+
+    // Fixes https://github.com/mui/mui-x/issues/4777
+    colElementRef.current.style.pointerEvents = 'none';
   });
   const handleTouchEnd = (0, _utils.unstable_useEventCallback)(nativeEvent => {
     const finger = trackFinger(nativeEvent, touchId.current);
     if (!finger) {
       return;
     }
-
-    // eslint-disable-next-line @typescript-eslint/no-use-before-define
-    stopListening();
-    apiRef.current.updateColumns([colDefRef.current]);
-    clearTimeout(stopResizeEventTimeout.current);
-    stopResizeEventTimeout.current = setTimeout(() => {
-      apiRef.current.publishEvent('columnResizeStop', null, nativeEvent);
-    });
-    logger.debug(`Updating col ${colDefRef.current.field} with new width: ${colDefRef.current.width}`);
+    finishResize(nativeEvent);
   });
   const handleTouchMove = (0, _utils.unstable_useEventCallback)(nativeEvent => {
     const finger = trackFinger(nativeEvent, touchId.current);
@@ -282,7 +278,10 @@ const useGridColumnResize = (apiRef, props) => {
     doc.removeEventListener('mouseup', handleResizeMouseUp);
     doc.removeEventListener('touchmove', handleTouchMove);
     doc.removeEventListener('touchend', handleTouchEnd);
-  }, [apiRef, handleResizeMouseMove, handleResizeMouseUp, handleTouchMove, handleTouchEnd]);
+    if (colElementRef.current) {
+      colElementRef.current.style.pointerEvents = 'unset';
+    }
+  }, [apiRef, colElementRef, handleResizeMouseMove, handleResizeMouseUp, handleTouchMove, handleTouchEnd]);
   const handleResizeStart = React.useCallback(({
     field
   }) => {