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

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/components/containers/GridRootStyles.js

@@ -99,11 +99,15 @@ export var GridRootStyles = styled('div', {
     borderTopRightRadius: 'var(--unstable_DataGrid-radius)'
   }), "&.".concat(c.autoHeight), {
     height: 'auto'
-  }), "&.".concat(c.autosizing), _defineProperty(_defineProperty({}, "& .".concat(c.columnHeaderTitleContainerContent, " > *"), {
+  }), "&.".concat(c.autosizing), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "& .".concat(c.columnHeaderTitleContainerContent, " > *"), {
     overflow: 'visible !important'
   }), "& .".concat(c.cell, " > *"), {
     overflow: 'visible !important',
     whiteSpace: 'nowrap'
+  }), "& .".concat(c.groupingCriteriaCell), {
+    width: 'unset'
+  }), "& .".concat(c.treeDataGroupingCell), {
+    width: 'unset'
   })), "& .".concat(c.columnHeader, ", & .").concat(c.cell), {
     WebkitTapHighlightColor: 'transparent',
     lineHeight: null,
@@ -333,8 +337,10 @@ export var GridRootStyles = styled('div', {
     backgroundColor: pinnedSelectedBackground
   }), '&:hover', _defineProperty({}, "& .".concat(c['cell--pinnedLeft'], ", & .").concat(c['cell--pinnedRight']), {
     backgroundColor: pinnedSelectedHoverBackground
-  })))), "& .".concat(c.cell, ":not(.").concat(c['cell--pinnedLeft'], "):not(.").concat(c['cell--pinnedRight'], ")"), {
-    transform: 'translate3d(var(--DataGrid-offsetLeft), 0, 0)'
+  })))), "& .".concat(c.cellOffsetLeft), {
+    flex: '0 0 auto',
+    display: 'inline-block',
+    width: 'var(--DataGrid-offsetLeft)'
   }), "& .".concat(c.columnHeaderDraggableContainer), {
     display: 'flex',
     width: '100%',

package/legacy/components/panel/filterPanel/GridFilterInputBoolean.js

@@ -71,7 +71,7 @@ function GridFilterInputBoolean(props) {
           ref: focusElementRef,
           tabIndex: tabIndex
         }
-      }, others, baseSelectProps, {
+      }, others /* FIXME: typing error */, baseSelectProps, {
         children: [/*#__PURE__*/_jsx(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
           native: isSelectNative,
           value: "",

package/legacy/components/panel/filterPanel/GridFilterInputSingleSelect.js

@@ -107,7 +107,7 @@ function GridFilterInputSingleSelect(props) {
           placeholder: placeholder != null ? placeholder : apiRef.current.getLocaleText('filterPanelInputPlaceholder')
         },
         native: isSelectNative
-      }, others, (_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseSelect, {
+      }, others /* FIXME: typing error */, (_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseSelect, {
         children: renderSingleSelectOptions({
           column: resolvedColumn,
           OptionComponent: rootProps.slots.baseSelectOption,

package/legacy/components/panel/filterPanel/GridFilterPanel.js

@@ -142,7 +142,7 @@ var GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(pro
     }
     return apiRef.current.setFilterModel(_extends({}, filterModel, {
       items: readOnlyFilters
-    }));
+    }), 'removeAllFilterItems');
   }, [apiRef, readOnlyFilters, filterModel, validFilters]);
   React.useEffect(function () {
     if (logicOperators.length > 0 && filterModel.logicOperator && !logicOperators.includes(filterModel.logicOperator)) {

package/legacy/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { unstable_generateUtilityClasses as generateUtilityClasses, unstable_gen
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export var gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellContent', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnGroupHeader', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeader--showColumnBorder', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);
+export var gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellContent', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnGroupHeader', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeader--showColumnBorder', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);

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

@@ -1,7 +1,7 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { gridPinnedRowsSelector } from './gridRowsSelector';
-import { gridDimensionsSelector } from '../dimensions';
+import { gridDimensionsSelector } from '../dimensions/gridDimensionsSelectors';
 export var GRID_ROOT_GROUP_ID = "auto-generated-group-node-root";
 export var GRID_ID_AUTOGENERATED = Symbol('mui.id_autogenerated');
 export var buildRootGroup = function buildRootGroup() {

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/hooks/features/rows/useGridRows.js

@@ -124,7 +124,7 @@ export var useGridRows = function useGridRows(apiRef, props) {
   }, [logger, props.getRowId, props.loading, props.rowCount, throttledRowsChange, apiRef]);
   var updateRows = React.useCallback(function (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'));
     }
     var nonPinnedRowsUpdates = [];
     updates.forEach(function (update) {
@@ -263,7 +263,7 @@ export var useGridRows = function useGridRows(apiRef, props) {
   }, [apiRef, logger]);
   var replaceRows = React.useCallback(function (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/legacy/hooks/features/virtualization/useGridVirtualScroller.js

@@ -51,7 +51,6 @@ export var useGridVirtualScroller = function useGridVirtualScroller() {
   var gridRootRef = apiRef.current.rootElementRef;
   var mainRef = apiRef.current.mainElementRef;
   var scrollerRef = apiRef.current.virtualScrollerRef;
-  var renderZoneRef = React.useRef(null);
   var scrollbarVerticalRef = React.useRef(null);
   var scrollbarHorizontalRef = React.useRef(null);
   var contentHeight = dimensions.contentSize.height;
@@ -262,6 +261,14 @@ export var useGridVirtualScroller = function useGridVirtualScroller() {
       var _renderedRows$i = renderedRows[i],
         id = _renderedRows$i.id,
         model = _renderedRows$i.model;
+      var rowIndexInPage = ((currentPage == null || (_currentPage$range = currentPage.range) == null ? void 0 : _currentPage$range.firstRowIndex) || 0) + firstRowToRender + i;
+      var index = rowIndexOffset + rowIndexInPage;
+      if (isRowWithFocusedCellNotInRange && (cellFocus == null ? void 0 : cellFocus.id) === id) {
+        index = indexOfRowWithFocusedCell;
+        isRowWithFocusedCellRendered = true;
+      } else if (isRowWithFocusedCellRendered) {
+        index -= 1;
+      }
       var isRowNotVisible = isRowWithFocusedCellNotInRange && cellFocus.id === id;
       var baseRowHeight = !apiRef.current.rowHasAutoHeight(id) ? apiRef.current.unstable_getRowHeight(id) : 'auto';
       var isSelected = void 0;
@@ -272,7 +279,7 @@ export var useGridVirtualScroller = function useGridVirtualScroller() {
       }
       var isFirstVisible = false;
       if (params.position === undefined) {
-        isFirstVisible = i === 0;
+        isFirstVisible = rowIndexInPage === 0;
       }
       var isLastVisible = false;
       if (isLastSection) {
@@ -294,13 +301,6 @@ export var useGridVirtualScroller = function useGridVirtualScroller() {
         var cellParams = apiRef.current.getCellParams(id, cellTabIndex.field);
         tabbableCell = cellParams.cellMode === 'view' ? cellTabIndex.field : null;
       }
-      var index = rowIndexOffset + ((currentPage == null || (_currentPage$range = currentPage.range) == null ? void 0 : _currentPage$range.firstRowIndex) || 0) + firstRowToRender + i;
-      if (isRowWithFocusedCellNotInRange && (cellFocus == null ? void 0 : cellFocus.id) === id) {
-        index = indexOfRowWithFocusedCell;
-        isRowWithFocusedCellRendered = true;
-      } else if (isRowWithFocusedCellRendered) {
-        index -= 1;
-      }
       rows.push( /*#__PURE__*/_jsx(rootProps.slots.row, _extends({
         row: model,
         rowId: id,
@@ -414,7 +414,6 @@ export var useGridVirtualScroller = function useGridVirtualScroller() {
     },
     getRenderZoneProps: function getRenderZoneProps() {
       return {
-        ref: renderZoneRef,
         role: 'rowgroup'
       };
     },

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.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/internals/utils/propValidation.js

@@ -1,5 +1,5 @@
 export var propValidatorsDataGrid = [function (props) {
-  return 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;
+  return 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;
 }];
 var warnedOnceMap = new Set();
 var warnOnce = function warnOnce(message) {

package/legacy/joy/joySlots.js

@@ -412,8 +412,8 @@ var 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/legacy/locales/daDK.js

@@ -11,8 +11,8 @@ var 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',
@@ -41,12 +41,12 @@ var 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',
@@ -93,10 +93,10 @@ var 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',
@@ -132,16 +132,16 @@ var 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: function groupColumn(name) {
     return "Grupp\xE9r efter ".concat(name);
   },
   unGroupColumn: function unGroupColumn(name) {
-    return "Fjern grupp\xE9ring efter ".concat(name);
+    return "Fjern gruppering efter ".concat(name);
   },
   // Master/detail
   detailPanelToggle: 'Udvid/kollaps detaljepanel',
@@ -150,7 +150,7 @@ var daDKGrid = {
   // Row reordering text
   rowReorderingHeaderName: 'Omarrangering af rækker',
   // Aggregation
-  aggregationMenuItemHeader: 'Aggregation',
+  aggregationMenuItemHeader: 'Aggregering',
   aggregationFunctionLabelSum: 'sum',
   aggregationFunctionLabelAvg: 'gns',
   aggregationFunctionLabelMin: 'min',

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