@mui/x-data-grid-pro 5.11.1 → 5.12.0

package/CHANGELOG.md

@@ -3,6 +3,85 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## v5.12.0
+
+_May 31, 2022_
+
+We'd like to offer a big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Introduce support for [dynamic row height](https://mui.com/x/react-data-grid/rows/#dynamic-row-height) (#4859) @m4theushw
+
+  <img src="https://user-images.githubusercontent.com/42154031/171183167-718d7bcd-ec0f-459e-97fe-0f650abb4a99.gif" width="800">
+
+- ⚠️ Remove deprecated row grouping feature from `@mui/x-data-grid-pro`
+
+  Row grouping is available through the `@mui/x-data-grid-premium` package - see [Premium plan release blogpost](https://mui.com/blog/premium-plan-release/).
+
+- 🐞 Bug fixes and improvements
+
+### `@mui/x-data-grid@v5.12.0` / `@mui/x-data-grid-pro@v5.12.0` / `@mui/x-data-grid-premium@v5.12.0`
+
+- [DataGrid] Support dynamic row height (#4859) @m4theushw
+- [DataGrid] Add `onMenuOpen` and `onMenuClose` props (#4825) @DanailH
+- [DataGrid] Add generics to `GridActionsColDef` to match `GridColDef` (#4982) @subvertallchris
+- [DataGrid] Disable drag event handlers when row or column reorder are disabled (#4857) @DanailH
+- [DataGrid] Allow other attempts to stop edit mode if the first failed (#5016) @m4theushw
+- [DataGrid] Better reflect the dependency on Material UI (#4795) @oliviertassinari
+- [DataGrid] Add an id to the filter item created when opening the filter panel (#5014) @flaviendelangle
+- [DataGrid] Use column visibility model on Hide All / Show All when enabled (#5050) @flaviendelangle
+- [DataGridPro] Unpin columns back to original position (#4512) @m4theushw
+- [DataGridPro] Remove experimental row grouping from Pro plan (#4949) @flaviendelangle
+- [DataGridPro] Allow to scroll detail panel content if it overflows the panel (#4979) @cherniavskii
+- [DataGridPro] Do not call `setRowIndex` when dragging a column over a row (#4987) @flaviendelangle
+- [l10n] Add Norwegian (Bokmål) (nb-NO) locale (#5001) @spiftire
+- [l10n] Add Turkish (tr-TR) locale (#5026) @Rassilion
+
+### `@mui/x-date-pickers@5.0.0-alpha.5` / `@mui/x-date-pickers-pro@5.0.0-alpha.5`
+
+#### Breaking changes
+
+- [pickers] Restructure props in `MonthPicker` / `YearPicker` and `DayPicker` (#4814) @flaviendelangle
+
+  The props of `MonthPicker` / `YearPicker` and `DayPicker` have been reworked to make them more consistent for a standalone usage (#4814) @flaviendelangle
+
+  **MonthPicker**: The prop `onMonthChange` has been removed, you can use `onChange` instead since every change is a month change
+
+  **YearPicker**: The prop `onYearPicker` has been removed, you can use `onChange` instead since every change is a year change
+
+  **DayPicker**: The prop `isDateDisabled` has been removed, you can now use the same validation props as for the other components (`maxDate`, `minDate`, `shouldDisableDate`, `disableFuture` and `disablePast`)
+
+#### Changes
+
+- [pickers] Add German (de-DE) translations (#4974) @felixh10r
+- [pickers] Support action bar on static pickers and improve typing (#5015) @flaviendelangle
+
+### Docs
+
+- [docs] Add docs sections / pages for upcoming features on pickers (#4603) @flaviendelangle
+- [docs] Add docs for filter panel components (#4919) @m4theushw
+- [docs] Explain how to manage focus with `renderCell` (#4254) @alexfauquette
+- [docs] Fix broken links to GitHub source (#5003) @Edwardveb
+- [docs] Fix navigation links (#4956) @oliviertassinari
+- [docs] Fix typo on rows docs (#4952) @jamesRadicl
+- [docs] New WAI-ARIA guidelines location (#4957) @oliviertassinari
+- [docs] Add "Slots" section to the right nav in the API pages (#4993) @DanailH
+- [docs] Fix docs feedback widget not working (#4905) @cherniavskii
+- [docs] Replace custom notes and warning with callouts (#5008) @flaviendelangle
+
+### Core
+
+- [core] Avoid Order ID to refer to GitHub issues/PRs (#5005) @oliviertassinari
+- [core] Improve the workflow for incomplete issues (#5012) @mnajdova
+- [core] Remove dead code on row grouping tree creation (#4945) @flaviendelangle
+- [core] Use new cache api for the row grouping last model tracking (#4980) @flaviendelangle
+- [core] Ensure that PRs have atleast 1 label (#5011) @DanailH
+- [core] Fix trailing-space @oliviertassinari
+- [core] Stop Renovate PR updates when PR is on hold (#5020) @cherniavskii
+- [license] Remove support for UTF-8 (#4893) @oliviertassinari
+- [license] Tweak error messages (#4907) @mbrookes
+- [test] Skip Safari and Firefox on broken tests (#4994) @alexfauquette
+- [test] Make argos screenshots stable (#5061) @m4theushw
+
 ## v5.11.1
 
 _May 20, 2022_
@@ -38,30 +117,28 @@ We'd like to offer a big thanks to the 6 contributors who made this release poss
 
   To decide which button must be displayed and in which order, you can now use the `actions` prop of the `actionBar` component slot props.
 
-   ```jsx
-   <DatePicker
-     componentsProps={{ 
-       actionBar: { 
-         // The actions will be the same between desktop and mobile
-         actions: ['clear'],
+  ```jsx
+  <DatePicker
+    componentsProps={{
+      actionBar: {
+        // The actions will be the same between desktop and mobile
+        actions: ['clear'],
 
-         // The actions will be different between desktop and mobile
-         actions: (variant) => variant === 'desktop' ? [] : ['clear'],
-       }
-     }}
-   />
-   ```
+        // The actions will be different between desktop and mobile
+        actions: (variant) => (variant === 'desktop' ? [] : ['clear']),
+      },
+    }}
+  />
+  ```
 
   The build-in `ActionBar` component supports 4 different actions: `'clear'`, `'cancel'`, `'accept'`, and `'today'`.
   By default, the pickers will render the cancel and accept button on mobile and no action on desktop.
 
   If you need other actions, you can provide your own component to the `ActionBar` component slot
 
-   ```jsx
-   <DatePicker
-     components={{ ActionBar: CustomActionBar }}
-   />
-   ```
+  ```jsx
+  <DatePicker components={{ ActionBar: CustomActionBar }} />
+  ```
 
 #### Changes
 
@@ -121,7 +198,7 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos
 
 - 👔 **Excel export**. You can find this new Premium feature at: https://mui.com/x/react-data-grid/export/#excel-export.
 
-- 🔎 **Quick filtering**. You can now add a quick filtering search bar to your grid. To do so, either pass `showQuickFilter` prop to the `<GridToolbar />` or use the `<GridToolbarQuickFilter />` component in your custom toolbar. More information about how to customize the filtering logic is in the [documentation]( https://mui.com/x/react-data-grid/filtering/#quick-filter).
+- 🔎 **Quick filtering**. You can now add a quick filtering search bar to your grid. To do so, either pass `showQuickFilter` prop to the `<GridToolbar />` or use the `<GridToolbarQuickFilter />` component in your custom toolbar. More information about how to customize the filtering logic is in the [documentation](https://mui.com/x/react-data-grid/filtering/#quick-filter).
 
   <img src="https://user-images.githubusercontent.com/13808724/167700105-5a5acc7c-5463-4871-8514-3d09e2f365ae.png" width="724">
 

package/DataGridPro/DataGridPro.js

@@ -235,12 +235,6 @@ DataGridProRaw.propTypes = {
    */
   disableMultipleSelection: PropTypes.bool,
 
-  /**
-   * If `true`, the row grouping is disabled.
-   * @default false
-   */
-  disableRowGrouping: PropTypes.bool,
-
   /**
    * If `true`, the selection on click on a row or cell is disabled.
    * @default false
@@ -276,7 +270,6 @@ DataGridProRaw.propTypes = {
   experimentalFeatures: PropTypes.shape({
     newEditingApi: PropTypes.bool,
     preventCommitWhileValidating: PropTypes.bool,
-    rowGrouping: PropTypes.bool,
     warnIfFocusStateIsNotSynced: PropTypes.bool
   }),
 
@@ -330,6 +323,15 @@ DataGridProRaw.propTypes = {
    */
   getDetailPanelHeight: PropTypes.func,
 
+  /**
+   * Function that returns the estimated height for a row.
+   * Only works if dynamic row height is used.
+   * Once the row height is measured this value is discarded.
+   * @param {GridRowHeightParams} params With all properties from [[GridRowHeightParams]].
+   * @returns {number | null} The estimated row height value. If `null` or `undefined` then the default row height, based on the density, is applied.
+   */
+  getEstimatedRowHeight: PropTypes.func,
+
   /**
    * Function that applies CSS classes dynamically on rows.
    * @param {GridRowClassNameParams} params With all properties from [[GridRowClassNameParams]].
@@ -340,7 +342,7 @@ DataGridProRaw.propTypes = {
   /**
    * Function that sets the row height per row.
    * @param {GridRowHeightParams} params With all properties from [[GridRowHeightParams]].
-   * @returns {GridRowHeightReturnValue} The row height value. If `null` or `undefined` then the default row height is applied.
+   * @returns {GridRowHeightReturnValue} The row height value. If `null` or `undefined` then the default row height is applied. If "auto" then the row height is calculated based on the content.
    */
   getRowHeight: PropTypes.func,
 
@@ -666,6 +668,22 @@ DataGridProRaw.propTypes = {
    */
   onFilterModelChange: PropTypes.func,
 
+  /**
+   * Callback fired when the menu is closed.
+   * @param {GridMenuParams} params With all properties from [[GridMenuParams]].
+   * @param {MuiEvent<{}>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onMenuClose: PropTypes.func,
+
+  /**
+   * Callback fired when the menu is opened.
+   * @param {GridMenuParams} params With all properties from [[GridMenuParams]].
+   * @param {MuiEvent<{}>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onMenuOpen: PropTypes.func,
+
   /**
    * Callback fired when the current page has changed.
    * @param {number} page Index of the page displayed on the Grid.
@@ -755,13 +773,6 @@ DataGridProRaw.propTypes = {
    */
   onRowEditStop: PropTypes.func,
 
-  /**
-   * Callback fired when the row grouping model changes.
-   * @param {GridRowGroupingModel} model Columns used as grouping criteria.
-   * @param {GridCallbackDetails} details Additional details for this callback.
-   */
-  onRowGroupingModelChange: PropTypes.func,
-
   /**
    * Callback fired when the `rowModesModel` prop changes.
    * @param {GridRowModesModel} rowModesModel Object containig which rows are in "edit" mode.
@@ -865,18 +876,6 @@ DataGridProRaw.propTypes = {
    */
   rowCount: PropTypes.number,
 
-  /**
-   * If `single`, all column we are grouping by will be represented in the same grouping the same column.
-   * If `multiple`, each column we are grouping by will be represented in its own column.
-   * @default 'single'
-   */
-  rowGroupingColumnMode: PropTypes.oneOf(['multiple', 'single']),
-
-  /**
-   * Set the row grouping model of the grid.
-   */
-  rowGroupingModel: PropTypes.arrayOf(PropTypes.string),
-
   /**
    * Set the height in pixel of a row in the grid.
    * @default 52

package/DataGridPro/useDataGridProComponent.js

@@ -12,8 +12,6 @@ import { useGridDetailPanelCache } from '../hooks/features/detailPanel/useGridDe
 import { useGridDetailPanelPreProcessors } from '../hooks/features/detailPanel/useGridDetailPanelPreProcessors';
 import { useGridRowReorder } from '../hooks/features/rowReorder/useGridRowReorder';
 import { useGridRowReorderPreProcessors } from '../hooks/features/rowReorder/useGridRowReorderPreProcessors';
-import { useGridRowGrouping, rowGroupingStateInitializer } from '../hooks/features/rowGrouping/useGridRowGrouping';
-import { useGridRowGroupingPreProcessors } from '../hooks/features/rowGrouping/useGridRowGroupingPreProcessors';
 export const useDataGridProComponent = (inputApiRef, props) => {
   var _props$experimentalFe, _props$experimentalFe2;
 
@@ -24,7 +22,6 @@ export const useDataGridProComponent = (inputApiRef, props) => {
 
   useGridSelectionPreProcessors(apiRef, props);
   useGridRowReorderPreProcessors(apiRef, props);
-  useGridRowGroupingPreProcessors(apiRef, props);
   useGridTreeDataPreProcessors(apiRef, props);
   useGridDetailPanelPreProcessors(apiRef, props); // The column pinning `hydrateColumns` pre-processor must be after every other `hydrateColumns` pre-processors
   // Because it changes the order of the columns.
@@ -35,7 +32,6 @@ export const useDataGridProComponent = (inputApiRef, props) => {
    * Register all state initializers here.
    */
 
-  useGridInitializeState(rowGroupingStateInitializer, apiRef, props);
   useGridInitializeState(selectionStateInitializer, apiRef, props);
   useGridInitializeState(detailPanelStateInitializer, apiRef, props);
   useGridInitializeState(columnPinningStateInitializer, apiRef, props);
@@ -52,7 +48,6 @@ export const useDataGridProComponent = (inputApiRef, props) => {
   useGridInitializeState(paginationStateInitializer, apiRef, props);
   useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(columnMenuStateInitializer, apiRef, props);
-  useGridRowGrouping(apiRef, props);
   useGridTreeData(apiRef);
   useGridKeyboardNavigation(apiRef, props);
   useGridSelection(apiRef, props);

package/DataGridPro/useDataGridProProps.js

@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useThemeProps } from '@mui/material/styles';
 import { DATA_GRID_DEFAULT_SLOTS_COMPONENTS, GRID_DEFAULT_LOCALE_TEXT, DATA_GRID_PROPS_DEFAULT_VALUES } from '@mui/x-data-grid';
-import { buildWarning } from '@mui/x-data-grid/internals';
 
 /**
  * The default values of `DataGridProPropsWithDefaultValue` to inject in the props of DataGridPro.
@@ -15,11 +14,8 @@ export const DATA_GRID_PRO_PROPS_DEFAULT_VALUES = _extends({}, DATA_GRID_PROPS_D
   disableChildrenFiltering: false,
   disableChildrenSorting: false,
   rowReordering: false,
-  getDetailPanelHeight: () => 500,
-  disableRowGrouping: false,
-  rowGroupingColumnMode: 'single'
+  getDetailPanelHeight: () => 500
 });
-const rowGroupingWarning = buildWarning(['MUI: The row grouping has been moved to the new `@mui/x-data-grid-premium` package.', 'The feature is deprecated in `@mui/x-data-grid-pro`, and it will soon be removed from this package.'], 'error');
 export const useDataGridProProps = inProps => {
   const themedProps = useThemeProps({
     props: inProps,
@@ -39,26 +35,9 @@ export const useDataGridProProps = inProps => {
     });
     return mergedComponents;
   }, [themedProps.components]);
-
-  if (process.env.NODE_ENV !== 'production') {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    React.useEffect(() => {
-      var _themedProps$experime;
-
-      if ((_themedProps$experime = themedProps.experimentalFeatures) != null && _themedProps$experime.rowGrouping) {
-        rowGroupingWarning();
-      }
-    }, [themedProps.experimentalFeatures]);
-  }
-
-  return React.useMemo(() => {
-    var _themedProps$experime2;
-
-    return _extends({}, DATA_GRID_PRO_PROPS_DEFAULT_VALUES, themedProps, {
-      disableRowGrouping: themedProps.disableRowGrouping || !((_themedProps$experime2 = themedProps.experimentalFeatures) != null && _themedProps$experime2.rowGrouping),
-      localeText,
-      components,
-      signature: 'DataGridPro'
-    });
-  }, [themedProps, localeText, components]);
+  return React.useMemo(() => _extends({}, DATA_GRID_PRO_PROPS_DEFAULT_VALUES, themedProps, {
+    localeText,
+    components,
+    signature: 'DataGridPro'
+  }), [themedProps, localeText, components]);
 };

package/README.md

@@ -19,8 +19,8 @@ This component has the following peer dependencies that you will need to install
 
 ```json
 "peerDependencies": {
-  "@mui/material": "^5.2.8",
-  "@mui/system": "^5.2.8",
+  "@mui/material": "^5.4.1",
+  "@mui/system": "^5.4.1",
   "react": "^17.0.2 || ^18.0.0"
 },
 ```

package/components/DataGridProVirtualScroller.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { GridPinnedColumns } from '../hooks/features/columnPinning';
-export declare const filterColumns: (pinnedColumns: GridPinnedColumns, columns: string[]) => any[][];
+export declare const filterColumns: (pinnedColumns: GridPinnedColumns, columns: string[]) => [string[], string[]];
 interface DataGridProVirtualScrollerProps extends React.HTMLAttributes<HTMLDivElement> {
     disableVirtualization?: boolean;
 }

package/components/DataGridProVirtualScroller.js

@@ -84,7 +84,8 @@ const VirtualScrollerDetailPanel = styled(Box, {
   zIndex: 2,
   width: '100%',
   position: 'absolute',
-  backgroundColor: theme.palette.background.default
+  backgroundColor: theme.palette.background.default,
+  overflow: 'auto'
 }));
 const VirtualScrollerPinnedColumns = styled('div', {
   name: 'MuiDataGrid',
@@ -241,7 +242,8 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
           renderContext: leftRenderContext,
           minFirstColumn: leftRenderContext.firstColumnIndex,
           maxLastColumn: leftRenderContext.lastColumnIndex,
-          availableSpace: 0
+          availableSpace: 0,
+          ignoreAutoHeight: true
         })
       }), /*#__PURE__*/_jsx(GridVirtualScrollerRenderZone, _extends({}, getRenderZoneProps(), {
         children: getRows({
@@ -258,7 +260,8 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
           renderContext: rightRenderContext,
           minFirstColumn: rightRenderContext.firstColumnIndex,
           maxLastColumn: rightRenderContext.lastColumnIndex,
-          availableSpace: 0
+          availableSpace: 0,
+          ignoreAutoHeight: true
         })
       }), detailPanels.length > 0 && /*#__PURE__*/_jsx(VirtualScrollerDetailPanels, {
         className: classes.detailPanels,

package/components/GridRowReorderCell.js

@@ -27,7 +27,7 @@ const GridRowReorderCell = params => {
 
   const cellValue = params.row.__reorder__ || params.id; // TODO: remove sortModel and treeDepth checks once row reorder is compatible
 
-  const isDraggable = !!rootProps.rowReordering && !sortModel.length && treeDepth === 1 && Object.keys(editRowsState).length === 0;
+  const isDraggable = React.useMemo(() => !!rootProps.rowReordering && !sortModel.length && treeDepth === 1 && Object.keys(editRowsState).length === 0, [rootProps.rowReordering, sortModel, treeDepth, editRowsState]);
   const ownerState = {
     isDraggable,
     classes: rootProps.classes
@@ -52,11 +52,11 @@ const GridRowReorderCell = params => {
       propHandler(event);
     }
   }, [apiRef, params.row.id]);
-  const draggableEventHandlers = {
+  const draggableEventHandlers = isDraggable ? {
     onDragStart: publish('rowDragStart'),
     onDragOver: publish('rowDragOver'),
     onDragEnd: publish('rowDragEnd')
-  };
+  } : null;
   return /*#__PURE__*/_jsxs("div", _extends({
     className: classes.root,
     draggable: isDraggable

package/hooks/features/columnPinning/gridColumnPinningInterface.d.ts

@@ -39,4 +39,10 @@ export interface GridColumnPinningApi {
      */
     isColumnPinned: (field: string) => GridPinnedPosition | false;
 }
+export interface GridColumnPinningInternalCache {
+    /**
+     * Stores the fields in their original position, before being pinned.
+     */
+    orderedFieldsBeforePinningColumns: string[] | null;
+}
 export { GridPinnedPosition };

package/hooks/features/columnPinning/useGridColumnPinning.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import MuiDivider from '@mui/material/Divider';
-import { useGridSelector, gridVisibleColumnDefinitionsSelector, gridColumnsTotalWidthSelector, gridColumnPositionsSelector, gridVisibleColumnFieldsSelector, gridClasses, useGridApiMethod, useGridApiEventHandler } from '@mui/x-data-grid';
+import { useGridSelector, gridVisibleColumnDefinitionsSelector, gridColumnsTotalWidthSelector, gridColumnPositionsSelector, gridVisibleColumnFieldsSelector, gridClasses, useGridApiMethod, useGridApiEventHandler, gridColumnFieldsSelector } from '@mui/x-data-grid';
 import { useGridRegisterPipeProcessor } from '@mui/x-data-grid/internals';
 import { GridColumnPinningMenuItems } from '../../../components/GridColumnPinningMenuItems';
 import { GridPinnedPosition } from './gridColumnPinningInterface';
@@ -13,9 +13,12 @@ const Divider = () => /*#__PURE__*/_jsx(MuiDivider, {
   onClick: event => event.stopPropagation()
 });
 
-export const columnPinningStateInitializer = (state, props) => {
+export const columnPinningStateInitializer = (state, props, apiRef) => {
   var _props$initialState;
 
+  apiRef.current.unstable_caches.columnPinning = {
+    orderedFieldsBeforePinningColumns: null
+  };
   let model;
 
   if (props.disableColumnPinning) {
@@ -205,34 +208,20 @@ export const useGridColumnPinning = (apiRef, props) => {
       return;
     }
 
-    apiRef.current.setState(state => {
-      const otherSide = side === GridPinnedPosition.right ? GridPinnedPosition.left : GridPinnedPosition.right;
-
-      const newPinnedColumns = _extends({}, state.pinnedColumns, {
-        [side]: [...(state.pinnedColumns[side] || []), field],
-        [otherSide]: (state.pinnedColumns[otherSide] || []).filter(column => column !== field)
-      });
-
-      return _extends({}, state, {
-        pinnedColumns: newPinnedColumns
-      });
-    });
-    apiRef.current.forceUpdate();
-  }, [apiRef, checkIfEnabled]);
+    const otherSide = side === GridPinnedPosition.right ? GridPinnedPosition.left : GridPinnedPosition.right;
+    const newPinnedColumns = {
+      [side]: [...(pinnedColumns[side] || []), field],
+      [otherSide]: (pinnedColumns[otherSide] || []).filter(column => column !== field)
+    };
+    apiRef.current.setPinnedColumns(newPinnedColumns);
+  }, [apiRef, checkIfEnabled, pinnedColumns]);
   const unpinColumn = React.useCallback(field => {
     checkIfEnabled('unpinColumn');
-    apiRef.current.setState(state => {
-      const newPinnedColumns = _extends({}, state.pinnedColumns, {
-        left: (state.pinnedColumns.left || []).filter(column => column !== field),
-        right: (state.pinnedColumns.right || []).filter(column => column !== field)
-      });
-
-      return _extends({}, state, {
-        pinnedColumns: newPinnedColumns
-      });
+    apiRef.current.setPinnedColumns({
+      left: (pinnedColumns.left || []).filter(column => column !== field),
+      right: (pinnedColumns.right || []).filter(column => column !== field)
     });
-    apiRef.current.forceUpdate();
-  }, [apiRef, checkIfEnabled]);
+  }, [apiRef, checkIfEnabled, pinnedColumns.left, pinnedColumns.right]);
   const getPinnedColumns = React.useCallback(() => {
     checkIfEnabled('getPinnedColumns');
     return gridPinnedColumnsSelector(apiRef.current.state);
@@ -266,6 +255,62 @@ export const useGridColumnPinning = (apiRef, props) => {
     isColumnPinned
   };
   useGridApiMethod(apiRef, columnPinningApi, 'columnPinningApi');
+  const handleColumnOrderChange = React.useCallback(params => {
+    if (!apiRef.current.unstable_caches.columnPinning.orderedFieldsBeforePinningColumns) {
+      return;
+    }
+
+    const {
+      field,
+      targetIndex,
+      oldIndex
+    } = params;
+    const delta = targetIndex > oldIndex ? 1 : -1;
+    const latestColumnFields = gridColumnFieldsSelector(apiRef);
+    /**
+     * When a column X is reordered to somewhere else, the position where this column X is dropped
+     * on must be moved to left or right to make room for it. The ^^^ below represents the column
+     * which gave space to receive X.
+     *
+     * | X | B | C | D | -> | B | C | D | X | (e.g. X moved to after D, so delta=1)
+     *              ^^^              ^^^
+     *
+     * | A | B | C | X | -> | X | A | B | C | (e.g. X moved before A, so delta=-1)
+     *  ^^^                      ^^^
+     *
+     * If column P is pinned, it will not move to provide space. However, it will jump to the next
+     * non-pinned column.
+     *
+     * | X | B | P | D | -> | B | D | P | X | (e.g. X moved to after D, with P pinned)
+     *              ^^^          ^^^
+     */
+
+    const siblingField = latestColumnFields[targetIndex - delta];
+    const newOrderedFieldsBeforePinningColumns = [...apiRef.current.unstable_caches.columnPinning.orderedFieldsBeforePinningColumns]; // The index to start swapping fields
+
+    let i = newOrderedFieldsBeforePinningColumns.findIndex(column => column === field); // The index of the field to swap with
+
+    let j = i + delta; // When to stop swapping fields.
+    // We stop one field before because the swap is done with i + 1 (if delta=1)
+
+    const stop = newOrderedFieldsBeforePinningColumns.findIndex(column => column === siblingField);
+
+    while (delta > 0 ? i < stop : i > stop) {
+      // If the field to swap with is a pinned column, jump to the next
+      while (apiRef.current.isColumnPinned(newOrderedFieldsBeforePinningColumns[j])) {
+        j += delta;
+      }
+
+      const temp = newOrderedFieldsBeforePinningColumns[i];
+      newOrderedFieldsBeforePinningColumns[i] = newOrderedFieldsBeforePinningColumns[j];
+      newOrderedFieldsBeforePinningColumns[j] = temp;
+      i = j;
+      j = i + delta;
+    }
+
+    apiRef.current.unstable_caches.columnPinning.orderedFieldsBeforePinningColumns = newOrderedFieldsBeforePinningColumns;
+  }, [apiRef]);
+  useGridApiEventHandler(apiRef, 'columnOrderChange', handleColumnOrderChange);
   React.useEffect(() => {
     if (props.pinnedColumns) {
       apiRef.current.setPinnedColumns(props.pinnedColumns);

package/hooks/features/columnPinning/useGridColumnPinningPreProcessors.js

@@ -23,23 +23,86 @@ export const useGridColumnPinningPreProcessors = (apiRef, props) => {
     pinnedColumns = gridPinnedColumnsSelector(initializedState);
   }
 
+  const prevAllPinnedColumns = React.useRef();
   const reorderPinnedColumns = React.useCallback(columnsState => {
     if (columnsState.all.length === 0 || disableColumnPinning) {
       return columnsState;
     }
 
     const [leftPinnedColumns, rightPinnedColumns] = filterColumns(pinnedColumns, columnsState.all);
+    let newOrderedFields;
+    const allPinnedColumns = [...leftPinnedColumns, ...rightPinnedColumns];
+    const {
+      orderedFieldsBeforePinningColumns
+    } = apiRef.current.unstable_caches.columnPinning;
 
-    if (leftPinnedColumns.length === 0 && rightPinnedColumns.length === 0) {
-      return columnsState;
+    if (orderedFieldsBeforePinningColumns) {
+      newOrderedFields = new Array(columnsState.all.length).fill(null);
+      const newOrderedFieldsBeforePinningColumns = [...newOrderedFields]; // Contains the fields not added to the orderedFields array yet
+
+      const remainingFields = [...columnsState.all]; // First, we check if the column was unpinned since the last processing.
+      // If yes and it still exists, we move it back to the same position it was before pinning
+
+      prevAllPinnedColumns.current.forEach(field => {
+        if (!allPinnedColumns.includes(field) && columnsState.lookup[field]) {
+          // Get the position before pinning
+          const index = orderedFieldsBeforePinningColumns.indexOf(field);
+          newOrderedFields[index] = field;
+          newOrderedFieldsBeforePinningColumns[index] = field; // This field was already consumed so we prevent from being added again
+
+          remainingFields.splice(remainingFields.indexOf(field), 1);
+        }
+      }); // For columns still pinned, we keep stored their original positions
+
+      allPinnedColumns.forEach(field => {
+        let index = orderedFieldsBeforePinningColumns.indexOf(field); // If index = -1, the pinned field didn't exist in the last processing, it's possibly being added now
+        // If index >= newOrderedFieldsBeforePinningColumns.length, then one or more columns were removed
+        // In both cases, use the position from the columns array
+        // TODO: detect removed columns and decrease the positions after it
+
+        if (index === -1 || index >= newOrderedFieldsBeforePinningColumns.length) {
+          index = columnsState.all.indexOf(field);
+        } // The fallback above may make the column to be inserted in a position already occupied
+        // In this case, put it in any empty slot available
+
+
+        if (newOrderedFieldsBeforePinningColumns[index] !== null) {
+          index = 0;
+
+          while (newOrderedFieldsBeforePinningColumns[index] !== null) {
+            index += 1;
+          }
+        }
+
+        newOrderedFields[index] = field;
+        newOrderedFieldsBeforePinningColumns[index] = field; // This field was already consumed so we prevent from being added again
+
+        remainingFields.splice(remainingFields.indexOf(field), 1);
+      }); // The fields remaining are those that're neither pinnned nor were unpinned
+      // For these, we spread them across both arrays making sure to not override existing values
+
+      let i = 0;
+      remainingFields.forEach(field => {
+        while (newOrderedFieldsBeforePinningColumns[i] !== null) {
+          i += 1;
+        }
+
+        newOrderedFieldsBeforePinningColumns[i] = field;
+        newOrderedFields[i] = field;
+      });
+      apiRef.current.unstable_caches.columnPinning.orderedFieldsBeforePinningColumns = newOrderedFieldsBeforePinningColumns;
+    } else {
+      newOrderedFields = [...columnsState.all];
+      apiRef.current.unstable_caches.columnPinning.orderedFieldsBeforePinningColumns = [...columnsState.all];
     }
 
-    const centerColumns = columnsState.all.filter(field => {
+    prevAllPinnedColumns.current = allPinnedColumns;
+    const centerColumns = newOrderedFields.filter(field => {
       return !leftPinnedColumns.includes(field) && !rightPinnedColumns.includes(field);
     });
     return _extends({}, columnsState, {
       all: [...leftPinnedColumns, ...centerColumns, ...rightPinnedColumns]
     });
-  }, [disableColumnPinning, pinnedColumns]);
+  }, [apiRef, disableColumnPinning, pinnedColumns]);
   useGridRegisterPipeProcessor(apiRef, 'hydrateColumns', reorderPinnedColumns);
 };

package/hooks/features/rowReorder/useGridRowReorder.js

@@ -60,6 +60,10 @@ export const useGridRowReorder = (apiRef, props) => {
     originRowIndex.current = apiRef.current.getRowIndex(params.id);
   }, [isRowReorderDisabled, classes.rowDragging, logger, apiRef]);
   const handleDragOver = React.useCallback((params, event) => {
+    if (dragRowId === '') {
+      return;
+    }
+
     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.
@@ -75,7 +79,7 @@ export const useGridRowReorder = (apiRef, props) => {
     // Call the gridEditRowsStateSelector directly to avoid infnite loop
     const editRowsState = gridEditRowsStateSelector(apiRef.current.state);
 
-    if (isRowReorderDisabled || Object.keys(editRowsState).length !== 0) {
+    if (dragRowId === '' || isRowReorderDisabled || Object.keys(editRowsState).length !== 0) {
       return;
     }
 

package/index.d.ts

@@ -17,5 +17,3 @@ export * from './utils';
 export type { DataGridProProps, GridExperimentalProFeatures } from './models/dataGridProProps';
 export { useGridApiContext, useGridApiRef, useGridRootProps } from './typeOverloads/reexports';
 export type { GridApiRef, GridApi, GridInitialState, GridState } from './typeOverloads/reexports';
-export * from './hooks/features/rowGrouping';
-export * from './models/gridGroupingValueGetterParams';