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

package/material/index.js

@@ -1,7 +1,16 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["inert", "iconStart", "iconEnd", "children"],
+  _excluded2 = ["slotProps"];
+import * as React from 'react';
 import MUIBadge from '@mui/material/Badge';
 import MUICheckbox from '@mui/material/Checkbox';
+import MUIChip from '@mui/material/Chip';
+import MUICircularProgress from '@mui/material/CircularProgress';
 import MUIDivider from '@mui/material/Divider';
+import MUILinearProgress from '@mui/material/LinearProgress';
+import MUIListItemIcon from '@mui/material/ListItemIcon';
+import MUIListItemText from '@mui/material/ListItemText';
 import MUIMenuList from '@mui/material/MenuList';
 import MUIMenuItem from '@mui/material/MenuItem';
 import MUITextField from '@mui/material/TextField';
@@ -13,10 +22,11 @@ import MUIInputAdornment from '@mui/material/InputAdornment';
 import MUITooltip from '@mui/material/Tooltip';
 import MUIPopper from '@mui/material/Popper';
 import MUIInputLabel from '@mui/material/InputLabel';
-import MUIChip from '@mui/material/Chip';
+import MUISkeleton from '@mui/material/Skeleton';
 import { GridColumnUnsortedIcon } from "./icons/GridColumnUnsortedIcon.js";
 import { GridAddIcon, GridArrowDownwardIcon, GridArrowUpwardIcon, GridCheckIcon, GridCloseIcon, GridColumnIcon, GridDragIcon, GridExpandMoreIcon, GridFilterAltIcon, GridFilterListIcon, GridKeyboardArrowRight, GridMoreVertIcon, GridRemoveIcon, GridSaveAltIcon, GridSearchIcon, GridSeparatorIcon, GridTableRowsIcon, GridTripleDotsVerticalIcon, GridViewHeadlineIcon, GridViewStreamIcon, GridVisibilityOffIcon, GridViewColumnIcon, GridClearIcon, GridLoadIcon, GridDeleteForeverIcon } from "./icons/index.js";
 import MUISelectOption from "./components/MUISelectOption.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 const iconSlots = {
   booleanCellTrueIcon: GridCheckIcon,
   booleanCellFalseIcon: GridCloseIcon,
@@ -52,15 +62,18 @@ const iconSlots = {
   loadIcon: GridLoadIcon,
   filterPanelAddIcon: GridAddIcon,
   filterPanelRemoveAllIcon: GridDeleteForeverIcon,
-  columnReorderIcon: GridDragIcon
+  columnReorderIcon: GridDragIcon,
+  menuItemCheckIcon: GridCheckIcon
 };
-const materialSlots = _extends({}, iconSlots, {
+const baseSlots = {
   baseBadge: MUIBadge,
   baseCheckbox: MUICheckbox,
+  baseCircularProgress: MUICircularProgress,
   baseDivider: MUIDivider,
+  baseLinearProgress: MUILinearProgress,
   baseMenuList: MUIMenuList,
-  baseMenuItem: MUIMenuItem,
-  baseTextField: MUITextField,
+  baseMenuItem: BaseMenuItem,
+  baseTextField: BaseTextField,
   baseFormControl: MUIFormControl,
   baseSelect: MUISelect,
   baseButton: MUIButton,
@@ -70,6 +83,44 @@ const materialSlots = _extends({}, iconSlots, {
   basePopper: MUIPopper,
   baseInputLabel: MUIInputLabel,
   baseSelectOption: MUISelectOption,
+  baseSkeleton: MUISkeleton,
   baseChip: MUIChip
-});
-export default materialSlots;
+};
+const materialSlots = _extends({}, baseSlots, iconSlots);
+export default materialSlots;
+function BaseMenuItem(props) {
+  const {
+      inert,
+      iconStart,
+      iconEnd,
+      children
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  if (inert) {
+    other.disableRipple = true;
+  }
+  return /*#__PURE__*/React.createElement(MUIMenuItem, other, [iconStart && /*#__PURE__*/_jsx(MUIListItemIcon, {
+    children: iconStart
+  }, "1"), /*#__PURE__*/_jsx(MUIListItemText, {
+    children: children
+  }, "2"), iconEnd && /*#__PURE__*/_jsx(MUIListItemIcon, {
+    children: iconEnd
+  }, "3")]);
+}
+function BaseTextField(props) {
+  // MaterialUI v5 doesn't support slotProps, until we drop v5 support we need to
+  // translate the pattern.
+  const {
+      slotProps
+    } = props,
+    rest = _objectWithoutPropertiesLoose(props, _excluded2);
+  return /*#__PURE__*/_jsx(MUITextField, _extends({
+    variant: "outlined"
+  }, rest, {
+    inputProps: slotProps?.htmlInput,
+    InputProps: slotProps?.input,
+    InputLabelProps: _extends({
+      shrink: true
+    }, slotProps?.inputLabel)
+  }));
+}

package/models/api/gridApiCommon.d.ts

@@ -7,7 +7,7 @@ import { GridEditingApi, GridEditingPrivateApi } from './gridEditingApi';
 import type { GridFilterApi } from './gridFilterApi';
 import { GridFocusApi, GridFocusPrivateApi } from './gridFocusApi';
 import type { GridLocaleTextApi } from './gridLocaleTextApi';
-import type { GridParamsApi } from './gridParamsApi';
+import type { GridParamsApi, GridParamsPrivateApi } from './gridParamsApi';
 import { GridPreferencesPanelApi } from './gridPreferencesPanelApi';
 import { GridPrintExportApi } from './gridPrintExportApi';
 import { GridRowApi, GridRowProPrivateApi } from './gridRowApi';
@@ -31,7 +31,7 @@ import type { DataGridProcessedProps } from '../props/DataGridProps';
 import type { GridColumnResizeApi } from '../../hooks/features/columnResize';
 export interface GridApiCommon<GridState extends GridStateCommunity = any, GridInitialState extends GridInitialStateCommunity = any> extends GridCoreApi, GridPipeProcessingApi, GridDensityApi, GridDimensionsApi, GridRowApi, GridRowsMetaApi, GridEditingApi, GridParamsApi, GridColumnApi, GridRowSelectionApi, GridSortApi, GridPaginationApi, GridCsvExportApi, GridFocusApi, GridFilterApi, GridColumnMenuApi, GridPreferencesPanelApi, GridPrintExportApi, GridVirtualizationApi, GridLocaleTextApi, GridScrollApi, GridColumnSpanningApi, GridStateApi<GridState>, GridStatePersistenceApi<GridInitialState>, GridColumnGroupingApi, GridHeaderFilteringApi, GridColumnResizeApi {
 }
-export interface GridPrivateOnlyApiCommon<Api extends GridApiCommon, PrivateApi extends GridPrivateApiCommon, Props extends DataGridProcessedProps> extends GridCorePrivateApi<Api, PrivateApi, Props>, GridStatePrivateApi<PrivateApi['state']>, GridPipeProcessingPrivateApi, GridStrategyProcessingApi, GridColumnSpanningPrivateApi, GridRowsMetaPrivateApi, GridDimensionsPrivateApi, GridEditingPrivateApi, GridLoggerApi, GridFocusPrivateApi, GridHeaderFilteringPrivateApi, GridVirtualizationPrivateApi, GridRowProPrivateApi {
+export interface GridPrivateOnlyApiCommon<Api extends GridApiCommon, PrivateApi extends GridPrivateApiCommon, Props extends DataGridProcessedProps> extends GridCorePrivateApi<Api, PrivateApi, Props>, GridStatePrivateApi<PrivateApi['state']>, GridPipeProcessingPrivateApi, GridStrategyProcessingApi, GridColumnSpanningPrivateApi, GridRowsMetaPrivateApi, GridDimensionsPrivateApi, GridEditingPrivateApi, GridLoggerApi, GridFocusPrivateApi, GridHeaderFilteringPrivateApi, GridVirtualizationPrivateApi, GridRowProPrivateApi, GridParamsPrivateApi {
 }
 export interface GridPrivateApiCommon extends GridApiCommon, GridPrivateOnlyApiCommon<GridApiCommon, GridPrivateApiCommon, DataGridProcessedProps> {
 }

package/models/api/gridCoreApi.d.ts

@@ -13,7 +13,7 @@ export interface GridCoreApi {
      * The React ref of the grid root container div element.
      * @ignore - do not document.
      */
-    rootElementRef: React.RefObject<HTMLDivElement>;
+    rootElementRef: React.RefObject<HTMLDivElement | null>;
     /**
      * Registers a handler for an event.
      * @param {string} event The name of the event.
@@ -59,27 +59,27 @@ export interface GridCorePrivateApi<GridPublicApi extends GridApiCommon, GridPri
     /**
      * The React ref of the grid main container div element.
      */
-    mainElementRef: React.RefObject<HTMLDivElement>;
+    mainElementRef: React.RefObject<HTMLDivElement | null>;
     /**
      * The React ref of the grid's virtual scroller container element.
      */
-    virtualScrollerRef: React.RefObject<HTMLDivElement>;
+    virtualScrollerRef: React.RefObject<HTMLDivElement | null>;
     /**
      * The React ref of the grid's vertical virtual scrollbar container element.
      */
-    virtualScrollbarVerticalRef: React.RefObject<HTMLDivElement>;
+    virtualScrollbarVerticalRef: React.RefObject<HTMLDivElement | null>;
     /**
      * The React ref of the grid's horizontal virtual scrollbar container element.
      */
-    virtualScrollbarHorizontalRef: React.RefObject<HTMLDivElement>;
+    virtualScrollbarHorizontalRef: React.RefObject<HTMLDivElement | null>;
     /**
      * The React ref of the grid column container virtualized div element.
      */
-    columnHeadersContainerRef: React.RefObject<HTMLDivElement>;
+    columnHeadersContainerRef: React.RefObject<HTMLDivElement | null>;
     /**
      * The React ref of the grid header filter row element.
      */
-    headerFiltersElementRef?: React.RefObject<HTMLDivElement>;
+    headerFiltersElementRef?: React.RefObject<HTMLDivElement | null>;
     register: <V extends 'public' | 'private', T extends V extends 'public' ? Partial<GridPublicApi> : Partial<Omit<GridPrivateApi, keyof GridPublicApi>>>(visibility: V, methods: T) => void;
     /**
      * Returns the public API.

package/models/api/gridDensityApi.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { GridDensity } from '../gridDensity';
 export interface GridDensityOption {
-    icon: React.ReactElement;
+    icon: React.ReactElement<any>;
     label: string;
     value: GridDensity;
 }

package/models/api/gridLocaleTextApi.d.ts

@@ -26,6 +26,15 @@ export interface GridLocaleText {
     toolbarQuickFilterPlaceholder: string;
     toolbarQuickFilterLabel: string;
     toolbarQuickFilterDeleteIconLabel: string;
+    toolbarPromptControlPlaceholder: string;
+    toolbarPromptControlWithRecordingPlaceholder: string;
+    toolbarPromptControlRecordingPlaceholder: string;
+    toolbarPromptControlLabel: string;
+    toolbarPromptControlRecordButtonDefaultLabel: string;
+    toolbarPromptControlRecordButtonActiveLabel: string;
+    toolbarPromptControlSendActionLabel: string;
+    toolbarPromptControlSendActionAriaLabel: string;
+    toolbarPromptControlErrorMessage: string;
     toolbarExport: React.ReactNode;
     toolbarExportLabel: string;
     toolbarExportCSV: React.ReactNode;
@@ -35,6 +44,7 @@ export interface GridLocaleText {
     columnsManagementNoColumns: string;
     columnsManagementShowHideAllText: string;
     columnsManagementReset: string;
+    columnsManagementDeleteIconLabel: string;
     filterPanelAddFilter: React.ReactNode;
     filterPanelRemoveAll: React.ReactNode;
     filterPanelDeleteIconLabel: string;
@@ -87,6 +97,7 @@ export interface GridLocaleText {
     'headerFilterOperator>=': string;
     'headerFilterOperator<': string;
     'headerFilterOperator<=': string;
+    headerFilterClear: string;
     filterValueAny: string;
     filterValueTrue: string;
     filterValueFalse: string;

package/models/api/gridParamsApi.d.ts

@@ -1,4 +1,6 @@
 import { GridColDef } from '../colDef';
+import { GridStateColDef } from '../colDef/gridColDef';
+import { GridCellMode } from '../gridCell';
 import { GridValidRowModel, GridRowId, GridTreeNode, GridRowModel } from '../gridRows';
 import { GridCellParams } from '../params/gridCellParams';
 import { GridColumnHeaderParams } from '../params/gridColumnHeaderParams';
@@ -33,10 +35,10 @@ export interface GridParamsApi {
      */
     getRowFormattedValue: <V extends any = any>(row: GridRowModel, colDef: GridColDef) => V;
     /**
-     * Gets the underlying DOM element for a cell at the given `id` and `field`.
+     * Gets the [[GridCellParams]] object that is passed as argument in events.
      * @param {GridRowId} id The id of the row.
      * @param {string} field The column field.
-     * @returns {HTMLDivElement | null} The DOM element or `null`.
+     * @returns {GridCellParams} The cell params.
      */
     getCellElement: (id: GridRowId, field: string) => HTMLDivElement | null;
     /**
@@ -72,3 +74,28 @@ export interface GridParamsApi {
      */
     getColumnHeaderParams: (field: string) => GridColumnHeaderParams;
 }
+export interface GridParamsPrivateApi {
+    /**
+     * @typedef {Object} CellParamsOverrides
+     * @property {GridCellMode} cellMode - The mode of the cell.
+     * @property {GridStateColDef} colDef - The column definition.
+     * @property {boolean} hasFocus - Indicates if the cell is in focus.
+     * @property {GridTreeNode} rowNode - The node of the row that the current cell belongs to.
+     * @property {0|-1} tabIndex - The tabIndex value.
+     */
+    /**
+     * Used internally to render the cell based on existing row data provided by the GridRow.
+     * @param {GridRowId} id The id of the row.
+     * @param {string} field The column field.
+     * @param {GridValidRowModel} row The row model.
+     * @param {CellParamsOverrides} cellParams The cell params.
+     * @returns {GridCellParams} The cell params.
+     */
+    getCellParamsForRow: <R extends GridValidRowModel = any, V = unknown, F = V, N extends GridTreeNode = GridTreeNode>(id: GridRowId, field: string, row: R, { cellMode, colDef, hasFocus, rowNode, tabIndex, }: {
+        cellMode: GridCellMode;
+        colDef: GridStateColDef;
+        hasFocus: boolean;
+        rowNode: N;
+        tabIndex: 0 | -1;
+    }) => GridCellParams<R, V, F, N>;
+}

package/models/api/gridStateApi.d.ts

@@ -33,5 +33,5 @@ export interface GridStatePrivateApi<State extends GridStateCommunity> {
      * Updates a control state that binds the model, the onChange prop, and the grid state together.
      * @param {GridControlStateItem>} controlState The [[GridControlStateItem]] to be registered.
      */
-    registerControlState: <E extends keyof GridControlledStateEventLookup>(controlState: GridControlStateItem<State, E>) => void;
+    registerControlState: <E extends keyof GridControlledStateEventLookup, Args>(controlState: GridControlStateItem<State, Args, E>) => void;
 }

package/models/api/index.d.ts

@@ -1,5 +1,5 @@
 import type { GridEditingApi } from './gridEditingApi';
-export * from './gridParamsApi';
+export type { GridParamsApi } from './gridParamsApi';
 export type { GridCoreApi } from './gridCoreApi';
 export * from './gridColumnApi';
 export * from './gridDensityApi';

package/models/api/index.js

@@ -1,4 +1,3 @@
-export * from "./gridParamsApi.js";
 export * from "./gridColumnApi.js";
 export * from "./gridDensityApi.js";
 export * from "./gridRowApi.js";

package/models/colDef/gridColDef.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridCellClassNamePropType } from '../gridCellClass';
 import { GridColumnHeaderClassNamePropType } from '../gridColumnHeaderClass';
 import type { GridFilterOperator } from '../gridFilterOperator';
@@ -24,55 +25,55 @@ export type ValueOptions = string | number | {
  * Value that can be used as a key for grouping rows
  */
 export type GridKeyValue = string | number | boolean;
-export type GridApplyQuickFilter<R extends GridValidRowModel = GridValidRowModel, V = any> = (value: V, row: R, column: GridColDef, apiRef: React.MutableRefObject<GridApiCommunity>) => boolean;
-export type GetApplyQuickFilterFn<R extends GridValidRowModel = GridValidRowModel, V = any> = (value: any, colDef: GridStateColDef<R, V>, apiRef: React.MutableRefObject<GridApiCommunity>) => null | GridApplyQuickFilter<R, V>;
-export type GridValueGetter<R extends GridValidRowModel = GridValidRowModel, V = any, F = V, TValue = never> = (value: TValue, row: R, column: GridColDef<R, V, F>, apiRef: React.MutableRefObject<GridApiCommunity>) => V;
-export type GridValueFormatter<R extends GridValidRowModel = GridValidRowModel, V = any, F = V, TValue = never> = (value: TValue, row: R, column: GridColDef<R, V, F>, apiRef: React.MutableRefObject<GridApiCommunity>) => F;
-export type GridValueSetter<R extends GridValidRowModel = GridValidRowModel, V = any, F = V> = (value: V, row: R, column: GridColDef<R, V, F>, apiRef: React.MutableRefObject<GridApiCommunity>) => R;
-export type GridValueParser<R extends GridValidRowModel = GridValidRowModel, V = any, F = V> = (value: F | undefined, row: R | undefined, column: GridColDef<R, V, F>, apiRef: React.MutableRefObject<GridApiCommunity>) => V;
-export type GridColSpanFn<R extends GridValidRowModel = GridValidRowModel, V = any, F = V> = (value: V, row: R, column: GridColDef<R, V, F>, apiRef: React.MutableRefObject<GridApiCommunity>) => number | undefined;
+export type GridApplyQuickFilter<R extends GridValidRowModel = GridValidRowModel, V = any> = (value: V, row: R, column: GridColDef, apiRef: RefObject<GridApiCommunity>) => boolean;
+export type GetApplyQuickFilterFn<R extends GridValidRowModel = GridValidRowModel, V = any> = (value: any, colDef: GridStateColDef<R, V>, apiRef: RefObject<GridApiCommunity>) => null | GridApplyQuickFilter<R, V>;
+export type GridValueGetter<R extends GridValidRowModel = GridValidRowModel, V = any, F = V, TValue = never> = (value: TValue, row: R, column: GridColDef<R, V, F>, apiRef: RefObject<GridApiCommunity>) => V;
+export type GridValueFormatter<R extends GridValidRowModel = GridValidRowModel, V = any, F = V, TValue = never> = (value: TValue, row: R, column: GridColDef<R, V, F>, apiRef: RefObject<GridApiCommunity>) => F;
+export type GridValueSetter<R extends GridValidRowModel = GridValidRowModel, V = any, F = V> = (value: V, row: R, column: GridColDef<R, V, F>, apiRef: RefObject<GridApiCommunity>) => R;
+export type GridValueParser<R extends GridValidRowModel = GridValidRowModel, V = any, F = V> = (value: F | undefined, row: R | undefined, column: GridColDef<R, V, F>, apiRef: RefObject<GridApiCommunity>) => V;
+export type GridColSpanFn<R extends GridValidRowModel = GridValidRowModel, V = any, F = V> = (value: V, row: R, column: GridColDef<R, V, F>, apiRef: RefObject<GridApiCommunity>) => number | undefined;
 /**
  * Column Definition base interface.
  */
 export interface GridBaseColDef<R extends GridValidRowModel = GridValidRowModel, V = any, F = V> {
     /**
-     * The column identifier. It's used to map with [[GridRowModel]] values.
+     * The unique identifier of the column. Used to map with [[GridRowModel]] values.
      */
     field: string;
     /**
-     * The title of the column rendered in the column header cell.
+     * The title displayed in the column header cell.
      */
     headerName?: string;
     /**
-     * The description of the column rendered as tooltip if the column header name is not fully displayed.
+     * The tooltip text shown when the column header name is truncated.
      */
     description?: string;
     /**
-     * Set the width of the column.
+     * The width of the column in pixels.
      * @default 100
      */
     width?: number;
     /**
-     * If set, it indicates that a column has fluid width. Range [0, ∞).
+     * The flex grow factor of the column. Must be a positive number.
      */
     flex?: number;
     /**
-     * Sets the minimum width of a column.
+     * The minimum width of the column in pixels.
      * @default 50
      */
     minWidth?: number;
     /**
-     * Sets the maximum width of a column.
+     * The maximum width of the column in pixels.
      * @default Infinity
      */
     maxWidth?: number;
     /**
-     * If `false`, removes the buttons for hiding this column.
+     * If `false`, removes the option to hide this column.
      * @default true
      */
     hideable?: boolean;
     /**
-     * If `true`, the column is sortable.
+     * If `false`, disables sorting for this column.
      * @default true
      */
     sortable?: boolean;
@@ -81,7 +82,7 @@ export interface GridBaseColDef<R extends GridValidRowModel = GridValidRowModel,
      */
     sortingOrder?: readonly GridSortDirection[];
     /**
-     * If `true`, the column is resizable.
+     * If `false`, disables resizing for this column.
      * @default true
      */
     resizable?: boolean;
@@ -109,7 +110,7 @@ export interface GridBaseColDef<R extends GridValidRowModel = GridValidRowModel,
      */
     sortComparator?: GridComparatorFn<V>;
     /**
-     * Allows to use a different comparator function depending on the sort direction.
+     * Provide an alternative comparator function for sorting.
      * Takes precedence over `sortComparator`.
      * @param {GridSortDirection} sortDirection The direction of the sort.
      * @returns {GridComparatorFn<V>} The comparator function to use.
@@ -122,25 +123,25 @@ export interface GridBaseColDef<R extends GridValidRowModel = GridValidRowModel,
      */
     type?: GridColType;
     /**
-     * Allows to align the column values in cells.
+     * Align cell content.
      */
     align?: GridAlignment;
     /**
-     * Function that allows to get a specific data instead of field to render in the cell.
+     * Function that returns specific data to render in the cell instead of using the field value.
      */
     valueGetter?: GridValueGetter<R, V, F>;
     /**
-     * Function that allows to provide a specific value to be used in row spanning.
+     * Function that returns a specific value to be used in row spanning.
      */
     rowSpanValueGetter?: GridValueGetter<R, V, F>;
     /**
-     * Function that allows to customize how the entered value is stored in the row.
-     * It only works with cell/row editing.
+     * Function that customizes how the entered value is stored in the row.
+     * Only works with cell/row editing.
      * @returns {R} The row with the updated field.
      */
     valueSetter?: GridValueSetter<R, V, F>;
     /**
-     * Function that allows to apply a formatter before rendering its value.
+     * Formats the cell value before rendering.
      */
     valueFormatter?: GridValueFormatter<R, V, F>;
     /**
@@ -149,7 +150,7 @@ export interface GridBaseColDef<R extends GridValidRowModel = GridValidRowModel,
      */
     valueParser?: GridValueParser<R, V, F>;
     /**
-     * Class name that will be added in cells for that column.
+     * Class name added to cells in this column.
      */
     cellClassName?: GridCellClassNamePropType<R, V>;
     /**
@@ -159,38 +160,38 @@ export interface GridBaseColDef<R extends GridValidRowModel = GridValidRowModel,
      */
     display?: 'text' | 'flex';
     /**
-     * Allows to override the component rendered as cell for this column.
+     * Override the component rendered as cell for this column.
      * @template R, V, F
      * @param {GridRenderCellParams<R, V, F>} params Object containing parameters for the renderer.
      * @returns {React.ReactNode} The element to be rendered.
      */
     renderCell?: (params: GridRenderCellParams<R, V, F>) => React.ReactNode;
     /**
-     * Allows to override the component rendered in edit cell mode for this column.
+     * Override the component rendered in edit cell mode for this column.
      * @param {GridRenderEditCellParams} params Object containing parameters for the renderer.
      * @returns {React.ReactNode} The element to be rendered.
      */
     renderEditCell?: (params: GridRenderEditCellParams<R, V, F>) => React.ReactNode;
     /**
      * Callback fired when the edit props of the cell changes.
-     * It allows to process the props that saved into the state.
+     * Processes the props before being saved into the state.
      * @param {GridPreProcessEditCellProps} params Object containing parameters of the cell being edited.
      * @returns {GridEditCellProps | Promise<GridEditCellProps>} The new edit cell props.
      */
     preProcessEditCellProps?: (params: GridPreProcessEditCellProps) => GridEditCellProps | Promise<GridEditCellProps>;
     /**
-     * Class name that will be added in the column header cell.
+     * Class name added to the column header cell.
      */
     headerClassName?: GridColumnHeaderClassNamePropType;
     /**
-     * Allows to render a component in the column header cell.
+     * Override the component rendered in the column header cell.
      * @template R, V, F
      * @param {GridColumnHeaderParams<R, V, F>} params Object containing parameters for the renderer.
      * @returns {React.ReactNode} The element to be rendered.
      */
     renderHeader?: (params: GridColumnHeaderParams<R, V, F>) => React.ReactNode;
     /**
-     * Header cell element alignment.
+     * Align column header content.
      */
     headerAlign?: GridAlignment;
     /**
@@ -211,13 +212,13 @@ export interface GridBaseColDef<R extends GridValidRowModel = GridValidRowModel,
     /**
      * Allows setting the filter operators for this column.
      */
-    filterOperators?: readonly GridFilterOperator<R, V, F>[];
+    filterOperators?: readonly GridFilterOperator<R, V, F, any>[];
     /**
      * The callback that generates a filtering function for a given quick filter value.
      * This function can return `null` to skip filtering for this value and column.
      * @param {any} value The value with which we want to filter the column.
      * @param {GridStateColDef} colDef The column from which we want to filter the rows.
-     * @param {React.MutableRefObject<GridApiCommunity>} apiRef Deprecated: The API of the grid.
+     * @param {RefObject<GridApiCommunity>} apiRef Deprecated: The API of the grid.
      * @returns {null | GridApplyQuickFilter} The function to call to check if a row pass this filter value or not.
      */
     getApplyQuickFilterFn?: GetApplyQuickFilterFn<R, V>;
@@ -236,6 +237,10 @@ export interface GridBaseColDef<R extends GridValidRowModel = GridValidRowModel,
      * @default 1
      */
     colSpan?: number | GridColSpanFn<R, V, F>;
+    /**
+     * Example values that can be used by the grid to get more context about the column.
+     */
+    unstable_examples?: V[];
 }
 /**
  * Column Definition interface used for columns with the `actions` type.

package/models/controlStateItem.d.ts

@@ -2,10 +2,10 @@ import { GridCallbackDetails } from './api/gridCallbackDetails';
 import type { GridEventLookup, GridControlledStateEventLookup } from './events';
 import type { OutputSelector } from '../utils/createSelector';
 import { GridStateCommunity } from './gridStateCommunity';
-export interface GridControlStateItem<State extends GridStateCommunity, E extends keyof GridControlledStateEventLookup> {
+export interface GridControlStateItem<State extends GridStateCommunity, Args, E extends keyof GridControlledStateEventLookup> {
     stateId: string;
     propModel?: GridEventLookup[E]['params'];
-    stateSelector: OutputSelector<State, GridControlledStateEventLookup[E]['params']> | ((state: State) => GridControlledStateEventLookup[E]['params']);
+    stateSelector: OutputSelector<State, Args, GridControlledStateEventLookup[E]['params']> | ((state: State) => GridControlledStateEventLookup[E]['params']);
     propOnChange?: (model: GridControlledStateEventLookup[E]['params'], details: GridCallbackDetails) => void;
     changeEvent: E;
 }

package/models/events/gridEventLookup.d.ts

@@ -399,6 +399,7 @@ export interface GridControlledStateEventLookup {
 export interface GridControlledStateReasonLookup {
     filter: 'upsertFilterItem' | 'upsertFilterItems' | 'deleteFilterItem' | 'changeLogicOperator' | 'restoreState' | 'removeAllFilterItems';
     pagination: 'setPaginationModel' | 'stateRestorePreProcessing';
+    rows: 'addSkeletonRows';
 }
 export interface GridEventLookup extends GridRowEventLookup, GridColumnHeaderEventLookup, GridHeaderFilterEventLookup, GridColumnGroupHeaderEventLookup, GridCellEventLookup, GridControlledStateEventLookup {
     /**
@@ -583,7 +584,12 @@ export interface GridEventLookup extends GridRowEventLookup, GridColumnHeaderEve
      * Fired when the content size used by the `GridVirtualScroller` changes.
      * @ignore - do not document.
      */
-    virtualScrollerContentSizeChange: {};
+    virtualScrollerContentSizeChange: {
+        params: {
+            columnsTotalWidth: number;
+            contentHeight: number;
+        };
+    };
     /**
      * Fired when the content is scrolled by the mouse wheel.
      * It's attached to the "mousewheel" event.

package/models/gridBaseSlots.d.ts

@@ -0,0 +1,95 @@
+type Ref<T = HTMLElement> = React.RefCallback<T | null> | React.RefObject<T | null> | null;
+export type BadgeProps = {
+    badgeContent?: React.ReactNode;
+    children: React.ReactNode;
+    color?: 'primary' | 'default' | 'error';
+    invisible?: boolean;
+    overlap?: 'circular';
+    variant?: 'dot';
+    style?: React.CSSProperties;
+};
+export type ButtonProps = {
+    ref?: Ref;
+    children?: React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+    id?: string;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
+    role?: string;
+    size?: 'small' | 'medium' | 'large';
+    startIcon?: React.ReactNode;
+    style?: React.CSSProperties;
+    tabIndex?: number;
+    title?: string;
+    touchRippleRef?: any;
+};
+export type IconButtonProps = Omit<ButtonProps, 'startIcon'> & {
+    label?: string;
+    color?: 'default' | 'inherit' | 'primary';
+    edge?: 'start' | 'end' | false;
+};
+export type DividerProps = {};
+export type MenuItemProps = {
+    autoFocus?: boolean;
+    children?: React.ReactNode;
+    /** For items that aren't interactive themselves (but may contain an interactive widget) */
+    inert?: boolean;
+    disabled?: boolean;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    iconStart?: React.ReactNode;
+    iconEnd?: React.ReactNode;
+    selected?: boolean;
+    value?: number | string | readonly string[];
+    style?: React.CSSProperties;
+};
+export type CircularProgressProps = {
+    /**
+     * Pixels or CSS value.
+     * @default 40
+     */
+    size?: number | string;
+    /** @default 'primary' */
+    color?: 'inherit' | 'primary';
+};
+export type LinearProgressProps = {};
+export type SkeletonProps = {
+    variant?: 'circular' | 'text';
+    width?: number | string;
+    height?: number | string;
+};
+export type TextFieldProps = {
+    autoComplete?: string;
+    className?: string;
+    color?: 'primary' | 'error';
+    disabled?: boolean;
+    error?: boolean;
+    fullWidth?: boolean;
+    helperText?: string | null;
+    id?: string;
+    inputRef?: React.Ref<HTMLInputElement>;
+    label?: React.ReactNode;
+    onChange?: React.ChangeEventHandler;
+    onKeyDown?: React.KeyboardEventHandler;
+    placeholder?: string;
+    size?: 'small' | 'medium';
+    slotProps?: {
+        input?: {
+            disabled?: boolean;
+            endAdornment?: React.ReactNode;
+            startAdornment?: React.ReactNode;
+        };
+        inputLabel?: {};
+        htmlInput?: React.InputHTMLAttributes<HTMLInputElement>;
+    };
+    style?: React.CSSProperties;
+    tabIndex?: number;
+    type?: React.HTMLInputTypeAttribute;
+    value?: string;
+};
+export type TooltipProps = {
+    children: React.ReactElement<any, any>;
+    enterDelay?: number;
+    title: React.ReactNode;
+};
+export {};