@mui/x-data-grid 7.0.0-alpha.8 → 7.0.0-beta.0

package/components/toolbar/GridToolbarColumnsButton.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["onClick"];
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/material/utils';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { gridPreferencePanelStateSelector } from '../../hooks/features/preferencesPanel/gridPreferencePanelSelector';
@@ -9,24 +8,26 @@ import { GridPreferencePanelsValue } from '../../hooks/features/preferencesPanel
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const GridToolbarColumnsButton = /*#__PURE__*/React.forwardRef(function GridToolbarColumnsButton(props, ref) {
-  var _rootProps$slotProps;
+const GridToolbarColumnsButton = /*#__PURE__*/React.forwardRef(function GridToolbarColumnsButton(props, ref) {
+  var _rootProps$slotProps, _rootProps$slotProps2;
   const {
-      onClick
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    slotProps = {}
+  } = props;
+  const buttonProps = slotProps.button || {};
+  const tooltipProps = slotProps.tooltip || {};
   const columnButtonId = useId();
   const columnPanelId = useId();
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const preferencePanel = useGridSelector(apiRef, gridPreferencePanelStateSelector);
   const showColumns = event => {
+    var _buttonProps$onClick;
     if (preferencePanel.open && preferencePanel.openedPanelValue === GridPreferencePanelsValue.columns) {
       apiRef.current.hidePreferences();
     } else {
       apiRef.current.showPreferences(GridPreferencePanelsValue.columns, columnPanelId, columnButtonId);
     }
-    onClick == null || onClick(event);
+    (_buttonProps$onClick = buttonProps.onClick) == null || _buttonProps$onClick.call(buttonProps, event);
   };
 
   // Disable the button if the corresponding is disabled
@@ -34,18 +35,35 @@ export const GridToolbarColumnsButton = /*#__PURE__*/React.forwardRef(function G
     return null;
   }
   const isOpen = preferencePanel.open && preferencePanel.panelId === columnPanelId;
-  return /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
-    ref: ref,
-    id: columnButtonId,
-    size: "small",
-    "aria-label": apiRef.current.getLocaleText('toolbarColumnsLabel'),
-    "aria-haspopup": "menu",
-    "aria-expanded": isOpen,
-    "aria-controls": isOpen ? columnPanelId : undefined,
-    startIcon: /*#__PURE__*/_jsx(rootProps.slots.columnSelectorIcon, {})
-  }, other, {
-    onClick: showColumns
-  }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseButton, {
-    children: apiRef.current.getLocaleText('toolbarColumns')
+  return /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
+    title: apiRef.current.getLocaleText('toolbarColumnsLabel'),
+    enterDelay: 1000
+  }, tooltipProps, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseTooltip, {
+    children: /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
+      ref: ref,
+      id: columnButtonId,
+      size: "small",
+      "aria-label": apiRef.current.getLocaleText('toolbarColumnsLabel'),
+      "aria-haspopup": "menu",
+      "aria-expanded": isOpen,
+      "aria-controls": isOpen ? columnPanelId : undefined,
+      startIcon: /*#__PURE__*/_jsx(rootProps.slots.columnSelectorIcon, {})
+    }, buttonProps, {
+      onClick: showColumns
+    }, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseButton, {
+      children: apiRef.current.getLocaleText('toolbarColumns')
+    }))
   }));
-});
+});
+process.env.NODE_ENV !== "production" ? GridToolbarColumnsButton.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.object
+} : void 0;
+export { GridToolbarColumnsButton };

package/components/toolbar/GridToolbarDensitySelector.d.ts

@@ -1,3 +1,15 @@
 import * as React from 'react';
 import { ButtonProps } from '@mui/material/Button';
-export declare const GridToolbarDensitySelector: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+import { TooltipProps } from '@mui/material/Tooltip';
+interface GridToolbarDensitySelectorProps {
+    /**
+     * The props used for each slot inside.
+     * @default {}
+     */
+    slotProps?: {
+        button?: Partial<ButtonProps>;
+        tooltip?: Partial<TooltipProps>;
+    };
+}
+declare const GridToolbarDensitySelector: React.ForwardRefExoticComponent<GridToolbarDensitySelectorProps & React.RefAttributes<HTMLButtonElement>>;
+export { GridToolbarDensitySelector };

package/components/toolbar/GridToolbarDensitySelector.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["onClick"];
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { unstable_useId as useId, unstable_useForkRef as useForkRef } from '@mui/utils';
 import MenuList from '@mui/material/MenuList';
 import MenuItem from '@mui/material/MenuItem';
@@ -15,12 +14,13 @@ import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { gridClasses } from '../../constants/gridClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridToolbarDensitySelector(props, ref) {
-  var _rootProps$slotProps;
+const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridToolbarDensitySelector(props, ref) {
+  var _rootProps$slotProps, _rootProps$slotProps2;
   const {
-      onClick
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    slotProps = {}
+  } = props;
+  const buttonProps = slotProps.button || {};
+  const tooltipProps = slotProps.tooltip || {};
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const densityValue = useGridSelector(apiRef, gridDensityValueSelector);
@@ -53,8 +53,9 @@ export const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function
     }
   }, [densityValue, rootProps]);
   const handleDensitySelectorOpen = event => {
+    var _buttonProps$onClick;
     setOpen(prevOpen => !prevOpen);
-    onClick == null || onClick(event);
+    (_buttonProps$onClick = buttonProps.onClick) == null || _buttonProps$onClick.call(buttonProps, event);
   };
   const handleDensitySelectorClose = () => {
     setOpen(false);
@@ -84,19 +85,24 @@ export const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function
     }), option.label]
   }, index));
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
-      ref: handleRef,
-      size: "small",
-      startIcon: startIcon,
-      "aria-label": apiRef.current.getLocaleText('toolbarDensityLabel'),
-      "aria-haspopup": "menu",
-      "aria-expanded": open,
-      "aria-controls": open ? densityMenuId : undefined,
-      id: densityButtonId
-    }, other, {
-      onClick: handleDensitySelectorOpen
-    }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseButton, {
-      children: apiRef.current.getLocaleText('toolbarDensity')
+    children: [/*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
+      title: apiRef.current.getLocaleText('toolbarDensityLabel'),
+      enterDelay: 1000
+    }, tooltipProps, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseTooltip, {
+      children: /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
+        ref: handleRef,
+        size: "small",
+        startIcon: startIcon,
+        "aria-label": apiRef.current.getLocaleText('toolbarDensityLabel'),
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        "aria-controls": open ? densityMenuId : undefined,
+        id: densityButtonId
+      }, buttonProps, {
+        onClick: handleDensitySelectorOpen
+      }, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseButton, {
+        children: apiRef.current.getLocaleText('toolbarDensity')
+      }))
     })), /*#__PURE__*/_jsx(GridMenu, {
       open: open,
       target: buttonRef.current,
@@ -112,4 +118,16 @@ export const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function
       })
     })]
   });
-});
+});
+process.env.NODE_ENV !== "production" ? GridToolbarDensitySelector.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.object
+} : void 0;
+export { GridToolbarDensitySelector };

package/components/toolbar/GridToolbarExport.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { ButtonProps } from '@mui/material/Button';
+import { TooltipProps } from '@mui/material/Tooltip';
 import { GridCsvExportOptions, GridPrintExportOptions } from '../../models/gridExport';
 export interface GridExportDisplayOptions {
     /**
@@ -14,9 +15,17 @@ export interface GridExportMenuItemProps<Options extends {}> {
 }
 export type GridCsvExportMenuItemProps = GridExportMenuItemProps<GridCsvExportOptions>;
 export type GridPrintExportMenuItemProps = GridExportMenuItemProps<GridPrintExportOptions>;
-export interface GridToolbarExportProps extends ButtonProps {
+export interface GridToolbarExportProps {
     csvOptions?: GridCsvExportOptions & GridExportDisplayOptions;
     printOptions?: GridPrintExportOptions & GridExportDisplayOptions;
+    /**
+     * The props used for each slot inside.
+     * @default {}
+     */
+    slotProps?: {
+        button?: Partial<ButtonProps>;
+        tooltip?: Partial<TooltipProps>;
+    };
     [key: string]: any;
 }
 export declare function GridCsvExportMenuItem(props: GridCsvExportMenuItemProps): React.JSX.Element;

package/components/toolbar/GridToolbarExport.js

@@ -70,6 +70,11 @@ process.env.NODE_ENV !== "production" ? GridToolbarExport.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   csvOptions: PropTypes.object,
-  printOptions: PropTypes.object
+  printOptions: PropTypes.object,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.object
 } : void 0;
 export { GridToolbarExport };

package/components/toolbar/GridToolbarExportContainer.d.ts

@@ -1,3 +1,17 @@
 import * as React from 'react';
 import { ButtonProps } from '@mui/material/Button';
-export declare const GridToolbarExportContainer: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+import { TooltipProps } from '@mui/material/Tooltip';
+interface GridToolbarExportContainerProps {
+    /**
+     * The props used for each slot inside.
+     * @default {}
+     */
+    slotProps?: {
+        button?: Partial<ButtonProps>;
+        tooltip?: Partial<TooltipProps>;
+    };
+}
+declare const GridToolbarExportContainer: React.ForwardRefExoticComponent<GridToolbarExportContainerProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLButtonElement>>;
+export { GridToolbarExportContainer };

package/components/toolbar/GridToolbarExportContainer.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "onClick"];
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { unstable_useId as useId, unstable_useForkRef as useForkRef } from '@mui/utils';
 import MenuList from '@mui/material/MenuList';
 import { isHideMenuKey, isTabKey } from '../../utils/keyboardUtils';
@@ -11,13 +10,14 @@ import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { gridClasses } from '../../constants/gridClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridToolbarExportContainer(props, ref) {
-  var _rootProps$slotProps;
+const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridToolbarExportContainer(props, ref) {
+  var _rootProps$slotProps, _rootProps$slotProps2;
   const {
-      children,
-      onClick
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    children,
+    slotProps = {}
+  } = props;
+  const buttonProps = slotProps.button || {};
+  const tooltipProps = slotProps.tooltip || {};
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const exportButtonId = useId();
@@ -26,8 +26,9 @@ export const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function
   const buttonRef = React.useRef(null);
   const handleRef = useForkRef(ref, buttonRef);
   const handleMenuOpen = event => {
+    var _buttonProps$onClick;
     setOpen(prevOpen => !prevOpen);
-    onClick == null || onClick(event);
+    (_buttonProps$onClick = buttonProps.onClick) == null || _buttonProps$onClick.call(buttonProps, event);
   };
   const handleMenuClose = () => setOpen(false);
   const handleListKeyDown = event => {
@@ -42,19 +43,24 @@ export const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function
     return null;
   }
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
-      ref: handleRef,
-      size: "small",
-      startIcon: /*#__PURE__*/_jsx(rootProps.slots.exportIcon, {}),
-      "aria-expanded": open,
-      "aria-label": apiRef.current.getLocaleText('toolbarExportLabel'),
-      "aria-haspopup": "menu",
-      "aria-controls": open ? exportMenuId : undefined,
-      id: exportButtonId
-    }, other, {
-      onClick: handleMenuOpen
-    }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseButton, {
-      children: apiRef.current.getLocaleText('toolbarExport')
+    children: [/*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
+      title: apiRef.current.getLocaleText('toolbarExportLabel'),
+      enterDelay: 1000
+    }, tooltipProps, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseTooltip, {
+      children: /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
+        ref: handleRef,
+        size: "small",
+        startIcon: /*#__PURE__*/_jsx(rootProps.slots.exportIcon, {}),
+        "aria-expanded": open,
+        "aria-label": apiRef.current.getLocaleText('toolbarExportLabel'),
+        "aria-haspopup": "menu",
+        "aria-controls": open ? exportMenuId : undefined,
+        id: exportButtonId
+      }, buttonProps, {
+        onClick: handleMenuOpen
+      }, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseButton, {
+        children: apiRef.current.getLocaleText('toolbarExport')
+      }))
     })), /*#__PURE__*/_jsx(GridMenu, {
       open: open,
       target: buttonRef.current,
@@ -77,4 +83,16 @@ export const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function
       })
     })]
   });
-});
+});
+process.env.NODE_ENV !== "production" ? GridToolbarExportContainer.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.object
+} : void 0;
+export { GridToolbarExportContainer };

package/components/toolbar/GridToolbarFilterButton.d.ts

@@ -1,14 +1,15 @@
 import * as React from 'react';
 import { ButtonProps } from '@mui/material/Button';
 import { TooltipProps } from '@mui/material/Tooltip';
-export interface GridToolbarFilterButtonProps extends Omit<TooltipProps, 'title' | 'children' | 'componentsProps'> {
+export interface GridToolbarFilterButtonProps {
     /**
      * The props used for each slot inside.
      * @default {}
      */
-    componentsProps?: {
-        button?: ButtonProps;
+    slotProps?: {
+        button?: Partial<ButtonProps>;
+        tooltip?: Partial<TooltipProps>;
     };
 }
-declare const GridToolbarFilterButton: React.ForwardRefExoticComponent<Omit<GridToolbarFilterButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const GridToolbarFilterButton: React.ForwardRefExoticComponent<GridToolbarFilterButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export { GridToolbarFilterButton };

package/components/toolbar/GridToolbarFilterButton.js

@@ -1,6 +1,4 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["componentsProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
@@ -38,10 +36,10 @@ const GridToolbarFilterListRoot = styled('ul', {
 const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolbarFilterButton(props, ref) {
   var _rootProps$slotProps, _rootProps$slotProps2;
   const {
-      componentsProps = {}
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const buttonProps = componentsProps.button || {};
+    slotProps = {}
+  } = props;
+  const buttonProps = slotProps.button || {};
+  const tooltipProps = slotProps.tooltip || {};
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const activeFilters = useGridSelector(apiRef, gridFilterActiveItemsSelector);
@@ -100,7 +98,7 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
   return /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
     title: tooltipContentNode,
     enterDelay: 1000
-  }, other, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseTooltip, {
+  }, tooltipProps, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseTooltip, {
     children: /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
       ref: ref,
       id: filterButtonId,
@@ -130,8 +128,6 @@ process.env.NODE_ENV !== "production" ? GridToolbarFilterButton.propTypes = {
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.shape({
-    button: PropTypes.object
-  })
+  slotProps: PropTypes.object
 } : void 0;
 export { GridToolbarFilterButton };

package/components/virtualization/GridBottomContainer.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare function GridBottomContainer(props: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;

package/components/virtualization/GridBottomContainer.js

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import clsx from 'clsx';
+import { styled } from '@mui/system';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { gridClasses, getDataGridUtilityClass } from '../../constants/gridClasses';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = () => {
+  const slots = {
+    root: ['bottomContainer']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, {});
+};
+const Element = styled('div')({
+  position: 'sticky',
+  zIndex: 2,
+  bottom: 'calc(var(--DataGrid-hasScrollX) * var(--DataGrid-scrollbarSize))'
+});
+export function GridBottomContainer(props) {
+  const classes = useUtilityClasses();
+  return /*#__PURE__*/_jsx(Element, _extends({}, props, {
+    className: clsx(classes.root, props.className, gridClasses['container--bottom']),
+    role: "presentation"
+  }));
+}

package/components/{containers → virtualization}/GridMainContainer.d.ts

@@ -1,4 +1,6 @@
 import * as React from 'react';
 export declare const GridMainContainer: React.ForwardRefExoticComponent<{
+    className: string;
+} & {
     children?: React.ReactNode;
 } & React.RefAttributes<HTMLDivElement>>;

package/components/virtualization/GridMainContainer.js

@@ -0,0 +1,20 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { styled } from '@mui/system';
+import { useGridAriaAttributes } from '../../hooks/utils/useGridAriaAttributes';
+import { jsx as _jsx } from "react/jsx-runtime";
+const Element = styled('div')({
+  flexGrow: 1,
+  position: 'relative',
+  overflow: 'hidden'
+});
+export const GridMainContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const ariaAttributes = useGridAriaAttributes();
+  return /*#__PURE__*/_jsx(Element, _extends({
+    ref: ref,
+    className: props.className,
+    tabIndex: -1
+  }, ariaAttributes, {
+    children: props.children
+  }));
+});

package/components/virtualization/GridTopContainer.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare function GridTopContainer(props: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;

package/components/virtualization/GridTopContainer.js

@@ -0,0 +1,35 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import clsx from 'clsx';
+import { styled } from '@mui/system';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { gridClasses, getDataGridUtilityClass } from '../../constants/gridClasses';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = () => {
+  const slots = {
+    root: ['topContainer']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, {});
+};
+const Element = styled('div')({
+  position: 'sticky',
+  zIndex: 2,
+  top: 0,
+  '&::after': {
+    content: '" "',
+    position: 'absolute',
+    zIndex: 5,
+    bottom: 0,
+    left: 0,
+    height: 1,
+    width: 'var(--DataGrid-rowWidth)',
+    backgroundColor: 'var(--DataGrid-rowBorderColor)'
+  }
+});
+export function GridTopContainer(props) {
+  const classes = useUtilityClasses();
+  return /*#__PURE__*/_jsx(Element, _extends({}, props, {
+    className: clsx(classes.root, props.className, gridClasses['container--top']),
+    role: "presentation"
+  }));
+}

package/components/virtualization/GridVirtualScrollbar.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+type Position = 'vertical' | 'horizontal';
+type GridVirtualScrollbarProps = {
+    position: Position;
+};
+declare const GridVirtualScrollbar: React.ForwardRefExoticComponent<GridVirtualScrollbarProps & React.RefAttributes<HTMLDivElement>>;
+export { GridVirtualScrollbar };