@mui/x-data-grid 8.0.0-alpha.11 → 8.0.0-alpha.13

package/modern/components/panel/filterPanel/GridFilterInputSingleSelect.js

@@ -74,40 +74,32 @@ function GridFilterInputSingleSelect(props) {
   }
   const label = slotProps?.root.label ?? apiRef.current.getLocaleText('filterPanelInputLabel');
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/_jsxs(rootProps.slots.baseFormControl, {
+    children: [/*#__PURE__*/_jsx(rootProps.slots.baseSelect, _extends({
       fullWidth: true,
-      children: [/*#__PURE__*/_jsx(rootProps.slots.baseInputLabel, _extends({}, rootProps.slotProps?.baseInputLabel, {
-        id: labelId,
-        htmlFor: id,
-        shrink: true,
-        variant: "outlined",
-        children: label
-      })), /*#__PURE__*/_jsx(rootProps.slots.baseSelect, _extends({
-        id: id,
-        label: label,
-        labelId: labelId,
-        value: filterValue,
-        onChange: onFilterChange,
-        variant: "outlined",
-        type: type || 'text',
-        inputProps: _extends({
+      id: id,
+      label: label,
+      labelId: labelId,
+      value: filterValue,
+      onChange: onFilterChange,
+      slotProps: {
+        htmlInput: _extends({
           tabIndex,
           ref: focusElementRef,
+          type: type || 'text',
           placeholder: slotProps?.root.placeholder ?? apiRef.current.getLocaleText('filterPanelInputPlaceholder')
-        }, slotProps?.root.slotProps?.htmlInput),
-        native: isSelectNative,
-        notched: true
-      }, rootProps.slotProps?.baseSelect, others /* FIXME: typing error */, slotProps?.root, {
-        children: renderSingleSelectOptions({
-          column: resolvedColumn,
-          OptionComponent: rootProps.slots.baseSelectOption,
-          getOptionLabel,
-          getOptionValue,
-          isSelectNative,
-          baseSelectOptionProps: rootProps.slotProps?.baseSelectOption
-        })
-      }))]
-    }), headerFilterMenu, clearButton]
+        }, slotProps?.root.slotProps?.htmlInput)
+      },
+      native: isSelectNative
+    }, rootProps.slotProps?.baseSelect, others, slotProps?.root, {
+      children: renderSingleSelectOptions({
+        column: resolvedColumn,
+        OptionComponent: rootProps.slots.baseSelectOption,
+        getOptionLabel,
+        getOptionValue,
+        isSelectNative,
+        baseSelectOptionProps: rootProps.slotProps?.baseSelectOption
+      })
+    })), headerFilterMenu, clearButton]
   });
 }
 process.env.NODE_ENV !== "production" ? GridFilterInputSingleSelect.propTypes = {

package/modern/components/panel/filterPanel/GridFilterInputValue.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { TextFieldProps } from "../../../models/gridBaseSlots.js";
+import { GridFilterInputValueProps } from "../../../models/gridFilterInputComponent.js";
+export type GridTypeFilterInputValueProps = GridFilterInputValueProps<TextFieldProps> & {
+  type?: 'text' | 'number' | 'date' | 'datetime-local';
+};
+declare function GridFilterInputValue(props: GridTypeFilterInputValueProps): React.JSX.Element;
+declare namespace GridFilterInputValue {
+  var propTypes: any;
+}
+export { GridFilterInputValue };

package/modern/components/panel/filterPanel/GridFilterInputValue.js

@@ -57,12 +57,9 @@ function GridFilterInputValue(props) {
       disabled: disabled,
       slotProps: _extends({}, textFieldProps?.slotProps, {
         input: _extends({
-          endAdornment: applying ? /*#__PURE__*/_jsx(rootProps.slots.baseInputAdornment, {
-            position: "end",
-            children: /*#__PURE__*/_jsx(rootProps.slots.loadIcon, {
-              fontSize: "small",
-              color: "action"
-            })
+          endAdornment: applying ? /*#__PURE__*/_jsx(rootProps.slots.loadIcon, {
+            fontSize: "small",
+            color: "action"
           }) : null
         }, textFieldProps?.slotProps?.input),
         htmlInput: _extends({

package/modern/components/panel/filterPanel/GridFilterPanel.d.ts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+import { GridFilterItem } from "../../../models/gridFilterItem.js";
+import { GridFilterFormProps } from "./GridFilterForm.js";
+import { GridColDef, GridStateColDef } from "../../../models/colDef/gridColDef.js";
+export interface GetColumnForNewFilterArgs {
+  currentFilters: GridFilterItem[];
+  columns: GridStateColDef[];
+}
+export interface GridFilterPanelProps extends Pick<GridFilterFormProps, 'logicOperators' | 'columnsSort'> {
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * Function that returns the next filter item to be picked as default filter.
+   * @param {GetColumnForNewFilterArgs} args Currently configured filters and columns.
+   * @returns {GridColDef['field']} The field to be used for the next filter or `null` to prevent adding a filter.
+   */
+  getColumnForNewFilter?: (args: GetColumnForNewFilterArgs) => GridColDef['field'] | null;
+  /**
+   * Props passed to each filter form.
+   */
+  filterFormProps?: Pick<GridFilterFormProps, 'columnsSort' | 'deleteIconProps' | 'logicOperatorInputProps' | 'operatorInputProps' | 'columnInputProps' | 'valueInputProps' | 'filterColumns'>;
+  /**
+   * If `true`, the `Add filter` button will not be displayed.
+   * @default false
+   */
+  disableAddFilterButton?: boolean;
+  /**
+   * If `true`, the `Remove all` button will be disabled
+   * @default false
+   */
+  disableRemoveAllButton?: boolean;
+  /**
+   * @ignore - do not document.
+   */
+  children?: React.ReactNode;
+}
+declare const getGridFilter: (col: GridStateColDef) => GridFilterItem;
+declare const GridFilterPanel: React.ForwardRefExoticComponent<GridFilterPanelProps> | React.ForwardRefExoticComponent<GridFilterPanelProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Demos:
+ * - [Filtering - overview](https://mui.com/x/react-data-grid/filtering/)
+ *
+ * API:
+ * - [GridFilterPanel API](https://mui.com/x/api/data-grid/grid-filter-panel/)
+ */
+export { GridFilterPanel, getGridFilter };

package/modern/components/panel/filterPanel/filterPanelUtils.d.ts

@@ -0,0 +1,5 @@
+import type { GridColDef, GridSingleSelectColDef } from '../../../models/colDef/gridColDef';
+import type { GridValueOptionsParams } from '../../../models/params/gridValueOptionsParams';
+export declare function isSingleSelectColDef(colDef: GridColDef | null): colDef is GridSingleSelectColDef;
+export declare function getValueOptions(column: GridSingleSelectColDef, additionalParams?: Omit<GridValueOptionsParams, 'field'>): import("../../..").ValueOptions[] | undefined;
+export declare function getValueFromValueOptions(value: string, valueOptions: any[] | undefined, getOptionValue: NonNullable<GridSingleSelectColDef['getOptionValue']>): any;

package/modern/components/panel/filterPanel/index.d.ts

@@ -0,0 +1,10 @@
+export * from "./GridFilterForm.js";
+export * from "./GridFilterInputValue.js";
+export * from "./GridFilterInputDate.js";
+export * from "./GridFilterInputSingleSelect.js";
+export { GridFilterInputBoolean } from "./GridFilterInputBoolean.js";
+export type { GridFilterInputBooleanProps } from './GridFilterInputBoolean';
+export { GridFilterPanel } from "./GridFilterPanel.js";
+export type { GetColumnForNewFilterArgs } from './GridFilterPanel';
+export * from "./GridFilterInputMultipleValue.js";
+export * from "./GridFilterInputMultipleSingleSelect.js";

package/modern/components/panel/index.d.ts

@@ -0,0 +1,7 @@
+export * from "./GridColumnsPanel.js";
+export * from "./GridPanel.js";
+export * from "./GridPanelContent.js";
+export * from "./GridPanelFooter.js";
+export * from "./GridPanelHeader.js";
+export * from "./GridPanelWrapper.js";
+export * from "./filterPanel/index.js";

package/modern/components/reexportable.d.ts

@@ -0,0 +1 @@
+export { GridColumnMenu, GRID_COLUMN_MENU_SLOTS, GRID_COLUMN_MENU_SLOT_PROPS } from "./menu/columnMenu/GridColumnMenu.js";

package/modern/components/toolbar/GridToolbar.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { GridToolbarContainerProps } from "../containers/GridToolbarContainer.js";
+import { GridToolbarExportProps } from "./GridToolbarExport.js";
+import { GridToolbarQuickFilterProps } from "./GridToolbarQuickFilter.js";
+export interface GridToolbarProps extends GridToolbarContainerProps, GridToolbarExportProps {
+  /**
+   * Show the quick filter component.
+   * @default false
+   */
+  showQuickFilter?: boolean;
+  /**
+   * Props passed to the quick filter component.
+   */
+  quickFilterProps?: GridToolbarQuickFilterProps;
+}
+declare const GridToolbar: React.ForwardRefExoticComponent<GridToolbarProps> | React.ForwardRefExoticComponent<GridToolbarProps & React.RefAttributes<HTMLDivElement>>;
+export { GridToolbar };

package/modern/components/toolbar/GridToolbarColumnsButton.d.ts

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

package/modern/components/toolbar/GridToolbarDensitySelector.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { ButtonProps } from '@mui/material/Button';
+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.ForwardRefExoticComponent<GridToolbarDensitySelectorProps & React.RefAttributes<HTMLButtonElement>>;
+export { GridToolbarDensitySelector };

package/modern/components/toolbar/GridToolbarExport.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { ButtonProps } from '@mui/material/Button';
+import { TooltipProps } from '@mui/material/Tooltip';
+import { GridCsvExportOptions, GridPrintExportOptions } from "../../models/gridExport.js";
+export interface GridExportDisplayOptions {
+  /**
+   * If `true`, this export option will be removed from the GridToolbarExport menu.
+   * @default false
+   */
+  disableToolbarButton?: boolean;
+}
+export interface GridExportMenuItemProps<Options extends {}> {
+  hideMenu?: () => void;
+  options?: Options & GridExportDisplayOptions;
+}
+export type GridCsvExportMenuItemProps = GridExportMenuItemProps<GridCsvExportOptions>;
+export type GridPrintExportMenuItemProps = GridExportMenuItemProps<GridPrintExportOptions>;
+export interface GridToolbarExportProps {
+  csvOptions?: GridCsvExportOptions & GridExportDisplayOptions;
+  printOptions?: GridPrintExportOptions & GridExportDisplayOptions;
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps?: {
+    button?: Partial<ButtonProps>;
+    tooltip?: Partial<TooltipProps>;
+  };
+  [x: `data-${string}`]: string;
+}
+declare function GridCsvExportMenuItem(props: GridCsvExportMenuItemProps): React.JSX.Element;
+declare namespace GridCsvExportMenuItem {
+  var propTypes: any;
+}
+declare function GridPrintExportMenuItem(props: GridPrintExportMenuItemProps): React.JSX.Element;
+declare namespace GridPrintExportMenuItem {
+  var propTypes: any;
+}
+declare const GridToolbarExport: React.ForwardRefExoticComponent<GridToolbarExportProps> | React.ForwardRefExoticComponent<GridToolbarExportProps & React.RefAttributes<HTMLButtonElement>>;
+export { GridToolbarExport, GridCsvExportMenuItem, GridPrintExportMenuItem };

package/modern/components/toolbar/GridToolbarExportContainer.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { ButtonProps } from '@mui/material/Button';
+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<React.PropsWithChildren<GridToolbarExportContainerProps>> | React.ForwardRefExoticComponent<GridToolbarExportContainerProps & {
+  children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+export { GridToolbarExportContainer };

package/modern/components/toolbar/GridToolbarFilterButton.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { ButtonProps } from '@mui/material/Button';
+import { TooltipProps } from '@mui/material/Tooltip';
+import { BadgeProps } from "../../models/gridBaseSlots.js";
+export interface GridToolbarFilterButtonProps {
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps?: {
+    button?: Partial<ButtonProps>;
+    tooltip?: Partial<TooltipProps>;
+    badge?: Partial<BadgeProps>;
+  };
+}
+declare const GridToolbarFilterButton: React.ForwardRefExoticComponent<GridToolbarFilterButtonProps> | React.ForwardRefExoticComponent<GridToolbarFilterButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { GridToolbarFilterButton };

package/modern/components/toolbar/GridToolbarFilterButton.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses, unstable_capitalize as capitalize, unstable_useId as useId } from '@mui/utils';
 import { forwardRef } from '@mui/x-internals/forwardRef';
+import { vars } from "../../constants/cssVariables.js";
 import { gridColumnLookupSelector } from "../../hooks/features/columns/gridColumnsSelector.js";
 import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
 import { gridFilterActiveItemsSelector } from "../../hooks/features/filter/gridFilterSelector.js";
@@ -26,12 +27,10 @@ const GridToolbarFilterListRoot = styled('ul', {
   name: 'MuiDataGrid',
   slot: 'ToolbarFilterList',
   overridesResolver: (_props, styles) => styles.toolbarFilterList
-})(({
-  theme
-}) => ({
-  margin: theme.spacing(1, 1, 0.5),
-  padding: theme.spacing(0, 1)
-}));
+})({
+  margin: vars.spacing(1, 1, 0.5),
+  padding: vars.spacing(0, 1)
+});
 
 // FIXME(v8:romgrk): override slotProps
 

package/modern/components/toolbar/GridToolbarQuickFilter.d.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { TextFieldProps } from "../../models/gridBaseSlots.js";
+import { GridFilterModel } from "../../models/gridFilterModel.js";
+export type GridToolbarQuickFilterProps = {
+  className?: string;
+  /**
+   * Function responsible for parsing text input in an array of independent values for quick filtering.
+   * @param {string} input The value entered by the user
+   * @returns {any[]} The array of value on which quick filter is applied
+   * @default (searchText: string) => searchText
+   *   .split(' ')
+   *   .filter((word) => word !== '')
+   */
+  quickFilterParser?: (input: string) => any[];
+  /**
+   * Function responsible for formatting values of quick filter in a string when the model is modified
+   * @param {any[]} values The new values passed to the quick filter model
+   * @returns {string} The string to display in the text field
+   * @default (values: string[]) => values.join(' ')
+   */
+  quickFilterFormatter?: (values: NonNullable<GridFilterModel['quickFilterValues']>) => string;
+  /**
+   * The debounce time in milliseconds.
+   * @default 150
+   */
+  debounceMs?: number;
+  slotProps?: {
+    root: TextFieldProps;
+  };
+};
+declare function GridToolbarQuickFilter(props: GridToolbarQuickFilterProps): React.JSX.Element;
+declare namespace GridToolbarQuickFilter {
+  var propTypes: any;
+}
+/**
+ * Demos:
+ * - [Filtering - overview](https://mui.com/x/react-data-grid/filtering/)
+ * - [Filtering - quick filter](https://mui.com/x/react-data-grid/filtering/quick-filter/)
+ *
+ * API:
+ * - [GridToolbarQuickFilter API](https://mui.com/x/api/data-grid/grid-toolbar-quick-filter/)
+ */
+export { GridToolbarQuickFilter };

package/modern/components/toolbar/GridToolbarQuickFilter.js

@@ -8,6 +8,7 @@ import { styled } from '@mui/material/styles';
 import { unstable_debounce as debounce } from '@mui/utils';
 import composeClasses from '@mui/utils/composeClasses';
 import { outlinedInputClasses } from '@mui/material/OutlinedInput';
+import { vars } from "../../constants/cssVariables.js";
 import { getDataGridUtilityClass } from "../../constants/index.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
@@ -28,20 +29,18 @@ const GridToolbarQuickFilterRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'ToolbarQuickFilter',
   overridesResolver: (props, styles) => styles.toolbarQuickFilter
-})(({
-  theme
-}) => ({
+})({
   [`.${outlinedInputClasses.root}`]: {
-    fontSize: theme.typography.body2.fontSize
+    fontSize: vars.typography.body.fontSize
   },
   [`& input[type="search"]::-webkit-search-decoration,
-  & input[type="search"]::-webkit-search-cancel-button,
-  & input[type="search"]::-webkit-search-results-button,
-  & input[type="search"]::-webkit-search-results-decoration`]: {
+    & input[type="search"]::-webkit-search-cancel-button,
+    & input[type="search"]::-webkit-search-results-button,
+    & input[type="search"]::-webkit-search-results-decoration`]: {
     /* clears the 'X' icon from Chrome */
     display: 'none'
   }
-}));
+});
 const defaultSearchValueParser = searchText => searchText.split(' ').filter(word => word !== '');
 const defaultSearchValueFormatter = values => values.join(' ');
 function GridToolbarQuickFilter(props) {
@@ -97,30 +96,24 @@ function GridToolbarQuickFilter(props) {
   }, other, {
     slotProps: _extends({}, slotProps?.root.slotProps, {
       input: _extends({
-        startAdornment: /*#__PURE__*/_jsx(rootProps.slots.baseInputAdornment, {
-          position: "start",
-          children: /*#__PURE__*/_jsx(rootProps.slots.quickFilterIcon, {
+        startAdornment: /*#__PURE__*/_jsx(rootProps.slots.quickFilterIcon, {
+          fontSize: "small"
+        }),
+        endAdornment: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
+          "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterDeleteIconLabel'),
+          size: "small",
+          edge: "end",
+          style: searchValue ? {
+            visibility: 'visible'
+          } : {
+            visibility: 'hidden'
+          },
+          onClick: handleSearchReset
+        }, rootProps.slotProps?.baseIconButton, {
+          children: /*#__PURE__*/_jsx(rootProps.slots.quickFilterClearIcon, {
             fontSize: "small"
           })
-        }),
-        endAdornment: /*#__PURE__*/_jsx(rootProps.slots.baseInputAdornment, {
-          position: "end",
-          children: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
-            "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterDeleteIconLabel'),
-            size: "small",
-            edge: "end",
-            style: searchValue ? {
-              visibility: 'visible'
-            } : {
-              visibility: 'hidden'
-            },
-            onClick: handleSearchReset
-          }, rootProps.slotProps?.baseIconButton, {
-            children: /*#__PURE__*/_jsx(rootProps.slots.quickFilterClearIcon, {
-              fontSize: "small"
-            })
-          }))
-        })
+        }))
       }, slotProps?.root.slotProps?.input)
     })
   }, rootProps.slotProps?.baseTextField));

package/modern/components/toolbar/index.d.ts

@@ -0,0 +1,8 @@
+export * from "./GridToolbar.js";
+export * from "./GridToolbarColumnsButton.js";
+export * from "./GridToolbarDensitySelector.js";
+export type { GridExportDisplayOptions, GridExportMenuItemProps, GridCsvExportMenuItemProps, GridPrintExportMenuItemProps, GridToolbarExportProps } from './GridToolbarExport';
+export { GridCsvExportMenuItem, GridPrintExportMenuItem, GridToolbarExport } from "./GridToolbarExport.js";
+export * from "./GridToolbarFilterButton.js";
+export * from "./GridToolbarExportContainer.js";
+export * from "./GridToolbarQuickFilter.js";

package/modern/components/virtualization/GridBottomContainer.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export type GridBottomContainerProps = React.PropsWithChildren;
+export declare function GridBottomContainer(props: GridBottomContainerProps): React.JSX.Element;

package/modern/components/virtualization/GridMainContainer.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { DataGridProcessedProps } from "../../models/props/DataGridProps.js";
+import { GridLoadingOverlayVariant } from "../GridLoadingOverlay.js";
+import { GridOverlayType } from "../base/GridOverlays.js";
+type OwnerState = Pick<DataGridProcessedProps, 'classes'> & {
+  hasScrollX: boolean;
+  hasPinnedRight: boolean;
+  overlayType: GridOverlayType;
+  loadingOverlayVariant: GridLoadingOverlayVariant | null;
+};
+export declare const GridMainContainer: React.ForwardRefExoticComponent<React.PropsWithChildren<{
+  className: string;
+  ownerState: OwnerState;
+}>> | React.ForwardRefExoticComponent<{
+  className: string;
+  ownerState: OwnerState;
+} & {
+  children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export {};

package/modern/components/virtualization/GridMainContainer.js

@@ -16,9 +16,12 @@ const Element = styled('div', {
   slot: 'Main',
   overridesResolver: (props, styles) => {
     const {
-      ownerState
+      ownerState,
+      loadingOverlayVariant,
+      overlayType
     } = props;
-    return [styles.main, ownerState.hasPinnedRight && styles['main--hasPinnedRight'], ownerState.loadingOverlayVariant === 'skeleton' && styles['main--hasSkeletonLoadingOverlay']];
+    const hideContent = loadingOverlayVariant === 'skeleton' || overlayType === 'noColumnsOverlay';
+    return [styles.main, ownerState.hasPinnedRight && styles['main--hasPinnedRight'], hideContent && styles['main--hiddenContent']];
   }
 })({
   flexGrow: 1,

package/modern/components/virtualization/GridTopContainer.d.ts

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

package/modern/components/virtualization/GridVirtualScrollbar.d.ts

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

package/modern/components/virtualization/GridVirtualScrollbar.js

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { styled } from '@mui/system';
-import { unstable_composeClasses as composeClasses, unstable_useForkRef as useForkRef, unstable_useEventCallback as useEventCallback } from '@mui/utils';
+import useEventCallback from '@mui/utils/useEventCallback';
+import useForkRef from '@mui/utils/useForkRef';
+import composeClasses from '@mui/utils/composeClasses';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useOnMount } from "../../hooks/utils/useOnMount.js";
 import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.js";

package/modern/components/virtualization/GridVirtualScroller.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export interface GridVirtualScrollerProps {
+  children?: React.ReactNode;
+}
+declare function GridVirtualScroller(props: GridVirtualScrollerProps): React.JSX.Element;
+export { GridVirtualScroller };

package/modern/components/virtualization/GridVirtualScroller.js

@@ -13,7 +13,6 @@ import { useGridOverlays } from "../../hooks/features/overlays/useGridOverlays.j
 import { GridHeaders } from "../GridHeaders.js";
 import { GridMainContainer as Container } from "./GridMainContainer.js";
 import { GridTopContainer as TopContainer } from "./GridTopContainer.js";
-import { GridBottomContainer as BottomContainer } from "./GridBottomContainer.js";
 import { GridVirtualScrollerContent as Content } from "./GridVirtualScrollerContent.js";
 import { GridVirtualScrollerFiller as SpaceFiller } from "./GridVirtualScrollerFiller.js";
 import { GridVirtualScrollerRenderZone as RenderZone } from "./GridVirtualScrollerRenderZone.js";
@@ -24,10 +23,12 @@ const useUtilityClasses = ownerState => {
     classes,
     hasScrollX,
     hasPinnedRight,
-    loadingOverlayVariant
+    loadingOverlayVariant,
+    overlayType
   } = ownerState;
+  const hideContent = loadingOverlayVariant === 'skeleton' || overlayType === 'noColumnsOverlay';
   const slots = {
-    root: ['main', hasPinnedRight && 'main--hasPinnedRight', loadingOverlayVariant === 'skeleton' && 'main--hasSkeletonLoadingOverlay'],
+    root: ['main', hasPinnedRight && 'main--hasPinnedRight', hideContent && 'main--hiddenContent'],
     scroller: ['virtualScroller', hasScrollX && 'virtualScroller--hasScrollX']
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
@@ -58,7 +59,7 @@ const Scroller = styled('div', {
   // See https://github.com/mui/mui-x/issues/10547
   zIndex: 0
 });
-const hasPinnedRightSelector = state => state.dimensions.rightPinnedWidth > 0;
+const hasPinnedRightSelector = apiRef => apiRef.current.state.dimensions.rightPinnedWidth > 0;
 function GridVirtualScroller(props) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
@@ -70,12 +71,11 @@ function GridVirtualScroller(props) {
     getOverlay,
     overlaysProps
   } = useGridOverlays();
-  const ownerState = {
+  const ownerState = _extends({
     classes: rootProps.classes,
     hasScrollX,
-    hasPinnedRight,
-    loadingOverlayVariant: overlaysProps.loadingOverlayVariant
-  };
+    hasPinnedRight
+  }, overlaysProps);
   const classes = useUtilityClasses(ownerState);
   const virtualScroller = useGridVirtualScroller();
   const {
@@ -114,7 +114,7 @@ function GridVirtualScroller(props) {
         }))
       })), hasBottomFiller && /*#__PURE__*/_jsx(SpaceFiller, {
         rowsLength: rows.length
-      }), /*#__PURE__*/_jsx(BottomContainer, {
+      }), /*#__PURE__*/_jsx(rootProps.slots.bottomContainer, {
         children: /*#__PURE__*/_jsx(rootProps.slots.pinnedRows, {
           position: "bottom",
           virtualScroller: virtualScroller

package/modern/components/virtualization/GridVirtualScrollerContent.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { SxProps, Theme } from '@mui/system';
+declare const GridVirtualScrollerContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+  sx?: SxProps<Theme>;
+}> | React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+  sx?: SxProps<Theme>;
+} & React.RefAttributes<HTMLDivElement>>;
+export { GridVirtualScrollerContent };

package/modern/components/virtualization/GridVirtualScrollerFiller.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+type Props = {
+  /** The number of rows */
+  rowsLength: number;
+};
+declare function GridVirtualScrollerFiller({
+  rowsLength
+}: Props): React.JSX.Element | null;
+declare const Memoized: typeof GridVirtualScrollerFiller;
+export { Memoized as GridVirtualScrollerFiller };

package/modern/components/virtualization/GridVirtualScrollerFiller.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { styled } from '@mui/system';
 import { fastMemo } from '@mui/x-internals/fastMemo';
+import { vars } from "../../constants/cssVariables.js";
 import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { gridDimensionsSelector } from "../../hooks/features/dimensions/index.js";
@@ -17,7 +18,7 @@ const Pinned = styled('div')({
   height: '100%',
   boxSizing: 'border-box',
   borderTop: '1px solid var(--rowBorderColor)',
-  backgroundColor: 'var(--DataGrid-pinnedBackground)'
+  backgroundColor: vars.cell.background.pinned
 });
 const PinnedLeft = styled(Pinned)({
   left: 0,