@mui/x-data-grid-pro 5.17.24 → 5.17.26

package/CHANGELOG.md

@@ -3,6 +3,48 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 5.17.26
+
+_Mar 3, 2023_
+
+We're happy to announce the [v6 stable](https://github.com/mui/mui-x/releases/tag/v6.0.0) is finally available! 🎉
+Support, new features, and non-critical bug fixes will only be shipped in v6.
+v5 is now officially in **long-term support**. This means it's the last v5 weekly release, and new versions will only be released for critical fixes; to provide security updates and support for regressions.
+
+We'd like to offer a big thanks to the 4 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Improve Czech, Arabic, and Spanish locales
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.17.26` / `@mui/x-data-grid-pro@v5.17.26` / `@mui/x-data-grid-premium@v5.17.26`
+
+#### Changes
+
+- [DataGrid] Register `getLocaleText` synchronously (#8073) @m4theushw
+- [l10n] Import Czech (cs-CZ) locale (#8114) @BlastyCZ
+- [l10n] Improve Arabic (ar-SD) locale for `DataGrid` (#8094) @atf98
+- [l10n] Improve Spanish (es-ES) locale (#8030) @RadamesRamirez0
+
+## 5.17.25
+
+_Feb 23, 2023_
+
+We'd like to offer a big thanks to the 2 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.17.25` / `@mui/x-data-grid-pro@v5.17.25` / `@mui/x-data-grid-premium@v5.17.25`
+
+#### Changes
+
+- [DataGrid] Fix `ownerState` being `undefined` in theme style overrides (#7757) @lolaignatova
+
+### `@mui/x-date-pickers@v5.0.20` / `@mui/x-date-pickers-pro@v5.0.20`
+
+#### Changes
+
+- [DateTimePicker] Ensure toolbar `viewType` is correctly updated (#7942) @LukasTy
+
 ## 5.17.24
 
 _Feb 16, 2023_

package/components/DataGridProColumnHeaders.js

@@ -104,11 +104,12 @@ export const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function D
     innerRef,
     minColumnIndex: leftPinnedColumns.length
   });
-  const ownerState = {
+
+  const ownerState = _extends({}, rootProps, {
     leftPinnedColumns,
-    rightPinnedColumns,
-    classes: rootProps.classes
-  };
+    rightPinnedColumns
+  });
+
   const classes = useUtilityClasses(ownerState);
   const leftRenderContext = renderContext && leftPinnedColumns.length ? _extends({}, renderContext, {
     firstColumnIndex: 0,
@@ -128,9 +129,9 @@ export const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function D
   }, getRootProps(other), {
     children: [leftRenderContext && /*#__PURE__*/_jsxs(GridColumnHeadersPinnedColumnHeaders, _extends({
       className: classes.leftPinnedColumns,
-      ownerState: {
+      ownerState: _extends({}, ownerState, {
         side: GridPinnedPosition.left
-      }
+      })
     }, pinnedColumnHeadersProps, {
       children: [getColumnGroupHeaders({
         renderContext: leftRenderContext,
@@ -156,9 +157,9 @@ export const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function D
         maxLastColumn: visibleColumnFields.length - rightPinnedColumns.length
       })]
     })), rightRenderContext && /*#__PURE__*/_jsxs(GridColumnHeadersPinnedColumnHeaders, _extends({
-      ownerState: {
+      ownerState: _extends({}, ownerState, {
         side: GridPinnedPosition.right
-      },
+      }),
       className: classes.rightPinnedColumns,
       style: {
         paddingRight: scrollbarSize

package/components/DataGridProVirtualScroller.js

@@ -111,6 +111,13 @@ const VirtualScrollerPinnedColumns = styled('div', {
     boxShadow: `-2px 0px 4px -2px ${boxShadowColor}`
   });
 });
+var PinnedRowsPosition;
+
+(function (PinnedRowsPosition) {
+  PinnedRowsPosition["top"] = "top";
+  PinnedRowsPosition["bottom"] = "bottom";
+})(PinnedRowsPosition || (PinnedRowsPosition = {}));
+
 const VirtualScrollerPinnedRows = styled('div', {
   name: 'MuiDataGrid',
   slot: 'PinnedRows',
@@ -131,10 +138,10 @@ const VirtualScrollerPinnedRows = styled('div', {
     backgroundColor: theme.palette.background.default
   }, theme.palette.mode === 'dark' && {
     backgroundImage: darkModeBackgroundImage
-  }, ownerState.position === 'top' && {
+  }, ownerState.position === PinnedRowsPosition.top && {
     top: 0,
     boxShadow: `0px 3px 4px -2px ${boxShadowColor}`
-  }, ownerState.position === 'bottom' && {
+  }, ownerState.position === PinnedRowsPosition.bottom && {
     boxShadow: `0px -3px 4px -2px ${boxShadowColor}`,
     bottom: 0
   });
@@ -194,13 +201,7 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
   const pinnedRows = useGridSelector(apiRef, gridPinnedRowsSelector);
   const topPinnedRowsData = React.useMemo(() => (pinnedRows == null ? void 0 : pinnedRows.top) || [], [pinnedRows == null ? void 0 : pinnedRows.top]);
   const bottomPinnedRowsData = React.useMemo(() => (pinnedRows == null ? void 0 : pinnedRows.bottom) || [], [pinnedRows == null ? void 0 : pinnedRows.bottom]);
-  const ownerState = {
-    classes: rootProps.classes,
-    leftPinnedColumns,
-    rightPinnedColumns,
-    topPinnedRowsCount: topPinnedRowsData.length,
-    bottomPinnedRowsCount: bottomPinnedRowsData.length
-  };
+  const ownerState = rootProps;
   const classes = useUtilityClasses(ownerState);
   const {
     renderContext,
@@ -301,9 +302,9 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
   return /*#__PURE__*/_jsxs(GridVirtualScroller, _extends({}, getRootProps(other), {
     children: [topPinnedRowsData.length > 0 ? /*#__PURE__*/_jsxs(VirtualScrollerPinnedRows, {
       className: classes.topPinnedRows,
-      ownerState: {
-        position: 'top'
-      },
+      ownerState: _extends({}, ownerState, {
+        position: PinnedRowsPosition.top
+      }),
       style: {
         width: contentProps.style.width,
         height: pinnedRowsHeight.top
@@ -311,9 +312,9 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
       role: "rowgroup",
       children: [leftRenderContext && /*#__PURE__*/_jsx(VirtualScrollerPinnedColumns, {
         className: classes.leftPinnedColumns,
-        ownerState: {
+        ownerState: _extends({}, ownerState, {
           side: GridPinnedPosition.left
-        },
+        }),
         children: getRows({
           renderContext: leftRenderContext,
           minFirstColumn: leftRenderContext.firstColumnIndex,
@@ -329,9 +330,9 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
         children: topPinnedRows
       }), rightRenderContext && /*#__PURE__*/_jsx(VirtualScrollerPinnedColumns, {
         className: classes.rightPinnedColumns,
-        ownerState: {
+        ownerState: _extends({}, ownerState, {
           side: GridPinnedPosition.right
-        },
+        }),
         children: getRows({
           renderContext: rightRenderContext,
           minFirstColumn: rightRenderContext.firstColumnIndex,
@@ -345,9 +346,9 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
       children: [leftRenderContext && /*#__PURE__*/_jsx(VirtualScrollerPinnedColumns, {
         ref: leftColumns,
         className: classes.leftPinnedColumns,
-        ownerState: {
+        ownerState: _extends({}, ownerState, {
           side: GridPinnedPosition.left
-        },
+        }),
         style: pinnedColumnsStyle,
         children: getRows({
           renderContext: leftRenderContext,
@@ -361,9 +362,9 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
         children: mainRows
       })), rightRenderContext && /*#__PURE__*/_jsx(VirtualScrollerPinnedColumns, {
         ref: rightColumns,
-        ownerState: {
+        ownerState: _extends({}, ownerState, {
           side: GridPinnedPosition.right
-        },
+        }),
         className: classes.rightPinnedColumns,
         style: pinnedColumnsStyle,
         children: getRows({
@@ -376,13 +377,14 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
         })
       }), detailPanels.length > 0 && /*#__PURE__*/_jsx(VirtualScrollerDetailPanels, {
         className: classes.detailPanels,
+        ownerState: ownerState,
         children: detailPanels
       })]
     })), bottomPinnedRowsData.length > 0 ? /*#__PURE__*/_jsxs(VirtualScrollerPinnedRows, {
       className: classes.bottomPinnedRows,
-      ownerState: {
-        position: 'bottom'
-      },
+      ownerState: _extends({}, ownerState, {
+        position: PinnedRowsPosition.bottom
+      }),
       style: {
         width: contentProps.style.width,
         height: pinnedRowsHeight.bottom
@@ -390,9 +392,9 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
       role: "rowgroup",
       children: [leftRenderContext && /*#__PURE__*/_jsx(VirtualScrollerPinnedColumns, {
         className: classes.leftPinnedColumns,
-        ownerState: {
+        ownerState: _extends({}, ownerState, {
           side: GridPinnedPosition.left
-        },
+        }),
         children: getRows({
           renderContext: leftRenderContext,
           minFirstColumn: leftRenderContext.firstColumnIndex,
@@ -409,9 +411,9 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
         children: bottomPinnedRows
       }), rightRenderContext && /*#__PURE__*/_jsx(VirtualScrollerPinnedColumns, {
         className: classes.rightPinnedColumns,
-        ownerState: {
+        ownerState: _extends({}, ownerState, {
           side: GridPinnedPosition.right
-        },
+        }),
         children: getRows({
           renderContext: rightRenderContext,
           minFirstColumn: rightRenderContext.firstColumnIndex,

package/components/GridDetailPanel.js

@@ -5,6 +5,7 @@ import * as React from 'react';
 import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 const DetailPanel = styled(Box, {
   name: 'MuiDataGrid',
@@ -30,6 +31,8 @@ const GridDetailPanel = props => {
 
   const apiRef = useGridApiContext();
   const ref = React.useRef();
+  const rootProps = useGridRootProps();
+  const ownerState = rootProps;
   React.useLayoutEffect(() => {
     if (height === 'auto' && ref.current && typeof ResizeObserver === 'undefined') {
       // Fallback for IE
@@ -58,6 +61,7 @@ const GridDetailPanel = props => {
 
   return /*#__PURE__*/_jsx(DetailPanel, _extends({
     ref: ref,
+    ownerState: ownerState,
     style: style
   }, other));
 };

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI X v5.17.24
+/** @license MUI X v5.17.26
  *
  * This source code is licensed under the commercial license found in the
  * LICENSE file in the root directory of this source tree.

package/legacy/components/DataGridProColumnHeaders.js

@@ -112,11 +112,11 @@ export var DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function Dat
       getColumnHeaders = _useGridColumnHeaders.getColumnHeaders,
       getColumnGroupHeaders = _useGridColumnHeaders.getColumnGroupHeaders;
 
-  var ownerState = {
+  var ownerState = _extends({}, rootProps, {
     leftPinnedColumns: leftPinnedColumns,
-    rightPinnedColumns: rightPinnedColumns,
-    classes: rootProps.classes
-  };
+    rightPinnedColumns: rightPinnedColumns
+  });
+
   var classes = useUtilityClasses(ownerState);
   var leftRenderContext = renderContext && leftPinnedColumns.length ? _extends({}, renderContext, {
     firstColumnIndex: 0,
@@ -136,9 +136,9 @@ export var DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function Dat
   }, getRootProps(other), {
     children: [leftRenderContext && /*#__PURE__*/_jsxs(GridColumnHeadersPinnedColumnHeaders, _extends({
       className: classes.leftPinnedColumns,
-      ownerState: {
+      ownerState: _extends({}, ownerState, {
         side: GridPinnedPosition.left
-      }
+      })
     }, pinnedColumnHeadersProps, {
       children: [getColumnGroupHeaders({
         renderContext: leftRenderContext,
@@ -164,9 +164,9 @@ export var DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function Dat
         maxLastColumn: visibleColumnFields.length - rightPinnedColumns.length
       })]
     })), rightRenderContext && /*#__PURE__*/_jsxs(GridColumnHeadersPinnedColumnHeaders, _extends({
-      ownerState: {
+      ownerState: _extends({}, ownerState, {
         side: GridPinnedPosition.right
-      },
+      }),
       className: classes.rightPinnedColumns,
       style: {
         paddingRight: scrollbarSize

package/legacy/components/DataGridProVirtualScroller.js

@@ -115,6 +115,13 @@ var VirtualScrollerPinnedColumns = styled('div', {
     boxShadow: "-2px 0px 4px -2px ".concat(boxShadowColor)
   });
 });
+var PinnedRowsPosition;
+
+(function (PinnedRowsPosition) {
+  PinnedRowsPosition["top"] = "top";
+  PinnedRowsPosition["bottom"] = "bottom";
+})(PinnedRowsPosition || (PinnedRowsPosition = {}));
+
 var VirtualScrollerPinnedRows = styled('div', {
   name: 'MuiDataGrid',
   slot: 'PinnedRows',
@@ -132,10 +139,10 @@ var VirtualScrollerPinnedRows = styled('div', {
     backgroundColor: theme.palette.background.default
   }, theme.palette.mode === 'dark' && {
     backgroundImage: darkModeBackgroundImage
-  }, ownerState.position === 'top' && {
+  }, ownerState.position === PinnedRowsPosition.top && {
     top: 0,
     boxShadow: "0px 3px 4px -2px ".concat(boxShadowColor)
-  }, ownerState.position === 'bottom' && {
+  }, ownerState.position === PinnedRowsPosition.bottom && {
     boxShadow: "0px -3px 4px -2px ".concat(boxShadowColor),
     bottom: 0
   });
@@ -206,13 +213,7 @@ var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGrid
   var bottomPinnedRowsData = React.useMemo(function () {
     return (pinnedRows == null ? void 0 : pinnedRows.bottom) || [];
   }, [pinnedRows == null ? void 0 : pinnedRows.bottom]);
-  var ownerState = {
-    classes: rootProps.classes,
-    leftPinnedColumns: leftPinnedColumns,
-    rightPinnedColumns: rightPinnedColumns,
-    topPinnedRowsCount: topPinnedRowsData.length,
-    bottomPinnedRowsCount: bottomPinnedRowsData.length
-  };
+  var ownerState = rootProps;
   var classes = useUtilityClasses(ownerState);
 
   var _useGridVirtualScroll = useGridVirtualScroller(_extends({
@@ -314,9 +315,9 @@ var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGrid
   return /*#__PURE__*/_jsxs(GridVirtualScroller, _extends({}, getRootProps(other), {
     children: [topPinnedRowsData.length > 0 ? /*#__PURE__*/_jsxs(VirtualScrollerPinnedRows, {
       className: classes.topPinnedRows,
-      ownerState: {
-        position: 'top'
-      },
+      ownerState: _extends({}, ownerState, {
+        position: PinnedRowsPosition.top
+      }),
       style: {
         width: contentProps.style.width,
         height: pinnedRowsHeight.top
@@ -324,9 +325,9 @@ var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGrid
       role: "rowgroup",
       children: [leftRenderContext && /*#__PURE__*/_jsx(VirtualScrollerPinnedColumns, {
         className: classes.leftPinnedColumns,
-        ownerState: {
+        ownerState: _extends({}, ownerState, {
           side: GridPinnedPosition.left
-        },
+        }),
         children: getRows({
           renderContext: leftRenderContext,
           minFirstColumn: leftRenderContext.firstColumnIndex,
@@ -342,9 +343,9 @@ var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGrid
         children: topPinnedRows
       }), rightRenderContext && /*#__PURE__*/_jsx(VirtualScrollerPinnedColumns, {
         className: classes.rightPinnedColumns,
-        ownerState: {
+        ownerState: _extends({}, ownerState, {
           side: GridPinnedPosition.right
-        },
+        }),
         children: getRows({
           renderContext: rightRenderContext,
           minFirstColumn: rightRenderContext.firstColumnIndex,
@@ -358,9 +359,9 @@ var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGrid
       children: [leftRenderContext && /*#__PURE__*/_jsx(VirtualScrollerPinnedColumns, {
         ref: leftColumns,
         className: classes.leftPinnedColumns,
-        ownerState: {
+        ownerState: _extends({}, ownerState, {
           side: GridPinnedPosition.left
-        },
+        }),
         style: pinnedColumnsStyle,
         children: getRows({
           renderContext: leftRenderContext,
@@ -374,9 +375,9 @@ var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGrid
         children: mainRows
       })), rightRenderContext && /*#__PURE__*/_jsx(VirtualScrollerPinnedColumns, {
         ref: rightColumns,
-        ownerState: {
+        ownerState: _extends({}, ownerState, {
           side: GridPinnedPosition.right
-        },
+        }),
         className: classes.rightPinnedColumns,
         style: pinnedColumnsStyle,
         children: getRows({
@@ -389,13 +390,14 @@ var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGrid
         })
       }), detailPanels.length > 0 && /*#__PURE__*/_jsx(VirtualScrollerDetailPanels, {
         className: classes.detailPanels,
+        ownerState: ownerState,
         children: detailPanels
       })]
     })), bottomPinnedRowsData.length > 0 ? /*#__PURE__*/_jsxs(VirtualScrollerPinnedRows, {
       className: classes.bottomPinnedRows,
-      ownerState: {
-        position: 'bottom'
-      },
+      ownerState: _extends({}, ownerState, {
+        position: PinnedRowsPosition.bottom
+      }),
       style: {
         width: contentProps.style.width,
         height: pinnedRowsHeight.bottom
@@ -403,9 +405,9 @@ var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGrid
       role: "rowgroup",
       children: [leftRenderContext && /*#__PURE__*/_jsx(VirtualScrollerPinnedColumns, {
         className: classes.leftPinnedColumns,
-        ownerState: {
+        ownerState: _extends({}, ownerState, {
           side: GridPinnedPosition.left
-        },
+        }),
         children: getRows({
           renderContext: leftRenderContext,
           minFirstColumn: leftRenderContext.firstColumnIndex,
@@ -422,9 +424,9 @@ var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGrid
         children: bottomPinnedRows
       }), rightRenderContext && /*#__PURE__*/_jsx(VirtualScrollerPinnedColumns, {
         className: classes.rightPinnedColumns,
-        ownerState: {
+        ownerState: _extends({}, ownerState, {
           side: GridPinnedPosition.right
-        },
+        }),
         children: getRows({
           renderContext: rightRenderContext,
           minFirstColumn: rightRenderContext.firstColumnIndex,

package/legacy/components/GridDetailPanel.js

@@ -6,6 +6,7 @@ import * as React from 'react';
 import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 var DetailPanel = styled(Box, {
   name: 'MuiDataGrid',
@@ -33,6 +34,8 @@ var GridDetailPanel = function GridDetailPanel(props) {
 
   var apiRef = useGridApiContext();
   var ref = React.useRef();
+  var rootProps = useGridRootProps();
+  var ownerState = rootProps;
   React.useLayoutEffect(function () {
     if (height === 'auto' && ref.current && typeof ResizeObserver === 'undefined') {
       // Fallback for IE
@@ -65,6 +68,7 @@ var GridDetailPanel = function GridDetailPanel(props) {
 
   return /*#__PURE__*/_jsx(DetailPanel, _extends({
     ref: ref,
+    ownerState: ownerState,
     style: style
   }, other));
 };

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI X v5.17.24
+/** @license MUI X v5.17.26
  *
  * This source code is licensed under the commercial license found in the
  * LICENSE file in the root directory of this source tree.

package/legacy/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export var getReleaseInfo = function getReleaseInfo() {
-  var releaseInfo = "MTY3NjQ5ODQwMDAwMA==";
+  var releaseInfo = "MTY3Nzc5ODAwMDAwMA==";
 
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).

package/modern/components/DataGridProColumnHeaders.js

@@ -104,11 +104,12 @@ export const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function D
     innerRef,
     minColumnIndex: leftPinnedColumns.length
   });
-  const ownerState = {
+
+  const ownerState = _extends({}, rootProps, {
     leftPinnedColumns,
-    rightPinnedColumns,
-    classes: rootProps.classes
-  };
+    rightPinnedColumns
+  });
+
   const classes = useUtilityClasses(ownerState);
   const leftRenderContext = renderContext && leftPinnedColumns.length ? _extends({}, renderContext, {
     firstColumnIndex: 0,
@@ -128,9 +129,9 @@ export const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function D
   }, getRootProps(other), {
     children: [leftRenderContext && /*#__PURE__*/_jsxs(GridColumnHeadersPinnedColumnHeaders, _extends({
       className: classes.leftPinnedColumns,
-      ownerState: {
+      ownerState: _extends({}, ownerState, {
         side: GridPinnedPosition.left
-      }
+      })
     }, pinnedColumnHeadersProps, {
       children: [getColumnGroupHeaders({
         renderContext: leftRenderContext,
@@ -156,9 +157,9 @@ export const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function D
         maxLastColumn: visibleColumnFields.length - rightPinnedColumns.length
       })]
     })), rightRenderContext && /*#__PURE__*/_jsxs(GridColumnHeadersPinnedColumnHeaders, _extends({
-      ownerState: {
+      ownerState: _extends({}, ownerState, {
         side: GridPinnedPosition.right
-      },
+      }),
       className: classes.rightPinnedColumns,
       style: {
         paddingRight: scrollbarSize

package/modern/components/DataGridProVirtualScroller.js

@@ -109,6 +109,13 @@ const VirtualScrollerPinnedColumns = styled('div', {
     boxShadow: `-2px 0px 4px -2px ${boxShadowColor}`
   });
 });
+var PinnedRowsPosition;
+
+(function (PinnedRowsPosition) {
+  PinnedRowsPosition["top"] = "top";
+  PinnedRowsPosition["bottom"] = "bottom";
+})(PinnedRowsPosition || (PinnedRowsPosition = {}));
+
 const VirtualScrollerPinnedRows = styled('div', {
   name: 'MuiDataGrid',
   slot: 'PinnedRows',
@@ -129,10 +136,10 @@ const VirtualScrollerPinnedRows = styled('div', {
     backgroundColor: theme.palette.background.default
   }, theme.palette.mode === 'dark' && {
     backgroundImage: darkModeBackgroundImage
-  }, ownerState.position === 'top' && {
+  }, ownerState.position === PinnedRowsPosition.top && {
     top: 0,
     boxShadow: `0px 3px 4px -2px ${boxShadowColor}`
-  }, ownerState.position === 'bottom' && {
+  }, ownerState.position === PinnedRowsPosition.bottom && {
     boxShadow: `0px -3px 4px -2px ${boxShadowColor}`,
     bottom: 0
   });
@@ -192,13 +199,7 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
   const pinnedRows = useGridSelector(apiRef, gridPinnedRowsSelector);
   const topPinnedRowsData = React.useMemo(() => pinnedRows?.top || [], [pinnedRows?.top]);
   const bottomPinnedRowsData = React.useMemo(() => pinnedRows?.bottom || [], [pinnedRows?.bottom]);
-  const ownerState = {
-    classes: rootProps.classes,
-    leftPinnedColumns,
-    rightPinnedColumns,
-    topPinnedRowsCount: topPinnedRowsData.length,
-    bottomPinnedRowsCount: bottomPinnedRowsData.length
-  };
+  const ownerState = rootProps;
   const classes = useUtilityClasses(ownerState);
   const {
     renderContext,
@@ -299,9 +300,9 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
   return /*#__PURE__*/_jsxs(GridVirtualScroller, _extends({}, getRootProps(other), {
     children: [topPinnedRowsData.length > 0 ? /*#__PURE__*/_jsxs(VirtualScrollerPinnedRows, {
       className: classes.topPinnedRows,
-      ownerState: {
-        position: 'top'
-      },
+      ownerState: _extends({}, ownerState, {
+        position: PinnedRowsPosition.top
+      }),
       style: {
         width: contentProps.style.width,
         height: pinnedRowsHeight.top
@@ -309,9 +310,9 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
       role: "rowgroup",
       children: [leftRenderContext && /*#__PURE__*/_jsx(VirtualScrollerPinnedColumns, {
         className: classes.leftPinnedColumns,
-        ownerState: {
+        ownerState: _extends({}, ownerState, {
           side: GridPinnedPosition.left
-        },
+        }),
         children: getRows({
           renderContext: leftRenderContext,
           minFirstColumn: leftRenderContext.firstColumnIndex,
@@ -327,9 +328,9 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
         children: topPinnedRows
       }), rightRenderContext && /*#__PURE__*/_jsx(VirtualScrollerPinnedColumns, {
         className: classes.rightPinnedColumns,
-        ownerState: {
+        ownerState: _extends({}, ownerState, {
           side: GridPinnedPosition.right
-        },
+        }),
         children: getRows({
           renderContext: rightRenderContext,
           minFirstColumn: rightRenderContext.firstColumnIndex,
@@ -343,9 +344,9 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
       children: [leftRenderContext && /*#__PURE__*/_jsx(VirtualScrollerPinnedColumns, {
         ref: leftColumns,
         className: classes.leftPinnedColumns,
-        ownerState: {
+        ownerState: _extends({}, ownerState, {
           side: GridPinnedPosition.left
-        },
+        }),
         style: pinnedColumnsStyle,
         children: getRows({
           renderContext: leftRenderContext,
@@ -359,9 +360,9 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
         children: mainRows
       })), rightRenderContext && /*#__PURE__*/_jsx(VirtualScrollerPinnedColumns, {
         ref: rightColumns,
-        ownerState: {
+        ownerState: _extends({}, ownerState, {
           side: GridPinnedPosition.right
-        },
+        }),
         className: classes.rightPinnedColumns,
         style: pinnedColumnsStyle,
         children: getRows({
@@ -374,13 +375,14 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
         })
       }), detailPanels.length > 0 && /*#__PURE__*/_jsx(VirtualScrollerDetailPanels, {
         className: classes.detailPanels,
+        ownerState: ownerState,
         children: detailPanels
       })]
     })), bottomPinnedRowsData.length > 0 ? /*#__PURE__*/_jsxs(VirtualScrollerPinnedRows, {
       className: classes.bottomPinnedRows,
-      ownerState: {
-        position: 'bottom'
-      },
+      ownerState: _extends({}, ownerState, {
+        position: PinnedRowsPosition.bottom
+      }),
       style: {
         width: contentProps.style.width,
         height: pinnedRowsHeight.bottom
@@ -388,9 +390,9 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
       role: "rowgroup",
       children: [leftRenderContext && /*#__PURE__*/_jsx(VirtualScrollerPinnedColumns, {
         className: classes.leftPinnedColumns,
-        ownerState: {
+        ownerState: _extends({}, ownerState, {
           side: GridPinnedPosition.left
-        },
+        }),
         children: getRows({
           renderContext: leftRenderContext,
           minFirstColumn: leftRenderContext.firstColumnIndex,
@@ -407,9 +409,9 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
         children: bottomPinnedRows
       }), rightRenderContext && /*#__PURE__*/_jsx(VirtualScrollerPinnedColumns, {
         className: classes.rightPinnedColumns,
-        ownerState: {
+        ownerState: _extends({}, ownerState, {
           side: GridPinnedPosition.right
-        },
+        }),
         children: getRows({
           renderContext: rightRenderContext,
           minFirstColumn: rightRenderContext.firstColumnIndex,

package/modern/components/GridDetailPanel.js

@@ -5,6 +5,7 @@ import * as React from 'react';
 import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 const DetailPanel = styled(Box, {
   name: 'MuiDataGrid',
@@ -30,6 +31,8 @@ const GridDetailPanel = props => {
 
   const apiRef = useGridApiContext();
   const ref = React.useRef();
+  const rootProps = useGridRootProps();
+  const ownerState = rootProps;
   React.useLayoutEffect(() => {
     if (height === 'auto' && ref.current && typeof ResizeObserver === 'undefined') {
       // Fallback for IE
@@ -58,6 +61,7 @@ const GridDetailPanel = props => {
 
   return /*#__PURE__*/_jsx(DetailPanel, _extends({
     ref: ref,
+    ownerState: ownerState,
     style: style
   }, other));
 };

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI X v5.17.24
+/** @license MUI X v5.17.26
  *
  * This source code is licensed under the commercial license found in the
  * LICENSE file in the root directory of this source tree.

package/modern/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTY3NjQ5ODQwMDAwMA==";
+  const releaseInfo = "MTY3Nzc5ODAwMDAwMA==";
 
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).

package/node/components/DataGridProColumnHeaders.js

@@ -129,11 +129,10 @@ const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function DataGrid
     innerRef,
     minColumnIndex: leftPinnedColumns.length
   });
-  const ownerState = {
+  const ownerState = (0, _extends2.default)({}, rootProps, {
     leftPinnedColumns,
-    rightPinnedColumns,
-    classes: rootProps.classes
-  };
+    rightPinnedColumns
+  });
   const classes = useUtilityClasses(ownerState);
   const leftRenderContext = renderContext && leftPinnedColumns.length ? (0, _extends2.default)({}, renderContext, {
     firstColumnIndex: 0,
@@ -153,9 +152,9 @@ const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function DataGrid
   }, getRootProps(other), {
     children: [leftRenderContext && /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridColumnHeadersPinnedColumnHeaders, (0, _extends2.default)({
       className: classes.leftPinnedColumns,
-      ownerState: {
+      ownerState: (0, _extends2.default)({}, ownerState, {
         side: _columnPinning.GridPinnedPosition.left
-      }
+      })
     }, pinnedColumnHeadersProps, {
       children: [getColumnGroupHeaders({
         renderContext: leftRenderContext,
@@ -181,9 +180,9 @@ const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function DataGrid
         maxLastColumn: visibleColumnFields.length - rightPinnedColumns.length
       })]
     })), rightRenderContext && /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridColumnHeadersPinnedColumnHeaders, (0, _extends2.default)({
-      ownerState: {
+      ownerState: (0, _extends2.default)({}, ownerState, {
         side: _columnPinning.GridPinnedPosition.right
-      },
+      }),
       className: classes.rightPinnedColumns,
       style: {
         paddingRight: scrollbarSize

package/node/components/DataGridProVirtualScroller.js

@@ -140,6 +140,13 @@ const VirtualScrollerPinnedColumns = (0, _styles.styled)('div', {
     boxShadow: `-2px 0px 4px -2px ${boxShadowColor}`
   });
 });
+var PinnedRowsPosition;
+
+(function (PinnedRowsPosition) {
+  PinnedRowsPosition["top"] = "top";
+  PinnedRowsPosition["bottom"] = "bottom";
+})(PinnedRowsPosition || (PinnedRowsPosition = {}));
+
 const VirtualScrollerPinnedRows = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'PinnedRows',
@@ -160,10 +167,10 @@ const VirtualScrollerPinnedRows = (0, _styles.styled)('div', {
     backgroundColor: theme.palette.background.default
   }, theme.palette.mode === 'dark' && {
     backgroundImage: darkModeBackgroundImage
-  }, ownerState.position === 'top' && {
+  }, ownerState.position === PinnedRowsPosition.top && {
     top: 0,
     boxShadow: `0px 3px 4px -2px ${boxShadowColor}`
-  }, ownerState.position === 'bottom' && {
+  }, ownerState.position === PinnedRowsPosition.bottom && {
     boxShadow: `0px -3px 4px -2px ${boxShadowColor}`,
     bottom: 0
   });
@@ -222,13 +229,7 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
   const pinnedRows = (0, _xDataGrid.useGridSelector)(apiRef, _gridRowPinningSelector.gridPinnedRowsSelector);
   const topPinnedRowsData = React.useMemo(() => (pinnedRows == null ? void 0 : pinnedRows.top) || [], [pinnedRows == null ? void 0 : pinnedRows.top]);
   const bottomPinnedRowsData = React.useMemo(() => (pinnedRows == null ? void 0 : pinnedRows.bottom) || [], [pinnedRows == null ? void 0 : pinnedRows.bottom]);
-  const ownerState = {
-    classes: rootProps.classes,
-    leftPinnedColumns,
-    rightPinnedColumns,
-    topPinnedRowsCount: topPinnedRowsData.length,
-    bottomPinnedRowsCount: bottomPinnedRowsData.length
-  };
+  const ownerState = rootProps;
   const classes = useUtilityClasses(ownerState);
   const {
     renderContext,
@@ -329,9 +330,9 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.GridVirtualScroller, (0, _extends2.default)({}, getRootProps(other), {
     children: [topPinnedRowsData.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(VirtualScrollerPinnedRows, {
       className: classes.topPinnedRows,
-      ownerState: {
-        position: 'top'
-      },
+      ownerState: (0, _extends2.default)({}, ownerState, {
+        position: PinnedRowsPosition.top
+      }),
       style: {
         width: contentProps.style.width,
         height: pinnedRowsHeight.top
@@ -339,9 +340,9 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
       role: "rowgroup",
       children: [leftRenderContext && /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerPinnedColumns, {
         className: classes.leftPinnedColumns,
-        ownerState: {
+        ownerState: (0, _extends2.default)({}, ownerState, {
           side: _columnPinning.GridPinnedPosition.left
-        },
+        }),
         children: getRows({
           renderContext: leftRenderContext,
           minFirstColumn: leftRenderContext.firstColumnIndex,
@@ -357,9 +358,9 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
         children: topPinnedRows
       }), rightRenderContext && /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerPinnedColumns, {
         className: classes.rightPinnedColumns,
-        ownerState: {
+        ownerState: (0, _extends2.default)({}, ownerState, {
           side: _columnPinning.GridPinnedPosition.right
-        },
+        }),
         children: getRows({
           renderContext: rightRenderContext,
           minFirstColumn: rightRenderContext.firstColumnIndex,
@@ -373,9 +374,9 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
       children: [leftRenderContext && /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerPinnedColumns, {
         ref: leftColumns,
         className: classes.leftPinnedColumns,
-        ownerState: {
+        ownerState: (0, _extends2.default)({}, ownerState, {
           side: _columnPinning.GridPinnedPosition.left
-        },
+        }),
         style: pinnedColumnsStyle,
         children: getRows({
           renderContext: leftRenderContext,
@@ -389,9 +390,9 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
         children: mainRows
       })), rightRenderContext && /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerPinnedColumns, {
         ref: rightColumns,
-        ownerState: {
+        ownerState: (0, _extends2.default)({}, ownerState, {
           side: _columnPinning.GridPinnedPosition.right
-        },
+        }),
         className: classes.rightPinnedColumns,
         style: pinnedColumnsStyle,
         children: getRows({
@@ -404,13 +405,14 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
         })
       }), detailPanels.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerDetailPanels, {
         className: classes.detailPanels,
+        ownerState: ownerState,
         children: detailPanels
       })]
     })), bottomPinnedRowsData.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(VirtualScrollerPinnedRows, {
       className: classes.bottomPinnedRows,
-      ownerState: {
-        position: 'bottom'
-      },
+      ownerState: (0, _extends2.default)({}, ownerState, {
+        position: PinnedRowsPosition.bottom
+      }),
       style: {
         width: contentProps.style.width,
         height: pinnedRowsHeight.bottom
@@ -418,9 +420,9 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
       role: "rowgroup",
       children: [leftRenderContext && /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerPinnedColumns, {
         className: classes.leftPinnedColumns,
-        ownerState: {
+        ownerState: (0, _extends2.default)({}, ownerState, {
           side: _columnPinning.GridPinnedPosition.left
-        },
+        }),
         children: getRows({
           renderContext: leftRenderContext,
           minFirstColumn: leftRenderContext.firstColumnIndex,
@@ -437,9 +439,9 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
         children: bottomPinnedRows
       }), rightRenderContext && /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerPinnedColumns, {
         className: classes.rightPinnedColumns,
-        ownerState: {
+        ownerState: (0, _extends2.default)({}, ownerState, {
           side: _columnPinning.GridPinnedPosition.right
-        },
+        }),
         children: getRows({
           renderContext: rightRenderContext,
           minFirstColumn: rightRenderContext.firstColumnIndex,

package/node/components/GridDetailPanel.js

@@ -19,6 +19,8 @@ var _styles = require("@mui/material/styles");
 
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 
+var _useGridRootProps = require("../hooks/utils/useGridRootProps");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["rowId", "height", "style"];
@@ -50,6 +52,8 @@ const GridDetailPanel = props => {
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const ref = React.useRef();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const ownerState = rootProps;
   React.useLayoutEffect(() => {
     if (height === 'auto' && ref.current && typeof ResizeObserver === 'undefined') {
       // Fallback for IE
@@ -76,6 +80,7 @@ const GridDetailPanel = props => {
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(DetailPanel, (0, _extends2.default)({
     ref: ref,
+    ownerState: ownerState,
     style: style
   }, other));
 };

package/node/index.js

@@ -1,4 +1,4 @@
-/** @license MUI X v5.17.24
+/** @license MUI X v5.17.26
  *
  * This source code is licensed under the commercial license found in the
  * LICENSE file in the root directory of this source tree.

package/node/utils/releaseInfo.js

@@ -8,7 +8,7 @@ exports.getReleaseInfo = void 0;
 var _utils = require("@mui/utils");
 
 const getReleaseInfo = () => {
-  const releaseInfo = "MTY3NjQ5ODQwMDAwMA==";
+  const releaseInfo = "MTY3Nzc5ODAwMDAwMA==";
 
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid-pro",
-  "version": "5.17.24",
+  "version": "5.17.26",
   "description": "The Pro plan edition of the data grid component (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -33,7 +33,7 @@
   "dependencies": {
     "@babel/runtime": "^7.18.9",
     "@mui/utils": "^5.10.3",
-    "@mui/x-data-grid": "5.17.24",
+    "@mui/x-data-grid": "5.17.26",
     "@mui/x-license-pro": "5.17.12",
     "@types/format-util": "^1.0.2",
     "clsx": "^1.2.1",

package/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTY3NjQ5ODQwMDAwMA==";
+  const releaseInfo = "MTY3Nzc5ODAwMDAwMA==";
 
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).