@mui/x-data-grid 6.11.2 → 6.12.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/hooks/features/rows/useGridRowsMeta.js

@@ -145,10 +145,10 @@ export const useGridRowsMeta = (apiRef, props) => {
       }
       return acc + maximumBaseSize + otherSizes;
     }, 0);
-    pinnedRows == null || (_pinnedRows$top = pinnedRows.top) == null ? void 0 : _pinnedRows$top.forEach(row => {
+    pinnedRows == null || (_pinnedRows$top = pinnedRows.top) == null || _pinnedRows$top.forEach(row => {
       calculateRowProcessedSizes(row);
     });
-    pinnedRows == null || (_pinnedRows$bottom = pinnedRows.bottom) == null ? void 0 : _pinnedRows$bottom.forEach(row => {
+    pinnedRows == null || (_pinnedRows$bottom = pinnedRows.bottom) == null || _pinnedRows$bottom.forEach(row => {
       calculateRowProcessedSizes(row);
     });
     apiRef.current.setState(state => {

package/hooks/utils/useGridApiEventHandler.js

@@ -30,7 +30,7 @@ export function createUseGridApiEventHandler(registryContainer) {
       const enhancedHandler = (params, event, details) => {
         if (!event.defaultMuiPrevented) {
           var _handlerRef$current;
-          (_handlerRef$current = handlerRef.current) == null ? void 0 : _handlerRef$current.call(handlerRef, params, event, details);
+          (_handlerRef$current = handlerRef.current) == null || _handlerRef$current.call(handlerRef, params, event, details);
         }
       };
       subscription.current = apiRef.current.subscribeEvent(eventName, enhancedHandler, options);
@@ -42,7 +42,7 @@ export function createUseGridApiEventHandler(registryContainer) {
       // The callback below will be called once this reference stops being retained
       () => {
         var _subscription$current;
-        (_subscription$current = subscription.current) == null ? void 0 : _subscription$current.call(subscription);
+        (_subscription$current = subscription.current) == null || _subscription$current.call(subscription);
         subscription.current = null;
         cleanupTokenRef.current = null;
       }, cleanupTokenRef.current);
@@ -59,7 +59,7 @@ export function createUseGridApiEventHandler(registryContainer) {
         const enhancedHandler = (params, event, details) => {
           if (!event.defaultMuiPrevented) {
             var _handlerRef$current2;
-            (_handlerRef$current2 = handlerRef.current) == null ? void 0 : _handlerRef$current2.call(handlerRef, params, event, details);
+            (_handlerRef$current2 = handlerRef.current) == null || _handlerRef$current2.call(handlerRef, params, event, details);
           }
         };
         subscription.current = apiRef.current.subscribeEvent(eventName, enhancedHandler, options);
@@ -72,7 +72,7 @@ export function createUseGridApiEventHandler(registryContainer) {
       }
       return () => {
         var _subscription$current2;
-        (_subscription$current2 = subscription.current) == null ? void 0 : _subscription$current2.call(subscription);
+        (_subscription$current2 = subscription.current) == null || _subscription$current2.call(subscription);
         subscription.current = null;
       };
     }, [apiRef, eventName, options]);
@@ -86,7 +86,7 @@ const registryContainer = {
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const unstable_resetCleanupTracking = () => {
   var _registryContainer$re;
-  (_registryContainer$re = registryContainer.registry) == null ? void 0 : _registryContainer$re.reset();
+  (_registryContainer$re = registryContainer.registry) == null || _registryContainer$re.reset();
   registryContainer.registry = null;
 };
 export const useGridApiEventHandler = createUseGridApiEventHandler(registryContainer);

package/hooks/utils/useLazyRef.js

@@ -1,5 +1,7 @@
 import * as React from 'react';
 const UNINITIALIZED = {};
+
+// See https://github.com/facebook/react/issues/14490 for when to use this.
 export function useLazyRef(init, initArg) {
   const ref = React.useRef(UNINITIALIZED);
   if (ref.current === UNINITIALIZED) {

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v6.11.2
+ * @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/joy/joySlots.js

@@ -231,10 +231,10 @@ const Select = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
     listboxOpen: open,
     onListboxOpenChange: isOpen => {
       if (isOpen) {
-        onOpen == null ? void 0 : onOpen({});
+        onOpen == null || onOpen({});
       } else {
         var _MenuProps$onClose;
-        MenuProps == null || (_MenuProps$onClose = MenuProps.onClose) == null ? void 0 : _MenuProps$onClose.call(MenuProps, {}, undefined);
+        MenuProps == null || (_MenuProps$onClose = MenuProps.onClose) == null || _MenuProps$onClose.call(MenuProps, {}, undefined);
       }
     },
     size: convertSize(size),

package/legacy/components/cell/GridActionsCell.js

@@ -68,7 +68,7 @@ function GridActionsCell(props) {
         var _ref2 = _slicedToArray(_ref, 2),
           index = _ref2[0],
           ref = _ref2[1];
-        ref == null ? void 0 : ref.stop({}, function () {
+        ref == null || ref.stop({}, function () {
           delete touchRippleRefs.current[index];
         });
       });

package/legacy/components/cell/GridEditSingleSelectCell.js

@@ -59,7 +59,7 @@ function GridEditSingleSelectCell(props) {
   useEnhancedEffect(function () {
     if (hasFocus) {
       var _inputRef$current;
-      (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
+      (_inputRef$current = inputRef.current) == null || _inputRef$current.focus();
     }
   }, [hasFocus]);
   if (!isSingleSelectColDef(colDef)) {

package/legacy/components/columnHeaders/GridColumnGroupHeader.js

@@ -78,7 +78,7 @@ function GridColumnGroupHeader(props) {
     if (hasFocus) {
       var focusableElement = headerCellRef.current.querySelector('[tabindex="0"]');
       var elementToFocus = focusableElement || headerCellRef.current;
-      elementToFocus == null ? void 0 : elementToFocus.focus();
+      elementToFocus == null || elementToFocus.focus();
     }
   }, [apiRef, hasFocus]);
   var publish = React.useCallback(function (eventName) {

package/legacy/components/columnHeaders/GridColumnHeaderItem.js

@@ -148,7 +148,7 @@ function GridColumnHeaderItem(props) {
     if (hasFocus && !columnMenuState.open) {
       var focusableElement = headerCellRef.current.querySelector('[tabindex="0"]');
       var elementToFocus = focusableElement || headerCellRef.current;
-      elementToFocus == null ? void 0 : elementToFocus.focus();
+      elementToFocus == null || elementToFocus.focus();
       apiRef.current.columnHeadersContainerElementRef.current.scrollLeft = 0;
     }
   }, [apiRef, hasFocus]);

package/legacy/components/columnHeaders/GridGenericColumnHeaderItem.js

@@ -60,7 +60,7 @@ var GridGenericColumnHeaderItem = /*#__PURE__*/React.forwardRef(function GridGen
     if (hasFocus && !columnMenuState.open) {
       var focusableElement = headerCellRef.current.querySelector('[tabindex="0"]');
       var elementToFocus = focusableElement || headerCellRef.current;
-      elementToFocus == null ? void 0 : elementToFocus.focus();
+      elementToFocus == null || elementToFocus.focus();
       apiRef.current.columnHeadersContainerElementRef.current.scrollLeft = 0;
     }
   }, [apiRef, hasFocus]);

package/legacy/components/columnSelection/GridCellCheckboxRenderer.js

@@ -57,7 +57,7 @@ var GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCell
     if (hasFocus) {
       var _checkboxElement$curr;
       var input = (_checkboxElement$curr = checkboxElement.current) == null ? void 0 : _checkboxElement$curr.querySelector('input');
-      input == null ? void 0 : input.focus({
+      input == null || input.focus({
         preventScroll: true
       });
     } else if (rippleRef.current) {

package/legacy/components/panel/filterPanel/GridFilterForm.js

@@ -247,7 +247,7 @@ var GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(props
       focus: function focus() {
         if (currentOperator != null && currentOperator.InputComponent) {
           var _valueRef$current;
-          valueRef == null || (_valueRef$current = valueRef.current) == null ? void 0 : _valueRef$current.focus();
+          valueRef == null || (_valueRef$current = valueRef.current) == null || _valueRef$current.focus();
         } else {
           filterSelectorRef.current.focus();
         }

package/legacy/components/toolbar/GridToolbarColumnsButton.js

@@ -24,7 +24,7 @@ export var GridToolbarColumnsButton = /*#__PURE__*/React.forwardRef(function Gri
     } else {
       apiRef.current.showPreferences(GridPreferencePanelsValue.columns, columnPanelId, columnButtonId);
     }
-    onClick == null ? void 0 : onClick(event);
+    onClick == null || onClick(event);
   };
 
   // Disable the button if the corresponding is disabled

package/legacy/components/toolbar/GridToolbarDensitySelector.js

@@ -58,7 +58,7 @@ export var GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function G
     setOpen(function (prevOpen) {
       return !prevOpen;
     });
-    onClick == null ? void 0 : onClick(event);
+    onClick == null || onClick(event);
   };
   var handleDensitySelectorClickAway = function handleDensitySelectorClickAway(event) {
     var _buttonRef$current;

package/legacy/components/toolbar/GridToolbarExport.js

@@ -17,7 +17,7 @@ export function GridCsvExportMenuItem(props) {
   return /*#__PURE__*/_jsx(MenuItem, _extends({
     onClick: function onClick() {
       apiRef.current.exportDataAsCsv(options);
-      hideMenu == null ? void 0 : hideMenu();
+      hideMenu == null || hideMenu();
     }
   }, other, {
     children: apiRef.current.getLocaleText('toolbarExportCSV')
@@ -31,7 +31,7 @@ export function GridPrintExportMenuItem(props) {
   return /*#__PURE__*/_jsx(MenuItem, _extends({
     onClick: function onClick() {
       apiRef.current.exportDataAsPrint(options);
-      hideMenu == null ? void 0 : hideMenu();
+      hideMenu == null || hideMenu();
     }
   }, other, {
     children: apiRef.current.getLocaleText('toolbarExportPrint')

package/legacy/components/toolbar/GridToolbarExportContainer.js

@@ -31,7 +31,7 @@ export var GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function G
     setOpen(function (prevOpen) {
       return !prevOpen;
     });
-    onClick == null ? void 0 : onClick(event);
+    onClick == null || onClick(event);
   };
   var handleMenuClose = function handleMenuClose() {
     return setOpen(false);

package/legacy/components/toolbar/GridToolbarFilterButton.js

@@ -92,7 +92,7 @@ var GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolbar
     } else {
       apiRef.current.showPreferences(GridPreferencePanelsValue.filters, filterPanelId, filterButtonId);
     }
-    (_buttonProps$onClick = buttonProps.onClick) == null ? void 0 : _buttonProps$onClick.call(buttonProps, event);
+    (_buttonProps$onClick = buttonProps.onClick) == null || _buttonProps$onClick.call(buttonProps, event);
   };
 
   // Disable the button if the corresponding is disabled

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/export/useGridPrintExport.js

@@ -11,6 +11,7 @@ import { gridClasses } from '../../../constants/gridClasses';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
 import { getColumnsToExport } from './utils';
+import { mergeStateWithPaginationModel } from '../pagination/useGridPagination';
 import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 import { GridPrintExportMenuItem } from '../../../components/toolbar/GridToolbarExport';
 import { getTotalHeaderHeight } from '../columns/gridColumnsUtils';
@@ -96,12 +97,12 @@ export var useGridPrintExport = function useGridPrintExport(apiRef, props) {
     var gridFooterElementHeight = ((_querySelector2 = gridRootElement.querySelector(".".concat(gridClasses.footerContainer))) == null ? void 0 : _querySelector2.offsetHeight) || 0;
     if (normalizeOptions.hideToolbar) {
       var _gridClone$querySelec;
-      (_gridClone$querySelec = gridClone.querySelector(".".concat(gridClasses.toolbarContainer))) == null ? void 0 : _gridClone$querySelec.remove();
+      (_gridClone$querySelec = gridClone.querySelector(".".concat(gridClasses.toolbarContainer))) == null || _gridClone$querySelec.remove();
       gridToolbarElementHeight = 0;
     }
     if (normalizeOptions.hideFooter) {
       var _gridClone$querySelec2;
-      (_gridClone$querySelec2 = gridClone.querySelector(".".concat(gridClasses.footerContainer))) == null ? void 0 : _gridClone$querySelec2.remove();
+      (_gridClone$querySelec2 = gridClone.querySelector(".".concat(gridClasses.footerContainer))) == null || _gridClone$querySelec2.remove();
       gridFooterElementHeight = 0;
     }
 
@@ -197,7 +198,7 @@ export var useGridPrintExport = function useGridPrintExport(apiRef, props) {
   }, [apiRef]);
   var exportDataAsPrint = React.useCallback( /*#__PURE__*/function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(options) {
-      var visibleRowCount, printWindow;
+      var visibleRowCount, paginationModel, printWindow;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -213,7 +214,14 @@ export var useGridPrintExport = function useGridPrintExport(apiRef, props) {
             previousColumnVisibility.current = gridColumnVisibilityModelSelector(apiRef);
             if (props.pagination) {
               visibleRowCount = gridExpandedRowCountSelector(apiRef);
-              apiRef.current.setPageSize(visibleRowCount);
+              paginationModel = {
+                page: 0,
+                pageSize: visibleRowCount
+              };
+              apiRef.current.updateControlState('pagination',
+              // Using signature `DataGridPro` to allow more than 100 rows in the print export
+              mergeStateWithPaginationModel(visibleRowCount, 'DataGridPro', paginationModel));
+              apiRef.current.forceUpdate();
             }
             _context.next = 8;
             return updateGridColumnsForPrint(options == null ? void 0 : options.fields, options == null ? void 0 : options.allColumns);

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/pagination/useGridPagination.js

@@ -17,7 +17,7 @@ export var paginationStateInitializer = function paginationStateInitializer(stat
     }
   });
 };
-var mergeStateWithPaginationModel = function mergeStateWithPaginationModel(rowCount, signature, paginationModelProp) {
+export var mergeStateWithPaginationModel = function mergeStateWithPaginationModel(rowCount, signature, paginationModelProp) {
   return function (paginationState) {
     var _paginationModelProp$;
     var paginationModel = paginationState.paginationModel;

package/legacy/hooks/features/rowSelection/useGridRowSelection.js

@@ -289,7 +289,7 @@ export var useGridRowSelection = function useGridRowSelection(apiRef, props) {
   var preventSelectionOnShift = React.useCallback(function (params, event) {
     if (canHaveMultipleSelection && event.shiftKey) {
       var _window$getSelection;
-      (_window$getSelection = window.getSelection()) == null ? void 0 : _window$getSelection.removeAllRanges();
+      (_window$getSelection = window.getSelection()) == null || _window$getSelection.removeAllRanges();
     }
   }, [canHaveMultipleSelection]);
   var handleRowSelectionCheckboxChange = React.useCallback(function (params, event) {

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/hooks/features/rows/useGridRowsMeta.js

@@ -144,10 +144,10 @@ export var useGridRowsMeta = function useGridRowsMeta(apiRef, props) {
       }
       return acc + maximumBaseSize + otherSizes;
     }, 0);
-    pinnedRows == null || (_pinnedRows$top = pinnedRows.top) == null ? void 0 : _pinnedRows$top.forEach(function (row) {
+    pinnedRows == null || (_pinnedRows$top = pinnedRows.top) == null || _pinnedRows$top.forEach(function (row) {
       calculateRowProcessedSizes(row);
     });
-    pinnedRows == null || (_pinnedRows$bottom = pinnedRows.bottom) == null ? void 0 : _pinnedRows$bottom.forEach(function (row) {
+    pinnedRows == null || (_pinnedRows$bottom = pinnedRows.bottom) == null || _pinnedRows$bottom.forEach(function (row) {
       calculateRowProcessedSizes(row);
     });
     apiRef.current.setState(function (state) {

package/legacy/hooks/utils/useGridApiEventHandler.js

@@ -35,7 +35,7 @@ export function createUseGridApiEventHandler(registryContainer) {
       var enhancedHandler = function enhancedHandler(params, event, details) {
         if (!event.defaultMuiPrevented) {
           var _handlerRef$current;
-          (_handlerRef$current = handlerRef.current) == null ? void 0 : _handlerRef$current.call(handlerRef, params, event, details);
+          (_handlerRef$current = handlerRef.current) == null || _handlerRef$current.call(handlerRef, params, event, details);
         }
       };
       subscription.current = apiRef.current.subscribeEvent(eventName, enhancedHandler, options);
@@ -47,7 +47,7 @@ export function createUseGridApiEventHandler(registryContainer) {
       // The callback below will be called once this reference stops being retained
       function () {
         var _subscription$current;
-        (_subscription$current = subscription.current) == null ? void 0 : _subscription$current.call(subscription);
+        (_subscription$current = subscription.current) == null || _subscription$current.call(subscription);
         subscription.current = null;
         cleanupTokenRef.current = null;
       }, cleanupTokenRef.current);
@@ -64,7 +64,7 @@ export function createUseGridApiEventHandler(registryContainer) {
         var _enhancedHandler = function _enhancedHandler(params, event, details) {
           if (!event.defaultMuiPrevented) {
             var _handlerRef$current2;
-            (_handlerRef$current2 = handlerRef.current) == null ? void 0 : _handlerRef$current2.call(handlerRef, params, event, details);
+            (_handlerRef$current2 = handlerRef.current) == null || _handlerRef$current2.call(handlerRef, params, event, details);
           }
         };
         subscription.current = apiRef.current.subscribeEvent(eventName, _enhancedHandler, options);
@@ -77,7 +77,7 @@ export function createUseGridApiEventHandler(registryContainer) {
       }
       return function () {
         var _subscription$current2;
-        (_subscription$current2 = subscription.current) == null ? void 0 : _subscription$current2.call(subscription);
+        (_subscription$current2 = subscription.current) == null || _subscription$current2.call(subscription);
         subscription.current = null;
       };
     }, [apiRef, eventName, options]);
@@ -91,7 +91,7 @@ var registryContainer = {
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export var unstable_resetCleanupTracking = function unstable_resetCleanupTracking() {
   var _registryContainer$re;
-  (_registryContainer$re = registryContainer.registry) == null ? void 0 : _registryContainer$re.reset();
+  (_registryContainer$re = registryContainer.registry) == null || _registryContainer$re.reset();
   registryContainer.registry = null;
 };
 export var useGridApiEventHandler = createUseGridApiEventHandler(registryContainer);

package/legacy/hooks/utils/useLazyRef.js

@@ -1,5 +1,7 @@
 import * as React from 'react';
 var UNINITIALIZED = {};
+
+// See https://github.com/facebook/react/issues/14490 for when to use this.
 export function useLazyRef(init, initArg) {
   var ref = React.useRef(UNINITIALIZED);
   if (ref.current === UNINITIALIZED) {

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v6.11.2
+ * @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/legacy/joy/joySlots.js

@@ -234,10 +234,10 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref7, ref) {
     listboxOpen: open,
     onListboxOpenChange: function onListboxOpenChange(isOpen) {
       if (isOpen) {
-        onOpen == null ? void 0 : onOpen({});
+        onOpen == null || onOpen({});
       } else {
         var _MenuProps$onClose;
-        MenuProps == null || (_MenuProps$onClose = MenuProps.onClose) == null ? void 0 : _MenuProps$onClose.call(MenuProps, {}, undefined);
+        MenuProps == null || (_MenuProps$onClose = MenuProps.onClose) == null || _MenuProps$onClose.call(MenuProps, {}, undefined);
       }
     },
     size: convertSize(size),