@mui/x-data-grid-pro 8.18.0 → 8.19.0

package/CHANGELOG.md

@@ -5,6 +5,119 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.19.0
+
+_Nov 20, 2025_
+
+We'd like to extend a big thank you to the 15 contributors who made this release possible. Here are some highlights ✨:
+
+- 🔎 Add pan on `wheel` to the charts zoom
+- ⌨️ Allow opt-in to [tab navigation](https://mui.com/x/react-data-grid/accessibility/#tab-navigation) inside the Data Grid.
+- ⚙️ New way of defining [action columns](https://mui.com/x/react-data-grid/column-definition/#ActionsWithModalGrid.tsx) in the Data Grid that makes it easier to keep `columns` prop stable.
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to these community members for their valuable contributions:
+@lauri865, @noobyogi0010, @sai6855
+
+The following team members contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @flaviendelangle, @Janpot, @JCQuintas, @mj12albert, @noraleonte, @rita-codes, @siriwatknp, @ZeeshanTamboli
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.19.0`
+
+- [DataGrid] Add `tabNavigation` prop to control tab navigation in the grid (#20286) @arminmeh
+- [DataGrid] Allow to focus disabled checkbox cells (#19959) @mj12albert
+- [DataGrid] Alternative actions column definition API (#15041) @cherniavskii
+- [DataGrid] Fix failing tests (#20332) @cherniavskii
+- [DataGrid] Prevent Safari 26 error in the event handler (#20369) @arminmeh
+- [DataGrid] Undeprecate the `autoHeight` prop (#20363) @cherniavskii
+- [DataGrid] Fix print export grid dimensions with dynamic row height and print styles (#19835) @cherniavskii
+
+#### `@mui/x-data-grid-pro@8.19.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@8.19.0`.
+
+#### `@mui/x-data-grid-premium@8.19.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@8.19.0`, plus:
+
+- [DataGridPremium] Fix aggregation with sorting (#19892) @lauri865
+- [DataGridPremium] Lock `ExcelJS` version (#20329) @cherniavskii
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.19.0`
+
+- [pickers] Do not loose `slotProps.field.slotProps` (#20322) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@8.19.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@8.19.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.19.0`
+
+- [charts] Expose `niceDomain` utility (#20250) @bernardobelchior
+- [charts] Fix benchmark regression by downgrading to JSDOM v26 (#20405) @bernardobelchior
+- [charts] Fix Pie Chart keyboard focus highlight (#20358) @JCQuintas
+- [charts] Memoize series selectors (#20326) @JCQuintas
+- [charts] Relax dataset type (#20294) @bernardobelchior
+- [charts] Remove `touch-action: pan-y` when zoom is disabled (#20204) @bernardobelchior
+- [charts] Use `getBBox()` for correct SVG sizes in firefox (#20309) @JCQuintas
+- [charts] Use directly selector from `@mui/x-internals` (#20365) @alexfauquette
+- [charts] Fix unnecessary errors in dev mode (#20380) @JCQuintas
+
+#### `@mui/x-charts-pro@8.19.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-charts@8.19.0`, plus:
+
+- [charts-pro] Add pan on `wheel` to zoom (#19998) @JCQuintas
+- [charts-pro] Fix zoom slider preview having an opaque background in dark mode (#20367) @bernardobelchior
+
+#### `@mui/x-charts-premium@8.19.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-charts-pro@8.19.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.19.0`
+
+- [tree view] Enable lazy load when children count is not know in tree view (#18680) @noobyogi0010
+- [tree view] Fix unwanted behaviors on the item re-ordering (#20368) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@8.19.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-tree-view@8.19.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.19.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add minimum Typescript version to migration guide (#20320) @siriwatknp
+- [docs] Fix Autosizing documentation (#20348) @siriwatknp
+- [docs] Fix separator opacity in demo (#20293) @sai6855
+- [docs] Replace deprecated `LoadingButton` with `Button` component (#20208) @Janpot
+
+### Core
+
+- [code-infra] Add new broken links checker (#20120) @Janpot
+- [code-infra] Disable Codspeed pipeline (#20370) @JCQuintas
+- [code-infra] Optimize `checkMaterialVersion` (#20307) @Janpot
+- [code-infra] Use utils from code-infra for changelog and PR creation (#20406) @brijeshb42
+- [docs-infra] Revert `@docsearch/react` (#20313) @Janpot
+
+### Miscellaneous
+
+- [test] Fix browser tests skipping some projects (#20318) @cherniavskii
+- [test] Update `use-react-version` pnpm script (#20319) @cherniavskii
+
 ## 8.18.0
 
 <!-- generated comparing v8.17.0..master -->

package/DataGridPro/DataGridPro.js

@@ -33,7 +33,7 @@ const configuration = {
     useFilterValueGetter: apiRef => apiRef.current.getRowValue
   }
 };
-const releaseInfo = "MTc2Mjk5MjAwMDAwMA==";
+const releaseInfo = "MTc2MzU5NjgwMDAwMA==";
 const watermark = /*#__PURE__*/(0, _jsxRuntime.jsx)(_xLicense.Watermark, {
   packageName: "x-data-grid-pro",
   releaseInfo: releaseInfo
@@ -90,13 +90,11 @@ DataGridProRaw.propTypes = {
    */
   'aria-labelledby': _propTypes.default.string,
   /**
-   * If `true`, the Data Grid height is dynamic and follows the number of rows in the Data Grid.
+   * If `true`, the Data Grid height is dynamic and takes as much space as it needs to display all rows.
+   * Use it instead of a flex parent container approach, if:
+   * - you don't need to set a minimum or maximum height for the Data Grid
+   * - you want to avoid the scrollbar flickering when the content changes
    * @default false
-   * @deprecated Use flex parent container instead: https://mui.com/x/react-data-grid/layout/#flex-parent-container
-   * @example
-   * <div style={{ display: 'flex', flexDirection: 'column' }}>
-   *   <DataGrid />
-   * </div>
    */
   autoHeight: _propTypes.default.bool,
   /**
@@ -1039,6 +1037,15 @@ DataGridProRaw.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+  /**
+   * Sets the tab navigation behavior for the Data Grid.
+   * - "none": No Data Grid specific tab navigation. Pressing the tab key will move the focus to the next element in the tab sequence.
+   * - "content": Pressing the tab key will move the focus to the next cell in the same row or the first cell in the next row. Shift+Tab will move the focus to the previous cell in the same row or the last cell in the previous row. Tab navigation is not enabled for the header.
+   * - "header": Pressing the tab key will move the focus to the next column group, column header or header filter. Shift+Tab will move the focus to the previous column group, column header or header filter. Tab navigation is not enabled for the content.
+   * - "all": Combines the "content" and "header" behavior.
+   * @default "none"
+   */
+  tabNavigation: _propTypes.default.oneOf(['all', 'content', 'header', 'none']),
   /**
    * If positive, the Data Grid will throttle updates coming from `apiRef.current.updateRows` and `apiRef.current.setRows`.
    * It can be useful if you have a high update rate but do not want to do heavy work like filtering / sorting or rendering on each  individual update.

package/DataGridPro/useDataGridProComponent.js

@@ -79,7 +79,6 @@ const useDataGridProComponent = (apiRef, props, configuration) => {
   (0, _internals.useGridInitializeState)(_internals.dimensionsStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.rowsMetaStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.listViewStateInitializer, apiRef, props);
-  (0, _internals.useGridVirtualizer)(apiRef, props);
   (0, _internals.useGridHeaderFiltering)(apiRef, props);
   (0, _useGridTreeData.useGridTreeData)(apiRef, props);
   (0, _internals.useGridKeyboardNavigation)(apiRef, props);
@@ -102,7 +101,6 @@ const useDataGridProComponent = (apiRef, props, configuration) => {
   (0, _useGridColumnReorder.useGridColumnReorder)(apiRef, props);
   (0, _internals.useGridColumnResize)(apiRef, props);
   (0, _internals.useGridPagination)(apiRef, props);
-  (0, _internals.useGridRowsMeta)(apiRef, props);
   (0, _useGridRowReorder.useGridRowReorder)(apiRef, props);
   (0, _internals.useGridScroll)(apiRef, props);
   (0, _useGridInfiniteLoader.useGridInfiniteLoader)(apiRef, props);
@@ -121,6 +119,9 @@ const useDataGridProComponent = (apiRef, props, configuration) => {
   (0, _internals.useGridListView)(apiRef, props);
 
   // Should be the last thing to run, because all pre-processors should have been registered by now.
+  (0, _internals.useFirstRender)(() => {
+    apiRef.current.runAppliersForPendingProcessors();
+  });
   React.useEffect(() => {
     apiRef.current.runAppliersForPendingProcessors();
   });

package/components/GridDetailPanelToggleCell.js

@@ -83,16 +83,6 @@ process.env.NODE_ENV !== "production" ? GridDetailPanelToggleCell.propTypes = {
    * The column field of the cell that triggered the event.
    */
   field: _propTypes.default.string.isRequired,
-  /**
-   * A ref allowing to set imperative focus.
-   * It can be passed to the element that should receive focus.
-   * @ignore - do not document.
-   */
-  focusElementRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
-    current: _propTypes.default.shape({
-      focus: _propTypes.default.func.isRequired
-    })
-  })]),
   /**
    * The cell value formatted with the column valueFormatter.
    */

package/components/GridRowReorderCell.js

@@ -137,16 +137,6 @@ process.env.NODE_ENV !== "production" ? GridRowReorderCell.propTypes = {
    * The column field of the cell that triggered the event.
    */
   field: _propTypes.default.string.isRequired,
-  /**
-   * A ref allowing to set imperative focus.
-   * It can be passed to the element that should receive focus.
-   * @ignore - do not document.
-   */
-  focusElementRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
-    current: _propTypes.default.shape({
-      focus: _propTypes.default.func.isRequired
-    })
-  })]),
   /**
    * The cell value formatted with the column valueFormatter.
    */

package/components/GridTreeDataGroupingCell.js

@@ -88,16 +88,6 @@ process.env.NODE_ENV !== "production" ? GridTreeDataGroupingCell.propTypes = {
    * The column field of the cell that triggered the event.
    */
   field: _propTypes.default.string.isRequired,
-  /**
-   * A ref allowing to set imperative focus.
-   * It can be passed to the element that should receive focus.
-   * @ignore - do not document.
-   */
-  focusElementRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
-    current: _propTypes.default.shape({
-      focus: _propTypes.default.func.isRequired
-    })
-  })]),
   /**
    * The cell value formatted with the column valueFormatter.
    */

package/esm/DataGridPro/DataGridPro.js

@@ -26,7 +26,7 @@ const configuration = {
     useFilterValueGetter: apiRef => apiRef.current.getRowValue
   }
 };
-const releaseInfo = "MTc2Mjk5MjAwMDAwMA==";
+const releaseInfo = "MTc2MzU5NjgwMDAwMA==";
 const watermark = /*#__PURE__*/_jsx(Watermark, {
   packageName: "x-data-grid-pro",
   releaseInfo: releaseInfo
@@ -83,13 +83,11 @@ DataGridProRaw.propTypes = {
    */
   'aria-labelledby': PropTypes.string,
   /**
-   * If `true`, the Data Grid height is dynamic and follows the number of rows in the Data Grid.
+   * If `true`, the Data Grid height is dynamic and takes as much space as it needs to display all rows.
+   * Use it instead of a flex parent container approach, if:
+   * - you don't need to set a minimum or maximum height for the Data Grid
+   * - you want to avoid the scrollbar flickering when the content changes
    * @default false
-   * @deprecated Use flex parent container instead: https://mui.com/x/react-data-grid/layout/#flex-parent-container
-   * @example
-   * <div style={{ display: 'flex', flexDirection: 'column' }}>
-   *   <DataGrid />
-   * </div>
    */
   autoHeight: PropTypes.bool,
   /**
@@ -1032,6 +1030,15 @@ DataGridProRaw.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * Sets the tab navigation behavior for the Data Grid.
+   * - "none": No Data Grid specific tab navigation. Pressing the tab key will move the focus to the next element in the tab sequence.
+   * - "content": Pressing the tab key will move the focus to the next cell in the same row or the first cell in the next row. Shift+Tab will move the focus to the previous cell in the same row or the last cell in the previous row. Tab navigation is not enabled for the header.
+   * - "header": Pressing the tab key will move the focus to the next column group, column header or header filter. Shift+Tab will move the focus to the previous column group, column header or header filter. Tab navigation is not enabled for the content.
+   * - "all": Combines the "content" and "header" behavior.
+   * @default "none"
+   */
+  tabNavigation: PropTypes.oneOf(['all', 'content', 'header', 'none']),
   /**
    * If positive, the Data Grid will throttle updates coming from `apiRef.current.updateRows` and `apiRef.current.setRows`.
    * It can be useful if you have a high update rate but do not want to do heavy work like filtering / sorting or rendering on each  individual update.

package/esm/DataGridPro/useDataGridProComponent.js

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { useGridInitialization, useGridInitializeState, useGridVirtualizer, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing, editingStateInitializer, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridRowSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, dimensionsStateInitializer, useGridDimensions, useGridStatePersistence, useGridRowSelectionPreProcessors, useGridColumnSpanning, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, rowSelectionStateInitializer, useGridColumnGrouping, columnGroupsStateInitializer, headerFilteringStateInitializer, useGridHeaderFiltering, virtualizationStateInitializer, useGridVirtualization, useGridColumnResize, columnResizeStateInitializer, useGridRowSpanning, rowSpanningStateInitializer, useGridListView, listViewStateInitializer, propsStateInitializer } from '@mui/x-data-grid/internals';
+import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing, editingStateInitializer, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridParamsApi, useGridRowSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, dimensionsStateInitializer, useGridDimensions, useGridStatePersistence, useGridRowSelectionPreProcessors, useGridColumnSpanning, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, rowSelectionStateInitializer, useGridColumnGrouping, columnGroupsStateInitializer, headerFilteringStateInitializer, useGridHeaderFiltering, virtualizationStateInitializer, useGridVirtualization, useGridColumnResize, columnResizeStateInitializer, useGridRowSpanning, rowSpanningStateInitializer, useGridListView, listViewStateInitializer, propsStateInitializer, useFirstRender } from '@mui/x-data-grid/internals';
 // Pro-only features
 import { useGridInfiniteLoader } from "../hooks/features/infiniteLoader/useGridInfiniteLoader.js";
 import { useGridColumnReorder, columnReorderStateInitializer } from "../hooks/features/columnReorder/useGridColumnReorder.js";
@@ -72,7 +72,6 @@ export const useDataGridProComponent = (apiRef, props, configuration) => {
   useGridInitializeState(dimensionsStateInitializer, apiRef, props);
   useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(listViewStateInitializer, apiRef, props);
-  useGridVirtualizer(apiRef, props);
   useGridHeaderFiltering(apiRef, props);
   useGridTreeData(apiRef, props);
   useGridKeyboardNavigation(apiRef, props);
@@ -95,7 +94,6 @@ export const useDataGridProComponent = (apiRef, props, configuration) => {
   useGridColumnReorder(apiRef, props);
   useGridColumnResize(apiRef, props);
   useGridPagination(apiRef, props);
-  useGridRowsMeta(apiRef, props);
   useGridRowReorder(apiRef, props);
   useGridScroll(apiRef, props);
   useGridInfiniteLoader(apiRef, props);
@@ -114,6 +112,9 @@ export const useDataGridProComponent = (apiRef, props, configuration) => {
   useGridListView(apiRef, props);
 
   // Should be the last thing to run, because all pre-processors should have been registered by now.
+  useFirstRender(() => {
+    apiRef.current.runAppliersForPendingProcessors();
+  });
   React.useEffect(() => {
     apiRef.current.runAppliersForPendingProcessors();
   });

package/esm/components/GridDetailPanelToggleCell.js

@@ -75,16 +75,6 @@ process.env.NODE_ENV !== "production" ? GridDetailPanelToggleCell.propTypes = {
    * The column field of the cell that triggered the event.
    */
   field: PropTypes.string.isRequired,
-  /**
-   * A ref allowing to set imperative focus.
-   * It can be passed to the element that should receive focus.
-   * @ignore - do not document.
-   */
-  focusElementRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.shape({
-      focus: PropTypes.func.isRequired
-    })
-  })]),
   /**
    * The cell value formatted with the column valueFormatter.
    */

package/esm/components/GridRowReorderCell.js

@@ -128,16 +128,6 @@ process.env.NODE_ENV !== "production" ? GridRowReorderCell.propTypes = {
    * The column field of the cell that triggered the event.
    */
   field: PropTypes.string.isRequired,
-  /**
-   * A ref allowing to set imperative focus.
-   * It can be passed to the element that should receive focus.
-   * @ignore - do not document.
-   */
-  focusElementRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.shape({
-      focus: PropTypes.func.isRequired
-    })
-  })]),
   /**
    * The cell value formatted with the column valueFormatter.
    */

package/esm/components/GridTreeDataGroupingCell.js

@@ -80,16 +80,6 @@ process.env.NODE_ENV !== "production" ? GridTreeDataGroupingCell.propTypes = {
    * The column field of the cell that triggered the event.
    */
   field: PropTypes.string.isRequired,
-  /**
-   * A ref allowing to set imperative focus.
-   * It can be passed to the element that should receive focus.
-   * @ignore - do not document.
-   */
-  focusElementRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.shape({
-      focus: PropTypes.func.isRequired
-    })
-  })]),
   /**
    * The cell value formatted with the column valueFormatter.
    */

package/esm/hooks/features/columnPinning/useGridColumnPinningPreProcessors.js

@@ -88,6 +88,10 @@ export const useGridColumnPinningPreProcessors = (apiRef, props) => {
       });
       apiRef.current.caches.columnPinning.orderedFieldsBeforePinningColumns = newOrderedFieldsBeforePinningColumns;
     } else {
+      if (allPinnedColumns.length === 0) {
+        prevAllPinnedColumns.current = allPinnedColumns;
+        return columnsState;
+      }
       newOrderedFields = [...columnsState.orderedFields];
       apiRef.current.caches.columnPinning.orderedFieldsBeforePinningColumns = [...columnsState.orderedFields];
     }

package/esm/hooks/features/detailPanel/useGridDetailPanel.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useGridSelector, useGridEvent, useGridApiMethod, gridDataRowIdsSelector } from '@mui/x-data-grid';
+import { useGridEvent, useGridApiMethod, gridDataRowIdsSelector } from '@mui/x-data-grid';
 import { useGridRegisterPipeProcessor } from '@mui/x-data-grid/internals';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from "./gridDetailPanelToggleColDef.js";
 import { gridDetailPanelExpandedRowIdsSelector, gridDetailPanelExpandedRowsContentCacheSelector, gridDetailPanelRawHeightCacheSelector } from "./gridDetailPanelSelector.js";
@@ -46,11 +46,11 @@ function cacheContentAndHeight(apiRef, getDetailPanelContent, getDetailPanelHeig
   };
 }
 export const useGridDetailPanel = (apiRef, props) => {
-  const contentCache = useGridSelector(apiRef, gridDetailPanelExpandedRowsContentCacheSelector);
   const handleCellClick = React.useCallback((params, event) => {
     if (params.field !== GRID_DETAIL_PANEL_TOGGLE_FIELD || props.getDetailPanelContent == null) {
       return;
     }
+    const contentCache = gridDetailPanelExpandedRowsContentCacheSelector(apiRef);
     const content = contentCache[params.id];
     if (! /*#__PURE__*/React.isValidElement(content)) {
       return;
@@ -61,7 +61,7 @@ export const useGridDetailPanel = (apiRef, props) => {
       return;
     }
     apiRef.current.toggleDetailPanel(params.id);
-  }, [apiRef, contentCache, props.getDetailPanelContent]);
+  }, [apiRef, props.getDetailPanelContent]);
   const handleCellKeyDown = React.useCallback((params, event) => {
     if (props.getDetailPanelContent == null) {
       return;
@@ -83,6 +83,7 @@ export const useGridDetailPanel = (apiRef, props) => {
     if (props.getDetailPanelContent == null) {
       return;
     }
+    const contentCache = gridDetailPanelExpandedRowsContentCacheSelector(apiRef);
     const content = contentCache[id];
     if (! /*#__PURE__*/React.isValidElement(content)) {
       return;
@@ -95,7 +96,7 @@ export const useGridDetailPanel = (apiRef, props) => {
       newIds.add(id);
     }
     apiRef.current.setExpandedDetailPanels(newIds);
-  }, [apiRef, contentCache, props.getDetailPanelContent]);
+  }, [apiRef, props.getDetailPanelContent]);
   const getExpandedDetailPanels = React.useCallback(() => gridDetailPanelExpandedRowIdsSelector(apiRef), [apiRef]);
   const setExpandedDetailPanels = React.useCallback(ids => {
     apiRef.current.setState(state => {
@@ -157,7 +158,7 @@ export const useGridDetailPanel = (apiRef, props) => {
   const previousGetDetailPanelContentProp = React.useRef(undefined);
   const previousGetDetailPanelHeightProp = React.useRef(undefined);
   const updateCachesIfNeeded = React.useCallback(() => {
-    if (props.getDetailPanelContent === previousGetDetailPanelContentProp.current && props.getDetailPanelHeight === previousGetDetailPanelHeightProp.current) {
+    if (props.getDetailPanelContent === previousGetDetailPanelContentProp.current && props.getDetailPanelHeight === previousGetDetailPanelHeightProp.current || !props.getDetailPanelContent) {
       return;
     }
     apiRef.current.setState(state => {

package/esm/hooks/features/infiniteLoader/useGridInfiniteLoader.js

@@ -1,5 +1,5 @@
-import { useGridSelector, useGridEventPriority, gridVisibleColumnDefinitionsSelector, useGridEvent } from '@mui/x-data-grid';
-import { useGridVisibleRows, runIf } from '@mui/x-data-grid/internals';
+import { useGridEventPriority, gridVisibleColumnDefinitionsSelector, useGridEvent } from '@mui/x-data-grid';
+import { runIf, getVisibleRows } from '@mui/x-data-grid/internals';
 import useEventCallback from '@mui/utils/useEventCallback';
 /**
  * @requires useGridColumns (state)
@@ -7,10 +7,10 @@ import useEventCallback from '@mui/utils/useEventCallback';
  * @requires useGridScroll (method
  */
 export const useGridInfiniteLoader = (apiRef, props) => {
-  const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
-  const currentPage = useGridVisibleRows(apiRef, props);
   const isEnabled = props.rowsLoadingMode === 'client' && !!props.onRowsScrollEnd;
   const handleLoadMoreRows = useEventCallback(() => {
+    const visibleColumns = gridVisibleColumnDefinitionsSelector(apiRef);
+    const currentPage = getVisibleRows(apiRef);
     const viewportPageSize = apiRef.current.getViewportPageSize();
     const rowScrollEndParams = {
       visibleColumns,

package/esm/hooks/features/rowReorder/useGridRowReorder.js

@@ -46,7 +46,6 @@ export const useGridRowReorder = (apiRef, props) => {
   };
   const classes = useUtilityClasses(ownerState);
   const [dragRowId, setDragRowId] = React.useState('');
-  const sortedRowIndexLookup = useGridSelector(apiRef, gridExpandedSortedRowIndexLookupSelector);
   const timeoutRowId = React.useRef('');
   const timeout = useTimeout();
   const previousReorderState = React.useRef(EMPTY_REORDER_STATE);
@@ -172,9 +171,10 @@ export const useGridRowReorder = (apiRef, props) => {
     removeDnDStylesTimeout.current = setTimeout(() => {
       dragRowNode.current.classList.remove(classes.rowDragging);
     });
+    const sortedRowIndexLookup = gridExpandedSortedRowIndexLookupSelector(apiRef);
     originRowIndex.current = sortedRowIndexLookup[params.id];
     apiRef.current.setCellFocus(params.id, GRID_REORDER_COL_DEF.field);
-  }, [apiRef, isRowReorderDisabled, logger, classes.rowDragging, applyDraggedState, sortedRowIndexLookup, timeout]);
+  }, [apiRef, isRowReorderDisabled, logger, classes.rowDragging, applyDraggedState, timeout]);
   const handleDragOver = React.useCallback((params, event) => {
     if (dragRowId === '') {
       return;
@@ -207,6 +207,7 @@ export const useGridRowReorder = (apiRef, props) => {
       timeoutRowId.current = params.id;
       return;
     }
+    const sortedRowIndexLookup = gridExpandedSortedRowIndexLookupSelector(apiRef);
     const targetRowIndex = sortedRowIndexLookup[params.id];
     const sourceRowIndex = sortedRowIndexLookup[dragRowId];
 
@@ -257,7 +258,7 @@ export const useGridRowReorder = (apiRef, props) => {
     } else {
       event.dataTransfer.dropEffect = 'copy';
     }
-  }, [dragRowId, apiRef, logger, timeout, sortedRowIndexLookup, applyDropIndicator]);
+  }, [dragRowId, apiRef, logger, timeout, applyDropIndicator]);
   const handleDragEnd = React.useCallback((_, event) => {
     // Call the gridEditRowsStateSelector directly to avoid infnite loop
     const editRowsState = gridEditRowsStateSelector(apiRef);
@@ -336,6 +337,7 @@ export const useGridRowReorder = (apiRef, props) => {
     if (gridRowMaximumTreeDepthSelector(apiRef) > 1) {
       return initialValue;
     }
+    const sortedRowIndexLookup = gridExpandedSortedRowIndexLookupSelector(apiRef);
     const targetRowIndex = sortedRowIndexLookup[targetRowId];
     const sourceRowIndex = sortedRowIndexLookup[sourceRowId];
 
@@ -355,7 +357,7 @@ export const useGridRowReorder = (apiRef, props) => {
       finalTargetIndex = dropPosition === 'above' ? targetRowIndex - 1 : targetRowIndex;
     }
     return finalTargetIndex;
-  }, [apiRef, sortedRowIndexLookup]);
+  }, [apiRef]);
   useGridRegisterPipeProcessor(apiRef, 'getRowReorderTargetIndex', getRowReorderTargetIndex);
   useGridEvent(apiRef, 'rowDragStart', handleDragStart);
   useGridEvent(apiRef, 'rowDragOver', handleDragOver);

package/esm/hooks/features/serverSideLazyLoader/useGridInfiniteLoadingIntersection.js

@@ -17,13 +17,13 @@ const InfiniteLoadingTriggerElement = styled('div')({
  * @requires useGridDimensions (method) - can be after
  */
 export const useGridInfiniteLoadingIntersection = (apiRef, props) => {
-  const isReady = useGridSelector(apiRef, gridDimensionsSelector).isReady;
   const observer = React.useRef(null);
   const updateTargetTimeout = useTimeout();
   const triggerElement = React.useRef(null);
   const isEnabledClientSide = props.rowsLoadingMode === 'client' && !!props.onRowsScrollEnd;
   const isEnabledServerSide = props.dataSource && props.lazyLoading;
   const isEnabled = isEnabledClientSide || isEnabledServerSide;
+  const isEnabledAndReady = useGridSelector(apiRef, () => isEnabled && gridDimensionsSelector(apiRef).isReady);
   const handleIntersectionChange = useEventCallback(([entry]) => {
     const currentRatio = entry.intersectionRatio;
     const isIntersecting = entry.isIntersecting;
@@ -36,7 +36,7 @@ export const useGridInfiniteLoadingIntersection = (apiRef, props) => {
   });
   React.useEffect(() => {
     const virtualScroller = apiRef.current.virtualScrollerRef.current;
-    if (!isEnabled || !isReady || !virtualScroller) {
+    if (!isEnabledAndReady || !virtualScroller) {
       return;
     }
     observer.current?.disconnect();
@@ -50,7 +50,7 @@ export const useGridInfiniteLoadingIntersection = (apiRef, props) => {
     if (triggerElement.current) {
       observer.current.observe(triggerElement.current);
     }
-  }, [apiRef, isReady, handleIntersectionChange, isEnabled, props.scrollEndThreshold]);
+  }, [apiRef, handleIntersectionChange, isEnabledAndReady, props.scrollEndThreshold]);
   const updateTarget = node => {
     if (triggerElement.current !== node) {
       observer.current?.disconnect();

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v8.18.0
+ * @mui/x-data-grid-pro v8.19.0
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the

package/hooks/features/columnPinning/useGridColumnPinningPreProcessors.js

@@ -96,6 +96,10 @@ const useGridColumnPinningPreProcessors = (apiRef, props) => {
       });
       apiRef.current.caches.columnPinning.orderedFieldsBeforePinningColumns = newOrderedFieldsBeforePinningColumns;
     } else {
+      if (allPinnedColumns.length === 0) {
+        prevAllPinnedColumns.current = allPinnedColumns;
+        return columnsState;
+      }
       newOrderedFields = [...columnsState.orderedFields];
       apiRef.current.caches.columnPinning.orderedFieldsBeforePinningColumns = [...columnsState.orderedFields];
     }

package/hooks/features/detailPanel/useGridDetailPanel.js

@@ -54,11 +54,11 @@ function cacheContentAndHeight(apiRef, getDetailPanelContent, getDetailPanelHeig
   };
 }
 const useGridDetailPanel = (apiRef, props) => {
-  const contentCache = (0, _xDataGrid.useGridSelector)(apiRef, _gridDetailPanelSelector.gridDetailPanelExpandedRowsContentCacheSelector);
   const handleCellClick = React.useCallback((params, event) => {
     if (params.field !== _gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD || props.getDetailPanelContent == null) {
       return;
     }
+    const contentCache = (0, _gridDetailPanelSelector.gridDetailPanelExpandedRowsContentCacheSelector)(apiRef);
     const content = contentCache[params.id];
     if (! /*#__PURE__*/React.isValidElement(content)) {
       return;
@@ -69,7 +69,7 @@ const useGridDetailPanel = (apiRef, props) => {
       return;
     }
     apiRef.current.toggleDetailPanel(params.id);
-  }, [apiRef, contentCache, props.getDetailPanelContent]);
+  }, [apiRef, props.getDetailPanelContent]);
   const handleCellKeyDown = React.useCallback((params, event) => {
     if (props.getDetailPanelContent == null) {
       return;
@@ -91,6 +91,7 @@ const useGridDetailPanel = (apiRef, props) => {
     if (props.getDetailPanelContent == null) {
       return;
     }
+    const contentCache = (0, _gridDetailPanelSelector.gridDetailPanelExpandedRowsContentCacheSelector)(apiRef);
     const content = contentCache[id];
     if (! /*#__PURE__*/React.isValidElement(content)) {
       return;
@@ -103,7 +104,7 @@ const useGridDetailPanel = (apiRef, props) => {
       newIds.add(id);
     }
     apiRef.current.setExpandedDetailPanels(newIds);
-  }, [apiRef, contentCache, props.getDetailPanelContent]);
+  }, [apiRef, props.getDetailPanelContent]);
   const getExpandedDetailPanels = React.useCallback(() => (0, _gridDetailPanelSelector.gridDetailPanelExpandedRowIdsSelector)(apiRef), [apiRef]);
   const setExpandedDetailPanels = React.useCallback(ids => {
     apiRef.current.setState(state => {
@@ -165,7 +166,7 @@ const useGridDetailPanel = (apiRef, props) => {
   const previousGetDetailPanelContentProp = React.useRef(undefined);
   const previousGetDetailPanelHeightProp = React.useRef(undefined);
   const updateCachesIfNeeded = React.useCallback(() => {
-    if (props.getDetailPanelContent === previousGetDetailPanelContentProp.current && props.getDetailPanelHeight === previousGetDetailPanelHeightProp.current) {
+    if (props.getDetailPanelContent === previousGetDetailPanelContentProp.current && props.getDetailPanelHeight === previousGetDetailPanelHeightProp.current || !props.getDetailPanelContent) {
       return;
     }
     apiRef.current.setState(state => {

package/hooks/features/infiniteLoader/useGridInfiniteLoader.js

@@ -14,10 +14,10 @@ var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallb
  * @requires useGridScroll (method
  */
 const useGridInfiniteLoader = (apiRef, props) => {
-  const visibleColumns = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridVisibleColumnDefinitionsSelector);
-  const currentPage = (0, _internals.useGridVisibleRows)(apiRef, props);
   const isEnabled = props.rowsLoadingMode === 'client' && !!props.onRowsScrollEnd;
   const handleLoadMoreRows = (0, _useEventCallback.default)(() => {
+    const visibleColumns = (0, _xDataGrid.gridVisibleColumnDefinitionsSelector)(apiRef);
+    const currentPage = (0, _internals.getVisibleRows)(apiRef);
     const viewportPageSize = apiRef.current.getViewportPageSize();
     const rowScrollEndParams = {
       visibleColumns,

package/hooks/features/rowReorder/useGridRowReorder.js

@@ -54,7 +54,6 @@ const useGridRowReorder = (apiRef, props) => {
   };
   const classes = useUtilityClasses(ownerState);
   const [dragRowId, setDragRowId] = React.useState('');
-  const sortedRowIndexLookup = (0, _xDataGrid.useGridSelector)(apiRef, _internals.gridExpandedSortedRowIndexLookupSelector);
   const timeoutRowId = React.useRef('');
   const timeout = (0, _useTimeout.default)();
   const previousReorderState = React.useRef(EMPTY_REORDER_STATE);
@@ -180,9 +179,10 @@ const useGridRowReorder = (apiRef, props) => {
     removeDnDStylesTimeout.current = setTimeout(() => {
       dragRowNode.current.classList.remove(classes.rowDragging);
     });
+    const sortedRowIndexLookup = (0, _internals.gridExpandedSortedRowIndexLookupSelector)(apiRef);
     originRowIndex.current = sortedRowIndexLookup[params.id];
     apiRef.current.setCellFocus(params.id, _gridRowReorderColDef.GRID_REORDER_COL_DEF.field);
-  }, [apiRef, isRowReorderDisabled, logger, classes.rowDragging, applyDraggedState, sortedRowIndexLookup, timeout]);
+  }, [apiRef, isRowReorderDisabled, logger, classes.rowDragging, applyDraggedState, timeout]);
   const handleDragOver = React.useCallback((params, event) => {
     if (dragRowId === '') {
       return;
@@ -215,6 +215,7 @@ const useGridRowReorder = (apiRef, props) => {
       timeoutRowId.current = params.id;
       return;
     }
+    const sortedRowIndexLookup = (0, _internals.gridExpandedSortedRowIndexLookupSelector)(apiRef);
     const targetRowIndex = sortedRowIndexLookup[params.id];
     const sourceRowIndex = sortedRowIndexLookup[dragRowId];
 
@@ -265,7 +266,7 @@ const useGridRowReorder = (apiRef, props) => {
     } else {
       event.dataTransfer.dropEffect = 'copy';
     }
-  }, [dragRowId, apiRef, logger, timeout, sortedRowIndexLookup, applyDropIndicator]);
+  }, [dragRowId, apiRef, logger, timeout, applyDropIndicator]);
   const handleDragEnd = React.useCallback((_, event) => {
     // Call the gridEditRowsStateSelector directly to avoid infnite loop
     const editRowsState = (0, _internals.gridEditRowsStateSelector)(apiRef);
@@ -344,6 +345,7 @@ const useGridRowReorder = (apiRef, props) => {
     if ((0, _xDataGrid.gridRowMaximumTreeDepthSelector)(apiRef) > 1) {
       return initialValue;
     }
+    const sortedRowIndexLookup = (0, _internals.gridExpandedSortedRowIndexLookupSelector)(apiRef);
     const targetRowIndex = sortedRowIndexLookup[targetRowId];
     const sourceRowIndex = sortedRowIndexLookup[sourceRowId];
 
@@ -363,7 +365,7 @@ const useGridRowReorder = (apiRef, props) => {
       finalTargetIndex = dropPosition === 'above' ? targetRowIndex - 1 : targetRowIndex;
     }
     return finalTargetIndex;
-  }, [apiRef, sortedRowIndexLookup]);
+  }, [apiRef]);
   (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'getRowReorderTargetIndex', getRowReorderTargetIndex);
   (0, _xDataGrid.useGridEvent)(apiRef, 'rowDragStart', handleDragStart);
   (0, _xDataGrid.useGridEvent)(apiRef, 'rowDragOver', handleDragOver);

package/hooks/features/serverSideLazyLoader/useGridInfiniteLoadingIntersection.js

@@ -24,13 +24,13 @@ const InfiniteLoadingTriggerElement = (0, _system.styled)('div')({
  * @requires useGridDimensions (method) - can be after
  */
 const useGridInfiniteLoadingIntersection = (apiRef, props) => {
-  const isReady = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridDimensionsSelector).isReady;
   const observer = React.useRef(null);
   const updateTargetTimeout = (0, _internals.useTimeout)();
   const triggerElement = React.useRef(null);
   const isEnabledClientSide = props.rowsLoadingMode === 'client' && !!props.onRowsScrollEnd;
   const isEnabledServerSide = props.dataSource && props.lazyLoading;
   const isEnabled = isEnabledClientSide || isEnabledServerSide;
+  const isEnabledAndReady = (0, _xDataGrid.useGridSelector)(apiRef, () => isEnabled && (0, _xDataGrid.gridDimensionsSelector)(apiRef).isReady);
   const handleIntersectionChange = (0, _useEventCallback.default)(([entry]) => {
     const currentRatio = entry.intersectionRatio;
     const isIntersecting = entry.isIntersecting;
@@ -43,7 +43,7 @@ const useGridInfiniteLoadingIntersection = (apiRef, props) => {
   });
   React.useEffect(() => {
     const virtualScroller = apiRef.current.virtualScrollerRef.current;
-    if (!isEnabled || !isReady || !virtualScroller) {
+    if (!isEnabledAndReady || !virtualScroller) {
       return;
     }
     observer.current?.disconnect();
@@ -57,7 +57,7 @@ const useGridInfiniteLoadingIntersection = (apiRef, props) => {
     if (triggerElement.current) {
       observer.current.observe(triggerElement.current);
     }
-  }, [apiRef, isReady, handleIntersectionChange, isEnabled, props.scrollEndThreshold]);
+  }, [apiRef, handleIntersectionChange, isEnabledAndReady, props.scrollEndThreshold]);
   const updateTarget = node => {
     if (triggerElement.current !== node) {
       observer.current?.disconnect();

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v8.18.0
+ * @mui/x-data-grid-pro v8.19.0
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid-pro",
-  "version": "8.18.0",
+  "version": "8.19.0",
   "author": "MUI Team",
   "description": "The Pro plan edition of the MUI X Data Grid components.",
   "license": "SEE LICENSE IN LICENSE",
@@ -37,9 +37,9 @@
     "@mui/utils": "^7.3.5",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
-    "@mui/x-data-grid": "8.18.0",
-    "@mui/x-license": "8.18.0",
-    "@mui/x-internals": "8.18.0"
+    "@mui/x-data-grid": "8.19.0",
+    "@mui/x-internals": "8.19.0",
+    "@mui/x-license": "8.19.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",