@mui/x-data-grid 5.9.0 → 5.10.0

package/modern/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/modern/components/menu/GridMenu.js

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

package/modern/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/modern/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/modern/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/modern/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/modern/hooks/features/rows/useGridRows.js

@@ -225,12 +225,31 @@ export const useGridRows = (apiRef, props) => {
     apiRef.current.publishEvent(GridEvents.rowExpansionChange, newNode);
   }, [apiRef]);
   const getRowNode = React.useCallback(id => gridRowTreeSelector(apiRef)[id] ?? 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/modern/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
   }) => {
@@ -362,6 +370,8 @@ export const useGridVirtualScroller = props => {
       return _extends({
         ref: handleRef,
         onScroll: handleScroll,
+        onWheel: handleWheel,
+        onTouchMove: handleTouchMove,
         style: _extends({}, style, rootStyle)
       }, other);
     },

package/modern/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/modern/locales/arSD.js

@@ -103,6 +103,8 @@ const arSDGrid = {
   unGroupColumn: name => `إيقاف التجميع حسب ${name}`,
   // Master/detail
   expandDetailPanel: 'توسيع',
-  collapseDetailPanel: 'طوي'
+  collapseDetailPanel: 'طوي' // Row reordering text
+  // rowReorderingHeaderName: 'Row reordering',
+
 };
 export const arSD = getGridLocalization(arSDGrid, arSDCore);

package/modern/locales/bgBG.js

@@ -103,6 +103,8 @@ const bgBGGrid = {
   unGroupColumn: name => `Спри групиране по ${name}`,
   // Master/detail
   expandDetailPanel: 'Разгъване',
-  collapseDetailPanel: 'Свиване'
+  collapseDetailPanel: 'Свиване' // Row reordering text
+  // rowReorderingHeaderName: 'Row reordering',
+
 };
 export const bgBG = getGridLocalization(bgBGGrid, bgBGCore);

package/modern/locales/csCZ.js

@@ -138,6 +138,8 @@ const csCZGrid = {
   unGroupColumn: name => `Přestat zoskupovat podle ${name}` // Master/detail
   // expandDetailPanel: 'Expand',
   // collapseDetailPanel: 'Collapse',
+  // Row reordering text
+  // rowReorderingHeaderName: 'Row reordering',
 
 };
 export const csCZ = getGridLocalization(csCZGrid, csCZCore);

package/modern/locales/daDK.js

@@ -103,6 +103,8 @@ const daDKGrid = {
   unGroupColumn: name => `Fjern gruppéring efter ${name}`,
   // Master/detail
   expandDetailPanel: 'Udvid',
-  collapseDetailPanel: 'Kollaps'
+  collapseDetailPanel: 'Kollaps' // Row reordering text
+  // rowReorderingHeaderName: 'Row reordering',
+
 };
 export const daDK = getGridLocalization(daDKGrid, daDKCore);

package/modern/locales/deDE.js

@@ -103,6 +103,8 @@ const deDEGrid = {
   unGroupColumn: name => `Gruppierung nach ${name} aufheben`,
   // Master/detail
   expandDetailPanel: 'Aufklappen',
-  collapseDetailPanel: 'Zuklappen'
+  collapseDetailPanel: 'Zuklappen' // Row reordering text
+  // rowReorderingHeaderName: 'Row reordering',
+
 };
 export const deDE = getGridLocalization(deDEGrid, deDECore);

package/modern/locales/elGR.js

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

package/modern/locales/esES.js

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

package/modern/locales/faIR.js

@@ -103,6 +103,8 @@ const faIRGrid = {
   unGroupColumn: name => `لغو گروه‌بندی براساس ${name}`,
   // Master/detail
   expandDetailPanel: 'بازکردن پنل جزئیات',
-  collapseDetailPanel: 'بستن پنل جزئیات'
+  collapseDetailPanel: 'بستن پنل جزئیات' // Row reordering text
+  // rowReorderingHeaderName: 'Row reordering',
+
 };
 export const faIR = getGridLocalization(faIRGrid, faIRCore);

package/modern/locales/fiFI.js

@@ -103,6 +103,8 @@ const fiFIGrid = {
   // Master/detail
   // expandDetailPanel: 'Expand',
   // collapseDetailPanel: 'Collapse',
+  // Row reordering text
+  // rowReorderingHeaderName: 'Row reordering',
 
 };
 export const fiFI = getGridLocalization(fiFIGrid, fiFICore);

package/modern/locales/frFR.js

@@ -103,6 +103,8 @@ const frFRGrid = {
   unGroupColumn: name => `Arrêter de grouper par ${name}` // Master/detail
   // expandDetailPanel: 'Expand',
   // collapseDetailPanel: 'Collapse',
+  // Row reordering text
+  // rowReorderingHeaderName: 'Row reordering',
 
 };
 export const frFR = getGridLocalization(frFRGrid, frFRCore);

package/modern/locales/heIL.js

@@ -103,6 +103,8 @@ const heILGrid = {
   unGroupColumn: name => `הפסק לקבץ לפי ${name}`,
   // Master/detail
   expandDetailPanel: 'הרחב',
-  collapseDetailPanel: 'כווץ'
+  collapseDetailPanel: 'כווץ' // Row reordering text
+  // rowReorderingHeaderName: 'Row reordering',
+
 };
 export const heIL = getGridLocalization(heILGrid, heILCore);

package/modern/locales/huHU.js

@@ -103,6 +103,8 @@ const huHUGrid = {
   unGroupColumn: name => `${name} szerinti csoportosítás törlése`,
   // Master/detail
   expandDetailPanel: 'Kibontás',
-  collapseDetailPanel: 'Összecsukás'
+  collapseDetailPanel: 'Összecsukás' // Row reordering text
+  // rowReorderingHeaderName: 'Row reordering',
+
 };
 export const huHU = getGridLocalization(huHUGrid, huHUCore);

package/modern/locales/itIT.js

@@ -103,6 +103,8 @@ const itITGrid = {
   unGroupColumn: name => `Annulla raggruppamento per ${name}` // Master/detail
   // expandDetailPanel: 'Expand',
   // collapseDetailPanel: 'Collapse',
+  // Row reordering text
+  // rowReorderingHeaderName: 'Row reordering',
 
 };
 export const itIT = getGridLocalization(itITGrid, itITCore);

package/modern/locales/jaJP.js

@@ -103,6 +103,8 @@ const jaJPGrid = {
   // Master/detail
   // expandDetailPanel: 'Expand',
   // collapseDetailPanel: 'Collapse',
+  // Row reordering text
+  // rowReorderingHeaderName: 'Row reordering',
 
 };
 export const jaJP = getGridLocalization(jaJPGrid, jaJPCore);

package/modern/locales/koKR.js

@@ -103,6 +103,8 @@ const koKRGrid = {
   // Master/detail
   // expandDetailPanel: 'Expand',
   // collapseDetailPanel: 'Collapse',
+  // Row reordering text
+  // rowReorderingHeaderName: 'Row reordering',
 
 };
 export const koKR = getGridLocalization(koKRGrid, koKRCore);

package/modern/locales/nlNL.js

@@ -103,6 +103,8 @@ const nlNLGrid = {
   unGroupColumn: name => `Stop groeperen op ${name}` // Master/detail
   // expandDetailPanel: 'Expand',
   // collapseDetailPanel: 'Collapse',
+  // Row reordering text
+  // rowReorderingHeaderName: 'Row reordering',
 
 };
 export const nlNL = getGridLocalization(nlNLGrid, nlNLCore);

package/modern/locales/plPL.js

@@ -103,6 +103,8 @@ const plPLGrid = {
   unGroupColumn: name => `Rozgrupuj ${name}`,
   // Master/detail
   expandDetailPanel: 'Rozwiń',
-  collapseDetailPanel: 'Zwiń'
+  collapseDetailPanel: 'Zwiń' // Row reordering text
+  // rowReorderingHeaderName: 'Row reordering',
+
 };
 export const plPL = getGridLocalization(plPLGrid, plPLCore);

package/modern/locales/ptBR.js

@@ -103,6 +103,8 @@ const ptBRGrid = {
   unGroupColumn: name => `Parar agrupamento por ${name}`,
   // Master/detail
   expandDetailPanel: 'Expandir',
-  collapseDetailPanel: 'Esconder'
+  collapseDetailPanel: 'Esconder' // Row reordering text
+  // rowReorderingHeaderName: 'Row reordering',
+
 };
 export const ptBR = getGridLocalization(ptBRGrid, ptBRCore);

package/modern/locales/ruRU.js

@@ -136,6 +136,8 @@ const ruRUGrid = {
   unGroupColumn: name => `Разгруппировать по ${name}` // Master/detail
   // expandDetailPanel: 'Expand',
   // collapseDetailPanel: 'Collapse',
+  // Row reordering text
+  // rowReorderingHeaderName: 'Row reordering',
 
 };
 export const ruRU = getGridLocalization(ruRUGrid, ruRUCore);

package/modern/locales/skSK.js

@@ -138,6 +138,8 @@ const skSKGrid = {
   unGroupColumn: name => `Prestať zoskupovať podľa ${name}` // Master/detail
   // expandDetailPanel: 'Expand',
   // collapseDetailPanel: 'Collapse',
+  // Row reordering text
+  // rowReorderingHeaderName: 'Row reordering',
 
 };
 export const skSK = getGridLocalization(skSKGrid, skSKCore);

package/modern/locales/trTR.js

@@ -103,6 +103,8 @@ const trTRGrid = {
   unGroupColumn: name => `${name} için gruplamayı kaldır`,
   // Master/detail
   expandDetailPanel: 'Genişlet',
-  collapseDetailPanel: 'Gizle'
+  collapseDetailPanel: 'Gizle' // Row reordering text
+  // rowReorderingHeaderName: 'Row reordering',
+
 };
 export const trTR = getGridLocalization(trTRGrid, trTRCore);

package/modern/locales/ukUA.js

@@ -129,6 +129,8 @@ const ukUAGrid = {
   // Master/detail
   // expandDetailPanel: 'Expand',
   // collapseDetailPanel: 'Collapse',
+  // Row reordering text
+  // rowReorderingHeaderName: 'Row reordering',
 
 };
 export const ukUA = getGridLocalization(ukUAGrid, ukUACore);

package/modern/locales/viVN.js

@@ -103,6 +103,8 @@ const viVNGrid = {
   // Master/detail
   // expandDetailPanel: 'Expand',
   // collapseDetailPanel: 'Collapse',
+  // Row reordering text
+  // rowReorderingHeaderName: 'Row reordering',
 
 };
 export const viVN = getGridLocalization(viVNGrid, viVNCore);

package/modern/locales/zhCN.js

@@ -103,6 +103,8 @@ const zhCNGrid = {
   // Master/detail
   // expandDetailPanel: 'Expand',
   // collapseDetailPanel: 'Collapse',
+  // Row reordering text
+  // rowReorderingHeaderName: 'Row reordering',
 
 };
 export const zhCN = getGridLocalization(zhCNGrid, zhCNCore);

package/modern/models/events/gridEvents.js

@@ -29,6 +29,9 @@ var GridEvents;
   GridEvents["rowMouseEnter"] = "rowMouseEnter";
   GridEvents["rowMouseLeave"] = "rowMouseLeave";
   GridEvents["editRowsModelChange"] = "editRowsModelChange";
+  GridEvents["rowDragStart"] = "rowDragStart";
+  GridEvents["rowDragOver"] = "rowDragOver";
+  GridEvents["rowDragEnd"] = "rowDragEnd";
   GridEvents["columnHeaderBlur"] = "columnHeaderBlur";
   GridEvents["columnHeaderFocus"] = "columnHeaderFocus";
   GridEvents["columnHeaderNavigationKeyDown"] = "columnHeaderNavigationKeyDown";
@@ -57,6 +60,7 @@ var GridEvents;
   GridEvents["columnResizeStart"] = "columnResizeStart";
   GridEvents["columnResizeStop"] = "columnResizeStop";
   GridEvents["columnOrderChange"] = "columnOrderChange";
+  GridEvents["rowOrderChange"] = "rowOrderChange";
   GridEvents["rowsSet"] = "rowsSet";
   GridEvents["rowExpansionChange"] = "rowExpansionChange";
   GridEvents["sortedRowsSet"] = "sortedRowsSet";
@@ -72,6 +76,8 @@ var GridEvents;
   GridEvents["stateChange"] = "stateChange";
   GridEvents["columnVisibilityChange"] = "columnVisibilityChange";
   GridEvents["virtualScrollerContentSizeChange"] = "virtualScrollerContentSizeChange";
+  GridEvents["virtualScrollerWheel"] = "virtualScrollerWheel";
+  GridEvents["virtualScrollerTouchMove"] = "virtualScrollerTouchMove";
   GridEvents["preferencePanelClose"] = "preferencePanelClose";
   GridEvents["preferencePanelOpen"] = "preferencePanelOpen";
 })(GridEvents || (GridEvents = {}));

package/node/components/GridRow.js

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

package/node/components/containers/GridRootStyles.js

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

package/node/components/menu/GridMenu.js

@@ -122,6 +122,7 @@ const GridMenu = props => {
       placement
     }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickAwayListener.default, {
       onClickAway: onClickAway,
+      mouseEvent: "onMouseDown",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Grow.default, (0, _extends2.default)({}, TransitionProps, {
         style: {
           transformOrigin: transformOrigin[placement]

package/node/constants/defaultGridSlotsComponents.js

@@ -55,7 +55,8 @@ const DEFAULT_GRID_ICON_SLOTS_COMPONENTS = {
   GroupingCriteriaCollapseIcon: _components.GridExpandMoreIcon,
   GroupingCriteriaExpandIcon: _components.GridKeyboardArrowRight,
   DetailPanelExpandIcon: _components.GridAddIcon,
-  DetailPanelCollapseIcon: _components.GridRemoveIcon
+  DetailPanelCollapseIcon: _components.GridRemoveIcon,
+  RowReorderIcon: _components.GridDragIcon
 };
 /**
  * TODO: Differentiate community and pro value and interface

package/node/constants/gridClasses.js

@@ -12,5 +12,5 @@ function getDataGridUtilityClass(slot) {
   return (0, _material.generateUtilityClass)('MuiDataGrid', slot);
 }
 
-const gridClasses = (0, _material.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']);
+const gridClasses = (0, _material.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']);
 exports.gridClasses = gridClasses;

package/node/constants/localeTextConstants.js

@@ -109,6 +109,8 @@ const GRID_DEFAULT_LOCALE_TEXT = {
   expandDetailPanel: 'Expand',
   collapseDetailPanel: 'Collapse',
   // Used core components translation keys
-  MuiTablePagination: {}
+  MuiTablePagination: {},
+  // Row reordering text
+  rowReorderingHeaderName: 'Row reordering'
 };
 exports.GRID_DEFAULT_LOCALE_TEXT = GRID_DEFAULT_LOCALE_TEXT;

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

@@ -100,7 +100,8 @@ const useGridColumnMenu = apiRef => {
    */
 
   (0, _utils.useGridApiEventHandler)(apiRef, _events.GridEvents.columnResizeStart, hideColumnMenu);
-  (0, _utils.useGridApiEventHandler)(apiRef, _events.GridEvents.rowsScroll, hideColumnMenu);
+  (0, _utils.useGridApiEventHandler)(apiRef, _events.GridEvents.virtualScrollerWheel, apiRef.current.hideColumnMenu);
+  (0, _utils.useGridApiEventHandler)(apiRef, _events.GridEvents.virtualScrollerTouchMove, apiRef.current.hideColumnMenu);
 };
 
 exports.useGridColumnMenu = useGridColumnMenu;