@mui/x-data-grid 8.0.0-alpha.9 → 8.0.0-beta.0

package/models/props/DataGridProps.js

@@ -1 +1,5 @@
-export {};
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/modern/DataGrid/DataGrid.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { DataGridProps } from "../models/props/DataGridProps.js";
+import { GridValidRowModel } from "../models/gridRows.js";
+export type { GridSlotsComponent as GridSlots } from '../models';
+interface DataGridComponent {
+  <R extends GridValidRowModel = any>(props: DataGridProps<R> & React.RefAttributes<HTMLDivElement>): React.JSX.Element;
+  propTypes?: any;
+}
+/**
+ * Features:
+ * - [DataGrid](https://mui.com/x/react-data-grid/features/)
+ *
+ * API:
+ * - [DataGrid API](https://mui.com/x/api/data-grid/data-grid/)
+ */
+export declare const DataGrid: DataGridComponent;

package/modern/DataGrid/DataGrid.js

@@ -11,24 +11,20 @@ import { GridContextProvider } from "../context/GridContextProvider.js";
 import { useDataGridComponent } from "./useDataGridComponent.js";
 import { useDataGridProps } from "./useDataGridProps.js";
 import { propValidatorsDataGrid, validateProps } from "../internals/utils/propValidation.js";
+import { useMaterialCSSVariables } from "../material/variables.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const configuration = {
   hooks: {
+    useCSSVariables: useMaterialCSSVariables,
     useGridAriaAttributes,
     useGridRowAriaAttributes
   }
 };
-let propValidators;
-if (process.env.NODE_ENV !== 'production') {
-  propValidators = [...propValidatorsDataGrid,
-  // Only validate in MIT version
-  props => props.columns && props.columns.some(column => column.resizable) && [`MUI X: \`column.resizable = true\` is not a valid prop.`, 'Column resizing is not available in the MIT version.', '', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n') || undefined];
-}
 const DataGridRaw = forwardRef(function DataGrid(inProps, ref) {
   const props = useDataGridProps(inProps);
   const privateApiRef = useDataGridComponent(props.apiRef, props);
   if (process.env.NODE_ENV !== 'production') {
-    validateProps(props, propValidators);
+    validateProps(props, propValidatorsDataGrid);
   }
   return /*#__PURE__*/_jsx(GridContextProvider, {
     privateApiRef: privateApiRef,
@@ -44,8 +40,8 @@ const DataGridRaw = forwardRef(function DataGrid(inProps, ref) {
   });
 });
 /**
- * Demos:
- * - [DataGrid](https://mui.com/x/react-data-grid/demo/)
+ * Features:
+ * - [DataGrid](https://mui.com/x/react-data-grid/features/)
  *
  * API:
  * - [DataGrid API](https://mui.com/x/api/data-grid/data-grid/)
@@ -60,7 +56,7 @@ DataGridRaw.propTypes = {
    * The ref object that allows Data Grid manipulation. Can be instantiated with `useGridApiRef()`.
    */
   apiRef: PropTypes.shape({
-    current: PropTypes.object.isRequired
+    current: PropTypes.object
   }),
   /**
    * The label of the Data Grid.
@@ -144,6 +140,21 @@ DataGridRaw.propTypes = {
    * If defined, the Data Grid will ignore the `hide` property in [[GridColDef]].
    */
   columnVisibilityModel: PropTypes.object,
+  /**
+   * The data source object.
+   */
+  dataSource: PropTypes.shape({
+    getRows: PropTypes.func.isRequired,
+    updateRow: PropTypes.func
+  }),
+  /**
+   * Data source cache object.
+   */
+  dataSourceCache: PropTypes.shape({
+    clear: PropTypes.func.isRequired,
+    get: PropTypes.func.isRequired,
+    set: PropTypes.func.isRequired
+  }),
   /**
    * Set the density of the Data Grid.
    * @default "standard"
@@ -283,6 +294,8 @@ DataGridRaw.propTypes = {
   getRowHeight: PropTypes.func,
   /**
    * Return the id of a given [[GridRowModel]].
+   * Ensure the reference of this prop is stable to avoid performance implications.
+   * It could be done by either defining the prop outside of the component or by memoizing it.
    */
   getRowId: PropTypes.func,
   /**
@@ -494,6 +507,11 @@ DataGridRaw.propTypes = {
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onColumnWidthChange: PropTypes.func,
+  /**
+   * Callback fired when a data source request fails.
+   * @param {GridGetRowsError | GridUpdateRowError} error The data source error object.
+   */
+  onDataSourceError: PropTypes.func,
   /**
    * Callback fired when the density changes.
    * @param {GridDensity} density New density value.
@@ -691,7 +709,10 @@ DataGridRaw.propTypes = {
   /**
    * Sets the row selection model of the Data Grid.
    */
-  rowSelectionModel: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), PropTypes.number, PropTypes.string]),
+  rowSelectionModel: PropTypes /* @typescript-to-proptypes-ignore */.shape({
+    ids: PropTypes.instanceOf(Set).isRequired,
+    type: PropTypes.oneOf(['exclude', 'include']).isRequired
+  }),
   /**
    * Sets the type of space between rows added by `getRowSpacing`.
    * @default "margin"
@@ -716,6 +737,11 @@ DataGridRaw.propTypes = {
    * @default false
    */
   showColumnVerticalBorder: PropTypes.bool,
+  /**
+   * If `true`, the toolbar is displayed.
+   * @default false
+   */
+  showToolbar: PropTypes.bool,
   /**
    * Overridable components props dynamically passed to the component at rendering.
    */

package/modern/DataGrid/index.d.ts

@@ -0,0 +1 @@
+export * from "./DataGrid.js";

package/modern/DataGrid/useDataGridComponent.d.ts

@@ -0,0 +1,4 @@
+import { RefObject } from '@mui/x-internals/types';
+import { DataGridProcessedProps } from "../models/props/DataGridProps.js";
+import { GridApiCommunity, GridPrivateApiCommunity } from "../models/api/gridApiCommunity.js";
+export declare const useDataGridComponent: (inputApiRef: RefObject<GridApiCommunity | null> | undefined, props: DataGridProcessedProps) => import("react").RefObject<GridPrivateApiCommunity>;

package/modern/DataGrid/useDataGridComponent.js

@@ -29,6 +29,8 @@ import { useGridVirtualization, virtualizationStateInitializer } from "../hooks/
 import { columnResizeStateInitializer, useGridColumnResize } from "../hooks/features/columnResize/useGridColumnResize.js";
 import { rowSpanningStateInitializer, useGridRowSpanning } from "../hooks/features/rows/useGridRowSpanning.js";
 import { listViewStateInitializer, useGridListView } from "../hooks/features/listView/useGridListView.js";
+import { propsStateInitializer } from "../hooks/core/useGridProps.js";
+import { useGridDataSource } from "../hooks/features/dataSource/useGridDataSource.js";
 export const useDataGridComponent = (inputApiRef, props) => {
   const apiRef = useGridInitialization(inputApiRef, props);
 
@@ -41,11 +43,11 @@ export const useDataGridComponent = (inputApiRef, props) => {
   /**
    * Register all state initializers here.
    */
-  useGridInitializeState(dimensionsStateInitializer, apiRef, props);
+  useGridInitializeState(propsStateInitializer, apiRef, props);
   useGridInitializeState(rowSelectionStateInitializer, apiRef, props);
   useGridInitializeState(columnsStateInitializer, apiRef, props);
-  useGridInitializeState(paginationStateInitializer, apiRef, props);
   useGridInitializeState(rowsStateInitializer, apiRef, props);
+  useGridInitializeState(paginationStateInitializer, apiRef, props);
   useGridInitializeState(editingStateInitializer, apiRef, props);
   useGridInitializeState(focusStateInitializer, apiRef, props);
   useGridInitializeState(sortingStateInitializer, apiRef, props);
@@ -54,10 +56,11 @@ export const useDataGridComponent = (inputApiRef, props) => {
   useGridInitializeState(rowSpanningStateInitializer, apiRef, props);
   useGridInitializeState(densityStateInitializer, apiRef, props);
   useGridInitializeState(columnResizeStateInitializer, apiRef, props);
-  useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(columnMenuStateInitializer, apiRef, props);
   useGridInitializeState(columnGroupsStateInitializer, apiRef, props);
   useGridInitializeState(virtualizationStateInitializer, apiRef, props);
+  useGridInitializeState(dimensionsStateInitializer, apiRef, props);
+  useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(listViewStateInitializer, apiRef, props);
   useGridKeyboardNavigation(apiRef, props);
   useGridRowSelection(apiRef, props);
@@ -86,5 +89,6 @@ export const useDataGridComponent = (inputApiRef, props) => {
   useGridStatePersistence(apiRef);
   useGridVirtualization(apiRef, props);
   useGridListView(apiRef, props);
+  useGridDataSource(apiRef, props);
   return apiRef;
 };

package/modern/DataGrid/useDataGridProps.d.ts

@@ -0,0 +1,3 @@
+import { DataGridProcessedProps, DataGridProps } from "../models/props/DataGridProps.js";
+import { GridValidRowModel } from "../models/index.js";
+export declare const useDataGridProps: <R extends GridValidRowModel>(inProps: DataGridProps<R>) => DataGridProcessedProps<R>;

package/modern/DataGrid/useDataGridProps.js

@@ -17,6 +17,11 @@ const DATA_GRID_FORCED_PROPS = {
   signature: 'DataGrid',
   unstable_listView: false
 };
+const getDataGridForcedProps = themedProps => _extends({}, DATA_GRID_FORCED_PROPS, themedProps.dataSource ? {
+  filterMode: 'server',
+  sortingMode: 'server',
+  paginationMode: 'server'
+} : {});
 const defaultSlots = DATA_GRID_DEFAULT_SLOTS_COMPONENTS;
 export const useDataGridProps = inProps => {
   const themedProps =
@@ -40,5 +45,5 @@ export const useDataGridProps = inProps => {
   return React.useMemo(() => _extends({}, themedProps, injectDefaultProps, {
     localeText,
     slots
-  }, DATA_GRID_FORCED_PROPS), [themedProps, localeText, slots, injectDefaultProps]);
+  }, getDataGridForcedProps(themedProps)), [themedProps, localeText, slots, injectDefaultProps]);
 };

package/modern/colDef/gridActionsColDef.d.ts

@@ -0,0 +1,3 @@
+import { GridColTypeDef } from "../models/colDef/gridColDef.js";
+export declare const GRID_ACTIONS_COLUMN_TYPE = "actions";
+export declare const GRID_ACTIONS_COL_DEF: GridColTypeDef;

package/modern/colDef/gridActionsColDef.js

@@ -15,5 +15,5 @@ export const GRID_ACTIONS_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   disableColumnMenu: true,
   disableExport: true,
   renderCell: renderActionsCell,
-  getApplyQuickFilterFn: undefined
+  getApplyQuickFilterFn: () => null
 });

package/modern/colDef/gridBooleanColDef.d.ts

@@ -0,0 +1,2 @@
+import { GridColTypeDef } from "../models/colDef/gridColDef.js";
+export declare const GRID_BOOLEAN_COL_DEF: GridColTypeDef<boolean | null, any>;

package/modern/colDef/gridBooleanColDef.js

@@ -33,7 +33,7 @@ export const GRID_BOOLEAN_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   sortComparator: gridNumberComparator,
   valueFormatter: gridBooleanFormatter,
   filterOperators: getGridBooleanOperators(),
-  getApplyQuickFilterFn: undefined,
+  getApplyQuickFilterFn: () => null,
   // @ts-ignore
   aggregable: false,
   // @ts-ignore

package/modern/colDef/gridBooleanOperators.d.ts

@@ -0,0 +1,2 @@
+import { GridFilterOperator } from "../models/gridFilterOperator.js";
+export declare const getGridBooleanOperators: () => GridFilterOperator<any, boolean | null, any>[];

package/modern/colDef/gridCheckboxSelectionColDef.d.ts

@@ -0,0 +1,3 @@
+import { GridColDef } from "../models/colDef/gridColDef.js";
+export declare const GRID_CHECKBOX_SELECTION_FIELD = "__check__";
+export declare const GRID_CHECKBOX_SELECTION_COL_DEF: GridColDef;

package/modern/colDef/gridCheckboxSelectionColDef.js

@@ -2,8 +2,8 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { GridCellCheckboxRenderer } from "../components/columnSelection/GridCellCheckboxRenderer.js";
 import { GridHeaderCheckbox } from "../components/columnSelection/GridHeaderCheckbox.js";
-import { selectedIdsLookupSelector } from "../hooks/features/rowSelection/gridRowSelectionSelector.js";
 import { GRID_BOOLEAN_COL_DEF } from "./gridBooleanColDef.js";
+import { gridRowIdSelector } from "../hooks/core/gridPropsSelectors.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const GRID_CHECKBOX_SELECTION_FIELD = '__check__';
 export const GRID_CHECKBOX_SELECTION_COL_DEF = _extends({}, GRID_BOOLEAN_COL_DEF, {
@@ -18,12 +18,11 @@ export const GRID_CHECKBOX_SELECTION_COL_DEF = _extends({}, GRID_BOOLEAN_COL_DEF
   disableColumnMenu: true,
   disableReorder: true,
   disableExport: true,
-  getApplyQuickFilterFn: undefined,
+  getApplyQuickFilterFn: () => null,
   display: 'flex',
   valueGetter: (value, row, column, apiRef) => {
-    const selectionLookup = selectedIdsLookupSelector(apiRef);
-    const rowId = apiRef.current.getRowId(row);
-    return selectionLookup[rowId] !== undefined;
+    const rowId = gridRowIdSelector(apiRef, row);
+    return apiRef.current.isRowSelected(rowId);
   },
   renderHeader: params => /*#__PURE__*/_jsx(GridHeaderCheckbox, _extends({}, params)),
   renderCell: params => /*#__PURE__*/_jsx(GridCellCheckboxRenderer, _extends({}, params))

package/modern/colDef/gridDateColDef.d.ts

@@ -0,0 +1,5 @@
+import { GridColTypeDef, GridValueFormatter } from "../models/colDef/gridColDef.js";
+export declare const gridDateFormatter: GridValueFormatter;
+export declare const gridDateTimeFormatter: GridValueFormatter;
+export declare const GRID_DATE_COL_DEF: GridColTypeDef<Date, string>;
+export declare const GRID_DATETIME_COL_DEF: GridColTypeDef<Date, string>;

package/modern/colDef/gridDateColDef.js

@@ -3,6 +3,7 @@ import { gridDateComparator } from "../hooks/features/sorting/gridSortingUtils.j
 import { getGridDateOperators } from "./gridDateOperators.js";
 import { GRID_STRING_COL_DEF } from "./gridStringColDef.js";
 import { renderEditDateCell } from "../components/cell/GridEditDateCell.js";
+import { gridRowIdSelector } from "../hooks/core/gridPropsSelectors.js";
 function throwIfNotDateObject({
   value,
   columnType,
@@ -17,7 +18,7 @@ export const gridDateFormatter = (value, row, column, apiRef) => {
   if (!value) {
     return '';
   }
-  const rowId = apiRef.current.getRowId(row);
+  const rowId = gridRowIdSelector(apiRef, row);
   throwIfNotDateObject({
     value,
     columnType: 'date',
@@ -30,7 +31,7 @@ export const gridDateTimeFormatter = (value, row, column, apiRef) => {
   if (!value) {
     return '';
   }
-  const rowId = apiRef.current.getRowId(row);
+  const rowId = gridRowIdSelector(apiRef, row);
   throwIfNotDateObject({
     value,
     columnType: 'dateTime',

package/modern/colDef/gridDateOperators.d.ts

@@ -0,0 +1,3 @@
+import { GridFilterInputDateProps } from "../components/panel/filterPanel/GridFilterInputDate.js";
+import { GridFilterOperator } from "../models/gridFilterOperator.js";
+export declare const getGridDateOperators: (showTime?: boolean) => GridFilterOperator<any, Date, any, GridFilterInputDateProps>[];

package/modern/colDef/gridDefaultColumnTypes.d.ts

@@ -0,0 +1,3 @@
+import type { GridColumnTypesRecord } from '../models/colDef/gridColumnTypesRecord';
+export declare const DEFAULT_GRID_COL_TYPE_KEY = "string";
+export declare const getGridDefaultColumnTypes: () => GridColumnTypesRecord;

package/modern/colDef/gridNumericColDef.d.ts

@@ -0,0 +1,2 @@
+import { GridColTypeDef } from "../models/colDef/gridColDef.js";
+export declare const GRID_NUMERIC_COL_DEF: GridColTypeDef<number | string | null, string>;

package/modern/colDef/gridNumericOperators.d.ts

@@ -0,0 +1,7 @@
+import { GridFilterOperator } from "../models/gridFilterOperator.js";
+import type { GridFilterInputValueProps } from '../models/gridFilterInputComponent';
+import type { GetApplyQuickFilterFn } from '../models/colDef/gridColDef';
+export declare const getGridNumericQuickFilterFn: GetApplyQuickFilterFn<any, number | string | null>;
+export declare const getGridNumericOperators: () => GridFilterOperator<any, number | string | null, any, GridFilterInputValueProps & {
+  type?: "number";
+}>[];

package/modern/colDef/gridSingleSelectColDef.d.ts

@@ -0,0 +1,2 @@
+import { GridSingleSelectColDef } from "../models/colDef/gridColDef.js";
+export declare const GRID_SINGLE_SELECT_COL_DEF: Omit<GridSingleSelectColDef, 'field'>;

package/modern/colDef/gridSingleSelectColDef.js

@@ -4,6 +4,7 @@ import { renderEditSingleSelectCell } from "../components/cell/GridEditSingleSel
 import { getGridSingleSelectOperators } from "./gridSingleSelectOperators.js";
 import { getValueOptions, isSingleSelectColDef } from "../components/panel/filterPanel/filterPanelUtils.js";
 import { isObject } from "../utils/utils.js";
+import { gridRowIdSelector } from "../hooks/core/gridPropsSelectors.js";
 const isArrayOfObjects = options => {
   return typeof options[0] === 'object';
 };
@@ -18,8 +19,7 @@ export const GRID_SINGLE_SELECT_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   getOptionLabel: defaultGetOptionLabel,
   getOptionValue: defaultGetOptionValue,
   valueFormatter(value, row, colDef, apiRef) {
-    // const { id, field, value, api } = params;
-    const rowId = apiRef.current.getRowId(row);
+    const rowId = gridRowIdSelector(apiRef, row);
     if (!isSingleSelectColDef(colDef)) {
       return '';
     }

package/modern/colDef/gridSingleSelectOperators.d.ts

@@ -0,0 +1,2 @@
+import { GridFilterOperator } from "../models/gridFilterOperator.js";
+export declare const getGridSingleSelectOperators: () => GridFilterOperator[];

package/modern/colDef/gridStringColDef.d.ts

@@ -0,0 +1,5 @@
+import { GridColTypeDef } from "../models/colDef/gridColDef.js";
+/**
+ * TODO: Move pro and premium properties outside of this Community file
+ */
+export declare const GRID_STRING_COL_DEF: GridColTypeDef<any, any>;

package/modern/colDef/gridStringOperators.d.ts

@@ -0,0 +1,4 @@
+import type { GetApplyQuickFilterFn } from '../models/colDef/gridColDef';
+import { GridFilterOperator } from "../models/gridFilterOperator.js";
+export declare const getGridStringQuickFilterFn: GetApplyQuickFilterFn<any, unknown>;
+export declare const getGridStringOperators: (disableTrim?: boolean) => GridFilterOperator<any, number | string | null, any>[];

package/modern/colDef/index.d.ts

@@ -0,0 +1,13 @@
+export * from "./gridActionsColDef.js";
+export * from "./gridBooleanColDef.js";
+export * from "./gridCheckboxSelectionColDef.js";
+export * from "./gridDateColDef.js";
+export * from "./gridNumericColDef.js";
+export * from "./gridSingleSelectColDef.js";
+export * from "./gridStringColDef.js";
+export * from "./gridBooleanOperators.js";
+export * from "./gridDateOperators.js";
+export * from "./gridNumericOperators.js";
+export * from "./gridSingleSelectOperators.js";
+export * from "./gridStringOperators.js";
+export * from "./gridDefaultColumnTypes.js";

package/modern/components/GridApiContext.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const GridApiContext: React.Context<unknown>;

package/modern/components/GridColumnHeaders.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { UseGridColumnHeadersProps } from "../hooks/features/columnHeaders/useGridColumnHeaders.js";
+export interface GridColumnHeadersProps extends React.HTMLAttributes<HTMLDivElement>, UseGridColumnHeadersProps {
+  ref?: React.Ref<HTMLDivElement>;
+}
+declare const MemoizedGridColumnHeaders: React.ForwardRefExoticComponent<GridColumnHeadersProps> | React.ForwardRefExoticComponent<Omit<GridColumnHeadersProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { MemoizedGridColumnHeaders as GridColumnHeaders };

package/modern/components/GridConfigurationContext.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const GridConfigurationContext: React.Context<unknown>;

package/modern/components/GridDetailPanels.d.ts

@@ -0,0 +1,5 @@
+import type { VirtualScroller } from '../hooks/features/virtualization/useGridVirtualScroller';
+export interface GridDetailPanelsProps {
+  virtualScroller: VirtualScroller;
+}
+export declare function GridDetailPanels(_: GridDetailPanelsProps): null;

package/modern/components/GridFooter.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { GridFooterContainerProps } from "./containers/GridFooterContainer.js";
+declare const GridFooter: React.ForwardRefExoticComponent<GridFooterContainerProps> | React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+  sx?: import("@mui/system").SxProps<import("@mui/system").Theme>;
+} & React.RefAttributes<HTMLDivElement>>;
+export { GridFooter };

package/modern/components/GridFooter.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridSelector } from "../hooks/utils/useGridSelector.js";
 import { gridTopLevelRowCountSelector } from "../hooks/features/rows/gridRowsSelector.js";
-import { selectedGridRowsCountSelector } from "../hooks/features/rowSelection/gridRowSelectionSelector.js";
+import { gridRowSelectionCountSelector } from "../hooks/features/rowSelection/gridRowSelectionSelector.js";
 import { gridFilteredTopLevelRowCountSelector } from "../hooks/features/filter/gridFilterSelector.js";
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
 import { GridSelectedRowCount } from "./GridSelectedRowCount.js";
@@ -15,7 +15,7 @@ const GridFooter = forwardRef(function GridFooter(props, ref) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const totalTopLevelRowCount = useGridSelector(apiRef, gridTopLevelRowCountSelector);
-  const selectedRowCount = useGridSelector(apiRef, selectedGridRowsCountSelector);
+  const selectedRowCount = useGridSelector(apiRef, gridRowSelectionCountSelector);
   const visibleTopLevelRowCount = useGridSelector(apiRef, gridFilteredTopLevelRowCountSelector);
   const selectedRowCountElement = !rootProps.hideFooterSelectedRowCount && selectedRowCount > 0 ? /*#__PURE__*/_jsx(GridSelectedRowCount, {
     selectedRowCount: selectedRowCount
@@ -24,7 +24,7 @@ const GridFooter = forwardRef(function GridFooter(props, ref) {
     rowCount: totalTopLevelRowCount,
     visibleRowCount: visibleTopLevelRowCount
   })) : null;
-  const paginationElement = rootProps.pagination && !rootProps.hideFooterPagination && rootProps.slots.pagination && /*#__PURE__*/_jsx(rootProps.slots.pagination, _extends({}, rootProps.slotProps?.pagination));
+  const paginationElement = rootProps.pagination && !rootProps.hideFooterPagination && rootProps.slots.pagination && /*#__PURE__*/_jsx(rootProps.slots.pagination, {});
   return /*#__PURE__*/_jsxs(GridFooterContainer, _extends({}, props, {
     ref: ref,
     children: [selectedRowCountElement, rowCountElement, paginationElement]

package/modern/components/GridHeader.d.ts

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

package/modern/components/GridHeader.js

@@ -6,6 +6,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function GridHeader() {
   const rootProps = useGridRootProps();
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/_jsx(GridPreferencesPanel, {}), rootProps.slots.toolbar && /*#__PURE__*/_jsx(rootProps.slots.toolbar, _extends({}, rootProps.slotProps?.toolbar))]
+    children: [/*#__PURE__*/_jsx(GridPreferencesPanel, {}), rootProps.showToolbar && /*#__PURE__*/_jsx(rootProps.slots.toolbar, _extends({}, rootProps.slotProps?.toolbar))]
   });
 }

package/modern/components/GridHeaders.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+declare function GridHeaders(): React.JSX.Element;
+declare const MemoizedGridHeaders: typeof GridHeaders;
+export { MemoizedGridHeaders as GridHeaders };

package/modern/components/GridLoadingOverlay.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { GridOverlayProps } from "./containers/GridOverlay.js";
+export type GridLoadingOverlayVariant = 'circular-progress' | 'linear-progress' | 'skeleton';
+export interface GridLoadingOverlayProps extends GridOverlayProps {
+  /**
+   * The variant of the overlay.
+   * @default 'linear-progress'
+   */
+  variant?: GridLoadingOverlayVariant;
+  /**
+   * The variant of the overlay when no rows are displayed.
+   * @default 'skeleton'
+   */
+  noRowsVariant?: GridLoadingOverlayVariant;
+}
+declare const GridLoadingOverlay: React.ForwardRefExoticComponent<GridLoadingOverlayProps> | React.ForwardRefExoticComponent<GridLoadingOverlayProps & React.RefAttributes<HTMLDivElement>>;
+export { GridLoadingOverlay };

package/modern/components/GridNoColumnsOverlay.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { GridOverlayProps } from "./containers/GridOverlay.js";
+declare const GridNoColumnsOverlay: React.ForwardRefExoticComponent<GridOverlayProps> | React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+  sx?: import("@mui/system").SxProps<import("@mui/system").Theme>;
+} & React.RefAttributes<HTMLDivElement>>;
+export { GridNoColumnsOverlay };

package/modern/components/GridNoColumnsOverlay.js

@@ -0,0 +1,36 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { forwardRef } from '@mui/x-internals/forwardRef';
+import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
+import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
+import { GridOverlay } from "./containers/GridOverlay.js";
+import { GridPreferencePanelsValue } from "../hooks/features/preferencesPanel/gridPreferencePanelsValue.js";
+import { gridColumnFieldsSelector, useGridSelector } from "../hooks/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const GridNoColumnsOverlay = forwardRef(function GridNoColumnsOverlay(props, ref) {
+  const rootProps = useGridRootProps();
+  const apiRef = useGridApiContext();
+  const columns = useGridSelector(apiRef, gridColumnFieldsSelector);
+  const handleOpenManageColumns = () => {
+    apiRef.current.showPreferences(GridPreferencePanelsValue.columns);
+  };
+  const showManageColumnsButton = !rootProps.disableColumnSelector && columns.length > 0;
+  return /*#__PURE__*/_jsxs(GridOverlay, _extends({}, props, {
+    ref: ref,
+    children: [apiRef.current.getLocaleText('noColumnsOverlayLabel'), showManageColumnsButton && /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
+      size: "small"
+    }, rootProps.slotProps?.baseButton, {
+      onClick: handleOpenManageColumns,
+      children: apiRef.current.getLocaleText('noColumnsOverlayManageColumns')
+    }))]
+  }));
+});
+process.env.NODE_ENV !== "production" ? GridNoColumnsOverlay.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
+export { GridNoColumnsOverlay };

package/modern/components/GridNoResultsOverlay.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { GridOverlayProps } from "./containers/GridOverlay.js";
+export declare const GridNoResultsOverlay: React.ForwardRefExoticComponent<GridOverlayProps> | React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+  sx?: import("@mui/system").SxProps<import("@mui/system").Theme>;
+} & React.RefAttributes<HTMLDivElement>>;

package/modern/components/GridNoRowsOverlay.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { GridOverlayProps } from "./containers/GridOverlay.js";
+declare const GridNoRowsOverlay: React.ForwardRefExoticComponent<GridOverlayProps> | React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+  sx?: import("@mui/system").SxProps<import("@mui/system").Theme>;
+} & React.RefAttributes<HTMLDivElement>>;
+export { GridNoRowsOverlay };

package/modern/components/GridPagination.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+declare function GridPagination(): React.JSX.Element;
+declare namespace GridPagination {
+  var propTypes: any;
+}
+export { GridPagination };