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

package/modern/material/variables.js

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import { alpha, darken, lighten } from '@mui/material/styles';
+import { useTheme } from '@mui/material/styles';
+import { hash } from '@mui/x-internals/hash';
+import { vars } from "../constants/cssVariables.js";
+export function useMaterialCSSVariables() {
+  const theme = useTheme();
+  return React.useMemo(() => {
+    const id = hash(JSON.stringify(theme));
+    const variables = transformTheme(theme);
+    return {
+      id,
+      variables
+    };
+  }, [theme]);
+}
+function transformTheme(t) {
+  const borderColor = getBorderColor(t);
+  const dataGridPalette = t.palette.DataGrid; // FIXME: docs typecheck error
+
+  const backgroundBase = dataGridPalette?.bg ?? (t.vars || t).palette.background.default;
+  const backgroundHeader = dataGridPalette?.headerBg ?? backgroundBase;
+  const backgroundPinned = dataGridPalette?.pinnedBg ?? backgroundBase;
+  const backgroundBackdrop = t.vars ? `rgba(${t.vars.palette.background.defaultChannel} / ${t.vars.palette.action.disabledOpacity})` : alpha(t.palette.background.default, t.palette.action.disabledOpacity);
+  const selectedColor = t.vars ? `rgb(${t.vars.palette.primary.mainChannel})` : t.palette.primary.main;
+  const k = vars.keys;
+  return {
+    [k.spacingUnit]: t.spacing(1),
+    [k.colors.border.base]: borderColor,
+    [k.colors.background.base]: backgroundBase,
+    [k.colors.background.overlay]: t.palette.mode === 'dark' ? `color-mix(in srgb, ${t.palette.background.paper} 95%, #fff)` : t.palette.background.paper,
+    [k.colors.background.backdrop]: backgroundBackdrop,
+    [k.colors.foreground.base]: t.palette.text.primary,
+    [k.colors.foreground.muted]: t.palette.text.secondary,
+    [k.colors.foreground.accent]: t.palette.primary.dark,
+    [k.colors.foreground.disabled]: t.palette.text.disabled,
+    [k.colors.interactive.hover]: removeOpacity(t.palette.action.hover),
+    [k.colors.interactive.hoverOpacity]: t.palette.action.hoverOpacity,
+    [k.colors.interactive.focus]: removeOpacity(t.palette.primary.main),
+    [k.colors.interactive.focusOpacity]: t.palette.action.focusOpacity,
+    [k.colors.interactive.disabled]: removeOpacity(t.palette.action.disabled),
+    [k.colors.interactive.disabledOpacity]: t.palette.action.disabledOpacity,
+    [k.colors.interactive.selected]: selectedColor,
+    [k.colors.interactive.selectedOpacity]: t.palette.action.selectedOpacity,
+    [k.header.background.base]: backgroundHeader,
+    [k.cell.background.pinned]: backgroundPinned,
+    [k.radius.base]: typeof t.shape.borderRadius === 'number' ? `${t.shape.borderRadius}px` : t.shape.borderRadius,
+    [k.typography.fontFamily.base]: t.typography.fontFamily,
+    [k.typography.fontWeight.light]: t.typography.fontWeightLight,
+    [k.typography.fontWeight.regular]: t.typography.fontWeightRegular,
+    [k.typography.fontWeight.medium]: t.typography.fontWeightMedium,
+    [k.typography.fontWeight.bold]: t.typography.fontWeightBold,
+    [k.typography.body.fontFamily]: t.typography.body2.fontFamily,
+    [k.typography.body.fontSize]: t.typography.body2.fontSize,
+    [k.typography.body.fontWeight]: t.typography.body2.fontWeight,
+    [k.typography.body.letterSpacing]: t.typography.body2.letterSpacing,
+    [k.typography.body.lineHeight]: t.typography.body2.lineHeight,
+    [k.typography.small.fontFamily]: t.typography.caption.fontFamily,
+    [k.typography.small.fontSize]: t.typography.caption.fontSize,
+    [k.typography.small.fontWeight]: t.typography.caption.fontWeight,
+    [k.typography.small.letterSpacing]: t.typography.caption.letterSpacing,
+    [k.typography.small.lineHeight]: t.typography.caption.lineHeight,
+    [k.transitions.easing.easeIn]: t.transitions.easing.easeIn,
+    [k.transitions.easing.easeOut]: t.transitions.easing.easeOut,
+    [k.transitions.easing.easeInOut]: t.transitions.easing.easeInOut,
+    [k.transitions.duration.short]: `${t.transitions.duration.shorter}ms`,
+    [k.transitions.duration.base]: `${t.transitions.duration.short}ms`,
+    [k.transitions.duration.long]: `${t.transitions.duration.standard}ms`,
+    [k.shadows.base]: t.shadows[2],
+    [k.shadows.overlay]: t.shadows[8],
+    [k.zIndex.panel]: t.zIndex.modal,
+    [k.zIndex.menu]: t.zIndex.modal
+  };
+}
+function getBorderColor(theme) {
+  if (theme.vars) {
+    return theme.vars.palette.TableCell.border;
+  }
+  if (theme.palette.mode === 'light') {
+    return lighten(alpha(theme.palette.divider, 1), 0.88);
+  }
+  return darken(alpha(theme.palette.divider, 1), 0.68);
+}
+function setOpacity(color, opacity) {
+  return `rgba(from ${color} r g b / ${opacity})`;
+}
+function removeOpacity(color) {
+  return setOpacity(color, 1);
+}

package/modern/models/api/gridRowSelectionApi.d.ts

@@ -1,4 +1,5 @@
-import { GridRowId, GridRowModel } from "../gridRows.js";
+import type { GridRowId, GridRowModel } from '../gridRows';
+import type { GridRowSelectionModel } from '../gridRowSelectionModel';
 /**
  * The selection API interface that is available in the grid [[apiRef]].
  */
@@ -25,6 +26,7 @@ export interface GridRowSelectionApi {
   /**
    * Returns an array of the selected rows.
    * @returns {Map<GridRowId, GridRowModel>} A `Map` with the selected rows.
+   * @deprecated Use `gridRowSelectionIdsSelector`, `gridRowSelectionCountSelector`, or `gridRowSelectionManagerSelector` instead.
    */
   getSelectedRows: () => Map<GridRowId, GridRowModel>;
   /**
@@ -32,7 +34,7 @@ export interface GridRowSelectionApi {
    * Any row already selected will be unselected.
    * @param {readonly GridRowId[]} rowIds The row ids to select.
    */
-  setRowSelectionModel: (rowIds: readonly GridRowId[]) => void;
+  setRowSelectionModel: (rowIds: GridRowSelectionModel) => void;
 }
 export interface GridRowMultiSelectionApi {
   /**

package/modern/models/api/gridSortApi.d.ts

@@ -23,7 +23,7 @@ export interface GridSortApi {
    * Sorts a column.
    * @param {GridColDef['field']} field The field identifier of the column to be sorted.
    * @param {GridSortDirection} direction The direction to be sorted. By default, the next in the `sortingOrder` prop.
-   * @param {boolean} allowMultipleSorting Whether to keep the existing [[GridSortItem]]. Default is `false`.
+   * @param {boolean} allowMultipleSorting Whether to keep the existing [GridSortModel]. Default is `false`.
    */
   sortColumn: (field: GridColDef['field'], direction?: GridSortDirection, allowMultipleSorting?: boolean) => void;
   /**

package/modern/models/configuration/gridConfiguration.d.ts

@@ -1,9 +1,15 @@
 import * as React from 'react';
 import { GridRowAriaAttributesInternalHook } from "./gridRowConfiguration.js";
+import type { GridCSSVariablesInterface } from '../../constants/cssVariables';
 export interface GridAriaAttributesInternalHook {
   useGridAriaAttributes: () => React.HTMLAttributes<HTMLElement>;
 }
-export interface GridInternalHook extends GridAriaAttributesInternalHook, GridRowAriaAttributesInternalHook {}
+export interface GridInternalHook extends GridAriaAttributesInternalHook, GridRowAriaAttributesInternalHook {
+  useCSSVariables: () => {
+    id: string;
+    variables: GridCSSVariablesInterface;
+  };
+}
 export interface GridConfiguration {
   hooks: GridInternalHook;
 }

package/modern/models/gridBaseSlots.d.ts

@@ -1,4 +1,59 @@
 type Ref<T = HTMLElement> = React.RefCallback<T | null> | React.RefObject<T | null> | null;
+export interface AutocompleteFilterOptionsState<Value> {
+  inputValue: string;
+  getOptionLabel: (option: Value) => string;
+}
+type AcValueMap<FreeSolo> = FreeSolo extends true ? string : never;
+type AcValue<Value, Multiple, DisableClearable, FreeSolo> = Multiple extends true ? Array<Value | AcValueMap<FreeSolo>> : DisableClearable extends true ? NonNullable<Value | AcValueMap<FreeSolo>> : Value | null | AcValueMap<FreeSolo>;
+export type AutocompleteProps<Value = string, Multiple extends boolean = false, DisableClearable extends boolean = false, FreeSolo extends boolean = false> = {
+  id?: string;
+  /** Allow multiple selection. */
+  multiple?: Multiple;
+  /** Allow to add new options. */
+  freeSolo?: FreeSolo;
+  value?: AcValue<Value, Multiple, DisableClearable, FreeSolo>;
+  options: ReadonlyArray<Value>;
+  /**
+   * Used to determine the string value for a given option.
+   * It's used to fill the input (and the list box options if `renderOption` is not provided).
+   *
+   * If used in free solo mode, it must accept both the type of the options and a string.
+   *
+   * @param {Value} option The option
+   * @returns {string} The label
+   * @default (option) => option.label ?? option
+   */
+  getOptionLabel?: (option: Value | AcValueMap<FreeSolo>) => string;
+  /**
+   * Used to determine if the option represents the given value.
+   * Uses strict equality by default.
+   * ⚠️ Both arguments need to be handled, an option can only match with one value.
+   *
+   * @param {Value} option The option to test.
+   * @param {Value} value The value to test against.
+   * @returns {boolean} true if value matches
+   */
+  isOptionEqualToValue?: (option: Value, value: Value) => boolean;
+  /**
+   * Callback fired when the value changes.
+   *
+   * @param {React.SyntheticEvent} event The event source of the callback.
+   * @param {Value|Value[]} value The new value of the component.
+   */
+  onChange?: (event: React.SyntheticEvent, value: AcValue<Value, Multiple, DisableClearable, FreeSolo>) => void;
+  /**
+   * Callback fired when the input value changes.
+   *
+   * @param {React.SyntheticEvent} event The event source of the callback.
+   * @param {string} value The new value of the input.
+   */
+  onInputChange?: (event: React.SyntheticEvent, value: string) => void;
+  label?: React.ReactNode;
+  placeholder?: string;
+  slotProps?: {
+    textField: TextFieldProps;
+  };
+};
 export type BadgeProps = {
   badgeContent?: React.ReactNode;
   children: React.ReactNode;
@@ -53,7 +108,9 @@ export type IconButtonProps = Omit<ButtonProps, 'startIcon'> & {
   color?: 'default' | 'inherit' | 'primary';
   edge?: 'start' | 'end' | false;
 };
-export type DividerProps = {};
+export type DividerProps = {
+  orientation?: 'horizontal' | 'vertical';
+};
 export type MenuListProps = {
   ref?: Ref<HTMLUListElement>;
   id?: string;
@@ -90,7 +147,6 @@ export type PopperProps = {
   clickAwayMouseEvent?: false | ClickAwayMouseEventHandler;
   flip?: boolean;
   focusTrap?: boolean;
-  focusTrapEnabled?: boolean;
   onExited?: (node: HTMLElement | null) => void;
   onClickAway?: (event: MouseEvent | TouchEvent) => void;
   onDidShow?: () => void;
@@ -169,6 +225,7 @@ export type SwitchProps = {
   size?: 'small' | 'medium';
 };
 export type TextFieldProps = {
+  role?: string;
   autoComplete?: string;
   className?: string;
   color?: 'primary' | 'error';
@@ -184,11 +241,7 @@ export type TextFieldProps = {
   placeholder?: string;
   size?: 'small' | 'medium';
   slotProps?: {
-    input?: {
-      disabled?: boolean;
-      endAdornment?: React.ReactNode;
-      startAdornment?: React.ReactNode;
-    };
+    input?: Partial<InputProps>;
     inputLabel?: {};
     htmlInput?: React.InputHTMLAttributes<HTMLInputElement>;
   };
@@ -196,6 +249,7 @@ export type TextFieldProps = {
   tabIndex?: number;
   type?: React.HTMLInputTypeAttribute;
   value?: string;
+  ref?: Ref<HTMLInputElement>;
 };
 export type TooltipProps = {
   children: React.ReactElement<any, any>;

package/modern/models/gridDataSource.d.ts

@@ -1,4 +1,4 @@
-import type { GridSortModel, GridFilterModel, GridRowModel, GridPaginationModel } from '.';
+import type { GridSortModel, GridFilterModel, GridRowModel, GridPaginationModel, GridRowId } from '.';
 export interface GridGetRowsParams {
   sortModel: GridSortModel;
   filterModel: GridFilterModel;
@@ -15,6 +15,11 @@ export interface GridGetRowsParams {
    */
   end: number;
 }
+export interface GridUpdateRowParams {
+  rowId: GridRowId;
+  updatedRow: GridRowModel;
+  previousRow: GridRowModel;
+}
 export interface GridGetRowsResponse {
   rows: GridRowModel[];
   /**
@@ -39,11 +44,11 @@ export interface GridDataSource {
    */
   getRows(params: GridGetRowsParams): Promise<GridGetRowsResponse>;
   /**
-   * This method will be called when the user updates a row [Not yet implemented].
-   * @param {GridRowModel} updatedRow The updated row.
+   * This method will be called when the user updates a row.
+   * @param {GridUpdateRowParams} params The parameters required to update the row.
    * @returns {Promise<any>} If resolved (synced on the backend), the grid will update the row and mutate the cache.
    */
-  updateRow?(updatedRow: GridRowModel): Promise<any>;
+  updateRow?(params: GridUpdateRowParams): Promise<any>;
 }
 export interface GridDataSourceCache {
   /**

package/modern/models/gridIconSlotsComponent.d.ts

@@ -70,7 +70,7 @@ export interface GridIconSlotsComponent {
   densityComfortableIcon: React.JSXElementConstructor<any>;
   /**
    * Icon displayed on the open export button present in the toolbar by default.
-   * @default GridSaveAltIcon
+   * @default GridDownloadIcon
    */
   exportIcon: React.JSXElementConstructor<any>;
   /**

package/modern/models/gridRowSelectionManager.d.ts

@@ -0,0 +1,9 @@
+import type { GridRowId } from './gridRows';
+import type { GridRowSelectionModel } from './gridRowSelectionModel';
+export interface RowSelectionManager {
+  data: Set<GridRowId>;
+  has(id: GridRowId): boolean;
+  select(id: GridRowId): void;
+  unselect(id: GridRowId): void;
+}
+export declare const createRowSelectionManager: (model: GridRowSelectionModel) => RowSelectionManager;

package/modern/models/gridRowSelectionManager.js

@@ -0,0 +1,36 @@
+class IncludeManager {
+  constructor(model) {
+    this.data = void 0;
+    this.data = model.ids;
+  }
+  has(id) {
+    return this.data.has(id);
+  }
+  select(id) {
+    this.data.add(id);
+  }
+  unselect(id) {
+    this.data.delete(id);
+  }
+}
+class ExcludeManager {
+  constructor(model) {
+    this.data = void 0;
+    this.data = model.ids;
+  }
+  has(id) {
+    return !this.data.has(id);
+  }
+  select(id) {
+    this.data.delete(id);
+  }
+  unselect(id) {
+    this.data.add(id);
+  }
+}
+export const createRowSelectionManager = model => {
+  if (model.type === 'include') {
+    return new IncludeManager(model);
+  }
+  return new ExcludeManager(model);
+};

package/modern/models/gridRowSelectionModel.d.ts

@@ -3,5 +3,7 @@ export type GridRowSelectionPropagation = {
   descendants?: boolean;
   parents?: boolean;
 };
-export type GridInputRowSelectionModel = readonly GridRowId[] | GridRowId;
-export type GridRowSelectionModel = readonly GridRowId[];
+export type GridRowSelectionModel = {
+  type: 'include' | 'exclude';
+  ids: Set<GridRowId>;
+};

package/modern/models/gridSlotsComponent.d.ts

@@ -3,6 +3,11 @@ import type { GridSlotProps } from './gridSlotsComponentsProps';
 import type { GridIconSlotsComponent } from './gridIconSlotsComponent';
 export type { GridSlotProps } from './gridSlotsComponentsProps';
 export interface GridBaseSlots {
+  /**
+   * The custom Autocomplete component used in the grid for both header and cells.
+   * @default Autocomplete
+   */
+  baseAutocomplete: React.JSXElementConstructor<GridSlotProps['baseAutocomplete']>;
   /**
    * The custom Badge component used in the grid for both header and cells.
    * @default Badge
@@ -18,11 +23,6 @@ export interface GridBaseSlots {
    * @default CircularProgress
    */
   baseCircularProgress: React.JSXElementConstructor<GridSlotProps['baseCircularProgress']>;
-  /**
-   * The custom Chip component used in the grid.
-   * @default Chip
-   */
-  baseChip: React.JSXElementConstructor<GridSlotProps['baseChip']>;
   /**
    * The custom Divider component used in the grid.
    * @default Divider
@@ -43,21 +43,11 @@ export interface GridBaseSlots {
    * @default MenuItem
    */
   baseMenuItem: React.JSXElementConstructor<GridSlotProps['baseMenuItem']>;
-  /**
-   * The custom InputAdornment component used in the grid.
-   * @default InputAdornment
-   */
-  baseInputAdornment: React.JSXElementConstructor<GridSlotProps['baseInputAdornment']>;
   /**
    * The custom TextField component used in the grid.
    * @default TextField
    */
   baseTextField: React.JSXElementConstructor<GridSlotProps['baseTextField']>;
-  /**
-   * The custom FormControl component used in the grid.
-   * @default FormControl
-   */
-  baseFormControl: React.JSXElementConstructor<GridSlotProps['baseFormControl']>;
   /**
    * The custom Select component used in the grid.
    * @default Select
@@ -88,11 +78,6 @@ export interface GridBaseSlots {
    * @default Popper
    */
   basePopper: React.JSXElementConstructor<GridSlotProps['basePopper']>;
-  /**
-   * The custom InputLabel component used in the grid.
-   * @default InputLabel
-   */
-  baseInputLabel: React.JSXElementConstructor<GridSlotProps['baseInputLabel']>;
   /**
    * The custom SelectOption component used in the grid.
    * @default SelectOption
@@ -113,11 +98,6 @@ export interface GridBaseSlots {
  * Grid components React prop interface containing all the overridable components.
  */
 export interface GridSlotsComponent extends GridBaseSlots, GridIconSlotsComponent {
-  /**
-   * The custom Chip component used in the grid.
-   * @default Chip
-   */
-  baseChip: React.JSXElementConstructor<GridSlotProps['baseChip']>;
   /**
    * Component rendered for the bottom container.
    * @default GridBottomContainer
@@ -169,10 +149,9 @@ export interface GridSlotsComponent extends GridBaseSlots, GridIconSlotsComponen
    */
   footerRowCount: React.JSXElementConstructor<GridSlotProps['footerRowCount']>;
   /**
-   * Toolbar component rendered inside the Header component.
-   * @default null
+   * Toolbar component rendered in the grid header.
    */
-  toolbar: React.JSXElementConstructor<GridSlotProps['toolbar']> | null;
+  toolbar: React.JSXElementConstructor<GridSlotProps['toolbar']>;
   /**
    * Pinned rows container.
    * @ignore - do not document

package/modern/models/gridSlotsComponentsProps.d.ts

@@ -4,13 +4,9 @@ import type { ButtonProps as MUIButtonProps } from '@mui/material/Button';
 import type { CircularProgressProps as MUICircularProgressProps } from '@mui/material/CircularProgress';
 import type { LinearProgressProps as MUILinearProgressProps } from '@mui/material/LinearProgress';
 import type { MenuItemProps as MUIMenuItemProps } from '@mui/material/MenuItem';
-import type { FormControlProps } from '@mui/material/FormControl';
 import type { IconButtonProps as MUIIconButtonProps } from '@mui/material/IconButton';
-import type { InputAdornmentProps } from '@mui/material/InputAdornment';
 import type { TooltipProps as MUITooltipProps } from '@mui/material/Tooltip';
-import type { InputLabelProps } from '@mui/material/InputLabel';
 import type { TablePaginationProps } from '@mui/material/TablePagination';
-import type { ChipProps } from '@mui/material/Chip';
 import type { GridToolbarProps } from '../components/toolbar/GridToolbar';
 import type { ColumnHeaderFilterIconButtonProps } from '../components/columnHeaders/GridColumnHeaderFilterIconButton';
 import type { GridColumnMenuProps } from '../components/menu/columnMenu/GridColumnMenuProps';
@@ -30,9 +26,10 @@ import type { GridLoadingOverlayProps } from '../components/GridLoadingOverlay';
 import type { GridRowCountProps } from '../components/GridRowCount';
 import type { GridColumnHeaderSortIconProps } from '../components/columnHeaders/GridColumnHeaderSortIcon';
 import type { GridBottomContainerProps } from '../components/virtualization/GridBottomContainer';
-import type { BadgeProps, ButtonProps, CheckboxProps, CircularProgressProps, DividerProps, IconButtonProps, InputProps, LinearProgressProps, MenuListProps, MenuItemProps, PopperProps, SelectProps, SelectOptionProps, SkeletonProps, SwitchProps, TooltipProps, TextFieldProps } from './gridBaseSlots';
+import type { AutocompleteProps, BadgeProps, ButtonProps, CheckboxProps, CircularProgressProps, DividerProps, IconButtonProps, InputProps, LinearProgressProps, MenuListProps, MenuItemProps, PopperProps, SelectProps, SelectOptionProps, SkeletonProps, SwitchProps, TooltipProps, TextFieldProps } from './gridBaseSlots';
 type RootProps = React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>;
 type MainProps = React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>;
+export interface BaseAutocompletePropsOverrides {}
 export interface BaseBadgePropsOverrides {}
 export interface BaseCheckboxPropsOverrides {}
 export interface BaseCircularProgressPropsOverrides {}
@@ -41,12 +38,10 @@ export interface BaseLinearProgressPropsOverrides {}
 export interface BaseMenuListPropsOverrides {}
 export interface BaseMenuItemPropsOverrides {}
 export interface BaseTextFieldPropsOverrides {}
-export interface BaseFormControlPropsOverrides {}
 export interface BaseSelectPropsOverrides {}
 export interface BaseSwitchPropsOverrides {}
 export interface BaseButtonPropsOverrides {}
 export interface BaseIconButtonPropsOverrides {}
-export interface BaseInputAdornmentPropsOverrides {}
 export interface BaseTooltipPropsOverrides {}
 export interface BasePopperPropsOverrides {}
 export interface BaseInputPropsOverrides {}
@@ -76,6 +71,7 @@ export interface SkeletonCellPropsOverrides {}
 export interface RowPropsOverrides {}
 export interface BottomContainerPropsOverrides {}
 interface BaseSlotProps {
+  baseAutocomplete: AutocompleteProps<string, true, false, true> & BaseAutocompletePropsOverrides;
   baseBadge: BadgeProps & BaseBadgePropsOverrides;
   baseCheckbox: CheckboxProps & BaseCheckboxPropsOverrides;
   baseCircularProgress: CircularProgressProps & BaseCircularProgressPropsOverrides;
@@ -84,19 +80,15 @@ interface BaseSlotProps {
   baseMenuList: MenuListProps & BaseMenuListPropsOverrides;
   baseMenuItem: MenuItemProps & BaseMenuItemPropsOverrides;
   baseTextField: TextFieldProps & BaseTextFieldPropsOverrides;
-  baseFormControl: FormControlProps & BaseFormControlPropsOverrides;
   baseSwitch: SwitchProps & BaseSwitchPropsOverrides;
   baseButton: ButtonProps & BaseButtonPropsOverrides;
   baseIconButton: IconButtonProps & BaseIconButtonPropsOverrides;
   basePopper: PopperProps & BasePopperPropsOverrides;
   baseTooltip: TooltipProps & BaseTooltipPropsOverrides;
   baseInput: InputProps & BaseInputPropsOverrides;
-  baseInputLabel: InputLabelProps & BaseInputLabelPropsOverrides;
-  baseInputAdornment: InputAdornmentProps & BaseInputAdornmentPropsOverrides;
   baseSelect: SelectProps & BaseSelectPropsOverrides;
   baseSelectOption: SelectOptionProps & BaseSelectOptionPropsOverrides;
   baseSkeleton: SkeletonProps & BaseSkeletonPropsOverrides;
-  baseChip: ChipProps & BaseChipPropsOverrides;
 }
 interface MaterialSlotProps {
   baseBadge: MUIBadgeProps;

package/modern/models/gridSortModel.d.ts

@@ -27,4 +27,4 @@ export interface GridSortItem {
 /**
  * The model used for sorting the grid.
  */
-export type GridSortModel = GridSortItem[];
+export type GridSortModel = readonly GridSortItem[];

package/modern/models/index.d.ts

@@ -10,6 +10,7 @@ export * from "./gridPaginationProps.js";
 export * from "./gridRenderContextProps.js";
 export * from "./gridRows.js";
 export * from "./gridRowSelectionModel.js";
+export { createRowSelectionManager } from "./gridRowSelectionManager.js";
 export * from "./params/index.js";
 export * from "./gridCellClass.js";
 export * from "./gridCell.js";
@@ -22,7 +23,7 @@ export * from "./gridDensity.js";
 export * from "./logger.js";
 export * from "./muiEvent.js";
 export * from "./events/index.js";
-export * from "./gridSortModel.js";
+export type { GridSortCellParams, GridSortDirection, GridComparatorFn, GridSortModel } from './gridSortModel';
 export * from "./gridColumnGrouping.js";
 export type { GridDataSourceCache } from './gridDataSource';
 export type { GridExportOptions, GridFileExportOptions, GridGetRowsToExportParams, GridCsvGetRowsToExportParams, GridPrintGetRowsToExportParams, GridCsvExportOptions, GridPrintExportOptions } from './gridExport';

package/modern/models/index.js

@@ -9,6 +9,7 @@ export * from "./gridPaginationProps.js";
 export * from "./gridRenderContextProps.js";
 export * from "./gridRows.js";
 export * from "./gridRowSelectionModel.js";
+export { createRowSelectionManager } from "./gridRowSelectionManager.js";
 export * from "./params/index.js";
 export * from "./gridCellClass.js";
 export * from "./gridCell.js";
@@ -20,12 +21,10 @@ export * from "./gridDensity.js";
 export * from "./logger.js";
 export * from "./muiEvent.js";
 export * from "./events/index.js";
-export * from "./gridSortModel.js";
 export * from "./gridColumnGrouping.js";
 
 // Do not export GridExportFormat and GridExportExtension which are override in pro package
 
 export * from "./gridFilterOperator.js";
 
-// Utils shared across the X packages
-export {};
+// Utils shared across the X packages

package/modern/models/props/DataGridProps.d.ts

@@ -18,7 +18,7 @@ import { GridClasses } from "../../constants/gridClasses.js";
 import { GridRowHeightParams, GridRowHeightReturnValue, GridRowParams, GridRowSpacing, GridRowSpacingParams, GridRowClassNameParams } from "../params/index.js";
 import { GridCellParams } from "../params/gridCellParams.js";
 import { GridFilterModel } from "../gridFilterModel.js";
-import { GridInputRowSelectionModel, GridRowSelectionModel } from "../gridRowSelectionModel.js";
+import { GridRowSelectionModel } from "../gridRowSelectionModel.js";
 import { GridInitialStateCommunity } from "../gridStateCommunity.js";
 import { GridSlotsComponentsProps } from "../gridSlotsComponentsProps.js";
 import { GridColumnVisibilityModel } from "../../hooks/features/columns/gridColumnsInterfaces.js";
@@ -26,8 +26,9 @@ import { GridCellModesModel, GridRowModesModel } from "../api/gridEditingApi.js"
 import { GridColumnGroupingModel } from "../gridColumnGrouping.js";
 import { GridPaginationMeta, GridPaginationModel } from "../gridPaginationProps.js";
 import type { GridAutosizeOptions } from '../../hooks/features/columnResize';
-import type { GridDataSource, GridDataSourceCache, GridGetRowsParams } from '../gridDataSource';
+import type { GridDataSource, GridDataSourceCache } from '../gridDataSource';
 import type { GridRowSelectionPropagation } from '../gridRowSelectionModel';
+import type { GridGetRowsError, GridUpdateRowError } from '../../hooks/features/dataSource/gridDataSourceError';
 export interface GridExperimentalFeatures {
   /**
    * Emits a warning if the cell receives focus without also syncing the focus state.
@@ -291,6 +292,11 @@ export interface DataGridPropsWithDefaultValues<R extends GridValidRowModel = an
    * @default false
    */
   showColumnVerticalBorder: boolean;
+  /**
+   * If `true`, the toolbar is displayed.
+   * @default false
+   */
+  showToolbar: boolean;
   /**
    * The order of the sorting sequence.
    * @default ['asc', 'desc', null]
@@ -381,6 +387,14 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
    * Override or extend the styles applied to the component.
    */
   classes?: Partial<GridClasses>;
+  /**
+   * The data source object.
+   */
+  dataSource?: GridDataSource;
+  /**
+   * Data source cache object.
+   */
+  dataSourceCache?: GridDataSourceCache | null;
   /**
    * Set the density of the Data Grid.
    * @default "standard"
@@ -464,6 +478,11 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
    * @param {MuiEvent<MuiBaseEvent>} event The event that caused this prop to be called.
    */
   onCellEditStop?: GridEventListener<'cellEditStop'>;
+  /**
+   * Callback fired when a data source request fails.
+   * @param {GridGetRowsError | GridUpdateRowError} error The data source error object.
+   */
+  onDataSourceError?: (error: GridGetRowsError | GridUpdateRowError) => void;
   /**
    * Callback fired when the row turns to edit mode.
    * @param {GridRowParams} params With all properties from [[GridRowParams]].
@@ -673,7 +692,7 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
   /**
    * Sets the row selection model of the Data Grid.
    */
-  rowSelectionModel?: GridInputRowSelectionModel;
+  rowSelectionModel?: GridRowSelectionModel;
   /**
    * Callback fired when the selection state of one or multiple rows changes.
    * @param {GridRowSelectionModel} rowSelectionModel With all the row ids [[GridSelectionModel]].
@@ -787,20 +806,6 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onColumnWidthChange?: GridEventListener<'columnWidthChange'>;
-  /**
-   * The data source object.
-   */
-  unstable_dataSource?: GridDataSource;
-  /**
-   * Data source cache object.
-   */
-  unstable_dataSourceCache?: GridDataSourceCache | null;
-  /**
-   * Callback fired when the data source request fails.
-   * @param {Error} error The error object.
-   * @param {GridGetRowsParams} params With all properties from [[GridGetRowsParams]].
-   */
-  unstable_onDataSourceError?: (error: Error, params: GridGetRowsParams) => void;
 }
 export interface DataGridProSharedPropsWithDefaultValue {
   /**

package/modern/utils/css/context.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export declare function useCSSVariablesClass(): string;
+export declare function useCSSVariablesContext(): {
+  className: string;
+  tag: React.JSX.Element;
+};
+export declare function GridPortalWrapper({
+  children
+}: {
+  children: React.ReactNode;
+}): React.JSX.Element;
+export declare function GridCSSVariablesContext(props: {
+  children: any;
+}): React.JSX.Element;