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

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);
@@ -53,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,
@@ -72,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
         })
       });
     });
@@ -101,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);
@@ -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, () => {
@@ -594,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.2
+ * @mui/x-data-grid v7.0.0-beta.4
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/internals/index.js

@@ -56,7 +56,7 @@ export { getColumnsToExport, defaultGetRowsToExport } from '../hooks/features/ex
 export * from '../utils/createControllablePromise';
 export { createSelector, createSelectorMemoized, unstable_resetCreateSelectorCache } from '../utils/createSelector';
 export { findParentElementFromClassName, getActiveElement, isEventTargetInPortal } from '../utils/domUtils';
-export { isNavigationKey } from '../utils/keyboardUtils';
+export { isNavigationKey, isPasteShortcut } from '../utils/keyboardUtils';
 export * from '../utils/utils';
 export * from '../utils/fastMemo';
 export { buildWarning } from '../utils/warning';

package/modern/utils/keyboardUtils.js

@@ -1,12 +1,12 @@
-export const isEscapeKey = key => key === 'Escape'; // TODO remove
-export const isEnterKey = key => key === 'Enter'; // TODO remove
-export const isTabKey = key => key === 'Tab'; // TODO remove
+/**
+ * @deprecated there is no meaninfuly logic abstracted, use event.key directly.
+ */
+export const isEscapeKey = key => key === 'Escape';
 
-export const isSpaceKey = key => key === ' ';
-export const isArrowKeys = key => key.indexOf('Arrow') === 0;
-export const isHomeOrEndKeys = key => key === 'Home' || key === 'End';
-export const isPageKeys = key => key.indexOf('Page') === 0;
-export const isDeleteKeys = key => key === 'Delete' || key === 'Backspace';
+/**
+ * @deprecated there is no meaninfuly logic abstracted, use event.key directly.
+ */
+export const isTabKey = key => key === 'Tab';
 
 // Non printable keys have a name, e.g. "ArrowRight", see the whole list:
 // https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values
@@ -22,9 +22,18 @@ export const GRID_MULTIPLE_SELECTION_KEYS = ['Meta', 'Control', 'Shift'];
 export const GRID_CELL_EXIT_EDIT_MODE_KEYS = ['Enter', 'Escape', 'Tab'];
 export const GRID_CELL_EDIT_COMMIT_KEYS = ['Enter', 'Tab'];
 export const isMultipleKey = key => GRID_MULTIPLE_SELECTION_KEYS.indexOf(key) > -1;
-export const isCellEnterEditModeKeys = event => isEnterKey(event.key) || isDeleteKeys(event.key) || isPrintableKey(event);
+export const isCellEnterEditModeKeys = event => isPrintableKey(event) || event.key === 'Enter' || event.key === 'Backspace' || event.key === 'Delete';
 export const isCellExitEditModeKeys = key => GRID_CELL_EXIT_EDIT_MODE_KEYS.indexOf(key) > -1;
 export const isCellEditCommitKeys = key => GRID_CELL_EDIT_COMMIT_KEYS.indexOf(key) > -1;
-export const isNavigationKey = key => isHomeOrEndKeys(key) || isArrowKeys(key) || isPageKeys(key) || isSpaceKey(key);
+export const isNavigationKey = key => key.indexOf('Arrow') === 0 || key.indexOf('Page') === 0 || key === ' ' || key === 'Home' || key === 'End';
 export const isKeyboardEvent = event => !!event.key;
-export const isHideMenuKey = key => isTabKey(key) || isEscapeKey(key);
+export const isHideMenuKey = key => isTabKey(key) || isEscapeKey(key);
+
+// In theory, on macOS, ctrl + v doesn't trigger a paste, so the function should return false.
+// However, maybe it's overkill to fix, so let's be lazy.
+export function isPasteShortcut(event) {
+  if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'v' && !event.shiftKey && !event.altKey) {
+    return true;
+  }
+  return false;
+}

package/node/DataGrid/DataGrid.js

@@ -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/colDef/gridActionsColDef.js

@@ -15,6 +15,7 @@ const GRID_ACTIONS_COL_DEF = exports.GRID_ACTIONS_COL_DEF = (0, _extends2.defaul
   // @ts-ignore
   aggregable: false,
   width: 100,
+  display: 'flex',
   align: 'center',
   headerAlign: 'center',
   headerName: '',

package/node/colDef/gridBooleanColDef.js

@@ -32,6 +32,7 @@ const stringToBoolean = value => {
 };
 const GRID_BOOLEAN_COL_DEF = exports.GRID_BOOLEAN_COL_DEF = (0, _extends2.default)({}, _gridStringColDef.GRID_STRING_COL_DEF, {
   type: 'boolean',
+  display: 'flex',
   align: 'center',
   headerAlign: 'center',
   renderCell: _GridBooleanCell.renderBooleanCell,

package/node/colDef/gridCheckboxSelectionColDef.js

@@ -28,6 +28,7 @@ const GRID_CHECKBOX_SELECTION_COL_DEF = exports.GRID_CHECKBOX_SELECTION_COL_DEF
   disableReorder: true,
   disableExport: true,
   getApplyQuickFilterFn: undefined,
+  display: 'flex',
   valueGetter: (value, row, column, apiRef) => {
     const selectionLookup = (0, _gridRowSelectionSelector.selectedIdsLookupSelector)(apiRef);
     const rowId = apiRef.current.getRowId(row);

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 => {
@@ -75,6 +75,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       visibleColumns,
       renderedColumns,
       pinnedColumns,
+      offsets,
       dimensions,
       firstColumnToRender,
       isFirstVisible,
@@ -368,8 +369,11 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     style: style
   }, eventHandlers, other, {
     children: [leftCells, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      role: "presentation",
       className: _gridClasses.gridClasses.cellOffsetLeft,
-      role: "presentation"
+      style: {
+        width: offsets.left
+      }
     }), cells, emptyCellWidth > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(EmptyCell, {
       width: emptyCellWidth
     }), rightCells.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -438,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

@@ -7,37 +7,22 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridScrollbarFillerCell = GridScrollbarFillerCell;
 var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _styles = require("@mui/material/styles");
 var _constants = require("../constants");
 var _jsxRuntime = require("react/jsx-runtime");
 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 classes = {
-  root: (0, _constants.getDataGridUtilityClass)('scrollbarFiller'),
-  header: (0, _constants.getDataGridUtilityClass)('scrollbarFiller--header'),
-  borderTop: (0, _constants.getDataGridUtilityClass)('scrollbarFiller--borderTop'),
-  pinnedRight: (0, _constants.getDataGridUtilityClass)('scrollbarFiller--pinnedRight')
+  root: _constants.gridClasses.scrollbarFiller,
+  header: _constants.gridClasses['scrollbarFiller--header'],
+  borderTop: _constants.gridClasses['scrollbarFiller--borderTop'],
+  pinnedRight: _constants.gridClasses['scrollbarFiller--pinnedRight']
 };
-const Style = (0, _styles.styled)('div')({
-  minWidth: 'calc(var(--DataGrid-hasScrollY) * var(--DataGrid-scrollbarSize))',
-  alignSelf: 'stretch',
-  [`&.${classes.borderTop}`]: {
-    borderTop: '1px solid var(--DataGrid-rowBorderColor)'
-  },
-  [`&.${classes.pinnedRight}`]: {
-    backgroundColor: 'var(--DataGrid-pinnedBackground)'
-  },
-  [`&.${classes.pinnedRight}:not(.${classes.header})`]: {
-    position: 'sticky',
-    right: 0
-  }
-});
 function GridScrollbarFillerCell({
   header,
   borderTop = true,
   pinnedRight
 }) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Style, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     role: "presentation",
     className: (0, _clsx.default)(classes.root, header && classes.header, borderTop && classes.borderTop, pinnedRight && classes.pinnedRight)
   });

package/node/components/cell/GridCell.js

@@ -67,8 +67,7 @@ const useUtilityClasses = ownerState => {
     classes
   } = ownerState;
   const slots = {
-    root: ['cell', `cell--text${(0, _utils.unstable_capitalize)(align)}`, isSelected && 'selected', isEditable && 'cell--editable', showLeftBorder && 'cell--withLeftBorder', showRightBorder && 'cell--withRightBorder', pinnedPosition === PinnedPosition.LEFT && 'cell--pinnedLeft', pinnedPosition === PinnedPosition.RIGHT && 'cell--pinnedRight', isSelectionMode && !isEditable && 'cell--selectionMode'],
-    content: ['cellContent']
+    root: ['cell', `cell--text${(0, _utils.unstable_capitalize)(align)}`, isSelected && 'selected', isEditable && 'cell--editable', showLeftBorder && 'cell--withLeftBorder', showRightBorder && 'cell--withRightBorder', pinnedPosition === PinnedPosition.LEFT && 'cell--pinnedLeft', pinnedPosition === PinnedPosition.RIGHT && 'cell--pinnedRight', isSelectionMode && !isEditable && 'cell--selectionMode']
   };
   return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
@@ -148,6 +147,9 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   if (column.cellClassName) {
     classNames.push(typeof column.cellClassName === 'function' ? column.cellClassName(cellParamsWithAPI) : column.cellClassName);
   }
+  if (column.display === 'flex') {
+    classNames.push(_gridClasses.gridClasses['cell--flex']);
+  }
   if (getCellClassName) {
     classNames.push(getCellClassName(cellParamsWithAPI));
   }
@@ -256,12 +258,11 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     };
   }
   let children;
-  if (editCellState == null && column.renderCell) {
+  let title;
+  if (editCellState === null && column.renderCell) {
     children = column.renderCell(cellParamsWithAPI);
-    classNames.push(_gridClasses.gridClasses['cell--withRenderer']);
-    classNames.push(rootClasses?.['cell--withRenderer']);
   }
-  if (editCellState != null && column.renderEditCell) {
+  if (editCellState !== null && column.renderEditCell) {
     const updatedRow = apiRef.current.getRowWithUpdatedValues(rowId, column.field);
 
     // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -275,12 +276,8 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   }
   if (children === undefined) {
     const valueString = valueToRender?.toString();
-    children = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: classes.content,
-      title: valueString,
-      role: "presentation",
-      children: valueString
-    });
+    children = valueString;
+    title = valueString;
   }
   if ( /*#__PURE__*/React.isValidElement(children) && canManageOwnFocus) {
     children = /*#__PURE__*/React.cloneElement(children, {
@@ -300,6 +297,7 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     "aria-colindex": colIndex + 1,
     "aria-colspan": colSpan,
     style: style,
+    title: title,
     tabIndex: tabIndex,
     onClick: publish('cellClick', onClick),
     onDoubleClick: publish('cellDoubleClick', onDoubleClick),

package/node/components/columnSelection/GridCellCheckboxRenderer.js

@@ -10,7 +10,6 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
-var _keyboardUtils = require("../../utils/keyboardUtils");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../constants/gridClasses");
@@ -71,7 +70,7 @@ const GridCellCheckboxForwardRef = exports.GridCellCheckboxForwardRef = /*#__PUR
     }
   }, [hasFocus]);
   const handleKeyDown = React.useCallback(event => {
-    if ((0, _keyboardUtils.isSpaceKey)(event.key)) {
+    if (event.key === ' ') {
       // We call event.stopPropagation to avoid selecting the row and also scrolling to bottom
       // TODO: Remove and add a check inside useGridKeyboardNavigation
       event.stopPropagation();

package/node/components/containers/GridRootStyles.js

@@ -54,6 +54,8 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     [`&.${_gridClasses.gridClasses.autosizing}`]: styles.autosizing
   }, {
     [`& .${_gridClasses.gridClasses.editBooleanCell}`]: styles.editBooleanCell
+  }, {
+    [`& .${_gridClasses.gridClasses.cell}`]: styles.cell
   }, {
     [`& .${_gridClasses.gridClasses['cell--editing']}`]: styles['cell--editing']
   }, {
@@ -62,12 +64,6 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses['cell--textLeft']}`]: styles['cell--textLeft']
   }, {
     [`& .${_gridClasses.gridClasses['cell--textRight']}`]: styles['cell--textRight']
-  },
-  // TODO v6: Remove
-  {
-    [`& .${_gridClasses.gridClasses['cell--withRenderer']}`]: styles['cell--withRenderer']
-  }, {
-    [`& .${_gridClasses.gridClasses.cell}`]: styles.cell
   }, {
     [`& .${_gridClasses.gridClasses['cell--rangeTop']}`]: styles['cell--rangeTop']
   }, {
@@ -78,8 +74,6 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses['cell--rangeRight']}`]: styles['cell--rangeRight']
   }, {
     [`& .${_gridClasses.gridClasses['cell--withRightBorder']}`]: styles['cell--withRightBorder']
-  }, {
-    [`& .${_gridClasses.gridClasses.cellContent}`]: styles.cellContent
   }, {
     [`& .${_gridClasses.gridClasses.cellCheckbox}`]: styles.cellCheckbox
   }, {
@@ -199,8 +193,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',
@@ -244,9 +236,21 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       [`& .${_gridClasses.gridClasses.columnHeaderTitleContainerContent} > *`]: {
         overflow: 'visible !important'
       },
-      [`& .${_gridClasses.gridClasses.cell} > *`]: {
+      '@media (hover: hover)': {
+        [`& .${_gridClasses.gridClasses.iconButtonContainer}`]: {
+          width: '0 !important',
+          visibility: 'hidden !important'
+        },
+        [`& .${_gridClasses.gridClasses.menuIcon}`]: {
+          width: '0 !important',
+          visibility: 'hidden !important'
+        }
+      },
+      [`& .${_gridClasses.gridClasses.cell}`]: {
         overflow: 'visible !important',
-        whiteSpace: 'nowrap'
+        whiteSpace: 'nowrap',
+        minWidth: 'max-content !important',
+        maxWidth: 'max-content !important'
       },
       [`& .${_gridClasses.gridClasses.groupingCriteriaCell}`]: {
         width: 'unset'
@@ -438,15 +442,19 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     },
     /* Cell styles */
     [`& .${_gridClasses.gridClasses.cell}`]: {
-      display: 'flex',
-      alignItems: 'center',
       height: 'var(--height)',
       minWidth: 'var(--width)',
       maxWidth: 'var(--width)',
+      lineHeight: 'calc(var(--height) - 1px)',
+      // -1px for the border
+
       '--width': '0px',
       '--height': '0px',
       boxSizing: 'border-box',
       borderTop: `1px solid var(--rowBorderColor)`,
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
       '&.Mui-selected': selectedStyles
     },
     [`& .${_gridClasses.gridClasses['virtualScrollerContent--overflowed']} .${_gridClasses.gridClasses['row--lastVisible']} .${_gridClasses.gridClasses.cell}`]: {
@@ -455,9 +463,10 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     [`&.${_gridClasses.gridClasses['root--disableUserSelection']} .${_gridClasses.gridClasses.cell}`]: {
       userSelect: 'none'
     },
-    [`& .${_gridClasses.gridClasses.row}:not(.${_gridClasses.gridClasses['row--dynamicHeight']}) > .${_gridClasses.gridClasses.cell}`]: {
-      overflow: 'hidden',
-      whiteSpace: 'nowrap'
+    [`& .${_gridClasses.gridClasses['row--dynamicHeight']} > .${_gridClasses.gridClasses.cell}`]: {
+      overflow: 'initial',
+      whiteSpace: 'initial',
+      lineHeight: 'inherit'
     },
     [`& .${_gridClasses.gridClasses.cellEmpty}`]: {
       padding: 0
@@ -475,10 +484,6 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
         outlineOffset: '-1px'
       }
     },
-    [`& .${_gridClasses.gridClasses.cellContent}`]: {
-      overflow: 'hidden',
-      textOverflow: 'ellipsis'
-    },
     [`& .${_gridClasses.gridClasses['row--editing']}`]: {
       boxShadow: t.shadows[2]
     },
@@ -517,6 +522,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     },
     [`& .${_gridClasses.gridClasses.rowReorderCellContainer}`]: {
       padding: 0,
+      display: 'flex',
       alignItems: 'stretch'
     },
     [`.${_gridClasses.gridClasses.withBorderColor}`]: {
@@ -536,13 +542,21 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       borderRightWidth: '1px',
       borderRightStyle: 'solid'
     },
+    [`& .${_gridClasses.gridClasses['cell--flex']}`]: {
+      display: 'flex',
+      alignItems: 'center',
+      lineHeight: 'inherit'
+    },
     [`& .${_gridClasses.gridClasses['cell--textLeft']}`]: {
+      textAlign: 'left',
       justifyContent: 'flex-start'
     },
     [`& .${_gridClasses.gridClasses['cell--textRight']}`]: {
+      textAlign: 'right',
       justifyContent: 'flex-end'
     },
     [`& .${_gridClasses.gridClasses['cell--textCenter']}`]: {
+      textAlign: 'center',
       justifyContent: 'center'
     },
     [`& .${_gridClasses.gridClasses['cell--pinnedLeft']}, & .${_gridClasses.gridClasses['cell--pinnedRight']}`]: {
@@ -569,8 +583,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     },
     [`& .${_gridClasses.gridClasses.cellOffsetLeft}`]: {
       flex: '0 0 auto',
-      display: 'inline-block',
-      width: 'var(--DataGrid-offsetLeft)'
+      display: 'inline-block'
     },
     [`& .${_gridClasses.gridClasses.columnHeaderDraggableContainer}`]: {
       display: 'flex',
@@ -614,6 +627,21 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       flex: '0 0 28px',
       alignSelf: 'stretch',
       marginRight: t.spacing(2)
+    },
+    /* ScrollbarFiller styles */
+    [`.${_gridClasses.gridClasses.scrollbarFiller}`]: {
+      minWidth: 'calc(var(--DataGrid-hasScrollY) * var(--DataGrid-scrollbarSize))',
+      alignSelf: 'stretch',
+      [`&.${_gridClasses.gridClasses['scrollbarFiller--borderTop']}`]: {
+        borderTop: '1px solid var(--DataGrid-rowBorderColor)'
+      },
+      [`&.${_gridClasses.gridClasses['scrollbarFiller--pinnedRight']}`]: {
+        backgroundColor: 'var(--DataGrid-pinnedBackground)'
+      },
+      [`&.${_gridClasses.gridClasses['scrollbarFiller--pinnedRight']}:not(.${_gridClasses.gridClasses['scrollbarFiller--header']})`]: {
+        position: 'sticky',
+        right: 0
+      }
     }
   });
   return gridStyle;

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,7 +68,8 @@ function GridFilterInputBoolean(props) {
         label: label,
         value: filterValueState,
         onChange: onFilterChange,
-        variant: "standard",
+        variant: variant,
+        notched: variant === 'outlined' ? true : undefined,
         native: isSelectNative,
         displayEmpty: true,
         inputProps: {

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

@@ -60,8 +60,14 @@ function GridFilterInputMultipleSingleSelect(props) {
     if (!Array.isArray(item.value)) {
       return [];
     }
-    return item.value;
-  }, [item.value]);
+    return item.value.reduce((acc, value) => {
+      const resolvedValue = resolvedValueOptions.find(v => getOptionValue(v) === value);
+      if (resolvedValue != null) {
+        acc.push(resolvedValue);
+      }
+      return acc;
+    }, []);
+  }, [getOptionValue, item.value, resolvedValueOptions]);
   const handleChange = React.useCallback((event, value) => {
     applyValue((0, _extends2.default)({}, item, {
       value: value.map(getOptionValue)