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

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -20,7 +20,7 @@ import { selectedIdsLookupSelector } from '../rowSelection/gridRowSelectionSelec
 import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
 import { getFirstNonSpannedColumnToRender } from '../columns/gridColumnsUtils';
 import { getMinimalContentHeight } from '../rows/gridRowsUtils';
-import { gridRenderContextSelector, gridVirtualizationEnabledSelector, gridVirtualizationColumnEnabledSelector } from './gridVirtualizationSelectors';
+import { gridOffsetsSelector, gridRenderContextSelector, gridVirtualizationEnabledSelector, gridVirtualizationColumnEnabledSelector } from './gridVirtualizationSelectors';
 import { EMPTY_RENDER_CONTEXT } from './useGridVirtualization';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const EMPTY_DETAIL_PANELS = Object.freeze(new Map());
@@ -37,7 +37,6 @@ export const useGridVirtualScroller = () => {
   const hasBottomPinnedRows = pinnedRows.bottom.length > 0;
   const [panels, setPanels] = React.useState(EMPTY_DETAIL_PANELS);
   const theme = useTheme();
-  const columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
   const cellFocus = useGridSelector(apiRef, gridFocusCellSelector);
   const cellTabIndex = useGridSelector(apiRef, gridTabIndexCellSelector);
   const rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector);
@@ -46,7 +45,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;
@@ -54,6 +52,7 @@ export const useGridVirtualScroller = () => {
   useResizeObserver(mainRef, () => apiRef.current.resize());
   const previousContext = React.useRef(EMPTY_RENDER_CONTEXT);
   const previousRowContext = React.useRef(EMPTY_RENDER_CONTEXT);
+  const offsets = useGridSelector(apiRef, gridOffsetsSelector);
   const renderContext = useGridSelector(apiRef, gridRenderContextSelector);
   const scrollPosition = React.useRef({
     top: 0,
@@ -73,23 +72,17 @@ export const useGridVirtualScroller = () => {
     }
     return -1;
   }, [cellFocus, visibleColumns]);
-  React.useEffect(() => {
-    var _gridRootRef$current, _gridRootRef$current2;
-    const direction = theme.direction === 'ltr' ? 1 : -1;
-    const top = gridRowsMetaSelector(apiRef.current.state).positions[renderContext.firstRowIndex];
-    const left = direction * columnPositions[renderContext.firstColumnIndex] - columnPositions[pinnedColumns.left.length];
-    (_gridRootRef$current = gridRootRef.current) == null || _gridRootRef$current.style.setProperty('--DataGrid-offsetTop', `${top}px`);
-    (_gridRootRef$current2 = gridRootRef.current) == null || _gridRootRef$current2.style.setProperty('--DataGrid-offsetLeft', `${left}px`);
-  }, [apiRef, gridRootRef, theme.direction, columnPositions, pinnedColumns.left.length, renderContext]);
   const updateRenderContext = React.useCallback((nextRenderContext, rawRenderContext) => {
     if (areRenderContextsEqual(nextRenderContext, apiRef.current.state.virtualization.renderContext)) {
       return;
     }
     const didRowsIntervalChange = nextRenderContext.firstRowIndex !== previousRowContext.current.firstRowIndex || nextRenderContext.lastRowIndex !== previousRowContext.current.lastRowIndex;
+    const nextOffsets = computeOffsets(apiRef, nextRenderContext, theme.direction, pinnedColumns.left.length);
     apiRef.current.setState(state => {
       return _extends({}, state, {
         virtualization: _extends({}, state.virtualization, {
-          renderContext: nextRenderContext
+          renderContext: nextRenderContext,
+          offsets: nextOffsets
         })
       });
     });
@@ -103,7 +96,7 @@ export const useGridVirtualScroller = () => {
     }
     previousContext.current = rawRenderContext;
     prevTotalWidth.current = dimensions.columnsTotalWidth;
-  }, [apiRef, dimensions.isReady, dimensions.columnsTotalWidth]);
+  }, [apiRef, pinnedColumns.left.length, theme.direction, dimensions.isReady, dimensions.columnsTotalWidth]);
   const triggerUpdateRenderContext = () => {
     const inputs = inputsSelector(apiRef, rootProps, enabled, enabledForColumns);
     const [nextRenderContext, rawRenderContext] = computeRenderContext(inputs, scrollPosition);
@@ -247,6 +240,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 +258,7 @@ export const useGridVirtualScroller = () => {
       }
       let isFirstVisible = false;
       if (params.position === undefined) {
-        isFirstVisible = i === 0;
+        isFirstVisible = rowIndexInPage === 0;
       }
       let isLastVisible = false;
       if (isLastSection) {
@@ -279,13 +280,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,
@@ -300,6 +294,7 @@ export const useGridVirtualScroller = () => {
         firstColumnToRender: firstColumnToRender,
         lastColumnToRender: lastColumnToRender,
         selected: isSelected,
+        offsets: offsets,
         dimensions: dimensions,
         isFirstVisible: isFirstVisible,
         isLastVisible: isLastVisible,
@@ -347,10 +342,6 @@ export const useGridVirtualScroller = () => {
       // TODO a scroll reset should not be necessary
       scrollerRef.current.scrollLeft = 0;
       scrollerRef.current.scrollTop = 0;
-    } else {
-      var _gridRootRef$current3, _gridRootRef$current4;
-      (_gridRootRef$current3 = gridRootRef.current) == null || _gridRootRef$current3.style.setProperty('--DataGrid-offsetTop', '0px');
-      (_gridRootRef$current4 = gridRootRef.current) == null || _gridRootRef$current4.style.setProperty('--DataGrid-offsetLeft', '0px');
     }
   }, [enabled, gridRootRef, scrollerRef]);
   useRunOnce(outerSize.width !== 0, () => {
@@ -387,7 +378,6 @@ export const useGridVirtualScroller = () => {
       role: 'presentation'
     }),
     getRenderZoneProps: () => ({
-      ref: renderZoneRef,
       role: 'rowgroup'
     }),
     getScrollbarVerticalProps: () => ({
@@ -600,4 +590,16 @@ export function areRenderContextsEqual(context1, context2) {
     return true;
   }
   return context1.firstRowIndex === context2.firstRowIndex && context1.lastRowIndex === context2.lastRowIndex && context1.firstColumnIndex === context2.firstColumnIndex && context1.lastColumnIndex === context2.lastColumnIndex;
+}
+function computeOffsets(apiRef, renderContext, direction, pinnedLeftLength) {
+  var _rowPositions$renderC, _columnPositions$rend, _columnPositions$pinn;
+  const factor = direction === 'ltr' ? 1 : -1;
+  const rowPositions = gridRowsMetaSelector(apiRef.current.state).positions;
+  const columnPositions = gridColumnPositionsSelector(apiRef);
+  const top = (_rowPositions$renderC = rowPositions[renderContext.firstRowIndex]) != null ? _rowPositions$renderC : 0;
+  const left = factor * ((_columnPositions$rend = columnPositions[renderContext.firstColumnIndex]) != null ? _columnPositions$rend : 0) - ((_columnPositions$pinn = columnPositions[pinnedLeftLength]) != null ? _columnPositions$pinn : 0);
+  return {
+    top,
+    left
+  };
 }

package/hooks/features/virtualization/useGridVirtualization.d.ts

@@ -8,6 +8,14 @@ export type GridVirtualizationState = {
     enabled: boolean;
     enabledForColumns: boolean;
     renderContext: GridRenderContext;
+    offsets: {
+        top: number;
+        left: number;
+    };
+};
+export declare const EMPTY_OFFSETS: {
+    top: number;
+    left: number;
 };
 export declare const EMPTY_RENDER_CONTEXT: {
     firstRowIndex: number;

package/hooks/features/virtualization/useGridVirtualization.js

@@ -1,6 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
+export const EMPTY_OFFSETS = {
+  top: 0,
+  left: 0
+};
 export const EMPTY_RENDER_CONTEXT = {
   firstRowIndex: 0,
   lastRowIndex: 0,
@@ -11,7 +15,8 @@ export const virtualizationStateInitializer = (state, props) => {
   const virtualization = {
     enabled: !props.disableVirtualization,
     enabledForColumns: true,
-    renderContext: EMPTY_RENDER_CONTEXT
+    renderContext: EMPTY_RENDER_CONTEXT,
+    offsets: EMPTY_OFFSETS
   };
   return _extends({}, state, {
     virtualization

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.0.0-beta.1
+ * @mui/x-data-grid v7.0.0-beta.3
  *
  * @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,
   /**
@@ -498,12 +498,6 @@ DataGridRaw.propTypes = {
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onRowDoubleClick: PropTypes.func,
-  /**
-   * Callback fired when the row changes are committed.
-   * @param {GridRowId} id The row id.
-   * @param {MuiEvent<MuiBaseEvent>} event The event that caused this prop to be called.
-   */
-  onRowEditCommit: PropTypes.func,
   /**
    * Callback fired when the row turns to edit mode.
    * @param {GridRowParams} params With all properties from [[GridRowParams]].

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

@@ -2,7 +2,7 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "renderedColumns", "pinnedColumns", "dimensions", "firstColumnToRender", "lastColumnToRender", "isFirstVisible", "isLastVisible", "focusedCellColumnIndexNotInRange", "isNotVisible", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
+var _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "renderedColumns", "pinnedColumns", "offsets", "dimensions", "firstColumnToRender", "lastColumnToRender", "isFirstVisible", "isLastVisible", "focusedCellColumnIndexNotInRange", "isNotVisible", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -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);
 };
@@ -67,6 +65,7 @@ var GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     visibleColumns = props.visibleColumns,
     renderedColumns = props.renderedColumns,
     pinnedColumns = props.pinnedColumns,
+    offsets = props.offsets,
     dimensions = props.dimensions,
     firstColumnToRender = props.firstColumnToRender,
     lastColumnToRender = props.lastColumnToRender,
@@ -273,13 +272,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 +366,13 @@ 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", {
+      role: "presentation",
+      className: gridClasses.cellOffsetLeft,
+      style: {
+        width: offsets.left
+      }
+    }), cells, emptyCellWidth > 0 && /*#__PURE__*/_jsx(EmptyCell, {
       width: emptyCellWidth
     }), rightCells.length > 0 && /*#__PURE__*/_jsx("div", {
       role: "presentation",
@@ -434,6 +440,10 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   isLastVisible: PropTypes.bool.isRequired,
   isNotVisible: PropTypes.bool,
   lastColumnToRender: PropTypes.number.isRequired,
+  offsets: PropTypes.shape({
+    left: PropTypes.number.isRequired,
+    top: PropTypes.number.isRequired
+  }).isRequired,
   onClick: PropTypes.func,
   onDoubleClick: PropTypes.func,
   onMouseEnter: PropTypes.func,

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

@@ -66,8 +66,6 @@ export var GridRootStyles = styled('div', {
     '--DataGrid-width': '0px',
     '--DataGrid-hasScrollX': '0',
     '--DataGrid-hasScrollY': '0',
-    '--DataGrid-offsetTop': '0px',
-    '--DataGrid-offsetLeft': '0px',
     '--DataGrid-scrollbarSize': '10px',
     '--DataGrid-rowWidth': '0px',
     '--DataGrid-columnsTotalWidth': '0px',
@@ -99,11 +97,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 +335,9 @@ 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'
   }), "& .".concat(c.columnHeaderDraggableContainer), {
     display: 'flex',
     width: '100%',

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-var _excluded = ["item", "applyValue", "apiRef", "focusElementRef", "isFilterActive", "clearButton", "tabIndex", "label", "InputLabelProps"];
+var _excluded = ["item", "applyValue", "apiRef", "focusElementRef", "isFilterActive", "clearButton", "tabIndex", "label", "variant", "InputLabelProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { refType, unstable_useId as useId } from '@mui/utils';
@@ -27,6 +27,8 @@ function GridFilterInputBoolean(props) {
     clearButton = props.clearButton,
     tabIndex = props.tabIndex,
     labelProp = props.label,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? 'standard' : _props$variant,
     InputLabelProps = props.InputLabelProps,
     others = _objectWithoutProperties(props, _excluded);
   var _React$useState = React.useState(item.value || ''),
@@ -56,7 +58,7 @@ function GridFilterInputBoolean(props) {
       children: [/*#__PURE__*/_jsx(rootProps.slots.baseInputLabel, _extends({}, (_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseInputLabel, {
         id: labelId,
         shrink: true,
-        variant: "standard",
+        variant: variant,
         children: label
       })), /*#__PURE__*/_jsxs(rootProps.slots.baseSelect, _extends({
         labelId: labelId,
@@ -64,14 +66,15 @@ function GridFilterInputBoolean(props) {
         label: label,
         value: filterValueState,
         onChange: onFilterChange,
-        variant: "standard",
+        variant: variant,
+        notched: variant === 'outlined' ? true : undefined,
         native: isSelectNative,
         displayEmpty: true,
         inputProps: {
           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

@@ -2,7 +2,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-var _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "placeholder", "tabIndex", "label", "isFilterActive", "clearButton", "InputLabelProps"];
+var _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "placeholder", "tabIndex", "label", "variant", "isFilterActive", "clearButton", "InputLabelProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/utils';
@@ -50,6 +50,8 @@ function GridFilterInputSingleSelect(props) {
     placeholder = props.placeholder,
     tabIndex = props.tabIndex,
     labelProp = props.label,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? 'standard' : _props$variant,
     isFilterActive = props.isFilterActive,
     clearButton = props.clearButton,
     InputLabelProps = props.InputLabelProps,
@@ -91,7 +93,7 @@ function GridFilterInputSingleSelect(props) {
         id: labelId,
         htmlFor: id,
         shrink: true,
-        variant: "standard",
+        variant: variant,
         children: label
       })), /*#__PURE__*/_jsx(rootProps.slots.baseSelect, _extends({
         id: id,
@@ -99,15 +101,16 @@ function GridFilterInputSingleSelect(props) {
         labelId: labelId,
         value: filterValue,
         onChange: onFilterChange,
-        variant: "standard",
+        variant: variant,
         type: type || 'text',
         inputProps: {
           tabIndex: tabIndex,
           ref: focusElementRef,
           placeholder: placeholder != null ? placeholder : apiRef.current.getLocaleText('filterPanelInputPlaceholder')
         },
-        native: isSelectNative
-      }, others, (_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseSelect, {
+        native: isSelectNative,
+        notched: variant === 'outlined' ? true : undefined
+      }, 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/GridFilterInputValue.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "tabIndex", "disabled", "isFilterActive", "clearButton", "InputProps"];
+var _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "tabIndex", "disabled", "isFilterActive", "clearButton", "InputProps", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/utils';
@@ -20,6 +20,8 @@ function GridFilterInputValue(props) {
     isFilterActive = props.isFilterActive,
     clearButton = props.clearButton,
     InputProps = props.InputProps,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? 'standard' : _props$variant,
     others = _objectWithoutProperties(props, _excluded);
   var filterTimeout = useTimeout();
   var _React$useState = React.useState((_item$value = item.value) != null ? _item$value : ''),
@@ -58,7 +60,7 @@ function GridFilterInputValue(props) {
     placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
     value: filterValueState,
     onChange: onFilterChange,
-    variant: "standard",
+    variant: variant,
     type: type || 'text',
     InputProps: _extends({}, applying || clearButton ? {
       endAdornment: applying ? /*#__PURE__*/_jsx(rootProps.slots.loadIcon, {