@mui/x-data-grid-pro 5.5.0 → 5.6.1

package/legacy/DataGridPro/index.js

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

package/legacy/DataGridPro/useDataGridProComponent.js

@@ -0,0 +1,82 @@
+import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboard, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing, useGridRows, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, useGridDimensions, useGridStatePersistence, useGridSelectionPreProcessors, columnMenuStateInitializer, densityStateInitializer, editingStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, selectionStateInitializer } from '@mui/x-data-grid/internals';
+// Pro-only features
+import { useGridInfiniteLoader } from '../hooks/features/infiniteLoader/useGridInfiniteLoader';
+import { useGridColumnReorder, columnReorderStateInitializer } from '../hooks/features/columnReorder/useGridColumnReorder';
+import { useGridColumnResize, columnResizeStateInitializer } 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, detailPanelStateInitializer } from '../hooks/features/detailPanel/useGridDetailPanel';
+import { useGridDetailPanelCache } from '../hooks/features/detailPanel/useGridDetailPanelCache';
+import { useGridDetailPanelPreProcessors } from '../hooks/features/detailPanel/useGridDetailPanelPreProcessors';
+export var useDataGridProComponent = function useDataGridProComponent(inputApiRef, props) {
+  var 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(selectionStateInitializer, apiRef, props);
+  useGridInitializeState(detailPanelStateInitializer, apiRef, props);
+  useGridInitializeState(columnPinningStateInitializer, apiRef, props);
+  useGridInitializeState(rowGroupingStateInitializer, apiRef, props); // FIXME Call in the same relative position that useGridRowGrouping is called
+
+  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);
+  useGridInitializeState(editingStateInitializer, apiRef, props);
+  useGridInitializeState(focusStateInitializer, apiRef, props);
+  useGridInitializeState(sortingStateInitializer, apiRef, props);
+  useGridInitializeState(preferencePanelStateInitializer, apiRef, props);
+  useGridInitializeState(filterStateInitializer, apiRef, props);
+  useGridInitializeState(densityStateInitializer, apiRef, props);
+  useGridInitializeState(columnReorderStateInitializer, apiRef, props);
+  useGridInitializeState(columnResizeStateInitializer, apiRef, props);
+  useGridInitializeState(paginationStateInitializer, apiRef, props);
+  useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
+  useGridInitializeState(columnMenuStateInitializer, 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);
+  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/legacy/DataGridPro/useDataGridProProps.js

@@ -0,0 +1,58 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+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 var 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: function getDetailPanelHeight() {
+    return 500;
+  }
+});
+export var useDataGridProProps = function useDataGridProProps(inProps) {
+  var themedProps = useThemeProps({
+    props: inProps,
+    name: 'MuiDataGrid'
+  });
+  var localeText = React.useMemo(function () {
+    return _extends({}, GRID_DEFAULT_LOCALE_TEXT, themedProps.localeText);
+  }, [themedProps.localeText]);
+  var components = React.useMemo(function () {
+    var overrides = themedProps.components;
+
+    if (!overrides) {
+      return _extends({}, DATA_GRID_DEFAULT_SLOTS_COMPONENTS);
+    }
+
+    var mergedComponents = {};
+    Object.entries(DATA_GRID_DEFAULT_SLOTS_COMPONENTS).forEach(function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 2),
+          key = _ref2[0],
+          defaultComponent = _ref2[1];
+
+      mergedComponents[key] = overrides[key] === undefined ? defaultComponent : overrides[key];
+    });
+    return mergedComponents;
+  }, [themedProps.components]);
+  return React.useMemo(function () {
+    var _themedProps$experime;
+
+    return _extends({}, DATA_GRID_PRO_PROPS_DEFAULT_VALUES, themedProps, {
+      disableRowGrouping: themedProps.disableRowGrouping || !((_themedProps$experime = themedProps.experimentalFeatures) != null && _themedProps$experime.rowGrouping),
+      localeText: localeText,
+      components: components,
+      signature: 'DataGridPro'
+    });
+  }, [themedProps, localeText, components]);
+};

package/legacy/components/DataGridProColumnHeaders.js

@@ -0,0 +1,173 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+var _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";
+
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var leftPinnedColumns = ownerState.leftPinnedColumns,
+      rightPinnedColumns = ownerState.rightPinnedColumns,
+      classes = ownerState.classes;
+  var 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
+var getOverlayAlpha = function getOverlayAlpha(elevation) {
+  var alphaValue;
+
+  if (elevation < 1) {
+    alphaValue = 5.11916 * Math.pow(elevation, 2);
+  } else {
+    alphaValue = 4.5 * Math.log(elevation + 1) + 2;
+  }
+
+  return alphaValue / 100;
+};
+
+var GridColumnHeadersPinnedColumnHeaders = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'PinnedColumnHeaders',
+  overridesResolver: function overridesResolver(props, styles) {
+    return [_defineProperty({}, "&.".concat(gridClasses['pinnedColumnHeaders--left']), styles['pinnedColumnHeaders--left']), _defineProperty({}, "&.".concat(gridClasses['pinnedColumnHeaders--right']), styles['pinnedColumnHeaders--right']), styles.pinnedColumnHeaders];
+  }
+})(function (_ref3) {
+  var theme = _ref3.theme,
+      ownerState = _ref3.ownerState;
+  return _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(".concat(alpha('#fff', getOverlayAlpha(2)), ", ").concat(alpha('#fff', getOverlayAlpha(2)), ")")
+  }, ownerState.side === GridPinnedPosition.left && {
+    left: 0
+  }, ownerState.side === GridPinnedPosition.right && {
+    right: 0
+  });
+});
+export var DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function DataGridProColumnHeaders(props, ref) {
+  var style = props.style,
+      className = props.className,
+      innerRef = props.innerRef,
+      other = _objectWithoutProperties(props, _excluded);
+
+  var rootProps = useGridRootProps();
+  var apiRef = useGridApiContext();
+  var visibleColumnFields = useGridSelector(apiRef, gridVisibleColumnFieldsSelector);
+
+  var _React$useState = React.useState(0),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      scrollbarSize = _React$useState2[0],
+      setScrollbarSize = _React$useState2[1];
+
+  var handleContentSizeChange = React.useCallback(function () {
+    var _apiRef$current$windo;
+
+    if (!((_apiRef$current$windo = apiRef.current.windowRef) != null && _apiRef$current$windo.current)) {
+      return;
+    } // TODO expose scrollbar size on getRootDimensions
+
+
+    var newScrollbarSize = apiRef.current.windowRef.current.offsetWidth - apiRef.current.windowRef.current.clientWidth;
+    setScrollbarSize(newScrollbarSize);
+  }, [apiRef]);
+  useGridApiEventHandler(apiRef, GridEvents.virtualScrollerContentSizeChange, handleContentSizeChange);
+  var pinnedColumns = useGridSelector(apiRef, gridPinnedColumnsSelector);
+
+  var _filterColumns = filterColumns(pinnedColumns, visibleColumnFields),
+      _filterColumns2 = _slicedToArray(_filterColumns, 2),
+      leftPinnedColumns = _filterColumns2[0],
+      rightPinnedColumns = _filterColumns2[1];
+
+  var _useGridColumnHeaders = useGridColumnHeaders({
+    innerRef: innerRef,
+    minColumnIndex: leftPinnedColumns.length
+  }),
+      isDragging = _useGridColumnHeaders.isDragging,
+      renderContext = _useGridColumnHeaders.renderContext,
+      updateInnerPosition = _useGridColumnHeaders.updateInnerPosition,
+      getRootProps = _useGridColumnHeaders.getRootProps,
+      getInnerProps = _useGridColumnHeaders.getInnerProps,
+      getColumns = _useGridColumnHeaders.getColumns;
+
+  var ownerState = {
+    leftPinnedColumns: leftPinnedColumns,
+    rightPinnedColumns: rightPinnedColumns,
+    classes: rootProps.classes
+  };
+  var classes = useUtilityClasses(ownerState);
+  React.useEffect(function () {
+    if (renderContext) {
+      updateInnerPosition(renderContext);
+    }
+  }, [renderContext, updateInnerPosition]);
+  var leftRenderContext = renderContext && leftPinnedColumns.length ? _extends({}, renderContext, {
+    firstColumnIndex: 0,
+    lastColumnIndex: leftPinnedColumns.length
+  }) : null;
+  var 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: renderContext,
+        minFirstColumn: leftPinnedColumns.length,
+        maxLastColumn: visibleColumnFields.length - rightPinnedColumns.length
+      })
+    }))]
+  }));
+});

package/legacy/components/DataGridProVirtualScroller.js

@@ -0,0 +1,287 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+var _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 { 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 var filterColumns = function filterColumns(pinnedColumns, columns) {
+  var _pinnedColumns$left, _pinnedColumns$right;
+
+  if (!Array.isArray(pinnedColumns.left) && !Array.isArray(pinnedColumns.right)) {
+    return [[], []];
+  }
+
+  if (((_pinnedColumns$left = pinnedColumns.left) == null ? void 0 : _pinnedColumns$left.length) === 0 && ((_pinnedColumns$right = pinnedColumns.right) == null ? void 0 : _pinnedColumns$right.length) === 0) {
+    return [[], []];
+  }
+
+  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);
+  return [leftPinnedColumns, rightPinnedColumns];
+};
+
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes,
+      leftPinnedColumns = ownerState.leftPinnedColumns,
+      rightPinnedColumns = ownerState.rightPinnedColumns;
+  var 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
+var getOverlayAlpha = function getOverlayAlpha(elevation) {
+  var alphaValue;
+
+  if (elevation < 1) {
+    alphaValue = 5.11916 * Math.pow(elevation, 2);
+  } else {
+    alphaValue = 4.5 * Math.log(elevation + 1) + 2;
+  }
+
+  return alphaValue / 100;
+};
+
+var VirtualScrollerDetailPanels = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'DetailPanels',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.detailPanels;
+  }
+})({});
+var VirtualScrollerDetailPanel = styled(Box, {
+  name: 'MuiDataGrid',
+  slot: 'DetailPanel',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.detailPanel;
+  }
+})(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    zIndex: 2,
+    width: '100%',
+    position: 'absolute',
+    backgroundColor: theme.palette.background.default
+  };
+});
+var VirtualScrollerPinnedColumns = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'PinnedColumns',
+  overridesResolver: function overridesResolver(props, styles) {
+    return [_defineProperty({}, "&.".concat(gridClasses['pinnedColumns--left']), styles['pinnedColumns--left']), _defineProperty({}, "&.".concat(gridClasses['pinnedColumns--right']), styles['pinnedColumns--right']), styles.pinnedColumns];
+  }
+})(function (_ref4) {
+  var theme = _ref4.theme,
+      ownerState = _ref4.ownerState;
+  return _extends({
+    position: 'sticky',
+    overflow: 'hidden',
+    zIndex: 1,
+    boxShadow: theme.shadows[2],
+    backgroundColor: theme.palette.background.default
+  }, theme.palette.mode === 'dark' && {
+    backgroundImage: "linear-gradient(".concat(alpha('#fff', getOverlayAlpha(2)), ", ").concat(alpha('#fff', getOverlayAlpha(2)), ")")
+  }, ownerState.side === GridPinnedPosition.left && {
+    left: 0,
+    float: 'left'
+  }, ownerState.side === GridPinnedPosition.right && {
+    right: 0,
+    float: 'right'
+  });
+});
+var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGridProVirtualScroller(props, ref) {
+  var className = props.className,
+      disableVirtualization = props.disableVirtualization,
+      other = _objectWithoutProperties(props, _excluded);
+
+  var apiRef = useGridApiContext();
+  var rootProps = useGridRootProps();
+  var visibleColumnFields = useGridSelector(apiRef, gridVisibleColumnFieldsSelector);
+  var expandedRowIds = useGridSelector(apiRef, gridDetailPanelExpandedRowIdsSelector);
+  var detailPanelsContent = useGridSelector(apiRef, gridDetailPanelExpandedRowsContentCacheSelector);
+  var detailPanelsHeights = useGridSelector(apiRef, gridDetailPanelExpandedRowsHeightCacheSelector);
+  var leftColumns = React.useRef(null);
+  var rightColumns = React.useRef(null);
+  var handleRenderZonePositioning = React.useCallback(function (_ref5) {
+    var top = _ref5.top;
+
+    if (leftColumns.current) {
+      leftColumns.current.style.transform = "translate3d(0px, ".concat(top, "px, 0px)");
+    }
+
+    if (rightColumns.current) {
+      rightColumns.current.style.transform = "translate3d(0px, ".concat(top, "px, 0px)");
+    }
+  }, []);
+
+  var getRowProps = function getRowProps(id) {
+    if (!expandedRowIds.includes(id)) {
+      return null;
+    }
+
+    var height = detailPanelsHeights[id];
+    return {
+      style: {
+        marginBottom: height
+      }
+    };
+  };
+
+  var pinnedColumns = useGridSelector(apiRef, gridPinnedColumnsSelector);
+
+  var _filterColumns = filterColumns(pinnedColumns, visibleColumnFields),
+      _filterColumns2 = _slicedToArray(_filterColumns, 2),
+      leftPinnedColumns = _filterColumns2[0],
+      rightPinnedColumns = _filterColumns2[1];
+
+  var ownerState = {
+    classes: rootProps.classes,
+    leftPinnedColumns: leftPinnedColumns,
+    rightPinnedColumns: rightPinnedColumns
+  };
+  var classes = useUtilityClasses(ownerState);
+
+  var _useGridVirtualScroll = useGridVirtualScroller(_extends({
+    ref: ref,
+    renderZoneMinColumnIndex: leftPinnedColumns.length,
+    renderZoneMaxColumnIndex: visibleColumnFields.length - rightPinnedColumns.length,
+    onRenderZonePositioning: handleRenderZonePositioning,
+    getRowProps: getRowProps
+  }, props)),
+      renderContext = _useGridVirtualScroll.renderContext,
+      getRows = _useGridVirtualScroll.getRows,
+      getRootProps = _useGridVirtualScroll.getRootProps,
+      getContentProps = _useGridVirtualScroll.getContentProps,
+      getRenderZoneProps = _useGridVirtualScroll.getRenderZoneProps,
+      updateRenderZonePosition = _useGridVirtualScroll.updateRenderZonePosition;
+
+  var refreshRenderZonePosition = React.useCallback(function () {
+    if (renderContext) {
+      updateRenderZonePosition(renderContext);
+    }
+  }, [renderContext, updateRenderZonePosition]);
+  useGridApiEventHandler(apiRef, GridEvents.columnWidthChange, refreshRenderZonePosition);
+  useGridApiEventHandler(apiRef, GridEvents.columnOrderChange, refreshRenderZonePosition);
+  React.useEffect(function () {
+    refreshRenderZonePosition();
+  }, [refreshRenderZonePosition]);
+  var leftRenderContext = renderContext && leftPinnedColumns.length > 0 ? _extends({}, renderContext, {
+    firstColumnIndex: 0,
+    lastColumnIndex: leftPinnedColumns.length
+  }) : null;
+  var rightRenderContext = renderContext && rightPinnedColumns.length > 0 ? _extends({}, renderContext, {
+    firstColumnIndex: visibleColumnFields.length - rightPinnedColumns.length,
+    lastColumnIndex: visibleColumnFields.length
+  }) : null;
+  var contentProps = getContentProps();
+  var pinnedColumnsStyle = {
+    minHeight: contentProps.style.minHeight
+  };
+
+  var getDetailPanels = function getDetailPanels() {
+    var panels = [];
+
+    if (rootProps.getDetailPanelContent == null) {
+      return panels;
+    }
+
+    var rowsMeta = gridRowsMetaSelector(apiRef.current.state);
+    var uniqueExpandedRowIds = Array.from(new Set(_toConsumableArray(expandedRowIds)).values());
+
+    for (var i = 0; i < uniqueExpandedRowIds.length; i += 1) {
+      var id = uniqueExpandedRowIds[i];
+      var content = detailPanelsContent[id]; // Check if the id exists in the current page
+
+      var rowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(id);
+      var exists = rowIndex !== undefined;
+
+      if ( /*#__PURE__*/React.isValidElement(content) && exists) {
+        var height = detailPanelsHeights[id];
+        var sizes = apiRef.current.unstable_getRowInternalSizes(id);
+        var spacingTop = (sizes == null ? void 0 : sizes.spacingTop) || 0;
+        var top = rowsMeta.positions[rowIndex] + apiRef.current.unstable_getRowHeight(id) + spacingTop;
+        panels.push( /*#__PURE__*/_jsx(VirtualScrollerDetailPanel, {
+          style: {
+            top: top,
+            height: height
+          },
+          className: classes.detailPanel,
+          children: content
+        }, i));
+      }
+    }
+
+    return panels;
+  };
+
+  var 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: renderContext
+        })
+      })), detailPanels.length > 0 && /*#__PURE__*/_jsx(VirtualScrollerDetailPanels, {
+        className: classes.detailPanels,
+        children: detailPanels
+      })]
+    }))
+  }));
+});
+export { DataGridProVirtualScroller };

package/legacy/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";
+
+var GridColumnPinningMenuItems = function GridColumnPinningMenuItems(props) {
+  var column = props.column,
+      onClick = props.onClick;
+  var apiRef = useGridApiContext();
+
+  var pinColumn = function pinColumn(side) {
+    return function (event) {
+      apiRef.current.pinColumn(column.field, side);
+
+      if (onClick) {
+        onClick(event);
+      }
+    };
+  };
+
+  var unpinColumn = function unpinColumn(event) {
+    apiRef.current.unpinColumn(column.field);
+
+    if (onClick) {
+      onClick(event);
+    }
+  };
+
+  if (!column) {
+    return null;
+  }
+
+  var side = apiRef.current.isColumnPinned(column.field);
+
+  if (side) {
+    var otherSide = side === GridPinnedPosition.right ? GridPinnedPosition.left : GridPinnedPosition.right;
+    var 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 };