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

package/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -1,145 +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) => {
-    var _prevRenderContext$cu, _prevRenderContext$cu2;
-    if (!innerRef.current) {
-      return;
-    }
-
-    // Ignore vertical scroll.
-    // Excepts the first event which sets the previous render context.
-    if (prevScrollLeft.current === left && ((_prevRenderContext$cu = prevRenderContext.current) == null ? void 0 : _prevRenderContext$cu.firstColumnIndex) === (nextRenderContext == null ? void 0 : nextRenderContext.firstColumnIndex) && ((_prevRenderContext$cu2 = prevRenderContext.current) == null ? void 0 : _prevRenderContext$cu2.lastColumnIndex) === (nextRenderContext == null ? void 0 : 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), []);
@@ -148,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 == null ? void 0 : params.position) === GridPinnedColumnPosition.RIGHT;
+    const hasScrollbarFiller = visiblePinnedColumns.right.length > 0 && isPinnedRight || visiblePinnedColumns.right.length === 0 && (params == null ? void 0 : params.position) === undefined;
+    return /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [(params == null ? void 0 : 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];
@@ -206,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,
@@ -215,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 => {
@@ -227,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 {
@@ -237,16 +152,16 @@ export const useGridColumnHeaders = props => {
     const columns = [];
     const headerToRender = [];
     for (let depth = 0; depth < headerGroupingMaxDepth; depth += 1) {
-      var _apiRef$current$unsta, _apiRef$current$unsta2;
+      var _apiRef$current$getCo, _apiRef$current$getCo2;
       const rowStructure = columnGroupsHeaderStructure[depth];
       const firstColumnFieldToRender = visibleColumns[firstColumnToRender].field;
-      const firstGroupToRender = (_apiRef$current$unsta = apiRef.current.unstable_getColumnGroupPath(firstColumnFieldToRender)[depth]) != null ? _apiRef$current$unsta : null;
+      const firstGroupToRender = (_apiRef$current$getCo = apiRef.current.getColumnGroupPath(firstColumnFieldToRender)[depth]) != null ? _apiRef$current$getCo : null;
       const firstGroupIndex = rowStructure.findIndex(({
         groupId,
         columnFields
       }) => groupId === firstGroupToRender && columnFields.includes(firstColumnFieldToRender));
       const lastColumnFieldToRender = visibleColumns[lastColumnToRender - 1].field;
-      const lastGroupToRender = (_apiRef$current$unsta2 = apiRef.current.unstable_getColumnGroupPath(lastColumnFieldToRender)[depth]) != null ? _apiRef$current$unsta2 : null;
+      const lastGroupToRender = (_apiRef$current$getCo2 = apiRef.current.getColumnGroupPath(lastColumnFieldToRender)[depth]) != null ? _apiRef$current$getCo2 : null;
       const lastGroupIndex = rowStructure.findIndex(({
         groupId,
         columnFields
@@ -287,15 +202,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,
@@ -311,33 +225,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/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/hooks/features/columns/gridColumnsInterfaces.d.ts

@@ -1,5 +1,9 @@
 import { GridColDef, GridStateColDef } from '../../../models/colDef/gridColDef';
 import type { GridColumnDimensionProperties } from './gridColumnsUtils';
+export declare enum GridPinnedColumnPosition {
+    LEFT = "left",
+    RIGHT = "right"
+}
 export type GridColumnLookup = {
     [field: string]: GridStateColDef;
 };
@@ -11,6 +15,19 @@ export interface GridColumnsState {
     lookup: GridColumnLookup;
     columnVisibilityModel: GridColumnVisibilityModel;
 }
+export interface GridPinnedColumnFields {
+    left?: string[];
+    right?: string[];
+}
+export declare const EMPTY_PINNED_COLUMN_FIELDS: {
+    left: string[];
+    right: string[];
+};
+export interface GridPinnedColumns {
+    left: GridStateColDef[];
+    right: GridStateColDef[];
+}
+export type GridColumnPinningState = GridPinnedColumnFields;
 export type GridColumnDimensions = {
     [key in GridColumnDimensionProperties]?: number;
 };

package/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/hooks/features/columns/gridColumnsSelector.d.ts

@@ -1,5 +1,5 @@
 import { GridStateCommunity } from '../../../models/gridStateCommunity';
-import { GridColumnLookup } from './gridColumnsInterfaces';
+import { GridColumnLookup, GridPinnedColumnFields } from './gridColumnsInterfaces';
 /**
  * Get the columns state
  * @category Columns
@@ -36,6 +36,19 @@ export declare const gridVisibleColumnDefinitionsSelector: import("../../../util
  * @category Visible Columns
  */
 export declare const gridVisibleColumnFieldsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, string[]>;
+/**
+ * Get the visible pinned columns model.
+ * @category Visible Columns
+ */
+export declare const gridPinnedColumnsSelector: (state: GridStateCommunity) => GridPinnedColumnFields;
+/**
+ * Get the visible pinned columns.
+ * @category Visible Columns
+ */
+export declare const gridVisiblePinnedColumnDefinitionsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, {
+    left: import("../../../internals").GridStateColDef[];
+    right: import("../../../internals").GridStateColDef[];
+}>;
 /**
  * Get the left position in pixel of each visible columns relative to the left of the first column.
  * @category Visible Columns

package/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,55 @@ 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) {
+  var _pinnedColumns$left, _pinnedColumns$right;
+  if (!Array.isArray(pinnedColumns.left) && !Array.isArray(pinnedColumns.right)) {
+    return EMPTY_PINNED_COLUMN_FIELDS;
+  }
+  if (((_pinnedColumns$left = pinnedColumns.left) == null ? void 0 : _pinnedColumns$left.length) === 0 && ((_pinnedColumns$right = pinnedColumns.right) == null ? void 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/hooks/features/columns/gridColumnsUtils.d.ts

@@ -1,7 +1,5 @@
 import * as React from 'react';
 import { GridColumnsState, GridColumnsRawState, GridColumnVisibilityModel, GridColumnsInitialState } from './gridColumnsInterfaces';
-import { GridColumnTypesRecord } from '../../../models';
-import { GridStateCommunity } from '../../../models/gridStateCommunity';
 import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
 import { GridColDef } from '../../../models/colDef/gridColDef';
 import { GridApiCommon } from '../../../models/api/gridApiCommon';
@@ -39,15 +37,13 @@ export declare const hydrateColumnsWidth: (rawState: GridColumnsRawState, viewpo
  * The columns not registered in `orderedFields` will be placed after the imported columns.
  */
 export declare const applyInitialState: (columnsState: GridColumnsRawState, initialState: GridColumnsInitialState | undefined) => GridColumnsRawState;
-export declare const createColumnsState: ({ apiRef, columnsToUpsert, initialState, columnTypes, columnVisibilityModel, keepOnlyColumnsToUpsert, }: {
+export declare const createColumnsState: ({ apiRef, columnsToUpsert, initialState, columnVisibilityModel, keepOnlyColumnsToUpsert, }: {
     columnsToUpsert: readonly GridColDef[];
     initialState: GridColumnsInitialState | undefined;
-    columnTypes: GridColumnTypesRecord;
     columnVisibilityModel?: GridColumnVisibilityModel | undefined;
     keepOnlyColumnsToUpsert: boolean;
     apiRef: React.MutableRefObject<GridApiCommunity>;
 }) => GridColumnsState;
-export declare const mergeColumnsState: (columnsState: GridColumnsState) => (state: GridStateCommunity) => GridStateCommunity;
 export declare function getFirstNonSpannedColumnToRender({ firstColumnToRender, apiRef, firstRowToRender, lastRowToRender, visibleRows, }: {
     firstColumnToRender: number;
     apiRef: React.MutableRefObject<GridApiCommon>;

package/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
 }) => {
@@ -244,7 +245,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
       });
@@ -255,7 +256,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
       });
     }
@@ -281,11 +282,8 @@ export const createColumnsState = ({
   }
   const columnsStateWithPreProcessing = apiRef.current.unstable_applyPipeProcessors('hydrateColumns', columnsState);
   const columnsStateWithPortableColumns = applyInitialState(columnsStateWithPreProcessing, initialState);
-  return hydrateColumnsWidth(columnsStateWithPortableColumns, (_apiRef$current$getRo = (_apiRef$current$getRo2 = (_apiRef$current = apiRef.current).getRootDimensions) == null || (_apiRef$current$getRo2 = _apiRef$current$getRo2.call(_apiRef$current)) == null ? void 0 : _apiRef$current$getRo2.viewportInnerSize.width) != null ? _apiRef$current$getRo : 0);
+  return hydrateColumnsWidth(columnsStateWithPortableColumns, (_apiRef$current$getRo = (_apiRef$current$getRo2 = (_apiRef$current = apiRef.current).getRootDimensions) == null ? void 0 : _apiRef$current$getRo2.call(_apiRef$current).viewportInnerSize.width) != null ? _apiRef$current$getRo : 0);
 };
-export const mergeColumnsState = columnsState => state => _extends({}, state, {
-  columns: columnsState
-});
 export function getFirstNonSpannedColumnToRender({
   firstColumnToRender,
   apiRef,

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

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

package/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';