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

package/modern/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,22 +72,17 @@ export const useGridVirtualScroller = () => {
     }
     return -1;
   }, [cellFocus, visibleColumns]);
-  React.useEffect(() => {
-    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?.style.setProperty('--DataGrid-offsetTop', `${top}px`);
-    gridRootRef.current?.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
         })
       });
     });
@@ -102,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);
@@ -244,6 +238,14 @@ export 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;
@@ -254,7 +256,7 @@ export const useGridVirtualScroller = () => {
       }
       let isFirstVisible = false;
       if (params.position === undefined) {
-        isFirstVisible = i === 0;
+        isFirstVisible = rowIndexInPage === 0;
       }
       let isLastVisible = false;
       if (isLastSection) {
@@ -276,13 +278,6 @@ export 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__*/_jsx(rootProps.slots.row, _extends({
         row: model,
         rowId: id,
@@ -297,6 +292,7 @@ export const useGridVirtualScroller = () => {
         firstColumnToRender: firstColumnToRender,
         lastColumnToRender: lastColumnToRender,
         selected: isSelected,
+        offsets: offsets,
         dimensions: dimensions,
         isFirstVisible: isFirstVisible,
         isLastVisible: isLastVisible,
@@ -344,9 +340,6 @@ export const useGridVirtualScroller = () => {
       // TODO a scroll reset should not be necessary
       scrollerRef.current.scrollLeft = 0;
       scrollerRef.current.scrollTop = 0;
-    } else {
-      gridRootRef.current?.style.setProperty('--DataGrid-offsetTop', '0px');
-      gridRootRef.current?.style.setProperty('--DataGrid-offsetLeft', '0px');
     }
   }, [enabled, gridRootRef, scrollerRef]);
   useRunOnce(outerSize.width !== 0, () => {
@@ -383,7 +376,6 @@ export const useGridVirtualScroller = () => {
       role: 'presentation'
     }),
     getRenderZoneProps: () => ({
-      ref: renderZoneRef,
       role: 'rowgroup'
     }),
     getScrollbarVerticalProps: () => ({
@@ -595,4 +587,15 @@ 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) {
+  const factor = direction === 'ltr' ? 1 : -1;
+  const rowPositions = gridRowsMetaSelector(apiRef.current.state).positions;
+  const columnPositions = gridColumnPositionsSelector(apiRef);
+  const top = rowPositions[renderContext.firstRowIndex] ?? 0;
+  const left = factor * (columnPositions[renderContext.firstColumnIndex] ?? 0) - (columnPositions[pinnedLeftLength] ?? 0);
+  return {
+    top,
+    left
+  };
 }

package/modern/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/modern/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/modern/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/modern/joy/joySlots.js

@@ -398,8 +398,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/modern/locales/daDK.js

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

package/node/DataGrid/DataGrid.js

@@ -313,7 +313,7 @@ DataGridRaw.propTypes = {
   loading: _propTypes.default.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.default.object,
   /**
@@ -501,12 +501,6 @@ DataGridRaw.propTypes = {
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onRowDoubleClick: _propTypes.default.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.default.func,
   /**
    * Callback fired when the row turns to edit mode.
    * @param {GridRowParams} params With all properties from [[GridRowParams]].

package/node/DataGrid/useDataGridProps.js

@@ -83,7 +83,9 @@ const DATA_GRID_PROPS_DEFAULT_VALUES = exports.DATA_GRID_PROPS_DEFAULT_VALUES =
 };
 const defaultSlots = _defaultGridSlotsComponents.DATA_GRID_DEFAULT_SLOTS_COMPONENTS;
 const useDataGridProps = inProps => {
-  const themedProps = (0, _utils.useProps)((0, _styles.useThemeProps)({
+  const themedProps = (0, _utils.useProps)(
+  // eslint-disable-next-line material-ui/mui-name-matches-component-name
+  (0, _styles.useThemeProps)({
     props: inProps,
     name: 'MuiDataGrid'
   }));

package/node/components/GridPagination.js

@@ -33,13 +33,19 @@ const GridPaginationRoot = (0, _styles.styled)(_TablePagination.default)(({
     }
   }
 }));
+
+// A mutable version of a readonly array.
+
 const GridPagination = exports.GridPagination = /*#__PURE__*/React.forwardRef(function GridPagination(props, ref) {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const paginationModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridPaginationSelector.gridPaginationModelSelector);
   const visibleTopLevelRowCount = (0, _useGridSelector.useGridSelector)(apiRef, _filter.gridFilteredTopLevelRowCountSelector);
   const rowCount = React.useMemo(() => rootProps.rowCount ?? visibleTopLevelRowCount ?? 0, [rootProps.rowCount, visibleTopLevelRowCount]);
-  const lastPage = React.useMemo(() => Math.floor(rowCount / (paginationModel.pageSize || 1)), [rowCount, paginationModel.pageSize]);
+  const lastPage = React.useMemo(() => {
+    const calculatedValue = Math.ceil(rowCount / (paginationModel.pageSize || 1)) - 1;
+    return Math.max(0, calculatedValue);
+  }, [rowCount, paginationModel.pageSize]);
   const handlePageSizeChange = React.useCallback(event => {
     const pageSize = Number(event.target.value);
     apiRef.current.setPageSize(pageSize);
@@ -74,7 +80,11 @@ const GridPagination = exports.GridPagination = /*#__PURE__*/React.forwardRef(fu
     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/node/components/GridRow.js

@@ -31,7 +31,7 @@ var _utils2 = require("../utils/utils");
 var _GridCell = require("./cell/GridCell");
 var _GridScrollbarFillerCell = require("./GridScrollbarFillerCell");
 var _jsxRuntime = require("react/jsx-runtime");
-const _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"];
+const _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"];
 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 useUtilityClasses = ownerState => {
@@ -45,9 +45,7 @@ const useUtilityClasses = ownerState => {
     classes
   } = ownerState;
   const 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 (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
@@ -77,6 +75,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       visibleColumns,
       renderedColumns,
       pinnedColumns,
+      offsets,
       dimensions,
       firstColumnToRender,
       isFirstVisible,
@@ -281,7 +280,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
         width: width,
         contentWidth: contentWidth,
         field: column.field,
-        align: column.align
+        align: column.align ?? 'left'
       }, column.field);
     }
     const {
@@ -369,7 +368,13 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     "aria-selected": selected,
     style: style
   }, eventHandlers, other, {
-    children: [leftCells, cells, emptyCellWidth > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(EmptyCell, {
+    children: [leftCells, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      role: "presentation",
+      className: _gridClasses.gridClasses.cellOffsetLeft,
+      style: {
+        width: offsets.left
+      }
+    }), cells, emptyCellWidth > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(EmptyCell, {
       width: emptyCellWidth
     }), rightCells.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       role: "presentation",
@@ -437,6 +442,10 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   isLastVisible: _propTypes.default.bool.isRequired,
   isNotVisible: _propTypes.default.bool,
   lastColumnToRender: _propTypes.default.number.isRequired,
+  offsets: _propTypes.default.shape({
+    left: _propTypes.default.number.isRequired,
+    top: _propTypes.default.number.isRequired
+  }).isRequired,
   onClick: _propTypes.default.func,
   onDoubleClick: _propTypes.default.func,
   onMouseEnter: _propTypes.default.func,

package/node/components/GridScrollbarFillerCell.js

@@ -30,9 +30,6 @@ const Style = (0, _styles.styled)('div')({
   [`&.${classes.pinnedRight}:not(.${classes.header})`]: {
     position: 'sticky',
     right: 0
-  },
-  [`&:not(.${classes.header}):not(.${classes.pinnedRight})`]: {
-    transform: 'translate3d(var(--DataGrid-offsetLeft), 0, 0)'
   }
 });
 function GridScrollbarFillerCell({

package/node/components/base/GridFooterPlaceholder.js

@@ -16,5 +16,5 @@ function GridFooterPlaceholder() {
   if (rootProps.hideFooter) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.footer, (0, _extends2.default)({}, rootProps.slotProps?.footer));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.footer, (0, _extends2.default)({}, rootProps.slotProps?.footer /* FIXME: typing error */));
 }

package/node/components/cell/GridActionsCell.js

@@ -145,7 +145,7 @@ function GridActionsCell(props) {
     if (event.key === 'Tab') {
       event.preventDefault();
     }
-    if (['Tab', 'Enter', 'Escape'].includes(event.key)) {
+    if (['Tab', 'Escape'].includes(event.key)) {
       hideMenu();
     }
   };
@@ -182,7 +182,6 @@ function GridActionsCell(props) {
       target: buttonRef.current,
       position: position,
       onClose: hideMenu,
-      onClick: hideMenu,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuList.default, {
         id: menuId,
         className: _gridClasses.gridClasses.menuList,
@@ -191,7 +190,8 @@ function GridActionsCell(props) {
         variant: "menu",
         autoFocusItem: true,
         children: menuButtons.map((button, index) => /*#__PURE__*/React.cloneElement(button, {
-          key: index
+          key: index,
+          closeMenu: hideMenu
         }))
       })
     })]

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

@@ -199,8 +199,6 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.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',
@@ -247,6 +245,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 +565,9 @@ 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'
     },
     [`& .${_gridClasses.gridClasses.columnHeaderDraggableContainer}`]: {
       display: 'flex',

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

@@ -13,7 +13,7 @@ var _utils = require("@mui/utils");
 var _styles = require("@mui/material/styles");
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["item", "applyValue", "apiRef", "focusElementRef", "isFilterActive", "clearButton", "tabIndex", "label", "InputLabelProps"];
+const _excluded = ["item", "applyValue", "apiRef", "focusElementRef", "isFilterActive", "clearButton", "tabIndex", "label", "variant", "InputLabelProps"];
 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 BooleanOperatorContainer = (0, _styles.styled)('div')({
@@ -32,7 +32,8 @@ function GridFilterInputBoolean(props) {
       focusElementRef,
       clearButton,
       tabIndex,
-      label: labelProp
+      label: labelProp,
+      variant = 'standard'
     } = props,
     others = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const [filterValueState, setFilterValueState] = React.useState(item.value || '');
@@ -59,7 +60,7 @@ function GridFilterInputBoolean(props) {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseInputLabel, (0, _extends2.default)({}, rootProps.slotProps?.baseInputLabel, {
         id: labelId,
         shrink: true,
-        variant: "standard",
+        variant: variant,
         children: label
       })), /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseSelect, (0, _extends2.default)({
         labelId: labelId,
@@ -67,14 +68,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
         }
-      }, 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

@@ -15,7 +15,7 @@ var _styles = require("@mui/material/styles");
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _filterPanelUtils = require("./filterPanelUtils");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "placeholder", "tabIndex", "label", "isFilterActive", "clearButton", "InputLabelProps"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "placeholder", "tabIndex", "label", "variant", "isFilterActive", "clearButton", "InputLabelProps"];
 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 renderSingleSelectOptions = ({
@@ -58,6 +58,7 @@ function GridFilterInputSingleSelect(props) {
       placeholder,
       tabIndex,
       label: labelProp,
+      variant = 'standard',
       clearButton
     } = props,
     others = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
@@ -98,7 +99,7 @@ function GridFilterInputSingleSelect(props) {
         id: labelId,
         htmlFor: id,
         shrink: true,
-        variant: "standard",
+        variant: variant,
         children: label
       })), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseSelect, (0, _extends2.default)({
         id: id,
@@ -106,15 +107,16 @@ function GridFilterInputSingleSelect(props) {
         labelId: labelId,
         value: filterValue,
         onChange: onFilterChange,
-        variant: "standard",
+        variant: variant,
         type: type || 'text',
         inputProps: {
           tabIndex,
           ref: focusElementRef,
           placeholder: placeholder ?? apiRef.current.getLocaleText('filterPanelInputPlaceholder')
         },
-        native: isSelectNative
-      }, others, rootProps.slotProps?.baseSelect, {
+        native: isSelectNative,
+        notched: variant === 'outlined' ? true : undefined
+      }, others /* FIXME: typing error */, rootProps.slotProps?.baseSelect, {
         children: renderSingleSelectOptions({
           column: resolvedColumn,
           OptionComponent: rootProps.slots.baseSelectOption,