@mui/x-data-grid 6.12.0 → 6.13.0

package/models/gridSlotsComponentsProps.d.ts

@@ -21,6 +21,7 @@ import { GridOverlayProps } from '../components/containers/GridOverlay';
 import { GridPanelProps } from '../components/panel/GridPanel';
 import type { GridRowProps } from '../components/GridRow';
 import type { GridCellProps } from '../components/cell/GridCell';
+import type { GridRowCountProps } from '../components';
 export interface BaseCheckboxPropsOverrides {
 }
 export interface BaseTextFieldPropsOverrides {
@@ -59,6 +60,8 @@ export interface FilterPanelPropsOverrides {
 }
 export interface FooterPropsOverrides {
 }
+export interface FooterRowCountOverrides {
+}
 export interface PaginationPropsOverrides {
 }
 export interface LoadingOverlayPropsOverrides {
@@ -100,6 +103,7 @@ export interface GridSlotsComponentsProps {
     columnsPanel?: SlotProps<GridColumnsPanelProps, ColumnsPanelPropsOverrides>;
     filterPanel?: SlotProps<GridFilterPanelProps, FilterPanelPropsOverrides>;
     footer?: SlotProps<GridFooterContainerProps, FooterPropsOverrides>;
+    footerRowCount?: SlotProps<GridRowCountProps, FooterRowCountOverrides>;
     loadingOverlay?: SlotProps<GridOverlayProps, LoadingOverlayPropsOverrides>;
     noResultsOverlay?: SlotProps<GridOverlayProps, NoResultsOverlayPropsOverrides>;
     noRowsOverlay?: SlotProps<GridOverlayProps, NoRowsOverlayPropsOverrides>;

package/modern/components/GridFooter.js

@@ -6,7 +6,6 @@ import { gridTopLevelRowCountSelector } from '../hooks/features/rows/gridRowsSel
 import { selectedGridRowsCountSelector } from '../hooks/features/rowSelection/gridRowSelectionSelector';
 import { gridFilteredTopLevelRowCountSelector } from '../hooks/features/filter/gridFilterSelector';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
-import { GridRowCount } from './GridRowCount';
 import { GridSelectedRowCount } from './GridSelectedRowCount';
 import { GridFooterContainer } from './containers/GridFooterContainer';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
@@ -21,10 +20,10 @@ const GridFooter = /*#__PURE__*/React.forwardRef(function GridFooter(props, ref)
   const selectedRowCountElement = !rootProps.hideFooterSelectedRowCount && selectedRowCount > 0 ? /*#__PURE__*/_jsx(GridSelectedRowCount, {
     selectedRowCount: selectedRowCount
   }) : /*#__PURE__*/_jsx("div", {});
-  const rowCountElement = !rootProps.hideFooterRowCount && !rootProps.pagination ? /*#__PURE__*/_jsx(GridRowCount, {
+  const rowCountElement = !rootProps.hideFooterRowCount && !rootProps.pagination ? /*#__PURE__*/_jsx(rootProps.slots.footerRowCount, _extends({}, rootProps.slotProps?.footerRowCount, {
     rowCount: totalTopLevelRowCount,
     visibleRowCount: visibleTopLevelRowCount
-  }) : null;
+  })) : null;
   const paginationElement = rootProps.pagination && !rootProps.hideFooterPagination && rootProps.slots.pagination && /*#__PURE__*/_jsx(rootProps.slots.pagination, _extends({}, rootProps.slotProps?.pagination));
   return /*#__PURE__*/_jsxs(GridFooterContainer, _extends({
     ref: ref

package/modern/components/base/GridOverlays.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { styled } from '@mui/system';
 import { unstable_composeClasses as composeClasses, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 import clsx from 'clsx';
@@ -14,8 +15,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const GridOverlayWrapperRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'OverlayWrapper',
+  shouldForwardProp: prop => prop !== 'overlayType',
   overridesResolver: (props, styles) => styles.overlayWrapper
-})({
+})(({
+  overlayType
+}) => ({
   position: 'sticky',
   // To stay in place while scrolling
   top: 0,
@@ -24,12 +28,14 @@ const GridOverlayWrapperRoot = styled('div', {
   // To stay above the content instead of shifting it down
   height: 0,
   // To stay above the content instead of shifting it down
-  zIndex: 4 // Should be above pinned columns, pinned rows and detail panel
-});
+  zIndex: overlayType === 'loadingOverlay' ? 5 // Should be above pinned columns, pinned rows, and detail panel
+  : 4 // Should be above pinned columns and detail panel
+}));
 
 const GridOverlayWrapperInner = styled('div', {
   name: 'MuiDataGrid',
   slot: 'OverlayWrapperInner',
+  shouldForwardProp: prop => prop !== 'overlayType',
   overridesResolver: (props, styles) => styles.overlayWrapperInner
 })({});
 const useUtilityClasses = ownerState => {
@@ -65,6 +71,7 @@ function GridOverlayWrapper(props) {
   }
   return /*#__PURE__*/_jsx(GridOverlayWrapperRoot, {
     className: clsx(classes.root),
+    overlayType: props.overlayType,
     children: /*#__PURE__*/_jsx(GridOverlayWrapperInner, _extends({
       className: clsx(classes.inner),
       style: {
@@ -74,6 +81,13 @@ function GridOverlayWrapper(props) {
     }, props))
   });
 }
+process.env.NODE_ENV !== "production" ? GridOverlayWrapper.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  overlayType: PropTypes.string.isRequired
+} : void 0;
 export function GridOverlays() {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
@@ -83,19 +97,24 @@ export function GridOverlays() {
   const showNoRowsOverlay = !loading && totalRowCount === 0;
   const showNoResultsOverlay = !loading && totalRowCount > 0 && visibleRowCount === 0;
   let overlay = null;
+  let overlayType = '';
   if (showNoRowsOverlay) {
     overlay = /*#__PURE__*/_jsx(rootProps.slots.noRowsOverlay, _extends({}, rootProps.slotProps?.noRowsOverlay));
+    overlayType = 'noRowsOverlay';
   }
   if (showNoResultsOverlay) {
     overlay = /*#__PURE__*/_jsx(rootProps.slots.noResultsOverlay, _extends({}, rootProps.slotProps?.noResultsOverlay));
+    overlayType = 'noResultsOverlay';
   }
   if (loading) {
     overlay = /*#__PURE__*/_jsx(rootProps.slots.loadingOverlay, _extends({}, rootProps.slotProps?.loadingOverlay));
+    overlayType = 'loadingOverlay';
   }
   if (overlay === null) {
     return null;
   }
   return /*#__PURE__*/_jsx(GridOverlayWrapper, {
+    overlayType: overlayType,
     children: overlay
   });
 }

package/modern/components/containers/GridRootStyles.js

@@ -348,7 +348,10 @@ export const GridRootStyles = styled('div', {
       '&.Mui-selected': {
         backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
         '&:hover, &.Mui-hovered': {
-          backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity + theme.palette.action.hoverOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+          backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(
+                ${theme.vars.palette.action.selectedOpacity} + 
+                ${theme.vars.palette.action.hoverOpacity}
+              ))` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
           // Reset on touch devices, it doesn't add specificity
           '@media (hover: none)': {
             backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)

package/modern/constants/defaultGridSlotsComponents.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { GridSkeletonCell, GridColumnsPanel, GridFilterPanel, GridFooter, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridPreferencesPanel, GridRow, GridColumnHeaderFilterIconButton } from '../components';
+import { GridSkeletonCell, GridColumnsPanel, GridFilterPanel, GridFooter, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridPreferencesPanel, GridRow, GridColumnHeaderFilterIconButton, GridRowCount } from '../components';
 import { GridCellV7 } from '../components/cell/GridCell';
 import { GridColumnHeaders } from '../components/GridColumnHeaders';
 import { GridColumnMenu } from '../components/menu/columnMenu/GridColumnMenu';
@@ -15,6 +15,7 @@ export const DATA_GRID_DEFAULT_SLOTS_COMPONENTS = _extends({}, materialSlots, {
   ColumnMenu: GridColumnMenu,
   ColumnHeaders: GridColumnHeaders,
   Footer: GridFooter,
+  FooterRowCount: GridRowCount,
   Toolbar: null,
   PreferencesPanel: GridPreferencesPanel,
   LoadingOverlay: GridLoadingOverlay,

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

@@ -255,7 +255,7 @@ export const createColumnsState = ({
 
     // If the column type has changed - merge the existing state with the default column type definition
     if (existingState && existingState.type !== newColumn.type) {
-      existingState = _extends({}, existingState, getDefaultColTypeDef(columnTypes, newColumn.type), {
+      existingState = _extends({}, getDefaultColTypeDef(columnTypes, newColumn.type), {
         field
       });
     }

package/modern/hooks/features/columns/useGridColumns.js

@@ -124,17 +124,23 @@ export function useGridColumns(apiRef, props) {
   }, [apiRef, logger, setGridColumnsState, getColumnIndexRelativeToVisibleColumns]);
   const setColumnWidth = React.useCallback((field, width) => {
     logger.debug(`Updating column ${field} width to ${width}`);
-    const column = apiRef.current.getColumn(field);
+    const columnsState = gridColumnsStateSelector(apiRef.current.state);
+    const column = columnsState.lookup[field];
     const newColumn = _extends({}, column, {
-      width
+      width,
+      hasBeenResized: true
     });
-    apiRef.current.updateColumns([newColumn]);
+    setGridColumnsState(hydrateColumnsWidth(_extends({}, columnsState, {
+      lookup: _extends({}, columnsState.lookup, {
+        [field]: newColumn
+      })
+    }), apiRef.current.getRootDimensions()?.viewportInnerSize.width ?? 0));
     apiRef.current.publishEvent('columnWidthChange', {
       element: apiRef.current.getColumnHeaderElement(field),
       colDef: newColumn,
       width
     });
-  }, [apiRef, logger]);
+  }, [apiRef, logger, setGridColumnsState]);
   const columnApi = {
     getColumn,
     getAllColumns,

package/modern/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js

@@ -126,7 +126,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     apiRef.current.setColumnGroupHeaderFocus(field, depth, event);
   }, [apiRef, logger]);
   const getRowIdFromIndex = React.useCallback(rowIndex => {
-    return currentPageRows?.[rowIndex].id;
+    return currentPageRows[rowIndex]?.id;
   }, [currentPageRows]);
   const handleColumnHeaderKeyDown = React.useCallback((params, event) => {
     const headerTitleNode = event.currentTarget.querySelector(`.${gridClasses.columnHeaderTitleContainerContent}`);
@@ -142,7 +142,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     }
     const viewportPageSize = apiRef.current.getViewportPageSize();
     const colIndexBefore = params.field ? apiRef.current.getColumnIndex(params.field) : 0;
-    const firstRowIndexInPage = 0;
+    const firstRowIndexInPage = currentPageRows.length > 0 ? 0 : null;
     const lastRowIndexInPage = currentPageRows.length - 1;
     const firstColIndex = 0;
     const lastColIndex = gridVisibleColumnDefinitionsSelector(apiRef).length - 1;

package/modern/hooks/features/rows/gridRowsUtils.js

@@ -277,5 +277,5 @@ export function calculatePinnedRowsHeight(apiRef) {
 }
 export function getMinimalContentHeight(apiRef, rowHeight) {
   const densityFactor = gridDensityFactorSelector(apiRef);
-  return 2 * Math.floor(rowHeight * densityFactor);
+  return `var(--DataGrid-overlayHeight, ${2 * Math.floor(rowHeight * densityFactor)}px)`;
 }

package/modern/hooks/features/rows/useGridRows.js

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { gridRowCountSelector, gridRowsLookupSelector, gridRowTreeSelector, gridRowGroupingNameSelector, gridRowTreeDepthsSelector, gridDataRowIdsSelector, gridRowsDataRowIdToIdLookupSelector, gridRowMaximumTreeDepthSelector } from './gridRowsSelector';
+import { useTimeout } from '../../utils/useTimeout';
 import { GridSignature, useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
 import { gridSortedRowIdsSelector } from '../sorting/gridSortingSelector';
@@ -38,7 +39,7 @@ export const useGridRows = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridRows');
   const currentPage = useGridVisibleRows(apiRef, props);
   const lastUpdateMs = React.useRef(Date.now());
-  const timeout = React.useRef(null);
+  const timeout = useTimeout();
   const getRow = React.useCallback(id => {
     const model = gridRowsLookupSelector(apiRef)[id];
     if (model) {
@@ -73,7 +74,6 @@ export const useGridRows = (apiRef, props) => {
     throttle
   }) => {
     const run = () => {
-      timeout.current = null;
       lastUpdateMs.current = Date.now();
       apiRef.current.setState(state => _extends({}, state, {
         rows: getRowsStateFromCache({
@@ -87,10 +87,7 @@ export const useGridRows = (apiRef, props) => {
       apiRef.current.publishEvent('rowsSet');
       apiRef.current.forceUpdate();
     };
-    if (timeout.current) {
-      clearTimeout(timeout.current);
-      timeout.current = null;
-    }
+    timeout.clear();
     apiRef.current.caches.rows = cache;
     if (!throttle) {
       run();
@@ -98,11 +95,11 @@ export const useGridRows = (apiRef, props) => {
     }
     const throttleRemainingTimeMs = props.throttleRowsMs - (Date.now() - lastUpdateMs.current);
     if (throttleRemainingTimeMs > 0) {
-      timeout.current = setTimeout(run, throttleRemainingTimeMs);
+      timeout.start(throttleRemainingTimeMs, run);
       return;
     }
     run();
-  }, [props.throttleRowsMs, props.rowCount, props.loading, apiRef]);
+  }, [props.throttleRowsMs, props.rowCount, props.loading, apiRef, timeout]);
 
   /**
    * API METHODS
@@ -391,17 +388,6 @@ export const useGridRows = (apiRef, props) => {
   useGridApiMethod(apiRef, rowApi, 'public');
   useGridApiMethod(apiRef, rowProApi, props.signature === GridSignature.DataGrid ? 'private' : 'public');
 
-  /**
-   * EFFECTS
-   */
-  React.useEffect(() => {
-    return () => {
-      if (timeout.current !== null) {
-        clearTimeout(timeout.current);
-      }
-    };
-  }, []);
-
   // The effect do not track any value defined synchronously during the 1st render by hooks called after `useGridRows`
   // As a consequence, the state generated by the 1st run of this useEffect will always be equal to the initialization one
   const isFirstRender = React.useRef(true);

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v6.12.0
+ * @mui/x-data-grid v6.13.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/internals/index.js

@@ -46,6 +46,7 @@ export { useGridEvents } from '../hooks/features/events/useGridEvents';
 export { useGridDimensions } from '../hooks/features/dimensions/useGridDimensions';
 export { useGridStatePersistence } from '../hooks/features/statePersistence/useGridStatePersistence';
 export { useGridVirtualScroller, getRenderableIndexes } from '../hooks/features/virtualization/useGridVirtualScroller';
+export { useTimeout } from '../hooks/utils/useTimeout';
 export { useGridVisibleRows, getVisibleRows } from '../hooks/utils/useGridVisibleRows';
 export { useGridInitializeState } from '../hooks/utils/useGridInitializeState';
 export { getColumnsToExport, defaultGetRowsToExport } from '../hooks/features/export/utils';

package/modern/locales/skSK.js

@@ -45,7 +45,7 @@ const skSKGrid = {
   columnsPanelHideAllButton: 'Skryť všetko',
   // Filter panel text
   filterPanelAddFilter: 'Pridať filter',
-  // filterPanelRemoveAll: 'Remove all',
+  filterPanelRemoveAll: 'Odstrániť všetky',
   filterPanelDeleteIconLabel: 'Odstrániť',
   filterPanelLogicOperator: 'Logický operátor',
   filterPanelOperator: 'Operátory',
@@ -68,34 +68,32 @@ const skSKGrid = {
   filterOperatorIsEmpty: 'je prázdny',
   filterOperatorIsNotEmpty: 'nie je prázdny',
   filterOperatorIsAnyOf: 'je jeden z',
-  // 'filterOperator=': '=',
-  // 'filterOperator!=': '!=',
-  // 'filterOperator>': '>',
-  // 'filterOperator>=': '>=',
-  // 'filterOperator<': '<',
-  // 'filterOperator<=': '<=',
-
+  'filterOperator=': '=',
+  'filterOperator!=': '!=',
+  'filterOperator>': '>',
+  'filterOperator>=': '>=',
+  'filterOperator<': '<',
+  'filterOperator<=': '<=',
   // Header filter operators text
-  // headerFilterOperatorContains: 'Contains',
-  // headerFilterOperatorEquals: 'Equals',
-  // headerFilterOperatorStartsWith: 'Starts with',
-  // headerFilterOperatorEndsWith: 'Ends with',
-  // headerFilterOperatorIs: 'Is',
-  // headerFilterOperatorNot: 'Is not',
-  // headerFilterOperatorAfter: 'Is after',
-  // headerFilterOperatorOnOrAfter: 'Is on or after',
-  // headerFilterOperatorBefore: 'Is before',
-  // headerFilterOperatorOnOrBefore: 'Is on or before',
-  // headerFilterOperatorIsEmpty: 'Is empty',
-  // headerFilterOperatorIsNotEmpty: 'Is not empty',
-  // headerFilterOperatorIsAnyOf: 'Is any of',
-  // 'headerFilterOperator=': 'Equals',
-  // 'headerFilterOperator!=': 'Not equals',
-  // 'headerFilterOperator>': 'Greater than',
-  // 'headerFilterOperator>=': 'Greater than or equal to',
-  // 'headerFilterOperator<': 'Less than',
-  // 'headerFilterOperator<=': 'Less than or equal to',
-
+  headerFilterOperatorContains: 'Obsahuje',
+  headerFilterOperatorEquals: 'Rovná sa',
+  headerFilterOperatorStartsWith: 'Začína s',
+  headerFilterOperatorEndsWith: 'Končí na',
+  headerFilterOperatorIs: 'Je',
+  headerFilterOperatorNot: 'Nie je',
+  headerFilterOperatorAfter: 'Je po',
+  headerFilterOperatorOnOrAfter: 'Je na alebo po',
+  headerFilterOperatorBefore: 'Je pred',
+  headerFilterOperatorOnOrBefore: 'Je na alebo skôr',
+  headerFilterOperatorIsEmpty: 'Je prázdny',
+  headerFilterOperatorIsNotEmpty: 'Nie je prázdny',
+  headerFilterOperatorIsAnyOf: 'Je jeden z',
+  'headerFilterOperator=': 'Rovná sa',
+  'headerFilterOperator!=': 'Nerovná sa',
+  'headerFilterOperator>': 'Väčší ako',
+  'headerFilterOperator>=': 'Väčší ako alebo rovný',
+  'headerFilterOperator<': 'Menší ako',
+  'headerFilterOperator<=': 'Menší ako alebo rovný',
   // Filter values text
   filterValueAny: 'akýkoľvek',
   filterValueTrue: 'áno',
@@ -103,7 +101,7 @@ const skSKGrid = {
   // Column menu text
   columnMenuLabel: 'Menu',
   columnMenuShowColumns: 'Zobraziť stĺpce',
-  // columnMenuManageColumns: 'Manage columns',
+  columnMenuManageColumns: 'Spravovať stĺpce',
   columnMenuFilter: 'Filter',
   columnMenuHideColumn: 'Skryť',
   columnMenuUnsort: 'Zrušiť filtre',

package/modern/utils/createSelector.js

@@ -3,7 +3,7 @@ import { buildWarning } from './warning';
 const cacheContainer = {
   cache: new WeakMap()
 };
-const missingInstanceIdWarning = buildWarning(['MUI: A selector was called without passing the instance ID, which may impact the performance of the grid.', 'To fix, call it with `apiRef`, e.g. `mySelector(apiRef)`, or pass the instance ID explicitly, e.g `mySelector(state, apiRef.current.instanceId)`.']);
+const missingInstanceIdWarning = buildWarning(['MUI: A selector was called without passing the instance ID, which may impact the performance of the grid.', 'To fix, call it with `apiRef`, e.g. `mySelector(apiRef)`, or pass the instance ID explicitly, e.g. `mySelector(state, apiRef.current.instanceId)`.']);
 function checkIsAPIRef(value) {
   return 'current' in value && 'instanceId' in value.current;
 }

package/node/components/GridFooter.js

@@ -13,7 +13,6 @@ var _gridRowsSelector = require("../hooks/features/rows/gridRowsSelector");
 var _gridRowSelectionSelector = require("../hooks/features/rowSelection/gridRowSelectionSelector");
 var _gridFilterSelector = require("../hooks/features/filter/gridFilterSelector");
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
-var _GridRowCount = require("./GridRowCount");
 var _GridSelectedRowCount = require("./GridSelectedRowCount");
 var _GridFooterContainer = require("./containers/GridFooterContainer");
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
@@ -29,10 +28,10 @@ const GridFooter = /*#__PURE__*/React.forwardRef(function GridFooter(props, ref)
   const selectedRowCountElement = !rootProps.hideFooterSelectedRowCount && selectedRowCount > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridSelectedRowCount.GridSelectedRowCount, {
     selectedRowCount: selectedRowCount
   }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {});
-  const rowCountElement = !rootProps.hideFooterRowCount && !rootProps.pagination ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridRowCount.GridRowCount, {
+  const rowCountElement = !rootProps.hideFooterRowCount && !rootProps.pagination ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.footerRowCount, (0, _extends2.default)({}, rootProps.slotProps?.footerRowCount, {
     rowCount: totalTopLevelRowCount,
     visibleRowCount: visibleTopLevelRowCount
-  }) : null;
+  })) : null;
   const paginationElement = rootProps.pagination && !rootProps.hideFooterPagination && rootProps.slots.pagination && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.pagination, (0, _extends2.default)({}, rootProps.slotProps?.pagination));
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridFooterContainer.GridFooterContainer, (0, _extends2.default)({
     ref: ref

package/node/components/base/GridOverlays.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridOverlays = GridOverlays;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _system = require("@mui/system");
 var _utils = require("@mui/utils");
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -23,8 +24,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 const GridOverlayWrapperRoot = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'OverlayWrapper',
+  shouldForwardProp: prop => prop !== 'overlayType',
   overridesResolver: (props, styles) => styles.overlayWrapper
-})({
+})(({
+  overlayType
+}) => ({
   position: 'sticky',
   // To stay in place while scrolling
   top: 0,
@@ -33,12 +37,14 @@ const GridOverlayWrapperRoot = (0, _system.styled)('div', {
   // To stay above the content instead of shifting it down
   height: 0,
   // To stay above the content instead of shifting it down
-  zIndex: 4 // Should be above pinned columns, pinned rows and detail panel
-});
+  zIndex: overlayType === 'loadingOverlay' ? 5 // Should be above pinned columns, pinned rows, and detail panel
+  : 4 // Should be above pinned columns and detail panel
+}));
 
 const GridOverlayWrapperInner = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'OverlayWrapperInner',
+  shouldForwardProp: prop => prop !== 'overlayType',
   overridesResolver: (props, styles) => styles.overlayWrapperInner
 })({});
 const useUtilityClasses = ownerState => {
@@ -74,6 +80,7 @@ function GridOverlayWrapper(props) {
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridOverlayWrapperRoot, {
     className: (0, _clsx.default)(classes.root),
+    overlayType: props.overlayType,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GridOverlayWrapperInner, (0, _extends2.default)({
       className: (0, _clsx.default)(classes.inner),
       style: {
@@ -83,6 +90,13 @@ function GridOverlayWrapper(props) {
     }, props))
   });
 }
+process.env.NODE_ENV !== "production" ? GridOverlayWrapper.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  overlayType: _propTypes.default.string.isRequired
+} : void 0;
 function GridOverlays() {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
@@ -92,19 +106,24 @@ function GridOverlays() {
   const showNoRowsOverlay = !loading && totalRowCount === 0;
   const showNoResultsOverlay = !loading && totalRowCount > 0 && visibleRowCount === 0;
   let overlay = null;
+  let overlayType = '';
   if (showNoRowsOverlay) {
     overlay = /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.noRowsOverlay, (0, _extends2.default)({}, rootProps.slotProps?.noRowsOverlay));
+    overlayType = 'noRowsOverlay';
   }
   if (showNoResultsOverlay) {
     overlay = /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.noResultsOverlay, (0, _extends2.default)({}, rootProps.slotProps?.noResultsOverlay));
+    overlayType = 'noResultsOverlay';
   }
   if (loading) {
     overlay = /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.loadingOverlay, (0, _extends2.default)({}, rootProps.slotProps?.loadingOverlay));
+    overlayType = 'loadingOverlay';
   }
   if (overlay === null) {
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridOverlayWrapper, {
+    overlayType: overlayType,
     children: overlay
   });
 }

package/node/components/containers/GridRootStyles.js

@@ -355,7 +355,10 @@ const GridRootStyles = (0, _styles.styled)('div', {
       '&.Mui-selected': {
         backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : (0, _styles.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity),
         '&:hover, &.Mui-hovered': {
-          backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity + theme.palette.action.hoverOpacity})` : (0, _styles.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+          backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(
+                ${theme.vars.palette.action.selectedOpacity} + 
+                ${theme.vars.palette.action.hoverOpacity}
+              ))` : (0, _styles.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
           // Reset on touch devices, it doesn't add specificity
           '@media (hover: none)': {
             backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : (0, _styles.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity)

package/node/constants/defaultGridSlotsComponents.js

@@ -21,6 +21,7 @@ const DATA_GRID_DEFAULT_SLOTS_COMPONENTS = (0, _extends2.default)({}, _material.
   ColumnMenu: _GridColumnMenu.GridColumnMenu,
   ColumnHeaders: _GridColumnHeaders.GridColumnHeaders,
   Footer: _components.GridFooter,
+  FooterRowCount: _components.GridRowCount,
   Toolbar: null,
   PreferencesPanel: _components.GridPreferencesPanel,
   LoadingOverlay: _components.GridLoadingOverlay,

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

@@ -271,7 +271,7 @@ const createColumnsState = ({
 
     // If the column type has changed - merge the existing state with the default column type definition
     if (existingState && existingState.type !== newColumn.type) {
-      existingState = (0, _extends2.default)({}, existingState, getDefaultColTypeDef(columnTypes, newColumn.type), {
+      existingState = (0, _extends2.default)({}, getDefaultColTypeDef(columnTypes, newColumn.type), {
         field
       });
     }

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

@@ -135,17 +135,23 @@ function useGridColumns(apiRef, props) {
   }, [apiRef, logger, setGridColumnsState, getColumnIndexRelativeToVisibleColumns]);
   const setColumnWidth = React.useCallback((field, width) => {
     logger.debug(`Updating column ${field} width to ${width}`);
-    const column = apiRef.current.getColumn(field);
+    const columnsState = (0, _gridColumnsSelector.gridColumnsStateSelector)(apiRef.current.state);
+    const column = columnsState.lookup[field];
     const newColumn = (0, _extends2.default)({}, column, {
-      width
+      width,
+      hasBeenResized: true
     });
-    apiRef.current.updateColumns([newColumn]);
+    setGridColumnsState((0, _gridColumnsUtils.hydrateColumnsWidth)((0, _extends2.default)({}, columnsState, {
+      lookup: (0, _extends2.default)({}, columnsState.lookup, {
+        [field]: newColumn
+      })
+    }), apiRef.current.getRootDimensions()?.viewportInnerSize.width ?? 0));
     apiRef.current.publishEvent('columnWidthChange', {
       element: apiRef.current.getColumnHeaderElement(field),
       colDef: newColumn,
       width
     });
-  }, [apiRef, logger]);
+  }, [apiRef, logger, setGridColumnsState]);
   const columnApi = {
     getColumn,
     getAllColumns,

package/node/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js

@@ -134,7 +134,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
     apiRef.current.setColumnGroupHeaderFocus(field, depth, event);
   }, [apiRef, logger]);
   const getRowIdFromIndex = React.useCallback(rowIndex => {
-    return currentPageRows?.[rowIndex].id;
+    return currentPageRows[rowIndex]?.id;
   }, [currentPageRows]);
   const handleColumnHeaderKeyDown = React.useCallback((params, event) => {
     const headerTitleNode = event.currentTarget.querySelector(`.${_gridClasses.gridClasses.columnHeaderTitleContainerContent}`);
@@ -150,7 +150,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
     }
     const viewportPageSize = apiRef.current.getViewportPageSize();
     const colIndexBefore = params.field ? apiRef.current.getColumnIndex(params.field) : 0;
-    const firstRowIndexInPage = 0;
+    const firstRowIndexInPage = currentPageRows.length > 0 ? 0 : null;
     const lastRowIndexInPage = currentPageRows.length - 1;
     const firstColIndex = 0;
     const lastColIndex = (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef).length - 1;

package/node/hooks/features/rows/gridRowsUtils.js

@@ -299,5 +299,5 @@ function calculatePinnedRowsHeight(apiRef) {
 }
 function getMinimalContentHeight(apiRef, rowHeight) {
   const densityFactor = (0, _densitySelector.gridDensityFactorSelector)(apiRef);
-  return 2 * Math.floor(rowHeight * densityFactor);
+  return `var(--DataGrid-overlayHeight, ${2 * Math.floor(rowHeight * densityFactor)}px)`;
 }