@mui/x-data-grid 5.9.0 → 5.10.0

package/CHANGELOG.md

@@ -3,6 +3,42 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## v5.10.0
+
+_Apr 25, 2022_
+
+We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Introduce [Row reorder](https://mui.com/x/react-data-grid/rows/#row-reorder) (#4034) @DanailH
+
+  <img src="https://user-images.githubusercontent.com/5858539/165091263-23472fbb-a989-44b8-849a-d2185adfe13b.gif" width="800">
+
+- 🐞 Bug fixes
+
+### `@mui/x-data-grid@v5.10.0` / `@mui/x-data-grid-pro@v5.10.0`
+
+- [DataGrid] Don't close column menu when updating rows (#4498) @m4theushw
+- [DataGridPro] Introduce row reorder (#4034) @DanailH
+
+### `@mui/x-date-pickers@5.0.0-alpha.2` / `@mui/x-date-pickers-pro@5.0.0-alpha.2`
+
+- [pickers] Pass `PaperProps` to `DesktopWrapper` component (#4584) @alexfauquette
+- [TimePicker] Fix bug when time picker clear value (#4582) @alexfauquette
+- [DateRangePicker] Fix missing `clearable` and `clearText` props (#4511) @zigang93
+
+### Docs
+
+- [docs] Add plan in the nav bar for pro-only and premium-only pages (#4591) @flaviendelangle
+- [docs] Clarify where to install the license (#4452) @oliviertassinari
+- [docs] Fix CodeSandbox links for demo with pickers (#4570) @alexfauquette
+- [docs] Include date-fns dependency when opening demos in CodeSandbox (#4508) @m4theushw
+- [docs] Split the 'Group & Pivot' page (#4441) @flaviendelangle
+
+### Core
+
+- [core] Fix the README of the X packages (#4590) @flaviendelangle
+- [test] Fix test to not depend on screen resolution (#4587) @m4theushw
+
 ## v5.9.0
 
 _Apr 14, 2022_

package/README.md

@@ -15,12 +15,14 @@ npm install @mui/x-data-grid
 yarn add @mui/x-data-grid
 ```
 
-This component has three peer dependencies that you will need to install as well.
+This component has the following peer dependencies that you will need to install as well.
 
 ```json
 "peerDependencies": {
-  "@mui/material": "^5.0.0",
-  "react": "^17.0.0"
+  "@mui/material": "^5.2.8",
+  "@mui/system": "^5.2.8",
+  "react": "^17.0.2 || ^18.0.0",
+  "react-dom": "^17.0.2 || ^18.0.0"
 },
 ```
 

package/components/GridRow.js

@@ -136,6 +136,11 @@ function GridRow(props) {
 
       if (field === GRID_DETAIL_PANEL_TOGGLE_FIELD) {
         return;
+      } // User reorders a row
+
+
+      if (field === '__reorder__') {
+        return;
       } // User is editing a cell
 
 

package/components/containers/GridRootStyles.js

@@ -73,8 +73,16 @@ export const GridRootStyles = styled('div', {
     [`& .${gridClasses['row--editable']}`]: styles['row--editable']
   }, {
     [`& .${gridClasses['row--editing']}`]: styles['row--editing']
+  }, {
+    [`& .${gridClasses['row--dragging']}`]: styles['row--dragging']
   }, {
     [`& .${gridClasses.row}`]: styles.row
+  }, {
+    [`& .${gridClasses.rowReorderCellPlaceholder}`]: styles.rowReorderCellPlaceholder
+  }, {
+    [`& .${gridClasses.rowReorderCell}`]: styles.rowReorderCell
+  }, {
+    [`& .${gridClasses['rowReorderCell--draggable']}`]: styles['rowReorderCell--draggable']
   }, {
     [`& .${gridClasses.sortIcon}`]: styles.sortIcon
   }, {
@@ -309,6 +317,21 @@ export const GridRootStyles = styled('div', {
       alignItems: 'center',
       gridGap: theme.spacing(1)
     },
+    [`& .${gridClasses.rowReorderCell}`]: {
+      display: 'inline-flex',
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      opacity: theme.palette.action.disabledOpacity
+    },
+    [`& .${gridClasses['rowReorderCell--draggable']}`]: {
+      cursor: 'move',
+      opacity: 1
+    },
+    [`& .${gridClasses.rowReorderCellContainer}`]: {
+      padding: 0,
+      alignItems: 'stretch'
+    },
     [`& .${gridClasses.withBorder}`]: {
       borderRight: `1px solid ${borderColor}`
     },
@@ -325,12 +348,24 @@ export const GridRootStyles = styled('div', {
       display: 'flex',
       width: '100%'
     },
-    [`& .${gridClasses['columnHeader--dragging']}`]: {
+    [`& .${gridClasses.rowReorderCellPlaceholder}`]: {
+      display: 'none'
+    },
+    [`& .${gridClasses['columnHeader--dragging']}, & .${gridClasses['row--dragging']}`]: {
       background: theme.palette.background.paper,
       padding: '0 12px',
       borderRadius: theme.shape.borderRadius,
       opacity: theme.palette.action.disabledOpacity
     },
+    [`& .${gridClasses['row--dragging']}`]: {
+      background: theme.palette.background.paper,
+      padding: '0 12px',
+      borderRadius: theme.shape.borderRadius,
+      opacity: theme.palette.action.disabledOpacity,
+      [`& .${gridClasses.rowReorderCellPlaceholder}`]: {
+        display: 'flex'
+      }
+    },
     [`& .${gridClasses.treeDataGroupingCell}`]: {
       display: 'flex',
       alignItems: 'center',

package/components/menu/GridMenu.js

@@ -95,6 +95,7 @@ const GridMenu = props => {
       placement
     }) => /*#__PURE__*/_jsx(ClickAwayListener, {
       onClickAway: onClickAway,
+      mouseEvent: "onMouseDown",
       children: /*#__PURE__*/_jsx(Grow, _extends({}, TransitionProps, {
         style: {
           transformOrigin: transformOrigin[placement]

package/constants/defaultGridSlotsComponents.js

@@ -7,7 +7,7 @@ import MUISwitch from '@mui/material/Switch';
 import MUIButton from '@mui/material/Button';
 import MUITooltip from '@mui/material/Tooltip';
 import MUIPopper from '@mui/material/Popper';
-import { GridArrowDownwardIcon, GridArrowUpwardIcon, GridCell, GridCheckIcon, GridCloseIcon, GridColumnIcon, GridColumnMenu, GridColumnsPanel, GridFilterAltIcon, GridFilterListIcon, GridFilterPanel, GridFooter, GridHeader, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridPreferencesPanel, GridRow, GridSaveAltIcon, GridSeparatorIcon, GridTableRowsIcon, GridTripleDotsVerticalIcon, GridViewHeadlineIcon, GridViewStreamIcon, GridMoreVertIcon, GridExpandMoreIcon, GridKeyboardArrowRight, GridAddIcon, GridRemoveIcon, GridColumnHeaderFilterIconButton } from '../components';
+import { GridArrowDownwardIcon, GridArrowUpwardIcon, GridCell, GridCheckIcon, GridCloseIcon, GridColumnIcon, GridColumnMenu, GridColumnsPanel, GridFilterAltIcon, GridFilterListIcon, GridFilterPanel, GridFooter, GridHeader, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridPreferencesPanel, GridRow, GridSaveAltIcon, GridSeparatorIcon, GridTableRowsIcon, GridTripleDotsVerticalIcon, GridViewHeadlineIcon, GridViewStreamIcon, GridMoreVertIcon, GridExpandMoreIcon, GridKeyboardArrowRight, GridAddIcon, GridRemoveIcon, GridDragIcon, GridColumnHeaderFilterIconButton } from '../components';
 import { GridColumnUnsortedIcon } from '../components/columnHeaders/GridColumnUnsortedIcon';
 import { ErrorOverlay } from '../components/ErrorOverlay';
 import { GridNoResultsOverlay } from '../components/GridNoResultsOverlay';
@@ -33,7 +33,8 @@ const DEFAULT_GRID_ICON_SLOTS_COMPONENTS = {
   GroupingCriteriaCollapseIcon: GridExpandMoreIcon,
   GroupingCriteriaExpandIcon: GridKeyboardArrowRight,
   DetailPanelExpandIcon: GridAddIcon,
-  DetailPanelCollapseIcon: GridRemoveIcon
+  DetailPanelCollapseIcon: GridRemoveIcon,
+  RowReorderIcon: GridDragIcon
 };
 /**
  * TODO: Differentiate community and pro value and interface

package/constants/gridClasses.d.ts

@@ -99,6 +99,10 @@ export interface GridClasses {
      * Styles applied to the column header's draggable container element.
      */
     columnHeaderDraggableContainer: string;
+    /**
+     * Styles applied to the row's draggable placeholder element inside the special row reorder cell.
+     */
+    rowReorderCellPlaceholder: string;
     /**
      * Styles applied to the column headers wrapper if a column is being dragged.
      */
@@ -323,6 +327,10 @@ export interface GridClasses {
      * Styles applied to the row element if the row is in edit mode.
      */
     'row--editing': string;
+    /**
+     * Styles applied to the floating special row reorder cell element when it is dragged.
+     */
+    'row--dragging': string;
     /**
      * Styles applied to the last visible row element on every page of the grid.
      */
@@ -336,6 +344,18 @@ export interface GridClasses {
      * Only works when pagination is disabled.
      */
     rowCount: string;
+    /**
+     * Styles applied to the row reorder cell container element.
+     */
+    rowReorderCellContainer: string;
+    /**
+     * Styles applied to the root element of the row reorder cell
+     */
+    rowReorderCell: string;
+    /**
+     * Styles applied to the root element of the row reorder cell when dragging is allowed
+     */
+    'rowReorderCell--draggable': string;
     /**
      * Styles applied to both scroll area elements.
      */

package/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { generateUtilityClasses, generateUtilityClass } from '@mui/material';
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell', 'cellContent', 'cellCheckbox', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLinkOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'root', 'row--editable', 'row--editing', 'row', 'row--lastVisible', 'rowCount', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle']);
+export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell', 'cellContent', 'cellCheckbox', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLinkOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'root', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle']);

package/constants/localeTextConstants.js

@@ -103,5 +103,7 @@ export const GRID_DEFAULT_LOCALE_TEXT = {
   expandDetailPanel: 'Expand',
   collapseDetailPanel: 'Collapse',
   // Used core components translation keys
-  MuiTablePagination: {}
+  MuiTablePagination: {},
+  // Row reordering text
+  rowReorderingHeaderName: 'Row reordering'
 };

package/hooks/features/columnMenu/useGridColumnMenu.js

@@ -79,5 +79,6 @@ export const useGridColumnMenu = apiRef => {
    */
 
   useGridApiEventHandler(apiRef, GridEvents.columnResizeStart, hideColumnMenu);
-  useGridApiEventHandler(apiRef, GridEvents.rowsScroll, hideColumnMenu);
+  useGridApiEventHandler(apiRef, GridEvents.virtualScrollerWheel, apiRef.current.hideColumnMenu);
+  useGridApiEventHandler(apiRef, GridEvents.virtualScrollerTouchMove, apiRef.current.hideColumnMenu);
 };

package/hooks/features/columns/useGridColumns.d.ts

@@ -8,4 +8,4 @@ export declare const columnsStateInitializer: GridStateInitializer<Pick<DataGrid
  * @requires useGridDimensions (method, event) - can be after
  * TODO: Impossible priority - useGridParamsApi also needs to be after useGridColumns
  */
-export declare function useGridColumns(apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'initialState' | 'columns' | 'onColumnVisibilityChange' | 'columnVisibilityModel' | 'onColumnVisibilityModelChange' | 'columnTypes' | 'checkboxSelection' | 'classes' | 'components' | 'componentsProps'>): void;
+export declare function useGridColumns(apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'initialState' | 'columns' | 'onColumnVisibilityChange' | 'columnVisibilityModel' | 'onColumnVisibilityModelChange' | 'columnTypes' | 'classes' | 'components' | 'componentsProps'>): void;

package/hooks/features/rows/useGridRows.js

@@ -233,12 +233,31 @@ export const useGridRows = (apiRef, props) => {
 
     return (_gridRowTreeSelector$ = gridRowTreeSelector(apiRef)[id]) != null ? _gridRowTreeSelector$ : null;
   }, [apiRef]);
+  const setRowIndex = React.useCallback((rowId, targetIndex) => {
+    const allRows = gridRowIdsSelector(apiRef);
+    const oldIndex = allRows.findIndex(row => row === rowId);
+
+    if (oldIndex === targetIndex) {
+      return;
+    }
+
+    logger.debug(`Moving row ${rowId} to index ${targetIndex}`);
+    const updatedRows = [...allRows];
+    updatedRows.splice(targetIndex, 0, updatedRows.splice(oldIndex, 1)[0]);
+    apiRef.current.setState(state => _extends({}, state, {
+      rows: _extends({}, state.rows, {
+        ids: updatedRows
+      })
+    }));
+    apiRef.current.applySorting();
+  }, [apiRef, logger]);
   const rowApi = {
     getRow,
     getRowModels,
     getRowsCount,
     getAllRowIds,
     setRows,
+    setRowIndex,
     updateRows,
     setRowChildrenExpansion,
     getRowNode,

package/hooks/features/virtualization/useGridVirtualScroller.d.ts

@@ -34,6 +34,8 @@ export declare const useGridVirtualScroller: (props: UseGridVirtualScrollerProps
     }) => {
         ref: React.Ref<HTMLDivElement>;
         onScroll: (event: React.UIEvent) => void;
+        onWheel: (event: React.WheelEvent) => void;
+        onTouchMove: (event: React.TouchEvent) => void;
         style: {
             accentColor?: import("csstype").Property.AccentColor | undefined;
             alignContent?: import("csstype").Property.AlignContent | undefined;

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -214,6 +214,14 @@ export const useGridVirtualScroller = props => {
     }
   };
 
+  const handleWheel = event => {
+    apiRef.current.publishEvent(GridEvents.virtualScrollerWheel, {}, event);
+  };
+
+  const handleTouchMove = event => {
+    apiRef.current.publishEvent(GridEvents.virtualScrollerTouchMove, {}, event);
+  };
+
   const getRows = (params = {
     renderContext
   }) => {
@@ -364,6 +372,8 @@ export const useGridVirtualScroller = props => {
       return _extends({
         ref: handleRef,
         onScroll: handleScroll,
+        onWheel: handleWheel,
+        onTouchMove: handleTouchMove,
         style: _extends({}, style, rootStyle)
       }, other);
     },

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.9.0
+/** @license MUI v5.10.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/legacy/components/GridRow.js

@@ -137,6 +137,11 @@ function GridRow(props) {
 
       if (field === GRID_DETAIL_PANEL_TOGGLE_FIELD) {
         return;
+      } // User reorders a row
+
+
+      if (field === '__reorder__') {
+        return;
       } // User is editing a cell
 
 

package/legacy/components/containers/GridRootStyles.js

@@ -7,12 +7,12 @@ export var GridRootStyles = styled('div', {
   slot: 'Root',
   overridesResolver: function overridesResolver(props, styles) {
     return [_defineProperty({}, "&.".concat(gridClasses.autoHeight), styles.autoHeight), _defineProperty({}, "& .".concat(gridClasses.editBooleanCell), styles.editBooleanCell), _defineProperty({}, "& .".concat(gridClasses['cell--editing']), styles['cell--editing']), _defineProperty({}, "& .".concat(gridClasses['cell--textCenter']), styles['cell--textCenter']), _defineProperty({}, "& .".concat(gridClasses['cell--textLeft']), styles['cell--textLeft']), _defineProperty({}, "& .".concat(gridClasses['cell--textRight']), styles['cell--textRight']), // TODO v6: Remove
-    _defineProperty({}, "& .".concat(gridClasses['cell--withRenderer']), styles['cell--withRenderer']), _defineProperty({}, "& .".concat(gridClasses.cell), styles.cell), _defineProperty({}, "& .".concat(gridClasses.cellContent), styles.cellContent), _defineProperty({}, "& .".concat(gridClasses.cellCheckbox), styles.cellCheckbox), _defineProperty({}, "& .".concat(gridClasses.checkboxInput), styles.checkboxInput), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignCenter']), styles['columnHeader--alignCenter']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignLeft']), styles['columnHeader--alignLeft']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignRight']), styles['columnHeader--alignRight']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--dragging']), styles['columnHeader--dragging']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--moving']), styles['columnHeader--moving']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--numeric']), styles['columnHeader--numeric']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--sortable']), styles['columnHeader--sortable']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--sorted']), styles['columnHeader--sorted']), _defineProperty({}, "& .".concat(gridClasses.columnHeader), styles.columnHeader), _defineProperty({}, "& .".concat(gridClasses.columnHeaderCheckbox), styles.columnHeaderCheckbox), _defineProperty({}, "& .".concat(gridClasses.columnHeaderDraggableContainer), styles.columnHeaderDraggableContainer), _defineProperty({}, "& .".concat(gridClasses.columnHeaderTitleContainer), styles.columnHeaderTitleContainer), _defineProperty({}, "& .".concat(gridClasses['columnSeparator--resizable']), styles['columnSeparator--resizable']), _defineProperty({}, "& .".concat(gridClasses['columnSeparator--resizing']), styles['columnSeparator--resizing']), _defineProperty({}, "& .".concat(gridClasses.columnSeparator), styles.columnSeparator), _defineProperty({}, "& .".concat(gridClasses.filterIcon), styles.filterIcon), _defineProperty({}, "& .".concat(gridClasses.iconSeparator), styles.iconSeparator), _defineProperty({}, "& .".concat(gridClasses.menuIcon), styles.menuIcon), _defineProperty({}, "& .".concat(gridClasses.menuIconButton), styles.menuIconButton), _defineProperty({}, "& .".concat(gridClasses.menuOpen), styles.menuOpen), _defineProperty({}, "& .".concat(gridClasses.menuList), styles.menuList), _defineProperty({}, "& .".concat(gridClasses['row--editable']), styles['row--editable']), _defineProperty({}, "& .".concat(gridClasses['row--editing']), styles['row--editing']), _defineProperty({}, "& .".concat(gridClasses.row), styles.row), _defineProperty({}, "& .".concat(gridClasses.sortIcon), styles.sortIcon), _defineProperty({}, "& .".concat(gridClasses.withBorder), styles.withBorder), _defineProperty({}, "& .".concat(gridClasses.treeDataGroupingCell), styles.treeDataGroupingCell), _defineProperty({}, "& .".concat(gridClasses.treeDataGroupingCellToggle), styles.treeDataGroupingCellToggle), _defineProperty({}, "& .".concat(gridClasses.detailPanelToggleCell), styles.detailPanelToggleCell), _defineProperty({}, "& .".concat(gridClasses['detailPanelToggleCell--expanded']), styles['detailPanelToggleCell--expanded']), styles.root];
+    _defineProperty({}, "& .".concat(gridClasses['cell--withRenderer']), styles['cell--withRenderer']), _defineProperty({}, "& .".concat(gridClasses.cell), styles.cell), _defineProperty({}, "& .".concat(gridClasses.cellContent), styles.cellContent), _defineProperty({}, "& .".concat(gridClasses.cellCheckbox), styles.cellCheckbox), _defineProperty({}, "& .".concat(gridClasses.checkboxInput), styles.checkboxInput), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignCenter']), styles['columnHeader--alignCenter']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignLeft']), styles['columnHeader--alignLeft']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignRight']), styles['columnHeader--alignRight']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--dragging']), styles['columnHeader--dragging']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--moving']), styles['columnHeader--moving']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--numeric']), styles['columnHeader--numeric']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--sortable']), styles['columnHeader--sortable']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--sorted']), styles['columnHeader--sorted']), _defineProperty({}, "& .".concat(gridClasses.columnHeader), styles.columnHeader), _defineProperty({}, "& .".concat(gridClasses.columnHeaderCheckbox), styles.columnHeaderCheckbox), _defineProperty({}, "& .".concat(gridClasses.columnHeaderDraggableContainer), styles.columnHeaderDraggableContainer), _defineProperty({}, "& .".concat(gridClasses.columnHeaderTitleContainer), styles.columnHeaderTitleContainer), _defineProperty({}, "& .".concat(gridClasses['columnSeparator--resizable']), styles['columnSeparator--resizable']), _defineProperty({}, "& .".concat(gridClasses['columnSeparator--resizing']), styles['columnSeparator--resizing']), _defineProperty({}, "& .".concat(gridClasses.columnSeparator), styles.columnSeparator), _defineProperty({}, "& .".concat(gridClasses.filterIcon), styles.filterIcon), _defineProperty({}, "& .".concat(gridClasses.iconSeparator), styles.iconSeparator), _defineProperty({}, "& .".concat(gridClasses.menuIcon), styles.menuIcon), _defineProperty({}, "& .".concat(gridClasses.menuIconButton), styles.menuIconButton), _defineProperty({}, "& .".concat(gridClasses.menuOpen), styles.menuOpen), _defineProperty({}, "& .".concat(gridClasses.menuList), styles.menuList), _defineProperty({}, "& .".concat(gridClasses['row--editable']), styles['row--editable']), _defineProperty({}, "& .".concat(gridClasses['row--editing']), styles['row--editing']), _defineProperty({}, "& .".concat(gridClasses['row--dragging']), styles['row--dragging']), _defineProperty({}, "& .".concat(gridClasses.row), styles.row), _defineProperty({}, "& .".concat(gridClasses.rowReorderCellPlaceholder), styles.rowReorderCellPlaceholder), _defineProperty({}, "& .".concat(gridClasses.rowReorderCell), styles.rowReorderCell), _defineProperty({}, "& .".concat(gridClasses['rowReorderCell--draggable']), styles['rowReorderCell--draggable']), _defineProperty({}, "& .".concat(gridClasses.sortIcon), styles.sortIcon), _defineProperty({}, "& .".concat(gridClasses.withBorder), styles.withBorder), _defineProperty({}, "& .".concat(gridClasses.treeDataGroupingCell), styles.treeDataGroupingCell), _defineProperty({}, "& .".concat(gridClasses.treeDataGroupingCellToggle), styles.treeDataGroupingCellToggle), _defineProperty({}, "& .".concat(gridClasses.detailPanelToggleCell), styles.detailPanelToggleCell), _defineProperty({}, "& .".concat(gridClasses['detailPanelToggleCell--expanded']), styles['detailPanelToggleCell--expanded']), styles.root];
   }
-})(function (_ref42) {
+})(function (_ref46) {
   var _$concat3, _extends2;
 
-  var theme = _ref42.theme;
+  var theme = _ref46.theme;
   var borderColor = theme.palette.mode === 'light' ? lighten(alpha(theme.palette.divider, 1), 0.88) : darken(alpha(theme.palette.divider, 1), 0.68);
 
   var gridStyle = _extends({
@@ -189,6 +189,18 @@ export var GridRootStyles = styled('div', {
     display: 'inline-flex',
     alignItems: 'center',
     gridGap: theme.spacing(1)
+  }), _defineProperty(_extends2, "& .".concat(gridClasses.rowReorderCell), {
+    display: 'inline-flex',
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    opacity: theme.palette.action.disabledOpacity
+  }), _defineProperty(_extends2, "& .".concat(gridClasses['rowReorderCell--draggable']), {
+    cursor: 'move',
+    opacity: 1
+  }), _defineProperty(_extends2, "& .".concat(gridClasses.rowReorderCellContainer), {
+    padding: 0,
+    alignItems: 'stretch'
   }), _defineProperty(_extends2, "& .".concat(gridClasses.withBorder), {
     borderRight: "1px solid ".concat(borderColor)
   }), _defineProperty(_extends2, "& .".concat(gridClasses['cell--textLeft']), {
@@ -200,12 +212,21 @@ export var GridRootStyles = styled('div', {
   }), _defineProperty(_extends2, "& .".concat(gridClasses.columnHeaderDraggableContainer), {
     display: 'flex',
     width: '100%'
-  }), _defineProperty(_extends2, "& .".concat(gridClasses['columnHeader--dragging']), {
+  }), _defineProperty(_extends2, "& .".concat(gridClasses.rowReorderCellPlaceholder), {
+    display: 'none'
+  }), _defineProperty(_extends2, "& .".concat(gridClasses['columnHeader--dragging'], ", & .").concat(gridClasses['row--dragging']), {
+    background: theme.palette.background.paper,
+    padding: '0 12px',
+    borderRadius: theme.shape.borderRadius,
+    opacity: theme.palette.action.disabledOpacity
+  }), _defineProperty(_extends2, "& .".concat(gridClasses['row--dragging']), _defineProperty({
     background: theme.palette.background.paper,
     padding: '0 12px',
     borderRadius: theme.shape.borderRadius,
     opacity: theme.palette.action.disabledOpacity
-  }), _defineProperty(_extends2, "& .".concat(gridClasses.treeDataGroupingCell), {
+  }, "& .".concat(gridClasses.rowReorderCellPlaceholder), {
+    display: 'flex'
+  })), _defineProperty(_extends2, "& .".concat(gridClasses.treeDataGroupingCell), {
     display: 'flex',
     alignItems: 'center',
     width: '100%'

package/legacy/components/menu/GridMenu.js

@@ -96,6 +96,7 @@ var GridMenu = function GridMenu(props) {
           placement = _ref3.placement;
       return /*#__PURE__*/_jsx(ClickAwayListener, {
         onClickAway: onClickAway,
+        mouseEvent: "onMouseDown",
         children: /*#__PURE__*/_jsx(Grow, _extends({}, TransitionProps, {
           style: {
             transformOrigin: transformOrigin[placement]

package/legacy/constants/defaultGridSlotsComponents.js

@@ -7,7 +7,7 @@ import MUISwitch from '@mui/material/Switch';
 import MUIButton from '@mui/material/Button';
 import MUITooltip from '@mui/material/Tooltip';
 import MUIPopper from '@mui/material/Popper';
-import { GridArrowDownwardIcon, GridArrowUpwardIcon, GridCell, GridCheckIcon, GridCloseIcon, GridColumnIcon, GridColumnMenu, GridColumnsPanel, GridFilterAltIcon, GridFilterListIcon, GridFilterPanel, GridFooter, GridHeader, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridPreferencesPanel, GridRow, GridSaveAltIcon, GridSeparatorIcon, GridTableRowsIcon, GridTripleDotsVerticalIcon, GridViewHeadlineIcon, GridViewStreamIcon, GridMoreVertIcon, GridExpandMoreIcon, GridKeyboardArrowRight, GridAddIcon, GridRemoveIcon, GridColumnHeaderFilterIconButton } from '../components';
+import { GridArrowDownwardIcon, GridArrowUpwardIcon, GridCell, GridCheckIcon, GridCloseIcon, GridColumnIcon, GridColumnMenu, GridColumnsPanel, GridFilterAltIcon, GridFilterListIcon, GridFilterPanel, GridFooter, GridHeader, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridPreferencesPanel, GridRow, GridSaveAltIcon, GridSeparatorIcon, GridTableRowsIcon, GridTripleDotsVerticalIcon, GridViewHeadlineIcon, GridViewStreamIcon, GridMoreVertIcon, GridExpandMoreIcon, GridKeyboardArrowRight, GridAddIcon, GridRemoveIcon, GridDragIcon, GridColumnHeaderFilterIconButton } from '../components';
 import { GridColumnUnsortedIcon } from '../components/columnHeaders/GridColumnUnsortedIcon';
 import { ErrorOverlay } from '../components/ErrorOverlay';
 import { GridNoResultsOverlay } from '../components/GridNoResultsOverlay';
@@ -33,7 +33,8 @@ var DEFAULT_GRID_ICON_SLOTS_COMPONENTS = {
   GroupingCriteriaCollapseIcon: GridExpandMoreIcon,
   GroupingCriteriaExpandIcon: GridKeyboardArrowRight,
   DetailPanelExpandIcon: GridAddIcon,
-  DetailPanelCollapseIcon: GridRemoveIcon
+  DetailPanelCollapseIcon: GridRemoveIcon,
+  RowReorderIcon: GridDragIcon
 };
 /**
  * TODO: Differentiate community and pro value and interface

package/legacy/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { generateUtilityClasses, generateUtilityClass } from '@mui/material';
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export var gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell', 'cellContent', 'cellCheckbox', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLinkOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'root', 'row--editable', 'row--editing', 'row', 'row--lastVisible', 'rowCount', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle']);
+export var gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell', 'cellContent', 'cellCheckbox', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLinkOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'root', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle']);

package/legacy/constants/localeTextConstants.js

@@ -115,5 +115,7 @@ export var GRID_DEFAULT_LOCALE_TEXT = {
   expandDetailPanel: 'Expand',
   collapseDetailPanel: 'Collapse',
   // Used core components translation keys
-  MuiTablePagination: {}
+  MuiTablePagination: {},
+  // Row reordering text
+  rowReorderingHeaderName: 'Row reordering'
 };

package/legacy/hooks/features/columnMenu/useGridColumnMenu.js

@@ -81,5 +81,6 @@ export var useGridColumnMenu = function useGridColumnMenu(apiRef) {
    */
 
   useGridApiEventHandler(apiRef, GridEvents.columnResizeStart, hideColumnMenu);
-  useGridApiEventHandler(apiRef, GridEvents.rowsScroll, hideColumnMenu);
+  useGridApiEventHandler(apiRef, GridEvents.virtualScrollerWheel, apiRef.current.hideColumnMenu);
+  useGridApiEventHandler(apiRef, GridEvents.virtualScrollerTouchMove, apiRef.current.hideColumnMenu);
 };

package/legacy/hooks/features/rows/useGridRows.js

@@ -245,12 +245,37 @@ export var useGridRows = function useGridRows(apiRef, props) {
 
     return (_gridRowTreeSelector$ = gridRowTreeSelector(apiRef)[id]) != null ? _gridRowTreeSelector$ : null;
   }, [apiRef]);
+  var setRowIndex = React.useCallback(function (rowId, targetIndex) {
+    var allRows = gridRowIdsSelector(apiRef);
+    var oldIndex = allRows.findIndex(function (row) {
+      return row === rowId;
+    });
+
+    if (oldIndex === targetIndex) {
+      return;
+    }
+
+    logger.debug("Moving row ".concat(rowId, " to index ").concat(targetIndex));
+
+    var updatedRows = _toConsumableArray(allRows);
+
+    updatedRows.splice(targetIndex, 0, updatedRows.splice(oldIndex, 1)[0]);
+    apiRef.current.setState(function (state) {
+      return _extends({}, state, {
+        rows: _extends({}, state.rows, {
+          ids: updatedRows
+        })
+      });
+    });
+    apiRef.current.applySorting();
+  }, [apiRef, logger]);
   var rowApi = {
     getRow: getRow,
     getRowModels: getRowModels,
     getRowsCount: getRowsCount,
     getAllRowIds: getAllRowIds,
     setRows: setRows,
+    setRowIndex: setRowIndex,
     updateRows: updateRows,
     setRowChildrenExpansion: setRowChildrenExpansion,
     getRowNode: getRowNode,

package/legacy/hooks/features/virtualization/useGridVirtualScroller.js

@@ -231,6 +231,14 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
     }
   };
 
+  var handleWheel = function handleWheel(event) {
+    apiRef.current.publishEvent(GridEvents.virtualScrollerWheel, {}, event);
+  };
+
+  var handleTouchMove = function handleTouchMove(event) {
+    apiRef.current.publishEvent(GridEvents.virtualScrollerTouchMove, {}, event);
+  };
+
   var getRows = function getRows() {
     var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
       renderContext: renderContext
@@ -392,6 +400,8 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
       return _extends({
         ref: handleRef,
         onScroll: handleScroll,
+        onWheel: handleWheel,
+        onTouchMove: handleTouchMove,
         style: _extends({}, style, rootStyle)
       }, other);
     },

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.9.0
+/** @license MUI v5.10.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/legacy/locales/arSD.js

@@ -115,6 +115,8 @@ var arSDGrid = {
   },
   // Master/detail
   expandDetailPanel: 'توسيع',
-  collapseDetailPanel: 'طوي'
+  collapseDetailPanel: 'طوي' // Row reordering text
+  // rowReorderingHeaderName: 'Row reordering',
+
 };
 export var arSD = getGridLocalization(arSDGrid, arSDCore);

package/legacy/locales/bgBG.js

@@ -115,6 +115,8 @@ var bgBGGrid = {
   },
   // Master/detail
   expandDetailPanel: 'Разгъване',
-  collapseDetailPanel: 'Свиване'
+  collapseDetailPanel: 'Свиване' // Row reordering text
+  // rowReorderingHeaderName: 'Row reordering',
+
 };
 export var bgBG = getGridLocalization(bgBGGrid, bgBGCore);

package/legacy/locales/csCZ.js

@@ -142,6 +142,8 @@ var csCZGrid = {
   } // Master/detail
   // expandDetailPanel: 'Expand',
   // collapseDetailPanel: 'Collapse',
+  // Row reordering text
+  // rowReorderingHeaderName: 'Row reordering',
 
 };
 export var csCZ = getGridLocalization(csCZGrid, csCZCore);

package/legacy/locales/daDK.js

@@ -115,6 +115,8 @@ var daDKGrid = {
   },
   // Master/detail
   expandDetailPanel: 'Udvid',
-  collapseDetailPanel: 'Kollaps'
+  collapseDetailPanel: 'Kollaps' // Row reordering text
+  // rowReorderingHeaderName: 'Row reordering',
+
 };
 export var daDK = getGridLocalization(daDKGrid, daDKCore);

package/legacy/locales/deDE.js

@@ -115,6 +115,8 @@ var deDEGrid = {
   },
   // Master/detail
   expandDetailPanel: 'Aufklappen',
-  collapseDetailPanel: 'Zuklappen'
+  collapseDetailPanel: 'Zuklappen' // Row reordering text
+  // rowReorderingHeaderName: 'Row reordering',
+
 };
 export var deDE = getGridLocalization(deDEGrid, deDECore);

package/legacy/locales/elGR.js

@@ -110,6 +110,8 @@ var elGRGrid = {
   // Master/detail
   // expandDetailPanel: 'Expand',
   // collapseDetailPanel: 'Collapse',
+  // Row reordering text
+  // rowReorderingHeaderName: 'Row reordering',
 
 };
 export var elGR = getGridLocalization(elGRGrid);

package/legacy/locales/esES.js

@@ -111,6 +111,8 @@ var esESGrid = {
   // Master/detail
   // expandDetailPanel: 'Expand',
   // collapseDetailPanel: 'Collapse',
+  // Row reordering text
+  // rowReorderingHeaderName: 'Row reordering',
 
 };
 export var esES = getGridLocalization(esESGrid, esESCore);