@mui/x-data-grid 6.12.0 → 6.12.1

package/CHANGELOG.md

@@ -3,6 +3,64 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 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@v6.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@v6.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@v6.12.1`.
+
+#### `@mui/x-data-grid-premium@v6.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@v6.12.1`.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@v6.12.1`
+
+- [pickers] Add `referenceDate` on picker components (and `DateRangeCalendar`) (#9991) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@v6.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@v6.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_
@@ -46,7 +104,7 @@ Same changes as in `@mui/x-data-grid-pro@v6.12.0`.
 
 Same changes as in `@mui/x-date-pickers@v6.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

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/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/useGridRows.js

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

package/index.js

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

package/internals/index.d.ts

@@ -57,6 +57,7 @@ export { useGridDimensions } from '../hooks/features/dimensions/useGridDimension
 export { useGridStatePersistence } from '../hooks/features/statePersistence/useGridStatePersistence';
 export type { GridRestoreStatePreProcessingContext } from '../hooks/features/statePersistence/gridStatePersistenceInterface';
 export { useGridVirtualScroller, getRenderableIndexes, } from '../hooks/features/virtualization/useGridVirtualScroller';
+export { useTimeout } from '../hooks/utils/useTimeout';
 export { useGridVisibleRows, getVisibleRows } from '../hooks/utils/useGridVisibleRows';
 export { useGridInitializeState } from '../hooks/utils/useGridInitializeState';
 export type { GridStateInitializer } from '../hooks/utils/useGridInitializeState';

package/internals/index.js

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

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

@@ -266,7 +266,7 @@ export var createColumnsState = function createColumnsState(_ref5) {
 
     // 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: field
       });
     }

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

@@ -128,7 +128,8 @@ export var useGridKeyboardNavigation = function useGridKeyboardNavigation(apiRef
     apiRef.current.setColumnGroupHeaderFocus(field, depth, event);
   }, [apiRef, logger]);
   var getRowIdFromIndex = React.useCallback(function (rowIndex) {
-    return currentPageRows == null ? void 0 : currentPageRows[rowIndex].id;
+    var _currentPageRows$rowI;
+    return (_currentPageRows$rowI = currentPageRows[rowIndex]) == null ? void 0 : _currentPageRows$rowI.id;
   }, [currentPageRows]);
   var handleColumnHeaderKeyDown = React.useCallback(function (params, event) {
     var headerTitleNode = event.currentTarget.querySelector(".".concat(gridClasses.columnHeaderTitleContainerContent));
@@ -144,7 +145,7 @@ export var useGridKeyboardNavigation = function useGridKeyboardNavigation(apiRef
     }
     var viewportPageSize = apiRef.current.getViewportPageSize();
     var colIndexBefore = params.field ? apiRef.current.getColumnIndex(params.field) : 0;
-    var firstRowIndexInPage = 0;
+    var firstRowIndexInPage = currentPageRows.length > 0 ? 0 : null;
     var lastRowIndexInPage = currentPageRows.length - 1;
     var firstColIndex = 0;
     var lastColIndex = gridVisibleColumnDefinitionsSelector(apiRef).length - 1;

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

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

package/legacy/index.js

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

package/legacy/internals/index.js

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

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

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

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

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

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

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

package/modern/index.js

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

package/modern/internals/index.js

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

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

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

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

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

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

@@ -10,6 +10,7 @@ var React = _interopRequireWildcard(require("react"));
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _useGridLogger = require("../../utils/useGridLogger");
 var _gridRowsSelector = require("./gridRowsSelector");
+var _useTimeout = require("../../utils/useTimeout");
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
 var _gridSortingSelector = require("../sorting/gridSortingSelector");
@@ -48,7 +49,7 @@ const useGridRows = (apiRef, props) => {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridRows');
   const currentPage = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, props);
   const lastUpdateMs = React.useRef(Date.now());
-  const timeout = React.useRef(null);
+  const timeout = (0, _useTimeout.useTimeout)();
   const getRow = React.useCallback(id => {
     const model = (0, _gridRowsSelector.gridRowsLookupSelector)(apiRef)[id];
     if (model) {
@@ -83,7 +84,6 @@ const useGridRows = (apiRef, props) => {
     throttle
   }) => {
     const run = () => {
-      timeout.current = null;
       lastUpdateMs.current = Date.now();
       apiRef.current.setState(state => (0, _extends2.default)({}, state, {
         rows: (0, _gridRowsUtils.getRowsStateFromCache)({
@@ -97,10 +97,7 @@ const useGridRows = (apiRef, props) => {
       apiRef.current.publishEvent('rowsSet');
       apiRef.current.forceUpdate();
     };
-    if (timeout.current) {
-      clearTimeout(timeout.current);
-      timeout.current = null;
-    }
+    timeout.clear();
     apiRef.current.caches.rows = cache;
     if (!throttle) {
       run();
@@ -108,11 +105,11 @@ const useGridRows = (apiRef, props) => {
     }
     const throttleRemainingTimeMs = props.throttleRowsMs - (Date.now() - lastUpdateMs.current);
     if (throttleRemainingTimeMs > 0) {
-      timeout.current = setTimeout(run, throttleRemainingTimeMs);
+      timeout.start(throttleRemainingTimeMs, run);
       return;
     }
     run();
-  }, [props.throttleRowsMs, props.rowCount, props.loading, apiRef]);
+  }, [props.throttleRowsMs, props.rowCount, props.loading, apiRef, timeout]);
 
   /**
    * API METHODS
@@ -401,17 +398,6 @@ const useGridRows = (apiRef, props) => {
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, rowApi, 'public');
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, rowProApi, props.signature === _useGridApiEventHandler.GridSignature.DataGrid ? 'private' : 'public');
 
-  /**
-   * EFFECTS
-   */
-  React.useEffect(() => {
-    return () => {
-      if (timeout.current !== null) {
-        clearTimeout(timeout.current);
-      }
-    };
-  }, []);
-
   // The effect do not track any value defined synchronously during the 1st render by hooks called after `useGridRows`
   // As a consequence, the state generated by the 1st run of this useEffect will always be equal to the initialization one
   const isFirstRender = React.useRef(true);

package/node/index.js

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

package/node/internals/index.js

@@ -72,6 +72,7 @@ var _exportNames = {
   useGridStatePersistence: true,
   useGridVirtualScroller: true,
   getRenderableIndexes: true,
+  useTimeout: true,
   useGridVisibleRows: true,
   getVisibleRows: true,
   useGridInitializeState: true,
@@ -621,6 +622,12 @@ Object.defineProperty(exports, "useGridVisibleRows", {
     return _useGridVisibleRows.useGridVisibleRows;
   }
 });
+Object.defineProperty(exports, "useTimeout", {
+  enumerable: true,
+  get: function () {
+    return _useTimeout.useTimeout;
+  }
+});
 var _GridVirtualScroller = require("../components/virtualization/GridVirtualScroller");
 var _GridVirtualScrollerContent = require("../components/virtualization/GridVirtualScrollerContent");
 var _GridVirtualScrollerRenderZone = require("../components/virtualization/GridVirtualScrollerRenderZone");
@@ -667,6 +674,7 @@ var _useGridEvents = require("../hooks/features/events/useGridEvents");
 var _useGridDimensions = require("../hooks/features/dimensions/useGridDimensions");
 var _useGridStatePersistence = require("../hooks/features/statePersistence/useGridStatePersistence");
 var _useGridVirtualScroller = require("../hooks/features/virtualization/useGridVirtualScroller");
+var _useTimeout = require("../hooks/utils/useTimeout");
 var _useGridVisibleRows = require("../hooks/utils/useGridVisibleRows");
 var _useGridInitializeState = require("../hooks/utils/useGridInitializeState");
 var _utils = require("../hooks/features/export/utils");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "6.12.0",
+  "version": "6.12.1",
   "description": "The community edition of the data grid component (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.22.11",
-    "@mui/utils": "^5.14.5",
+    "@mui/utils": "^5.14.7",
     "clsx": "^2.0.0",
     "prop-types": "^15.8.1",
     "reselect": "^4.1.8"