@mui/x-data-grid 5.4.0 → 5.6.0

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -0,0 +1,350 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["style"];
+import * as React from 'react';
+import { useForkRef } from '@mui/material/utils';
+import { useGridApiContext } from '../../utils/useGridApiContext';
+import { useGridRootProps } from '../../utils/useGridRootProps';
+import { useGridSelector } from '../../utils/useGridSelector';
+import { gridVisibleColumnDefinitionsSelector, gridColumnsTotalWidthSelector, gridColumnPositionsSelector } from '../columns/gridColumnsSelector';
+import { gridDensityRowHeightSelector } from '../density/densitySelector';
+import { gridFocusCellSelector, gridTabIndexCellSelector } from '../focus/gridFocusStateSelector';
+import { gridEditRowsStateSelector } from '../editRows/gridEditRowsSelector';
+import { useCurrentPageRows } from '../../utils/useCurrentPageRows';
+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 { 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;
+  }
+
+  if (sliceStart >= sliceEnd) {
+    return sliceStart;
+  }
+
+  const pivot = sliceStart + Math.floor((sliceEnd - sliceStart) / 2);
+  const itemOffset = positions[pivot];
+  return offset <= itemOffset ? getIndexFromScroll(offset, positions, sliceStart, pivot) : getIndexFromScroll(offset, positions, pivot + 1, sliceEnd);
+}
+export const useGridVirtualScroller = props => {
+  var _currentPage$range2;
+
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
+  const {
+    ref,
+    disableVirtualization,
+    onRenderZonePositioning,
+    renderZoneMinColumnIndex = 0,
+    renderZoneMaxColumnIndex = visibleColumns.length,
+    getRowProps
+  } = props;
+  const columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
+  const columnsTotalWidth = useGridSelector(apiRef, gridColumnsTotalWidthSelector);
+  const rowHeight = useGridSelector(apiRef, gridDensityRowHeightSelector);
+  const cellFocus = useGridSelector(apiRef, gridFocusCellSelector);
+  const cellTabIndex = useGridSelector(apiRef, gridTabIndexCellSelector);
+  const rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector);
+  const editRowsState = useGridSelector(apiRef, gridEditRowsStateSelector);
+  const selectedRowsLookup = useGridSelector(apiRef, selectedIdsLookupSelector);
+  const currentPage = useCurrentPageRows(apiRef, rootProps);
+  const renderZoneRef = React.useRef(null);
+  const rootRef = React.useRef(null);
+  const handleRef = useForkRef(ref, rootRef);
+  const [renderContext, setRenderContext] = React.useState(null);
+  const prevRenderContext = React.useRef(renderContext);
+  const scrollPosition = React.useRef({
+    top: 0,
+    left: 0
+  });
+  const [containerWidth, setContainerWidth] = React.useState(null);
+  const prevTotalWidth = React.useRef(columnsTotalWidth);
+  const computeRenderContext = React.useCallback(() => {
+    if (disableVirtualization) {
+      return {
+        firstRowIndex: 0,
+        lastRowIndex: currentPage.rows.length,
+        firstColumnIndex: 0,
+        lastColumnIndex: visibleColumns.length
+      };
+    }
+
+    const {
+      top,
+      left
+    } = scrollPosition.current;
+    const firstRowIndex = getIndexFromScroll(top, rowsMeta.positions);
+    const lastRowIndex = rootProps.autoHeight ? firstRowIndex + currentPage.rows.length : getIndexFromScroll(top + rootRef.current.clientHeight, rowsMeta.positions);
+    const firstColumnIndex = getIndexFromScroll(left, columnPositions);
+    const lastColumnIndex = getIndexFromScroll(left + containerWidth, columnPositions);
+    return {
+      firstRowIndex,
+      lastRowIndex,
+      firstColumnIndex,
+      lastColumnIndex
+    };
+  }, [disableVirtualization, rowsMeta.positions, rootProps.autoHeight, currentPage.rows.length, columnPositions, containerWidth, visibleColumns.length]);
+  React.useEffect(() => {
+    if (disableVirtualization) {
+      renderZoneRef.current.style.transform = `translate3d(0px, 0px, 0px)`;
+    } else {
+      // TODO a scroll reset should not be necessary
+      rootRef.current.scrollLeft = 0;
+      rootRef.current.scrollTop = 0;
+    }
+  }, [disableVirtualization]);
+  React.useEffect(() => {
+    setContainerWidth(rootRef.current.clientWidth);
+  }, [rowsMeta.currentPageTotalHeight]);
+  const handleResize = React.useCallback(() => {
+    if (rootRef.current) {
+      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)];
+  };
+
+  const updateRenderZonePosition = React.useCallback(nextRenderContext => {
+    var _currentPage$range;
+
+    const [firstRowToRender] = getRenderableIndexes({
+      firstIndex: nextRenderContext.firstRowIndex,
+      lastIndex: nextRenderContext.lastRowIndex,
+      minFirstIndex: 0,
+      maxLastIndex: (_currentPage$range = currentPage.range) == null ? void 0 : _currentPage$range.lastRowIndex,
+      buffer: rootProps.rowBuffer
+    });
+    const [firstColumnToRender] = getRenderableIndexes({
+      firstIndex: nextRenderContext.firstColumnIndex,
+      lastIndex: nextRenderContext.lastColumnIndex,
+      minFirstIndex: renderZoneMinColumnIndex,
+      maxLastIndex: renderZoneMaxColumnIndex,
+      buffer: rootProps.columnBuffer
+    });
+    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
+
+    renderZoneRef.current.style.transform = `translate3d(${left}px, ${top}px, 0px)`;
+
+    if (typeof onRenderZonePositioning === 'function') {
+      onRenderZonePositioning({
+        top,
+        left
+      });
+    }
+  }, [apiRef, (_currentPage$range2 = currentPage.range) == null ? void 0 : _currentPage$range2.lastRowIndex, onRenderZonePositioning, renderZoneMaxColumnIndex, renderZoneMinColumnIndex, rootProps.columnBuffer, rootProps.rowBuffer]);
+  const updateRenderContext = React.useCallback(nextRenderContext => {
+    setRenderContext(nextRenderContext);
+    updateRenderZonePosition(nextRenderContext);
+    prevRenderContext.current = nextRenderContext;
+  }, [setRenderContext, prevRenderContext, updateRenderZonePosition]);
+  React.useEffect(() => {
+    if (containerWidth == null) {
+      return;
+    }
+
+    const initialRenderContext = computeRenderContext();
+    prevRenderContext.current = initialRenderContext;
+    updateRenderContext(initialRenderContext);
+    const {
+      top,
+      left
+    } = scrollPosition.current;
+    const params = {
+      top,
+      left,
+      renderContext: initialRenderContext
+    };
+    apiRef.current.publishEvent(GridEvents.rowsScroll, params);
+  }, [apiRef, computeRenderContext, containerWidth, updateRenderContext]);
+
+  const handleScroll = event => {
+    const {
+      scrollTop,
+      scrollLeft
+    } = event.currentTarget;
+    scrollPosition.current.top = scrollTop;
+    scrollPosition.current.left = scrollLeft; // On iOS and macOS, negative offsets are possible when swiping past the start
+
+    if (scrollLeft < 0 || scrollTop < 0 || !prevRenderContext.current) {
+      return;
+    } // When virtualization is disabled, the context never changes during scroll
+
+
+    const nextRenderContext = disableVirtualization ? prevRenderContext.current : computeRenderContext();
+    const rowsScrolledSincePreviousRender = Math.abs(nextRenderContext.firstRowIndex - prevRenderContext.current.firstRowIndex);
+    const columnsScrolledSincePreviousRender = Math.abs(nextRenderContext.firstColumnIndex - prevRenderContext.current.firstColumnIndex);
+    const shouldSetState = rowsScrolledSincePreviousRender >= rootProps.rowThreshold || columnsScrolledSincePreviousRender >= 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, {
+      top: scrollTop,
+      left: scrollLeft,
+      renderContext: shouldSetState ? nextRenderContext : prevRenderContext.current
+    });
+
+    if (shouldSetState) {
+      updateRenderContext(nextRenderContext);
+      prevTotalWidth.current = columnsTotalWidth;
+    }
+  };
+
+  const getRows = (params = {
+    renderContext
+  }) => {
+    const {
+      renderContext: nextRenderContext,
+      minFirstColumn = renderZoneMinColumnIndex,
+      maxLastColumn = renderZoneMaxColumnIndex,
+      availableSpace = containerWidth
+    } = params;
+
+    if (!currentPage.range || !nextRenderContext || availableSpace == null) {
+      return null;
+    }
+
+    const rowBuffer = !disableVirtualization ? rootProps.rowBuffer : 0;
+    const columnBuffer = !disableVirtualization ? rootProps.columnBuffer : 0;
+    const [firstRowToRender, lastRowToRender] = getRenderableIndexes({
+      firstIndex: nextRenderContext.firstRowIndex,
+      lastIndex: nextRenderContext.lastRowIndex,
+      minFirstIndex: 0,
+      maxLastIndex: currentPage.rows.length,
+      buffer: rowBuffer
+    });
+    const [firstColumnToRender, lastColumnToRender] = getRenderableIndexes({
+      firstIndex: nextRenderContext.firstColumnIndex,
+      lastIndex: nextRenderContext.lastColumnIndex,
+      minFirstIndex: minFirstColumn,
+      maxLastIndex: maxLastColumn,
+      buffer: columnBuffer
+    });
+    const renderedRows = currentPage.rows.slice(firstRowToRender, lastRowToRender);
+    const renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender);
+    const rows = [];
+
+    for (let i = 0; i < renderedRows.length; i += 1) {
+      var _rootProps$components;
+
+      const {
+        id,
+        model
+      } = renderedRows[i];
+      const lastVisibleRowIndex = firstRowToRender + i === currentPage.rows.length - 1;
+      const targetRowHeight = apiRef.current.unstable_getRowHeight(id);
+      let isSelected;
+
+      if (selectedRowsLookup[id] == null) {
+        isSelected = false;
+      } else if (typeof rootProps.isRowSelectable === 'function') {
+        isSelected = rootProps.isRowSelectable(apiRef.current.getRowParams(id));
+      } else {
+        isSelected = true;
+      }
+
+      rows.push( /*#__PURE__*/_jsx(rootProps.components.Row, _extends({
+        row: model,
+        rowId: id,
+        rowHeight: targetRowHeight,
+        cellFocus: cellFocus // TODO move to inside the row
+        ,
+        cellTabIndex: cellTabIndex // TODO move to inside the row
+        ,
+        editRowsState: editRowsState // TODO move to inside the row
+        ,
+        renderedColumns: renderedColumns,
+        visibleColumns: visibleColumns,
+        firstColumnToRender: firstColumnToRender,
+        lastColumnToRender: lastColumnToRender,
+        selected: isSelected,
+        index: currentPage.range.firstRowIndex + nextRenderContext.firstRowIndex + i,
+        containerWidth: availableSpace,
+        isLastVisible: lastVisibleRowIndex
+      }, typeof getRowProps === 'function' ? getRowProps(id, model) : {}, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.row), id));
+    }
+
+    return rows;
+  };
+
+  const needsHorizontalScrollbar = containerWidth && columnsTotalWidth > containerWidth;
+  const contentSize = React.useMemo(() => {
+    // In cases where the columns exceed the available width,
+    // the horizontal scrollbar should be shown even when there're no rows.
+    // Keeping 1px as minimum height ensures that the scrollbar will visible if necessary.
+    const height = Math.max(rowsMeta.currentPageTotalHeight, 1);
+    let shouldExtendContent = false;
+
+    if (rootRef != null && rootRef.current && height <= (rootRef == null ? void 0 : rootRef.current.clientHeight)) {
+      shouldExtendContent = true;
+    }
+
+    const size = {
+      width: needsHorizontalScrollbar ? columnsTotalWidth : 'auto',
+      height,
+      minHeight: shouldExtendContent ? '100%' : 'auto'
+    };
+
+    if (rootProps.autoHeight && currentPage.rows.length === 0) {
+      size.height = 2 * rowHeight; // Give room to show the overlay when there's no row.
+    }
+
+    return size;
+  }, [rootRef, columnsTotalWidth, rowsMeta.currentPageTotalHeight, currentPage.rows.length, needsHorizontalScrollbar, rootProps.autoHeight, rowHeight]);
+  React.useEffect(() => {
+    apiRef.current.publishEvent(GridEvents.virtualScrollerContentSizeChange);
+  }, [apiRef, contentSize]);
+
+  if (rootProps.autoHeight && currentPage.rows.length === 0) {
+    contentSize.height = 2 * rowHeight; // Give room to show the overlay when there no rows.
+  }
+
+  const rootStyle = {};
+
+  if (!needsHorizontalScrollbar) {
+    rootStyle.overflowX = 'hidden';
+  }
+
+  const getRenderContext = React.useCallback(() => {
+    return prevRenderContext.current;
+  }, []);
+  apiRef.current.unstable_getRenderContext = getRenderContext;
+  return {
+    renderContext,
+    updateRenderZonePosition,
+    getRows,
+    getRootProps: (_ref = {}) => {
+      let {
+        style = {}
+      } = _ref,
+          other = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+      return _extends({
+        ref: handleRef,
+        onScroll: handleScroll,
+        style: _extends({}, style, rootStyle)
+      }, other);
+    },
+    getContentProps: ({
+      style = {}
+    } = {}) => ({
+      style: _extends({}, style, contentSize)
+    }),
+    getRenderZoneProps: () => ({
+      ref: renderZoneRef
+    })
+  };
+};

package/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export * from './features';
+export * from './utils';
+export * from './core';

package/hooks/index.js

@@ -0,0 +1,3 @@
+export * from './features';
+export * from './utils';
+export * from './core';

package/hooks/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/hooks/index.js",
+  "types": "./index.d.ts"
+}

package/hooks/utils/index.d.ts

@@ -0,0 +1,9 @@
+export * from './useGridApi';
+export * from './useGridApiEventHandler';
+export * from './useGridApiMethod';
+export * from './useGridLogger';
+export * from './useGridScrollFn';
+export * from './useGridSelector';
+export * from './useGridState';
+export * from './useGridNativeEventListener';
+export * from './useFirstRender';

package/hooks/utils/index.js

@@ -0,0 +1,9 @@
+export * from './useGridApi';
+export * from './useGridApiEventHandler';
+export * from './useGridApiMethod';
+export * from './useGridLogger';
+export * from './useGridScrollFn';
+export * from './useGridSelector';
+export * from './useGridState';
+export * from './useGridNativeEventListener';
+export * from './useFirstRender';

package/hooks/utils/useCurrentPageRows.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { DataGridProcessedProps } from '../../models/props/DataGridProps';
+import type { GridApiCommon, GridRowEntry } from '../../models';
+export declare const getCurrentPageRows: <Api extends GridApiCommon>(apiRef: React.MutableRefObject<Api>, props: Pick<DataGridProcessedProps, 'pagination' | 'paginationMode'>) => {
+    rows: GridRowEntry[];
+    range: {
+        firstRowIndex: number;
+        lastRowIndex: number;
+    } | null;
+};
+/**
+ * Compute the list of the rows in the current page
+ * - If the pagination is disabled or in server mode, it equals all the visible rows
+ * - If the row tree has several layers, it contains up to `state.pageSize` top level rows and all their descendants
+ * - If the row tree is flat, it only contains up to `state.pageSize` rows
+ */
+export declare const useCurrentPageRows: <Api extends GridApiCommon>(apiRef: React.MutableRefObject<Api>, props: Pick<DataGridProcessedProps, 'pagination' | 'paginationMode'>) => {
+    rows: GridRowEntry[];
+    range: {
+        firstRowIndex: number;
+        lastRowIndex: number;
+    } | null;
+};

package/hooks/utils/useCurrentPageRows.js

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { gridPaginationRowRangeSelector, gridPaginatedVisibleSortedGridRowEntriesSelector } from '../features/pagination/gridPaginationSelector';
+import { gridVisibleSortedRowEntriesSelector } from '../features/filter/gridFilterSelector';
+export const getCurrentPageRows = (apiRef, props) => {
+  let rows;
+  let range;
+
+  if (props.pagination && props.paginationMode === 'client') {
+    range = gridPaginationRowRangeSelector(apiRef);
+    rows = gridPaginatedVisibleSortedGridRowEntriesSelector(apiRef);
+  } else {
+    rows = gridVisibleSortedRowEntriesSelector(apiRef);
+
+    if (rows.length === 0) {
+      range = null;
+    } else {
+      range = {
+        firstRowIndex: 0,
+        lastRowIndex: rows.length - 1
+      };
+    }
+  }
+
+  return {
+    rows,
+    range
+  };
+};
+/**
+ * Compute the list of the rows in the current page
+ * - If the pagination is disabled or in server mode, it equals all the visible rows
+ * - If the row tree has several layers, it contains up to `state.pageSize` top level rows and all their descendants
+ * - If the row tree is flat, it only contains up to `state.pageSize` rows
+ */
+
+export const useCurrentPageRows = (apiRef, props) => {
+  const response = getCurrentPageRows(apiRef, props);
+  return React.useMemo(() => ({
+    rows: response.rows,
+    range: response.range
+  }), [response.rows, response.range]);
+};

package/hooks/utils/useFirstRender.d.ts

@@ -0,0 +1 @@
+export declare const useFirstRender: (callback: () => void) => void;

package/hooks/utils/useFirstRender.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export const useFirstRender = callback => {
+  const isFirstRender = React.useRef(true);
+
+  if (isFirstRender.current) {
+    isFirstRender.current = false;
+    callback();
+  }
+};

package/hooks/utils/useGridApi.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { GridApiCommon } from '../../models/api/gridApiCommon';
+/**
+ * @deprecated Use `apiRef.current` instead.
+ */
+export declare const useGridApi: <Api extends GridApiCommon>(apiRef: React.MutableRefObject<Api>) => Api;

package/hooks/utils/useGridApi.js

@@ -0,0 +1,4 @@
+/**
+ * @deprecated Use `apiRef.current` instead.
+ */
+export const useGridApi = apiRef => apiRef.current;

package/hooks/utils/useGridApiContext.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { GridApiCommon } from '../../models/api/gridApiCommon';
+import { GridApiCommunity } from '../../models/api/gridApiCommunity';
+export declare function useGridApiContext<Api extends GridApiCommon = GridApiCommunity>(): React.MutableRefObject<Api>;

package/hooks/utils/useGridApiContext.js

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { GridApiContext } from '../../components/GridApiContext';
+export function useGridApiContext() {
+  const apiRef = React.useContext(GridApiContext);
+
+  if (apiRef === undefined) {
+    throw new Error(['MUI: Could not find the data grid context.', 'It looks like you rendered your component outside of a DataGrid or DataGridPro parent component.', 'This can also happen if you are bundling multiple versions of the data grid.'].join('\n'));
+  }
+
+  return apiRef;
+}

package/hooks/utils/useGridApiEventHandler.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { GridEventListener, GridEventsStr } from '../../models/events';
+import { CleanupTracking } from '../../utils/cleanupTracking/CleanupTracking';
+import { EventListenerOptions } from '../../utils/EventManager';
+import type { GridApiCommon } from '../../models';
+/**
+ * Signal to the underlying logic what version of the public component API
+ * of the data grid is exposed.
+ */
+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;
+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;
+export { GridSignature };

package/hooks/utils/useGridApiEventHandler.js

@@ -0,0 +1,101 @@
+import * as React from 'react';
+import { TimerBasedCleanupTracking } from '../../utils/cleanupTracking/TimerBasedCleanupTracking';
+import { FinalizationRegistryBasedCleanupTracking } from '../../utils/cleanupTracking/FinalizationRegistryBasedCleanupTracking';
+
+/**
+ * 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
+
+(function (GridSignature) {
+  GridSignature["DataGrid"] = "DataGrid";
+  GridSignature["DataGridPro"] = "DataGridPro";
+})(GridSignature || (GridSignature = {}));
+
+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) {
+  let cleanupTokensCounter = 0;
+  return function useGridApiEventHandler(apiRef, eventName, handler, options) {
+    const [objectRetainedByReact] = React.useState(new ObjectToBeRetainedByReact());
+    const subscription = React.useRef(null);
+    const handlerRef = React.useRef();
+    handlerRef.current = handler;
+    const cleanupTokenRef = React.useRef(null);
+
+    if (!subscription.current && handlerRef.current) {
+      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);
+        }
+      };
+
+      subscription.current = apiRef.current.subscribeEvent(eventName, enhancedHandler, options);
+      cleanupTokensCounter += 1;
+      cleanupTokenRef.current = {
+        cleanupToken: cleanupTokensCounter
+      };
+      registry.register(objectRetainedByReact, // 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 = null;
+        cleanupTokenRef.current = null;
+      }, cleanupTokenRef.current);
+    } else if (!handlerRef.current && subscription.current) {
+      subscription.current();
+      subscription.current = null;
+
+      if (cleanupTokenRef.current) {
+        registry.unregister(cleanupTokenRef.current);
+        cleanupTokenRef.current = null;
+      }
+    }
+
+    React.useEffect(() => {
+      if (!subscription.current && handlerRef.current) {
+        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);
+          }
+        };
+
+        subscription.current = apiRef.current.subscribeEvent(eventName, enhancedHandler, options);
+      }
+
+      if (cleanupTokenRef.current && 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);
+        cleanupTokenRef.current = null;
+      }
+
+      return () => {
+        var _subscription$current2;
+
+        (_subscription$current2 = subscription.current) == null ? void 0 : _subscription$current2.call(subscription);
+        subscription.current = null;
+      };
+    }, [apiRef, eventName, options]);
+  };
+}
+const registry = typeof FinalizationRegistry !== 'undefined' ? new FinalizationRegistryBasedCleanupTracking() : new TimerBasedCleanupTracking(); // eslint-disable-next-line @typescript-eslint/naming-convention
+
+export const unstable_resetCleanupTracking = () => registry.reset();
+export const useGridApiEventHandler = createUseGridApiEventHandler(registry);
+const optionsSubscriberOptions = {
+  isFirst: true
+};
+export function useGridApiOptionHandler(apiRef, eventName, handler) {
+  // Validate that only one per event name?
+  useGridApiEventHandler(apiRef, eventName, handler, optionsSubscriberOptions);
+}
+export { GridSignature };

package/hooks/utils/useGridApiMethod.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { GridApiCommon } from '../../models/api/gridApiCommon';
+export declare function useGridApiMethod<Api extends GridApiCommon, T extends Partial<Api>>(apiRef: React.MutableRefObject<Api>, apiMethods: T, apiName: string): void;

package/hooks/utils/useGridApiMethod.js

@@ -0,0 +1,25 @@
+import * as React from 'react';
+export function useGridApiMethod(apiRef, apiMethods, // TODO: Remove `apiName
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+apiName) {
+  const apiMethodsRef = React.useRef(apiMethods);
+  const [apiMethodsNames] = React.useState(Object.keys(apiMethods));
+  const installMethods = React.useCallback(() => {
+    if (!apiRef.current) {
+      return;
+    }
+
+    apiMethodsNames.forEach(methodName => {
+      if (!apiRef.current.hasOwnProperty(methodName)) {
+        apiRef.current[methodName] = (...args) => apiMethodsRef.current[methodName](...args);
+      }
+    });
+  }, [apiMethodsNames, apiRef]);
+  React.useEffect(() => {
+    apiMethodsRef.current = apiMethods;
+  }, [apiMethods]);
+  React.useEffect(() => {
+    installMethods();
+  }, [installMethods]);
+  installMethods();
+}

package/hooks/utils/useGridApiRef.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { GridApiCommon } from '../../models';
+import { GridApiCommunity } from '../../models/api/gridApiCommunity';
+/**
+ * Hook that instantiate a [[GridApiRef]].
+ */
+export declare const useGridApiRef: <Api extends GridApiCommon = GridApiCommunity>() => React.MutableRefObject<Api>;

package/hooks/utils/useGridApiRef.js

@@ -0,0 +1,6 @@
+import * as React from 'react';
+
+/**
+ * Hook that instantiate a [[GridApiRef]].
+ */
+export const useGridApiRef = () => React.useRef({});