Revert "[DataGrid] Fix column reorder instability (mui#950)"

This reverts commit 64ba484.

packages/grid/_modules_/grid/hooks/features/columns/useColumns.ts

@@ -11,9 +11,7 @@ import {
   InternalColumns,
 } from '../../../models/colDef/colDef';
 import { ColumnTypesRecord } from '../../../models/colDef/colTypeDef';
-import { getDefaultColumnTypes } from '../../../models/colDef/defaultColumnTypes';
 import { getColDef } from '../../../models/colDef/getColDef';
-import { mergeColTypes } from '../../../utils/mergeUtils';
 import { useApiMethod } from '../../root/useApiMethod';
 import { optionsSelector } from '../../utils/optionsSelector';
 import { Logger, useLogger } from '../../utils/useLogger';
@@ -58,8 +56,8 @@ function hydrateColumns(
   logger: Logger,
 ): Columns {
   logger.debug('Hydrating Columns with default definitions');
-  const mergedColTypes = mergeColTypes(getDefaultColumnTypes(), columnTypes);
-  const extendedColumns = columns.map((c) => ({ ...getColDef(mergedColTypes, c.type), ...c }));
+
+  const extendedColumns = columns.map((c) => ({ ...getColDef(columnTypes, c.type), ...c }));
 
   if (withCheckboxSelection) {
     return [checkboxSelectionColDef, ...extendedColumns];

packages/grid/_modules_/grid/hooks/utils/useOptionsProp.ts

@@ -3,7 +3,7 @@ import { DEFAULT_LOCALE_TEXT } from '../../constants/localeTextConstants';
 import { GridComponentProps, GridOptionsProp } from '../../GridComponentProps';
 import { ApiRef } from '../../models/api/apiRef';
 import { DEFAULT_GRID_OPTIONS, GridOptions } from '../../models/gridOptions';
-import { mergeOptions } from '../../utils/mergeUtils';
+import { mergeOptions } from '../../utils/mergeOptions';
 import { useGridReducer } from '../features/core/useGridReducer';
 
 // REDUCER

packages/grid/_modules_/grid/utils/index.ts

@@ -3,5 +3,5 @@ export * from './sortingUtils';
 export * from './domUtils';
 export * from './classnames';
 export * from './keyboardUtils';
-export * from './mergeUtils';
+export * from './mergeOptions';
 export * from './paramsUtils';

packages/grid/_modules_/grid/utils/mergeUtils.ts → packages/grid/_modules_/grid/utils/mergeOptions.ts

@@ -33,9 +33,11 @@ export function removeUndefinedProps(options: Object) {
 // We intentionally set the types to any to avoid circular deps
 export function mergeOptions(defaultOptions: any, options?: any) {
   options = removeUndefinedProps(options);
+  const mergedColTypes = mergeColTypes(defaultOptions.columnTypes, options?.columnTypes);
   const mergedOptions = {
     ...defaultOptions,
     ...options,
   };
+  mergedOptions.columnTypes = mergedColTypes;
   return mergedOptions;
 }

packages/grid/x-grid/src/tests/reorder.XGrid.test.tsx

@@ -58,27 +58,4 @@ describe('<XGrid /> - Reorder', () => {
       expect(getColumnHeaders()).to.deep.equal(['brand', 'id']);
     });
   });
-
-  it('should not reset the column order when a prop change', () => {
-    let apiRef: ApiRef;
-    const rows = [{ id: 0, brand: 'Nike' }];
-    const columns = [{ field: 'brand' }, { field: 'desc' }, { field: 'type' }];
-
-    const Test = () => {
-      apiRef = useApiRef();
-
-      return (
-        <div style={{ width: 300, height: 300 }}>
-          <XGrid apiRef={apiRef} rows={rows} columns={columns} onPageChange={() => {}} />
-        </div>
-      );
-    };
-
-    const { forceUpdate } = render(<Test />);
-    expect(getColumnHeaders()).to.deep.equal(['brand', 'desc', 'type']);
-    apiRef!.current.moveColumn('brand', 2);
-    expect(getColumnHeaders()).to.deep.equal(['desc', 'type', 'brand']);
-    forceUpdate(); // test stability
-    expect(getColumnHeaders()).to.deep.equal(['desc', 'type', 'brand']);
-  });
 });

packages/storybook/src/stories/grid-selection.stories.tsx

@@ -1,4 +1,3 @@
-import { useDemoData } from '@material-ui/x-grid-data-generator';
 import * as React from 'react';
 import { action } from '@storybook/addon-actions';
 import { XGrid, GridOptionsProp, useApiRef } from '@material-ui/x-grid';
@@ -64,17 +63,3 @@ export const MultipleSelectWithCheckboxNoClick = () => {
     <XGrid rows={data.rows} columns={data.columns} checkboxSelection disableSelectionOnClick />
   );
 };
-
-export function HandleSelection() {
-  const { data } = useDemoData({
-    dataSet: 'Commodity',
-    rowLength: 100,
-  });
-
-  const [myState, setMyState] = React.useState(false);
-  const handleSelection = React.useCallback(() => {
-    setMyState(!myState);
-  }, [myState]);
-
-  return <XGrid {...data} checkboxSelection onSelectionChange={handleSelection} />;
-}