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

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

@@ -1,54 +1,60 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 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";
-var GridColumnHeaderRow = styled('div', {
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var SpaceFiller = styled('div')({
+  /* GridRootStyles conflict */
+  '&&': {
+    padding: 0,
+    width: 'calc(var(--DataGrid-width) - var(--DataGrid-columnsTotalWidth))'
+  }
+});
+export var GridColumnHeaderRow = styled('div', {
   name: 'MuiDataGrid',
   slot: 'ColumnHeaderRow',
   overridesResolver: function overridesResolver(props, styles) {
     return styles.columnHeaderRow;
   }
-})(function () {
+})(function (_ref) {
+  var _ref$ownerState = _ref.ownerState,
+    _ref$ownerState$param = _ref$ownerState.params,
+    _ref$ownerState$param2 = _ref$ownerState$param === void 0 ? {} : _ref$ownerState$param,
+    position = _ref$ownerState$param2.position,
+    _ref$ownerState$leftO = _ref$ownerState.leftOverflow,
+    leftOverflow = _ref$ownerState$leftO === void 0 ? 0 : _ref$ownerState$leftO;
   return {
-    display: 'flex'
+    display: 'flex',
+    height: 'var(--DataGrid-headerHeight)',
+    transform: position === undefined ? "translate3d(".concat(leftOverflow !== 0 ? "calc(var(--DataGrid-offsetLeft) - ".concat(leftOverflow, "px)") : 'var(--DataGrid-offsetLeft)', ", 0, 0)") : undefined
   };
 });
-function isUIEvent(event) {
-  return !!event.target;
-}
 export var useGridColumnHeaders = function useGridColumnHeaders(props) {
   var innerRefProp = props.innerRef,
-    _props$minColumnIndex = props.minColumnIndex,
-    minColumnIndex = _props$minColumnIndex === void 0 ? 0 : _props$minColumnIndex,
     visibleColumns = props.visibleColumns,
     sortColumnLookup = props.sortColumnLookup,
     filterColumnLookup = props.filterColumnLookup,
-    columnPositions = props.columnPositions,
     columnHeaderTabIndexState = props.columnHeaderTabIndexState,
     columnGroupHeaderTabIndexState = props.columnGroupHeaderTabIndexState,
     columnHeaderFocus = props.columnHeaderFocus,
     columnGroupHeaderFocus = props.columnGroupHeaderFocus,
-    densityFactor = props.densityFactor,
     headerGroupingMaxDepth = props.headerGroupingMaxDepth,
     columnMenuState = props.columnMenuState,
     columnVisibility = props.columnVisibility,
     columnGroupsHeaderStructure = props.columnGroupsHeaderStructure,
     hasOtherElementInTabSequence = props.hasOtherElementInTabSequence;
-  var theme = useTheme();
   var _React$useState = React.useState(''),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     dragCol = _React$useState2[0],
@@ -59,107 +65,14 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
     setResizeCol = _React$useState4[1];
   var apiRef = useGridPrivateApiContext();
   var hasVirtualization = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector);
-  var rootProps = useGridRootProps();
   var innerRef = React.useRef(null);
   var handleInnerRef = useForkRef(innerRefProp, innerRef);
-  var _React$useState5 = React.useState(null),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    renderContext = _React$useState6[0],
-    setRenderContextRaw = _React$useState6[1];
-  var prevRenderContext = React.useRef(renderContext);
-  var prevScrollLeft = React.useRef(0);
-  var currentPage = useGridVisibleRows(apiRef, rootProps);
-  var totalHeaderHeight = getTotalHeaderHeight(apiRef, rootProps.columnHeaderHeight);
-  var headerHeight = Math.floor(rootProps.columnHeaderHeight * densityFactor);
-  var setRenderContext = React.useCallback(function (nextRenderContext) {
-    if (renderContext && nextRenderContext && areRenderContextsEqual(renderContext, nextRenderContext)) {
-      return;
-    }
-    setRenderContextRaw(nextRenderContext);
-  }, [renderContext]);
+  var dimensions = useGridSelector(apiRef, gridDimensionsSelector);
+  var renderContext = useGridSelector(apiRef, gridRenderContextColumnsSelector);
+  var visiblePinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
   React.useEffect(function () {
     apiRef.current.columnHeadersContainerElementRef.current.scrollLeft = 0;
   }, [apiRef]);
-
-  // memoize `getFirstColumnIndexToRender`, since it's called on scroll
-  var getFirstColumnIndexToRenderRef = React.useRef(defaultMemoize(getFirstColumnIndexToRender, {
-    equalityCheck: function equalityCheck(a, b) {
-      return ['firstColumnIndex', 'minColumnIndex', 'columnBuffer'].every(function (key) {
-        return a[key] === b[key];
-      });
-    }
-  }));
-  var updateInnerPosition = React.useCallback(function (nextRenderContext) {
-    var _getRenderableIndexes = getRenderableIndexes({
-        firstIndex: nextRenderContext.firstRowIndex,
-        lastIndex: nextRenderContext.lastRowIndex,
-        minFirstIndex: 0,
-        maxLastIndex: currentPage.rows.length,
-        buffer: rootProps.rowBuffer
-      }),
-      _getRenderableIndexes2 = _slicedToArray(_getRenderableIndexes, 2),
-      firstRowToRender = _getRenderableIndexes2[0],
-      lastRowToRender = _getRenderableIndexes2[1];
-    var firstColumnToRender = getFirstColumnIndexToRenderRef.current({
-      firstColumnIndex: nextRenderContext.firstColumnIndex,
-      minColumnIndex: minColumnIndex,
-      columnBuffer: rootProps.columnBuffer,
-      firstRowToRender: firstRowToRender,
-      lastRowToRender: lastRowToRender,
-      apiRef: apiRef,
-      visibleRows: currentPage.rows
-    });
-    var direction = theme.direction === 'ltr' ? 1 : -1;
-    var offset = firstColumnToRender > 0 ? prevScrollLeft.current - direction * columnPositions[firstColumnToRender] : prevScrollLeft.current;
-    innerRef.current.style.transform = "translate3d(".concat(-offset, "px, 0px, 0px)");
-  }, [columnPositions, minColumnIndex, rootProps.columnBuffer, apiRef, currentPage.rows, rootProps.rowBuffer, theme.direction]);
-  React.useLayoutEffect(function () {
-    if (renderContext) {
-      updateInnerPosition(renderContext);
-    }
-  }, [renderContext, updateInnerPosition]);
-  var handleScroll = React.useCallback(function (_ref, event) {
-    var _prevRenderContext$cu, _prevRenderContext$cu2;
-    var left = _ref.left,
-      _ref$renderContext = _ref.renderContext,
-      nextRenderContext = _ref$renderContext === void 0 ? null : _ref$renderContext;
-    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.
-    var 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(function () {
-          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]);
   var handleColumnResizeStart = React.useCallback(function (params) {
     return setResizeCol(params.field);
   }, []);
@@ -176,57 +89,42 @@ export var useGridColumnHeaders = function 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
   var getColumnsToRender = function getColumnsToRender(params) {
     var _ref2 = params || {},
       _ref2$renderContext = _ref2.renderContext,
-      nextRenderContext = _ref2$renderContext === void 0 ? renderContext : _ref2$renderContext,
-      _ref2$minFirstColumn = _ref2.minFirstColumn,
-      minFirstColumn = _ref2$minFirstColumn === void 0 ? minColumnIndex : _ref2$minFirstColumn,
+      currentContext = _ref2$renderContext === void 0 ? renderContext : _ref2$renderContext,
       _ref2$maxLastColumn = _ref2.maxLastColumn,
       maxLastColumn = _ref2$maxLastColumn === void 0 ? visibleColumns.length : _ref2$maxLastColumn;
-    if (!nextRenderContext) {
-      return null;
-    }
-    var _getRenderableIndexes3 = getRenderableIndexes({
-        firstIndex: nextRenderContext.firstRowIndex,
-        lastIndex: nextRenderContext.lastRowIndex,
-        minFirstIndex: 0,
-        maxLastIndex: currentPage.rows.length,
-        buffer: rootProps.rowBuffer
-      }),
-      _getRenderableIndexes4 = _slicedToArray(_getRenderableIndexes3, 2),
-      firstRowToRender = _getRenderableIndexes4[0],
-      lastRowToRender = _getRenderableIndexes4[1];
-    var firstColumnToRender = !hasVirtualization ? 0 : getFirstColumnIndexToRenderRef.current({
-      firstColumnIndex: nextRenderContext.firstColumnIndex,
-      minColumnIndex: minFirstColumn,
-      columnBuffer: rootProps.columnBuffer,
-      apiRef: apiRef,
-      firstRowToRender: firstRowToRender,
-      lastRowToRender: lastRowToRender,
-      visibleRows: currentPage.rows
-    });
-    var lastColumnToRender = !hasVirtualization ? maxLastColumn : Math.min(nextRenderContext.lastColumnIndex + rootProps.columnBuffer, maxLastColumn);
+    var firstColumnToRender = !hasVirtualization ? 0 : currentContext.firstColumnIndex;
+    var lastColumnToRender = !hasVirtualization ? maxLastColumn : currentContext.lastColumnIndex;
     var renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender);
     return {
       renderedColumns: renderedColumns,
       firstColumnToRender: firstColumnToRender,
-      lastColumnToRender: lastColumnToRender,
-      minFirstColumn: minFirstColumn,
-      maxLastColumn: maxLastColumn
+      lastColumnToRender: lastColumnToRender
     };
   };
+  var getFiller = function getFiller(params) {
+    var borderTop = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var isPinnedRight = (params == null ? void 0 : params.position) === GridPinnedColumnPosition.RIGHT;
+    var 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
+      })]
+    });
+  };
   var getColumnHeaders = function getColumnHeaders(params) {
     var other = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    var columnsToRender = getColumnsToRender(params);
-    if (columnsToRender == null) {
-      return null;
-    }
-    var renderedColumns = columnsToRender.renderedColumns,
-      firstColumnToRender = columnsToRender.firstColumnToRender;
+    var _getColumnsToRender = getColumnsToRender(params),
+      renderedColumns = _getColumnsToRender.renderedColumns,
+      firstColumnToRender = _getColumnsToRender.firstColumnToRender;
     var columns = [];
     for (var i = 0; i < renderedColumns.length; i += 1) {
       var colDef = renderedColumns[i];
@@ -238,7 +136,7 @@ export var useGridColumnHeaders = function 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,
@@ -247,11 +145,13 @@ export var useGridColumnHeaders = function 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: params
+      },
+      children: [columns, getFiller(params)]
     });
   };
   var getColumnGroupHeaders = function getColumnGroupHeaders(params) {
@@ -259,7 +159,7 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
       return null;
     }
     var columnsToRender = getColumnsToRender(params);
-    if (columnsToRender == null || columnsToRender.renderedColumns.length === 0) {
+    if (columnsToRender.renderedColumns.length === 0) {
       return null;
     }
     var firstColumnToRender = columnsToRender.firstColumnToRender,
@@ -267,17 +167,17 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
     var columns = [];
     var headerToRender = [];
     var _loop = function _loop(depth) {
-      var _apiRef$current$unsta, _apiRef$current$unsta2;
+      var _apiRef$current$getCo, _apiRef$current$getCo2;
       var rowStructure = columnGroupsHeaderStructure[depth];
       var firstColumnFieldToRender = visibleColumns[firstColumnToRender].field;
-      var firstGroupToRender = (_apiRef$current$unsta = apiRef.current.unstable_getColumnGroupPath(firstColumnFieldToRender)[depth]) != null ? _apiRef$current$unsta : null;
+      var firstGroupToRender = (_apiRef$current$getCo = apiRef.current.getColumnGroupPath(firstColumnFieldToRender)[depth]) != null ? _apiRef$current$getCo : null;
       var firstGroupIndex = rowStructure.findIndex(function (_ref4) {
         var groupId = _ref4.groupId,
           columnFields = _ref4.columnFields;
         return groupId === firstGroupToRender && columnFields.includes(firstColumnFieldToRender);
       });
       var lastColumnFieldToRender = visibleColumns[lastColumnToRender - 1].field;
-      var lastGroupToRender = (_apiRef$current$unsta2 = apiRef.current.unstable_getColumnGroupPath(lastColumnFieldToRender)[depth]) != null ? _apiRef$current$unsta2 : null;
+      var lastGroupToRender = (_apiRef$current$getCo2 = apiRef.current.getColumnGroupPath(lastColumnFieldToRender)[depth]) != null ? _apiRef$current$getCo2 : null;
       var lastGroupIndex = rowStructure.findIndex(function (_ref5) {
         var groupId = _ref5.groupId,
           columnFields = _ref5.columnFields;
@@ -327,15 +227,14 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
       _loop(depth);
     }
     headerToRender.forEach(function (depthInfo, depthIndex) {
-      columns.push( /*#__PURE__*/_jsx(GridColumnHeaderRow, {
-        style: {
-          height: "".concat(headerHeight, "px"),
-          transform: "translateX(-".concat(depthInfo.leftOverflow, "px)")
-        },
+      columns.push( /*#__PURE__*/_jsxs(GridColumnHeaderRow, {
         role: "row",
         "aria-rowindex": depthIndex + 1,
-        ownerState: rootProps,
-        children: depthInfo.elements.map(function (_ref3, groupIndex) {
+        ownerState: {
+          params: params,
+          leftOverflow: depthInfo.leftOverflow
+        },
+        children: [depthInfo.elements.map(function (_ref3, groupIndex) {
           var groupId = _ref3.groupId,
             width = _ref3.width,
             fields = _ref3.fields,
@@ -350,38 +249,27 @@ export var useGridColumnHeaders = function 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;
   };
-  var rootStyle = {
-    minHeight: totalHeaderHeight,
-    maxHeight: totalHeaderHeight,
-    lineHeight: "".concat(headerHeight, "px")
-  };
   return {
     renderContext: renderContext,
+    getFiller: getFiller,
     getColumnHeaders: getColumnHeaders,
     getColumnsToRender: getColumnsToRender,
     getColumnGroupHeaders: getColumnGroupHeaders,
     isDragging: !!dragCol,
-    getRootProps: function getRootProps() {
-      var other = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      return _extends({
-        style: rootStyle
-      }, other);
-    },
     getInnerProps: function getInnerProps() {
       return {
         ref: handleInnerRef,
         role: 'rowgroup'
       };
-    },
-    headerHeight: headerHeight
+    }
   };
 };

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

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

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

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

package/legacy/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
@@ -62,6 +65,65 @@ export var gridVisibleColumnFieldsSelector = createSelectorMemoized(gridVisibleC
   });
 });
 
+/**
+ * Get the visible pinned columns model.
+ * @category Visible Columns
+ */
+export var gridPinnedColumnsSelector = function gridPinnedColumnsSelector(state) {
+  return state.pinnedColumns;
+};
+
+/**
+ * Get the visible pinned columns.
+ * @category Visible Columns
+ */
+export var gridVisiblePinnedColumnDefinitionsSelector = createSelectorMemoized(gridColumnsStateSelector, gridPinnedColumnsSelector, gridVisibleColumnFieldsSelector, gridThemeSelector, function (columnsState, model, visibleColumnFields, theme) {
+  var visiblePinnedFields = filterVisibleColumns(model, visibleColumnFields, theme.direction === 'rtl');
+  var visiblePinnedColumns = {
+    left: visiblePinnedFields.left.map(function (field) {
+      return columnsState.lookup[field];
+    }),
+    right: visiblePinnedFields.right.map(function (field) {
+      return 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;
+  }
+  var filter = function filter(newPinnedColumns, remainingColumns) {
+    if (!Array.isArray(newPinnedColumns)) {
+      return [];
+    }
+    return newPinnedColumns.filter(function (field) {
+      return remainingColumns.includes(field);
+    });
+  };
+  var leftPinnedColumns = filter(pinnedColumns.left, columns);
+  var columnsWithoutLeftPinnedColumns = columns.filter(
+  // Filter out from the remaining columns those columns already pinned to the left
+  function (field) {
+    return !leftPinnedColumns.includes(field);
+  });
+  var 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/legacy/hooks/features/columns/gridColumnsUtils.js

@@ -2,12 +2,14 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 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 var COLUMNS_DIMENSION_PROPERTIES = ['maxWidth', 'minWidth', 'width', 'flex'];
+var COLUMN_TYPES = getGridDefaultColumnTypes();
+
 /**
  * Computes width for flex columns.
  * Based on CSS Flexbox specification:
@@ -207,10 +209,10 @@ export var applyInitialState = function applyInitialState(columnsState, initialS
   });
   return newColumnsState;
 };
-function getDefaultColTypeDef(columnTypes, type) {
-  var colDef = columnTypes[DEFAULT_GRID_COL_TYPE_KEY];
-  if (type && columnTypes[type]) {
-    colDef = columnTypes[type];
+function getDefaultColTypeDef(type) {
+  var colDef = COLUMN_TYPES[DEFAULT_GRID_COL_TYPE_KEY];
+  if (type && COLUMN_TYPES[type]) {
+    colDef = COLUMN_TYPES[type];
   }
   return colDef;
 }
@@ -219,7 +221,6 @@ export var createColumnsState = function createColumnsState(_ref5) {
   var apiRef = _ref5.apiRef,
     columnsToUpsert = _ref5.columnsToUpsert,
     initialState = _ref5.initialState,
-    columnTypes = _ref5.columnTypes,
     _ref5$columnVisibilit = _ref5.columnVisibilityModel,
     columnVisibilityModel = _ref5$columnVisibilit === void 0 ? gridColumnVisibilityModelSelector(apiRef) : _ref5$columnVisibilit,
     _ref5$keepOnlyColumns = _ref5.keepOnlyColumnsToUpsert,
@@ -254,7 +255,7 @@ export var createColumnsState = function createColumnsState(_ref5) {
     columnsToKeep[field] = true;
     var existingState = columnsState.lookup[field];
     if (existingState == null) {
-      existingState = _extends({}, getDefaultColTypeDef(columnTypes, newColumn.type), {
+      existingState = _extends({}, getDefaultColTypeDef(newColumn.type), {
         field: field,
         hasBeenResized: false
       });
@@ -265,7 +266,7 @@ export var createColumnsState = function createColumnsState(_ref5) {
 
     // 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: field
       });
     }
@@ -291,14 +292,7 @@ export var createColumnsState = function createColumnsState(_ref5) {
   }
   var columnsStateWithPreProcessing = apiRef.current.unstable_applyPipeProcessors('hydrateColumns', columnsState);
   var 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);
-};
-export var mergeColumnsState = function mergeColumnsState(columnsState) {
-  return function (state) {
-    return _extends({}, state, {
-      columns: columnsState
-    });
-  };
+  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 function getFirstNonSpannedColumnToRender(_ref6) {
   var firstColumnToRender = _ref6.firstColumnToRender,

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