@mui/x-data-grid 7.0.0-beta.1 → 7.0.0-beta.2

package/locales/daDK.js

@@ -11,8 +11,8 @@ const daDKGrid = {
   toolbarDensityStandard: 'Standard',
   toolbarDensityComfortable: 'Luftig',
   // Columns selector toolbar button text
-  toolbarColumns: 'Kolonne',
-  toolbarColumnsLabel: 'Vælg kolonne',
+  toolbarColumns: 'Kolonner',
+  toolbarColumnsLabel: 'Vælg kolonner',
   // Filters toolbar button text
   toolbarFilters: 'Filtre',
   toolbarFiltersLabel: 'Vis filtre',
@@ -39,12 +39,12 @@ const daDKGrid = {
   filterPanelRemoveAll: 'Fjern alle',
   filterPanelDeleteIconLabel: 'Slet',
   filterPanelLogicOperator: 'Logisk operator',
-  filterPanelOperator: 'Operatorer',
+  filterPanelOperator: 'Operator',
   filterPanelOperatorAnd: 'Og',
   filterPanelOperatorOr: 'Eller',
-  filterPanelColumns: 'Kolonne',
+  filterPanelColumns: 'Kolonner',
   filterPanelInputLabel: 'Værdi',
-  filterPanelInputPlaceholder: 'Filter værdi',
+  filterPanelInputPlaceholder: 'Filterværdi',
   // Filter operators text
   filterOperatorContains: 'indeholder',
   filterOperatorEquals: 'lig med',
@@ -91,10 +91,10 @@ const daDKGrid = {
   filterValueFalse: 'negativ',
   // Column menu text
   columnMenuLabel: 'Menu',
-  columnMenuShowColumns: 'Vis Kolonner',
+  columnMenuShowColumns: 'Vis kolonner',
   columnMenuManageColumns: 'Administrer kolonner',
-  columnMenuFilter: 'Filtre',
-  columnMenuHideColumn: 'Skjul',
+  columnMenuFilter: 'Filtrer',
+  columnMenuHideColumn: 'Skjul kolonne',
   columnMenuUnsort: 'Fjern sortering',
   columnMenuSortAsc: 'Sorter stigende',
   columnMenuSortDesc: 'Sorter faldende',
@@ -124,13 +124,13 @@ const daDKGrid = {
   pinToRight: 'Fastgør til højre',
   unpin: 'Frigiv',
   // Tree Data
-  treeDataGroupingHeaderName: 'Gruppering',
+  treeDataGroupingHeaderName: 'Gruppe',
   treeDataExpand: 'Vis underelementer',
   treeDataCollapse: 'Skjul underelementer',
   // Grouping columns
-  groupingColumnHeaderName: 'Gruppér',
+  groupingColumnHeaderName: 'Gruppe',
   groupColumn: name => `Gruppér efter ${name}`,
-  unGroupColumn: name => `Fjern gruppéring efter ${name}`,
+  unGroupColumn: name => `Fjern gruppering efter ${name}`,
   // Master/detail
   detailPanelToggle: 'Udvid/kollaps detaljepanel',
   expandDetailPanel: 'Udvid',
@@ -138,7 +138,7 @@ const daDKGrid = {
   // Row reordering text
   rowReorderingHeaderName: 'Omarrangering af rækker',
   // Aggregation
-  aggregationMenuItemHeader: 'Aggregation',
+  aggregationMenuItemHeader: 'Aggregering',
   aggregationFunctionLabelSum: 'sum',
   aggregationFunctionLabelAvg: 'gns',
   aggregationFunctionLabelMin: 'min',

package/models/api/gridApiCommon.d.ts

@@ -4,7 +4,7 @@ import { GridCoreApi, GridCorePrivateApi } from './gridCoreApi';
 import { GridCsvExportApi } from './gridCsvExportApi';
 import { GridDensityApi } from './gridDensityApi';
 import { GridEditingApi, GridEditingPrivateApi } from './gridEditingApi';
-import { GridFilterApi } from './gridFilterApi';
+import type { GridFilterApi } from './gridFilterApi';
 import { GridFocusApi, GridFocusPrivateApi } from './gridFocusApi';
 import { GridLocaleTextApi } from './gridLocaleTextApi';
 import type { GridParamsApi } from './gridParamsApi';

package/models/api/gridFilterApi.d.ts

@@ -1,7 +1,7 @@
 import { GridFilterModel } from '../gridFilterModel';
 import { GridFilterItem, GridLogicOperator } from '../gridFilterItem';
 import { GridControlledStateReasonLookup } from '../events';
-import { DataGridProcessedProps } from '../props/DataGridProps';
+import type { DataGridProcessedProps } from '../props/DataGridProps';
 /**
  * The filter API interface that is available in the grid [[apiRef]].
  */

package/models/api/gridLocaleTextApi.d.ts

@@ -27,9 +27,9 @@ export interface GridLocaleText {
     toolbarExportCSV: React.ReactNode;
     toolbarExportPrint: React.ReactNode;
     toolbarExportExcel: string;
-    columnsManagementSearchTitle: React.ReactNode;
-    columnsManagementNoColumns: React.ReactNode;
-    columnsManagementShowHideAllText: React.ReactNode;
+    columnsManagementSearchTitle: string;
+    columnsManagementNoColumns: string;
+    columnsManagementShowHideAllText: string;
     filterPanelAddFilter: React.ReactNode;
     filterPanelRemoveAll: React.ReactNode;
     filterPanelDeleteIconLabel: string;

package/models/events/gridEventLookup.d.ts

@@ -371,7 +371,7 @@ export interface GridControlledStateEventLookup {
     };
 }
 export interface GridControlledStateReasonLookup {
-    filter: 'upsertFilterItem' | 'upsertFilterItems' | 'deleteFilterItem' | 'changeLogicOperator' | 'restoreState';
+    filter: 'upsertFilterItem' | 'upsertFilterItems' | 'deleteFilterItem' | 'changeLogicOperator' | 'restoreState' | 'removeAllFilterItems';
     pagination: 'setPaginationModel' | 'stateRestorePreProcessing';
 }
 export interface GridEventLookup extends GridRowEventLookup, GridColumnHeaderEventLookup, GridHeaderFilterEventLookup, GridColumnGroupHeaderEventLookup, GridCellEventLookup, GridControlledStateEventLookup {

package/models/gridSlotsComponent.d.ts

@@ -1,75 +1,73 @@
 import * as React from 'react';
+import type { GridSlotProps } from './gridSlotsComponentsProps';
 import type { GridIconSlotsComponent } from './gridIconSlotsComponent';
-import type { GridRowProps } from '../components/GridRow';
-import type { GridDetailPanelsProps } from '../components/GridDetailPanels';
-import type { GridPinnedRowsProps } from '../components/GridPinnedRows';
-import type { GridColumnHeadersProps } from '../components/GridColumnHeaders';
+export type { GridSlotProps } from './gridSlotsComponentsProps';
 export interface GridBaseSlots {
     /**
      * The custom Checkbox component used in the grid for both header and cells.
      * @default Checkbox
      */
-    baseCheckbox: React.JSXElementConstructor<any>;
+    baseCheckbox: React.JSXElementConstructor<GridSlotProps['baseCheckbox']>;
     /**
      * The custom Chip component used in the grid.
      * @default Chip
      */
-    baseChip: React.JSXElementConstructor<any>;
+    baseChip: React.JSXElementConstructor<GridSlotProps['baseChip']>;
     /**
      * The custom InputAdornment component used in the grid.
      * @default InputAdornment
      */
-    baseInputAdornment: React.JSXElementConstructor<any>;
+    baseInputAdornment: React.JSXElementConstructor<GridSlotProps['baseInputAdornment']>;
     /**
      * The custom TextField component used in the grid.
      * @default TextField
      */
-    baseTextField: React.JSXElementConstructor<any>;
+    baseTextField: React.JSXElementConstructor<GridSlotProps['baseTextField']>;
     /**
      * The custom FormControl component used in the grid.
      * @default FormControl
      */
-    baseFormControl: React.JSXElementConstructor<any>;
+    baseFormControl: React.JSXElementConstructor<GridSlotProps['baseFormControl']>;
     /**
      * The custom Select component used in the grid.
      * @default Select
      */
-    baseSelect: React.JSXElementConstructor<any>;
+    baseSelect: React.JSXElementConstructor<GridSlotProps['baseSelect']>;
     /**
      * The custom Switch component used in the grid.
      * @default Switch
      */
-    baseSwitch: React.JSXElementConstructor<any>;
+    baseSwitch: React.JSXElementConstructor<GridSlotProps['baseSwitch']>;
     /**
      * The custom Button component used in the grid.
      * @default Button
      */
-    baseButton: React.JSXElementConstructor<any>;
+    baseButton: React.JSXElementConstructor<GridSlotProps['baseButton']>;
     /**
      * The custom IconButton component used in the grid.
      * @default IconButton
      */
-    baseIconButton: React.JSXElementConstructor<any>;
+    baseIconButton: React.JSXElementConstructor<GridSlotProps['baseIconButton']>;
     /**
      * The custom Tooltip component used in the grid.
      * @default Tooltip
      */
-    baseTooltip: React.JSXElementConstructor<any>;
+    baseTooltip: React.JSXElementConstructor<GridSlotProps['baseTooltip']>;
     /**
      * The custom Popper component used in the grid.
      * @default Popper
      */
-    basePopper: React.JSXElementConstructor<any>;
+    basePopper: React.JSXElementConstructor<GridSlotProps['basePopper']>;
     /**
      * The custom InputLabel component used in the grid.
      * @default InputLabel
      */
-    baseInputLabel: React.JSXElementConstructor<any>;
+    baseInputLabel: React.JSXElementConstructor<GridSlotProps['baseInputLabel']>;
     /**
      * The custom SelectOption component used in the grid.
      * @default MenuItem
      */
-    baseSelectOption: React.JSXElementConstructor<any>;
+    baseSelectOption: React.JSXElementConstructor<GridSlotProps['baseSelectOption']>;
 }
 /**
  * Grid components React prop interface containing all the overridable components.
@@ -79,87 +77,87 @@ export interface GridSlotsComponent extends GridBaseSlots, GridIconSlotsComponen
      * The custom Chip component used in the grid.
      * @default Chip
      */
-    baseChip: React.JSXElementConstructor<any>;
+    baseChip: React.JSXElementConstructor<GridSlotProps['baseChip']>;
     /**
      * Component rendered for each cell.
      * @default GridCell
      */
-    cell: React.JSXElementConstructor<any>;
+    cell: React.JSXElementConstructor<GridSlotProps['cell']>;
     /**
      * Component rendered for each skeleton cell.
      * @default GridSkeletonCell
      */
-    skeletonCell: React.JSXElementConstructor<any>;
+    skeletonCell: React.JSXElementConstructor<GridSlotProps['skeletonCell']>;
     /**
      * Filter icon component rendered in each column header.
      * @default GridColumnHeaderFilterIconButton
      */
-    columnHeaderFilterIconButton: React.JSXElementConstructor<any>;
+    columnHeaderFilterIconButton: React.JSXElementConstructor<GridSlotProps['columnHeaderFilterIconButton']>;
     /**
      * Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.
      * @default GridColumnMenu
      */
-    columnMenu: React.JSXElementConstructor<any>;
+    columnMenu: React.JSXElementConstructor<GridSlotProps['columnMenu']>;
     /**
      * Component responsible for rendering the column headers.
      * @default DataGridColumnHeaders
      */
-    columnHeaders: React.JSXElementConstructor<GridColumnHeadersProps>;
+    columnHeaders: React.JSXElementConstructor<GridSlotProps['columnHeaders']>;
     /**
      * Component responsible for rendering the detail panels.
      * @default GridDetailPanels
      */
-    detailPanels: React.JSXElementConstructor<GridDetailPanelsProps>;
+    detailPanels: React.JSXElementConstructor<GridSlotProps['detailPanels']>;
     /**
      * Footer component rendered at the bottom of the grid viewport.
      * @default GridFooter
      */
-    footer: React.JSXElementConstructor<any>;
+    footer: React.JSXElementConstructor<GridSlotProps['footer']>;
     /**
      * Row count component rendered in the footer
      * @default GridRowCount
      */
-    footerRowCount: React.JSXElementConstructor<any>;
+    footerRowCount: React.JSXElementConstructor<GridSlotProps['footerRowCount']>;
     /**
      * Toolbar component rendered inside the Header component.
      * @default null
      */
-    toolbar: React.JSXElementConstructor<any> | null;
+    toolbar: React.JSXElementConstructor<GridSlotProps['toolbar']> | null;
     /**
      * Pinned rows container.
      * @ignore - do not document
      */
-    pinnedRows: React.JSXElementConstructor<GridPinnedRowsProps>;
+    pinnedRows: React.JSXElementConstructor<GridSlotProps['pinnedRows']>;
     /**
      * Loading overlay component rendered when the grid is in a loading state.
      * @default GridLoadingOverlay
      */
-    loadingOverlay: React.JSXElementConstructor<any>;
+    loadingOverlay: React.JSXElementConstructor<GridSlotProps['loadingOverlay']>;
     /**
      * No results overlay component rendered when the grid has no results after filtering.
      * @default GridNoResultsOverlay
      */
-    noResultsOverlay: React.JSXElementConstructor<any>;
+    noResultsOverlay: React.JSXElementConstructor<GridSlotProps['noResultsOverlay']>;
     /**
      * No rows overlay component rendered when the grid has no rows.
      * @default GridNoRowsOverlay
      */
-    noRowsOverlay: React.JSXElementConstructor<any>;
+    noRowsOverlay: React.JSXElementConstructor<GridSlotProps['noRowsOverlay']>;
     /**
      * Pagination component rendered in the grid footer by default.
      * @default Pagination
      */
-    pagination: React.JSXElementConstructor<any> | null;
+    pagination: React.JSXElementConstructor<GridSlotProps['pagination']> | null;
     /**
      * Filter panel component rendered when clicking the filter button.
      * @default GridFilterPanel
      */
-    filterPanel: React.JSXElementConstructor<any>;
+    filterPanel: React.JSXElementConstructor<GridSlotProps['filterPanel']>;
     /**
      * GridColumns panel component rendered when clicking the columns button.
      * @default GridColumnsPanel
      */
-    columnsPanel: React.JSXElementConstructor<any>;
+    columnsPanel: React.JSXElementConstructor<GridSlotProps['columnsPanel']>;
     /**
      * Component used inside Grid Columns panel to manage columns.
      * @default GridColumnsManagement
@@ -169,10 +167,10 @@ export interface GridSlotsComponent extends GridBaseSlots, GridIconSlotsComponen
      * Panel component wrapping the filters and columns panels.
      * @default GridPanel
      */
-    panel: React.JSXElementConstructor<any>;
+    panel: React.JSXElementConstructor<GridSlotProps['panel']>;
     /**
      * Component rendered for each row.
      * @default GridRow
      */
-    row: React.JSXElementConstructor<GridRowProps>;
+    row: React.JSXElementConstructor<GridSlotProps['row']>;
 }

package/models/gridSlotsComponentsProps.d.ts

@@ -1,26 +1,31 @@
 import * as React from 'react';
-import { CheckboxProps } from '@mui/material/Checkbox';
-import { TextFieldProps } from '@mui/material/TextField';
-import { FormControlProps } from '@mui/material/FormControl';
-import { SelectProps } from '@mui/material/Select';
-import { SwitchProps } from '@mui/material/Switch';
-import { ButtonProps } from '@mui/material/Button';
-import { IconButtonProps } from '@mui/material/IconButton';
-import { TooltipProps } from '@mui/material/Tooltip';
+import type { CheckboxProps } from '@mui/material/Checkbox';
+import type { TextFieldProps } from '@mui/material/TextField';
+import type { FormControlProps } from '@mui/material/FormControl';
+import type { SelectProps } from '@mui/material/Select';
+import type { SwitchProps } from '@mui/material/Switch';
+import type { ButtonProps } from '@mui/material/Button';
+import type { IconButtonProps } from '@mui/material/IconButton';
+import type { InputAdornmentProps } from '@mui/material/InputAdornment';
+import type { TooltipProps } from '@mui/material/Tooltip';
 import type { InputLabelProps } from '@mui/material/InputLabel';
-import { PopperProps } from '@mui/material/Popper';
-import { TablePaginationProps } from '@mui/material/TablePagination';
-import { ChipProps } from '@mui/material/Chip';
-import { GridToolbarProps } from '../components/toolbar/GridToolbar';
-import { ColumnHeaderFilterIconButtonProps } from '../components/columnHeaders/GridColumnHeaderFilterIconButton';
-import { GridColumnMenuProps } from '../components/menu/columnMenu/GridColumnMenuProps';
-import { GridColumnsPanelProps } from '../components/panel/GridColumnsPanel';
-import { GridFilterPanelProps } from '../components/panel/filterPanel/GridFilterPanel';
-import { GridFooterContainerProps } from '../components/containers/GridFooterContainer';
-import { GridOverlayProps } from '../components/containers/GridOverlay';
-import { GridPanelProps } from '../components/panel/GridPanel';
+import type { PopperProps } from '@mui/material/Popper';
+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';
+import type { GridColumnsPanelProps } from '../components/panel/GridColumnsPanel';
+import type { GridFilterPanelProps } from '../components/panel/filterPanel/GridFilterPanel';
+import type { GridFooterContainerProps } from '../components/containers/GridFooterContainer';
+import type { GridOverlayProps } from '../components/containers/GridOverlay';
+import type { GridPanelProps } from '../components/panel/GridPanel';
+import type { GridSkeletonCellProps } from '../components/cell/GridSkeletonCell';
 import type { GridRowProps } from '../components/GridRow';
 import type { GridCellProps } from '../components/cell/GridCell';
+import type { GridColumnHeadersProps } from '../components/GridColumnHeaders';
+import type { GridDetailPanelsProps } from '../components/GridDetailPanels';
+import type { GridPinnedRowsProps } from '../components/GridPinnedRows';
 import type { GridColumnsManagementProps } from '../components/columnsManagement/GridColumnsManagement';
 import type { GridRowCountProps } from '../components';
 export interface BaseCheckboxPropsOverrides {
@@ -37,6 +42,8 @@ export interface BaseButtonPropsOverrides {
 }
 export interface BaseIconButtonPropsOverrides {
 }
+export interface BaseInputAdornmentPropsOverrides {
+}
 export interface BaseTooltipPropsOverrides {
 }
 export interface BasePopperPropsOverrides {
@@ -57,6 +64,8 @@ export interface ColumnMenuPropsOverrides {
 }
 export interface ColumnsPanelPropsOverrides {
 }
+export interface DetailPanelsPropsOverrides {
+}
 export interface ColumnsManagementPropsOverrides {
 }
 export interface FilterPanelPropsOverrides {
@@ -75,43 +84,53 @@ export interface NoRowsOverlayPropsOverrides {
 }
 export interface PanelPropsOverrides {
 }
+export interface PinnedRowsPropsOverrides {
+}
+export interface SkeletonCellPropsOverrides {
+}
 export interface RowPropsOverrides {
 }
-type SlotProps<Props, Overrides> = Partial<Props & Overrides>;
-/**
- * Overridable components props dynamically passed to the component at rendering.
- */
-export interface GridSlotsComponentsProps {
-    baseCheckbox?: SlotProps<CheckboxProps, BaseCheckboxPropsOverrides>;
-    baseTextField?: SlotProps<TextFieldProps, BaseTextFieldPropsOverrides>;
-    baseFormControl?: SlotProps<FormControlProps, BaseFormControlPropsOverrides>;
-    baseSelect?: SlotProps<SelectProps, BaseSelectPropsOverrides>;
-    baseSwitch?: SlotProps<SwitchProps, BaseSwitchPropsOverrides>;
-    baseButton?: SlotProps<ButtonProps, BaseButtonPropsOverrides>;
-    baseIconButton?: SlotProps<IconButtonProps, BaseIconButtonPropsOverrides>;
-    basePopper?: SlotProps<PopperProps, BasePopperPropsOverrides>;
-    baseTooltip?: SlotProps<TooltipProps, BaseTooltipPropsOverrides>;
-    baseInputLabel?: SlotProps<InputLabelProps, BaseInputLabelPropsOverrides>;
-    baseSelectOption?: SlotProps<{
+export interface GridSlotProps {
+    baseCheckbox: CheckboxProps & BaseCheckboxPropsOverrides;
+    baseTextField: TextFieldProps & BaseTextFieldPropsOverrides;
+    baseFormControl: FormControlProps & BaseFormControlPropsOverrides;
+    baseSelect: SelectProps & BaseSelectPropsOverrides;
+    baseSwitch: SwitchProps & BaseSwitchPropsOverrides;
+    baseButton: ButtonProps & BaseButtonPropsOverrides;
+    baseIconButton: IconButtonProps & BaseIconButtonPropsOverrides;
+    basePopper: PopperProps & BasePopperPropsOverrides;
+    baseTooltip: TooltipProps & BaseTooltipPropsOverrides;
+    baseInputLabel: InputLabelProps & BaseInputLabelPropsOverrides;
+    baseInputAdornment: InputAdornmentProps & BaseInputAdornmentPropsOverrides;
+    baseSelectOption: {
         native: boolean;
         value: any;
         children?: React.ReactNode;
-    }, BaseSelectOptionPropsOverrides>;
-    baseChip?: SlotProps<ChipProps, BaseChipPropsOverrides>;
-    cell?: SlotProps<GridCellProps, CellPropsOverrides>;
-    columnHeaderFilterIconButton?: SlotProps<ColumnHeaderFilterIconButtonProps, ColumnHeaderFilterIconButtonPropsOverrides>;
-    columnMenu?: SlotProps<GridColumnMenuProps, ColumnMenuPropsOverrides>;
-    columnsPanel?: SlotProps<GridColumnsPanelProps, ColumnsPanelPropsOverrides>;
-    columnsManagement?: SlotProps<GridColumnsManagementProps, ColumnsManagementPropsOverrides>;
-    filterPanel?: SlotProps<GridFilterPanelProps, FilterPanelPropsOverrides>;
-    footer?: SlotProps<GridFooterContainerProps, FooterPropsOverrides>;
-    footerRowCount?: SlotProps<GridRowCountProps, FooterRowCountOverrides>;
-    loadingOverlay?: SlotProps<GridOverlayProps, LoadingOverlayPropsOverrides>;
-    noResultsOverlay?: SlotProps<GridOverlayProps, NoResultsOverlayPropsOverrides>;
-    noRowsOverlay?: SlotProps<GridOverlayProps, NoRowsOverlayPropsOverrides>;
-    pagination?: SlotProps<TablePaginationProps, PaginationPropsOverrides>;
-    panel?: SlotProps<GridPanelProps, PanelPropsOverrides>;
-    row?: SlotProps<GridRowProps, RowPropsOverrides>;
-    toolbar?: SlotProps<GridToolbarProps, ToolbarPropsOverrides>;
-}
-export {};
+    } & BaseSelectOptionPropsOverrides;
+    baseChip: ChipProps & BaseChipPropsOverrides;
+    cell: GridCellProps & CellPropsOverrides;
+    columnHeaders: GridColumnHeadersProps;
+    columnHeaderFilterIconButton: ColumnHeaderFilterIconButtonProps & ColumnHeaderFilterIconButtonPropsOverrides;
+    columnMenu: GridColumnMenuProps & ColumnMenuPropsOverrides;
+    columnsPanel: GridColumnsPanelProps & ColumnsPanelPropsOverrides;
+    columnsManagement: GridColumnsManagementProps & ColumnsManagementPropsOverrides;
+    detailPanels: GridDetailPanelsProps & DetailPanelsPropsOverrides;
+    filterPanel: GridFilterPanelProps & FilterPanelPropsOverrides;
+    footer: GridFooterContainerProps & FooterPropsOverrides;
+    footerRowCount: GridRowCountProps & FooterRowCountOverrides;
+    loadingOverlay: GridOverlayProps & LoadingOverlayPropsOverrides;
+    noResultsOverlay: GridOverlayProps & NoResultsOverlayPropsOverrides;
+    noRowsOverlay: GridOverlayProps & NoRowsOverlayPropsOverrides;
+    pagination: Partial<TablePaginationProps> & PaginationPropsOverrides;
+    panel: GridPanelProps & PanelPropsOverrides;
+    pinnedRows: GridPinnedRowsProps & PinnedRowsPropsOverrides;
+    row: GridRowProps & RowPropsOverrides;
+    skeletonCell: GridSkeletonCellProps & SkeletonCellPropsOverrides;
+    toolbar: GridToolbarProps & ToolbarPropsOverrides;
+}
+/**
+ * Overridable components props dynamically passed to the component at rendering.
+ */
+export type GridSlotsComponentsProps = Partial<{
+    [K in keyof GridSlotProps]: Partial<GridSlotProps[K]>;
+}>;

package/models/props/DataGridProps.d.ts

@@ -64,7 +64,7 @@ export interface DataGridPropsWithComplexDefaultValueBeforeProcessing {
     slots?: Partial<GridSlotsComponent>;
     /**
      * Set the locale text of the Data Grid.
-     * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/grid/x-data-grid/src/constants/localeTextConstants.ts) in the GitHub repository.
+     * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/x-data-grid/src/constants/localeTextConstants.ts) in the GitHub repository.
      */
     localeText?: Partial<GridLocaleText>;
 }
@@ -268,7 +268,7 @@ export interface DataGridPropsWithDefaultValues {
      * Select the pageSize dynamically using the component UI.
      * @default [25, 50, 100]
      */
-    pageSizeOptions: Array<number | {
+    pageSizeOptions: ReadonlyArray<number | {
         value: number;
         label: string;
     }>;

package/modern/DataGrid/DataGrid.js

@@ -305,7 +305,7 @@ DataGridRaw.propTypes = {
   loading: PropTypes.bool,
   /**
    * Set the locale text of the Data Grid.
-   * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/grid/x-data-grid/src/constants/localeTextConstants.ts) in the GitHub repository.
+   * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/x-data-grid/src/constants/localeTextConstants.ts) in the GitHub repository.
    */
   localeText: PropTypes.object,
   /**

package/modern/DataGrid/useDataGridProps.js

@@ -74,7 +74,9 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES = {
 };
 const defaultSlots = DATA_GRID_DEFAULT_SLOTS_COMPONENTS;
 export const useDataGridProps = inProps => {
-  const themedProps = useProps(useThemeProps({
+  const themedProps = useProps(
+  // eslint-disable-next-line material-ui/mui-name-matches-component-name
+  useThemeProps({
     props: inProps,
     name: 'MuiDataGrid'
   }));

package/modern/components/GridPagination.js

@@ -24,13 +24,19 @@ const GridPaginationRoot = styled(TablePagination)(({
     }
   }
 }));
+
+// A mutable version of a readonly array.
+
 export const GridPagination = /*#__PURE__*/React.forwardRef(function GridPagination(props, ref) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const paginationModel = useGridSelector(apiRef, gridPaginationModelSelector);
   const visibleTopLevelRowCount = useGridSelector(apiRef, gridFilteredTopLevelRowCountSelector);
   const rowCount = React.useMemo(() => rootProps.rowCount ?? visibleTopLevelRowCount ?? 0, [rootProps.rowCount, visibleTopLevelRowCount]);
-  const lastPage = React.useMemo(() => Math.floor(rowCount / (paginationModel.pageSize || 1)), [rowCount, paginationModel.pageSize]);
+  const lastPage = React.useMemo(() => {
+    const calculatedValue = Math.ceil(rowCount / (paginationModel.pageSize || 1)) - 1;
+    return Math.max(0, calculatedValue);
+  }, [rowCount, paginationModel.pageSize]);
   const handlePageSizeChange = React.useCallback(event => {
     const pageSize = Number(event.target.value);
     apiRef.current.setPageSize(pageSize);
@@ -65,7 +71,11 @@ export const GridPagination = /*#__PURE__*/React.forwardRef(function GridPaginat
     ref: ref,
     component: "div",
     count: rowCount,
-    page: paginationModel.page <= lastPage ? paginationModel.page : lastPage,
+    page: paginationModel.page <= lastPage ? paginationModel.page : lastPage
+    // TODO: Remove the cast once the type is fixed in Material UI and that the min Material UI version
+    // for x-data-grid is past the fix.
+    // Note that Material UI will not mutate the array, so this is safe.
+    ,
     rowsPerPageOptions: pageSizeOptions,
     rowsPerPage: paginationModel.pageSize,
     onPageChange: handlePageChange,

package/modern/components/GridRow.js

@@ -37,9 +37,7 @@ const useUtilityClasses = ownerState => {
     classes
   } = ownerState;
   const slots = {
-    root: ['row', selected && 'selected', editable && 'row--editable', editing && 'row--editing', isFirstVisible && 'row--firstVisible', isLastVisible && 'row--lastVisible', rowHeight === 'auto' && 'row--dynamicHeight'],
-    pinnedLeft: ['pinnedLeft'],
-    pinnedRight: ['pinnedRight']
+    root: ['row', selected && 'selected', editable && 'row--editable', editing && 'row--editing', isFirstVisible && 'row--firstVisible', isLastVisible && 'row--lastVisible', rowHeight === 'auto' && 'row--dynamicHeight']
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
@@ -273,7 +271,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
         width: width,
         contentWidth: contentWidth,
         field: column.field,
-        align: column.align
+        align: column.align ?? 'left'
       }, column.field);
     }
     const {
@@ -361,7 +359,10 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     "aria-selected": selected,
     style: style
   }, eventHandlers, other, {
-    children: [leftCells, cells, emptyCellWidth > 0 && /*#__PURE__*/_jsx(EmptyCell, {
+    children: [leftCells, /*#__PURE__*/_jsx("div", {
+      className: gridClasses.cellOffsetLeft,
+      role: "presentation"
+    }), cells, emptyCellWidth > 0 && /*#__PURE__*/_jsx(EmptyCell, {
       width: emptyCellWidth
     }), rightCells.length > 0 && /*#__PURE__*/_jsx("div", {
       role: "presentation",

package/modern/components/GridScrollbarFillerCell.js

@@ -21,9 +21,6 @@ const Style = styled('div')({
   [`&.${classes.pinnedRight}:not(.${classes.header})`]: {
     position: 'sticky',
     right: 0
-  },
-  [`&:not(.${classes.header}):not(.${classes.pinnedRight})`]: {
-    transform: 'translate3d(var(--DataGrid-offsetLeft), 0, 0)'
   }
 });
 function GridScrollbarFillerCell({

package/modern/components/base/GridFooterPlaceholder.js

@@ -7,5 +7,5 @@ export function GridFooterPlaceholder() {
   if (rootProps.hideFooter) {
     return null;
   }
-  return /*#__PURE__*/_jsx(rootProps.slots.footer, _extends({}, rootProps.slotProps?.footer));
+  return /*#__PURE__*/_jsx(rootProps.slots.footer, _extends({}, rootProps.slotProps?.footer /* FIXME: typing error */));
 }

package/modern/components/cell/GridActionsCell.js

@@ -136,7 +136,7 @@ function GridActionsCell(props) {
     if (event.key === 'Tab') {
       event.preventDefault();
     }
-    if (['Tab', 'Enter', 'Escape'].includes(event.key)) {
+    if (['Tab', 'Escape'].includes(event.key)) {
       hideMenu();
     }
   };
@@ -173,7 +173,6 @@ function GridActionsCell(props) {
       target: buttonRef.current,
       position: position,
       onClose: hideMenu,
-      onClick: hideMenu,
       children: /*#__PURE__*/_jsx(MenuList, {
         id: menuId,
         className: gridClasses.menuList,
@@ -182,7 +181,8 @@ function GridActionsCell(props) {
         variant: "menu",
         autoFocusItem: true,
         children: menuButtons.map((button, index) => /*#__PURE__*/React.cloneElement(button, {
-          key: index
+          key: index,
+          closeMenu: hideMenu
         }))
       })
     })]