@mui/x-data-grid-pro 5.8.0 → 5.11.0

package/hooks/features/columnResize/useGridColumnResize.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { ownerDocument, useEventCallback } from '@mui/material/utils';
-import { GridEvents, gridClasses, GridColumnHeaderSeparatorSides, useGridApiEventHandler, useGridApiOptionHandler, useGridNativeEventListener, useGridLogger } from '@mui/x-data-grid';
+import { gridClasses, GridColumnHeaderSeparatorSides, useGridApiEventHandler, useGridApiOptionHandler, useGridNativeEventListener, useGridLogger } from '@mui/x-data-grid';
 import { clamp, findParentElementFromClassName } from '@mui/x-data-grid/internals';
 import { findGridCellElementsFromCol, getFieldFromHeaderElem, findHeaderElementFromField } from '../../../utils/domUtils';
 // TODO: remove support for Safari < 13.
@@ -80,7 +80,6 @@ export const columnResizeStateInitializer = state => _extends({}, state, {
   }
 });
 /**
- * Only available in DataGridPro
  * @requires useGridColumns (method, event)
  * TODO: improve experience for last column
  */
@@ -100,17 +99,29 @@ export const useGridColumnResize = (apiRef, props) => {
 
   const updateWidth = newWidth => {
     logger.debug(`Updating width to ${newWidth} for col ${colDefRef.current.field}`);
+    const prevWidth = colElementRef.current.offsetWidth;
+    const widthDiff = newWidth - prevWidth;
     colDefRef.current.computedWidth = newWidth;
     colDefRef.current.width = newWidth;
-    colDefRef.current.flex = undefined;
+    colDefRef.current.flex = 0;
     colElementRef.current.style.width = `${newWidth}px`;
     colElementRef.current.style.minWidth = `${newWidth}px`;
     colElementRef.current.style.maxWidth = `${newWidth}px`;
     colCellElementsRef.current.forEach(element => {
       const div = element;
-      div.style.width = `${newWidth}px`;
-      div.style.minWidth = `${newWidth}px`;
-      div.style.maxWidth = `${newWidth}px`;
+      let finalWidth;
+
+      if (div.getAttribute('aria-colspan') === '1') {
+        finalWidth = `${newWidth}px`;
+      } else {
+        // Cell with colspan > 1 cannot be just updated width new width.
+        // Instead, we add width diff to the current width.
+        finalWidth = `${div.offsetWidth + widthDiff}px`;
+      }
+
+      div.style.width = finalWidth;
+      div.style.minWidth = finalWidth;
+      div.style.maxWidth = finalWidth;
     });
   };
 
@@ -120,12 +131,12 @@ export const useGridColumnResize = (apiRef, props) => {
     apiRef.current.updateColumn(colDefRef.current);
     clearTimeout(stopResizeEventTimeout.current);
     stopResizeEventTimeout.current = setTimeout(() => {
-      apiRef.current.publishEvent(GridEvents.columnResizeStop, null, nativeEvent);
+      apiRef.current.publishEvent('columnResizeStop', null, nativeEvent);
 
       if (colDefRef.current) {
         var _colDefRef$current;
 
-        apiRef.current.publishEvent(GridEvents.columnWidthChange, {
+        apiRef.current.publishEvent('columnWidthChange', {
           element: colElementRef.current,
           colDef: colDefRef.current,
           width: (_colDefRef$current = colDefRef.current) == null ? void 0 : _colDefRef$current.computedWidth
@@ -149,7 +160,7 @@ export const useGridColumnResize = (apiRef, props) => {
       colDef: colDefRef.current,
       width: newWidth
     };
-    apiRef.current.publishEvent(GridEvents.columnResize, params, nativeEvent);
+    apiRef.current.publishEvent('columnResize', params, nativeEvent);
   });
   const handleColumnResizeMouseDown = useEventCallback(({
     colDef
@@ -169,12 +180,12 @@ export const useGridColumnResize = (apiRef, props) => {
 
     event.preventDefault();
     logger.debug(`Start Resize on col ${colDef.field}`);
-    apiRef.current.publishEvent(GridEvents.columnResizeStart, {
+    apiRef.current.publishEvent('columnResizeStart', {
       field: colDef.field
     }, event);
     colDefRef.current = colDef;
     colElementRef.current = (_apiRef$current$colum = apiRef.current.columnHeadersContainerElementRef) == null ? void 0 : _apiRef$current$colum.current.querySelector(`[data-field="${colDef.field}"]`);
-    colCellElementsRef.current = findGridCellElementsFromCol(colElementRef.current);
+    colCellElementsRef.current = findGridCellElementsFromCol(colElementRef.current, apiRef.current);
     const doc = ownerDocument(apiRef.current.rootElementRef.current);
     doc.body.style.cursor = 'col-resize';
     separatorSide.current = getSeparatorSide(event.currentTarget);
@@ -194,7 +205,7 @@ export const useGridColumnResize = (apiRef, props) => {
     apiRef.current.updateColumn(colDefRef.current);
     clearTimeout(stopResizeEventTimeout.current);
     stopResizeEventTimeout.current = setTimeout(() => {
-      apiRef.current.publishEvent(GridEvents.columnResizeStop, null, nativeEvent);
+      apiRef.current.publishEvent('columnResizeStop', null, nativeEvent);
     });
     logger.debug(`Updating col ${colDefRef.current.field} with new width: ${colDefRef.current.width}`);
   });
@@ -219,7 +230,7 @@ export const useGridColumnResize = (apiRef, props) => {
       colDef: colDefRef.current,
       width: newWidth
     };
-    apiRef.current.publishEvent(GridEvents.columnResize, params, nativeEvent);
+    apiRef.current.publishEvent('columnResize', params, nativeEvent);
   });
   const handleTouchStart = useEventCallback(event => {
     var _apiRef$current$colum2;
@@ -246,12 +257,12 @@ export const useGridColumnResize = (apiRef, props) => {
     const field = getFieldFromHeaderElem(colElementRef.current);
     const colDef = apiRef.current.getColumn(field);
     logger.debug(`Start Resize on col ${colDef.field}`);
-    apiRef.current.publishEvent(GridEvents.columnResizeStart, {
+    apiRef.current.publishEvent('columnResizeStart', {
       field
     }, event);
     colDefRef.current = colDef;
     colElementRef.current = findHeaderElementFromField((_apiRef$current$colum2 = apiRef.current.columnHeadersElementRef) == null ? void 0 : _apiRef$current$colum2.current, colDef.field);
-    colCellElementsRef.current = findGridCellElementsFromCol(colElementRef.current);
+    colCellElementsRef.current = findGridCellElementsFromCol(colElementRef.current, apiRef.current);
     separatorSide.current = getSeparatorSide(event.target);
     initialOffsetToSeparator.current = computeOffsetToSeparator(touch.clientX, colElementRef.current.getBoundingClientRect(), separatorSide.current);
     const doc = ownerDocument(event.currentTarget);
@@ -297,9 +308,9 @@ export const useGridColumnResize = (apiRef, props) => {
   }, 'touchstart', handleTouchStart, {
     passive: doesSupportTouchActionNone()
   });
-  useGridApiEventHandler(apiRef, GridEvents.columnSeparatorMouseDown, handleColumnResizeMouseDown);
-  useGridApiEventHandler(apiRef, GridEvents.columnResizeStart, handleResizeStart);
-  useGridApiEventHandler(apiRef, GridEvents.columnResizeStop, handleResizeStop);
-  useGridApiOptionHandler(apiRef, GridEvents.columnResize, props.onColumnResize);
-  useGridApiOptionHandler(apiRef, GridEvents.columnWidthChange, props.onColumnWidthChange);
+  useGridApiEventHandler(apiRef, 'columnSeparatorMouseDown', handleColumnResizeMouseDown);
+  useGridApiEventHandler(apiRef, 'columnResizeStart', handleResizeStart);
+  useGridApiEventHandler(apiRef, 'columnResizeStop', handleResizeStop);
+  useGridApiOptionHandler(apiRef, 'columnResize', props.onColumnResize);
+  useGridApiOptionHandler(apiRef, 'columnWidthChange', props.onColumnWidthChange);
 };

package/hooks/features/detailPanel/useGridDetailPanel.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { GridEvents, useGridSelector, useGridApiEventHandler, useGridApiMethod } from '@mui/x-data-grid';
+import { useGridSelector, useGridApiEventHandler, useGridApiMethod } from '@mui/x-data-grid';
 import { useGridRegisterPipeProcessor } from '@mui/x-data-grid/internals';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from './gridDetailPanelToggleColDef';
 import { gridDetailPanelExpandedRowIdsSelector, gridDetailPanelExpandedRowsContentCacheSelector, gridDetailPanelExpandedRowsHeightCacheSelector } from './gridDetailPanelSelector';
@@ -35,14 +35,22 @@ export const useGridDetailPanel = (apiRef, props) => {
     apiRef.current.toggleDetailPanel(params.id);
   }, [apiRef, contentCache, props.getDetailPanelContent]);
   const handleCellKeyDown = React.useCallback((params, event) => {
-    if (!event.ctrlKey || event.key !== 'Enter' || props.getDetailPanelContent == null) {
+    if (props.getDetailPanelContent == null) {
       return;
     }
 
-    apiRef.current.toggleDetailPanel(params.id);
+    if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
+      // TODO v6: only support Space on the detail toggle
+      apiRef.current.toggleDetailPanel(params.id);
+      return;
+    }
+
+    if (params.field === GRID_DETAIL_PANEL_TOGGLE_FIELD && event.key === ' ') {
+      apiRef.current.toggleDetailPanel(params.id);
+    }
   }, [apiRef, props.getDetailPanelContent]);
-  useGridApiEventHandler(apiRef, GridEvents.cellClick, handleCellClick);
-  useGridApiEventHandler(apiRef, GridEvents.cellKeyDown, handleCellKeyDown);
+  useGridApiEventHandler(apiRef, 'cellClick', handleCellClick);
+  useGridApiEventHandler(apiRef, 'cellKeyDown', handleCellKeyDown);
   const addDetailHeight = React.useCallback((initialValue, row) => {
     var _heightCache$row$id;
 
@@ -64,7 +72,7 @@ export const useGridDetailPanel = (apiRef, props) => {
     propModel: props.detailPanelExpandedRowIds,
     propOnChange: props.onDetailPanelExpandedRowIdsChange,
     stateSelector: gridDetailPanelExpandedRowIdsSelector,
-    changeEvent: GridEvents.detailPanelsExpandedRowIdsChange
+    changeEvent: 'detailPanelsExpandedRowIdsChange'
   });
   const toggleDetailPanel = React.useCallback(id => {
     if (props.getDetailPanelContent == null) {

package/hooks/features/detailPanel/useGridDetailPanelCache.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useGridApiEventHandler, gridRowIdsSelector, GridEvents } from '@mui/x-data-grid';
+import { useGridApiEventHandler, gridRowIdsSelector } from '@mui/x-data-grid';
 
 function cacheContentAndHeight(apiRef, getDetailPanelContent, getDetailPanelHeight) {
   if (typeof getDetailPanelContent !== 'function') {
@@ -39,7 +39,7 @@ export const useGridDetailPanelCache = (apiRef, props) => {
     });
     apiRef.current.forceUpdate();
   }, [apiRef, props.getDetailPanelContent, props.getDetailPanelHeight]);
-  useGridApiEventHandler(apiRef, GridEvents.visibleRowsSet, updateCaches);
+  useGridApiEventHandler(apiRef, 'sortedRowsSet', updateCaches);
   const isFirstRender = React.useRef(true);
 
   if (isFirstRender.current) {

package/hooks/features/index.d.ts

@@ -1,6 +1,6 @@
 export * from './columnPinning';
 export * from './columnReorder';
 export * from './columnResize';
-export * from './rowGrouping';
+export * from './rowReorder';
 export * from './treeData';
 export * from './detailPanel';

package/hooks/features/index.js

@@ -2,6 +2,6 @@
 export * from './columnPinning';
 export * from './columnReorder';
 export * from './columnResize';
-export * from './rowGrouping';
+export * from './rowReorder';
 export * from './treeData';
 export * from './detailPanel';

package/hooks/features/infiniteLoader/useGridInfiniteLoader.d.ts

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { GridApiPro } from '../../../models/gridApiPro';
 import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
 /**
- * Only available in DataGridPro
  * @requires useGridColumns (state)
  * @requires useGridDimensions (method) - can be after
  * @requires useGridScroll (method

package/hooks/features/infiniteLoader/useGridInfiniteLoader.js

@@ -1,9 +1,8 @@
 import * as React from 'react';
-import { useGridSelector, GridEvents, useGridApiEventHandler, useGridApiOptionHandler, gridVisibleColumnDefinitionsSelector, gridRowsMetaSelector } from '@mui/x-data-grid';
+import { useGridSelector, useGridApiEventHandler, useGridApiOptionHandler, gridVisibleColumnDefinitionsSelector, gridRowsMetaSelector } from '@mui/x-data-grid';
 import { useGridVisibleRows } from '@mui/x-data-grid/internals';
 
 /**
- * Only available in DataGridPro
  * @requires useGridColumns (state)
  * @requires useGridDimensions (method) - can be after
  * @requires useGridScroll (method
@@ -34,7 +33,7 @@ export const useGridInfiniteLoader = (apiRef, props) => {
         viewportPageSize,
         virtualRowsCount: currentPage.rows.length
       };
-      apiRef.current.publishEvent(GridEvents.rowsScrollEnd, rowScrollEndParam);
+      apiRef.current.publishEvent('rowsScrollEnd', rowScrollEndParam);
       isInScrollBottomArea.current = true;
     }
   }, [contentHeight, props.scrollEndThreshold, visibleColumns, apiRef, currentPage.rows.length]);
@@ -47,6 +46,6 @@ export const useGridInfiniteLoader = (apiRef, props) => {
       top
     });
   }, [handleRowsScrollEnd]);
-  useGridApiEventHandler(apiRef, GridEvents.rowsScroll, handleGridScroll);
-  useGridApiOptionHandler(apiRef, GridEvents.rowsScrollEnd, props.onRowsScrollEnd);
+  useGridApiEventHandler(apiRef, 'rowsScroll', handleGridScroll);
+  useGridApiOptionHandler(apiRef, 'rowsScrollEnd', props.onRowsScrollEnd);
 };

package/hooks/features/rowGrouping/createGroupingColDef.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { GridColDef, GridStateColDef } from '@mui/x-data-grid';
 import { GridColumnRawLookup } from '@mui/x-data-grid/internals';
-import { GridGroupingColDefOverride } from '../../../models';
+import { GridGroupingColDefOverride } from '../../../models/gridGroupingColDefOverride';
 import { GridApiPro } from '../../../models/gridApiPro';
 interface CreateGroupingColDefMonoCriteriaParams {
     columnsLookup: GridColumnRawLookup;

package/hooks/features/rowGrouping/gridRowGroupingInterfaces.d.ts

@@ -24,7 +24,7 @@ export interface GridRowGroupingApi {
      */
     addRowGroupingCriteria: (groupingCriteriaField: string, groupingIndex?: number) => void;
     /**
-     * sRemove the field from the row grouping model.
+     * Remove the field from the row grouping model.
      * @param {string} groupingCriteriaField The field from which we want to stop grouping the rows.
      */
     removeRowGroupingCriteria: (groupingCriteriaField: string) => void;

package/hooks/features/rowGrouping/gridRowGroupingUtils.js

@@ -23,12 +23,12 @@ export const isGroupingColumn = field => field === GRID_ROW_GROUPING_SINGLE_GROU
 /**
  * When filtering a group, we only want to filter according to the items related to this grouping column.
  */
-const shouldApplyFilterItemOnGroup = (item, node) => {
-  if (item.columnField === GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD) {
+const shouldApplyFilterItemOnGroup = (columnField, node) => {
+  if (columnField === GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD) {
     return true;
   }
 
-  const groupingCriteriaField = getRowGroupingCriteriaFromGroupingField(item.columnField);
+  const groupingCriteriaField = getRowGroupingCriteriaFromGroupingField(columnField);
   return groupingCriteriaField === node.groupingField;
 };
 /**
@@ -56,7 +56,7 @@ export const filterRowTreeFromGroupingColumns = params => {
     if (!isRowMatchingFilters) {
       isMatchingFilters = true;
     } else {
-      const shouldApplyItem = node.isAutoGenerated ? item => shouldApplyFilterItemOnGroup(item, node) : undefined;
+      const shouldApplyItem = node.isAutoGenerated ? columnField => shouldApplyFilterItemOnGroup(columnField, node) : undefined;
       isMatchingFilters = isRowMatchingFilters(node.id, shouldApplyItem);
     }
 

package/hooks/features/rowGrouping/useGridRowGrouping.d.ts

@@ -4,10 +4,8 @@ import { GridApiPro } from '../../../models/gridApiPro';
 import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
 export declare const rowGroupingStateInitializer: GridStateInitializer<Pick<DataGridProProcessedProps, 'rowGroupingModel' | 'initialState'>>;
 /**
- * Only available in DataGridPro
  * @requires useGridColumns (state, method) - can be after, async only
  * @requires useGridRows (state, method) - can be after, async only
  * @requires useGridParamsApi (method) - can be after, async only
- * TODO: Move the the Premium plan once available and remove the `experimentalFeatures.rowGrouping` flag
  */
 export declare const useGridRowGrouping: (apiRef: React.MutableRefObject<GridApiPro>, props: Pick<DataGridProProcessedProps, 'initialState' | 'rowGroupingModel' | 'onRowGroupingModelChange' | 'defaultGroupingExpansionDepth' | 'isGroupExpandedByDefault' | 'groupingColDef' | 'rowGroupingColumnMode' | 'disableRowGrouping'>) => void;

package/hooks/features/rowGrouping/useGridRowGrouping.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import Divider from '@mui/material/Divider';
-import { GridEvents, useGridApiEventHandler, useGridApiMethod, gridFilteredDescendantCountLookupSelector } from '@mui/x-data-grid';
+import { useGridApiEventHandler, useGridApiMethod, gridFilteredDescendantCountLookupSelector } from '@mui/x-data-grid';
 import { useGridRegisterPipeProcessor, isDeepEqual } from '@mui/x-data-grid/internals';
 import { gridRowGroupingModelSelector, gridRowGroupingSanitizedModelSelector, gridRowGroupingStateSelector } from './gridRowGroupingSelector';
 import { getRowGroupingFieldFromGroupingCriteria, ROW_GROUPING_STRATEGY, isGroupingColumn, mergeStateWithRowGroupingModel, setStrategyAvailability } from './gridRowGroupingUtils';
@@ -19,11 +19,9 @@ export const rowGroupingStateInitializer = (state, props) => {
   });
 };
 /**
- * Only available in DataGridPro
  * @requires useGridColumns (state, method) - can be after, async only
  * @requires useGridRows (state, method) - can be after, async only
  * @requires useGridParamsApi (method) - can be after, async only
- * TODO: Move the the Premium plan once available and remove the `experimentalFeatures.rowGrouping` flag
  */
 
 export const useGridRowGrouping = (apiRef, props) => {
@@ -32,7 +30,7 @@ export const useGridRowGrouping = (apiRef, props) => {
     propModel: props.rowGroupingModel,
     propOnChange: props.onRowGroupingModelChange,
     stateSelector: gridRowGroupingModelSelector,
-    changeEvent: GridEvents.rowGroupingModelChange
+    changeEvent: 'rowGroupingModelChange'
   });
   /**
    * API METHODS
@@ -177,21 +175,19 @@ export const useGridRowGrouping = (apiRef, props) => {
         rowGrouping: _extends({}, state.rowGrouping, {
           unstable_sanitizedModelOnLastRowTreeCreation: rowGroupingModel
         })
-      })); // Refresh the column pre-processing
-      // TODO: Add a clean way to re-run a pipe processing without faking a change
-
-      apiRef.current.updateColumns([]);
+      }));
+      apiRef.current.unstable_requestPipeProcessorsApplication('hydrateColumns');
       setStrategyAvailability(apiRef, props.disableRowGrouping); // Refresh the row tree creation strategy processing
       // TODO: Add a clean way to re-run a strategy processing without publishing a private event
 
       if (apiRef.current.unstable_getActiveStrategy('rowTree') === ROW_GROUPING_STRATEGY) {
-        apiRef.current.publishEvent(GridEvents.activeStrategyProcessorChange, 'rowTreeCreation');
+        apiRef.current.publishEvent('activeStrategyProcessorChange', 'rowTreeCreation');
       }
     }
   }, [apiRef, props.disableRowGrouping]);
-  useGridApiEventHandler(apiRef, GridEvents.cellKeyDown, handleCellKeyDown);
-  useGridApiEventHandler(apiRef, GridEvents.columnsChange, checkGroupingColumnsModelDiff);
-  useGridApiEventHandler(apiRef, GridEvents.rowGroupingModelChange, checkGroupingColumnsModelDiff);
+  useGridApiEventHandler(apiRef, 'cellKeyDown', handleCellKeyDown);
+  useGridApiEventHandler(apiRef, 'columnsChange', checkGroupingColumnsModelDiff);
+  useGridApiEventHandler(apiRef, 'rowGroupingModelChange', checkGroupingColumnsModelDiff);
   /**
    * EFFECTS
    */

package/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.js

@@ -2,11 +2,11 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { gridColumnLookupSelector, gridRowIdsSelector, gridRowTreeSelector, useFirstRender } from '@mui/x-data-grid';
 import { useGridRegisterPipeProcessor, useGridRegisterStrategyProcessor } from '@mui/x-data-grid/internals';
+import { sortRowTree } from '../../../utils/tree/sortRowTree';
+import { buildRowTree } from '../../../utils/tree/buildRowTree';
 import { gridRowGroupingModelSelector, gridRowGroupingSanitizedModelSelector } from './gridRowGroupingSelector';
 import { createGroupingColDefForAllGroupingCriteria, createGroupingColDefForOneGroupingCriteria } from './createGroupingColDef';
 import { filterRowTreeFromGroupingColumns, getColDefOverrides, ROW_GROUPING_STRATEGY, isGroupingColumn, setStrategyAvailability } from './gridRowGroupingUtils';
-import { buildRowTree } from '../../../utils/tree/buildRowTree';
-import { sortRowTree } from '../../../utils/tree/sortRowTree';
 export const useGridRowGroupingPreProcessors = (apiRef, props) => {
   const getGroupingColDefs = React.useCallback(columnsState => {
     if (props.disableRowGrouping) {

package/hooks/features/rowReorder/gridRowReorderColDef.d.ts

@@ -0,0 +1,2 @@
+import { GridColDef } from '@mui/x-data-grid';
+export declare const GRID_REORDER_COL_DEF: GridColDef;

package/hooks/features/rowReorder/gridRowReorderColDef.js

@@ -0,0 +1,18 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { GRID_STRING_COL_DEF } from '@mui/x-data-grid';
+import { renderRowReorderCell } from '../../../components/GridRowReorderCell';
+export const GRID_REORDER_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
+  field: '__reorder__',
+  type: 'reorder',
+  sortable: false,
+  filterable: false,
+  width: 50,
+  align: 'center',
+  headerAlign: 'center',
+  disableColumnMenu: true,
+  disableExport: true,
+  disableReorder: true,
+  resizable: false,
+  renderHeader: () => ' ',
+  renderCell: renderRowReorderCell
+});

package/hooks/features/rowReorder/index.d.ts

@@ -0,0 +1 @@
+export * from './gridRowReorderColDef';

package/hooks/features/rowReorder/index.js

@@ -0,0 +1 @@
+export * from './gridRowReorderColDef';

package/hooks/features/rowReorder/useGridRowReorder.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { GridApiPro } from '../../../models/gridApiPro';
+import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
+/**
+ * Only available in DataGridPro
+ * @requires useGridRows (method)
+ */
+export declare const useGridRowReorder: (apiRef: React.MutableRefObject<GridApiPro>, props: Pick<DataGridProProcessedProps, 'rowReordering' | 'onRowOrderChange' | 'classes'>) => void;

package/hooks/features/rowReorder/useGridRowReorder.js

@@ -0,0 +1,111 @@
+import * as React from 'react';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { useGridLogger, useGridApiEventHandler, getDataGridUtilityClass, useGridSelector, gridSortModelSelector, gridRowTreeDepthSelector, useGridApiOptionHandler, gridEditRowsStateSelector } from '@mui/x-data-grid';
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    rowDragging: ['row--dragging']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+/**
+ * Only available in DataGridPro
+ * @requires useGridRows (method)
+ */
+
+
+export const useGridRowReorder = (apiRef, props) => {
+  const logger = useGridLogger(apiRef, 'useGridRowReorder');
+  const sortModel = useGridSelector(apiRef, gridSortModelSelector);
+  const treeDepth = useGridSelector(apiRef, gridRowTreeDepthSelector);
+  const dragRowNode = React.useRef(null);
+  const originRowIndex = React.useRef(null);
+  const removeDnDStylesTimeout = React.useRef();
+  const ownerState = {
+    classes: props.classes
+  };
+  const classes = useUtilityClasses(ownerState);
+  const [dragRowId, setDragRowId] = React.useState('');
+  React.useEffect(() => {
+    return () => {
+      clearTimeout(removeDnDStylesTimeout.current);
+    };
+  }, []); // TODO: remove sortModel check once row reorder is sorting compatible
+  // remove treeDepth once row reorder is tree compatible
+
+  const isRowReorderDisabled = React.useMemo(() => {
+    return !props.rowReordering || !!sortModel.length || treeDepth !== 1;
+  }, [props.rowReordering, sortModel, treeDepth]);
+  const handleDragStart = React.useCallback((params, event) => {
+    // Call the gridEditRowsStateSelector directly to avoid infnite loop
+    const editRowsState = gridEditRowsStateSelector(apiRef.current.state);
+
+    if (isRowReorderDisabled || Object.keys(editRowsState).length !== 0) {
+      return;
+    }
+
+    logger.debug(`Start dragging row ${params.id}`); // Prevent drag events propagation.
+    // For more information check here https://github.com/mui/mui-x/issues/2680.
+
+    event.stopPropagation();
+    dragRowNode.current = event.currentTarget;
+    dragRowNode.current.classList.add(classes.rowDragging);
+    setDragRowId(params.id);
+    removeDnDStylesTimeout.current = setTimeout(() => {
+      dragRowNode.current.classList.remove(classes.rowDragging);
+    });
+    originRowIndex.current = apiRef.current.getRowIndex(params.id);
+  }, [isRowReorderDisabled, classes.rowDragging, logger, apiRef]);
+  const handleDragOver = React.useCallback((params, event) => {
+    logger.debug(`Dragging over row ${params.id}`);
+    event.preventDefault(); // Prevent drag events propagation.
+    // For more information check here https://github.com/mui/mui-x/issues/2680.
+
+    event.stopPropagation();
+
+    if (params.id !== dragRowId) {
+      const targetRowIndex = apiRef.current.getRowIndex(params.id);
+      apiRef.current.setRowIndex(dragRowId, targetRowIndex);
+    }
+  }, [apiRef, logger, dragRowId]);
+  const handleDragEnd = React.useCallback((params, event) => {
+    // Call the gridEditRowsStateSelector directly to avoid infnite loop
+    const editRowsState = gridEditRowsStateSelector(apiRef.current.state);
+
+    if (isRowReorderDisabled || Object.keys(editRowsState).length !== 0) {
+      return;
+    }
+
+    logger.debug('End dragging row');
+    event.preventDefault(); // Prevent drag events propagation.
+    // For more information check here https://github.com/mui/mui-x/issues/2680.
+
+    event.stopPropagation();
+    clearTimeout(removeDnDStylesTimeout.current);
+    dragRowNode.current = null; // Check if the row was dropped outside the grid.
+
+    if (event.dataTransfer.dropEffect === 'none') {
+      // Accessing params.field may contain the wrong field as header elements are reused
+      apiRef.current.setRowIndex(dragRowId, originRowIndex.current);
+      originRowIndex.current = null;
+    } else {
+      // Emit the rowOrderChange event only once when the reordering stops.
+      const rowOrderChangeParams = {
+        row: apiRef.current.getRow(dragRowId),
+        targetIndex: apiRef.current.getRowIndex(params.id),
+        oldIndex: originRowIndex.current
+      };
+      apiRef.current.publishEvent('rowOrderChange', rowOrderChangeParams);
+    }
+
+    setDragRowId('');
+  }, [isRowReorderDisabled, logger, apiRef, dragRowId]);
+  useGridApiEventHandler(apiRef, 'rowDragStart', handleDragStart);
+  useGridApiEventHandler(apiRef, 'rowDragOver', handleDragOver);
+  useGridApiEventHandler(apiRef, 'rowDragEnd', handleDragEnd);
+  useGridApiEventHandler(apiRef, 'cellDragOver', handleDragOver);
+  useGridApiOptionHandler(apiRef, 'rowOrderChange', props.onRowOrderChange);
+};

package/hooks/features/rowReorder/useGridRowReorderPreProcessors.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { GridApiCommunity } from '@mui/x-data-grid/internals';
+import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
+export declare const useGridRowReorderPreProcessors: (apiRef: React.MutableRefObject<GridApiCommunity>, props: DataGridProProcessedProps) => void;

package/hooks/features/rowReorder/useGridRowReorderPreProcessors.js

@@ -0,0 +1,51 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { getDataGridUtilityClass } from '@mui/x-data-grid';
+import { useGridRegisterPipeProcessor } from '@mui/x-data-grid/internals';
+import { GRID_REORDER_COL_DEF } from './gridRowReorderColDef';
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  return React.useMemo(() => {
+    const slots = {
+      rowReorderCellContainer: ['rowReorderCellContainer'],
+      columnHeaderReorder: ['columnHeaderReorder']
+    };
+    return composeClasses(slots, getDataGridUtilityClass, classes);
+  }, [classes]);
+};
+
+export const useGridRowReorderPreProcessors = (apiRef, props) => {
+  const ownerState = {
+    classes: props.classes
+  };
+  const classes = useUtilityClasses(ownerState);
+  const updateReorderColumn = React.useCallback(columnsState => {
+    const reorderColumn = _extends({}, GRID_REORDER_COL_DEF, {
+      cellClassName: classes.rowReorderCellContainer,
+      headerClassName: classes.columnHeaderReorder,
+      headerName: apiRef.current.getLocaleText('rowReorderingHeaderName')
+    });
+
+    const shouldHaveReorderColumn = props.rowReordering;
+    const haveReorderColumn = columnsState.lookup[reorderColumn.field] != null;
+
+    if (shouldHaveReorderColumn && haveReorderColumn) {
+      return columnsState;
+    }
+
+    if (shouldHaveReorderColumn && !haveReorderColumn) {
+      columnsState.lookup[reorderColumn.field] = reorderColumn;
+      columnsState.all = [reorderColumn.field, ...columnsState.all];
+    } else if (!shouldHaveReorderColumn && haveReorderColumn) {
+      delete columnsState.lookup[reorderColumn.field];
+      columnsState.all = columnsState.all.filter(field => field !== reorderColumn.field);
+    }
+
+    return columnsState;
+  }, [apiRef, classes, props.rowReordering]);
+  useGridRegisterPipeProcessor(apiRef, 'hydrateColumns', updateReorderColumn);
+};

package/hooks/features/treeData/useGridTreeData.d.ts

@@ -1,6 +1,3 @@
 import * as React from 'react';
 import { GridApiPro } from '../../../models/gridApiPro';
-/**
- * Only available in DataGridPro
- */
 export declare const useGridTreeData: (apiRef: React.MutableRefObject<GridApiPro>) => void;

package/hooks/features/treeData/useGridTreeData.js

@@ -1,9 +1,5 @@
 import * as React from 'react';
-import { useGridApiEventHandler, GridEvents, gridFilteredDescendantCountLookupSelector } from '@mui/x-data-grid';
-
-/**
- * Only available in DataGridPro
- */
+import { useGridApiEventHandler, gridFilteredDescendantCountLookupSelector } from '@mui/x-data-grid';
 export const useGridTreeData = apiRef => {
   /**
    * EVENTS
@@ -14,8 +10,6 @@ export const useGridTreeData = apiRef => {
     if (cellParams.colDef.type === 'treeDataGroup' && event.key === ' ' && !event.shiftKey) {
       var _gridFilteredDescenda;
 
-      event.stopPropagation();
-      event.preventDefault();
       const filteredDescendantCount = (_gridFilteredDescenda = gridFilteredDescendantCountLookupSelector(apiRef)[params.id]) != null ? _gridFilteredDescenda : 0;
 
       if (filteredDescendantCount === 0) {
@@ -25,5 +19,5 @@ export const useGridTreeData = apiRef => {
       apiRef.current.setRowChildrenExpansion(params.id, !params.rowNode.childrenExpanded);
     }
   }, [apiRef]);
-  useGridApiEventHandler(apiRef, GridEvents.cellKeyDown, handleCellKeyDown);
+  useGridApiEventHandler(apiRef, 'cellKeyDown', handleCellKeyDown);
 };