@mui/x-data-grid 7.0.0-alpha.8 → 7.0.0-alpha.9

package/modern/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -1,144 +1,70 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
-import { styled, useTheme } from '@mui/material/styles';
-import { defaultMemoize } from 'reselect';
+import { styled } from '@mui/material/styles';
 import { useGridSelector } from '../../utils';
 import { useGridPrivateApiContext } from '../../utils/useGridPrivateApiContext';
-import { useGridRootProps } from '../../utils/useGridRootProps';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { GridColumnHeaderItem } from '../../../components/columnHeaders/GridColumnHeaderItem';
-import { getFirstColumnIndexToRender, getTotalHeaderHeight } from '../columns/gridColumnsUtils';
-import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
-import { areRenderContextsEqual, getRenderableIndexes } from '../virtualization/useGridVirtualScroller';
-import { gridVirtualizationColumnEnabledSelector } from '../virtualization';
+import { gridDimensionsSelector } from '../dimensions';
+import { gridRenderContextColumnsSelector, gridVirtualizationColumnEnabledSelector } from '../virtualization';
 import { GridColumnGroupHeader } from '../../../components/columnHeaders/GridColumnGroupHeader';
+import { GridPinnedColumnPosition, gridVisiblePinnedColumnDefinitionsSelector } from '../columns';
+import { GridScrollbarFillerCell as ScrollbarFiller } from '../../../components/GridScrollbarFillerCell';
+import { gridClasses } from '../../../constants/gridClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-const GridColumnHeaderRow = styled('div', {
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const SpaceFiller = styled('div')({
+  /* GridRootStyles conflict */
+  '&&': {
+    padding: 0,
+    width: 'calc(var(--DataGrid-width) - var(--DataGrid-columnsTotalWidth))'
+  }
+});
+export const GridColumnHeaderRow = styled('div', {
   name: 'MuiDataGrid',
   slot: 'ColumnHeaderRow',
   overridesResolver: (props, styles) => styles.columnHeaderRow
-})(() => ({
-  display: 'flex'
+})(({
+  ownerState: {
+    params: {
+      position
+    } = {},
+    leftOverflow = 0
+  }
+}) => ({
+  display: 'flex',
+  height: 'var(--DataGrid-headerHeight)',
+  transform: position === undefined ? `translate3d(${leftOverflow !== 0 ? `calc(var(--DataGrid-offsetLeft) - ${leftOverflow}px)` : 'var(--DataGrid-offsetLeft)'}, 0, 0)` : undefined
 }));
-function isUIEvent(event) {
-  return !!event.target;
-}
 export const useGridColumnHeaders = props => {
   const {
     innerRef: innerRefProp,
-    minColumnIndex = 0,
     visibleColumns,
     sortColumnLookup,
     filterColumnLookup,
-    columnPositions,
     columnHeaderTabIndexState,
     columnGroupHeaderTabIndexState,
     columnHeaderFocus,
     columnGroupHeaderFocus,
-    densityFactor,
     headerGroupingMaxDepth,
     columnMenuState,
     columnVisibility,
     columnGroupsHeaderStructure,
     hasOtherElementInTabSequence
   } = props;
-  const theme = useTheme();
   const [dragCol, setDragCol] = React.useState('');
   const [resizeCol, setResizeCol] = React.useState('');
   const apiRef = useGridPrivateApiContext();
   const hasVirtualization = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector);
-  const rootProps = useGridRootProps();
   const innerRef = React.useRef(null);
   const handleInnerRef = useForkRef(innerRefProp, innerRef);
-  const [renderContext, setRenderContextRaw] = React.useState(null);
-  const prevRenderContext = React.useRef(renderContext);
-  const prevScrollLeft = React.useRef(0);
-  const currentPage = useGridVisibleRows(apiRef, rootProps);
-  const totalHeaderHeight = getTotalHeaderHeight(apiRef, rootProps.columnHeaderHeight);
-  const headerHeight = Math.floor(rootProps.columnHeaderHeight * densityFactor);
-  const setRenderContext = React.useCallback(nextRenderContext => {
-    if (renderContext && nextRenderContext && areRenderContextsEqual(renderContext, nextRenderContext)) {
-      return;
-    }
-    setRenderContextRaw(nextRenderContext);
-  }, [renderContext]);
+  const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
+  const renderContext = useGridSelector(apiRef, gridRenderContextColumnsSelector);
+  const visiblePinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
   React.useEffect(() => {
     apiRef.current.columnHeadersContainerElementRef.current.scrollLeft = 0;
   }, [apiRef]);
-
-  // memoize `getFirstColumnIndexToRender`, since it's called on scroll
-  const getFirstColumnIndexToRenderRef = React.useRef(defaultMemoize(getFirstColumnIndexToRender, {
-    equalityCheck: (a, b) => ['firstColumnIndex', 'minColumnIndex', 'columnBuffer'].every(key => a[key] === b[key])
-  }));
-  const updateInnerPosition = React.useCallback(nextRenderContext => {
-    const [firstRowToRender, lastRowToRender] = getRenderableIndexes({
-      firstIndex: nextRenderContext.firstRowIndex,
-      lastIndex: nextRenderContext.lastRowIndex,
-      minFirstIndex: 0,
-      maxLastIndex: currentPage.rows.length,
-      buffer: rootProps.rowBuffer
-    });
-    const firstColumnToRender = getFirstColumnIndexToRenderRef.current({
-      firstColumnIndex: nextRenderContext.firstColumnIndex,
-      minColumnIndex,
-      columnBuffer: rootProps.columnBuffer,
-      firstRowToRender,
-      lastRowToRender,
-      apiRef,
-      visibleRows: currentPage.rows
-    });
-    const direction = theme.direction === 'ltr' ? 1 : -1;
-    const offset = firstColumnToRender > 0 ? prevScrollLeft.current - direction * columnPositions[firstColumnToRender] : prevScrollLeft.current;
-    innerRef.current.style.transform = `translate3d(${-offset}px, 0px, 0px)`;
-  }, [columnPositions, minColumnIndex, rootProps.columnBuffer, apiRef, currentPage.rows, rootProps.rowBuffer, theme.direction]);
-  React.useLayoutEffect(() => {
-    if (renderContext) {
-      updateInnerPosition(renderContext);
-    }
-  }, [renderContext, updateInnerPosition]);
-  const handleScroll = React.useCallback(({
-    left,
-    renderContext: nextRenderContext = null
-  }, event) => {
-    if (!innerRef.current) {
-      return;
-    }
-
-    // Ignore vertical scroll.
-    // Excepts the first event which sets the previous render context.
-    if (prevScrollLeft.current === left && prevRenderContext.current?.firstColumnIndex === nextRenderContext?.firstColumnIndex && prevRenderContext.current?.lastColumnIndex === nextRenderContext?.lastColumnIndex) {
-      return;
-    }
-    prevScrollLeft.current = left;
-
-    // We can only update the position when we guarantee that the render context has been
-    // rendered. This is achieved using ReactDOM.flushSync or when the context doesn't change.
-    let canUpdateInnerPosition = false;
-    if (nextRenderContext !== prevRenderContext.current || !prevRenderContext.current) {
-      // ReactDOM.flushSync cannot be called on `scroll` events fired inside effects
-      if (isUIEvent(event)) {
-        // To prevent flickering, the inner position can only be updated after the new context has
-        // been rendered. ReactDOM.flushSync ensures that the state changes will happen before
-        // updating the position.
-        ReactDOM.flushSync(() => {
-          setRenderContext(nextRenderContext);
-        });
-        canUpdateInnerPosition = true;
-      } else {
-        setRenderContext(nextRenderContext);
-      }
-      prevRenderContext.current = nextRenderContext;
-    } else {
-      canUpdateInnerPosition = true;
-    }
-
-    // Pass directly the render context to avoid waiting for the next render
-    if (nextRenderContext && canUpdateInnerPosition) {
-      updateInnerPosition(nextRenderContext);
-    }
-  }, [updateInnerPosition, setRenderContext]);
   const handleColumnResizeStart = React.useCallback(params => setResizeCol(params.field), []);
   const handleColumnResizeStop = React.useCallback(() => setResizeCol(''), []);
   const handleColumnReorderStart = React.useCallback(params => setDragCol(params.field), []);
@@ -147,53 +73,41 @@ export const useGridColumnHeaders = props => {
   useGridApiEventHandler(apiRef, 'columnResizeStop', handleColumnResizeStop);
   useGridApiEventHandler(apiRef, 'columnHeaderDragStart', handleColumnReorderStart);
   useGridApiEventHandler(apiRef, 'columnHeaderDragEnd', handleColumnReorderStop);
-  useGridApiEventHandler(apiRef, 'scrollPositionChange', handleScroll);
 
   // Helper for computation common between getColumnHeaders and getColumnGroupHeaders
   const getColumnsToRender = params => {
     const {
-      renderContext: nextRenderContext = renderContext,
-      minFirstColumn = minColumnIndex,
+      renderContext: currentContext = renderContext,
+      // TODO: `minFirstColumn` is not used anymore, could be refactored out.
       maxLastColumn = visibleColumns.length
     } = params || {};
-    if (!nextRenderContext) {
-      return null;
-    }
-    const [firstRowToRender, lastRowToRender] = getRenderableIndexes({
-      firstIndex: nextRenderContext.firstRowIndex,
-      lastIndex: nextRenderContext.lastRowIndex,
-      minFirstIndex: 0,
-      maxLastIndex: currentPage.rows.length,
-      buffer: rootProps.rowBuffer
-    });
-    const firstColumnToRender = !hasVirtualization ? 0 : getFirstColumnIndexToRenderRef.current({
-      firstColumnIndex: nextRenderContext.firstColumnIndex,
-      minColumnIndex: minFirstColumn,
-      columnBuffer: rootProps.columnBuffer,
-      apiRef,
-      firstRowToRender,
-      lastRowToRender,
-      visibleRows: currentPage.rows
-    });
-    const lastColumnToRender = !hasVirtualization ? maxLastColumn : Math.min(nextRenderContext.lastColumnIndex + rootProps.columnBuffer, maxLastColumn);
+    const firstColumnToRender = !hasVirtualization ? 0 : currentContext.firstColumnIndex;
+    const lastColumnToRender = !hasVirtualization ? maxLastColumn : currentContext.lastColumnIndex;
     const renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender);
     return {
       renderedColumns,
       firstColumnToRender,
-      lastColumnToRender,
-      minFirstColumn,
-      maxLastColumn
+      lastColumnToRender
     };
   };
+  const getFiller = (params, borderTop = false) => {
+    const isPinnedRight = params?.position === GridPinnedColumnPosition.RIGHT;
+    const hasScrollbarFiller = visiblePinnedColumns.right.length > 0 && isPinnedRight || visiblePinnedColumns.right.length === 0 && params?.position === undefined;
+    return /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [params?.position === undefined && /*#__PURE__*/_jsx(SpaceFiller, {
+        className: gridClasses.columnHeader
+      }), hasScrollbarFiller && /*#__PURE__*/_jsx(ScrollbarFiller, {
+        header: true,
+        borderTop: borderTop,
+        pinnedRight: isPinnedRight
+      })]
+    });
+  };
   const getColumnHeaders = (params, other = {}) => {
-    const columnsToRender = getColumnsToRender(params);
-    if (columnsToRender == null) {
-      return null;
-    }
     const {
       renderedColumns,
       firstColumnToRender
-    } = columnsToRender;
+    } = getColumnsToRender(params);
     const columns = [];
     for (let i = 0; i < renderedColumns.length; i += 1) {
       const colDef = renderedColumns[i];
@@ -205,7 +119,7 @@ export const useGridColumnHeaders = props => {
       columns.push( /*#__PURE__*/_jsx(GridColumnHeaderItem, _extends({}, sortColumnLookup[colDef.field], {
         columnMenuOpen: open,
         filterItemsCounter: filterColumnLookup[colDef.field] && filterColumnLookup[colDef.field].length,
-        headerHeight: headerHeight,
+        headerHeight: dimensions.headerHeight,
         isDragging: colDef.field === dragCol,
         colDef: colDef,
         colIndex: columnIndex,
@@ -214,11 +128,13 @@ export const useGridColumnHeaders = props => {
         tabIndex: tabIndex
       }, other), colDef.field));
     }
-    return /*#__PURE__*/_jsx(GridColumnHeaderRow, {
+    return /*#__PURE__*/_jsxs(GridColumnHeaderRow, {
       role: "row",
       "aria-rowindex": headerGroupingMaxDepth + 1,
-      ownerState: rootProps,
-      children: columns
+      ownerState: {
+        params
+      },
+      children: [columns, getFiller(params)]
     });
   };
   const getColumnGroupHeaders = params => {
@@ -226,7 +142,7 @@ export const useGridColumnHeaders = props => {
       return null;
     }
     const columnsToRender = getColumnsToRender(params);
-    if (columnsToRender == null || columnsToRender.renderedColumns.length === 0) {
+    if (columnsToRender.renderedColumns.length === 0) {
       return null;
     }
     const {
@@ -238,13 +154,13 @@ export const useGridColumnHeaders = props => {
     for (let depth = 0; depth < headerGroupingMaxDepth; depth += 1) {
       const rowStructure = columnGroupsHeaderStructure[depth];
       const firstColumnFieldToRender = visibleColumns[firstColumnToRender].field;
-      const firstGroupToRender = apiRef.current.unstable_getColumnGroupPath(firstColumnFieldToRender)[depth] ?? null;
+      const firstGroupToRender = apiRef.current.getColumnGroupPath(firstColumnFieldToRender)[depth] ?? null;
       const firstGroupIndex = rowStructure.findIndex(({
         groupId,
         columnFields
       }) => groupId === firstGroupToRender && columnFields.includes(firstColumnFieldToRender));
       const lastColumnFieldToRender = visibleColumns[lastColumnToRender - 1].field;
-      const lastGroupToRender = apiRef.current.unstable_getColumnGroupPath(lastColumnFieldToRender)[depth] ?? null;
+      const lastGroupToRender = apiRef.current.getColumnGroupPath(lastColumnFieldToRender)[depth] ?? null;
       const lastGroupIndex = rowStructure.findIndex(({
         groupId,
         columnFields
@@ -284,15 +200,14 @@ export const useGridColumnHeaders = props => {
       });
     }
     headerToRender.forEach((depthInfo, depthIndex) => {
-      columns.push( /*#__PURE__*/_jsx(GridColumnHeaderRow, {
-        style: {
-          height: `${headerHeight}px`,
-          transform: `translateX(-${depthInfo.leftOverflow}px)`
-        },
+      columns.push( /*#__PURE__*/_jsxs(GridColumnHeaderRow, {
         role: "row",
         "aria-rowindex": depthIndex + 1,
-        ownerState: rootProps,
-        children: depthInfo.elements.map(({
+        ownerState: {
+          params,
+          leftOverflow: depthInfo.leftOverflow
+        },
+        children: [depthInfo.elements.map(({
           groupId,
           width,
           fields,
@@ -308,33 +223,25 @@ export const useGridColumnHeaders = props => {
             depth: depthIndex,
             isLastColumn: colIndex === visibleColumns.length - fields.length,
             maxDepth: headerToRender.length,
-            height: headerHeight,
+            height: dimensions.headerHeight,
             hasFocus: hasFocus,
             tabIndex: tabIndex
           }, groupIndex);
-        })
+        }), getFiller(params)]
       }, depthIndex));
     });
     return columns;
   };
-  const rootStyle = {
-    minHeight: totalHeaderHeight,
-    maxHeight: totalHeaderHeight,
-    lineHeight: `${headerHeight}px`
-  };
   return {
     renderContext,
+    getFiller,
     getColumnHeaders,
     getColumnsToRender,
     getColumnGroupHeaders,
     isDragging: !!dragCol,
-    getRootProps: (other = {}) => _extends({
-      style: rootStyle
-    }, other),
     getInnerProps: () => ({
       ref: handleInnerRef,
       role: 'rowgroup'
-    }),
-    headerHeight
+    })
   };
 };

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

@@ -20,19 +20,25 @@ export const useGridColumnMenu = apiRef => {
    * API METHODS
    */
   const showColumnMenu = React.useCallback(field => {
-    const shouldUpdate = apiRef.current.setState(state => {
-      if (state.columnMenu.open && state.columnMenu.field === field) {
-        return state;
-      }
-      logger.debug('Opening Column Menu');
-      return _extends({}, state, {
-        columnMenu: {
-          open: true,
-          field
+    const columnMenuState = gridColumnMenuSelector(apiRef.current.state);
+    const newState = {
+      open: true,
+      field
+    };
+    const shouldUpdate = newState.open !== columnMenuState.open || newState.field !== columnMenuState.field;
+    if (shouldUpdate) {
+      apiRef.current.setState(state => {
+        if (state.columnMenu.open && state.columnMenu.field === field) {
+          return state;
         }
+        logger.debug('Opening Column Menu');
+        return _extends({}, state, {
+          columnMenu: {
+            open: true,
+            field
+          }
+        });
       });
-    });
-    if (shouldUpdate) {
       apiRef.current.hidePreferences();
       apiRef.current.forceUpdate();
     }
@@ -64,19 +70,18 @@ export const useGridColumnMenu = apiRef => {
       }
       apiRef.current.setColumnHeaderFocus(fieldToFocus);
     }
-    const shouldUpdate = apiRef.current.setState(state => {
-      if (!state.columnMenu.open && state.columnMenu.field === undefined) {
-        return state;
-      }
-      logger.debug('Hiding Column Menu');
-      return _extends({}, state, {
-        columnMenu: _extends({}, state.columnMenu, {
-          open: false,
-          field: undefined
-        })
-      });
-    });
+    const newState = {
+      open: false,
+      field: undefined
+    };
+    const shouldUpdate = newState.open !== columnMenuState.open || newState.field !== columnMenuState.field;
     if (shouldUpdate) {
+      apiRef.current.setState(state => {
+        logger.debug('Hiding Column Menu');
+        return _extends({}, state, {
+          columnMenu: newState
+        });
+      });
       apiRef.current.forceUpdate();
     }
   }, [apiRef, logger]);

package/modern/hooks/features/columns/gridColumnsInterfaces.js

@@ -1 +1,9 @@
-export {};
+export let GridPinnedColumnPosition = /*#__PURE__*/function (GridPinnedColumnPosition) {
+  GridPinnedColumnPosition["LEFT"] = "left";
+  GridPinnedColumnPosition["RIGHT"] = "right";
+  return GridPinnedColumnPosition;
+}({});
+export const EMPTY_PINNED_COLUMN_FIELDS = {
+  left: [],
+  right: []
+};

package/modern/hooks/features/columns/gridColumnsSelector.js

@@ -1,4 +1,7 @@
 import { createSelector, createSelectorMemoized } from '../../../utils/createSelector';
+import { EMPTY_PINNED_COLUMN_FIELDS } from './gridColumnsInterfaces';
+import { gridThemeSelector } from '../../core/gridCoreSelector';
+
 /**
  * Get the columns state
  * @category Columns
@@ -42,6 +45,54 @@ export const gridVisibleColumnDefinitionsSelector = createSelectorMemoized(gridC
  */
 export const gridVisibleColumnFieldsSelector = createSelectorMemoized(gridVisibleColumnDefinitionsSelector, visibleColumns => visibleColumns.map(column => column.field));
 
+/**
+ * Get the visible pinned columns model.
+ * @category Visible Columns
+ */
+export const gridPinnedColumnsSelector = state => state.pinnedColumns;
+
+/**
+ * Get the visible pinned columns.
+ * @category Visible Columns
+ */
+export const gridVisiblePinnedColumnDefinitionsSelector = createSelectorMemoized(gridColumnsStateSelector, gridPinnedColumnsSelector, gridVisibleColumnFieldsSelector, gridThemeSelector, (columnsState, model, visibleColumnFields, theme) => {
+  const visiblePinnedFields = filterVisibleColumns(model, visibleColumnFields, theme.direction === 'rtl');
+  const visiblePinnedColumns = {
+    left: visiblePinnedFields.left.map(field => columnsState.lookup[field]),
+    right: visiblePinnedFields.right.map(field => columnsState.lookup[field])
+  };
+  return visiblePinnedColumns;
+});
+function filterVisibleColumns(pinnedColumns, columns, invert) {
+  if (!Array.isArray(pinnedColumns.left) && !Array.isArray(pinnedColumns.right)) {
+    return EMPTY_PINNED_COLUMN_FIELDS;
+  }
+  if (pinnedColumns.left?.length === 0 && pinnedColumns.right?.length === 0) {
+    return EMPTY_PINNED_COLUMN_FIELDS;
+  }
+  const filter = (newPinnedColumns, remainingColumns) => {
+    if (!Array.isArray(newPinnedColumns)) {
+      return [];
+    }
+    return newPinnedColumns.filter(field => remainingColumns.includes(field));
+  };
+  const leftPinnedColumns = filter(pinnedColumns.left, columns);
+  const columnsWithoutLeftPinnedColumns = columns.filter(
+  // Filter out from the remaining columns those columns already pinned to the left
+  field => !leftPinnedColumns.includes(field));
+  const rightPinnedColumns = filter(pinnedColumns.right, columnsWithoutLeftPinnedColumns);
+  if (invert) {
+    return {
+      left: rightPinnedColumns,
+      right: leftPinnedColumns
+    };
+  }
+  return {
+    left: leftPinnedColumns,
+    right: rightPinnedColumns
+  };
+}
+
 /**
  * Get the left position in pixel of each visible columns relative to the left of the first column.
  * @category Visible Columns

package/modern/hooks/features/columns/gridColumnsUtils.js

@@ -1,10 +1,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { DEFAULT_GRID_COL_TYPE_KEY, GRID_STRING_COL_DEF } from '../../../colDef';
+import { DEFAULT_GRID_COL_TYPE_KEY, GRID_STRING_COL_DEF, getGridDefaultColumnTypes } from '../../../colDef';
 import { gridColumnsStateSelector, gridColumnVisibilityModelSelector } from './gridColumnsSelector';
 import { clamp } from '../../../utils/utils';
 import { gridDensityFactorSelector } from '../density/densitySelector';
 import { gridColumnGroupsHeaderMaxDepthSelector } from '../columnGrouping/gridColumnGroupsSelector';
 export const COLUMNS_DIMENSION_PROPERTIES = ['maxWidth', 'minWidth', 'width', 'flex'];
+const COLUMN_TYPES = getGridDefaultColumnTypes();
+
 /**
  * Computes width for flex columns.
  * Based on CSS Flexbox specification:
@@ -196,10 +198,10 @@ export const applyInitialState = (columnsState, initialState) => {
   });
   return newColumnsState;
 };
-function getDefaultColTypeDef(columnTypes, type) {
-  let colDef = columnTypes[DEFAULT_GRID_COL_TYPE_KEY];
-  if (type && columnTypes[type]) {
-    colDef = columnTypes[type];
+function getDefaultColTypeDef(type) {
+  let colDef = COLUMN_TYPES[DEFAULT_GRID_COL_TYPE_KEY];
+  if (type && COLUMN_TYPES[type]) {
+    colDef = COLUMN_TYPES[type];
   }
   return colDef;
 }
@@ -207,7 +209,6 @@ export const createColumnsState = ({
   apiRef,
   columnsToUpsert,
   initialState,
-  columnTypes,
   columnVisibilityModel = gridColumnVisibilityModelSelector(apiRef),
   keepOnlyColumnsToUpsert = false
 }) => {
@@ -243,7 +244,7 @@ export const createColumnsState = ({
     columnsToKeep[field] = true;
     let existingState = columnsState.lookup[field];
     if (existingState == null) {
-      existingState = _extends({}, getDefaultColTypeDef(columnTypes, newColumn.type), {
+      existingState = _extends({}, getDefaultColTypeDef(newColumn.type), {
         field,
         hasBeenResized: false
       });
@@ -254,7 +255,7 @@ export const createColumnsState = ({
 
     // If the column type has changed - merge the existing state with the default column type definition
     if (existingState && existingState.type !== newColumn.type) {
-      existingState = _extends({}, getDefaultColTypeDef(columnTypes, newColumn.type), {
+      existingState = _extends({}, getDefaultColTypeDef(newColumn.type), {
         field
       });
     }
@@ -280,11 +281,8 @@ export const createColumnsState = ({
   }
   const columnsStateWithPreProcessing = apiRef.current.unstable_applyPipeProcessors('hydrateColumns', columnsState);
   const columnsStateWithPortableColumns = applyInitialState(columnsStateWithPreProcessing, initialState);
-  return hydrateColumnsWidth(columnsStateWithPortableColumns, apiRef.current.getRootDimensions?.()?.viewportInnerSize.width ?? 0);
+  return hydrateColumnsWidth(columnsStateWithPortableColumns, apiRef.current.getRootDimensions?.().viewportInnerSize.width ?? 0);
 };
-export const mergeColumnsState = columnsState => state => _extends({}, state, {
-  columns: columnsState
-});
 export function getFirstNonSpannedColumnToRender({
   firstColumnToRender,
   apiRef,

package/modern/hooks/features/columns/index.js

@@ -1 +1,2 @@
-export { gridColumnFieldsSelector, gridColumnLookupSelector, gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector, gridVisibleColumnDefinitionsSelector, gridVisibleColumnFieldsSelector, gridColumnPositionsSelector, gridColumnsTotalWidthSelector, gridFilterableColumnDefinitionsSelector, gridFilterableColumnLookupSelector } from './gridColumnsSelector';
+export * from './gridColumnsSelector';
+export * from './gridColumnsInterfaces';