@mui/x-data-grid-pro 5.4.0 → 5.6.0

package/modern/DataGridPro/index.js

@@ -0,0 +1,2 @@
+export * from './DataGridPro';
+export { DATA_GRID_PRO_PROPS_DEFAULT_VALUES } from './useDataGridProProps';

package/modern/DataGridPro/useDataGridProComponent.js

@@ -0,0 +1,72 @@
+import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboard, useGridKeyboardNavigation, useGridPagination, pageStateInitializer, pageSizeStateInitializer, useGridPreferencesPanel, useGridEditing, useGridRows, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, useGridDimensions, useGridStatePersistence, useGridSelectionPreProcessors } from '@mui/x-data-grid/internals';
+// Pro-only features
+import { useGridInfiniteLoader } from '../hooks/features/infiniteLoader/useGridInfiniteLoader';
+import { useGridColumnReorder } from '../hooks/features/columnReorder/useGridColumnReorder';
+import { useGridColumnResize } from '../hooks/features/columnResize/useGridColumnResize';
+import { useGridTreeData } from '../hooks/features/treeData/useGridTreeData';
+import { useGridTreeDataPreProcessors } from '../hooks/features/treeData/useGridTreeDataPreProcessors';
+import { useGridRowGrouping, rowGroupingStateInitializer } from '../hooks/features/rowGrouping/useGridRowGrouping';
+import { useGridRowGroupingPreProcessors } from '../hooks/features/rowGrouping/useGridRowGroupingPreProcessors';
+import { useGridColumnPinning, columnPinningStateInitializer } from '../hooks/features/columnPinning/useGridColumnPinning';
+import { useGridColumnPinningPreProcessors } from '../hooks/features/columnPinning/useGridColumnPinningPreProcessors';
+import { useGridDetailPanel } from '../hooks/features/detailPanel/useGridDetailPanel';
+import { useGridDetailPanelCache } from '../hooks/features/detailPanel/useGridDetailPanelCache';
+import { useGridDetailPanelPreProcessors } from '../hooks/features/detailPanel/useGridDetailPanelPreProcessors';
+export const useDataGridProComponent = (inputApiRef, props) => {
+  const apiRef = useGridInitialization(inputApiRef, props);
+  /**
+   * Register all pre-processors called during state initialization here.
+   */
+
+  useGridSelectionPreProcessors(apiRef, props);
+  useGridRowGroupingPreProcessors(apiRef, props);
+  useGridTreeDataPreProcessors(apiRef, props);
+  useGridDetailPanelPreProcessors(apiRef, props);
+  useGridColumnPinningPreProcessors(apiRef, props); // Must be the last because it changes the order of the columns.
+
+  /**
+   * Register all state initializers here.
+   */
+
+  useGridInitializeState(filterStateInitializer, apiRef, props);
+  useGridInitializeState(pageSizeStateInitializer, apiRef, props);
+  useGridInitializeState(pageStateInitializer, apiRef, props);
+  useGridInitializeState(sortingStateInitializer, apiRef, props);
+  useGridInitializeState(columnPinningStateInitializer, apiRef, props);
+  useGridInitializeState(rowGroupingStateInitializer, apiRef, props);
+  useGridInitializeState(columnsStateInitializer, apiRef, props);
+  useGridRowGrouping(apiRef, props); // FIXME Needs to be called before the rows state initialization because it registers a rows group builder
+
+  useGridTreeData(apiRef, props); // FIXME Needs to be called before the rows state initialization because it registers a rows group builder
+
+  useGridInitializeState(rowsStateInitializer, apiRef, props);
+  useGridSelection(apiRef, props);
+  useGridDetailPanel(apiRef, props);
+  useGridColumnPinning(apiRef, props);
+  useGridColumns(apiRef, props);
+  useGridRows(apiRef, props);
+  useGridParamsApi(apiRef);
+  useGridDetailPanelCache(apiRef, props);
+  useGridEditing(apiRef, props);
+  useGridFocus(apiRef, props);
+  useGridSorting(apiRef, props);
+  useGridPreferencesPanel(apiRef, props);
+  useGridFilter(apiRef, props);
+  useGridDensity(apiRef, props);
+  useGridColumnReorder(apiRef, props);
+  useGridColumnResize(apiRef, props);
+  useGridPagination(apiRef, props);
+  useGridRowsMeta(apiRef, props);
+  useGridScroll(apiRef, props);
+  useGridInfiniteLoader(apiRef, props);
+  useGridColumnMenu(apiRef);
+  useGridKeyboard(apiRef);
+  useGridKeyboardNavigation(apiRef, props);
+  useGridCsvExport(apiRef);
+  useGridPrintExport(apiRef, props);
+  useGridClipboard(apiRef);
+  useGridDimensions(apiRef, props);
+  useGridEvents(apiRef, props);
+  useGridStatePersistence(apiRef);
+  return apiRef;
+};

package/modern/DataGridPro/useDataGridProProps.js

@@ -0,0 +1,45 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useThemeProps } from '@mui/material/styles';
+import { DATA_GRID_DEFAULT_SLOTS_COMPONENTS, GRID_DEFAULT_LOCALE_TEXT, DATA_GRID_PROPS_DEFAULT_VALUES } from '@mui/x-data-grid';
+
+/**
+ * The default values of `DataGridProPropsWithDefaultValue` to inject in the props of DataGridPro.
+ */
+export const DATA_GRID_PRO_PROPS_DEFAULT_VALUES = _extends({}, DATA_GRID_PROPS_DEFAULT_VALUES, {
+  scrollEndThreshold: 80,
+  treeData: false,
+  defaultGroupingExpansionDepth: 0,
+  disableColumnPinning: false,
+  disableRowGrouping: false,
+  disableChildrenFiltering: false,
+  disableChildrenSorting: false,
+  rowGroupingColumnMode: 'single',
+  getDetailPanelHeight: () => 500
+});
+export const useDataGridProProps = inProps => {
+  const themedProps = useThemeProps({
+    props: inProps,
+    name: 'MuiDataGrid'
+  });
+  const localeText = React.useMemo(() => _extends({}, GRID_DEFAULT_LOCALE_TEXT, themedProps.localeText), [themedProps.localeText]);
+  const components = React.useMemo(() => {
+    const overrides = themedProps.components;
+
+    if (!overrides) {
+      return _extends({}, DATA_GRID_DEFAULT_SLOTS_COMPONENTS);
+    }
+
+    const mergedComponents = {};
+    Object.keys(DATA_GRID_DEFAULT_SLOTS_COMPONENTS).forEach(key => {
+      mergedComponents[key] = overrides[key] === undefined ? DATA_GRID_DEFAULT_SLOTS_COMPONENTS[key] : overrides[key];
+    });
+    return mergedComponents;
+  }, [themedProps.components]);
+  return React.useMemo(() => _extends({}, DATA_GRID_PRO_PROPS_DEFAULT_VALUES, themedProps, {
+    disableRowGrouping: themedProps.disableRowGrouping || !themedProps.experimentalFeatures?.rowGrouping,
+    localeText,
+    components,
+    signature: 'DataGridPro'
+  }), [themedProps, localeText, components]);
+};

package/modern/components/DataGridProColumnHeaders.js

@@ -0,0 +1,163 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["style", "className", "innerRef"];
+import * as React from 'react';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { styled, alpha } from '@mui/material/styles';
+import { getDataGridUtilityClass, gridClasses, useGridSelector, useGridApiEventHandler, gridVisibleColumnFieldsSelector, GridEvents, GridColumnHeaderSeparatorSides } from '@mui/x-data-grid';
+import { GridColumnHeaders, GridColumnHeadersInner, useGridColumnHeaders } from '@mui/x-data-grid/internals';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { gridPinnedColumnsSelector, GridPinnedPosition } from '../hooks/features/columnPinning';
+import { filterColumns } from './DataGridProVirtualScroller';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const useUtilityClasses = ownerState => {
+  const {
+    leftPinnedColumns,
+    rightPinnedColumns,
+    classes
+  } = ownerState;
+  const slots = {
+    leftPinnedColumns: ['pinnedColumnHeaders', leftPinnedColumns && leftPinnedColumns.length > 0 && `pinnedColumnHeaders--left`],
+    rightPinnedColumns: ['pinnedColumnHeaders', rightPinnedColumns && rightPinnedColumns.length > 0 && `pinnedColumnHeaders--right`]
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+// Inspired by https://github.com/material-components/material-components-ios/blob/bca36107405594d5b7b16265a5b0ed698f85a5ee/components/Elevation/src/UIColor%2BMaterialElevation.m#L61
+const getOverlayAlpha = elevation => {
+  let alphaValue;
+
+  if (elevation < 1) {
+    alphaValue = 5.11916 * elevation ** 2;
+  } else {
+    alphaValue = 4.5 * Math.log(elevation + 1) + 2;
+  }
+
+  return alphaValue / 100;
+};
+
+const GridColumnHeadersPinnedColumnHeaders = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'PinnedColumnHeaders',
+  overridesResolver: (props, styles) => [{
+    [`&.${gridClasses['pinnedColumnHeaders--left']}`]: styles['pinnedColumnHeaders--left']
+  }, {
+    [`&.${gridClasses['pinnedColumnHeaders--right']}`]: styles['pinnedColumnHeaders--right']
+  }, styles.pinnedColumnHeaders]
+})(({
+  theme,
+  ownerState
+}) => _extends({
+  position: 'absolute',
+  overflow: 'hidden',
+  height: '100%',
+  zIndex: 1,
+  display: 'flex',
+  boxShadow: theme.shadows[2],
+  backgroundColor: theme.palette.background.default
+}, theme.palette.mode === 'dark' && {
+  backgroundImage: `linear-gradient(${alpha('#fff', getOverlayAlpha(2))}, ${alpha('#fff', getOverlayAlpha(2))})`
+}, ownerState.side === GridPinnedPosition.left && {
+  left: 0
+}, ownerState.side === GridPinnedPosition.right && {
+  right: 0
+}));
+export const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function DataGridProColumnHeaders(props, ref) {
+  const {
+    className,
+    innerRef
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const rootProps = useGridRootProps();
+  const apiRef = useGridApiContext();
+  const visibleColumnFields = useGridSelector(apiRef, gridVisibleColumnFieldsSelector);
+  const [scrollbarSize, setScrollbarSize] = React.useState(0);
+  const handleContentSizeChange = React.useCallback(() => {
+    if (!apiRef.current.windowRef?.current) {
+      return;
+    } // TODO expose scrollbar size on getRootDimensions
+
+
+    const newScrollbarSize = apiRef.current.windowRef.current.offsetWidth - apiRef.current.windowRef.current.clientWidth;
+    setScrollbarSize(newScrollbarSize);
+  }, [apiRef]);
+  useGridApiEventHandler(apiRef, GridEvents.virtualScrollerContentSizeChange, handleContentSizeChange);
+  const pinnedColumns = useGridSelector(apiRef, gridPinnedColumnsSelector);
+  const [leftPinnedColumns, rightPinnedColumns] = filterColumns(pinnedColumns, visibleColumnFields);
+  const {
+    isDragging,
+    renderContext,
+    updateInnerPosition,
+    getRootProps,
+    getInnerProps,
+    getColumns
+  } = useGridColumnHeaders({
+    innerRef,
+    minColumnIndex: leftPinnedColumns.length
+  });
+  const ownerState = {
+    leftPinnedColumns,
+    rightPinnedColumns,
+    classes: rootProps.classes
+  };
+  const classes = useUtilityClasses(ownerState);
+  React.useEffect(() => {
+    if (renderContext) {
+      updateInnerPosition(renderContext);
+    }
+  }, [renderContext, updateInnerPosition]);
+  const leftRenderContext = renderContext && leftPinnedColumns.length ? _extends({}, renderContext, {
+    firstColumnIndex: 0,
+    lastColumnIndex: leftPinnedColumns.length
+  }) : null;
+  const rightRenderContext = renderContext && rightPinnedColumns.length ? _extends({}, renderContext, {
+    firstColumnIndex: visibleColumnFields.length - rightPinnedColumns.length,
+    lastColumnIndex: visibleColumnFields.length
+  }) : null;
+  return /*#__PURE__*/_jsxs(GridColumnHeaders, _extends({
+    ref: ref,
+    className: className
+  }, getRootProps(other), {
+    children: [leftRenderContext && /*#__PURE__*/_jsx(GridColumnHeadersPinnedColumnHeaders, {
+      className: classes.leftPinnedColumns,
+      ownerState: {
+        side: GridPinnedPosition.left
+      },
+      children: getColumns({
+        renderContext: leftRenderContext,
+        minFirstColumn: leftRenderContext.firstColumnIndex,
+        maxLastColumn: leftRenderContext.lastColumnIndex
+      }, {
+        disableReorder: true
+      })
+    }), rightRenderContext && /*#__PURE__*/_jsx(GridColumnHeadersPinnedColumnHeaders, {
+      ownerState: {
+        side: GridPinnedPosition.right
+      },
+      className: classes.rightPinnedColumns,
+      style: {
+        paddingRight: scrollbarSize
+      },
+      children: getColumns({
+        renderContext: rightRenderContext,
+        minFirstColumn: rightRenderContext.firstColumnIndex,
+        maxLastColumn: rightRenderContext.lastColumnIndex
+      }, {
+        disableReorder: true,
+        separatorSide: GridColumnHeaderSeparatorSides.Left
+      })
+    }), /*#__PURE__*/_jsx(GridColumnHeadersInner, _extends({
+      isDragging: isDragging
+    }, getInnerProps(), {
+      children: getColumns({
+        renderContext,
+        minFirstColumn: leftPinnedColumns.length,
+        maxLastColumn: visibleColumnFields.length - rightPinnedColumns.length
+      })
+    }))]
+  }));
+});

package/modern/components/DataGridProVirtualScroller.js

@@ -0,0 +1,279 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["className", "disableVirtualization"];
+import * as React from 'react';
+import { styled, alpha } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { useGridSelector, getDataGridUtilityClass, gridClasses, gridVisibleColumnFieldsSelector, gridRowsMetaSelector, useGridApiEventHandler, GridEvents } from '@mui/x-data-grid';
+import { useCurrentPageRows, GridVirtualScroller, GridVirtualScrollerContent, GridVirtualScrollerRenderZone, useGridVirtualScroller } from '@mui/x-data-grid/internals';
+import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { gridPinnedColumnsSelector, GridPinnedPosition } from '../hooks/features/columnPinning';
+import { gridDetailPanelExpandedRowsContentCacheSelector, gridDetailPanelExpandedRowsHeightCacheSelector, gridDetailPanelExpandedRowIdsSelector } from '../hooks/features/detailPanel';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export const filterColumns = (pinnedColumns, columns) => {
+  if (!Array.isArray(pinnedColumns.left) && !Array.isArray(pinnedColumns.right)) {
+    return [[], []];
+  }
+
+  if (pinnedColumns.left?.length === 0 && pinnedColumns.right?.length === 0) {
+    return [[], []];
+  }
+
+  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);
+  return [leftPinnedColumns, rightPinnedColumns];
+};
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    leftPinnedColumns,
+    rightPinnedColumns
+  } = ownerState;
+  const slots = {
+    leftPinnedColumns: ['pinnedColumns', leftPinnedColumns && leftPinnedColumns.length > 0 && 'pinnedColumns--left'],
+    rightPinnedColumns: ['pinnedColumns', rightPinnedColumns && rightPinnedColumns.length > 0 && 'pinnedColumns--right'],
+    detailPanels: ['detailPanels'],
+    detailPanel: ['detailPanel']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+// Inspired by https://github.com/material-components/material-components-ios/blob/bca36107405594d5b7b16265a5b0ed698f85a5ee/components/Elevation/src/UIColor%2BMaterialElevation.m#L61
+const getOverlayAlpha = elevation => {
+  let alphaValue;
+
+  if (elevation < 1) {
+    alphaValue = 5.11916 * elevation ** 2;
+  } else {
+    alphaValue = 4.5 * Math.log(elevation + 1) + 2;
+  }
+
+  return alphaValue / 100;
+};
+
+const VirtualScrollerDetailPanels = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'DetailPanels',
+  overridesResolver: (props, styles) => styles.detailPanels
+})({});
+const VirtualScrollerDetailPanel = styled(Box, {
+  name: 'MuiDataGrid',
+  slot: 'DetailPanel',
+  overridesResolver: (props, styles) => styles.detailPanel
+})(({
+  theme
+}) => ({
+  zIndex: 2,
+  width: '100%',
+  position: 'absolute',
+  backgroundColor: theme.palette.background.default
+}));
+const VirtualScrollerPinnedColumns = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'PinnedColumns',
+  overridesResolver: (props, styles) => [{
+    [`&.${gridClasses['pinnedColumns--left']}`]: styles['pinnedColumns--left']
+  }, {
+    [`&.${gridClasses['pinnedColumns--right']}`]: styles['pinnedColumns--right']
+  }, styles.pinnedColumns]
+})(({
+  theme,
+  ownerState
+}) => _extends({
+  position: 'sticky',
+  overflow: 'hidden',
+  zIndex: 1,
+  boxShadow: theme.shadows[2],
+  backgroundColor: theme.palette.background.default
+}, theme.palette.mode === 'dark' && {
+  backgroundImage: `linear-gradient(${alpha('#fff', getOverlayAlpha(2))}, ${alpha('#fff', getOverlayAlpha(2))})`
+}, ownerState.side === GridPinnedPosition.left && {
+  left: 0,
+  float: 'left'
+}, ownerState.side === GridPinnedPosition.right && {
+  right: 0,
+  float: 'right'
+}));
+const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGridProVirtualScroller(props, ref) {
+  const other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const currentPage = useCurrentPageRows(apiRef, rootProps);
+  const visibleColumnFields = useGridSelector(apiRef, gridVisibleColumnFieldsSelector);
+  const expandedRowIds = useGridSelector(apiRef, gridDetailPanelExpandedRowIdsSelector);
+  const detailPanelsContent = useGridSelector(apiRef, gridDetailPanelExpandedRowsContentCacheSelector);
+  const detailPanelsHeights = useGridSelector(apiRef, gridDetailPanelExpandedRowsHeightCacheSelector);
+  const leftColumns = React.useRef(null);
+  const rightColumns = React.useRef(null);
+  const handleRenderZonePositioning = React.useCallback(({
+    top
+  }) => {
+    if (leftColumns.current) {
+      leftColumns.current.style.transform = `translate3d(0px, ${top}px, 0px)`;
+    }
+
+    if (rightColumns.current) {
+      rightColumns.current.style.transform = `translate3d(0px, ${top}px, 0px)`;
+    }
+  }, []);
+
+  const getRowProps = id => {
+    if (!expandedRowIds.includes(id)) {
+      return null;
+    }
+
+    const height = detailPanelsHeights[id];
+    return {
+      style: {
+        marginBottom: height
+      }
+    };
+  };
+
+  const pinnedColumns = useGridSelector(apiRef, gridPinnedColumnsSelector);
+  const [leftPinnedColumns, rightPinnedColumns] = filterColumns(pinnedColumns, visibleColumnFields);
+  const ownerState = {
+    classes: rootProps.classes,
+    leftPinnedColumns,
+    rightPinnedColumns
+  };
+  const classes = useUtilityClasses(ownerState);
+  const {
+    renderContext,
+    getRows,
+    getRootProps,
+    getContentProps,
+    getRenderZoneProps,
+    updateRenderZonePosition
+  } = useGridVirtualScroller(_extends({
+    ref,
+    renderZoneMinColumnIndex: leftPinnedColumns.length,
+    renderZoneMaxColumnIndex: visibleColumnFields.length - rightPinnedColumns.length,
+    onRenderZonePositioning: handleRenderZonePositioning,
+    getRowProps
+  }, props));
+  const refreshRenderZonePosition = React.useCallback(() => {
+    if (renderContext) {
+      updateRenderZonePosition(renderContext);
+    }
+  }, [renderContext, updateRenderZonePosition]);
+  useGridApiEventHandler(apiRef, GridEvents.columnWidthChange, refreshRenderZonePosition);
+  useGridApiEventHandler(apiRef, GridEvents.columnOrderChange, refreshRenderZonePosition);
+  React.useEffect(() => {
+    refreshRenderZonePosition();
+  }, [refreshRenderZonePosition]);
+  const leftRenderContext = renderContext && leftPinnedColumns.length > 0 ? _extends({}, renderContext, {
+    firstColumnIndex: 0,
+    lastColumnIndex: leftPinnedColumns.length
+  }) : null;
+  const rightRenderContext = renderContext && rightPinnedColumns.length > 0 ? _extends({}, renderContext, {
+    firstColumnIndex: visibleColumnFields.length - rightPinnedColumns.length,
+    lastColumnIndex: visibleColumnFields.length
+  }) : null;
+  const contentProps = getContentProps();
+  const pinnedColumnsStyle = {
+    minHeight: contentProps.style.minHeight
+  };
+  const rowsLookup = React.useMemo(() => {
+    if (rootProps.getDetailPanelContent == null) {
+      return null;
+    }
+
+    return currentPage.rows.reduce((acc, {
+      id
+    }, index) => {
+      acc[id] = index;
+      return acc;
+    }, {});
+  }, [currentPage.rows, rootProps.getDetailPanelContent]);
+
+  const getDetailPanels = () => {
+    const panels = [];
+
+    if (rootProps.getDetailPanelContent == null) {
+      return panels;
+    }
+
+    const rowsMeta = gridRowsMetaSelector(apiRef.current.state);
+    const uniqueExpandedRowIds = Array.from(new Set([...expandedRowIds]).values());
+
+    for (let i = 0; i < uniqueExpandedRowIds.length; i += 1) {
+      const id = uniqueExpandedRowIds[i];
+      const content = detailPanelsContent[id]; // Check if the id exists in the current page
+
+      const exists = rowsLookup[id] !== undefined;
+
+      if ( /*#__PURE__*/React.isValidElement(content) && exists) {
+        const height = detailPanelsHeights[id];
+        const rowIndex = rowsLookup[id];
+        const top = rowsMeta.positions[rowIndex] + apiRef.current.unstable_getRowHeight(id);
+        panels.push( /*#__PURE__*/_jsx(VirtualScrollerDetailPanel, {
+          style: {
+            top,
+            height
+          },
+          className: classes.detailPanel,
+          children: content
+        }, i));
+      }
+    }
+
+    return panels;
+  };
+
+  const detailPanels = getDetailPanels();
+  return /*#__PURE__*/_jsx(GridVirtualScroller, _extends({}, getRootProps(other), {
+    children: /*#__PURE__*/_jsxs(GridVirtualScrollerContent, _extends({}, contentProps, {
+      children: [leftRenderContext && /*#__PURE__*/_jsx(VirtualScrollerPinnedColumns, {
+        ref: leftColumns,
+        className: classes.leftPinnedColumns,
+        ownerState: {
+          side: GridPinnedPosition.left
+        },
+        style: pinnedColumnsStyle,
+        children: getRows({
+          renderContext: leftRenderContext,
+          minFirstColumn: leftRenderContext.firstColumnIndex,
+          maxLastColumn: leftRenderContext.lastColumnIndex,
+          availableSpace: 0
+        })
+      }), rightRenderContext && /*#__PURE__*/_jsx(VirtualScrollerPinnedColumns, {
+        ref: rightColumns,
+        ownerState: {
+          side: GridPinnedPosition.right
+        },
+        className: classes.rightPinnedColumns,
+        style: pinnedColumnsStyle,
+        children: getRows({
+          renderContext: rightRenderContext,
+          minFirstColumn: rightRenderContext.firstColumnIndex,
+          maxLastColumn: rightRenderContext.lastColumnIndex,
+          availableSpace: 0
+        })
+      }), /*#__PURE__*/_jsx(GridVirtualScrollerRenderZone, _extends({}, getRenderZoneProps(), {
+        children: getRows({
+          renderContext
+        })
+      })), detailPanels.length > 0 && /*#__PURE__*/_jsx(VirtualScrollerDetailPanels, {
+        className: classes.detailPanels,
+        children: detailPanels
+      })]
+    }))
+  }));
+});
+export { DataGridProVirtualScroller };

package/modern/components/GridColumnPinningMenuItems.js

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import MenuItem from '@mui/material/MenuItem';
+import { GridPinnedPosition } from '../hooks/features/columnPinning';
+import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const GridColumnPinningMenuItems = props => {
+  const {
+    column,
+    onClick
+  } = props;
+  const apiRef = useGridApiContext();
+
+  const pinColumn = side => event => {
+    apiRef.current.pinColumn(column.field, side);
+
+    if (onClick) {
+      onClick(event);
+    }
+  };
+
+  const unpinColumn = event => {
+    apiRef.current.unpinColumn(column.field);
+
+    if (onClick) {
+      onClick(event);
+    }
+  };
+
+  if (!column) {
+    return null;
+  }
+
+  const side = apiRef.current.isColumnPinned(column.field);
+
+  if (side) {
+    const otherSide = side === GridPinnedPosition.right ? GridPinnedPosition.left : GridPinnedPosition.right;
+    const label = otherSide === GridPinnedPosition.right ? 'pinToRight' : 'pinToLeft';
+    return /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [/*#__PURE__*/_jsx(MenuItem, {
+        onClick: pinColumn(otherSide),
+        children: apiRef.current.getLocaleText(label)
+      }), /*#__PURE__*/_jsx(MenuItem, {
+        onClick: unpinColumn,
+        children: apiRef.current.getLocaleText('unpin')
+      })]
+    });
+  }
+
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsx(MenuItem, {
+      onClick: pinColumn(GridPinnedPosition.left),
+      children: apiRef.current.getLocaleText('pinToLeft')
+    }), /*#__PURE__*/_jsx(MenuItem, {
+      onClick: pinColumn(GridPinnedPosition.right),
+      children: apiRef.current.getLocaleText('pinToRight')
+    })]
+  });
+};
+
+process.env.NODE_ENV !== "production" ? GridColumnPinningMenuItems.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  column: PropTypes.object,
+  onClick: PropTypes.func
+} : void 0;
+export { GridColumnPinningMenuItems };