@mui/x-data-grid 7.18.0 → 7.20.0

package/modern/locales/viVN.js

@@ -46,21 +46,21 @@ const viVNGrid = {
   filterPanelInputLabel: 'Giá trị',
   filterPanelInputPlaceholder: 'Lọc giá trị',
   // Filter operators text
-  filterOperatorContains: 'Chứa',
-  // filterOperatorDoesNotContain: 'does not contain',
-  filterOperatorEquals: 'Bằng',
-  // filterOperatorDoesNotEqual: 'does not equal',
-  filterOperatorStartsWith: 'Bắt đầu bằng',
-  filterOperatorEndsWith: 'Kết thúc bằng',
-  filterOperatorIs: 'Là',
-  filterOperatorNot: 'Không là',
-  filterOperatorAfter: 'Trước',
+  filterOperatorContains: 'chứa',
+  filterOperatorDoesNotContain: 'không chứa',
+  filterOperatorEquals: 'bằng',
+  filterOperatorDoesNotEqual: 'không bằng',
+  filterOperatorStartsWith: 'bắt đầu với',
+  filterOperatorEndsWith: 'kết thúc với',
+  filterOperatorIs: 'là',
+  filterOperatorNot: 'không phải là',
+  filterOperatorAfter: 'sau',
   filterOperatorOnOrAfter: 'bằng hoặc sau',
-  filterOperatorBefore: 'Sau',
+  filterOperatorBefore: 'trước',
   filterOperatorOnOrBefore: 'bằng hoặc trước',
-  filterOperatorIsEmpty: 'Rỗng',
-  filterOperatorIsNotEmpty: 'Khác rỗng',
-  filterOperatorIsAnyOf: 'Bất kỳ',
+  filterOperatorIsEmpty: 'rỗng',
+  filterOperatorIsNotEmpty: 'khác rỗng',
+  filterOperatorIsAnyOf: 'là một trong',
   'filterOperator=': '=',
   'filterOperator!=': '!=',
   'filterOperator>': '>',
@@ -69,20 +69,20 @@ const viVNGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'Chứa',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: 'Không chứa',
   headerFilterOperatorEquals: 'Bằng',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
+  headerFilterOperatorDoesNotEqual: 'Không bằng',
   headerFilterOperatorStartsWith: 'Bắt đầu với',
   headerFilterOperatorEndsWith: 'Kết thúc với',
-  headerFilterOperatorIs: 'là',
-  headerFilterOperatorNot: 'Không là',
+  headerFilterOperatorIs: 'Là',
+  headerFilterOperatorNot: 'Không phải là',
   headerFilterOperatorAfter: 'Sau',
-  headerFilterOperatorOnOrAfter: 'Đang hoặc sau',
+  headerFilterOperatorOnOrAfter: 'Bằng hoặc sau',
   headerFilterOperatorBefore: 'Trước',
-  headerFilterOperatorOnOrBefore: 'Đang hoặc trước',
+  headerFilterOperatorOnOrBefore: 'Bằng hoặc trước',
   headerFilterOperatorIsEmpty: 'Rỗng',
   headerFilterOperatorIsNotEmpty: 'Khác rỗng',
-  headerFilterOperatorIsAnyOf: 'Bất kỳ',
+  headerFilterOperatorIsAnyOf: 'Là một trong',
   'headerFilterOperator=': 'Bằng',
   'headerFilterOperator!=': 'Khác',
   'headerFilterOperator>': 'Lớn hơn',

package/modern/utils/createSelector.js

@@ -34,6 +34,8 @@ export const createSelector = (a, b, c, d, e, f, ...other) => {
     throw new Error('Unsupported number of selectors');
   }
   let selector;
+
+  // eslint-disable-next-line id-denylist
   if (a && b && c && d && e && f) {
     selector = (stateOrApiRef, instanceIdParam) => {
       const isAPIRef = checkIsAPIRef(stateOrApiRef);
@@ -46,6 +48,7 @@ export const createSelector = (a, b, c, d, e, f, ...other) => {
       const ve = e(state, instanceId);
       return f(va, vb, vc, vd, ve);
     };
+    // eslint-disable-next-line id-denylist
   } else if (a && b && c && d && e) {
     selector = (stateOrApiRef, instanceIdParam) => {
       const isAPIRef = checkIsAPIRef(stateOrApiRef);
@@ -100,6 +103,8 @@ export const createSelectorV8 = (a, b, c, d, e, f, ...other) => {
     throw new Error('Unsupported number of selectors');
   }
   let selector;
+
+  // eslint-disable-next-line id-denylist
   if (a && b && c && d && e && f) {
     selector = (stateOrApiRef, args, instanceIdParam) => {
       const isAPIRef = checkIsAPIRef(stateOrApiRef);
@@ -112,6 +117,7 @@ export const createSelectorV8 = (a, b, c, d, e, f, ...other) => {
       const ve = e(state, args, instanceId);
       return f(va, vb, vc, vd, ve, args);
     };
+    // eslint-disable-next-line id-denylist
   } else if (a && b && c && d && e) {
     selector = (stateOrApiRef, args, instanceIdParam) => {
       const isAPIRef = checkIsAPIRef(stateOrApiRef);

package/modern/utils/domUtils.js

@@ -187,7 +187,7 @@ export function findGridCells(api, field) {
 }
 function queryRows(api) {
   return api.virtualScrollerRef.current.querySelectorAll(
-  // Use > to ignore rows from nested data grids (for example in detail panel)
+  // Use > to ignore rows from nested Data Grids (for example in detail panel)
   `:scope > div > div > .${gridClasses.row}`);
 }
 function parseCellColIndex(col) {

package/node/DataGrid/DataGrid.js

@@ -80,6 +80,11 @@ DataGridRaw.propTypes = {
   /**
    * If `true`, the Data Grid height is dynamic and follows the number of rows in the Data Grid.
    * @default false
+   * @deprecated Use flex parent container instead: https://mui.com/x/react-data-grid/layout/#flex-parent-container
+   * @example
+   * <div style={{ display: 'flex', flexDirection: 'column' }}>
+   *   <DataGrid />
+   * </div>
    */
   autoHeight: _propTypes.default.bool,
   /**
@@ -440,6 +445,12 @@ DataGridRaw.propTypes = {
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onColumnHeaderClick: _propTypes.default.func,
+  /**
+   * Callback fired when a contextmenu event comes from a column header element.
+   * @param {GridColumnHeaderParams} params With all properties from [[GridColumnHeaderParams]].
+   * @param {MuiEvent<React.MouseEvent>} event The event object.
+   */
+  onColumnHeaderContextMenu: _propTypes.default.func,
   /**
    * Callback fired when a double click event comes from a column header element.
    * @param {GridColumnHeaderParams} params With all properties from [[GridColumnHeaderParams]].
@@ -657,6 +668,7 @@ DataGridRaw.propTypes = {
    * @template R
    * @param {R} newRow Row object with the new values.
    * @param {R} oldRow Row object with the old values.
+   * @param {{ rowId: GridRowId }} params Additional parameters.
    * @returns {Promise<R> | R} The final values to update the row.
    */
   processRowUpdate: _propTypes.default.func,

package/node/components/cell/GridCell.js

@@ -126,11 +126,11 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
       const result = apiRef.current.getCellParams(rowId, field);
       result.api = apiRef.current;
       return result;
-    } catch (e) {
-      if (e instanceof _useGridParamsApi.MissingRowIdError) {
+    } catch (error) {
+      if (error instanceof _useGridParamsApi.MissingRowIdError) {
         return EMPTY_CELL_PARAMS;
       }
-      throw e;
+      throw error;
     }
   }, _useGridSelector.objectShallowCompare);
   const isSelected = (0, _useGridSelector.useGridSelector)(apiRef, () => apiRef.current.unstable_applyPipeProcessors('isCellSelected', false, {
@@ -263,10 +263,9 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       "data-colindex": colIndex,
       role: "presentation",
-      style: (0, _extends2.default)({}, style, {
-        minWidth: 'var(--width)',
-        maxWidth: 'var(--width)'
-      })
+      style: (0, _extends2.default)({
+        width: 'var(--width)'
+      }, style)
     });
   }
   if (cellParams === EMPTY_CELL_PARAMS) {
@@ -323,7 +322,7 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _extends2.default)({
     ref: handleRef,
-    className: (0, _clsx.default)(className, classNames, classes.root),
+    className: (0, _clsx.default)(classes.root, classNames, className),
     role: "gridcell",
     "data-field": field,
     "data-colindex": colIndex,

package/node/components/columnHeaders/GridBaseColumnHeaders.js

@@ -44,7 +44,7 @@ const GridBaseColumnHeaders = exports.GridBaseColumnHeaders = /*#__PURE__*/React
   const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridColumnHeadersRoot, (0, _extends2.default)({
     ref: ref,
-    className: (0, _clsx.default)(className, classes.root),
+    className: (0, _clsx.default)(classes.root, className),
     ownerState: rootProps
   }, other, {
     role: "presentation"

package/node/components/columnHeaders/GridColumnHeaderItem.js

@@ -100,6 +100,7 @@ function GridColumnHeaderItem(props) {
   }, [apiRef, colDef.field]);
   const mouseEventsHandlers = React.useMemo(() => ({
     onClick: publish('columnHeaderClick'),
+    onContextMenu: publish('columnHeaderContextMenu'),
     onDoubleClick: publish('columnHeaderDoubleClick'),
     onMouseOver: publish('columnHeaderOver'),
     // TODO remove as it's not used

package/node/components/columnSelection/GridCellCheckboxRenderer.js

@@ -14,8 +14,10 @@ var _utils = require("@mui/utils");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../constants/gridClasses");
+var _useGridSelector = require("../../hooks/utils/useGridSelector");
+var _utils2 = require("../../hooks/features/rowSelection/utils");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["field", "id", "value", "formattedValue", "row", "rowNode", "colDef", "isEditable", "cellMode", "hasFocus", "tabIndex", "api"];
+const _excluded = ["field", "id", "formattedValue", "row", "rowNode", "colDef", "isEditable", "cellMode", "hasFocus", "tabIndex", "api"];
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -29,7 +31,6 @@ const GridCellCheckboxForwardRef = exports.GridCellCheckboxForwardRef = /*#__PUR
   const {
       field,
       id,
-      value: isChecked,
       rowNode,
       hasFocus,
       tabIndex
@@ -77,21 +78,28 @@ const GridCellCheckboxForwardRef = exports.GridCellCheckboxForwardRef = /*#__PUR
       event.stopPropagation();
     }
   }, []);
+  const isSelectable = apiRef.current.isRowSelectable(id);
+  const checkboxPropsSelector = (0, _utils2.getCheckboxPropsSelector)(id, rootProps.rowSelectionPropagation?.parents ?? false);
+  const {
+    isIndeterminate,
+    isChecked
+  } = (0, _useGridSelector.useGridSelector)(apiRef, checkboxPropsSelector);
   if (rowNode.type === 'footer' || rowNode.type === 'pinnedRow') {
     return null;
   }
-  const isSelectable = apiRef.current.isRowSelectable(id);
   const label = apiRef.current.getLocaleText(isChecked ? 'checkboxSelectionUnselectRow' : 'checkboxSelectionSelectRow');
+  const checked = rootProps.indeterminateCheckboxAction === 'select' ? isChecked && !isIndeterminate : isChecked;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseCheckbox, (0, _extends2.default)({
     ref: handleRef,
     tabIndex: tabIndex,
-    checked: isChecked,
+    checked: checked,
     onChange: handleChange,
     className: classes.root,
     inputProps: {
       'aria-label': label
     },
     onKeyDown: handleKeyDown,
+    indeterminate: isIndeterminate,
     disabled: !isSelectable,
     touchRippleRef: rippleRef /* FIXME: typing error */
   }, rootProps.slotProps?.baseCheckbox, other));

package/node/components/containers/GridRoot.js

@@ -54,7 +54,7 @@ const GridRoot = exports.GridRoot = /*#__PURE__*/React.forwardRef(function GridR
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridRootStyles.GridRootStyles, (0, _extends2.default)({
     ref: handleRef,
-    className: (0, _clsx.default)(className, classes.root),
+    className: (0, _clsx.default)(classes.root, className),
     ownerState: ownerState
   }, other));
 });

package/node/components/containers/GridRootStyles.js

@@ -177,14 +177,28 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
   const hoverOpacity = (t.vars || t).palette.action.hoverOpacity;
   const hoverColor = (t.vars || t).palette.action.hover;
   const selectedOpacity = (t.vars || t).palette.action.selectedOpacity;
+  const selectedHoverOpacity = t.vars ? `calc(${hoverOpacity} + ${selectedOpacity})` // TODO: Improve type
+  : hoverOpacity + selectedOpacity;
   const selectedBackground = t.vars ? `rgba(${t.vars.palette.primary.mainChannel} / ${selectedOpacity})` : (0, _styles.alpha)(t.palette.primary.main, selectedOpacity);
-  const selectedHoverBackground = t.vars ? `rgba(${t.vars.palette.primary.mainChannel} / calc(
-                ${t.vars.palette.action.selectedOpacity} +
-                ${t.vars.palette.action.hoverOpacity}
-              ))` : (0, _styles.alpha)(t.palette.primary.main, t.palette.action.selectedOpacity + t.palette.action.hoverOpacity);
-  const pinnedHoverBackground = t.vars ? hoverColor : blend(pinnedBackground, hoverColor, hoverOpacity);
-  const pinnedSelectedBackground = t.vars ? selectedBackground : blend(pinnedBackground, selectedBackground, selectedOpacity);
-  const pinnedSelectedHoverBackground = t.vars ? hoverColor : blend(pinnedSelectedBackground, hoverColor, hoverOpacity);
+  const selectedHoverBackground = t.vars ? `rgba(${t.vars.palette.primary.mainChannel} / ${selectedHoverOpacity})` : (0, _styles.alpha)(t.palette.primary.main, selectedHoverOpacity);
+  const blendFn = t.vars ? blendCssVars : blend;
+  const getPinnedBackgroundStyles = backgroundColor => ({
+    [`& .${_gridClasses.gridClasses['cell--pinnedLeft']}, & .${_gridClasses.gridClasses['cell--pinnedRight']}`]: {
+      backgroundColor,
+      '&.Mui-selected': {
+        backgroundColor: blendFn(backgroundColor, selectedBackground, selectedOpacity),
+        '&:hover': {
+          backgroundColor: blendFn(backgroundColor, selectedBackground, selectedHoverOpacity)
+        }
+      }
+    }
+  });
+  const pinnedBackgroundColor = blendFn(pinnedBackground, hoverColor, hoverOpacity);
+  const pinnedHoverStyles = getPinnedBackgroundStyles(pinnedBackgroundColor);
+  const pinnedSelectedBackgroundColor = blendFn(pinnedBackground, selectedBackground, selectedOpacity);
+  const pinnedSelectedStyles = getPinnedBackgroundStyles(pinnedSelectedBackgroundColor);
+  const pinnedSelectedHoverBackgroundColor = blendFn(pinnedBackground, selectedHoverBackground, selectedHoverOpacity);
+  const pinnedSelectedHoverStyles = getPinnedBackgroundStyles(pinnedSelectedHoverBackgroundColor);
   const selectedStyles = {
     backgroundColor: selectedBackground,
     '&:hover': {
@@ -624,24 +638,15 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses['cell--pinnedLeft']}, & .${_gridClasses.gridClasses['cell--pinnedRight']}`]: {
       position: 'sticky',
       zIndex: 3,
-      background: 'var(--DataGrid-pinnedBackground)'
+      background: 'var(--DataGrid-pinnedBackground)',
+      '&.Mui-selected': {
+        backgroundColor: pinnedSelectedBackgroundColor
+      }
     },
     [`& .${_gridClasses.gridClasses.virtualScrollerContent} .${_gridClasses.gridClasses.row}`]: {
-      '&:hover': {
-        [`& .${_gridClasses.gridClasses['cell--pinnedLeft']}, & .${_gridClasses.gridClasses['cell--pinnedRight']}`]: {
-          backgroundColor: pinnedHoverBackground
-        }
-      },
-      [`&.Mui-selected`]: {
-        [`& .${_gridClasses.gridClasses['cell--pinnedLeft']}, & .${_gridClasses.gridClasses['cell--pinnedRight']}`]: {
-          backgroundColor: pinnedSelectedBackground
-        },
-        '&:hover': {
-          [`& .${_gridClasses.gridClasses['cell--pinnedLeft']}, & .${_gridClasses.gridClasses['cell--pinnedRight']}`]: {
-            backgroundColor: pinnedSelectedHoverBackground
-          }
-        }
-      }
+      '&:hover': pinnedHoverStyles,
+      '&.Mui-selected': pinnedSelectedStyles,
+      '&.Mui-selected:hover': pinnedSelectedHoverStyles
     },
     [`& .${_gridClasses.gridClasses.cellOffsetLeft}`]: {
       flex: '0 0 auto',
@@ -754,4 +759,8 @@ function blend(background, overlay, opacity, gamma = 1) {
     type: 'rgb',
     values: rgb
   });
+}
+const removeOpacity = color => `rgb(from ${color} r g b / 1)`;
+function blendCssVars(background, overlay, opacity) {
+  return `color-mix(in srgb,${background}, ${removeOpacity(overlay)} calc(${opacity} * 100%))`;
 }

package/node/components/containers/GridToolbarContainer.js

@@ -52,7 +52,7 @@ const GridToolbarContainer = exports.GridToolbarContainer = /*#__PURE__*/React.f
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridToolbarContainerRoot, (0, _extends2.default)({
     ref: ref,
-    className: (0, _clsx.default)(className, classes.root),
+    className: (0, _clsx.default)(classes.root, className),
     ownerState: rootProps
   }, other, {
     children: children

package/node/components/menu/GridMenu.js

@@ -93,7 +93,7 @@ function GridMenu(props) {
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridMenuRoot, (0, _extends2.default)({
     as: rootProps.slots.basePopper,
-    className: (0, _clsx.default)(className, classes.root),
+    className: (0, _clsx.default)(classes.root, className),
     ownerState: rootProps,
     open: open,
     anchorEl: target,

package/node/components/panel/GridPanel.js

@@ -92,7 +92,7 @@ const GridPanel = exports.GridPanel = /*#__PURE__*/React.forwardRef((props, ref)
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPanelRoot, (0, _extends2.default)({
     ref: ref,
     placement: "bottom-start",
-    className: (0, _clsx.default)(className, classes.panel),
+    className: (0, _clsx.default)(classes.panel, className),
     ownerState: rootProps,
     anchorEl: anchorEl,
     modifiers: modifiers

package/node/components/panel/GridPanelContent.js

@@ -45,7 +45,7 @@ function GridPanelContent(props) {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPanelContentRoot, (0, _extends2.default)({
-    className: (0, _clsx.default)(className, classes.root),
+    className: (0, _clsx.default)(classes.root, className),
     ownerState: rootProps
   }, other));
 }

package/node/components/panel/GridPanelFooter.js

@@ -45,7 +45,7 @@ function GridPanelFooter(props) {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPanelFooterRoot, (0, _extends2.default)({
-    className: (0, _clsx.default)(className, classes.root),
+    className: (0, _clsx.default)(classes.root, className),
     ownerState: rootProps
   }, other));
 }

package/node/components/panel/GridPanelHeader.js

@@ -43,7 +43,7 @@ function GridPanelHeader(props) {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPanelHeaderRoot, (0, _extends2.default)({
-    className: (0, _clsx.default)(className, classes.root),
+    className: (0, _clsx.default)(classes.root, className),
     ownerState: rootProps
   }, other));
 }

package/node/components/panel/GridPanelWrapper.js

@@ -56,7 +56,7 @@ const GridPanelWrapper = exports.GridPanelWrapper = /*#__PURE__*/React.forwardRe
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPanelWrapperRoot, (0, _extends2.default)({
       ref: ref,
       tabIndex: -1,
-      className: (0, _clsx.default)(className, classes.root),
+      className: (0, _clsx.default)(classes.root, className),
       ownerState: rootProps
     }, other))
   }));

package/node/components/toolbar/GridToolbarQuickFilter.js

@@ -101,7 +101,7 @@ function GridToolbarQuickFilter(props) {
     variant: "standard",
     value: searchValue,
     onChange: handleSearchValueChange,
-    className: (0, _clsx.default)(className, classes.root),
+    className: (0, _clsx.default)(classes.root, className),
     placeholder: apiRef.current.getLocaleText('toolbarQuickFilterPlaceholder'),
     "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterLabel'),
     type: "search"

package/node/components/virtualization/GridBottomContainer.js

@@ -12,6 +12,9 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _system = require("@mui/system");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _gridClasses = require("../../constants/gridClasses");
+var _gridDimensionsSelectors = require("../../hooks/features/dimensions/gridDimensionsSelectors");
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = () => {
   const slots = {
@@ -26,8 +29,22 @@ const Element = (0, _system.styled)('div')({
 });
 function GridBottomContainer(props) {
   const classes = useUtilityClasses();
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const {
+    viewportOuterSize,
+    minimumSize,
+    hasScrollX,
+    scrollbarSize
+  } = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.gridDimensionsSelector);
+  const scrollHeight = hasScrollX ? scrollbarSize : 0;
+  const offset = Math.max(viewportOuterSize.height - minimumSize.height -
+  // Subtract scroll height twice to account for GridVirtualScrollerFiller and horizontal scrollbar
+  2 * scrollHeight, 0);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Element, (0, _extends2.default)({}, props, {
-    className: (0, _clsx.default)(classes.root, props.className, _gridClasses.gridClasses['container--bottom']),
+    className: (0, _clsx.default)(classes.root, _gridClasses.gridClasses['container--bottom']),
+    style: {
+      transform: `translateY(${offset}px)`
+    },
     role: "presentation"
   }));
 }

package/node/components/virtualization/GridMainContainer.js

@@ -24,7 +24,9 @@ const Element = (0, _system.styled)('div', {
 })({
   flexGrow: 1,
   position: 'relative',
-  overflow: 'hidden'
+  overflow: 'hidden',
+  display: 'flex',
+  flexDirection: 'column'
 });
 const GridMainContainer = exports.GridMainContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();

package/node/components/virtualization/GridTopContainer.js

@@ -27,7 +27,7 @@ const Element = (0, _system.styled)('div')({
 function GridTopContainer(props) {
   const classes = useUtilityClasses();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Element, (0, _extends2.default)({}, props, {
-    className: (0, _clsx.default)(classes.root, props.className, _gridClasses.gridClasses['container--top']),
+    className: (0, _clsx.default)(classes.root, _gridClasses.gridClasses['container--top']),
     role: "presentation"
   }));
 }

package/node/components/virtualization/GridVirtualScrollbar.js

@@ -28,9 +28,6 @@ const Scrollbar = (0, _system.styled)('div')({
   position: 'absolute',
   display: 'inline-block',
   zIndex: 6,
-  '& > div': {
-    display: 'inline-block'
-  },
   // In macOS Safari and Gnome Web, scrollbars are overlaid and don't affect the layout. So we consider
   // their size to be 0px throughout all the calculations, but the floating scrollbar container does need
   // to appear and have a real size. We set it to 14px because it seems like an acceptable value and we
@@ -62,9 +59,6 @@ const ScrollbarHorizontal = (0, _system.styled)(Scrollbar)({
   },
   bottom: '0px'
 });
-const Content = (0, _system.styled)('div')({
-  display: 'inline-block'
-});
 const GridVirtualScrollbar = exports.GridVirtualScrollbar = /*#__PURE__*/React.forwardRef(function GridVirtualScrollbar(props, ref) {
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
@@ -134,7 +128,7 @@ const GridVirtualScrollbar = exports.GridVirtualScrollbar = /*#__PURE__*/React.f
     className: classes.root,
     tabIndex: -1,
     "aria-hidden": "true",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Content, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       ref: contentRef,
       className: classes.content
     })

package/node/components/virtualization/GridVirtualScroller.js

@@ -45,6 +45,7 @@ const Scroller = (0, _system.styled)('div', {
 })({
   position: 'relative',
   height: '100%',
+  flexGrow: 1,
   overflow: 'scroll',
   scrollbarWidth: 'none' /* Firefox */,
   '&::-webkit-scrollbar': {

package/node/components/virtualization/GridVirtualScrollerFiller.js

@@ -51,10 +51,9 @@ function GridVirtualScrollerFiller({
     leftPinnedWidth,
     rightPinnedWidth
   } = (0, _useGridSelector.useGridSelector)(apiRef, _dimensions.gridDimensionsSelector);
-  const scrollbarHeight = hasScrollX ? scrollbarSize : 0;
-  const expandedHeight = viewportOuterSize.height - minimumSize.height - scrollbarHeight;
-  const height = Math.max(scrollbarHeight, expandedHeight);
-  if (height === 0) {
+  const height = hasScrollX ? scrollbarSize : 0;
+  const needsLastRowBorder = viewportOuterSize.height - minimumSize.height > 0;
+  if (height === 0 && !needsLastRowBorder) {
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Filler, {

package/node/hooks/core/useGridRefs.js

@@ -10,6 +10,8 @@ const useGridRefs = apiRef => {
   const rootElementRef = React.useRef(null);
   const mainElementRef = React.useRef(null);
   const virtualScrollerRef = React.useRef(null);
+  const virtualScrollbarVerticalRef = React.useRef(null);
+  const virtualScrollbarHorizontalRef = React.useRef(null);
   const columnHeadersContainerRef = React.useRef(null);
   apiRef.current.register('public', {
     rootElementRef
@@ -17,6 +19,8 @@ const useGridRefs = apiRef => {
   apiRef.current.register('private', {
     mainElementRef,
     virtualScrollerRef,
+    virtualScrollbarVerticalRef,
+    virtualScrollbarHorizontalRef,
     columnHeadersContainerRef
   });
 };

package/node/hooks/features/columns/gridColumnsUtils.js

@@ -11,6 +11,7 @@ exports.getFirstNonSpannedColumnToRender = getFirstNonSpannedColumnToRender;
 exports.getTotalHeaderHeight = getTotalHeaderHeight;
 exports.hydrateColumnsWidth = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _resolveProps = _interopRequireDefault(require("@mui/utils/resolveProps"));
 var _colDef = require("../../../colDef");
 var _gridColumnsSelector = require("./gridColumnsSelector");
 var _utils = require("../../../utils/utils");
@@ -289,9 +290,9 @@ const createColumnsState = ({
         }
       }
     });
-    columnsState.lookup[field] = (0, _extends2.default)({}, existingState, newColumn, {
+    columnsState.lookup[field] = (0, _resolveProps.default)(existingState, (0, _extends2.default)({}, newColumn, {
       hasBeenResized
-    });
+    }));
   });
   if (keepOnlyColumnsToUpsert && !isInsideStateInitializer) {
     Object.keys(columnsState.lookup).forEach(field => {

package/node/hooks/features/dimensions/useGridDimensions.js

@@ -248,11 +248,11 @@ function useGridDimensions(apiRef, props) {
     // jsdom has no layout capabilities
     const isJSDOM = /jsdom/.test(window.navigator.userAgent);
     if (size.height === 0 && !errorShown.current && !props.autoHeight && !isJSDOM) {
-      logger.error(['The parent DOM element of the data grid has an empty height.', 'Please make sure that this element has an intrinsic height.', 'The grid displays with a height of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
+      logger.error(['The parent DOM element of the Data Grid has an empty height.', 'Please make sure that this element has an intrinsic height.', 'The grid displays with a height of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
       errorShown.current = true;
     }
     if (size.width === 0 && !errorShown.current && !isJSDOM) {
-      logger.error(['The parent DOM element of the data grid has an empty width.', 'Please make sure that this element has an intrinsic width.', 'The grid displays with a width of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
+      logger.error(['The parent DOM element of the Data Grid has an empty width.', 'Please make sure that this element has an intrinsic width.', 'The grid displays with a width of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
       errorShown.current = true;
     }
     if (isFirstSizing.current) {

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

@@ -76,7 +76,7 @@ const useGridCellEditing = (apiRef, props) => {
   const handleCellKeyDown = React.useCallback((params, event) => {
     if (params.cellMode === _gridEditRowModel.GridCellModes.Edit) {
       // Wait until IME is settled for Asian languages like Japanese and Chinese
-      // TODO: `event.which` is deprecated but this is a temporary workaround
+      // TODO: to replace at one point. See https://github.com/mui/material-ui/pull/39713#discussion_r1381678957.
       if (event.which === 229) {
         return;
       }
@@ -332,7 +332,9 @@ const useGridCellEditing = (apiRef, props) => {
       };
       try {
         const row = apiRef.current.getRow(id);
-        Promise.resolve(processRowUpdate(rowUpdate, row)).then(finalRowUpdate => {
+        Promise.resolve(processRowUpdate(rowUpdate, row, {
+          rowId: id
+        })).then(finalRowUpdate => {
           apiRef.current.updateRows([finalRowUpdate]);
           finishCellEditMode();
         }).catch(handleError);

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

@@ -118,7 +118,7 @@ const useGridRowEditing = (apiRef, props) => {
   const handleCellKeyDown = React.useCallback((params, event) => {
     if (params.cellMode === _gridEditRowModel.GridRowModes.Edit) {
       // Wait until IME is settled for Asian languages like Japanese and Chinese
-      // TODO: `event.which` is deprecated but this is a temporary workaround
+      // TODO: to replace at one point. See https://github.com/mui/material-ui/pull/39713#discussion_r1381678957.
       if (event.which === 229) {
         return;
       }
@@ -405,7 +405,9 @@ const useGridRowEditing = (apiRef, props) => {
         }
       };
       try {
-        Promise.resolve(processRowUpdate(rowUpdate, row)).then(finalRowUpdate => {
+        Promise.resolve(processRowUpdate(rowUpdate, row, {
+          rowId: id
+        })).then(finalRowUpdate => {
           apiRef.current.updateRows([finalRowUpdate]);
           finishRowEditMode();
         }).catch(handleError);

package/node/hooks/features/events/useGridEvents.js

@@ -11,6 +11,7 @@ var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
  */
 function useGridEvents(apiRef, props) {
   (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'columnHeaderClick', props.onColumnHeaderClick);
+  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'columnHeaderContextMenu', props.onColumnHeaderContextMenu);
   (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'columnHeaderDoubleClick', props.onColumnHeaderDoubleClick);
   (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'columnHeaderOver', props.onColumnHeaderOver);
   (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'columnHeaderOut', props.onColumnHeaderOut);