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

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

@@ -38,8 +38,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/)
@@ -277,6 +277,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,
   /**
@@ -741,6 +743,27 @@ DataGridRaw.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * The data source object.
+   */
+  unstable_dataSource: PropTypes.shape({
+    getRows: PropTypes.func.isRequired,
+    updateRow: PropTypes.func
+  }),
+  /**
+   * Data source cache object.
+   */
+  unstable_dataSourceCache: PropTypes.shape({
+    clear: PropTypes.func.isRequired,
+    get: PropTypes.func.isRequired,
+    set: PropTypes.func.isRequired
+  }),
+  /**
+   * Callback fired when the data source request fails.
+   * @param {Error} error The error object.
+   * @param {GridGetRowsParams} params With all properties from [[GridGetRowsParams]].
+   */
+  unstable_onDataSourceError: PropTypes.func,
   /**
    * If `true`, the Data Grid enables column virtualization when `getRowHeight` is set to `() => 'auto'`.
    * By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly.

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,10 +43,11 @@ export const useDataGridComponent = (inputApiRef, props) => {
   /**
    * Register all state initializers here.
    */
+  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);
@@ -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.unstable_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/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/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

@@ -4,6 +4,7 @@ import { GridCellCheckboxRenderer } from "../components/columnSelection/GridCell
 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, {
@@ -22,7 +23,7 @@ export const GRID_CHECKBOX_SELECTION_COL_DEF = _extends({}, GRID_BOOLEAN_COL_DEF
   display: 'flex',
   valueGetter: (value, row, column, apiRef) => {
     const selectionLookup = selectedIdsLookupSelector(apiRef);
-    const rowId = apiRef.current.getRowId(row);
+    const rowId = gridRowIdSelector(apiRef, row);
     return selectionLookup[rowId] !== undefined;
   },
   renderHeader: params => /*#__PURE__*/_jsx(GridHeaderCheckbox, _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/GridHeader.d.ts

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

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,10 @@
+import * as React from 'react';
+import { TablePaginationProps, LabelDisplayedRowsArgs } from '@mui/material/TablePagination';
+export type WrappedLabelDisplayedRows = (args: LabelDisplayedRowsArgs & {
+  estimated?: number;
+}) => React.ReactNode;
+interface GridPaginationOwnProps {
+  component?: React.ElementType;
+}
+declare const GridPagination: React.ForwardRefExoticComponent<Partial<Omit<TablePaginationProps, "component">> & GridPaginationOwnProps> | React.ForwardRefExoticComponent<Omit<Partial<Omit<TablePaginationProps, "component">> & GridPaginationOwnProps, "ref"> & React.RefAttributes<unknown>>;
+export { GridPagination };

package/modern/components/GridPinnedRows.d.ts

@@ -0,0 +1,6 @@
+import type { VirtualScroller } from '../hooks/features/virtualization/useGridVirtualScroller';
+export interface GridPinnedRowsProps {
+  position: 'top' | 'bottom';
+  virtualScroller: VirtualScroller;
+}
+export declare function GridPinnedRows(_: GridPinnedRowsProps): null;

package/modern/components/GridRow.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { GridRowId, GridRowModel } from "../models/gridRows.js";
+import { GridPinnedColumns } from "../hooks/features/columns/index.js";
+import type { GridStateColDef } from '../models/colDef/gridColDef';
+export interface GridRowProps extends React.HTMLAttributes<HTMLDivElement> {
+  row: GridRowModel;
+  rowId: GridRowId;
+  selected: boolean;
+  /**
+   * Index of the row in the whole sorted and filtered dataset.
+   * If some rows above have expanded children, this index also take those children into account.
+   */
+  index: number;
+  rowHeight: number | 'auto';
+  offsetLeft: number;
+  columnsTotalWidth: number;
+  firstColumnIndex: number;
+  lastColumnIndex: number;
+  visibleColumns: GridStateColDef[];
+  pinnedColumns: GridPinnedColumns;
+  /**
+   * Determines which cell has focus.
+   * If `null`, no cell in this row has focus.
+   */
+  focusedColumnIndex: number | undefined;
+  isFirstVisible: boolean;
+  isLastVisible: boolean;
+  isNotVisible: boolean;
+  showBottomBorder: boolean;
+  scrollbarWidth: number;
+  gridHasFiller: boolean;
+  onClick?: React.MouseEventHandler<HTMLDivElement>;
+  onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;
+  onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
+  onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
+  [x: `data-${string}`]: string;
+}
+declare const MemoizedGridRow: React.ForwardRefExoticComponent<GridRowProps> | React.ForwardRefExoticComponent<GridRowProps & React.RefAttributes<HTMLDivElement>>;
+export { MemoizedGridRow as GridRow };

package/modern/components/GridRowCount.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { SxProps, Theme } from '@mui/system';
+interface RowCountProps {
+  rowCount: number;
+  visibleRowCount: number;
+}
+export type GridRowCountProps = React.HTMLAttributes<HTMLDivElement> & RowCountProps & {
+  sx?: SxProps<Theme>;
+};
+declare const GridRowCount: React.ForwardRefExoticComponent<GridRowCountProps> | React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & RowCountProps & {
+  sx?: SxProps<Theme>;
+} & React.RefAttributes<HTMLDivElement>>;
+export { GridRowCount };

package/modern/components/GridScrollArea.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
+import { GridScrollParams } from "../models/params/gridScrollParams.js";
+interface ScrollAreaProps {
+  scrollDirection: 'left' | 'right';
+  scrollPosition: RefObject<GridScrollParams>;
+}
+declare function GridScrollAreaWrapper(props: ScrollAreaProps): React.JSX.Element | null;
+export declare const GridScrollArea: typeof GridScrollAreaWrapper;
+export {};

package/modern/components/GridScrollArea.js

@@ -81,7 +81,7 @@ function GridScrollAreaContent(props) {
   const columnsTotalWidth = useGridSelector(apiRef, gridColumnsTotalWidthSelector);
   const sideOffset = useGridSelector(apiRef, offsetSelector, scrollDirection);
   const getCanScrollMore = () => {
-    const dimensions = gridDimensionsSelector(apiRef.current.state);
+    const dimensions = gridDimensionsSelector(apiRef);
     if (scrollDirection === 'left') {
       // Only render if the user has not reached yet the start of the list
       return scrollPosition.current.left > 0;

package/modern/components/GridScrollbarFillerCell.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+declare function GridScrollbarFillerCell({
+  header,
+  borderTop,
+  borderBottom,
+  pinnedRight
+}: {
+  header?: boolean;
+  borderTop?: boolean;
+  borderBottom?: boolean;
+  pinnedRight?: boolean;
+}): React.JSX.Element;
+export { GridScrollbarFillerCell };

package/modern/components/GridSelectedRowCount.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { SxProps, Theme } from '@mui/system';
+interface SelectedRowCountProps {
+  selectedRowCount: number;
+}
+type GridSelectedRowCountProps = React.HTMLAttributes<HTMLDivElement> & SelectedRowCountProps & {
+  sx?: SxProps<Theme>;
+};
+declare const GridSelectedRowCount: React.ForwardRefExoticComponent<GridSelectedRowCountProps> | React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & SelectedRowCountProps & {
+  sx?: SxProps<Theme>;
+} & React.RefAttributes<HTMLDivElement>>;
+export { GridSelectedRowCount };

package/modern/components/GridSkeletonLoadingOverlay.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { GridColDef } from "../models/index.js";
+type GridSkeletonLoadingOverlayInnerProps = React.HTMLAttributes<HTMLDivElement> & {
+  skeletonRowsCount: number;
+  showFirstRowBorder?: boolean;
+  visibleColumns?: Set<GridColDef['field']>;
+};
+export declare const GridSkeletonLoadingOverlayInner: React.ForwardRefExoticComponent<GridSkeletonLoadingOverlayInnerProps> | React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+  skeletonRowsCount: number;
+  showFirstRowBorder?: boolean;
+  visibleColumns?: Set<GridColDef["field"]>;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const GridSkeletonLoadingOverlay: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement>> | React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export {};

package/modern/components/GridSkeletonLoadingOverlay.js

@@ -1,4 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["skeletonRowsCount", "visibleColumns", "showFirstRowBorder"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/system';
@@ -40,7 +42,7 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 const getColIndex = el => parseInt(el.getAttribute('data-colindex'), 10);
-const GridSkeletonLoadingOverlay = forwardRef(function GridSkeletonLoadingOverlay(props, forwardedRef) {
+export const GridSkeletonLoadingOverlayInner = forwardRef(function GridSkeletonLoadingOverlayInner(props, forwardedRef) {
   const rootProps = useGridRootProps();
   const {
     slots
@@ -53,11 +55,15 @@ const GridSkeletonLoadingOverlay = forwardRef(function GridSkeletonLoadingOverla
   const handleRef = useForkRef(ref, forwardedRef);
   const apiRef = useGridApiContext();
   const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
-  const viewportHeight = dimensions?.viewportInnerSize.height ?? 0;
-  const skeletonRowsCount = Math.ceil(viewportHeight / dimensions.rowHeight);
   const totalWidth = useGridSelector(apiRef, gridColumnsTotalWidthSelector);
   const positions = useGridSelector(apiRef, gridColumnPositionsSelector);
   const inViewportCount = React.useMemo(() => positions.filter(value => value <= totalWidth).length, [totalWidth, positions]);
+  const {
+      skeletonRowsCount,
+      visibleColumns,
+      showFirstRowBorder
+    } = props,
+    rest = _objectWithoutPropertiesLoose(props, _excluded);
   const allVisibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
   const columns = React.useMemo(() => allVisibleColumns.slice(0, inViewportCount), [allVisibleColumns, inViewportCount]);
   const pinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
@@ -110,6 +116,7 @@ const GridSkeletonLoadingOverlay = forwardRef(function GridSkeletonLoadingOverla
           width: "var(--width)",
           height: dimensions.rowHeight,
           "data-colindex": colIndex,
+          empty: visibleColumns && !visibleColumns.has(column.field),
           className: clsx(isPinnedLeft && gridClasses['cell--pinnedLeft'], isPinnedRight && gridClasses['cell--pinnedRight'], showRightBorder && gridClasses['cell--withRightBorder'], showLeftBorder && gridClasses['cell--withLeftBorder']),
           style: _extends({
             '--width': `${column.computedWidth}px`
@@ -125,12 +132,12 @@ const GridSkeletonLoadingOverlay = forwardRef(function GridSkeletonLoadingOverla
         }
       }
       array.push(/*#__PURE__*/_jsx("div", {
-        className: clsx(gridClasses.row, gridClasses.rowSkeleton, i === 0 && gridClasses['row--firstVisible']),
+        className: clsx(gridClasses.row, gridClasses.rowSkeleton, i === 0 && !showFirstRowBorder && gridClasses['row--firstVisible']),
         children: rowCells
       }, `skeleton-row-${i}`));
     }
     return array;
-  }, [slots, columns, pinnedColumns, skeletonRowsCount, rootProps.showCellVerticalBorder, dimensions, positions, getPinnedPosition, isRtl]);
+  }, [skeletonRowsCount, columns, getPinnedPosition, isRtl, pinnedColumns, dimensions.hasScrollY, dimensions.scrollbarSize, dimensions.columnsTotalWidth, dimensions.viewportOuterSize.width, dimensions.rowHeight, positions, rootProps.showCellVerticalBorder, slots, visibleColumns, showFirstRowBorder]);
 
   // Sync the column resize of the overlay columns with the grid
   const handleColumnResize = params => {
@@ -175,9 +182,18 @@ const GridSkeletonLoadingOverlay = forwardRef(function GridSkeletonLoadingOverla
   useGridApiEventHandler(apiRef, 'columnResize', handleColumnResize);
   return /*#__PURE__*/_jsx(SkeletonOverlay, _extends({
     className: classes.root
-  }, props, {
+  }, rest, {
     ref: handleRef,
     children: children
   }));
 });
-export { GridSkeletonLoadingOverlay };
+export const GridSkeletonLoadingOverlay = forwardRef(function GridSkeletonLoadingOverlay(props, forwardedRef) {
+  const apiRef = useGridApiContext();
+  const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
+  const viewportHeight = dimensions?.viewportInnerSize.height ?? 0;
+  const skeletonRowsCount = Math.ceil(viewportHeight / dimensions.rowHeight);
+  return /*#__PURE__*/_jsx(GridSkeletonLoadingOverlayInner, _extends({}, props, {
+    skeletonRowsCount: skeletonRowsCount,
+    ref: forwardedRef
+  }));
+});