@mui/x-data-grid-pro 8.3.1 → 8.4.0

package/CHANGELOG.md

@@ -5,6 +5,116 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.4.0
+
+_May 21, 2025_
+
+We'd like to offer a big thanks to the 21 contributors who made this release possible. Here are some highlights ✨:
+
+- 🔺 Support regular [`pyramid` variation in the `<FunnelChart />` component](https://mui.com/x/react-charts/funnel/#pyramid-chart):
+
+  <img width="398" alt="Pyramid funnel chart" src="https://github.com/user-attachments/assets/90ccb221-3a48-4ffa-8878-89c6db16da86" />
+
+- 📚 Documentation improvements
+- 🌎 Improve Icelandic (is-IS) locale on the Data Grid
+- 🐞 Bugfixes
+
+Special thanks go out to the community members for their valuable contributions:
+@aizerin, @arminmeh, @campmarc, @jyash97, @mapache-salvaje, @noraleonte, @nusr, @ragnarr18, @romgrk, @whereisrmsqhs.
+Following are all team members who have contributed to this release:
+@alexfauquette, @bernardobelchior, @flaviendelangle, @JCQuintas, @KenanYusuf, @LukasTy, @MBilalShafi, @rita-codes.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.4.0`
+
+- [DataGrid] Fix content rendering for large rows while using automatic page size (#14737) @campmarc
+- [DataGrid] Fix disabled typography variants crashing grid (#17934) @KenanYusuf
+- [DataGrid] Fix tree data demo crash (#17904) @MBilalShafi
+- [DataGrid] Use `exclude` selection model type if quick filter does not have actual values (#17899) @arminmeh
+- [DataGrid] Fix clipboard copy behavior for cell ranges with empty cells (#16797) @nusr
+- [l10n] Improve Icelandic (is-IS) locale (#17915) @ragnarr18
+
+#### `@mui/x-data-grid-pro@8.4.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.4.0`, plus:
+
+- [DataGridPro] Add `aria-expanded` attribute to the master detail toggle button (#17122) @whereisrmsqhs
+- [DataGridPro] Preserve row state during server-side lazy loading (#17743) @arminmeh
+- [DataGridPro] Prevent text selection when reordering rows (#16568) @jyash97
+
+#### `@mui/x-data-grid-premium@8.4.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.4.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.4.0`
+
+- [fields] Ensure fresh `disabled` value is used when focusing or clicking (#17914) @aizerin
+- [fields] Improve the field controlled edition (#17816) @flaviendelangle
+- [pickers] Fix `PickersTextField` overflow (#17942) @noraleonte
+
+#### `@mui/x-date-pickers-pro@8.4.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.4.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.4.0`
+
+- [charts] Add grouped axes demo (#17848) @bernardobelchior
+- [charts] Enable tooltip disable portal (#17871) @alexfauquette
+- [charts] Improve performance in scatter chart (#17849) @bernardobelchior
+- [charts] Recreate `isPointInside` less often (#17850) @bernardobelchior
+- [charts] Try fix for flaky `useAnimate` test (#17777) @JCQuintas
+- [charts] Add `isXInside` and `isYInside` (#17911) @bernardobelchior
+
+#### `@mui/x-charts-pro@8.4.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.4.0`, plus:
+
+- [charts-pro] Add size for zoom slider (#17736) @bernardobelchior
+- [charts-pro] Add zoom slider tooltip (#17733) @bernardobelchior
+- [charts-pro] Clean and document Heatmap Tooltip (#17933) @alexfauquette
+- [charts-pro] Introduce `Pyramid` chart (#17783) @JCQuintas
+- [charts-pro] Update zoom slider nomenclature (#17938) @bernardobelchior
+- [charts-pro] Fix error when importing rasterizehtml (#17897) @bernardobelchior
+
+### Tree View
+
+#### `@mui/x-tree-view@8.4.0`
+
+- [TreeView] Add `getItemChildren` prop in `RichTreeView` (#17894) @rita-codes
+- [TreeView] Add a method in the `apiRef` to toggle the editing status of an item (#17768) @rita-codes
+- [TreeView] Add missing sx prop on the Tree Item component (#17930) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@8.4.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.4.0`.
+
+### Docs
+
+- [docs] Add a recipe for drag and drop row grouping (#17638) @KenanYusuf
+- [docs] Add introductory text to Data Grid component pages (#17902) @KenanYusuf
+- [docs] Refactor embedded CodeSandbox on Data Grid—Quickstart page (#17749) @rita-codes
+- [docs] Remove double border on Data Grid—Quickstart demo (#17932) @rita-codes
+- [docs] Standardize `apiRef` copy (#17776) @mapache-salvaje
+- [docs][DataGrid] Revise server-side data docs (#17007) @mapache-salvaje
+- [docs][DataGrid] Audit and revise the tree data doc (#17650) @mapache-salvaje
+- [docs][pickers] Fix migration guide references to range fields (#17861) @LukasTy
+- [docs][charts] Reorganize the Tooltip documentation (#17917) @alexfauquette
+
+### Core
+
+- [core] refactor: remove manual `displayName` (#17845) @romgrk
+- [code-infra] Document how to use `vitest` cli (#17847) @JCQuintas
+- [code-infra] Increase charts export test timeout (#17909) @JCQuintas
+- [code-infra] Set `isolatedModules=true` in tsconfig (#17781) @JCQuintas
+- [infra] Ensure proper docs preview path resolution (#17863) @LukasTy
+
 ## 8.3.1
 
 _May 14, 2025_

package/DataGridPro/DataGridPro.js

@@ -29,7 +29,7 @@ const configuration = {
     useCellAggregationResult: () => null
   }
 };
-const releaseInfo = "MTc0NzE3MzYwMDAwMA==";
+const releaseInfo = "MTc0Nzc3ODQwMDAwMA==";
 const watermark = /*#__PURE__*/(0, _jsxRuntime.jsx)(_xLicense.Watermark, {
   packageName: "x-data-grid-pro",
   releaseInfo: releaseInfo
@@ -64,6 +64,7 @@ const DataGridProRaw = (0, _forwardRef.forwardRef)(function DataGridPro(inProps,
  * - [DataGridPro API](https://mui.com/x/api/data-grid/data-grid-pro/)
  */
 const DataGridPro = exports.DataGridPro = /*#__PURE__*/React.memo(DataGridProRaw);
+if (process.env.NODE_ENV !== "production") DataGridPro.displayName = "DataGridPro";
 DataGridProRaw.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/GridDetailPanelToggleCell.js

@@ -54,6 +54,7 @@ function GridDetailPanelToggleCell(props) {
     tabIndex: -1,
     disabled: !hasContent,
     className: classes.root,
+    "aria-expanded": isExpanded,
     "aria-label": isExpanded ? apiRef.current.getLocaleText('collapseDetailPanel') : apiRef.current.getLocaleText('expandDetailPanel')
   }, rootProps.slotProps?.baseIconButton, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {

package/components/GridRowReorderCell.js

@@ -57,10 +57,23 @@ function GridRowReorderCell(params) {
       propHandler(event);
     }
   }, [apiRef, params.id]);
+  const handleMouseDown = React.useCallback(() => {
+    // Prevent text selection as it will block all the drag events. More context: https://github.com/mui/mui-x/issues/16303
+    apiRef.current.rootElementRef?.current?.classList.add(_xDataGrid.gridClasses['root--disableUserSelection']);
+  }, [apiRef]);
+  const handleMouseUp = React.useCallback(() => {
+    apiRef.current.rootElementRef?.current?.classList.remove(_xDataGrid.gridClasses['root--disableUserSelection']);
+  }, [apiRef]);
+  const handleDragEnd = React.useCallback(event => {
+    handleMouseUp();
+    publish('rowDragEnd')(event);
+  }, [publish, handleMouseUp]);
   const draggableEventHandlers = isDraggable ? {
     onDragStart: publish('rowDragStart'),
     onDragOver: publish('rowDragOver'),
-    onDragEnd: publish('rowDragEnd')
+    onDragEnd: handleDragEnd,
+    onMouseDown: handleMouseDown,
+    onMouseUp: handleMouseUp
   } : null;
   if (params.rowNode.type === 'footer') {
     return null;
@@ -146,4 +159,5 @@ const renderRowReorderCell = params => {
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridRowReorderCell, (0, _extends2.default)({}, params));
 };
-exports.renderRowReorderCell = renderRowReorderCell;
+exports.renderRowReorderCell = renderRowReorderCell;
+if (process.env.NODE_ENV !== "production") renderRowReorderCell.displayName = "renderRowReorderCell";

package/esm/DataGridPro/DataGridPro.js

@@ -22,7 +22,7 @@ const configuration = {
     useCellAggregationResult: () => null
   }
 };
-const releaseInfo = "MTc0NzE3MzYwMDAwMA==";
+const releaseInfo = "MTc0Nzc3ODQwMDAwMA==";
 const watermark = /*#__PURE__*/_jsx(Watermark, {
   packageName: "x-data-grid-pro",
   releaseInfo: releaseInfo
@@ -57,6 +57,7 @@ const DataGridProRaw = forwardRef(function DataGridPro(inProps, ref) {
  * - [DataGridPro API](https://mui.com/x/api/data-grid/data-grid-pro/)
  */
 export const DataGridPro = /*#__PURE__*/React.memo(DataGridProRaw);
+if (process.env.NODE_ENV !== "production") DataGridPro.displayName = "DataGridPro";
 DataGridProRaw.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/components/GridDetailPanelToggleCell.js

@@ -46,6 +46,7 @@ function GridDetailPanelToggleCell(props) {
     tabIndex: -1,
     disabled: !hasContent,
     className: classes.root,
+    "aria-expanded": isExpanded,
     "aria-label": isExpanded ? apiRef.current.getLocaleText('collapseDetailPanel') : apiRef.current.getLocaleText('expandDetailPanel')
   }, rootProps.slotProps?.baseIconButton, {
     children: /*#__PURE__*/_jsx(Icon, {

package/esm/components/GridRowReorderCell.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
-import { gridRowMaximumTreeDepthSelector, gridSortModelSelector, useGridApiContext, useGridSelector, getDataGridUtilityClass } from '@mui/x-data-grid';
+import { gridRowMaximumTreeDepthSelector, gridSortModelSelector, useGridApiContext, useGridSelector, getDataGridUtilityClass, gridClasses } from '@mui/x-data-grid';
 import { gridEditRowsStateSelector, isEventTargetInPortal } from '@mui/x-data-grid/internals';
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -48,10 +48,23 @@ function GridRowReorderCell(params) {
       propHandler(event);
     }
   }, [apiRef, params.id]);
+  const handleMouseDown = React.useCallback(() => {
+    // Prevent text selection as it will block all the drag events. More context: https://github.com/mui/mui-x/issues/16303
+    apiRef.current.rootElementRef?.current?.classList.add(gridClasses['root--disableUserSelection']);
+  }, [apiRef]);
+  const handleMouseUp = React.useCallback(() => {
+    apiRef.current.rootElementRef?.current?.classList.remove(gridClasses['root--disableUserSelection']);
+  }, [apiRef]);
+  const handleDragEnd = React.useCallback(event => {
+    handleMouseUp();
+    publish('rowDragEnd')(event);
+  }, [publish, handleMouseUp]);
   const draggableEventHandlers = isDraggable ? {
     onDragStart: publish('rowDragStart'),
     onDragOver: publish('rowDragOver'),
-    onDragEnd: publish('rowDragEnd')
+    onDragEnd: handleDragEnd,
+    onMouseDown: handleMouseDown,
+    onMouseUp: handleMouseUp
   } : null;
   if (params.rowNode.type === 'footer') {
     return null;
@@ -137,4 +150,5 @@ export const renderRowReorderCell = params => {
     return null;
   }
   return /*#__PURE__*/_jsx(GridRowReorderCell, _extends({}, params));
-};
+};
+if (process.env.NODE_ENV !== "production") renderRowReorderCell.displayName = "renderRowReorderCell";

package/esm/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -137,6 +137,7 @@ export const useGridColumnHeaders = props => {
       })]
     });
   };
+  if (process.env.NODE_ENV !== "production") getColumnFiltersRow.displayName = "getColumnFiltersRow";
   return _extends({}, otherProps, {
     getColumnFiltersRow
   });

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

@@ -48,6 +48,44 @@ export const useGridColumnReorder = (apiRef, props) => {
       clearTimeout(removeDnDStylesTimeout.current);
     };
   }, []);
+  const handleDragEnd = React.useCallback((params, event) => {
+    const 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);
+
+    // For more information check here https://github.com/mui/mui-x/issues/14678
+    if (dragColNode.current.classList.contains(classes.columnHeaderDragging)) {
+      dragColNode.current.classList.remove(classes.columnHeaderDragging);
+    }
+    dragColNode.current = null;
+
+    // Check if the column was dropped outside the grid.
+    if (event.dataTransfer.dropEffect === 'none' && !props.keepColumnPositionIfDraggedOutside) {
+      // Accessing params.field may contain the wrong field as header elements are reused
+      apiRef.current.setColumnIndex(dragColField, originColumnIndex.current);
+      originColumnIndex.current = null;
+    } else {
+      // Emit the columnOrderChange event only once when the reordering stops.
+      const columnOrderChangeParams = {
+        column: apiRef.current.getColumn(dragColField),
+        targetIndex: apiRef.current.getColumnIndexRelativeToVisibleColumns(dragColField),
+        oldIndex: originColumnIndex.current
+      };
+      apiRef.current.publishEvent('columnOrderChange', columnOrderChangeParams);
+    }
+    apiRef.current.setState(state => _extends({}, state, {
+      columnReorder: _extends({}, state.columnReorder, {
+        dragCol: ''
+      })
+    }));
+  }, [apiRef, props.disableColumnReorder, props.keepColumnPositionIfDraggedOutside, logger, classes.columnHeaderDragging]);
   const handleDragStart = React.useCallback((params, event) => {
     if (props.disableColumnReorder || params.colDef.disableReorder) {
       return;
@@ -58,6 +96,11 @@ export const useGridColumnReorder = (apiRef, props) => {
     event.stopPropagation();
     dragColNode.current = event.currentTarget;
     dragColNode.current.classList.add(classes.columnHeaderDragging);
+    const handleDragEndEvent = dragEndEvent => {
+      dragColNode.current.removeEventListener('dragend', handleDragEndEvent);
+      apiRef.current.publishEvent('columnHeaderDragEndNative', params, dragEndEvent);
+    };
+    dragColNode.current.addEventListener('dragend', handleDragEndEvent);
     if (event.dataTransfer) {
       event.dataTransfer.effectAllowed = 'move';
     }
@@ -194,48 +237,10 @@ export const useGridColumnReorder = (apiRef, props) => {
       cursorPosition.current = coordinates;
     }
   }, [apiRef, logger, isRtl]);
-  const handleDragEnd = React.useCallback((params, event) => {
-    const 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);
-
-    // For more information check here https://github.com/mui/mui-x/issues/14678
-    if (dragColNode.current.classList.contains(classes.columnHeaderDragging)) {
-      dragColNode.current.classList.remove(classes.columnHeaderDragging);
-    }
-    dragColNode.current = null;
-
-    // Check if the column was dropped outside the grid.
-    if (event.dataTransfer.dropEffect === 'none' && !props.keepColumnPositionIfDraggedOutside) {
-      // Accessing params.field may contain the wrong field as header elements are reused
-      apiRef.current.setColumnIndex(dragColField, originColumnIndex.current);
-      originColumnIndex.current = null;
-    } else {
-      // Emit the columnOrderChange event only once when the reordering stops.
-      const columnOrderChangeParams = {
-        column: apiRef.current.getColumn(dragColField),
-        targetIndex: apiRef.current.getColumnIndexRelativeToVisibleColumns(dragColField),
-        oldIndex: originColumnIndex.current
-      };
-      apiRef.current.publishEvent('columnOrderChange', columnOrderChangeParams);
-    }
-    apiRef.current.setState(state => _extends({}, state, {
-      columnReorder: _extends({}, state.columnReorder, {
-        dragCol: ''
-      })
-    }));
-  }, [apiRef, props.disableColumnReorder, props.keepColumnPositionIfDraggedOutside, logger, classes.columnHeaderDragging]);
   useGridEvent(apiRef, 'columnHeaderDragStart', handleDragStart);
   useGridEvent(apiRef, 'columnHeaderDragEnter', handleDragEnter);
   useGridEvent(apiRef, 'columnHeaderDragOver', handleDragOver);
-  useGridEvent(apiRef, 'columnHeaderDragEnd', handleDragEnd);
+  useGridEvent(apiRef, 'columnHeaderDragEndNative', handleDragEnd);
   useGridEvent(apiRef, 'cellDragEnter', handleDragEnter);
   useGridEvent(apiRef, 'cellDragOver', handleDragOver);
   useGridEventPriority(apiRef, 'columnOrderChange', props.onColumnOrderChange);

package/esm/hooks/features/serverSideLazyLoader/useGridDataSourceLazyLoader.js

@@ -32,6 +32,7 @@ export const useGridDataSourceLazyLoader = (privateApiRef, props) => {
   const previousLastRowIndex = React.useRef(0);
   const loadingTrigger = React.useRef(null);
   const rowsStale = React.useRef(false);
+  const draggedRowId = React.useRef(null);
   const fetchRows = React.useCallback(params => {
     privateApiRef.current.dataSource.fetchRows(GRID_ROOT_GROUP_ID, params);
   }, [privateApiRef]);
@@ -87,7 +88,6 @@ export const useGridDataSourceLazyLoader = (privateApiRef, props) => {
   }, [privateApiRef, resetGrid]);
   const addSkeletonRows = React.useCallback(() => {
     const tree = privateApiRef.current.state.rows.tree;
-    const dataRowIdToModelLookup = privateApiRef.current.state.rows.dataRowIdToModelLookup;
     const rootGroup = tree[GRID_ROOT_GROUP_ID];
     const rootGroupChildren = [...rootGroup.children];
     const pageRowCount = privateApiRef.current.state.pagination.rowCount;
@@ -111,21 +111,20 @@ export const useGridDataSourceLazyLoader = (privateApiRef, props) => {
         break;
       }
       // replace the rows not in the viewport with skeleton rows
-      if (pageToSkip.start <= i && i <= pageToSkip.end || tree[rootGroupChildren[i]]?.type === 'skeletonRow') {
+      if (pageToSkip.start <= i && i <= pageToSkip.end || tree[rootGroupChildren[i]]?.type === 'skeletonRow' ||
+      // ignore rows that are already skeleton rows
+      tree[rootGroupChildren[i]]?.id === draggedRowId.current // ignore row that is being dragged (https://github.com/mui/mui-x/issues/17854)
+      ) {
         continue;
       }
-      const skeletonId = getSkeletonRowId(i); // to avoid duplicate keys on rebuild
-      const removedRow = rootGroupChildren[i];
-      rootGroupChildren[i] = skeletonId;
+      const rowId = tree[rootGroupChildren[i]].id; // keep the id, so that row related state is maintained
       const skeletonRowNode = {
         type: 'skeletonRow',
-        id: skeletonId,
+        id: rowId,
         parent: GRID_ROOT_GROUP_ID,
         depth: 0
       };
-      tree[skeletonId] = skeletonRowNode;
-      delete tree[removedRow];
-      delete dataRowIdToModelLookup[removedRow];
+      tree[rowId] = skeletonRowNode;
       hasChanged = true;
     }
 
@@ -153,8 +152,7 @@ export const useGridDataSourceLazyLoader = (privateApiRef, props) => {
     });
     privateApiRef.current.setState(state => _extends({}, state, {
       rows: _extends({}, state.rows, {
-        tree,
-        dataRowIdToModelLookup
+        tree
       })
     }), 'addSkeletonRows');
   }, [privateApiRef, adjustRowParams]);
@@ -341,6 +339,12 @@ export const useGridDataSourceLazyLoader = (privateApiRef, props) => {
     privateApiRef.current.setLoading(true);
     debouncedFetchRows(getRowsParams);
   }, [privateApiRef, debouncedFetchRows, throttledHandleRenderedRowsIntervalChange]);
+  const handleDragStart = React.useCallback(row => {
+    draggedRowId.current = row.id;
+  }, []);
+  const handleDragEnd = React.useCallback(() => {
+    draggedRowId.current = null;
+  }, []);
   const handleStrategyActivityChange = React.useCallback(() => {
     setLazyLoadingRowsUpdateStrategyActive(privateApiRef.current.getActiveStrategy(GridStrategyGroup.DataSource) === DataSourceRowsUpdateStrategy.LazyLoading);
   }, [privateApiRef]);
@@ -351,6 +355,8 @@ export const useGridDataSourceLazyLoader = (privateApiRef, props) => {
   useGridEvent(privateApiRef, 'renderedRowsIntervalChange', runIf(lazyLoadingRowsUpdateStrategyActive, throttledHandleRenderedRowsIntervalChange));
   useGridEvent(privateApiRef, 'sortModelChange', runIf(lazyLoadingRowsUpdateStrategyActive, handleGridSortModelChange));
   useGridEvent(privateApiRef, 'filterModelChange', runIf(lazyLoadingRowsUpdateStrategyActive, handleGridFilterModelChange));
+  useGridEvent(privateApiRef, 'rowDragStart', runIf(lazyLoadingRowsUpdateStrategyActive, handleDragStart));
+  useGridEvent(privateApiRef, 'rowDragEnd', runIf(lazyLoadingRowsUpdateStrategyActive, handleDragEnd));
   React.useEffect(() => {
     setStrategyAvailability();
   }, [setStrategyAvailability]);

package/esm/index.js

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

package/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -145,6 +145,7 @@ const useGridColumnHeaders = props => {
       })]
     });
   };
+  if (process.env.NODE_ENV !== "production") getColumnFiltersRow.displayName = "getColumnFiltersRow";
   return (0, _extends2.default)({}, otherProps, {
     getColumnFiltersRow
   });

package/hooks/features/columnReorder/useGridColumnReorder.js

@@ -57,6 +57,44 @@ const useGridColumnReorder = (apiRef, props) => {
       clearTimeout(removeDnDStylesTimeout.current);
     };
   }, []);
+  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);
+
+    // For more information check here https://github.com/mui/mui-x/issues/14678
+    if (dragColNode.current.classList.contains(classes.columnHeaderDragging)) {
+      dragColNode.current.classList.remove(classes.columnHeaderDragging);
+    }
+    dragColNode.current = null;
+
+    // Check if the column was dropped outside the grid.
+    if (event.dataTransfer.dropEffect === 'none' && !props.keepColumnPositionIfDraggedOutside) {
+      // Accessing params.field may contain the wrong field as header elements are reused
+      apiRef.current.setColumnIndex(dragColField, originColumnIndex.current);
+      originColumnIndex.current = null;
+    } else {
+      // Emit the columnOrderChange event only once when the reordering stops.
+      const columnOrderChangeParams = {
+        column: apiRef.current.getColumn(dragColField),
+        targetIndex: apiRef.current.getColumnIndexRelativeToVisibleColumns(dragColField),
+        oldIndex: originColumnIndex.current
+      };
+      apiRef.current.publishEvent('columnOrderChange', columnOrderChangeParams);
+    }
+    apiRef.current.setState(state => (0, _extends2.default)({}, state, {
+      columnReorder: (0, _extends2.default)({}, state.columnReorder, {
+        dragCol: ''
+      })
+    }));
+  }, [apiRef, props.disableColumnReorder, props.keepColumnPositionIfDraggedOutside, logger, classes.columnHeaderDragging]);
   const handleDragStart = React.useCallback((params, event) => {
     if (props.disableColumnReorder || params.colDef.disableReorder) {
       return;
@@ -67,6 +105,11 @@ const useGridColumnReorder = (apiRef, props) => {
     event.stopPropagation();
     dragColNode.current = event.currentTarget;
     dragColNode.current.classList.add(classes.columnHeaderDragging);
+    const handleDragEndEvent = dragEndEvent => {
+      dragColNode.current.removeEventListener('dragend', handleDragEndEvent);
+      apiRef.current.publishEvent('columnHeaderDragEndNative', params, dragEndEvent);
+    };
+    dragColNode.current.addEventListener('dragend', handleDragEndEvent);
     if (event.dataTransfer) {
       event.dataTransfer.effectAllowed = 'move';
     }
@@ -203,48 +246,10 @@ const useGridColumnReorder = (apiRef, props) => {
       cursorPosition.current = coordinates;
     }
   }, [apiRef, logger, isRtl]);
-  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);
-
-    // For more information check here https://github.com/mui/mui-x/issues/14678
-    if (dragColNode.current.classList.contains(classes.columnHeaderDragging)) {
-      dragColNode.current.classList.remove(classes.columnHeaderDragging);
-    }
-    dragColNode.current = null;
-
-    // Check if the column was dropped outside the grid.
-    if (event.dataTransfer.dropEffect === 'none' && !props.keepColumnPositionIfDraggedOutside) {
-      // Accessing params.field may contain the wrong field as header elements are reused
-      apiRef.current.setColumnIndex(dragColField, originColumnIndex.current);
-      originColumnIndex.current = null;
-    } else {
-      // Emit the columnOrderChange event only once when the reordering stops.
-      const columnOrderChangeParams = {
-        column: apiRef.current.getColumn(dragColField),
-        targetIndex: apiRef.current.getColumnIndexRelativeToVisibleColumns(dragColField),
-        oldIndex: originColumnIndex.current
-      };
-      apiRef.current.publishEvent('columnOrderChange', columnOrderChangeParams);
-    }
-    apiRef.current.setState(state => (0, _extends2.default)({}, state, {
-      columnReorder: (0, _extends2.default)({}, state.columnReorder, {
-        dragCol: ''
-      })
-    }));
-  }, [apiRef, props.disableColumnReorder, props.keepColumnPositionIfDraggedOutside, logger, classes.columnHeaderDragging]);
   (0, _xDataGrid.useGridEvent)(apiRef, 'columnHeaderDragStart', handleDragStart);
   (0, _xDataGrid.useGridEvent)(apiRef, 'columnHeaderDragEnter', handleDragEnter);
   (0, _xDataGrid.useGridEvent)(apiRef, 'columnHeaderDragOver', handleDragOver);
-  (0, _xDataGrid.useGridEvent)(apiRef, 'columnHeaderDragEnd', handleDragEnd);
+  (0, _xDataGrid.useGridEvent)(apiRef, 'columnHeaderDragEndNative', handleDragEnd);
   (0, _xDataGrid.useGridEvent)(apiRef, 'cellDragEnter', handleDragEnter);
   (0, _xDataGrid.useGridEvent)(apiRef, 'cellDragOver', handleDragOver);
   (0, _xDataGrid.useGridEventPriority)(apiRef, 'columnOrderChange', props.onColumnOrderChange);

package/hooks/features/serverSideLazyLoader/useGridDataSourceLazyLoader.js

@@ -40,6 +40,7 @@ const useGridDataSourceLazyLoader = (privateApiRef, props) => {
   const previousLastRowIndex = React.useRef(0);
   const loadingTrigger = React.useRef(null);
   const rowsStale = React.useRef(false);
+  const draggedRowId = React.useRef(null);
   const fetchRows = React.useCallback(params => {
     privateApiRef.current.dataSource.fetchRows(_xDataGrid.GRID_ROOT_GROUP_ID, params);
   }, [privateApiRef]);
@@ -95,7 +96,6 @@ const useGridDataSourceLazyLoader = (privateApiRef, props) => {
   }, [privateApiRef, resetGrid]);
   const addSkeletonRows = React.useCallback(() => {
     const tree = privateApiRef.current.state.rows.tree;
-    const dataRowIdToModelLookup = privateApiRef.current.state.rows.dataRowIdToModelLookup;
     const rootGroup = tree[_xDataGrid.GRID_ROOT_GROUP_ID];
     const rootGroupChildren = [...rootGroup.children];
     const pageRowCount = privateApiRef.current.state.pagination.rowCount;
@@ -119,21 +119,20 @@ const useGridDataSourceLazyLoader = (privateApiRef, props) => {
         break;
       }
       // replace the rows not in the viewport with skeleton rows
-      if (pageToSkip.start <= i && i <= pageToSkip.end || tree[rootGroupChildren[i]]?.type === 'skeletonRow') {
+      if (pageToSkip.start <= i && i <= pageToSkip.end || tree[rootGroupChildren[i]]?.type === 'skeletonRow' ||
+      // ignore rows that are already skeleton rows
+      tree[rootGroupChildren[i]]?.id === draggedRowId.current // ignore row that is being dragged (https://github.com/mui/mui-x/issues/17854)
+      ) {
         continue;
       }
-      const skeletonId = getSkeletonRowId(i); // to avoid duplicate keys on rebuild
-      const removedRow = rootGroupChildren[i];
-      rootGroupChildren[i] = skeletonId;
+      const rowId = tree[rootGroupChildren[i]].id; // keep the id, so that row related state is maintained
       const skeletonRowNode = {
         type: 'skeletonRow',
-        id: skeletonId,
+        id: rowId,
         parent: _xDataGrid.GRID_ROOT_GROUP_ID,
         depth: 0
       };
-      tree[skeletonId] = skeletonRowNode;
-      delete tree[removedRow];
-      delete dataRowIdToModelLookup[removedRow];
+      tree[rowId] = skeletonRowNode;
       hasChanged = true;
     }
 
@@ -161,8 +160,7 @@ const useGridDataSourceLazyLoader = (privateApiRef, props) => {
     });
     privateApiRef.current.setState(state => (0, _extends2.default)({}, state, {
       rows: (0, _extends2.default)({}, state.rows, {
-        tree,
-        dataRowIdToModelLookup
+        tree
       })
     }), 'addSkeletonRows');
   }, [privateApiRef, adjustRowParams]);
@@ -349,6 +347,12 @@ const useGridDataSourceLazyLoader = (privateApiRef, props) => {
     privateApiRef.current.setLoading(true);
     debouncedFetchRows(getRowsParams);
   }, [privateApiRef, debouncedFetchRows, throttledHandleRenderedRowsIntervalChange]);
+  const handleDragStart = React.useCallback(row => {
+    draggedRowId.current = row.id;
+  }, []);
+  const handleDragEnd = React.useCallback(() => {
+    draggedRowId.current = null;
+  }, []);
   const handleStrategyActivityChange = React.useCallback(() => {
     setLazyLoadingRowsUpdateStrategyActive(privateApiRef.current.getActiveStrategy(_internals.GridStrategyGroup.DataSource) === _internals.DataSourceRowsUpdateStrategy.LazyLoading);
   }, [privateApiRef]);
@@ -359,6 +363,8 @@ const useGridDataSourceLazyLoader = (privateApiRef, props) => {
   (0, _xDataGrid.useGridEvent)(privateApiRef, 'renderedRowsIntervalChange', (0, _internals.runIf)(lazyLoadingRowsUpdateStrategyActive, throttledHandleRenderedRowsIntervalChange));
   (0, _xDataGrid.useGridEvent)(privateApiRef, 'sortModelChange', (0, _internals.runIf)(lazyLoadingRowsUpdateStrategyActive, handleGridSortModelChange));
   (0, _xDataGrid.useGridEvent)(privateApiRef, 'filterModelChange', (0, _internals.runIf)(lazyLoadingRowsUpdateStrategyActive, handleGridFilterModelChange));
+  (0, _xDataGrid.useGridEvent)(privateApiRef, 'rowDragStart', (0, _internals.runIf)(lazyLoadingRowsUpdateStrategyActive, handleDragStart));
+  (0, _xDataGrid.useGridEvent)(privateApiRef, 'rowDragEnd', (0, _internals.runIf)(lazyLoadingRowsUpdateStrategyActive, handleDragEnd));
   React.useEffect(() => {
     setStrategyAvailability();
   }, [setStrategyAvailability]);

package/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid-pro",
-  "version": "8.3.1",
+  "version": "8.4.0",
   "author": "MUI Team",
   "description": "The Pro plan edition of the MUI X Data Grid components.",
   "main": "./index.js",
@@ -41,9 +41,9 @@
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "reselect": "^5.1.1",
-    "@mui/x-license": "8.3.1",
-    "@mui/x-data-grid": "8.3.1",
-    "@mui/x-internals": "8.3.1"
+    "@mui/x-internals": "8.4.0",
+    "@mui/x-license": "8.4.0",
+    "@mui/x-data-grid": "8.4.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",