@mui/x-data-grid 6.12.0 → 6.13.0

package/CHANGELOG.md

@@ -3,6 +3,143 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.13.0
+
+_Sep 8, 2023_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Fix `anchorRef` behavior on range pickers (#10077) @LukasTy
+
+  The range picker popup will now be anchored to the first input element and left aligned like other pickers.
+- 🌍 Improve Slovak (sk-SK) locale on the data grid
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.13.0`
+
+- [DataGrid] Allow to override the default overlay height in `autoHeight` mode (#10203) @cherniavskii
+- [DataGrid] Allow to override the default row count component in footer (#10063) @hungmanhle
+- [DataGrid] Fix an error when hovering on a row, the background changed to white (#10214) @chucamphong
+- [DataGrid] Fix custom column docs, remove legacy `extendType` (#10175) @oliviertassinari
+- [DataGrid] Make the pinned rows be on top of the no rows overlay (#9986) @DanailH
+- [l10n] Improve Slovak (sk-SK) locale (#10182) @msidlo
+
+#### `@mui/x-data-grid-pro@6.13.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@6.13.0`, plus:
+
+- [DataGridPro] Fix column resize with pinned rows (#10229) @cherniavskii
+
+#### `@mui/x-data-grid-premium@6.13.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@6.13.0`, plus:
+
+- [DataGridPremium] Fix aggregated column resizing (#10079) @cherniavskii
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.13.0`
+
+- [pickers] Respect the adapter locale in `AdapterMoment.getWeekdays` (#10221) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@6.13.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@6.13.0`, plus:
+
+- [DateRangePicker] Fix `anchorRef` behavior (#10077) @LukasTy
+
+### Charts / `@mui/x-charts@6.0.0-alpha.10`
+
+- [charts] Remove require condition from package.json exports (#10272) @Janpot
+
+### Tree View / `@mui/x-tree-view@6.0.0-alpha.2`
+
+- [TreeView] Add missing export (#10245) @flaviendelangle
+
+### Docs
+
+- [docs] Add a `Getting Started` page for the Tree View (#10218) @flaviendelangle
+- [docs] Add pickers `Custom opening button` page (#10200) @flaviendelangle
+- [docs] Add pie chart demo with a center label (#10220) @giladappsforce
+- [docs] Do not document ignored components (#10258) @flaviendelangle
+- [docs] Fix charts demo using too deep import (#10263) @LukasTy
+- [docs] Fix `e.g.` typo @oliviertassinari
+- [docs] Fix npm package indentation @oliviertassinari
+- [docs] Fix typo in tree view docs @oliviertassinari
+- [docs] Improve the week picker example (#8257) @flaviendelangle
+- [docs] Include code links in the data grid demo (#10219) @cherniavskii
+- [docs] Polish page for SEO (#10216) @oliviertassinari
+- [docs] Use `Base UI` `Portal` for the quick filter recipe (#10188) @DanailH
+
+### Core
+
+- [core] Finish migration to GA4 @oliviertassinari
+- [core] Fix yarn docs:create-playground script @oliviertassinari
+- [core] Move @mui/base from peer dependency to dependency (#10215) @oliviertassinari
+- [core] Prevent `e.g.` typo (#10193) @oliviertassinari
+- [core] Remove unused `babel-plugin-tester` package (#10243) @LukasTy
+
+## 6.12.1
+
+_Aug 31, 2023_
+
+We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
+
+- 🏎️ Perf improvement for line charts
+- 🎁 Add `referenceDate` prop on pickers (#9991) @flaviendelangle
+  Find out more about this feature in the [documentation section](https://mui.com/x/react-date-pickers/base-concepts/#reference-date-when-no-value-is-defined).
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.12.1`
+
+- [DataGrid] Add a recipe showing how to render components outside of the grid (#10121) @DanailH
+- [DataGrid] Fix `valueFormatter` being persisted on column type change (#10041) @cherniavskii
+- [DataGrid] Fix error when keyboard navigating an empty grid (#10081) @romgrk
+- [DataGrid] Replace timeout with `useTimeout` (#10179) @romgrk
+
+#### `@mui/x-data-grid-pro@6.12.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@6.12.1`.
+
+#### `@mui/x-data-grid-premium@6.12.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@6.12.1`.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.12.1`
+
+- [pickers] Add `referenceDate` on picker components (and `DateRangeCalendar`) (#9991) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@6.12.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@6.12.1`.
+
+### Charts / `@mui/x-charts@6.0.0-alpha.9`
+
+- [charts] Move the line item highligh into a dedicated component (#10117) @alexfauquette
+
+### Docs
+
+- [docs] Add `DemoContainer` and `DemoItem` JSDoc (#10186) @LukasTy
+- [docs] Add link to `custom layout` page (#10184) @LukasTy
+- [docs] Add tree view nav item (#10181) @LukasTy
+- [docs] Fix wrong chart tooltip reference (#10169) @oliviertassinari
+- [docs] Improve chart SEO (#10170) @oliviertassinari
+- [docs] Precise expired license key condition (#10165) @oliviertassinari
+- [docs] Reorganize the page menu (#10139) @alexfauquette
+
+### Core
+
+- [core] Update babel configs (#9713) @romgrk
+- [test] Disable false positive e2e test on webkit (#10187) @LukasTy
+
 ## 6.12.0
 
 _Aug 25, 2023_
@@ -17,22 +154,22 @@ We'd like to offer a big thanks to the 10 contributors who made this release pos
 
 ### Data Grid
 
-#### `@mui/x-data-grid@v6.12.0`
+#### `@mui/x-data-grid@6.12.0`
 
 - [DataGrid] Allow print export for more than 100 rows (#10045) @MBilalShafi
 - [l10n] Improve Ukrainian (uk-UA) locale (#10076) @mkundos
 
-#### `@mui/x-data-grid-pro@v6.12.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+#### `@mui/x-data-grid-pro@6.12.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
 
-Same changes as in `@mui/x-data-grid@v6.12.0`.
+Same changes as in `@mui/x-data-grid@6.12.0`.
 
-#### `@mui/x-data-grid-premium@v6.12.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+#### `@mui/x-data-grid-premium@6.12.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
 
-Same changes as in `@mui/x-data-grid-pro@v6.12.0`.
+Same changes as in `@mui/x-data-grid-pro@6.12.0`.
 
 ### Date Pickers
 
-#### `@mui/x-date-pickers@v6.12.0`
+#### `@mui/x-date-pickers@6.12.0`
 
 - [fields] Do not clamp day of month (#9973) @flaviendelangle
 - [pickers] Fix `ownerState` on `desktopPaper` slot props (#10103) @LukasTy
@@ -42,11 +179,11 @@ Same changes as in `@mui/x-data-grid-pro@v6.12.0`.
 - [pickers] Make `openPickerButton` toggle picker (#10109) @noraleonte
 - [pickers] Update `reduceAnimations` default rule (#9864) @LukasTy
 
-#### `@mui/x-date-pickers-pro@v6.12.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+#### `@mui/x-date-pickers-pro@6.12.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
 
-Same changes as in `@mui/x-date-pickers@v6.12.0`.
+Same changes as in `@mui/x-date-pickers@6.12.0`.
 
-### Charts / `@mui/x-charts@6.12.0`
+### Charts / `@mui/x-charts@6.0.0-alpha.8`
 
 - [charts] Fix import issue (#10111) @alexfauquette
 - [charts] Fix `slotProps` propagation (#10105) @alexfauquette
@@ -83,7 +220,7 @@ We'd like to offer a big thanks to the 8 contributors who made this release poss
 
 ### Data Grid
 
-#### `@mui/x-data-grid@v6.11.2`
+#### `@mui/x-data-grid@6.11.2`
 
 - [DataGrid] Fix `eval` blocked by CSP (#9863) @romgrk
 - [DataGrid] Fix row id bug (#10051) @romgrk
@@ -93,26 +230,26 @@ We'd like to offer a big thanks to the 8 contributors who made this release poss
 - [l10n] Improve Chinese (zh-CN) and Chinese(traditional) (zh-TW) locales (#9999) @MyNameIsTakenOMG
 - [l10n] Improve Spanish (es-ES) locale (#10037) @Macampu420
 
-#### `@mui/x-data-grid-pro@v6.11.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+#### `@mui/x-data-grid-pro@6.11.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
 
-Same changes as in `@mui/x-data-grid@v6.11.2`.
+Same changes as in `@mui/x-data-grid@6.11.2`.
 
-#### `@mui/x-data-grid-premium@v6.11.2` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+#### `@mui/x-data-grid-premium@6.11.2` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
 
-Same changes as in `@mui/x-data-grid-pro@v6.11.2`.
+Same changes as in `@mui/x-data-grid-pro@6.11.2`.
 
 ### Date Pickers
 
-#### `@mui/x-date-pickers@v6.11.2`
+#### `@mui/x-date-pickers@6.11.2`
 
 - [pickers] Fix month switcher RTL (#10003) @alexfauquette
 - [pickers] Follow-up on using device motion reduction preference (#9858) @LukasTy
 - [pickers] Pass the shortcut information in the `onChange` context (#9985) @flaviendelangle
 - [pickers] Replace `Grid` toolbar component with a styled `div` (#10052) @LukasTy
 
-#### `@mui/x-date-pickers-pro@v6.11.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+#### `@mui/x-date-pickers-pro@6.11.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
 
-Same changes as in `@mui/x-date-pickers@v6.11.2`.
+Same changes as in `@mui/x-date-pickers@6.11.2`.
 
 ### Docs
 
@@ -167,7 +304,7 @@ Same changes as in `@mui/x-data-grid-pro@6.11.1`.
 
 Same changes as in `@mui/x-date-pickers@6.11.1`.
 
-### Charts / `@mui/x-charts@v6.0.0-alpha.7`
+### Charts / `@mui/x-charts@6.0.0-alpha.7`
 
 - [charts] Fix label and tick alignment (#9952) @LukasTy
 - [charts] Remove not functional component `styleOverrides` (#9996) @LukasTy
@@ -175,7 +312,7 @@ Same changes as in `@mui/x-date-pickers@6.11.1`.
 - [charts] Use `slot`/`slotProps` for customization (#9744) @alexfauquette
 - [charts] Extend cheerful fiesta palette (#9980) @noraleonte
 
-### Tree View / `@mui/x-tree-view@v6.0.0-alpha.1`
+### Tree View / `@mui/x-tree-view@6.0.0-alpha.1`
 
 - [TreeView] Add theme augmentation (#9967) @flaviendelangle
 
@@ -205,7 +342,7 @@ We'd like to offer a big thanks to the 12 contributors who made this release pos
 
 ### Data Grid
 
-#### `@mui/x-data-grid@v6.11.0`
+#### `@mui/x-data-grid@6.11.0`
 
 - [DataGrid] Add `ariaV7` experimental flag (#9496) @cherniavskii
 - [DataGrid] Fix cell size when column width is set to `undefined` (#9871) @gitstart
@@ -213,17 +350,17 @@ We'd like to offer a big thanks to the 12 contributors who made this release pos
 - [l10n] Improve Finnish (fi-FI) locale (#9848) @sambbaahh
 - [l10n] Improve Italian (it-IT) locale (#9627) @fabio-rizzello-omnia
 
-#### `@mui/x-data-grid-pro@v6.11.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+#### `@mui/x-data-grid-pro@6.11.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
 
-Same changes as in `@mui/x-data-grid@v6.11.0`.
+Same changes as in `@mui/x-data-grid@6.11.0`.
 
-#### `@mui/x-data-grid-premium@v6.11.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+#### `@mui/x-data-grid-premium@6.11.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
 
-Same changes as in `@mui/x-data-grid-pro@v6.11.0`.
+Same changes as in `@mui/x-data-grid-pro@6.11.0`.
 
 ### Date Pickers
 
-#### `@mui/x-date-pickers@v6.11.0`
+#### `@mui/x-date-pickers@6.11.0`
 
 - [fields] Correctly handle events with a complete value insertion (#9896) @LukasTy
 - [fields] Fix hours editing on dayjs with timezone and DST (#9901) @flaviendelangle
@@ -236,18 +373,18 @@ Same changes as in `@mui/x-data-grid-pro@v6.11.0`.
 - [pickers] Fix offset management on dayjs adapter (#9884) @flaviendelangle
 - [pickers] Use device motion reduction preference (#9823) @LukasTy
 
-#### `@mui/x-date-pickers-pro@v6.11.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+#### `@mui/x-date-pickers-pro@6.11.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
 
-Same changes as in `@mui/x-date-pickers@v6.11.0`.
+Same changes as in `@mui/x-date-pickers@6.11.0`.
 
-### Charts / `@mui/x-charts@v6.0.0-alpha.6`
+### Charts / `@mui/x-charts@6.0.0-alpha.6`
 
 - [charts] Add TS definition to the exported elements (#9885) @alexfauquette
 - [charts] Add sparkline (#9662) @alexfauquette
 - [charts] Fix missing configuration types (#9886) @alexfauquette
 - [charts] Introduce dataset to simplify plot of data from API (#9774) @alexfauquette
 
-### Tree View / `@mui/x-tree-view@v6.0.0-alpha.0`
+### Tree View / `@mui/x-tree-view@6.0.0-alpha.0`
 
 - [TreeView] Add missing exported types (#9862) @flaviendelangle
 - [TreeView] Add tree view to changelog generator script (#9903) @MBilalShafi
@@ -292,34 +429,34 @@ We'd like to offer a big thanks to the 13 contributors who made this release pos
 
 ### Data Grid
 
-#### `@mui/x-data-grid@v6.10.2`
+#### `@mui/x-data-grid@6.10.2`
 
 - [DataGrid] Fix quick filter & aggregation error (#9729) @romgrk
 - [DataGrid] Fix row click propagation causing error in nested grid (#9741) @cherniavskii
 - [DataGrid] Keep focused cell in the DOM (#7357) @yaredtsy
 - [l10n] Improve Finnish (fi-FI) locale (#9746) @sambbaahh
 
-#### `@mui/x-data-grid-pro@v6.10.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+#### `@mui/x-data-grid-pro@6.10.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
 
-Same changes as in `@mui/x-data-grid@v6.10.2`.
+Same changes as in `@mui/x-data-grid@6.10.2`.
 
-#### `@mui/x-data-grid-premium@v6.10.2` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+#### `@mui/x-data-grid-premium@6.10.2` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
 
-Same changes as in `@mui/x-data-grid-pro@v6.10.2`, plus:
+Same changes as in `@mui/x-data-grid-pro@6.10.2`, plus:
 
 - [DataGridPremium] Allow to customize grouping cell offset (#9417) @cherniavskii
 
 ### Date Pickers
 
-#### `@mui/x-date-pickers@v6.10.2`
+#### `@mui/x-date-pickers@6.10.2`
 
 - [pickers] Remove the `endOfDate` from `DigitalClock` timeOptions (#9800) @noraleonte
 
-#### `@mui/x-date-pickers-pro@v6.10.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+#### `@mui/x-date-pickers-pro@6.10.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
 
-Same changes as in `@mui/x-date-pickers@v6.10.2`.
+Same changes as in `@mui/x-date-pickers@6.10.2`.
 
-### Charts / `@mui/x-charts@v6.0.0-alpha.5`
+### Charts / `@mui/x-charts@6.0.0-alpha.5`
 
 - [charts] Improve JSDoc for axis-related props (#9779) @flaviendelangle
 - [charts] Improve performances of Scatter component (#9527) @flaviendelangle
@@ -357,7 +494,7 @@ We'd like to offer a big thanks to the 11 contributors who made this release pos
 
 ### Data Grid
 
-#### `@mui/x-data-grid@v6.10.1`
+#### `@mui/x-data-grid@6.10.1`
 
 - [DataGrid] Filtering performance: compile filter applier with `eval` (#9635) @romgrk
 - [DataGrid] Fix CSV export for values containing double quotes (#9667) @cherniavskii
@@ -367,29 +504,29 @@ We'd like to offer a big thanks to the 11 contributors who made this release pos
 - [DataGrid] Update focused cell on page change via keyboard (#9203) @m4theushw
 - [DataGrid] Wait for remote stylesheets to load before print (#9665) @cherniavskii
 
-#### `@mui/x-data-grid-pro@v6.10.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+#### `@mui/x-data-grid-pro@6.10.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
 
-Same changes as in `@mui/x-data-grid@v6.10.1`, plus:
+Same changes as in `@mui/x-data-grid@6.10.1`, plus:
 
 - [DataGridPro] Improve tree data performance (#9682) @cherniavskii
 - [DataGridPro] Prevent affecting cells from child DataGrid when resizing a column (#9670) @m4theushw
 
-#### `@mui/x-data-grid-premium@v6.10.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+#### `@mui/x-data-grid-premium@6.10.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
 
-Same changes as in `@mui/x-data-grid-pro@v6.10.1`.
+Same changes as in `@mui/x-data-grid-pro@6.10.1`.
 
 ### Date Pickers
 
-#### `@mui/x-date-pickers@v6.10.1`
+#### `@mui/x-date-pickers@6.10.1`
 
 - [fields] Fix `format` and `value` update order (#9715) @LukasTy
 - [pickers] Remove `require` usage in comment (#9675) @LukasTy
 
-#### `@mui/x-date-pickers-pro@v6.10.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+#### `@mui/x-date-pickers-pro@6.10.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
 
-Same changes as in `@mui/x-date-pickers@v6.10.1`.
+Same changes as in `@mui/x-date-pickers@6.10.1`.
 
-### Charts / `@mui/x-charts@v6.0.0-alpha.4`
+### Charts / `@mui/x-charts@6.0.0-alpha.4`
 
 - [charts] Fix blinking in responsive charts and extremums computation for line charts (#9734) @alexfauquette
 - [charts] Use ESM with imports (#9645) @alexfauquette

package/components/GridFooter.js

@@ -6,14 +6,13 @@ 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';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const GridFooter = /*#__PURE__*/React.forwardRef(function GridFooter(props, ref) {
-  var _rootProps$slotProps;
+  var _rootProps$slotProps, _rootProps$slotProps2;
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const totalTopLevelRowCount = useGridSelector(apiRef, gridTopLevelRowCountSelector);
@@ -22,11 +21,11 @@ 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 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.footerRowCount, {
     rowCount: totalTopLevelRowCount,
     visibleRowCount: visibleTopLevelRowCount
-  }) : null;
-  const paginationElement = rootProps.pagination && !rootProps.hideFooterPagination && rootProps.slots.pagination && /*#__PURE__*/_jsx(rootProps.slots.pagination, _extends({}, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.pagination));
+  })) : null;
+  const paginationElement = rootProps.pagination && !rootProps.hideFooterPagination && rootProps.slots.pagination && /*#__PURE__*/_jsx(rootProps.slots.pagination, _extends({}, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.pagination));
   return /*#__PURE__*/_jsxs(GridFooterContainer, _extends({
     ref: ref
   }, props, {

package/components/GridRowCount.d.ts

@@ -4,6 +4,9 @@ interface RowCountProps {
     rowCount: number;
     visibleRowCount: number;
 }
+export type GridRowCountProps = React.HTMLAttributes<HTMLDivElement> & RowCountProps & {
+    sx?: SxProps<Theme>;
+};
 declare const GridRowCount: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & RowCountProps & {
     sx?: SxProps<Theme> | undefined;
 } & React.RefAttributes<HTMLDivElement>>;

package/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 => {
@@ -70,6 +76,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: {
@@ -79,6 +86,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();
@@ -88,22 +102,27 @@ export function GridOverlays() {
   const showNoRowsOverlay = !loading && totalRowCount === 0;
   const showNoResultsOverlay = !loading && totalRowCount > 0 && visibleRowCount === 0;
   let overlay = null;
+  let overlayType = '';
   if (showNoRowsOverlay) {
     var _rootProps$slotProps;
     overlay = /*#__PURE__*/_jsx(rootProps.slots.noRowsOverlay, _extends({}, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.noRowsOverlay));
+    overlayType = 'noRowsOverlay';
   }
   if (showNoResultsOverlay) {
     var _rootProps$slotProps2;
     overlay = /*#__PURE__*/_jsx(rootProps.slots.noResultsOverlay, _extends({}, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.noResultsOverlay));
+    overlayType = 'noResultsOverlay';
   }
   if (loading) {
     var _rootProps$slotProps3;
     overlay = /*#__PURE__*/_jsx(rootProps.slots.loadingOverlay, _extends({}, (_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.loadingOverlay));
+    overlayType = 'loadingOverlay';
   }
   if (overlay === null) {
     return null;
   }
   return /*#__PURE__*/_jsx(GridOverlayWrapper, {
+    overlayType: overlayType,
     children: overlay
   });
 }

package/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/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/hooks/features/columns/gridColumnsUtils.js

@@ -256,7 +256,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/hooks/features/columns/useGridColumns.js

@@ -126,18 +126,25 @@ export function useGridColumns(apiRef, props) {
     apiRef.current.publishEvent('columnIndexChange', params);
   }, [apiRef, logger, setGridColumnsState, getColumnIndexRelativeToVisibleColumns]);
   const setColumnWidth = React.useCallback((field, width) => {
+    var _apiRef$current$getRo, _apiRef$current$getRo2;
     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$getRo = (_apiRef$current$getRo2 = apiRef.current.getRootDimensions()) == null ? void 0 : _apiRef$current$getRo2.viewportInnerSize.width) != null ? _apiRef$current$getRo : 0));
     apiRef.current.publishEvent('columnWidthChange', {
       element: apiRef.current.getColumnHeaderElement(field),
       colDef: newColumn,
       width
     });
-  }, [apiRef, logger]);
+  }, [apiRef, logger, setGridColumnsState]);
   const columnApi = {
     getColumn,
     getAllColumns,

package/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js

@@ -126,7 +126,8 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     apiRef.current.setColumnGroupHeaderFocus(field, depth, event);
   }, [apiRef, logger]);
   const getRowIdFromIndex = React.useCallback(rowIndex => {
-    return currentPageRows == null ? void 0 : currentPageRows[rowIndex].id;
+    var _currentPageRows$rowI;
+    return (_currentPageRows$rowI = currentPageRows[rowIndex]) == null ? void 0 : _currentPageRows$rowI.id;
   }, [currentPageRows]);
   const handleColumnHeaderKeyDown = React.useCallback((params, event) => {
     const headerTitleNode = event.currentTarget.querySelector(`.${gridClasses.columnHeaderTitleContainerContent}`);
@@ -142,7 +143,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/hooks/features/rows/gridRowsUtils.d.ts

@@ -35,4 +35,4 @@ export declare function calculatePinnedRowsHeight(apiRef: React.MutableRefObject
     top: number;
     bottom: number;
 };
-export declare function getMinimalContentHeight(apiRef: React.MutableRefObject<GridApiCommunity>, rowHeight: number): number;
+export declare function getMinimalContentHeight(apiRef: React.MutableRefObject<GridApiCommunity>, rowHeight: number): string;

package/hooks/features/rows/gridRowsUtils.js

@@ -279,5 +279,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)`;
 }