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

package/node/components/cell/GridActionsCellItem.js

@@ -13,24 +13,22 @@ var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["label", "icon", "showInMenu", "onClick"];
+const _excluded = ["label", "icon", "showInMenu", "onClick"],
+  _excluded2 = ["label", "icon", "showInMenu", "onClick", "closeMenuOnClick", "closeMenu"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const GridActionsCellItem = exports.GridActionsCellItem = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-      label,
-      icon,
-      showInMenu,
-      onClick
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const handleClick = event => {
-    if (onClick) {
-      onClick(event);
-    }
-  };
-  if (!showInMenu) {
+  if (!props.showInMenu) {
+    const {
+        label,
+        icon,
+        onClick
+      } = props,
+      other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    const handleClick = event => {
+      onClick?.(event);
+    };
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
       ref: ref,
       size: "small",
@@ -44,10 +42,24 @@ const GridActionsCellItem = exports.GridActionsCellItem = /*#__PURE__*/React.for
       })
     }));
   }
+  const {
+      label,
+      icon,
+      onClick,
+      closeMenuOnClick = true,
+      closeMenu
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded2);
+  const handleClick = event => {
+    onClick?.(event);
+    if (closeMenuOnClick) {
+      closeMenu?.();
+    }
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, (0, _extends2.default)({
     ref: ref
   }, other, {
-    onClick: onClick,
+    onClick: handleClick,
     children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
       children: icon
     }), label]

package/node/components/cell/GridEditInputCell.js

@@ -66,7 +66,7 @@ const GridEditInputCell = exports.GridEditInputCell = /*#__PURE__*/React.forward
     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/node/components/columnSelection/GridCellCheckboxRenderer.js

@@ -93,7 +93,7 @@ const GridCellCheckboxForwardRef = exports.GridCellCheckboxForwardRef = /*#__PUR
     },
     onKeyDown: handleKeyDown,
     disabled: !isSelectable,
-    touchRippleRef: rippleRef
+    touchRippleRef: rippleRef /* FIXME: typing error */
   }, rootProps.slotProps?.baseCheckbox, other));
 });
 process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {

package/node/components/columnsManagement/GridColumnsManagement.js

@@ -51,6 +51,7 @@ function GridColumnsManagement(props) {
     autoFocusSearchField = true,
     disableShowHideToggle = false,
     disableResetButton = false,
+    toggleAllMode = 'all',
     getTogglableColumns
   } = props;
   const isResetDisabled = React.useMemo(() => (0, _utils2.checkColumnVisibilityModelsSame)(columnVisibilityModel, initialColumnVisibilityModel), [columnVisibilityModel, initialColumnVisibilityModel]);
@@ -70,11 +71,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 = (0, _gridColumnsSelector.gridColumnVisibilityModelSelector)(apiRef);
     const newModel = (0, _extends2.default)({}, 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`
@@ -85,20 +96,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]);
@@ -169,14 +170,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__*/(0, _jsxRuntime.jsx)("span", {}), !disableResetButton ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseButton, (0, _extends2.default)({
         onClick: () => apiRef.current.setColumnVisibilityModel(initialColumnVisibilityModel),
@@ -218,7 +216,14 @@ process.env.NODE_ENV !== "production" ? GridColumnsManagement.propTypes = {
    */
   getTogglableColumns: _propTypes.default.func,
   searchPredicate: _propTypes.default.func,
-  sort: _propTypes.default.oneOf(['asc', 'desc'])
+  sort: _propTypes.default.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.default.oneOf(['all', 'filteredOnly'])
 } : void 0;
 const GridColumnsManagementBody = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
@@ -251,7 +256,7 @@ const GridColumnsManagementFooter = (0, _styles.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/node/components/containers/GridRootStyles.js

@@ -247,6 +247,12 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       [`& .${_gridClasses.gridClasses.cell} > *`]: {
         overflow: 'visible !important',
         whiteSpace: 'nowrap'
+      },
+      [`& .${_gridClasses.gridClasses.groupingCriteriaCell}`]: {
+        width: 'unset'
+      },
+      [`& .${_gridClasses.gridClasses.treeDataGroupingCell}`]: {
+        width: 'unset'
       }
     },
     [`& .${_gridClasses.gridClasses.columnHeader}, & .${_gridClasses.gridClasses.cell}`]: {
@@ -561,8 +567,10 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
         }
       }
     },
-    [`& .${_gridClasses.gridClasses.cell}:not(.${_gridClasses.gridClasses['cell--pinnedLeft']}):not(.${_gridClasses.gridClasses['cell--pinnedRight']})`]: {
-      transform: 'translate3d(var(--DataGrid-offsetLeft), 0, 0)'
+    [`& .${_gridClasses.gridClasses.cellOffsetLeft}`]: {
+      flex: '0 0 auto',
+      display: 'inline-block',
+      width: 'var(--DataGrid-offsetLeft)'
     },
     [`& .${_gridClasses.gridClasses.columnHeaderDraggableContainer}`]: {
       display: 'flex',

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

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

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

@@ -114,7 +114,7 @@ function GridFilterInputSingleSelect(props) {
           placeholder: placeholder ?? apiRef.current.getLocaleText('filterPanelInputPlaceholder')
         },
         native: isSelectNative
-      }, others, rootProps.slotProps?.baseSelect, {
+      }, others /* FIXME: typing error */, rootProps.slotProps?.baseSelect, {
         children: renderSingleSelectOptions({
           column: resolvedColumn,
           OptionComponent: rootProps.slots.baseSelectOption,

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

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

package/node/constants/gridClasses.js

@@ -9,4 +9,4 @@ var _utils = require("@mui/utils");
 function getDataGridUtilityClass(slot) {
   return (0, _utils.unstable_generateUtilityClass)('MuiDataGrid', slot);
 }
-const gridClasses = exports.gridClasses = (0, _utils.unstable_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']);
+const gridClasses = exports.gridClasses = (0, _utils.unstable_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/node/hooks/features/columns/useGridColumnSpanning.js

@@ -68,7 +68,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/node/hooks/features/editing/useGridCellEditing.js

@@ -343,7 +343,7 @@ 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 = (0, _gridEditingSelectors.gridEditRowsStateSelector)(apiRef.current.state);
     let newProps = (0, _extends2.default)({}, editingState[id][field], {
@@ -391,10 +391,7 @@ const useGridCellEditing = (apiRef, props) => {
     const {
       value
     } = editingState[id][field];
-    return column.valueSetter ? column.valueSetter({
-      value,
-      row
-    }) : (0, _extends2.default)({}, row, {
+    return column.valueSetter ? column.valueSetter(value, row, column, apiRef) : (0, _extends2.default)({}, row, {
       [field]: value
     });
   }, [apiRef]);

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

@@ -418,7 +418,7 @@ 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 = (0, _gridEditingSelectors.gridEditRowsStateSelector)(apiRef.current.state);
     let newProps = (0, _extends2.default)({}, editingState[id][field], {
@@ -518,10 +518,7 @@ 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/node/hooks/features/filter/gridFilterUtils.js

@@ -99,7 +99,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/node/hooks/features/rows/gridRowsUtils.js

@@ -12,7 +12,7 @@ exports.getMinimalContentHeight = getMinimalContentHeight;
 exports.updateCacheWithNewRows = exports.isAutoGeneratedRow = exports.getTreeNodeDescendants = exports.getTopLevelRowCount = exports.getRowsStateFromCache = exports.getRowIdFromRowModel = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _gridRowsSelector = require("./gridRowsSelector");
-var _dimensions = require("../dimensions");
+var _gridDimensionsSelectors = require("../dimensions/gridDimensionsSelectors");
 const GRID_ROOT_GROUP_ID = exports.GRID_ROOT_GROUP_ID = `auto-generated-group-node-root`;
 const GRID_ID_AUTOGENERATED = exports.GRID_ID_AUTOGENERATED = Symbol('mui.id_autogenerated');
 const buildRootGroup = () => ({
@@ -299,6 +299,6 @@ function calculatePinnedRowsHeight(apiRef) {
   };
 }
 function getMinimalContentHeight(apiRef) {
-  const dimensions = (0, _dimensions.gridDimensionsSelector)(apiRef.current.state);
+  const dimensions = (0, _gridDimensionsSelectors.gridDimensionsSelector)(apiRef.current.state);
   return `var(--DataGrid-overlayHeight, ${2 * dimensions.rowHeight}px)`;
 }

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

@@ -7,7 +7,6 @@ exports.MissingRowIdError = void 0;
 exports.useGridParamsApi = useGridParamsApi;
 var React = _interopRequireWildcard(require("react"));
 var _domUtils = require("../../../utils/domUtils");
-var _gridRowsUtils = require("./gridRowsUtils");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _gridFocusStateSelector = require("../focus/gridFocusStateSelector");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -23,10 +22,7 @@ class MissingRowIdError extends Error {}
  * TODO: Impossible priority - useGridFocus also needs to be after useGridParamsApi
  */
 exports.MissingRowIdError = MissingRowIdError;
-function useGridParamsApi(apiRef, props) {
-  const {
-    getRowId
-  } = props;
+function useGridParamsApi(apiRef) {
   const getColumnHeaderParams = React.useCallback(field => ({
     field,
     colDef: apiRef.current.getColumn(field)
@@ -43,28 +39,6 @@ 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 = (0, _gridFocusStateSelector.gridFocusCellSelector)(apiRef);
-    const cellTabIndex = (0, _gridFocusStateSelector.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);
@@ -89,12 +63,7 @@ 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;
@@ -108,30 +77,28 @@ 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 = _gridRowsUtils.GRID_ID_AUTOGENERATED in row ? row[_gridRowsUtils.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[_gridRowsUtils.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/node/hooks/features/rows/useGridRows.js

@@ -131,7 +131,7 @@ const useGridRows = (apiRef, props) => {
   }, [logger, props.getRowId, props.loading, props.rowCount, throttledRowsChange, apiRef]);
   const updateRows = React.useCallback(updates => {
     if (props.signature === _useGridApiEventHandler.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 => {
@@ -256,7 +256,7 @@ const useGridRows = (apiRef, props) => {
   }, [apiRef, logger]);
   const replaceRows = React.useCallback((firstRowToRender, newRows) => {
     if (props.signature === _useGridApiEventHandler.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/node/hooks/features/virtualization/useGridVirtualScroller.js

@@ -57,7 +57,6 @@ 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;
@@ -255,6 +254,14 @@ 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;
@@ -265,7 +272,7 @@ const useGridVirtualScroller = () => {
       }
       let isFirstVisible = false;
       if (params.position === undefined) {
-        isFirstVisible = i === 0;
+        isFirstVisible = rowIndexInPage === 0;
       }
       let isLastVisible = false;
       if (isLastSection) {
@@ -287,13 +294,6 @@ 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__*/(0, _jsxRuntime.jsx)(rootProps.slots.row, (0, _extends2.default)({
         row: model,
         rowId: id,
@@ -394,7 +394,6 @@ const useGridVirtualScroller = () => {
       role: 'presentation'
     }),
     getRenderZoneProps: () => ({
-      ref: renderZoneRef,
       role: 'rowgroup'
     }),
     getScrollbarVerticalProps: () => ({

package/node/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/node/internals/utils/propValidation.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.validateProps = exports.propValidatorsDataGrid = void 0;
-const propValidatorsDataGrid = exports.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];
+const propValidatorsDataGrid = exports.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/node/joy/joySlots.js

@@ -406,8 +406,8 @@ const joySlots = (0, _extends2.default)({}, _icons.default, {
   baseSelect: Select,
   baseSelectOption: Option,
   baseInputLabel: InputLabel,
-  baseFormControl: _FormControl.default,
-  baseTooltip: _Tooltip.default,
+  baseFormControl: _FormControl.default /* FIXME: typing error */,
+  baseTooltip: _Tooltip.default /* FIXME: typing error */,
   pagination: Pagination,
   loadingOverlay: LoadingOverlay
 });

package/node/locales/daDK.js

@@ -17,8 +17,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',
@@ -45,12 +45,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',
@@ -97,10 +97,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',
@@ -130,13 +130,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',
@@ -144,7 +144,7 @@ const daDKGrid = {
   // Row reordering text
   rowReorderingHeaderName: 'Omarrangering af rækker',
   // Aggregation
-  aggregationMenuItemHeader: 'Aggregation',
+  aggregationMenuItemHeader: 'Aggregering',
   aggregationFunctionLabelSum: 'sum',
   aggregationFunctionLabelAvg: 'gns',
   aggregationFunctionLabelMin: 'min',