@mui/x-data-grid 5.8.0 → 5.11.0

package/hooks/features/selection/useGridSelection.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { GridEvents } from '../../../models/events';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
@@ -13,6 +12,7 @@ import { GRID_CHECKBOX_SELECTION_COL_DEF, GRID_ACTIONS_COLUMN_TYPE } from '../..
 import { GridCellModes } from '../../../models/gridEditRowModel';
 import { isKeyboardEvent, isNavigationKey } from '../../../utils/keyboardUtils';
 import { getVisibleRows, useGridVisibleRows } from '../../utils/useGridVisibleRows';
+import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../../../constants/gridDetailPanelToggleField';
 
 const getSelectionModelPropValue = (selectionModelProp, prevSelectionModel) => {
   if (selectionModelProp == null) {
@@ -55,7 +55,7 @@ export const useGridSelection = (apiRef, props) => {
     propModel: propSelectionModel,
     propOnChange: props.onSelectionModelChange,
     stateSelector: gridSelectionStateSelector,
-    changeEvent: GridEvents.selectionChange
+    changeEvent: 'selectionChange'
   });
   const {
     checkboxSelection,
@@ -197,6 +197,10 @@ export const useGridSelection = (apiRef, props) => {
    */
 
   const removeOutdatedSelection = React.useCallback(() => {
+    if (props.keepNonExistentRowsSelected) {
+      return;
+    }
+
     const currentSelection = gridSelectionStateSelector(apiRef.current.state);
     const rowsLookup = gridRowsLookupSelector(apiRef); // We clone the existing object to avoid mutating the same object returned by the selector to others part of the project
 
@@ -213,12 +217,12 @@ export 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 && !isKeyboardEvent(event);
     const resetSelection = !canHaveMultipleSelection || isMultipleSelectionDisabled;
@@ -240,7 +244,7 @@ export const useGridSelection = (apiRef, props) => {
       return;
     }
 
-    if (params.field === '__detail_panel_toggle__') {
+    if (params.field === GRID_DETAIL_PANEL_TOGGLE_FIELD) {
       // click to open the detail panel should not select the row
       return;
     }
@@ -348,12 +352,12 @@ export const useGridSelection = (apiRef, props) => {
       selectRows(apiRef.current.getAllRowIds(), true);
     }
   }, [apiRef, handleSingleRowSelection, selectRows, visibleRows.rows, canHaveMultipleSelection]);
-  useGridApiEventHandler(apiRef, GridEvents.visibleRowsSet, removeOutdatedSelection);
-  useGridApiEventHandler(apiRef, GridEvents.cellClick, handleCellClick);
-  useGridApiEventHandler(apiRef, GridEvents.rowSelectionCheckboxChange, handleRowSelectionCheckboxChange);
-  useGridApiEventHandler(apiRef, GridEvents.headerSelectionCheckboxChange, handleHeaderSelectionCheckboxChange);
-  useGridApiEventHandler(apiRef, GridEvents.cellMouseDown, preventSelectionOnShift);
-  useGridApiEventHandler(apiRef, GridEvents.cellKeyDown, handleCellKeyDown);
+  useGridApiEventHandler(apiRef, 'sortedRowsSet', removeOutdatedSelection);
+  useGridApiEventHandler(apiRef, 'cellClick', handleCellClick);
+  useGridApiEventHandler(apiRef, 'rowSelectionCheckboxChange', handleRowSelectionCheckboxChange);
+  useGridApiEventHandler(apiRef, 'headerSelectionCheckboxChange', handleHeaderSelectionCheckboxChange);
+  useGridApiEventHandler(apiRef, 'cellMouseDown', preventSelectionOnShift);
+  useGridApiEventHandler(apiRef, 'cellKeyDown', handleCellKeyDown);
   /**
    * EFFECTS
    */

package/hooks/features/sorting/useGridSorting.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { GridEvents } from '../../../models/events';
 import { GridFeatureModeConstant } from '../../../models/gridFeatureMode';
 import { isEnterKey } from '../../../utils/keyboardUtils';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
@@ -36,7 +35,7 @@ export const useGridSorting = (apiRef, props) => {
     propModel: props.sortModel,
     propOnChange: props.onSortModelChange,
     stateSelector: gridSortModelSelector,
-    changeEvent: GridEvents.sortModelChange
+    changeEvent: 'sortModelChange'
   });
   const upsertSortModel = React.useCallback((field, sortItem) => {
     const sortModel = gridSortModelSelector(apiRef);
@@ -80,17 +79,16 @@ export const useGridSorting = (apiRef, props) => {
    */
 
   const applySorting = React.useCallback(() => {
-    if (props.sortingMode === GridFeatureModeConstant.server) {
-      logger.debug('Skipping sorting rows as sortingMode = server');
-      apiRef.current.setState(state => _extends({}, state, {
-        sorting: _extends({}, state.sorting, {
-          sortedRows: gridRowIdsSelector(state, apiRef.current.instanceId)
-        })
-      }));
-      return;
-    }
-
     apiRef.current.setState(state => {
+      if (props.sortingMode === GridFeatureModeConstant.server) {
+        logger.debug('Skipping sorting rows as sortingMode = server');
+        return _extends({}, state, {
+          sorting: _extends({}, state.sorting, {
+            sortedRows: gridRowIdsSelector(state, apiRef.current.instanceId)
+          })
+        });
+      }
+
       const sortModel = gridSortModelSelector(state, apiRef.current.instanceId);
       const sortRowList = buildAggregatedSortingApplier(sortModel, apiRef);
       const sortedRows = apiRef.current.unstable_applyStrategyProcessor('sorting', {
@@ -102,6 +100,7 @@ export const useGridSorting = (apiRef, props) => {
         })
       });
     });
+    apiRef.current.publishEvent('sortedRowsSet');
     apiRef.current.forceUpdate();
   }, [apiRef, logger, props.sortingMode]);
   const setSortModel = React.useCallback(model => {
@@ -204,7 +203,7 @@ export const useGridSorting = (apiRef, props) => {
   const handleColumnHeaderKeyDown = React.useCallback(({
     colDef
   }, event) => {
-    // CTRL + Enter opens the column menu
+    // Ctrl + Enter opens the column menu
     if (isEnterKey(event.key) && !event.ctrlKey && !event.metaKey) {
       sortColumn(colDef, undefined, event.shiftKey);
     }
@@ -227,11 +226,11 @@ export const useGridSorting = (apiRef, props) => {
       apiRef.current.applySorting();
     }
   }, [apiRef]);
-  useGridApiEventHandler(apiRef, GridEvents.columnHeaderClick, handleColumnHeaderClick);
-  useGridApiEventHandler(apiRef, GridEvents.columnHeaderKeyDown, handleColumnHeaderKeyDown);
-  useGridApiEventHandler(apiRef, GridEvents.rowsSet, apiRef.current.applySorting);
-  useGridApiEventHandler(apiRef, GridEvents.columnsChange, handleColumnsChange);
-  useGridApiEventHandler(apiRef, GridEvents.activeStrategyProcessorChange, handleStrategyProcessorChange);
+  useGridApiEventHandler(apiRef, 'columnHeaderClick', handleColumnHeaderClick);
+  useGridApiEventHandler(apiRef, 'columnHeaderKeyDown', handleColumnHeaderKeyDown);
+  useGridApiEventHandler(apiRef, 'rowsSet', apiRef.current.applySorting);
+  useGridApiEventHandler(apiRef, 'columnsChange', handleColumnsChange);
+  useGridApiEventHandler(apiRef, 'activeStrategyProcessorChange', handleStrategyProcessorChange);
   /**
    * 1ST RENDER
    */

package/hooks/features/virtualization/useGridVirtualScroller.d.ts

@@ -2,6 +2,13 @@ import * as React from 'react';
 import { GridRenderContext } from '../../../models';
 import { GridRowId, GridRowModel } from '../../../models/gridRows';
 export declare function getIndexFromScroll(offset: number, positions: number[], sliceStart?: number, sliceEnd?: number): number;
+export declare const getRenderableIndexes: ({ firstIndex, lastIndex, buffer, minFirstIndex, maxLastIndex, }: {
+    firstIndex: number;
+    lastIndex: number;
+    buffer: number;
+    minFirstIndex: number;
+    maxLastIndex: number;
+}) => number[];
 interface UseGridVirtualScrollerProps {
     ref: React.Ref<HTMLDivElement>;
     disableVirtualization?: boolean;
@@ -27,6 +34,8 @@ export declare const useGridVirtualScroller: (props: UseGridVirtualScrollerProps
     }) => {
         ref: React.Ref<HTMLDivElement>;
         onScroll: (event: React.UIEvent) => void;
+        onWheel: (event: React.WheelEvent) => void;
+        onTouchMove: (event: React.TouchEvent) => void;
         style: {
             accentColor?: import("csstype").Property.AccentColor | undefined;
             alignContent?: import("csstype").Property.AlignContent | undefined;

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -2,6 +2,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["style"];
 import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 import { useForkRef } from '@mui/material/utils';
 import { useGridApiContext } from '../../utils/useGridApiContext';
 import { useGridRootProps } from '../../utils/useGridRootProps';
@@ -11,13 +12,13 @@ import { gridDensityRowHeightSelector } from '../density/densitySelector';
 import { gridFocusCellSelector, gridTabIndexCellSelector } from '../focus/gridFocusStateSelector';
 import { gridEditRowsStateSelector } from '../editRows/gridEditRowsSelector';
 import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
-import { GridEvents } from '../../../models/events';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { clamp } from '../../../utils/utils';
 import { selectedIdsLookupSelector } from '../selection/gridSelectionSelector';
 import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
+import { getFirstNonSpannedColumnToRender } from '../columns/gridColumnsUtils'; // Uses binary search to avoid looping through all possible positions
+
 import { jsx as _jsx } from "react/jsx-runtime";
-// Uses binary search to avoid looping through all possible positions
 export function getIndexFromScroll(offset, positions, sliceStart = 0, sliceEnd = positions.length) {
   if (positions.length <= 0) {
     return -1;
@@ -31,9 +32,16 @@ export function getIndexFromScroll(offset, positions, sliceStart = 0, sliceEnd =
   const itemOffset = positions[pivot];
   return offset <= itemOffset ? getIndexFromScroll(offset, positions, sliceStart, pivot) : getIndexFromScroll(offset, positions, pivot + 1, sliceEnd);
 }
+export const getRenderableIndexes = ({
+  firstIndex,
+  lastIndex,
+  buffer,
+  minFirstIndex,
+  maxLastIndex
+}) => {
+  return [clamp(firstIndex - buffer, minFirstIndex, maxLastIndex), clamp(lastIndex + buffer, minFirstIndex, maxLastIndex)];
+};
 export const useGridVirtualScroller = props => {
-  var _currentPage$range2;
-
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
@@ -107,35 +115,29 @@ export const useGridVirtualScroller = props => {
       setContainerWidth(rootRef.current.clientWidth);
     }
   }, []);
-  useGridApiEventHandler(apiRef, GridEvents.resize, handleResize);
-
-  const getRenderableIndexes = ({
-    firstIndex,
-    lastIndex,
-    buffer,
-    minFirstIndex,
-    maxLastIndex
-  }) => {
-    return [clamp(firstIndex - buffer, minFirstIndex, maxLastIndex), clamp(lastIndex + buffer, minFirstIndex, maxLastIndex)];
-  };
-
+  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 = getFirstNonSpannedColumnToRender({
+      firstColumnToRender: initialFirstColumnToRender,
+      apiRef,
+      firstRowToRender,
+      lastRowToRender,
+      visibleRows: currentPage.rows
+    });
     const top = gridRowsMetaSelector(apiRef.current.state).positions[firstRowToRender];
     const left = gridColumnPositionsSelector(apiRef)[firstColumnToRender]; // Call directly the selector because it might be outdated when this method is called
 
@@ -147,19 +149,22 @@ export 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,
@@ -170,7 +175,7 @@ export const useGridVirtualScroller = props => {
       left,
       renderContext: initialRenderContext
     };
-    apiRef.current.publishEvent(GridEvents.rowsScroll, params);
+    apiRef.current.publishEvent('rowsScroll', params);
   }, [apiRef, computeRenderContext, containerWidth, updateRenderContext]);
 
   const handleScroll = event => {
@@ -193,18 +198,29 @@ export 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(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
   }) => {
@@ -228,14 +244,32 @@ export 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 = getFirstNonSpannedColumnToRender({
+      firstColumnToRender: initialFirstColumnToRender,
+      apiRef,
+      firstRowToRender,
+      lastRowToRender,
+      visibleRows: currentPage.rows
+    });
     const renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender);
     const rows = [];
 
@@ -307,7 +341,7 @@ export const useGridVirtualScroller = props => {
     return size;
   }, [rootRef, columnsTotalWidth, rowsMeta.currentPageTotalHeight, currentPage.rows.length, needsHorizontalScrollbar, rootProps.autoHeight, rowHeight]);
   React.useEffect(() => {
-    apiRef.current.publishEvent(GridEvents.virtualScrollerContentSizeChange);
+    apiRef.current.publishEvent('virtualScrollerContentSizeChange');
   }, [apiRef, contentSize]);
 
   if (rootProps.autoHeight && currentPage.rows.length === 0) {
@@ -337,6 +371,8 @@ export const useGridVirtualScroller = props => {
       return _extends({
         ref: handleRef,
         onScroll: handleScroll,
+        onWheel: handleWheel,
+        onTouchMove: handleTouchMove,
         style: _extends({}, style, rootStyle)
       }, other);
     },

package/hooks/utils/useGridApiEventHandler.d.ts

@@ -11,7 +11,10 @@ declare enum GridSignature {
     DataGrid = "DataGrid",
     DataGridPro = "DataGridPro"
 }
-export declare function createUseGridApiEventHandler(registry: CleanupTracking): <Api extends GridApiCommon, E extends keyof import("../../models").GridEventLookup>(apiRef: React.MutableRefObject<Api>, eventName: E, handler?: GridEventListener<E> | undefined, options?: EventListenerOptions | undefined) => void;
+interface RegistryContainer {
+    registry: CleanupTracking | null;
+}
+export declare function createUseGridApiEventHandler(registryContainer: RegistryContainer): <Api extends GridApiCommon, E extends keyof import("../../models").GridEventLookup>(apiRef: React.MutableRefObject<Api>, eventName: E, handler?: GridEventListener<E> | undefined, options?: EventListenerOptions | undefined) => void;
 export declare const unstable_resetCleanupTracking: () => void;
 export declare const useGridApiEventHandler: <Api extends GridApiCommon, E extends keyof import("../../models").GridEventLookup>(apiRef: React.MutableRefObject<Api>, eventName: E, handler?: GridEventListener<E> | undefined, options?: EventListenerOptions | undefined) => void;
 export declare function useGridApiOptionHandler<Api extends GridApiCommon, E extends GridEventsStr>(apiRef: React.MutableRefObject<Api>, eventName: E, handler?: GridEventListener<E>): void;

package/hooks/utils/useGridApiEventHandler.js

@@ -6,20 +6,25 @@ import { FinalizationRegistryBasedCleanupTracking } from '../../utils/cleanupTra
  * 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;
 
 (function (GridSignature) {
   GridSignature["DataGrid"] = "DataGrid";
   GridSignature["DataGridPro"] = "DataGridPro";
 })(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
 
 
-export function createUseGridApiEventHandler(registry) {
+export function createUseGridApiEventHandler(registryContainer) {
   let cleanupTokensCounter = 0;
   return function useGridApiEventHandler(apiRef, eventName, handler, options) {
+    if (registryContainer.registry === null) {
+      registryContainer.registry = typeof FinalizationRegistry !== 'undefined' ? new FinalizationRegistryBasedCleanupTracking() : new TimerBasedCleanupTracking();
+    }
+
     const [objectRetainedByReact] = React.useState(new ObjectToBeRetainedByReact());
     const subscription = React.useRef(null);
     const handlerRef = React.useRef();
@@ -40,7 +45,7 @@ export 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;
 
@@ -53,7 +58,7 @@ export function createUseGridApiEventHandler(registry) {
       subscription.current = null;
 
       if (cleanupTokenRef.current) {
-        registry.unregister(cleanupTokenRef.current);
+        registryContainer.registry.unregister(cleanupTokenRef.current);
         cleanupTokenRef.current = null;
       }
     }
@@ -71,10 +76,10 @@ export 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;
       }
 
@@ -87,10 +92,18 @@ export function createUseGridApiEventHandler(registry) {
     }, [apiRef, eventName, options]);
   };
 }
-const registry = typeof FinalizationRegistry !== 'undefined' ? new FinalizationRegistryBasedCleanupTracking() : new 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
 
-export const unstable_resetCleanupTracking = () => registry.reset();
-export const useGridApiEventHandler = createUseGridApiEventHandler(registry);
+export const unstable_resetCleanupTracking = () => {
+  var _registryContainer$re;
+
+  (_registryContainer$re = registryContainer.registry) == null ? void 0 : _registryContainer$re.reset();
+  registryContainer.registry = null;
+};
+export const useGridApiEventHandler = createUseGridApiEventHandler(registryContainer);
 const optionsSubscriberOptions = {
   isFirst: true
 };

package/hooks/utils/useGridNativeEventListener.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { GridEvents } from '../../models/events';
 import { isFunction } from '../../utils/utils';
 import { useGridLogger } from './useGridLogger';
 export const useGridNativeEventListener = (apiRef, ref, eventName, handler, options) => {
@@ -32,7 +31,7 @@ export const useGridNativeEventListener = (apiRef, ref, eventName, handler, opti
         boundElem.removeEventListener(eventName, wrapHandler, options);
       };
 
-      apiRef.current.subscribeEvent(GridEvents.unmount, unsubscribe);
+      apiRef.current.subscribeEvent('unmount', unsubscribe);
     }
   }, [ref, wrapHandler, eventName, added, logger, options, apiRef]);
 };

package/hooks/utils/useGridSelector.js

@@ -1,7 +1,7 @@
 import { buildWarning } from '../../utils/warning';
 
 function isOutputSelector(selector) {
-  return selector.cache;
+  return selector.acceptsApiRef;
 }
 
 const stateNotInitializedWarning = 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/index.d.ts

@@ -14,6 +14,8 @@ export * from './context';
 export * from './colDef';
 export * from './utils';
 export type { DataGridProps, GridExperimentalFeatures } from './models/props/DataGridProps';
+export type { GridToolbarExportProps } from './components/toolbar/GridToolbarExport';
+export type { GridExportFormat, GridExportExtension } from './models/gridExport';
 /**
  * The full grid API.
  */

package/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/internals/index.d.ts

@@ -12,6 +12,7 @@ export { useGridClipboard } from '../hooks/features/clipboard/useGridClipboard';
 export { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridColumnHeaders';
 export { useGridColumnMenu, columnMenuStateInitializer, } from '../hooks/features/columnMenu/useGridColumnMenu';
 export { useGridColumns, columnsStateInitializer } from '../hooks/features/columns/useGridColumns';
+export { useGridColumnSpanning } from '../hooks/features/columns/useGridColumnSpanning';
 export type { GridColumnRawLookup, GridColumnsRawState, GridHydrateColumnsValue, } from '../hooks/features/columns/gridColumnsInterfaces';
 export { useGridDensity, densityStateInitializer } from '../hooks/features/density/useGridDensity';
 export { useGridCsvExport } from '../hooks/features/export/useGridCsvExport';
@@ -43,8 +44,11 @@ export { useGridVisibleRows } from '../hooks/utils/useGridVisibleRows';
 export { useGridInitializeState } from '../hooks/utils/useGridInitializeState';
 export type { GridStateInitializer } from '../hooks/utils/useGridInitializeState';
 export type { GridExperimentalFeatures, DataGridPropsWithoutDefaultValue, DataGridPropsWithDefaultValues, DataGridPropsWithComplexDefaultValueAfterProcessing, DataGridPropsWithComplexDefaultValueBeforeProcessing, } from '../models/props/DataGridProps';
-export { createSelector } from '../utils/createSelector';
+export { getColumnsToExport, defaultGetRowsToExport } from '../hooks/features/export/utils';
+export { createSelector, unstable_resetCreateSelectorCache } from '../utils/createSelector';
 export { findParentElementFromClassName } from '../utils/domUtils';
 export { isNavigationKey } from '../utils/keyboardUtils';
 export { clamp, isDeepEqual } from '../utils/utils';
+export { buildWarning } from '../utils/warning';
+export { exportAs } from '../utils/exportAs';
 export type { GridApiCommunity } from '../models/api/gridApiCommunity';

package/internals/index.js

@@ -10,6 +10,7 @@ export { useGridClipboard } from '../hooks/features/clipboard/useGridClipboard';
 export { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridColumnHeaders';
 export { useGridColumnMenu, columnMenuStateInitializer } from '../hooks/features/columnMenu/useGridColumnMenu';
 export { useGridColumns, columnsStateInitializer } from '../hooks/features/columns/useGridColumns';
+export { useGridColumnSpanning } from '../hooks/features/columns/useGridColumnSpanning';
 export { useGridDensity, densityStateInitializer } from '../hooks/features/density/useGridDensity';
 export { useGridCsvExport } from '../hooks/features/export/useGridCsvExport';
 export { useGridPrintExport } from '../hooks/features/export/useGridPrintExport';
@@ -34,7 +35,10 @@ export { useGridStatePersistence } from '../hooks/features/statePersistence/useG
 export { useGridVirtualScroller } from '../hooks/features/virtualization/useGridVirtualScroller';
 export { useGridVisibleRows } from '../hooks/utils/useGridVisibleRows';
 export { useGridInitializeState } from '../hooks/utils/useGridInitializeState';
-export { createSelector } from '../utils/createSelector';
+export { getColumnsToExport, defaultGetRowsToExport } from '../hooks/features/export/utils';
+export { createSelector, unstable_resetCreateSelectorCache } from '../utils/createSelector';
 export { findParentElementFromClassName } from '../utils/domUtils';
 export { isNavigationKey } from '../utils/keyboardUtils';
-export { clamp, isDeepEqual } from '../utils/utils';
+export { clamp, isDeepEqual } from '../utils/utils';
+export { buildWarning } from '../utils/warning';
+export { exportAs } from '../utils/exportAs';

package/legacy/DataGrid/DataGrid.js

@@ -58,6 +58,11 @@ DataGridRaw.propTypes = {
    */
   autoPageSize: PropTypes.bool,
 
+  /**
+   * Controls the modes of the cells.
+   */
+  cellModesModel: PropTypes.object,
+
   /**
    * If `true`, the grid get a first column with a checkbox that allows to select rows.
    * @default false
@@ -207,7 +212,9 @@ DataGridRaw.propTypes = {
       operatorValue: PropTypes.string,
       value: PropTypes.any
     })).isRequired,
-    linkOperator: PropTypes.oneOf(['and', 'or'])
+    linkOperator: PropTypes.oneOf(['and', 'or']),
+    quickFilterLogicOperator: PropTypes.oneOf(['and', 'or']),
+    quickFilterValues: PropTypes.array
   }),
 
   /**
@@ -295,6 +302,14 @@ DataGridRaw.propTypes = {
    */
   isRowSelectable: PropTypes.func,
 
+  /**
+   * If `true`, the selection model will retain selected rows that do not exist.
+   * Useful when using server side pagination and row selections need to be retained
+   * when changing pages.
+   * @default false
+   */
+  keepNonExistentRowsSelected: PropTypes.bool,
+
   /**
    * If `true`, a  loading overlay is displayed.
    */
@@ -382,6 +397,13 @@ DataGridRaw.propTypes = {
    */
   onCellKeyDown: PropTypes.func,
 
+  /**
+   * Callback fired when the `cellModesModel` prop changes.
+   * @param {GridCellModesModel} cellModesModel Object containig which cells are in "edit" mode.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onCellModesModelChange: PropTypes.func,
+
   /**
    * Callback fired when a click event comes from a column header element.
    * @param {GridColumnHeaderParams} params With all properties from [[GridColumnHeaderParams]].
@@ -460,7 +482,7 @@ DataGridRaw.propTypes = {
    * @param {GridEditCellPropsParams} params With all properties from [[GridEditCellPropsParams]].
    * @param {MuiEvent<React.SyntheticEvent>} event The event that caused this prop to be called.
    * @param {GridCallbackDetails} details Additional details for this callback.
-   * @deprecated use `preProcessEditCellProps` from the [`GridColDef`](/api/data-grid/grid-col-def/)
+   * @deprecated use `preProcessEditCellProps` from the [`GridColDef`](/x/api/data-grid/grid-col-def/)
    */
   onEditCellPropsChange: PropTypes.func,
 
@@ -568,6 +590,13 @@ DataGridRaw.propTypes = {
    */
   onRowEditStop: PropTypes.func,
 
+  /**
+   * Callback fired when the `rowModesModel` prop changes.
+   * @param {GridRowModesModel} rowModesModel Object containig which rows are in "edit" mode.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onRowModesModelChange: PropTypes.func,
+
   /**
    * Callback fired when the selection state of one or multiple rows changes.
    * @param {GridSelectionModel} selectionModel With all the row ids [[GridSelectionModel]].
@@ -653,6 +682,11 @@ DataGridRaw.propTypes = {
    */
   rowHeight: PropTypes.number,
 
+  /**
+   * Controls the modes of the rows.
+   */
+  rowModesModel: PropTypes.object,
+
   /**
    * Set of rows of type [[GridRowsProp]].
    */