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

package/node/hooks/features/columnGrouping/useGridColumnGrouping.js

@@ -29,17 +29,19 @@ const createGroupLookup = columnGroupingModel => {
       } = node,
       other = (0, _objectWithoutPropertiesLoose2.default)(node, _excluded);
     if (!groupId) {
-      throw new Error('MUI: An element of the columnGroupingModel does not have either `field` or `groupId`.');
+      throw new Error('MUI X: An element of the columnGroupingModel does not have either `field` or `groupId`.');
     }
-    if (!children) {
-      console.warn(`MUI: group groupId=${groupId} has no children.`);
+    if (process.env.NODE_ENV !== 'production') {
+      if (!children) {
+        console.warn(`MUI X: group groupId=${groupId} has no children.`);
+      }
     }
     const groupParam = (0, _extends2.default)({}, other, {
       groupId
     });
     const subTreeLookup = createGroupLookup(children);
     if (subTreeLookup[groupId] !== undefined || groupLookup[groupId] !== undefined) {
-      throw new Error(`MUI: The groupId ${groupId} is used multiple times in the columnGroupingModel.`);
+      throw new Error(`MUI X: The groupId ${groupId} is used multiple times in the columnGroupingModel.`);
     }
     groupLookup = (0, _extends2.default)({}, groupLookup, subTreeLookup, {
       [groupId]: groupParam
@@ -48,16 +50,14 @@ const createGroupLookup = columnGroupingModel => {
   return (0, _extends2.default)({}, groupLookup);
 };
 const columnGroupsStateInitializer = (state, props, apiRef) => {
-  if (!props.experimentalFeatures?.columnGrouping) {
+  if (!props.columnGroupingModel) {
     return state;
   }
   const columnFields = (0, _columns.gridColumnFieldsSelector)(apiRef);
   const visibleColumnFields = (0, _columns.gridVisibleColumnFieldsSelector)(apiRef);
   const groupLookup = createGroupLookup(props.columnGroupingModel ?? []);
   const unwrappedGroupingModel = (0, _gridColumnGroupsUtils.unwrapGroupingColumnModel)(props.columnGroupingModel ?? []);
-  const columnGroupsHeaderStructure = (0, _gridColumnGroupsUtils.getColumnGroupsHeaderStructure)(columnFields, unwrappedGroupingModel,
-  // @ts-expect-error Move this part to `Pro` package
-  apiRef.current.state.pinnedColumns ?? {});
+  const columnGroupsHeaderStructure = (0, _gridColumnGroupsUtils.getColumnGroupsHeaderStructure)(columnFields, unwrappedGroupingModel, apiRef.current.state.pinnedColumns ?? {});
   const maxDepth = visibleColumnFields.length === 0 ? 0 : Math.max(...visibleColumnFields.map(field => unwrappedGroupingModel[field]?.length ?? 0));
   return (0, _extends2.default)({}, state, {
     columnGrouping: {
@@ -87,16 +87,14 @@ const useGridColumnGrouping = (apiRef, props) => {
     return columnGroupLookup;
   }, [apiRef]);
   const columnGroupingApi = {
-    unstable_getColumnGroupPath: getColumnGroupPath,
-    unstable_getAllGroupDetails: getAllGroupDetails
+    getColumnGroupPath,
+    getAllGroupDetails
   };
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, columnGroupingApi, 'public');
   const handleColumnIndexChange = React.useCallback(() => {
     const unwrappedGroupingModel = (0, _gridColumnGroupsUtils.unwrapGroupingColumnModel)(props.columnGroupingModel ?? []);
     apiRef.current.setState(state => {
       const orderedFields = state.columns?.orderedFields ?? [];
-
-      // @ts-expect-error Move this logic to `Pro` package
       const pinnedColumns = state.pinnedColumns ?? {};
       const columnGroupsHeaderStructure = (0, _gridColumnGroupsUtils.getColumnGroupsHeaderStructure)(orderedFields, unwrappedGroupingModel, pinnedColumns);
       return (0, _extends2.default)({}, state, {
@@ -107,9 +105,6 @@ const useGridColumnGrouping = (apiRef, props) => {
     });
   }, [apiRef, props.columnGroupingModel]);
   const updateColumnGroupingState = React.useCallback(columnGroupingModel => {
-    if (!props.experimentalFeatures?.columnGrouping) {
-      return;
-    }
     // @ts-expect-error Move this logic to `Pro` package
     const pinnedColumns = apiRef.current.getPinnedColumns?.() ?? {};
     const columnFields = (0, _columns.gridColumnFieldsSelector)(apiRef);
@@ -128,7 +123,7 @@ const useGridColumnGrouping = (apiRef, props) => {
         }
       });
     });
-  }, [apiRef, props.experimentalFeatures?.columnGrouping]);
+  }, [apiRef]);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnIndexChange', handleColumnIndexChange);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnsChange', () => {
     updateColumnGroupingState(props.columnGroupingModel);

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

@@ -4,150 +4,75 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useGridColumnHeaders = void 0;
+exports.useGridColumnHeaders = exports.GridColumnHeaderRow = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var ReactDOM = _interopRequireWildcard(require("react-dom"));
 var _utils = require("@mui/utils");
 var _styles = require("@mui/material/styles");
-var _reselect = require("reselect");
 var _utils2 = require("../../utils");
 var _useGridPrivateApiContext = require("../../utils/useGridPrivateApiContext");
-var _useGridRootProps = require("../../utils/useGridRootProps");
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 var _GridColumnHeaderItem = require("../../../components/columnHeaders/GridColumnHeaderItem");
-var _gridColumnsUtils = require("../columns/gridColumnsUtils");
-var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
-var _useGridVirtualScroller = require("../virtualization/useGridVirtualScroller");
+var _dimensions = require("../dimensions");
 var _virtualization = require("../virtualization");
 var _GridColumnGroupHeader = require("../../../components/columnHeaders/GridColumnGroupHeader");
+var _columns = require("../columns");
+var _GridScrollbarFillerCell = require("../../../components/GridScrollbarFillerCell");
+var _gridClasses = require("../../../constants/gridClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const GridColumnHeaderRow = (0, _styles.styled)('div', {
+const SpaceFiller = (0, _styles.styled)('div')({
+  /* GridRootStyles conflict */
+  '&&': {
+    padding: 0,
+    width: 'calc(var(--DataGrid-width) - var(--DataGrid-columnsTotalWidth))'
+  }
+});
+const GridColumnHeaderRow = exports.GridColumnHeaderRow = (0, _styles.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;
-}
 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 = (0, _styles.useTheme)();
   const [dragCol, setDragCol] = React.useState('');
   const [resizeCol, setResizeCol] = React.useState('');
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const hasVirtualization = (0, _utils2.useGridSelector)(apiRef, _virtualization.gridVirtualizationColumnEnabledSelector);
-  const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const innerRef = React.useRef(null);
   const handleInnerRef = (0, _utils.unstable_useForkRef)(innerRefProp, innerRef);
-  const [renderContext, setRenderContextRaw] = React.useState(null);
-  const prevRenderContext = React.useRef(renderContext);
-  const prevScrollLeft = React.useRef(0);
-  const currentPage = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, rootProps);
-  const totalHeaderHeight = (0, _gridColumnsUtils.getTotalHeaderHeight)(apiRef, rootProps.columnHeaderHeight);
-  const headerHeight = Math.floor(rootProps.columnHeaderHeight * densityFactor);
-  const setRenderContext = React.useCallback(nextRenderContext => {
-    if (renderContext && nextRenderContext && (0, _useGridVirtualScroller.areRenderContextsEqual)(renderContext, nextRenderContext)) {
-      return;
-    }
-    setRenderContextRaw(nextRenderContext);
-  }, [renderContext]);
+  const dimensions = (0, _utils2.useGridSelector)(apiRef, _dimensions.gridDimensionsSelector);
+  const renderContext = (0, _utils2.useGridSelector)(apiRef, _virtualization.gridRenderContextColumnsSelector);
+  const visiblePinnedColumns = (0, _utils2.useGridSelector)(apiRef, _columns.gridVisiblePinnedColumnDefinitionsSelector);
   React.useEffect(() => {
     apiRef.current.columnHeadersContainerElementRef.current.scrollLeft = 0;
   }, [apiRef]);
-
-  // memoize `getFirstColumnIndexToRender`, since it's called on scroll
-  const getFirstColumnIndexToRenderRef = React.useRef((0, _reselect.defaultMemoize)(_gridColumnsUtils.getFirstColumnIndexToRender, {
-    equalityCheck: (a, b) => ['firstColumnIndex', 'minColumnIndex', 'columnBuffer'].every(key => a[key] === b[key])
-  }));
-  const updateInnerPosition = React.useCallback(nextRenderContext => {
-    const [firstRowToRender, lastRowToRender] = (0, _useGridVirtualScroller.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), []);
@@ -156,53 +81,41 @@ const useGridColumnHeaders = props => {
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnResizeStop', handleColumnResizeStop);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnHeaderDragStart', handleColumnReorderStart);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnHeaderDragEnd', handleColumnReorderStop);
-  (0, _useGridApiEventHandler.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] = (0, _useGridVirtualScroller.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 === _columns.GridPinnedColumnPosition.RIGHT;
+    const hasScrollbarFiller = visiblePinnedColumns.right.length > 0 && isPinnedRight || visiblePinnedColumns.right.length === 0 && params?.position === undefined;
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+      children: [params?.position === undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(SpaceFiller, {
+        className: _gridClasses.gridClasses.columnHeader
+      }), hasScrollbarFiller && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollbarFillerCell.GridScrollbarFillerCell, {
+        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];
@@ -214,7 +127,7 @@ const useGridColumnHeaders = props => {
       columns.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnHeaderItem.GridColumnHeaderItem, (0, _extends2.default)({}, 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,
@@ -223,11 +136,13 @@ const useGridColumnHeaders = props => {
         tabIndex: tabIndex
       }, other), colDef.field));
     }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridColumnHeaderRow, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridColumnHeaderRow, {
       role: "row",
       "aria-rowindex": headerGroupingMaxDepth + 1,
-      ownerState: rootProps,
-      children: columns
+      ownerState: {
+        params
+      },
+      children: [columns, getFiller(params)]
     });
   };
   const getColumnGroupHeaders = params => {
@@ -235,7 +150,7 @@ const useGridColumnHeaders = props => {
       return null;
     }
     const columnsToRender = getColumnsToRender(params);
-    if (columnsToRender == null || columnsToRender.renderedColumns.length === 0) {
+    if (columnsToRender.renderedColumns.length === 0) {
       return null;
     }
     const {
@@ -247,13 +162,13 @@ 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
@@ -293,15 +208,14 @@ const useGridColumnHeaders = props => {
       });
     }
     headerToRender.forEach((depthInfo, depthIndex) => {
-      columns.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(GridColumnHeaderRow, {
-        style: {
-          height: `${headerHeight}px`,
-          transform: `translateX(-${depthInfo.leftOverflow}px)`
-        },
+      columns.push( /*#__PURE__*/(0, _jsxRuntime.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,
@@ -317,34 +231,26 @@ 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 = {}) => (0, _extends2.default)({
-      style: rootStyle
-    }, other),
     getInnerProps: () => ({
       ref: handleInnerRef,
       role: 'rowgroup'
-    }),
-    headerHeight
+    })
   };
 };
 exports.useGridColumnHeaders = useGridColumnHeaders;

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

@@ -30,19 +30,25 @@ 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 (0, _extends2.default)({}, state, {
-        columnMenu: {
-          open: true,
-          field
+    const columnMenuState = (0, _columnMenuSelector.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 (0, _extends2.default)({}, state, {
+          columnMenu: {
+            open: true,
+            field
+          }
+        });
       });
-    });
-    if (shouldUpdate) {
       apiRef.current.hidePreferences();
       apiRef.current.forceUpdate();
     }
@@ -74,19 +80,18 @@ 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 (0, _extends2.default)({}, state, {
-        columnMenu: (0, _extends2.default)({}, 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 (0, _extends2.default)({}, state, {
+          columnMenu: newState
+        });
+      });
       apiRef.current.forceUpdate();
     }
   }, [apiRef, logger]);

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

@@ -2,4 +2,14 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
-});
+});
+exports.GridPinnedColumnPosition = exports.EMPTY_PINNED_COLUMN_FIELDS = void 0;
+let GridPinnedColumnPosition = exports.GridPinnedColumnPosition = /*#__PURE__*/function (GridPinnedColumnPosition) {
+  GridPinnedColumnPosition["LEFT"] = "left";
+  GridPinnedColumnPosition["RIGHT"] = "right";
+  return GridPinnedColumnPosition;
+}({});
+const EMPTY_PINNED_COLUMN_FIELDS = exports.EMPTY_PINNED_COLUMN_FIELDS = {
+  left: [],
+  right: []
+};

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

@@ -3,8 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridVisibleColumnFieldsSelector = exports.gridVisibleColumnDefinitionsSelector = exports.gridFilterableColumnLookupSelector = exports.gridFilterableColumnDefinitionsSelector = exports.gridColumnsTotalWidthSelector = exports.gridColumnsStateSelector = exports.gridColumnVisibilityModelSelector = exports.gridColumnPositionsSelector = exports.gridColumnLookupSelector = exports.gridColumnFieldsSelector = exports.gridColumnDefinitionsSelector = void 0;
+exports.gridVisiblePinnedColumnDefinitionsSelector = exports.gridVisibleColumnFieldsSelector = exports.gridVisibleColumnDefinitionsSelector = exports.gridPinnedColumnsSelector = exports.gridFilterableColumnLookupSelector = exports.gridFilterableColumnDefinitionsSelector = exports.gridColumnsTotalWidthSelector = exports.gridColumnsStateSelector = exports.gridColumnVisibilityModelSelector = exports.gridColumnPositionsSelector = exports.gridColumnLookupSelector = exports.gridColumnFieldsSelector = exports.gridColumnDefinitionsSelector = void 0;
 var _createSelector = require("../../../utils/createSelector");
+var _gridColumnsInterfaces = require("./gridColumnsInterfaces");
+var _gridCoreSelector = require("../../core/gridCoreSelector");
 /**
  * Get the columns state
  * @category Columns
@@ -49,6 +51,55 @@ const gridVisibleColumnDefinitionsSelector = exports.gridVisibleColumnDefinition
  */
 const gridVisibleColumnFieldsSelector = exports.gridVisibleColumnFieldsSelector = (0, _createSelector.createSelectorMemoized)(gridVisibleColumnDefinitionsSelector, visibleColumns => visibleColumns.map(column => column.field));
 
+/**
+ * Get the visible pinned columns model.
+ * @category Visible Columns
+ */
+const gridPinnedColumnsSelector = state => state.pinnedColumns;
+
+/**
+ * Get the visible pinned columns.
+ * @category Visible Columns
+ */
+exports.gridPinnedColumnsSelector = gridPinnedColumnsSelector;
+const gridVisiblePinnedColumnDefinitionsSelector = exports.gridVisiblePinnedColumnDefinitionsSelector = (0, _createSelector.createSelectorMemoized)(gridColumnsStateSelector, gridPinnedColumnsSelector, gridVisibleColumnFieldsSelector, _gridCoreSelector.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 _gridColumnsInterfaces.EMPTY_PINNED_COLUMN_FIELDS;
+  }
+  if (pinnedColumns.left?.length === 0 && pinnedColumns.right?.length === 0) {
+    return _gridColumnsInterfaces.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/node/hooks/features/columns/gridColumnsUtils.js

@@ -10,7 +10,7 @@ exports.createColumnsState = void 0;
 exports.getFirstColumnIndexToRender = getFirstColumnIndexToRender;
 exports.getFirstNonSpannedColumnToRender = getFirstNonSpannedColumnToRender;
 exports.getTotalHeaderHeight = getTotalHeaderHeight;
-exports.mergeColumnsState = exports.hydrateColumnsWidth = void 0;
+exports.hydrateColumnsWidth = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _colDef = require("../../../colDef");
 var _gridColumnsSelector = require("./gridColumnsSelector");
@@ -18,6 +18,8 @@ var _utils = require("../../../utils/utils");
 var _densitySelector = require("../density/densitySelector");
 var _gridColumnGroupsSelector = require("../columnGrouping/gridColumnGroupsSelector");
 const COLUMNS_DIMENSION_PROPERTIES = exports.COLUMNS_DIMENSION_PROPERTIES = ['maxWidth', 'minWidth', 'width', 'flex'];
+const COLUMN_TYPES = (0, _colDef.getGridDefaultColumnTypes)();
+
 /**
  * Computes width for flex columns.
  * Based on CSS Flexbox specification:
@@ -211,10 +213,10 @@ const applyInitialState = (columnsState, initialState) => {
   return newColumnsState;
 };
 exports.applyInitialState = applyInitialState;
-function getDefaultColTypeDef(columnTypes, type) {
-  let colDef = columnTypes[_colDef.DEFAULT_GRID_COL_TYPE_KEY];
-  if (type && columnTypes[type]) {
-    colDef = columnTypes[type];
+function getDefaultColTypeDef(type) {
+  let colDef = COLUMN_TYPES[_colDef.DEFAULT_GRID_COL_TYPE_KEY];
+  if (type && COLUMN_TYPES[type]) {
+    colDef = COLUMN_TYPES[type];
   }
   return colDef;
 }
@@ -222,7 +224,6 @@ const createColumnsState = ({
   apiRef,
   columnsToUpsert,
   initialState,
-  columnTypes,
   columnVisibilityModel = (0, _gridColumnsSelector.gridColumnVisibilityModelSelector)(apiRef),
   keepOnlyColumnsToUpsert = false
 }) => {
@@ -258,7 +259,7 @@ const createColumnsState = ({
     columnsToKeep[field] = true;
     let existingState = columnsState.lookup[field];
     if (existingState == null) {
-      existingState = (0, _extends2.default)({}, getDefaultColTypeDef(columnTypes, newColumn.type), {
+      existingState = (0, _extends2.default)({}, getDefaultColTypeDef(newColumn.type), {
         field,
         hasBeenResized: false
       });
@@ -269,7 +270,7 @@ 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 = (0, _extends2.default)({}, getDefaultColTypeDef(columnTypes, newColumn.type), {
+      existingState = (0, _extends2.default)({}, getDefaultColTypeDef(newColumn.type), {
         field
       });
     }
@@ -295,13 +296,9 @@ 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);
 };
 exports.createColumnsState = createColumnsState;
-const mergeColumnsState = columnsState => state => (0, _extends2.default)({}, state, {
-  columns: columnsState
-});
-exports.mergeColumnsState = mergeColumnsState;
 function getFirstNonSpannedColumnToRender({
   firstColumnToRender,
   apiRef,