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

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -46,7 +46,6 @@ export const useGridVirtualScroller = () => {
   const gridRootRef = apiRef.current.rootElementRef;
   const mainRef = apiRef.current.mainElementRef;
   const scrollerRef = apiRef.current.virtualScrollerRef;
-  const renderZoneRef = React.useRef(null);
   const scrollbarVerticalRef = React.useRef(null);
   const scrollbarHorizontalRef = React.useRef(null);
   const contentHeight = dimensions.contentSize.height;
@@ -247,6 +246,14 @@ export const useGridVirtualScroller = () => {
         id,
         model
       } = renderedRows[i];
+      const rowIndexInPage = ((currentPage == null || (_currentPage$range = currentPage.range) == null ? void 0 : _currentPage$range.firstRowIndex) || 0) + firstRowToRender + i;
+      let index = rowIndexOffset + rowIndexInPage;
+      if (isRowWithFocusedCellNotInRange && (cellFocus == null ? void 0 : 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;
@@ -257,7 +264,7 @@ export const useGridVirtualScroller = () => {
       }
       let isFirstVisible = false;
       if (params.position === undefined) {
-        isFirstVisible = i === 0;
+        isFirstVisible = rowIndexInPage === 0;
       }
       let isLastVisible = false;
       if (isLastSection) {
@@ -279,13 +286,6 @@ export const useGridVirtualScroller = () => {
         const cellParams = apiRef.current.getCellParams(id, cellTabIndex.field);
         tabbableCell = cellParams.cellMode === 'view' ? cellTabIndex.field : null;
       }
-      let 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,
@@ -387,7 +387,6 @@ export const useGridVirtualScroller = () => {
       role: 'presentation'
     }),
     getRenderZoneProps: () => ({
-      ref: renderZoneRef,
       role: 'rowgroup'
     }),
     getScrollbarVerticalProps: () => ({

package/index.js

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

package/internals/utils/propValidation.js

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

package/joy/joySlots.js

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

package/legacy/DataGrid/DataGrid.js

@@ -310,7 +310,7 @@ DataGridRaw.propTypes = {
   loading: PropTypes.bool,
   /**
    * Set the locale text of the Data Grid.
-   * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/grid/x-data-grid/src/constants/localeTextConstants.ts) in the GitHub repository.
+   * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/x-data-grid/src/constants/localeTextConstants.ts) in the GitHub repository.
    */
   localeText: PropTypes.object,
   /**

package/legacy/DataGrid/useDataGridProps.js

@@ -74,7 +74,9 @@ export var DATA_GRID_PROPS_DEFAULT_VALUES = {
 };
 var defaultSlots = DATA_GRID_DEFAULT_SLOTS_COMPONENTS;
 export var useDataGridProps = function useDataGridProps(inProps) {
-  var themedProps = useProps(useThemeProps({
+  var themedProps = useProps(
+  // eslint-disable-next-line material-ui/mui-name-matches-component-name
+  useThemeProps({
     props: inProps,
     name: 'MuiDataGrid'
   }));

package/legacy/components/GridPagination.js

@@ -21,6 +21,9 @@ var GridPaginationRoot = styled(TablePagination)(function (_ref) {
     display: 'inline-flex'
   }));
 });
+
+// A mutable version of a readonly array.
+
 export var GridPagination = /*#__PURE__*/React.forwardRef(function GridPagination(props, ref) {
   var apiRef = useGridApiContext();
   var rootProps = useGridRootProps();
@@ -31,7 +34,8 @@ export var GridPagination = /*#__PURE__*/React.forwardRef(function GridPaginatio
     return (_ref3 = (_rootProps$rowCount = rootProps.rowCount) != null ? _rootProps$rowCount : visibleTopLevelRowCount) != null ? _ref3 : 0;
   }, [rootProps.rowCount, visibleTopLevelRowCount]);
   var lastPage = React.useMemo(function () {
-    return Math.floor(rowCount / (paginationModel.pageSize || 1));
+    var calculatedValue = Math.ceil(rowCount / (paginationModel.pageSize || 1)) - 1;
+    return Math.max(0, calculatedValue);
   }, [rowCount, paginationModel.pageSize]);
   var handlePageSizeChange = React.useCallback(function (event) {
     var pageSize = Number(event.target.value);
@@ -68,7 +72,11 @@ export var GridPagination = /*#__PURE__*/React.forwardRef(function GridPaginatio
     ref: ref,
     component: "div",
     count: rowCount,
-    page: paginationModel.page <= lastPage ? paginationModel.page : lastPage,
+    page: paginationModel.page <= lastPage ? paginationModel.page : lastPage
+    // TODO: Remove the cast once the type is fixed in Material UI and that the min Material UI version
+    // for x-data-grid is past the fix.
+    // Note that Material UI will not mutate the array, so this is safe.
+    ,
     rowsPerPageOptions: pageSizeOptions,
     rowsPerPage: paginationModel.pageSize,
     onPageChange: handlePageChange,

package/legacy/components/GridRow.js

@@ -37,9 +37,7 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
     rowHeight = ownerState.rowHeight,
     classes = ownerState.classes;
   var slots = {
-    root: ['row', selected && 'selected', editable && 'row--editable', editing && 'row--editing', isFirstVisible && 'row--firstVisible', isLastVisible && 'row--lastVisible', rowHeight === 'auto' && 'row--dynamicHeight'],
-    pinnedLeft: ['pinnedLeft'],
-    pinnedRight: ['pinnedRight']
+    root: ['row', selected && 'selected', editable && 'row--editable', editing && 'row--editing', isFirstVisible && 'row--firstVisible', isLastVisible && 'row--lastVisible', rowHeight === 'auto' && 'row--dynamicHeight']
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
@@ -273,13 +271,14 @@ var GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
         break;
     }
     if ((rowNode == null ? void 0 : rowNode.type) === 'skeletonRow') {
+      var _column$align;
       var _width = cellColSpanInfo.cellProps.width;
       var contentWidth = Math.round(randomNumber());
       return /*#__PURE__*/_jsx(slots.skeletonCell, {
         width: _width,
         contentWidth: contentWidth,
         field: column.field,
-        align: column.align
+        align: (_column$align = column.align) != null ? _column$align : 'left'
       }, column.field);
     }
     var _cellColSpanInfo$cell = cellColSpanInfo.cellProps,
@@ -366,7 +365,10 @@ var GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     "aria-selected": selected,
     style: style
   }, eventHandlers, other, {
-    children: [leftCells, cells, emptyCellWidth > 0 && /*#__PURE__*/_jsx(EmptyCell, {
+    children: [leftCells, /*#__PURE__*/_jsx("div", {
+      className: gridClasses.cellOffsetLeft,
+      role: "presentation"
+    }), cells, emptyCellWidth > 0 && /*#__PURE__*/_jsx(EmptyCell, {
       width: emptyCellWidth
     }), rightCells.length > 0 && /*#__PURE__*/_jsx("div", {
       role: "presentation",

package/legacy/components/GridScrollbarFillerCell.js

@@ -10,7 +10,7 @@ var classes = {
   borderTop: getClassName('scrollbarFiller--borderTop'),
   pinnedRight: getClassName('scrollbarFiller--pinnedRight')
 };
-var Style = styled('div')(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+var Style = styled('div')(_defineProperty(_defineProperty(_defineProperty({
   minWidth: 'calc(var(--DataGrid-hasScrollY) * var(--DataGrid-scrollbarSize))',
   alignSelf: 'stretch'
 }, "&.".concat(classes.borderTop), {
@@ -20,8 +20,6 @@ var Style = styled('div')(_defineProperty(_defineProperty(_defineProperty(_defin
 }), "&.".concat(classes.pinnedRight, ":not(.").concat(classes.header, ")"), {
   position: 'sticky',
   right: 0
-}), "&:not(.".concat(classes.header, "):not(.").concat(classes.pinnedRight, ")"), {
-  transform: 'translate3d(var(--DataGrid-offsetLeft), 0, 0)'
 }));
 function GridScrollbarFillerCell(_ref) {
   var header = _ref.header,

package/legacy/components/base/GridFooterPlaceholder.js

@@ -8,5 +8,5 @@ export function GridFooterPlaceholder() {
   if (rootProps.hideFooter) {
     return null;
   }
-  return /*#__PURE__*/_jsx(rootProps.slots.footer, _extends({}, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.footer));
+  return /*#__PURE__*/_jsx(rootProps.slots.footer, _extends({}, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.footer /* FIXME: typing error */));
 }

package/legacy/components/cell/GridActionsCell.js

@@ -169,7 +169,7 @@ function GridActionsCell(props) {
     if (event.key === 'Tab') {
       event.preventDefault();
     }
-    if (['Tab', 'Enter', 'Escape'].includes(event.key)) {
+    if (['Tab', 'Escape'].includes(event.key)) {
       hideMenu();
     }
   };
@@ -208,7 +208,6 @@ function GridActionsCell(props) {
       target: buttonRef.current,
       position: position,
       onClose: hideMenu,
-      onClick: hideMenu,
       children: /*#__PURE__*/_jsx(MenuList, {
         id: menuId,
         className: gridClasses.menuList,
@@ -218,7 +217,8 @@ function GridActionsCell(props) {
         autoFocusItem: true,
         children: menuButtons.map(function (button, index) {
           return /*#__PURE__*/React.cloneElement(button, {
-            key: index
+            key: index,
+            closeMenu: hideMenu
           });
         })
       })

package/legacy/components/cell/GridActionsCellItem.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["label", "icon", "showInMenu", "onClick"];
+var _excluded = ["label", "icon", "showInMenu", "onClick"],
+  _excluded2 = ["label", "icon", "showInMenu", "onClick", "closeMenuOnClick", "closeMenu"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import MenuItem from '@mui/material/MenuItem';
@@ -9,36 +10,48 @@ import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var GridActionsCellItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var label = props.label,
-    icon = props.icon,
-    showInMenu = props.showInMenu,
-    onClick = props.onClick,
-    other = _objectWithoutProperties(props, _excluded);
   var rootProps = useGridRootProps();
-  var handleClick = function handleClick(event) {
-    if (onClick) {
-      onClick(event);
-    }
-  };
-  if (!showInMenu) {
+  if (!props.showInMenu) {
     var _rootProps$slotProps;
+    var _label = props.label,
+      _icon = props.icon,
+      _showInMenu = props.showInMenu,
+      _onClick = props.onClick,
+      _other = _objectWithoutProperties(props, _excluded);
+    var _handleClick = function _handleClick(event) {
+      _onClick == null || _onClick(event);
+    };
     return /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
       ref: ref,
       size: "small",
       role: "menuitem",
-      "aria-label": label
-    }, other, {
-      onClick: handleClick
+      "aria-label": _label
+    }, _other, {
+      onClick: _handleClick
     }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseIconButton, {
-      children: /*#__PURE__*/React.cloneElement(icon, {
+      children: /*#__PURE__*/React.cloneElement(_icon, {
         fontSize: 'small'
       })
     }));
   }
+  var label = props.label,
+    icon = props.icon,
+    showInMenu = props.showInMenu,
+    onClick = props.onClick,
+    _props$closeMenuOnCli = props.closeMenuOnClick,
+    closeMenuOnClick = _props$closeMenuOnCli === void 0 ? true : _props$closeMenuOnCli,
+    closeMenu = props.closeMenu,
+    other = _objectWithoutProperties(props, _excluded2);
+  var handleClick = function handleClick(event) {
+    onClick == null || onClick(event);
+    if (closeMenuOnClick) {
+      closeMenu == null || closeMenu();
+    }
+  };
   return /*#__PURE__*/_jsxs(MenuItem, _extends({
     ref: ref
   }, other, {
-    onClick: onClick,
+    onClick: handleClick,
     children: [icon && /*#__PURE__*/_jsx(ListItemIcon, {
       children: icon
     }), label]

package/legacy/components/columnSelection/GridCellCheckboxRenderer.js

@@ -88,7 +88,7 @@ var GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCell
     },
     onKeyDown: handleKeyDown,
     disabled: !isSelectable,
-    touchRippleRef: rippleRef
+    touchRippleRef: rippleRef /* FIXME: typing error */
   }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseCheckbox, other));
 });
 process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {

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/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/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.1
+ * @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',