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

package/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,32 +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) => {
-    var _getRowId;
-    const id = GRID_ID_AUTOGENERATED in row ? row[GRID_ID_AUTOGENERATED] : (_getRowId = getRowId == null ? void 0 : getRowId(row)) != null ? _getRowId : 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) => {
-    var _ref;
     const value = getRowValue(row, colDef);
     if (!colDef || !colDef.valueFormatter) {
       return value;
     }
-    const id = (_ref = getRowId ? getRowId(row) : row.id) != null ? _ref : 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/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/legacy/DataGrid/useDataGridComponent.js

@@ -57,7 +57,7 @@ export var useDataGridComponent = function useDataGridComponent(inputApiRef, pro
   useGridRowSelection(apiRef, props);
   useGridColumns(apiRef, props);
   useGridRows(apiRef, props);
-  useGridParamsApi(apiRef, props);
+  useGridParamsApi(apiRef);
   useGridColumnSpanning(apiRef);
   useGridColumnGrouping(apiRef, props);
   useGridEditing(apiRef, props);

package/legacy/colDef/gridBooleanColDef.js

@@ -4,11 +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(_ref) {
-  var value = _ref.value,
-    api = _ref.api;
-  return value ? api.getLocaleText('booleanCellTrueLabel') : api.getLocaleText('booleanCellFalseLabel');
-}
+var gridBooleanFormatter = function gridBooleanFormatter(value, row, column, apiRef) {
+  return value ? apiRef.current.getLocaleText('booleanCellTrueLabel') : apiRef.current.getLocaleText('booleanCellFalseLabel');
+};
 var stringToBoolean = function stringToBoolean(value) {
   switch (value.toLowerCase().trim()) {
     case 'true':

package/legacy/colDef/gridCheckboxSelectionColDef.js

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

package/legacy/colDef/gridDateColDef.js

@@ -12,36 +12,32 @@ function throwIfNotDateObject(_ref) {
     throw new Error(["MUI X: `".concat(columnType, "` column type only accepts `Date` objects as values."), 'Use `valueGetter` to transform the value into a `Date` object.', "Row ID: ".concat(rowId, ", field: \"").concat(field, "\".")].join('\n'));
   }
 }
-export function gridDateFormatter(_ref2) {
-  var value = _ref2.value,
-    field = _ref2.field,
-    id = _ref2.id;
+export var gridDateFormatter = function gridDateFormatter(value, row, column, apiRef) {
   if (!value) {
     return '';
   }
+  var rowId = apiRef.current.getRowId(row);
   throwIfNotDateObject({
     value: value,
     columnType: 'date',
-    rowId: id,
-    field: field
+    rowId: rowId,
+    field: column.field
   });
   return value.toLocaleDateString();
-}
-export function gridDateTimeFormatter(_ref3) {
-  var value = _ref3.value,
-    field = _ref3.field,
-    id = _ref3.id;
+};
+export var gridDateTimeFormatter = function gridDateTimeFormatter(value, row, column, apiRef) {
   if (!value) {
     return '';
   }
+  var rowId = apiRef.current.getRowId(row);
   throwIfNotDateObject({
     value: value,
     columnType: 'dateTime',
-    rowId: id,
-    field: field
+    rowId: rowId,
+    field: column.field
   });
   return value.toLocaleString();
-}
+};
 export var GRID_DATE_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   type: 'date',
   sortComparator: gridDateComparator,

package/legacy/colDef/gridNumericColDef.js

@@ -11,8 +11,7 @@ export var GRID_NUMERIC_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   valueParser: function valueParser(value) {
     return value === '' ? null : Number(value);
   },
-  valueFormatter: function valueFormatter(_ref) {
-    var value = _ref.value;
+  valueFormatter: function valueFormatter(value) {
     return isNumber(value) ? value.toLocaleString() : value || '';
   },
   filterOperators: getGridNumericOperators(),

package/legacy/colDef/gridSingleSelectColDef.js

@@ -18,18 +18,15 @@ export var GRID_SINGLE_SELECT_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   type: 'singleSelect',
   getOptionLabel: defaultGetOptionLabel,
   getOptionValue: defaultGetOptionValue,
-  valueFormatter: function valueFormatter(params) {
-    var id = params.id,
-      field = params.field,
-      value = params.value,
-      api = params.api;
-    var colDef = params.api.getColumn(field);
+  valueFormatter: function valueFormatter(value, row, colDef, apiRef) {
+    // const { id, field, value, api } = params;
+    var rowId = apiRef.current.getRowId(row);
     if (!isSingleSelectColDef(colDef)) {
       return '';
     }
     var valueOptions = getValueOptions(colDef, {
-      id: id,
-      row: id ? api.getRow(id) : null
+      id: rowId,
+      row: row
     });
     if (value == null) {
       return '';
@@ -48,8 +45,8 @@ export var GRID_SINGLE_SELECT_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   renderEditCell: renderEditSingleSelectCell,
   filterOperators: getGridSingleSelectOperators(),
   // @ts-ignore
-  pastedValueParser: function pastedValueParser(value, params) {
-    var colDef = params.colDef;
+  pastedValueParser: function pastedValueParser(value, row, column) {
+    var colDef = column;
     var valueOptions = getValueOptions(colDef) || [];
     var getOptionValue = colDef.getOptionValue;
     var valueOption = valueOptions.find(function (option) {

package/legacy/components/cell/GridEditInputCell.js

@@ -80,7 +80,7 @@ var GridEditInputCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
             column = apiRef.current.getColumn(field);
             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/legacy/components/columnsManagement/GridColumnsManagement.js

@@ -1,4 +1,3 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
@@ -52,6 +51,8 @@ function GridColumnsManagement(props) {
     disableShowHideToggle = _props$disableShowHid === void 0 ? false : _props$disableShowHid,
     _props$disableResetBu = props.disableResetButton,
     disableResetButton = _props$disableResetBu === void 0 ? false : _props$disableResetBu,
+    _props$toggleAllMode = props.toggleAllMode,
+    toggleAllMode = _props$toggleAllMode === void 0 ? 'all' : _props$toggleAllMode,
     getTogglableColumns = props.getTogglableColumns;
   var isResetDisabled = React.useMemo(function () {
     return checkColumnVisibilityModelsSame(columnVisibilityModel, initialColumnVisibilityModel);
@@ -75,11 +76,24 @@ function GridColumnsManagement(props) {
       field = _ref.name;
     apiRef.current.setColumnVisibility(field, columnVisibilityModel[field] === false);
   };
+  var currentColumns = React.useMemo(function () {
+    var togglableColumns = getTogglableColumns ? getTogglableColumns(sortedColumns) : null;
+    var togglableSortedColumns = togglableColumns ? sortedColumns.filter(function (_ref2) {
+      var field = _ref2.field;
+      return togglableColumns.includes(field);
+    }) : sortedColumns;
+    if (!searchValue) {
+      return togglableSortedColumns;
+    }
+    return togglableSortedColumns.filter(function (column) {
+      return searchPredicate(column, searchValue.toLowerCase());
+    });
+  }, [sortedColumns, searchValue, searchPredicate, getTogglableColumns]);
   var toggleAllColumns = React.useCallback(function (isVisible) {
     var currentModel = gridColumnVisibilityModelSelector(apiRef);
     var newModel = _extends({}, currentModel);
     var togglableColumns = getTogglableColumns ? getTogglableColumns(columns) : null;
-    columns.forEach(function (col) {
+    (toggleAllMode === 'filteredOnly' ? currentColumns : columns).forEach(function (col) {
       if (col.hideable && (togglableColumns == null || togglableColumns.includes(col.field))) {
         if (isVisible) {
           // delete the key from the model instead of setting it to `true`
@@ -90,23 +104,10 @@ function GridColumnsManagement(props) {
       }
     });
     return apiRef.current.setColumnVisibilityModel(newModel);
-  }, [apiRef, columns, getTogglableColumns]);
+  }, [apiRef, columns, getTogglableColumns, toggleAllMode, currentColumns]);
   var handleSearchValueChange = React.useCallback(function (event) {
     setSearchValue(event.target.value);
   }, []);
-  var currentColumns = React.useMemo(function () {
-    var togglableColumns = getTogglableColumns ? getTogglableColumns(sortedColumns) : null;
-    var togglableSortedColumns = togglableColumns ? sortedColumns.filter(function (_ref2) {
-      var field = _ref2.field;
-      return togglableColumns.includes(field);
-    }) : sortedColumns;
-    if (!searchValue) {
-      return togglableSortedColumns;
-    }
-    return togglableSortedColumns.filter(function (column) {
-      return searchPredicate(column, searchValue.toLowerCase());
-    });
-  }, [sortedColumns, searchValue, searchPredicate, getTogglableColumns]);
   var hideableColumns = React.useMemo(function () {
     return currentColumns.filter(function (col) {
       return col.hideable;
@@ -194,12 +195,11 @@ function GridColumnsManagement(props) {
           onClick: function onClick() {
             return toggleAllColumns(!allHideableColumnsVisible);
           },
-          name: apiRef.current.getLocaleText('columnsManagementShowHideAllText')
+          name: apiRef.current.getLocaleText('columnsManagementShowHideAllText'),
+          sx: {
+            p: 0.5
+          }
         }, (_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseCheckbox)),
-        sx: _defineProperty({}, ".MuiFormControlLabel-label", {
-          textTransform: 'uppercase',
-          fontSize: '14px'
-        }),
         label: apiRef.current.getLocaleText('columnsManagementShowHideAllText')
       }) : /*#__PURE__*/_jsx("span", {}), !disableResetButton ? /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
         onClick: function onClick() {
@@ -243,7 +243,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;
 var GridColumnsManagementBody = styled('div', {
   name: 'MuiDataGrid',
@@ -251,8 +258,8 @@ var GridColumnsManagementBody = styled('div', {
   overridesResolver: function overridesResolver(props, styles) {
     return styles.columnsManagement;
   }
-})(function (_ref4) {
-  var theme = _ref4.theme;
+})(function (_ref3) {
+  var theme = _ref3.theme;
   return {
     padding: theme.spacing(0, 3, 1.5),
     display: 'flex',
@@ -269,8 +276,8 @@ var GridColumnsManagementHeader = styled('div', {
   overridesResolver: function overridesResolver(props, styles) {
     return styles.columnsManagementHeader;
   }
-})(function (_ref5) {
-  var theme = _ref5.theme;
+})(function (_ref4) {
+  var theme = _ref4.theme;
   return {
     padding: theme.spacing(1.5, 3)
   };
@@ -281,17 +288,17 @@ var GridColumnsManagementFooter = styled('div', {
   overridesResolver: function overridesResolver(props, styles) {
     return styles.columnsManagementFooter;
   }
-})(function (_ref6) {
-  var theme = _ref6.theme;
+})(function (_ref5) {
+  var theme = _ref5.theme;
   return {
-    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 ".concat(theme.palette.divider)
   };
 });
-var GridColumnsManagementEmptyText = styled('div')(function (_ref7) {
-  var theme = _ref7.theme;
+var GridColumnsManagementEmptyText = styled('div')(function (_ref6) {
+  var theme = _ref6.theme;
   return {
     padding: theme.spacing(0.5, 0),
     color: theme.palette.grey[500]

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

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

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

@@ -340,7 +340,7 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
             row = apiRef.current.getRow(id);
             parsedValue = value;
             if (column.valueParser && !skipValueParser) {
-              parsedValue = column.valueParser(value, apiRef.current.getCellParams(id, field));
+              parsedValue = column.valueParser(value, row, column, apiRef);
             }
             editingState = gridEditRowsStateSelector(apiRef.current.state);
             newProps = _extends({}, editingState[id][field], {
@@ -401,10 +401,7 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
       return apiRef.current.getRow(id);
     }
     var value = editingState[id][field].value;
-    return column.valueSetter ? column.valueSetter({
-      value: value,
-      row: row
-    }) : _extends({}, row, _defineProperty({}, field, value));
+    return column.valueSetter ? column.valueSetter(value, row, column, apiRef) : _extends({}, row, _defineProperty({}, field, value));
   }, [apiRef]);
   var editingApi = {
     getCellMode: getCellMode,

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

@@ -406,7 +406,7 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
     var row = apiRef.current.getRow(id);
     var parsedValue = value;
     if (column.valueParser && !skipValueParser) {
-      parsedValue = column.valueParser(value, apiRef.current.getCellParams(id, field));
+      parsedValue = column.valueParser(value, row, column, apiRef);
     }
     var editingState = gridEditRowsStateSelector(apiRef.current.state);
     var newProps = _extends({}, editingState[id][field], {
@@ -514,10 +514,7 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
         fieldProps = _ref4[1];
       var 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/legacy/hooks/features/filter/gridFilterUtils.js

@@ -100,8 +100,8 @@ var getFilterCallbackFromItem = function getFilterCallbackFromItem(filterItem, a
     var _filterItem$value;
     var parser = column.valueParser;
     parsedValue = Array.isArray(filterItem.value) ? (_filterItem$value = filterItem.value) == null ? void 0 : _filterItem$value.map(function (x) {
-      return parser(x);
-    }) : parser(filterItem.value);
+      return parser(x, undefined, column, apiRef);
+    }) : parser(filterItem.value, undefined, column, apiRef);
   } else {
     parsedValue = filterItem.value;
   }

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

@@ -8,7 +8,6 @@ function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstruct
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 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 var MissingRowIdError = /*#__PURE__*/function (_Error) {
@@ -28,8 +27,7 @@ export var MissingRowIdError = /*#__PURE__*/function (_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) {
-  var getRowId = props.getRowId;
+export function useGridParamsApi(apiRef) {
   var getColumnHeaderParams = React.useCallback(function (field) {
     return {
       field: field,
@@ -48,28 +46,6 @@ export function useGridParamsApi(apiRef, props) {
     };
     return params;
   }, [apiRef]);
-  var getBaseCellParams = React.useCallback(function (id, field) {
-    var row = apiRef.current.getRow(id);
-    var rowNode = apiRef.current.getRowNode(id);
-    if (!row || !rowNode) {
-      throw new MissingRowIdError("No row with id #".concat(id, " found"));
-    }
-    var cellFocus = gridFocusCellSelector(apiRef);
-    var cellTabIndex = gridTabIndexCellSelector(apiRef);
-    var params = {
-      id: id,
-      field: field,
-      row: row,
-      rowNode: 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]);
   var getCellParams = React.useCallback(function (id, field) {
     var colDef = apiRef.current.getColumn(field);
     var value = apiRef.current.getCellValue(id, field);
@@ -94,12 +70,7 @@ export function useGridParamsApi(apiRef, props) {
       isEditable: false
     };
     if (colDef && colDef.valueFormatter) {
-      params.formattedValue = colDef.valueFormatter({
-        id: 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;
@@ -113,32 +84,28 @@ export function useGridParamsApi(apiRef, props) {
       }
       return rowModel[field];
     }
-    return colDef.valueGetter(getBaseCellParams(id, field));
-  }, [apiRef, getBaseCellParams]);
+    var row = apiRef.current.getRow(id);
+    if (!row) {
+      throw new MissingRowIdError("No row with id #".concat(id, " found"));
+    }
+    var value = row[colDef.field];
+    return colDef.valueGetter(value, row, colDef, apiRef);
+  }, [apiRef]);
   var getRowValue = React.useCallback(function (row, colDef) {
-    var _getRowId;
-    var id = GRID_ID_AUTOGENERATED in row ? row[GRID_ID_AUTOGENERATED] : (_getRowId = getRowId == null ? void 0 : getRowId(row)) != null ? _getRowId : row.id;
     var field = colDef.field;
     if (!colDef || !colDef.valueGetter) {
       return row[field];
     }
-    return colDef.valueGetter(getBaseCellParams(id, field));
-  }, [getBaseCellParams, getRowId]);
+    var value = row[colDef.field];
+    return colDef.valueGetter(value, row, colDef, apiRef);
+  }, [apiRef]);
   var getRowFormattedValue = React.useCallback(function (row, colDef) {
-    var _ref;
     var value = getRowValue(row, colDef);
     if (!colDef || !colDef.valueFormatter) {
       return value;
     }
-    var id = (_ref = getRowId ? getRowId(row) : row.id) != null ? _ref : row[GRID_ID_AUTOGENERATED];
-    var field = colDef.field;
-    return colDef.valueFormatter({
-      id: id,
-      field: field,
-      value: value,
-      api: apiRef.current
-    });
-  }, [apiRef, getRowId, getRowValue]);
+    return colDef.valueFormatter(value, row, colDef, apiRef);
+  }, [apiRef, getRowValue]);
   var getColumnHeaderElement = React.useCallback(function (field) {
     if (!apiRef.current.rootElementRef.current) {
       return null;

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

@@ -61,13 +61,12 @@ var heILGrid = {
   filterOperatorIsEmpty: 'ריק',
   filterOperatorIsNotEmpty: 'אינו ריק',
   filterOperatorIsAnyOf: 'הוא אחד מ-',
-  // 'filterOperator=': '=',
-  // 'filterOperator!=': '!=',
-  // 'filterOperator>': '>',
-  // 'filterOperator>=': '>=',
-  // 'filterOperator<': '<',
-  // 'filterOperator<=': '<=',
-
+  'filterOperator=': '=',
+  'filterOperator!=': '!=',
+  'filterOperator>': '>',
+  'filterOperator>=': '>=',
+  'filterOperator<': '<',
+  'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'מכיל',
   headerFilterOperatorEquals: 'שווה',
@@ -145,7 +144,7 @@ var heILGrid = {
     return "\u05D4\u05E4\u05E1\u05E7 \u05DC\u05E7\u05D1\u05E5 \u05DC\u05E4\u05D9 ".concat(name);
   },
   // Master/detail
-  // detailPanelToggle: 'Detail panel toggle',
+  detailPanelToggle: 'הצג/הסתר פרטים',
   expandDetailPanel: 'הרחב',
   collapseDetailPanel: 'כווץ',
   // Row reordering text

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