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

package/modern/hooks/features/rows/useGridParamsApi.js

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { getGridCellElement, getGridColumnHeaderElement, getGridRowElement } from '../../../utils/domUtils';
-import { GRID_ID_AUTOGENERATED } from './gridRowsUtils';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { gridFocusCellSelector, gridTabIndexCellSelector } from '../focus/gridFocusStateSelector';
 export class MissingRowIdError extends Error {}
@@ -13,10 +12,7 @@ export class MissingRowIdError extends Error {}
  * TODO: Impossible priority - useGridEditing also needs to be after useGridParamsApi
  * TODO: Impossible priority - useGridFocus also needs to be after useGridParamsApi
  */
-export function useGridParamsApi(apiRef, props) {
-  const {
-    getRowId
-  } = props;
+export function useGridParamsApi(apiRef) {
   const getColumnHeaderParams = React.useCallback(field => ({
     field,
     colDef: apiRef.current.getColumn(field)
@@ -33,28 +29,6 @@ export function useGridParamsApi(apiRef, props) {
     };
     return params;
   }, [apiRef]);
-  const getBaseCellParams = React.useCallback((id, field) => {
-    const row = apiRef.current.getRow(id);
-    const rowNode = apiRef.current.getRowNode(id);
-    if (!row || !rowNode) {
-      throw new MissingRowIdError(`No row with id #${id} found`);
-    }
-    const cellFocus = gridFocusCellSelector(apiRef);
-    const cellTabIndex = gridTabIndexCellSelector(apiRef);
-    const params = {
-      id,
-      field,
-      row,
-      rowNode,
-      value: row[field],
-      colDef: apiRef.current.getColumn(field),
-      cellMode: apiRef.current.getCellMode(id, field),
-      api: apiRef.current,
-      hasFocus: cellFocus !== null && cellFocus.field === field && cellFocus.id === id,
-      tabIndex: cellTabIndex && cellTabIndex.field === field && cellTabIndex.id === id ? 0 : -1
-    };
-    return params;
-  }, [apiRef]);
   const getCellParams = React.useCallback((id, field) => {
     const colDef = apiRef.current.getColumn(field);
     const value = apiRef.current.getCellValue(id, field);
@@ -79,12 +53,7 @@ export function useGridParamsApi(apiRef, props) {
       isEditable: false
     };
     if (colDef && colDef.valueFormatter) {
-      params.formattedValue = colDef.valueFormatter({
-        id,
-        field: params.field,
-        value: params.value,
-        api: apiRef.current
-      });
+      params.formattedValue = colDef.valueFormatter(value, row, colDef, apiRef);
     }
     params.isEditable = colDef && apiRef.current.isCellEditable(params);
     return params;
@@ -98,30 +67,28 @@ export function useGridParamsApi(apiRef, props) {
       }
       return rowModel[field];
     }
-    return colDef.valueGetter(getBaseCellParams(id, field));
-  }, [apiRef, getBaseCellParams]);
+    const row = apiRef.current.getRow(id);
+    if (!row) {
+      throw new MissingRowIdError(`No row with id #${id} found`);
+    }
+    const value = row[colDef.field];
+    return colDef.valueGetter(value, row, colDef, apiRef);
+  }, [apiRef]);
   const getRowValue = React.useCallback((row, colDef) => {
-    const id = GRID_ID_AUTOGENERATED in row ? row[GRID_ID_AUTOGENERATED] : getRowId?.(row) ?? row.id;
     const field = colDef.field;
     if (!colDef || !colDef.valueGetter) {
       return row[field];
     }
-    return colDef.valueGetter(getBaseCellParams(id, field));
-  }, [getBaseCellParams, getRowId]);
+    const value = row[colDef.field];
+    return colDef.valueGetter(value, row, colDef, apiRef);
+  }, [apiRef]);
   const getRowFormattedValue = React.useCallback((row, colDef) => {
     const value = getRowValue(row, colDef);
     if (!colDef || !colDef.valueFormatter) {
       return value;
     }
-    const id = (getRowId ? getRowId(row) : row.id) ?? row[GRID_ID_AUTOGENERATED];
-    const field = colDef.field;
-    return colDef.valueFormatter({
-      id,
-      field,
-      value,
-      api: apiRef.current
-    });
-  }, [apiRef, getRowId, getRowValue]);
+    return colDef.valueFormatter(value, row, colDef, apiRef);
+  }, [apiRef, getRowValue]);
   const getColumnHeaderElement = React.useCallback(field => {
     if (!apiRef.current.rootElementRef.current) {
       return null;

package/modern/hooks/features/rows/useGridRows.js

@@ -121,7 +121,7 @@ export const useGridRows = (apiRef, props) => {
   }, [logger, props.getRowId, props.loading, props.rowCount, throttledRowsChange, apiRef]);
   const updateRows = React.useCallback(updates => {
     if (props.signature === GridSignature.DataGrid && updates.length > 1) {
-      throw new Error(["MUI X: You can't update several rows at once in `apiRef.current.updateRows` on the DataGrid.", 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
+      throw new Error(['MUI X: You cannot update several rows at once in `apiRef.current.updateRows` on the DataGrid.', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
     }
     const nonPinnedRowsUpdates = [];
     updates.forEach(update => {
@@ -246,7 +246,7 @@ export const useGridRows = (apiRef, props) => {
   }, [apiRef, logger]);
   const replaceRows = React.useCallback((firstRowToRender, newRows) => {
     if (props.signature === GridSignature.DataGrid && newRows.length > 1) {
-      throw new Error(["MUI X: You can't replace rows using `apiRef.current.unstable_replaceRows` on the DataGrid.", 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
+      throw new Error(['MUI X: You cannot replace rows using `apiRef.current.unstable_replaceRows` on the DataGrid.', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
     }
     if (newRows.length === 0) {
       return;

package/modern/hooks/features/virtualization/useGridVirtualScroller.js

@@ -46,7 +46,6 @@ export const useGridVirtualScroller = () => {
   const gridRootRef = apiRef.current.rootElementRef;
   const mainRef = apiRef.current.mainElementRef;
   const scrollerRef = apiRef.current.virtualScrollerRef;
-  const renderZoneRef = React.useRef(null);
   const scrollbarVerticalRef = React.useRef(null);
   const scrollbarHorizontalRef = React.useRef(null);
   const contentHeight = dimensions.contentSize.height;
@@ -244,6 +243,14 @@ export const useGridVirtualScroller = () => {
         id,
         model
       } = renderedRows[i];
+      const rowIndexInPage = (currentPage?.range?.firstRowIndex || 0) + firstRowToRender + i;
+      let index = rowIndexOffset + rowIndexInPage;
+      if (isRowWithFocusedCellNotInRange && cellFocus?.id === id) {
+        index = indexOfRowWithFocusedCell;
+        isRowWithFocusedCellRendered = true;
+      } else if (isRowWithFocusedCellRendered) {
+        index -= 1;
+      }
       const isRowNotVisible = isRowWithFocusedCellNotInRange && cellFocus.id === id;
       const baseRowHeight = !apiRef.current.rowHasAutoHeight(id) ? apiRef.current.unstable_getRowHeight(id) : 'auto';
       let isSelected;
@@ -254,7 +261,7 @@ export const useGridVirtualScroller = () => {
       }
       let isFirstVisible = false;
       if (params.position === undefined) {
-        isFirstVisible = i === 0;
+        isFirstVisible = rowIndexInPage === 0;
       }
       let isLastVisible = false;
       if (isLastSection) {
@@ -276,13 +283,6 @@ export const useGridVirtualScroller = () => {
         const cellParams = apiRef.current.getCellParams(id, cellTabIndex.field);
         tabbableCell = cellParams.cellMode === 'view' ? cellTabIndex.field : null;
       }
-      let index = rowIndexOffset + (currentPage?.range?.firstRowIndex || 0) + firstRowToRender + i;
-      if (isRowWithFocusedCellNotInRange && cellFocus?.id === id) {
-        index = indexOfRowWithFocusedCell;
-        isRowWithFocusedCellRendered = true;
-      } else if (isRowWithFocusedCellRendered) {
-        index -= 1;
-      }
       rows.push( /*#__PURE__*/_jsx(rootProps.slots.row, _extends({
         row: model,
         rowId: id,
@@ -383,7 +383,6 @@ export const useGridVirtualScroller = () => {
       role: 'presentation'
     }),
     getRenderZoneProps: () => ({
-      ref: renderZoneRef,
       role: 'rowgroup'
     }),
     getScrollbarVerticalProps: () => ({

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.0.0-beta.0
+ * @mui/x-data-grid v7.0.0-beta.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/internals/utils/propValidation.js

@@ -1,4 +1,4 @@
-export const propValidatorsDataGrid = [props => props.autoPageSize && props.autoHeight && ['MUI X: `<DataGrid autoPageSize={true} autoHeight={true} />` are not valid props.', 'You can not use both the `autoPageSize` and `autoHeight` props at the same time because `autoHeight` scales the height of the Data Grid according to the `pageSize`.', '', 'Please remove one of these two props.'].join('\n') || undefined];
+export const propValidatorsDataGrid = [props => props.autoPageSize && props.autoHeight && ['MUI X: `<DataGrid autoPageSize={true} autoHeight={true} />` are not valid props.', 'You cannot use both the `autoPageSize` and `autoHeight` props at the same time because `autoHeight` scales the height of the Data Grid according to the `pageSize`.', '', 'Please remove one of these two props.'].join('\n') || undefined];
 const warnedOnceMap = new Set();
 const warnOnce = message => {
   if (!warnedOnceMap.has(message)) {

package/modern/joy/joySlots.js

@@ -398,8 +398,8 @@ const joySlots = _extends({}, joyIconSlots, {
   baseSelect: Select,
   baseSelectOption: Option,
   baseInputLabel: InputLabel,
-  baseFormControl: JoyFormControl,
-  baseTooltip: JoyTooltip,
+  baseFormControl: JoyFormControl /* FIXME: typing error */,
+  baseTooltip: JoyTooltip /* FIXME: typing error */,
   pagination: Pagination,
   loadingOverlay: LoadingOverlay
 });

package/modern/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/modern/locales/heIL.js

@@ -59,13 +59,12 @@ const heILGrid = {
   filterOperatorIsEmpty: 'ריק',
   filterOperatorIsNotEmpty: 'אינו ריק',
   filterOperatorIsAnyOf: 'הוא אחד מ-',
-  // 'filterOperator=': '=',
-  // 'filterOperator!=': '!=',
-  // 'filterOperator>': '>',
-  // 'filterOperator>=': '>=',
-  // 'filterOperator<': '<',
-  // 'filterOperator<=': '<=',
-
+  'filterOperator=': '=',
+  'filterOperator!=': '!=',
+  'filterOperator>': '>',
+  'filterOperator>=': '>=',
+  'filterOperator<': '<',
+  'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'מכיל',
   headerFilterOperatorEquals: 'שווה',
@@ -133,7 +132,7 @@ const heILGrid = {
   groupColumn: name => `קבץ לפי ${name}`,
   unGroupColumn: name => `הפסק לקבץ לפי ${name}`,
   // Master/detail
-  // detailPanelToggle: 'Detail panel toggle',
+  detailPanelToggle: 'הצג/הסתר פרטים',
   expandDetailPanel: 'הרחב',
   collapseDetailPanel: 'כווץ',
   // Row reordering text

package/node/DataGrid/DataGrid.js

@@ -313,7 +313,7 @@ DataGridRaw.propTypes = {
   loading: _propTypes.default.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.default.object,
   /**

package/node/DataGrid/useDataGridComponent.js

@@ -63,7 +63,7 @@ const useDataGridComponent = (inputApiRef, props) => {
   (0, _useGridRowSelection.useGridRowSelection)(apiRef, props);
   (0, _useGridColumns.useGridColumns)(apiRef, props);
   (0, _useGridRows.useGridRows)(apiRef, props);
-  (0, _useGridParamsApi.useGridParamsApi)(apiRef, props);
+  (0, _useGridParamsApi.useGridParamsApi)(apiRef);
   (0, _useGridColumnSpanning.useGridColumnSpanning)(apiRef);
   (0, _useGridColumnGrouping.useGridColumnGrouping)(apiRef, props);
   (0, _useGridEditing.useGridEditing)(apiRef, props);

package/node/DataGrid/useDataGridProps.js

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

package/node/colDef/gridBooleanColDef.js

@@ -11,12 +11,9 @@ var _GridBooleanCell = require("../components/cell/GridBooleanCell");
 var _GridEditBooleanCell = require("../components/cell/GridEditBooleanCell");
 var _gridSortingUtils = require("../hooks/features/sorting/gridSortingUtils");
 var _gridBooleanOperators = require("./gridBooleanOperators");
-function gridBooleanFormatter({
-  value,
-  api
-}) {
-  return value ? api.getLocaleText('booleanCellTrueLabel') : api.getLocaleText('booleanCellFalseLabel');
-}
+const gridBooleanFormatter = (value, row, column, apiRef) => {
+  return value ? apiRef.current.getLocaleText('booleanCellTrueLabel') : apiRef.current.getLocaleText('booleanCellFalseLabel');
+};
 const stringToBoolean = value => {
   switch (value.toLowerCase().trim()) {
     case 'true':

package/node/colDef/gridCheckboxSelectionColDef.js

@@ -28,9 +28,10 @@ const GRID_CHECKBOX_SELECTION_COL_DEF = exports.GRID_CHECKBOX_SELECTION_COL_DEF
   disableReorder: true,
   disableExport: true,
   getApplyQuickFilterFn: undefined,
-  valueGetter: params => {
-    const selectionLookup = (0, _gridRowSelectionSelector.selectedIdsLookupSelector)(params.api.state, params.api.instanceId);
-    return selectionLookup[params.id] !== undefined;
+  valueGetter: (value, row, column, apiRef) => {
+    const selectionLookup = (0, _gridRowSelectionSelector.selectedIdsLookupSelector)(apiRef);
+    const rowId = apiRef.current.getRowId(row);
+    return selectionLookup[rowId] !== undefined;
   },
   renderHeader: params => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridHeaderCheckbox.GridHeaderCheckbox, (0, _extends2.default)({}, params)),
   renderCell: params => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridCellCheckboxRenderer.GridCellCheckboxRenderer, (0, _extends2.default)({}, params))

package/node/colDef/gridDateColDef.js

@@ -4,9 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.GRID_DATE_COL_DEF = exports.GRID_DATETIME_COL_DEF = void 0;
-exports.gridDateFormatter = gridDateFormatter;
-exports.gridDateTimeFormatter = gridDateTimeFormatter;
+exports.gridDateTimeFormatter = exports.gridDateFormatter = exports.GRID_DATE_COL_DEF = exports.GRID_DATETIME_COL_DEF = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _gridSortingUtils = require("../hooks/features/sorting/gridSortingUtils");
 var _gridDateOperators = require("./gridDateOperators");
@@ -22,38 +20,34 @@ function throwIfNotDateObject({
     throw new Error([`MUI X: \`${columnType}\` column type only accepts \`Date\` objects as values.`, 'Use `valueGetter` to transform the value into a `Date` object.', `Row ID: ${rowId}, field: "${field}".`].join('\n'));
   }
 }
-function gridDateFormatter({
-  value,
-  field,
-  id
-}) {
+const gridDateFormatter = (value, row, column, apiRef) => {
   if (!value) {
     return '';
   }
+  const rowId = apiRef.current.getRowId(row);
   throwIfNotDateObject({
     value,
     columnType: 'date',
-    rowId: id,
-    field
+    rowId,
+    field: column.field
   });
   return value.toLocaleDateString();
-}
-function gridDateTimeFormatter({
-  value,
-  field,
-  id
-}) {
+};
+exports.gridDateFormatter = gridDateFormatter;
+const gridDateTimeFormatter = (value, row, column, apiRef) => {
   if (!value) {
     return '';
   }
+  const rowId = apiRef.current.getRowId(row);
   throwIfNotDateObject({
     value,
     columnType: 'dateTime',
-    rowId: id,
-    field
+    rowId,
+    field: column.field
   });
   return value.toLocaleString();
-}
+};
+exports.gridDateTimeFormatter = gridDateTimeFormatter;
 const GRID_DATE_COL_DEF = exports.GRID_DATE_COL_DEF = (0, _extends2.default)({}, _gridStringColDef.GRID_STRING_COL_DEF, {
   type: 'date',
   sortComparator: _gridSortingUtils.gridDateComparator,

package/node/colDef/gridNumericColDef.js

@@ -16,9 +16,7 @@ const GRID_NUMERIC_COL_DEF = exports.GRID_NUMERIC_COL_DEF = (0, _extends2.defaul
   headerAlign: 'right',
   sortComparator: _gridSortingUtils.gridNumberComparator,
   valueParser: value => value === '' ? null : Number(value),
-  valueFormatter: ({
-    value
-  }) => (0, _utils.isNumber)(value) ? value.toLocaleString() : value || '',
+  valueFormatter: value => (0, _utils.isNumber)(value) ? value.toLocaleString() : value || '',
   filterOperators: (0, _gridNumericOperators.getGridNumericOperators)(),
   getApplyQuickFilterFn: _gridNumericOperators.getGridNumericQuickFilterFn
 });

package/node/colDef/gridSingleSelectColDef.js

@@ -24,20 +24,15 @@ const GRID_SINGLE_SELECT_COL_DEF = exports.GRID_SINGLE_SELECT_COL_DEF = (0, _ext
   type: 'singleSelect',
   getOptionLabel: defaultGetOptionLabel,
   getOptionValue: defaultGetOptionValue,
-  valueFormatter(params) {
-    const {
-      id,
-      field,
-      value,
-      api
-    } = params;
-    const colDef = params.api.getColumn(field);
+  valueFormatter(value, row, colDef, apiRef) {
+    // const { id, field, value, api } = params;
+    const rowId = apiRef.current.getRowId(row);
     if (!(0, _filterPanelUtils.isSingleSelectColDef)(colDef)) {
       return '';
     }
     const valueOptions = (0, _filterPanelUtils.getValueOptions)(colDef, {
-      id,
-      row: id ? api.getRow(id) : null
+      id: rowId,
+      row
     });
     if (value == null) {
       return '';
@@ -54,8 +49,8 @@ const GRID_SINGLE_SELECT_COL_DEF = exports.GRID_SINGLE_SELECT_COL_DEF = (0, _ext
   renderEditCell: _GridEditSingleSelectCell.renderEditSingleSelectCell,
   filterOperators: (0, _gridSingleSelectOperators.getGridSingleSelectOperators)(),
   // @ts-ignore
-  pastedValueParser: (value, params) => {
-    const colDef = params.colDef;
+  pastedValueParser: (value, row, column) => {
+    const colDef = column;
     const valueOptions = (0, _filterPanelUtils.getValueOptions)(colDef) || [];
     const getOptionValue = colDef.getOptionValue;
     const valueOption = valueOptions.find(option => {

package/node/components/GridPagination.js

@@ -33,13 +33,19 @@ const GridPaginationRoot = (0, _styles.styled)(_TablePagination.default)(({
     }
   }
 }));
+
+// A mutable version of a readonly array.
+
 const GridPagination = exports.GridPagination = /*#__PURE__*/React.forwardRef(function GridPagination(props, ref) {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const paginationModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridPaginationSelector.gridPaginationModelSelector);
   const visibleTopLevelRowCount = (0, _useGridSelector.useGridSelector)(apiRef, _filter.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);
@@ -74,7 +80,11 @@ const GridPagination = exports.GridPagination = /*#__PURE__*/React.forwardRef(fu
     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/node/components/GridRow.js

@@ -45,9 +45,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 (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
@@ -281,7 +279,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 {
@@ -369,7 +367,10 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     "aria-selected": selected,
     style: style
   }, eventHandlers, other, {
-    children: [leftCells, cells, emptyCellWidth > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(EmptyCell, {
+    children: [leftCells, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: _gridClasses.gridClasses.cellOffsetLeft,
+      role: "presentation"
+    }), cells, emptyCellWidth > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(EmptyCell, {
       width: emptyCellWidth
     }), rightCells.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       role: "presentation",

package/node/components/GridScrollbarFillerCell.js

@@ -30,9 +30,6 @@ const Style = (0, _styles.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/node/components/base/GridFooterPlaceholder.js

@@ -16,5 +16,5 @@ function GridFooterPlaceholder() {
   if (rootProps.hideFooter) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.footer, (0, _extends2.default)({}, rootProps.slotProps?.footer));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.footer, (0, _extends2.default)({}, rootProps.slotProps?.footer /* FIXME: typing error */));
 }

package/node/components/cell/GridActionsCell.js

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