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

package/models/colDef/gridColDef.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { GridCellClassNamePropType } from '../gridCellClass';
 import { GridColumnHeaderClassNamePropType } from '../gridColumnHeaderClass';
 import type { GridFilterOperator } from '../gridFilterOperator';
-import { GridCellParams, GridRenderCellParams, GridRenderEditCellParams, GridValueFormatterParams, GridValueGetterParams, GridValueSetterParams, GridPreProcessEditCellProps } from '../params/gridCellParams';
+import { GridRenderCellParams, GridRenderEditCellParams, GridPreProcessEditCellProps } from '../params/gridCellParams';
 import { GridColumnHeaderParams } from '../params/gridColumnHeaderParams';
 import { GridComparatorFn, GridSortDirection } from '../gridSortModel';
 import { GridColType } from './gridColType';
@@ -26,6 +26,11 @@ export type ValueOptions = string | number | {
 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;
 /**
  * Column Definition base interface.
  */
@@ -115,34 +120,23 @@ export interface GridBaseColDef<R extends GridValidRowModel = GridValidRowModel,
     align?: GridAlignment;
     /**
      * Function that allows to get a specific data instead of field to render in the cell.
-     * @template R, V
-     * @param {GridValueGetterParams<R, any>} params Object containing parameters for the getter.
-     * @returns {V} The cell value.
      */
-    valueGetter?: (params: GridValueGetterParams<R, any>) => V;
+    valueGetter?: 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.
-     * @template R, V
-     * @param {GridValueSetterParams<R, V>} params Object containing parameters for the setter.
      * @returns {R} The row with the updated field.
      */
-    valueSetter?: (params: GridValueSetterParams<R, V>) => R;
+    valueSetter?: GridValueSetter<R, V, F>;
     /**
      * Function that allows to apply a formatter before rendering its value.
-     * @template V, F
-     * @param {GridValueFormatterParams<V>} params Object containing parameters for the formatter.
-     * @returns {F} The formatted value.
      */
-    valueFormatter?: (params: GridValueFormatterParams<V>) => F;
+    valueFormatter?: GridValueFormatter<R, V, F>;
     /**
      * Function that takes the user-entered value and converts it to a value used internally.
-     * @template R, V, F
-     * @param {F | undefined} value The user-entered value.
-     * @param {GridCellParams<R, V, F>} params The params when called before saving the value.
      * @returns {V} The converted value to use internally.
      */
-    valueParser?: (value: F | undefined, params?: GridCellParams<R, V, F>) => V;
+    valueParser?: GridValueParser<R, V, F>;
     /**
      * Class name that will be added in cells for that column.
      */
@@ -224,7 +218,7 @@ export interface GridBaseColDef<R extends GridValidRowModel = GridValidRowModel,
      * Number of columns a cell should span.
      * @default 1
      */
-    colSpan?: number | ((params: GridCellParams<R, V, F>) => number | undefined);
+    colSpan?: number | GridColSpanFn<R, V, F>;
 }
 /**
  * Column Definition interface used for columns with the `actions` type.

package/models/colDef/index.d.ts

@@ -1,3 +1,3 @@
-export type { GridAlignment, ValueOptions, GridKeyValue, GridColDef, GridColTypeDef, GridColumnsMeta, GridSingleSelectColDef, GridActionsColDef, GetApplyQuickFilterFn, } from './gridColDef';
+export type { GridAlignment, ValueOptions, GridKeyValue, GridColDef, GridColTypeDef, GridColumnsMeta, GridSingleSelectColDef, GridActionsColDef, GetApplyQuickFilterFn, GridValueGetter, GridValueFormatter, GridValueSetter, GridValueParser, GridColSpanFn, } from './gridColDef';
 export * from './gridColType';
 export * from './gridColumnTypesRecord';

package/models/params/gridCellParams.d.ts

@@ -81,32 +81,6 @@ export interface GridRenderEditCellParams<R extends GridValidRowModel = any, V =
      */
     api: GridApiCommunity;
 }
-/**
- * Parameters passed to `colDef.valueGetter`.
- */
-export interface GridValueGetterParams<R extends GridValidRowModel = any, V = any, N extends GridTreeNodeWithRender = GridTreeNodeWithRender> extends Omit<GridCellParams<R, V, any, N>, 'formattedValue' | 'isEditable'> {
-    /**
-     * GridApi that let you manipulate the grid.
-     */
-    api: GridApiCommunity;
-    /**
-     * The default value for the cell that the `valueGetter` is overriding.
-     */
-    value: GridCellParams<R, V, any>['value'];
-}
-/**
- * Object passed as parameter in the column [[GridColDef]] value setter callback.
- */
-export interface GridValueSetterParams<R extends GridValidRowModel = any, V = any> {
-    /**
-     * The new cell value.
-     */
-    value: V;
-    /**
-     * The row that is being edited.
-     */
-    row: R;
-}
 /**
  * Object passed as parameter in the column [[GridColDef]] value formatter callback.
  */

package/modern/DataGrid/useDataGridComponent.js

@@ -57,7 +57,7 @@ export const useDataGridComponent = (inputApiRef, props) => {
   useGridRowSelection(apiRef, props);
   useGridColumns(apiRef, props);
   useGridRows(apiRef, props);
-  useGridParamsApi(apiRef, props);
+  useGridParamsApi(apiRef);
   useGridColumnSpanning(apiRef);
   useGridColumnGrouping(apiRef, props);
   useGridEditing(apiRef, props);

package/modern/colDef/gridBooleanColDef.js

@@ -4,12 +4,9 @@ import { renderBooleanCell } from '../components/cell/GridBooleanCell';
 import { renderEditBooleanCell } from '../components/cell/GridEditBooleanCell';
 import { gridNumberComparator } from '../hooks/features/sorting/gridSortingUtils';
 import { getGridBooleanOperators } from './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/modern/colDef/gridCheckboxSelectionColDef.js

@@ -19,9 +19,10 @@ export const GRID_CHECKBOX_SELECTION_COL_DEF = _extends({}, GRID_BOOLEAN_COL_DEF
   disableReorder: true,
   disableExport: true,
   getApplyQuickFilterFn: undefined,
-  valueGetter: params => {
-    const selectionLookup = selectedIdsLookupSelector(params.api.state, params.api.instanceId);
-    return selectionLookup[params.id] !== undefined;
+  valueGetter: (value, row, column, apiRef) => {
+    const selectionLookup = selectedIdsLookupSelector(apiRef);
+    const rowId = apiRef.current.getRowId(row);
+    return selectionLookup[rowId] !== undefined;
   },
   renderHeader: params => /*#__PURE__*/_jsx(GridHeaderCheckbox, _extends({}, params)),
   renderCell: params => /*#__PURE__*/_jsx(GridCellCheckboxRenderer, _extends({}, params))

package/modern/colDef/gridDateColDef.js

@@ -13,38 +13,32 @@ 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'));
   }
 }
-export function gridDateFormatter({
-  value,
-  field,
-  id
-}) {
+export 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();
-}
-export function gridDateTimeFormatter({
-  value,
-  field,
-  id
-}) {
+};
+export 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();
-}
+};
 export const GRID_DATE_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   type: 'date',
   sortComparator: gridDateComparator,

package/modern/colDef/gridNumericColDef.js

@@ -9,9 +9,7 @@ export const GRID_NUMERIC_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   headerAlign: 'right',
   sortComparator: gridNumberComparator,
   valueParser: value => value === '' ? null : Number(value),
-  valueFormatter: ({
-    value
-  }) => isNumber(value) ? value.toLocaleString() : value || '',
+  valueFormatter: value => isNumber(value) ? value.toLocaleString() : value || '',
   filterOperators: getGridNumericOperators(),
   getApplyQuickFilterFn: getGridNumericQuickFilterFn
 });

package/modern/colDef/gridSingleSelectColDef.js

@@ -17,20 +17,15 @@ export const GRID_SINGLE_SELECT_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   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 (!isSingleSelectColDef(colDef)) {
       return '';
     }
     const valueOptions = getValueOptions(colDef, {
-      id,
-      row: id ? api.getRow(id) : null
+      id: rowId,
+      row
     });
     if (value == null) {
       return '';
@@ -47,8 +42,8 @@ export const GRID_SINGLE_SELECT_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   renderEditCell: renderEditSingleSelectCell,
   filterOperators: getGridSingleSelectOperators(),
   // @ts-ignore
-  pastedValueParser: (value, params) => {
-    const colDef = params.colDef;
+  pastedValueParser: (value, row, column) => {
+    const colDef = column;
     const valueOptions = getValueOptions(colDef) || [];
     const getOptionValue = colDef.getOptionValue;
     const valueOption = valueOptions.find(option => {

package/modern/components/cell/GridEditInputCell.js

@@ -57,7 +57,7 @@ const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     const column = apiRef.current.getColumn(field);
     let parsedValue = newValue;
     if (column.valueParser) {
-      parsedValue = column.valueParser(newValue, apiRef.current.getCellParams(id, field));
+      parsedValue = column.valueParser(newValue, apiRef.current.getRow(id), column, apiRef);
     }
     setValueState(parsedValue);
     apiRef.current.setEditCellValue({

package/modern/components/columnsManagement/GridColumnsManagement.js

@@ -42,6 +42,7 @@ function GridColumnsManagement(props) {
     autoFocusSearchField = true,
     disableShowHideToggle = false,
     disableResetButton = false,
+    toggleAllMode = 'all',
     getTogglableColumns
   } = props;
   const isResetDisabled = React.useMemo(() => checkColumnVisibilityModelsSame(columnVisibilityModel, initialColumnVisibilityModel), [columnVisibilityModel, initialColumnVisibilityModel]);
@@ -61,11 +62,21 @@ function GridColumnsManagement(props) {
     } = event.target;
     apiRef.current.setColumnVisibility(field, columnVisibilityModel[field] === false);
   };
+  const currentColumns = React.useMemo(() => {
+    const togglableColumns = getTogglableColumns ? getTogglableColumns(sortedColumns) : null;
+    const togglableSortedColumns = togglableColumns ? sortedColumns.filter(({
+      field
+    }) => togglableColumns.includes(field)) : sortedColumns;
+    if (!searchValue) {
+      return togglableSortedColumns;
+    }
+    return togglableSortedColumns.filter(column => searchPredicate(column, searchValue.toLowerCase()));
+  }, [sortedColumns, searchValue, searchPredicate, getTogglableColumns]);
   const toggleAllColumns = React.useCallback(isVisible => {
     const currentModel = gridColumnVisibilityModelSelector(apiRef);
     const newModel = _extends({}, currentModel);
     const togglableColumns = getTogglableColumns ? getTogglableColumns(columns) : null;
-    columns.forEach(col => {
+    (toggleAllMode === 'filteredOnly' ? currentColumns : columns).forEach(col => {
       if (col.hideable && (togglableColumns == null || togglableColumns.includes(col.field))) {
         if (isVisible) {
           // delete the key from the model instead of setting it to `true`
@@ -76,20 +87,10 @@ function GridColumnsManagement(props) {
       }
     });
     return apiRef.current.setColumnVisibilityModel(newModel);
-  }, [apiRef, columns, getTogglableColumns]);
+  }, [apiRef, columns, getTogglableColumns, toggleAllMode, currentColumns]);
   const handleSearchValueChange = React.useCallback(event => {
     setSearchValue(event.target.value);
   }, []);
-  const currentColumns = React.useMemo(() => {
-    const togglableColumns = getTogglableColumns ? getTogglableColumns(sortedColumns) : null;
-    const togglableSortedColumns = togglableColumns ? sortedColumns.filter(({
-      field
-    }) => togglableColumns.includes(field)) : sortedColumns;
-    if (!searchValue) {
-      return togglableSortedColumns;
-    }
-    return togglableSortedColumns.filter(column => searchPredicate(column, searchValue.toLowerCase()));
-  }, [sortedColumns, searchValue, searchPredicate, getTogglableColumns]);
   const hideableColumns = React.useMemo(() => currentColumns.filter(col => col.hideable), [currentColumns]);
   const allHideableColumnsVisible = React.useMemo(() => hideableColumns.every(column => columnVisibilityModel[column.field] == null || columnVisibilityModel[column.field] !== false), [columnVisibilityModel, hideableColumns]);
   const allHideableColumnsHidden = React.useMemo(() => hideableColumns.every(column => columnVisibilityModel[column.field] === false), [columnVisibilityModel, hideableColumns]);
@@ -160,14 +161,11 @@ function GridColumnsManagement(props) {
           checked: allHideableColumnsVisible,
           indeterminate: !allHideableColumnsVisible && !allHideableColumnsHidden,
           onClick: () => toggleAllColumns(!allHideableColumnsVisible),
-          name: apiRef.current.getLocaleText('columnsManagementShowHideAllText')
-        }, rootProps.slotProps?.baseCheckbox)),
-        sx: {
-          [`.MuiFormControlLabel-label`]: {
-            textTransform: 'uppercase',
-            fontSize: '14px'
+          name: apiRef.current.getLocaleText('columnsManagementShowHideAllText'),
+          sx: {
+            p: 0.5
           }
-        },
+        }, rootProps.slotProps?.baseCheckbox)),
         label: apiRef.current.getLocaleText('columnsManagementShowHideAllText')
       }) : /*#__PURE__*/_jsx("span", {}), !disableResetButton ? /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
         onClick: () => apiRef.current.setColumnVisibilityModel(initialColumnVisibilityModel),
@@ -209,7 +207,14 @@ process.env.NODE_ENV !== "production" ? GridColumnsManagement.propTypes = {
    */
   getTogglableColumns: PropTypes.func,
   searchPredicate: PropTypes.func,
-  sort: PropTypes.oneOf(['asc', 'desc'])
+  sort: PropTypes.oneOf(['asc', 'desc']),
+  /**
+   * Changes the behavior of the `Show/Hide All` toggle when the search field is used:
+   * - `all`: Will toggle all columns.
+   * - `filteredOnly`: Will only toggle columns that match the search criteria.
+   * @default 'all'
+   */
+  toggleAllMode: PropTypes.oneOf(['all', 'filteredOnly'])
 } : void 0;
 const GridColumnsManagementBody = styled('div', {
   name: 'MuiDataGrid',
@@ -242,7 +247,7 @@ const GridColumnsManagementFooter = styled('div', {
 })(({
   theme
 }) => ({
-  padding: theme.spacing(0.5, 1, 0.5, 2.4),
+  padding: theme.spacing(0.5, 1, 0.5, 3),
   display: 'flex',
   justifyContent: 'space-between',
   borderTop: `1px solid ${theme.palette.divider}`

package/modern/hooks/features/columns/useGridColumnSpanning.js

@@ -59,7 +59,9 @@ function calculateCellColSpan(params) {
   } = params;
   const columnsLength = columns.length;
   const column = columns[columnIndex];
-  const colSpan = typeof column.colSpan === 'function' ? column.colSpan(apiRef.current.getCellParams(rowId, column.field)) : column.colSpan;
+  const row = apiRef.current.getRow(rowId);
+  const value = apiRef.current.getRowValue(row, column);
+  const colSpan = typeof column.colSpan === 'function' ? column.colSpan(value, row, column, apiRef) : column.colSpan;
   if (!colSpan || colSpan === 1) {
     setCellColSpanInfo(lookup, rowId, columnIndex, {
       spannedByColSpan: false,

package/modern/hooks/features/editing/useGridCellEditing.js

@@ -334,7 +334,7 @@ export const useGridCellEditing = (apiRef, props) => {
     const row = apiRef.current.getRow(id);
     let parsedValue = value;
     if (column.valueParser && !skipValueParser) {
-      parsedValue = column.valueParser(value, apiRef.current.getCellParams(id, field));
+      parsedValue = column.valueParser(value, row, column, apiRef);
     }
     let editingState = gridEditRowsStateSelector(apiRef.current.state);
     let newProps = _extends({}, editingState[id][field], {
@@ -382,10 +382,7 @@ export const useGridCellEditing = (apiRef, props) => {
     const {
       value
     } = editingState[id][field];
-    return column.valueSetter ? column.valueSetter({
-      value,
-      row
-    }) : _extends({}, row, {
+    return column.valueSetter ? column.valueSetter(value, row, column, apiRef) : _extends({}, row, {
       [field]: value
     });
   }, [apiRef]);

package/modern/hooks/features/editing/useGridRowEditing.js

@@ -409,7 +409,7 @@ export const useGridRowEditing = (apiRef, props) => {
     const row = apiRef.current.getRow(id);
     let parsedValue = value;
     if (column.valueParser && !skipValueParser) {
-      parsedValue = column.valueParser(value, apiRef.current.getCellParams(id, field));
+      parsedValue = column.valueParser(value, row, column, apiRef);
     }
     let editingState = gridEditRowsStateSelector(apiRef.current.state);
     let newProps = _extends({}, editingState[id][field], {
@@ -509,10 +509,7 @@ export const useGridRowEditing = (apiRef, props) => {
     Object.entries(editingState[id]).forEach(([field, fieldProps]) => {
       const column = apiRef.current.getColumn(field);
       if (column.valueSetter) {
-        rowUpdate = column.valueSetter({
-          value: fieldProps.value,
-          row: rowUpdate
-        });
+        rowUpdate = column.valueSetter(fieldProps.value, rowUpdate, column, apiRef);
       } else {
         rowUpdate[field] = fieldProps.value;
       }

package/modern/hooks/features/filter/gridFilterUtils.js

@@ -88,7 +88,7 @@ const getFilterCallbackFromItem = (filterItem, apiRef) => {
   let parsedValue;
   if (column.valueParser) {
     const parser = column.valueParser;
-    parsedValue = Array.isArray(filterItem.value) ? filterItem.value?.map(x => parser(x)) : parser(filterItem.value);
+    parsedValue = Array.isArray(filterItem.value) ? filterItem.value?.map(x => parser(x, undefined, column, apiRef)) : parser(filterItem.value, undefined, column, apiRef);
   } else {
     parsedValue = filterItem.value;
   }

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/index.js

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

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/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/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))