@mui/x-data-grid 5.8.0 → 5.11.0

package/node/hooks/features/selection/useGridSelection.js

@@ -11,8 +11,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var React = _interopRequireWildcard(require("react"));
 
-var _events = require("../../../models/events");
-
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
@@ -37,6 +35,8 @@ var _keyboardUtils = require("../../../utils/keyboardUtils");
 
 var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
 
+var _gridDetailPanelToggleField = require("../../../constants/gridDetailPanelToggleField");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -85,7 +85,7 @@ const useGridSelection = (apiRef, props) => {
     propModel: propSelectionModel,
     propOnChange: props.onSelectionModelChange,
     stateSelector: _gridSelectionSelector.gridSelectionStateSelector,
-    changeEvent: _events.GridEvents.selectionChange
+    changeEvent: 'selectionChange'
   });
   const {
     checkboxSelection,
@@ -226,6 +226,10 @@ const useGridSelection = (apiRef, props) => {
    */
 
   const removeOutdatedSelection = React.useCallback(() => {
+    if (props.keepNonExistentRowsSelected) {
+      return;
+    }
+
     const currentSelection = (0, _gridSelectionSelector.gridSelectionStateSelector)(apiRef.current.state);
     const rowsLookup = (0, _gridRowsSelector.gridRowsLookupSelector)(apiRef); // We clone the existing object to avoid mutating the same object returned by the selector to others part of the project
 
@@ -241,12 +245,12 @@ const useGridSelection = (apiRef, props) => {
     if (hasChanged) {
       apiRef.current.setSelectionModel(Object.values(selectionLookup));
     }
-  }, [apiRef]);
+  }, [apiRef, props.keepNonExistentRowsSelected]);
   const handleSingleRowSelection = React.useCallback((id, event) => {
     const hasCtrlKey = event.metaKey || event.ctrlKey; // multiple selection is only allowed if:
     // - it is a checkboxSelection
     // - it is a keyboard selection
-    // - CTRL is pressed
+    // - Ctrl is pressed
 
     const isMultipleSelectionDisabled = !checkboxSelection && !hasCtrlKey && !(0, _keyboardUtils.isKeyboardEvent)(event);
     const resetSelection = !canHaveMultipleSelection || isMultipleSelectionDisabled;
@@ -268,7 +272,7 @@ const useGridSelection = (apiRef, props) => {
       return;
     }
 
-    if (params.field === '__detail_panel_toggle__') {
+    if (params.field === _gridDetailPanelToggleField.GRID_DETAIL_PANEL_TOGGLE_FIELD) {
       // click to open the detail panel should not select the row
       return;
     }
@@ -376,12 +380,12 @@ const useGridSelection = (apiRef, props) => {
       selectRows(apiRef.current.getAllRowIds(), true);
     }
   }, [apiRef, handleSingleRowSelection, selectRows, visibleRows.rows, canHaveMultipleSelection]);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.visibleRowsSet, removeOutdatedSelection);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.cellClick, handleCellClick);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.rowSelectionCheckboxChange, handleRowSelectionCheckboxChange);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.headerSelectionCheckboxChange, handleHeaderSelectionCheckboxChange);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.cellMouseDown, preventSelectionOnShift);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.cellKeyDown, handleCellKeyDown);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'sortedRowsSet', removeOutdatedSelection);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellClick', handleCellClick);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'rowSelectionCheckboxChange', handleRowSelectionCheckboxChange);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'headerSelectionCheckboxChange', handleHeaderSelectionCheckboxChange);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellMouseDown', preventSelectionOnShift);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellKeyDown', handleCellKeyDown);
   /**
    * EFFECTS
    */

package/node/hooks/features/sorting/useGridSorting.js

@@ -11,8 +11,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var React = _interopRequireWildcard(require("react"));
 
-var _events = require("../../../models/events");
-
 var _gridFeatureMode = require("../../../models/gridFeatureMode");
 
 var _keyboardUtils = require("../../../utils/keyboardUtils");
@@ -67,7 +65,7 @@ const useGridSorting = (apiRef, props) => {
     propModel: props.sortModel,
     propOnChange: props.onSortModelChange,
     stateSelector: _gridSortingSelector.gridSortModelSelector,
-    changeEvent: _events.GridEvents.sortModelChange
+    changeEvent: 'sortModelChange'
   });
   const upsertSortModel = React.useCallback((field, sortItem) => {
     const sortModel = (0, _gridSortingSelector.gridSortModelSelector)(apiRef);
@@ -111,17 +109,16 @@ const useGridSorting = (apiRef, props) => {
    */
 
   const applySorting = React.useCallback(() => {
-    if (props.sortingMode === _gridFeatureMode.GridFeatureModeConstant.server) {
-      logger.debug('Skipping sorting rows as sortingMode = server');
-      apiRef.current.setState(state => (0, _extends2.default)({}, state, {
-        sorting: (0, _extends2.default)({}, state.sorting, {
-          sortedRows: (0, _rows.gridRowIdsSelector)(state, apiRef.current.instanceId)
-        })
-      }));
-      return;
-    }
-
     apiRef.current.setState(state => {
+      if (props.sortingMode === _gridFeatureMode.GridFeatureModeConstant.server) {
+        logger.debug('Skipping sorting rows as sortingMode = server');
+        return (0, _extends2.default)({}, state, {
+          sorting: (0, _extends2.default)({}, state.sorting, {
+            sortedRows: (0, _rows.gridRowIdsSelector)(state, apiRef.current.instanceId)
+          })
+        });
+      }
+
       const sortModel = (0, _gridSortingSelector.gridSortModelSelector)(state, apiRef.current.instanceId);
       const sortRowList = (0, _gridSortingUtils.buildAggregatedSortingApplier)(sortModel, apiRef);
       const sortedRows = apiRef.current.unstable_applyStrategyProcessor('sorting', {
@@ -133,6 +130,7 @@ const useGridSorting = (apiRef, props) => {
         })
       });
     });
+    apiRef.current.publishEvent('sortedRowsSet');
     apiRef.current.forceUpdate();
   }, [apiRef, logger, props.sortingMode]);
   const setSortModel = React.useCallback(model => {
@@ -235,7 +233,7 @@ const useGridSorting = (apiRef, props) => {
   const handleColumnHeaderKeyDown = React.useCallback(({
     colDef
   }, event) => {
-    // CTRL + Enter opens the column menu
+    // Ctrl + Enter opens the column menu
     if ((0, _keyboardUtils.isEnterKey)(event.key) && !event.ctrlKey && !event.metaKey) {
       sortColumn(colDef, undefined, event.shiftKey);
     }
@@ -258,11 +256,11 @@ const useGridSorting = (apiRef, props) => {
       apiRef.current.applySorting();
     }
   }, [apiRef]);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.columnHeaderClick, handleColumnHeaderClick);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.columnHeaderKeyDown, handleColumnHeaderKeyDown);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.rowsSet, apiRef.current.applySorting);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.columnsChange, handleColumnsChange);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.activeStrategyProcessorChange, handleStrategyProcessorChange);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnHeaderClick', handleColumnHeaderClick);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnHeaderKeyDown', handleColumnHeaderKeyDown);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'rowsSet', apiRef.current.applySorting);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnsChange', handleColumnsChange);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'activeStrategyProcessorChange', handleStrategyProcessorChange);
   /**
    * 1ST RENDER
    */

package/node/hooks/features/virtualization/useGridVirtualScroller.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getIndexFromScroll = getIndexFromScroll;
-exports.useGridVirtualScroller = void 0;
+exports.useGridVirtualScroller = exports.getRenderableIndexes = void 0;
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
@@ -14,6 +14,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var React = _interopRequireWildcard(require("react"));
 
+var ReactDOM = _interopRequireWildcard(require("react-dom"));
+
 var _utils = require("@mui/material/utils");
 
 var _useGridApiContext = require("../../utils/useGridApiContext");
@@ -32,8 +34,6 @@ var _gridEditRowsSelector = require("../editRows/gridEditRowsSelector");
 
 var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
 
-var _events = require("../../../models/events");
-
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 
 var _utils2 = require("../../../utils/utils");
@@ -42,6 +42,8 @@ var _gridSelectionSelector = require("../selection/gridSelectionSelector");
 
 var _gridRowsMetaSelector = require("../rows/gridRowsMetaSelector");
 
+var _gridColumnsUtils = require("../columns/gridColumnsUtils");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["style"];
@@ -65,9 +67,19 @@ function getIndexFromScroll(offset, positions, sliceStart = 0, sliceEnd = positi
   return offset <= itemOffset ? getIndexFromScroll(offset, positions, sliceStart, pivot) : getIndexFromScroll(offset, positions, pivot + 1, sliceEnd);
 }
 
-const useGridVirtualScroller = props => {
-  var _currentPage$range2;
+const getRenderableIndexes = ({
+  firstIndex,
+  lastIndex,
+  buffer,
+  minFirstIndex,
+  maxLastIndex
+}) => {
+  return [(0, _utils2.clamp)(firstIndex - buffer, minFirstIndex, maxLastIndex), (0, _utils2.clamp)(lastIndex + buffer, minFirstIndex, maxLastIndex)];
+};
+
+exports.getRenderableIndexes = getRenderableIndexes;
 
+const useGridVirtualScroller = props => {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const visibleColumns = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector);
@@ -141,35 +153,29 @@ const useGridVirtualScroller = props => {
       setContainerWidth(rootRef.current.clientWidth);
     }
   }, []);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.resize, handleResize);
-
-  const getRenderableIndexes = ({
-    firstIndex,
-    lastIndex,
-    buffer,
-    minFirstIndex,
-    maxLastIndex
-  }) => {
-    return [(0, _utils2.clamp)(firstIndex - buffer, minFirstIndex, maxLastIndex), (0, _utils2.clamp)(lastIndex + buffer, minFirstIndex, maxLastIndex)];
-  };
-
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'resize', handleResize);
   const updateRenderZonePosition = React.useCallback(nextRenderContext => {
-    var _currentPage$range;
-
-    const [firstRowToRender] = getRenderableIndexes({
+    const [firstRowToRender, lastRowToRender] = getRenderableIndexes({
       firstIndex: nextRenderContext.firstRowIndex,
       lastIndex: nextRenderContext.lastRowIndex,
       minFirstIndex: 0,
-      maxLastIndex: ((_currentPage$range = currentPage.range) == null ? void 0 : _currentPage$range.lastRowIndex) || 0,
+      maxLastIndex: currentPage.rows.length,
       buffer: rootProps.rowBuffer
     });
-    const [firstColumnToRender] = getRenderableIndexes({
+    const [initialFirstColumnToRender] = getRenderableIndexes({
       firstIndex: nextRenderContext.firstColumnIndex,
       lastIndex: nextRenderContext.lastColumnIndex,
       minFirstIndex: renderZoneMinColumnIndex,
       maxLastIndex: renderZoneMaxColumnIndex,
       buffer: rootProps.columnBuffer
     });
+    const firstColumnToRender = (0, _gridColumnsUtils.getFirstNonSpannedColumnToRender)({
+      firstColumnToRender: initialFirstColumnToRender,
+      apiRef,
+      firstRowToRender,
+      lastRowToRender,
+      visibleRows: currentPage.rows
+    });
     const top = (0, _gridRowsMetaSelector.gridRowsMetaSelector)(apiRef.current.state).positions[firstRowToRender];
     const left = (0, _gridColumnsSelector.gridColumnPositionsSelector)(apiRef)[firstColumnToRender]; // Call directly the selector because it might be outdated when this method is called
 
@@ -181,19 +187,22 @@ const useGridVirtualScroller = props => {
         left
       });
     }
-  }, [apiRef, (_currentPage$range2 = currentPage.range) == null ? void 0 : _currentPage$range2.lastRowIndex, onRenderZonePositioning, renderZoneMaxColumnIndex, renderZoneMinColumnIndex, rootProps.columnBuffer, rootProps.rowBuffer]);
+  }, [apiRef, currentPage.rows, onRenderZonePositioning, renderZoneMinColumnIndex, renderZoneMaxColumnIndex, rootProps.columnBuffer, rootProps.rowBuffer]);
+  React.useLayoutEffect(() => {
+    if (renderContext) {
+      updateRenderZonePosition(renderContext);
+    }
+  }, [renderContext, updateRenderZonePosition]);
   const updateRenderContext = React.useCallback(nextRenderContext => {
     setRenderContext(nextRenderContext);
-    updateRenderZonePosition(nextRenderContext);
     prevRenderContext.current = nextRenderContext;
-  }, [setRenderContext, prevRenderContext, updateRenderZonePosition]);
+  }, [setRenderContext, prevRenderContext]);
   React.useEffect(() => {
     if (containerWidth == null) {
       return;
     }
 
     const initialRenderContext = computeRenderContext();
-    prevRenderContext.current = initialRenderContext;
     updateRenderContext(initialRenderContext);
     const {
       top,
@@ -204,7 +213,7 @@ const useGridVirtualScroller = props => {
       left,
       renderContext: initialRenderContext
     };
-    apiRef.current.publishEvent(_events.GridEvents.rowsScroll, params);
+    apiRef.current.publishEvent('rowsScroll', params);
   }, [apiRef, computeRenderContext, containerWidth, updateRenderContext]);
 
   const handleScroll = event => {
@@ -227,18 +236,29 @@ const useGridVirtualScroller = props => {
     const bottomColumnsScrolledSincePreviousRender = Math.abs(nextRenderContext.lastColumnIndex - prevRenderContext.current.lastColumnIndex);
     const shouldSetState = topRowsScrolledSincePreviousRender >= rootProps.rowThreshold || bottomRowsScrolledSincePreviousRender >= rootProps.rowThreshold || topColumnsScrolledSincePreviousRender >= rootProps.columnThreshold || bottomColumnsScrolledSincePreviousRender >= rootProps.columnThreshold || prevTotalWidth.current !== columnsTotalWidth; // TODO v6: rename event to a wider name, it's not only fired for row scrolling
 
-    apiRef.current.publishEvent(_events.GridEvents.rowsScroll, {
+    apiRef.current.publishEvent('rowsScroll', {
       top: scrollTop,
       left: scrollLeft,
       renderContext: shouldSetState ? nextRenderContext : prevRenderContext.current
-    });
+    }, event);
 
     if (shouldSetState) {
-      updateRenderContext(nextRenderContext);
+      // Prevents batching render context changes
+      ReactDOM.flushSync(() => {
+        updateRenderContext(nextRenderContext);
+      });
       prevTotalWidth.current = columnsTotalWidth;
     }
   };
 
+  const handleWheel = event => {
+    apiRef.current.publishEvent('virtualScrollerWheel', {}, event);
+  };
+
+  const handleTouchMove = event => {
+    apiRef.current.publishEvent('virtualScrollerTouchMove', {}, event);
+  };
+
   const getRows = (params = {
     renderContext
   }) => {
@@ -262,14 +282,32 @@ const useGridVirtualScroller = props => {
       maxLastIndex: currentPage.rows.length,
       buffer: rowBuffer
     });
-    const [firstColumnToRender, lastColumnToRender] = getRenderableIndexes({
+    const renderedRows = [];
+
+    for (let i = firstRowToRender; i < lastRowToRender; i += 1) {
+      const row = currentPage.rows[i];
+      renderedRows.push(row);
+      apiRef.current.unstable_calculateColSpan({
+        rowId: row.id,
+        minFirstColumn,
+        maxLastColumn
+      });
+    }
+
+    const [initialFirstColumnToRender, lastColumnToRender] = getRenderableIndexes({
       firstIndex: nextRenderContext.firstColumnIndex,
       lastIndex: nextRenderContext.lastColumnIndex,
       minFirstIndex: minFirstColumn,
       maxLastIndex: maxLastColumn,
       buffer: columnBuffer
     });
-    const renderedRows = currentPage.rows.slice(firstRowToRender, lastRowToRender);
+    const firstColumnToRender = (0, _gridColumnsUtils.getFirstNonSpannedColumnToRender)({
+      firstColumnToRender: initialFirstColumnToRender,
+      apiRef,
+      firstRowToRender,
+      lastRowToRender,
+      visibleRows: currentPage.rows
+    });
     const renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender);
     const rows = [];
 
@@ -341,7 +379,7 @@ const useGridVirtualScroller = props => {
     return size;
   }, [rootRef, columnsTotalWidth, rowsMeta.currentPageTotalHeight, currentPage.rows.length, needsHorizontalScrollbar, rootProps.autoHeight, rowHeight]);
   React.useEffect(() => {
-    apiRef.current.publishEvent(_events.GridEvents.virtualScrollerContentSizeChange);
+    apiRef.current.publishEvent('virtualScrollerContentSizeChange');
   }, [apiRef, contentSize]);
 
   if (rootProps.autoHeight && currentPage.rows.length === 0) {
@@ -370,6 +408,8 @@ const useGridVirtualScroller = props => {
       return (0, _extends2.default)({
         ref: handleRef,
         onScroll: handleScroll,
+        onWheel: handleWheel,
+        onTouchMove: handleTouchMove,
         style: (0, _extends2.default)({}, style, rootStyle)
       }, other);
     },

package/node/hooks/utils/useGridApiEventHandler.js

@@ -22,8 +22,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * Signal to the underlying logic what version of the public component API
  * of the data grid is exposed.
  */
-var GridSignature; // We use class to make it easier to detect in heap snapshots by name
-
+var GridSignature;
 exports.GridSignature = GridSignature;
 
 (function (GridSignature) {
@@ -31,13 +30,18 @@ exports.GridSignature = GridSignature;
   GridSignature["DataGridPro"] = "DataGridPro";
 })(GridSignature || (exports.GridSignature = GridSignature = {}));
 
+// We use class to make it easier to detect in heap snapshots by name
 class ObjectToBeRetainedByReact {} // Based on https://github.com/Bnaya/use-dispose-uncommitted/blob/main/src/finalization-registry-based-impl.ts
 // Check https://github.com/facebook/react/issues/15317 to get more information
 
 
-function createUseGridApiEventHandler(registry) {
+function createUseGridApiEventHandler(registryContainer) {
   let cleanupTokensCounter = 0;
   return function useGridApiEventHandler(apiRef, eventName, handler, options) {
+    if (registryContainer.registry === null) {
+      registryContainer.registry = typeof FinalizationRegistry !== 'undefined' ? new _FinalizationRegistryBasedCleanupTracking.FinalizationRegistryBasedCleanupTracking() : new _TimerBasedCleanupTracking.TimerBasedCleanupTracking();
+    }
+
     const [objectRetainedByReact] = React.useState(new ObjectToBeRetainedByReact());
     const subscription = React.useRef(null);
     const handlerRef = React.useRef();
@@ -58,7 +62,7 @@ function createUseGridApiEventHandler(registry) {
       cleanupTokenRef.current = {
         cleanupToken: cleanupTokensCounter
       };
-      registry.register(objectRetainedByReact, // The callback below will be called once this reference stops being retained
+      registryContainer.registry.register(objectRetainedByReact, // The callback below will be called once this reference stops being retained
       () => {
         var _subscription$current;
 
@@ -71,7 +75,7 @@ function createUseGridApiEventHandler(registry) {
       subscription.current = null;
 
       if (cleanupTokenRef.current) {
-        registry.unregister(cleanupTokenRef.current);
+        registryContainer.registry.unregister(cleanupTokenRef.current);
         cleanupTokenRef.current = null;
       }
     }
@@ -89,10 +93,10 @@ function createUseGridApiEventHandler(registry) {
         subscription.current = apiRef.current.subscribeEvent(eventName, enhancedHandler, options);
       }
 
-      if (cleanupTokenRef.current && registry) {
+      if (cleanupTokenRef.current && registryContainer.registry) {
         // If the effect was called, it means that this render was committed
         // so we can trust the cleanup function to remove the listener.
-        registry.unregister(cleanupTokenRef.current);
+        registryContainer.registry.unregister(cleanupTokenRef.current);
         cleanupTokenRef.current = null;
       }
 
@@ -106,12 +110,20 @@ function createUseGridApiEventHandler(registry) {
   };
 }
 
-const registry = typeof FinalizationRegistry !== 'undefined' ? new _FinalizationRegistryBasedCleanupTracking.FinalizationRegistryBasedCleanupTracking() : new _TimerBasedCleanupTracking.TimerBasedCleanupTracking(); // eslint-disable-next-line @typescript-eslint/naming-convention
+const registryContainer = {
+  registry: null
+}; // TODO: move to @mui/x-data-grid/internals
+// eslint-disable-next-line @typescript-eslint/naming-convention
 
-const unstable_resetCleanupTracking = () => registry.reset();
+const unstable_resetCleanupTracking = () => {
+  var _registryContainer$re;
+
+  (_registryContainer$re = registryContainer.registry) == null ? void 0 : _registryContainer$re.reset();
+  registryContainer.registry = null;
+};
 
 exports.unstable_resetCleanupTracking = unstable_resetCleanupTracking;
-const useGridApiEventHandler = createUseGridApiEventHandler(registry);
+const useGridApiEventHandler = createUseGridApiEventHandler(registryContainer);
 exports.useGridApiEventHandler = useGridApiEventHandler;
 const optionsSubscriberOptions = {
   isFirst: true

package/node/hooks/utils/useGridNativeEventListener.js

@@ -7,8 +7,6 @@ exports.useGridNativeEventListener = void 0;
 
 var React = _interopRequireWildcard(require("react"));
 
-var _events = require("../../models/events");
-
 var _utils = require("../../utils/utils");
 
 var _useGridLogger = require("./useGridLogger");
@@ -47,7 +45,7 @@ const useGridNativeEventListener = (apiRef, ref, eventName, handler, options) =>
         boundElem.removeEventListener(eventName, wrapHandler, options);
       };
 
-      apiRef.current.subscribeEvent(_events.GridEvents.unmount, unsubscribe);
+      apiRef.current.subscribeEvent('unmount', unsubscribe);
     }
   }, [ref, wrapHandler, eventName, added, logger, options, apiRef]);
 };

package/node/hooks/utils/useGridSelector.js

@@ -8,7 +8,7 @@ exports.useGridSelector = void 0;
 var _warning = require("../../utils/warning");
 
 function isOutputSelector(selector) {
-  return selector.cache;
+  return selector.acceptsApiRef;
 }
 
 const stateNotInitializedWarning = (0, _warning.buildWarning)(['MUI: `useGridSelector` has been called before the initialization of the state.', 'This hook can only be used inside the context of the grid.']);

package/node/index.js

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

package/node/internals/index.js

@@ -33,10 +33,16 @@ Object.defineProperty(exports, "GridVirtualScrollerRenderZone", {
     return _GridVirtualScrollerRenderZone.GridVirtualScrollerRenderZone;
   }
 });
+Object.defineProperty(exports, "buildWarning", {
+  enumerable: true,
+  get: function () {
+    return _warning.buildWarning;
+  }
+});
 Object.defineProperty(exports, "clamp", {
   enumerable: true,
   get: function () {
-    return _utils.clamp;
+    return _utils2.clamp;
   }
 });
 Object.defineProperty(exports, "columnMenuStateInitializer", {
@@ -57,6 +63,12 @@ Object.defineProperty(exports, "createSelector", {
     return _createSelector.createSelector;
   }
 });
+Object.defineProperty(exports, "defaultGetRowsToExport", {
+  enumerable: true,
+  get: function () {
+    return _utils.defaultGetRowsToExport;
+  }
+});
 Object.defineProperty(exports, "densityStateInitializer", {
   enumerable: true,
   get: function () {
@@ -75,6 +87,12 @@ Object.defineProperty(exports, "editingStateInitializer_old", {
     return _useGridEditing2.editingStateInitializer;
   }
 });
+Object.defineProperty(exports, "exportAs", {
+  enumerable: true,
+  get: function () {
+    return _exportAs.exportAs;
+  }
+});
 Object.defineProperty(exports, "filterStateInitializer", {
   enumerable: true,
   get: function () {
@@ -93,10 +111,16 @@ Object.defineProperty(exports, "focusStateInitializer", {
     return _useGridFocus.focusStateInitializer;
   }
 });
+Object.defineProperty(exports, "getColumnsToExport", {
+  enumerable: true,
+  get: function () {
+    return _utils.getColumnsToExport;
+  }
+});
 Object.defineProperty(exports, "isDeepEqual", {
   enumerable: true,
   get: function () {
-    return _utils.isDeepEqual;
+    return _utils2.isDeepEqual;
   }
 });
 Object.defineProperty(exports, "isNavigationKey", {
@@ -141,6 +165,12 @@ Object.defineProperty(exports, "sortingStateInitializer", {
     return _useGridSorting.sortingStateInitializer;
   }
 });
+Object.defineProperty(exports, "unstable_resetCreateSelectorCache", {
+  enumerable: true,
+  get: function () {
+    return _createSelector.unstable_resetCreateSelectorCache;
+  }
+});
 Object.defineProperty(exports, "useGridClipboard", {
   enumerable: true,
   get: function () {
@@ -159,6 +189,12 @@ Object.defineProperty(exports, "useGridColumnMenu", {
     return _useGridColumnMenu.useGridColumnMenu;
   }
 });
+Object.defineProperty(exports, "useGridColumnSpanning", {
+  enumerable: true,
+  get: function () {
+    return _useGridColumnSpanning.useGridColumnSpanning;
+  }
+});
 Object.defineProperty(exports, "useGridColumns", {
   enumerable: true,
   get: function () {
@@ -352,6 +388,8 @@ var _useGridColumnMenu = require("../hooks/features/columnMenu/useGridColumnMenu
 
 var _useGridColumns = require("../hooks/features/columns/useGridColumns");
 
+var _useGridColumnSpanning = require("../hooks/features/columns/useGridColumnSpanning");
+
 var _useGridDensity = require("../hooks/features/density/useGridDensity");
 
 var _useGridCsvExport = require("../hooks/features/export/useGridCsvExport");
@@ -400,10 +438,16 @@ var _useGridVisibleRows = require("../hooks/utils/useGridVisibleRows");
 
 var _useGridInitializeState = require("../hooks/utils/useGridInitializeState");
 
+var _utils = require("../hooks/features/export/utils");
+
 var _createSelector = require("../utils/createSelector");
 
 var _domUtils = require("../utils/domUtils");
 
 var _keyboardUtils = require("../utils/keyboardUtils");
 
-var _utils = require("../utils/utils");
+var _utils2 = require("../utils/utils");
+
+var _warning = require("../utils/warning");
+
+var _exportAs = require("../utils/exportAs");

package/node/locales/arSD.js

@@ -29,11 +29,16 @@ const arSDGrid = {
   toolbarFiltersTooltipHide: 'إخفاء المرشِحات',
   toolbarFiltersTooltipShow: 'اظهر المرشِحات',
   toolbarFiltersTooltipActive: count => count !== 1 ? `${count} من المرشِحات النشطة` : `مرشِح نشط`,
+  // Quick filter toolbar field
+  // toolbarQuickFilterPlaceholder: 'Search...',
+  // toolbarQuickFilterLabel: 'Search',
+  // toolbarQuickFilterDeleteIconLabel: 'Clear',
   // Export selector toolbar button text
   toolbarExport: 'تصدير',
   toolbarExportLabel: 'تصدير',
   toolbarExportCSV: 'تنزيل كملف CSV',
   // toolbarExportPrint: 'Print',
+  // toolbarExportExcel: 'Download as Excel',
   // Columns panel text
   columnsPanelTextFieldLabel: 'البحث عن العمود',
   columnsPanelTextFieldPlaceholder: 'عنوان العمود',
@@ -112,7 +117,9 @@ const arSDGrid = {
   unGroupColumn: name => `إيقاف التجميع حسب ${name}`,
   // Master/detail
   expandDetailPanel: 'توسيع',
-  collapseDetailPanel: 'طوي'
+  collapseDetailPanel: 'طوي' // Row reordering text
+  // rowReorderingHeaderName: 'Row reordering',
+
 };
 const arSD = (0, _getGridLocalization.getGridLocalization)(arSDGrid, _locale.arSD);
 exports.arSD = arSD;