@mui/x-data-grid-pro 5.5.1 → 5.7.0

package/legacy/hooks/features/columnResize/useGridColumnResize.js

@@ -0,0 +1,310 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { ownerDocument, useEventCallback } from '@mui/material/utils';
+import { GridEvents, gridClasses, GridColumnHeaderSeparatorSides, useGridApiEventHandler, useGridApiOptionHandler, useGridNativeEventListener, useGridLogger } from '@mui/x-data-grid';
+import { clamp, findParentElementFromClassName } from '@mui/x-data-grid/internals';
+import { findGridCellElementsFromCol, getFieldFromHeaderElem, findHeaderElementFromField } from '../../../utils/domUtils';
+// TODO: remove support for Safari < 13.
+// https://caniuse.com/#search=touch-action
+//
+// Safari, on iOS, supports touch action since v13.
+// Over 80% of the iOS phones are compatible
+// in August 2020.
+// Utilizing the CSS.supports method to check if touch-action is supported.
+// Since CSS.supports is supported on all but Edge@12 and IE and touch-action
+// is supported on both Edge@12 and IE if CSS.supports is not available that means that
+// touch-action will be supported
+var cachedSupportsTouchActionNone = false;
+
+function doesSupportTouchActionNone() {
+  if (cachedSupportsTouchActionNone === undefined) {
+    if (typeof CSS !== 'undefined' && typeof CSS.supports === 'function') {
+      cachedSupportsTouchActionNone = CSS.supports('touch-action', 'none');
+    } else {
+      cachedSupportsTouchActionNone = true;
+    }
+  }
+
+  return cachedSupportsTouchActionNone;
+}
+
+function trackFinger(event, currentTouchId) {
+  if (currentTouchId !== undefined && event.changedTouches) {
+    for (var i = 0; i < event.changedTouches.length; i += 1) {
+      var touch = event.changedTouches[i];
+
+      if (touch.identifier === currentTouchId) {
+        return {
+          x: touch.clientX,
+          y: touch.clientY
+        };
+      }
+    }
+
+    return false;
+  }
+
+  return {
+    x: event.clientX,
+    y: event.clientY
+  };
+}
+
+function computeNewWidth(initialOffsetToSeparator, clickX, columnBounds, separatorSide) {
+  var newWidth = initialOffsetToSeparator;
+
+  if (separatorSide === GridColumnHeaderSeparatorSides.Right) {
+    newWidth += clickX - columnBounds.left;
+  } else {
+    newWidth += columnBounds.right - clickX;
+  }
+
+  return newWidth;
+}
+
+function computeOffsetToSeparator(clickX, columnBounds, separatorSide) {
+  if (separatorSide === GridColumnHeaderSeparatorSides.Left) {
+    return clickX - columnBounds.left;
+  }
+
+  return columnBounds.right - clickX;
+}
+
+function getSeparatorSide(element) {
+  return element.classList.contains(gridClasses['columnSeparator--sideRight']) ? GridColumnHeaderSeparatorSides.Right : GridColumnHeaderSeparatorSides.Left;
+}
+
+export var columnResizeStateInitializer = function columnResizeStateInitializer(state) {
+  return _extends({}, state, {
+    columnResize: {
+      resizingColumnField: ''
+    }
+  });
+};
+/**
+ * Only available in DataGridPro
+ * @requires useGridColumns (method, event)
+ * TODO: improve experience for last column
+ */
+
+export var useGridColumnResize = function useGridColumnResize(apiRef, props) {
+  var logger = useGridLogger(apiRef, 'useGridColumnResize');
+  var colDefRef = React.useRef();
+  var colElementRef = React.useRef();
+  var colCellElementsRef = React.useRef(); // To improve accessibility, the separator has padding on both sides.
+  // Clicking inside the padding area should be treated as a click in the separator.
+  // This ref stores the offset between the click and the separator.
+
+  var initialOffsetToSeparator = React.useRef();
+  var separatorSide = React.useRef();
+  var stopResizeEventTimeout = React.useRef();
+  var touchId = React.useRef();
+
+  var updateWidth = function updateWidth(newWidth) {
+    logger.debug("Updating width to ".concat(newWidth, " for col ").concat(colDefRef.current.field));
+    colDefRef.current.computedWidth = newWidth;
+    colDefRef.current.width = newWidth;
+    colDefRef.current.flex = undefined;
+    colElementRef.current.style.width = "".concat(newWidth, "px");
+    colElementRef.current.style.minWidth = "".concat(newWidth, "px");
+    colElementRef.current.style.maxWidth = "".concat(newWidth, "px");
+    colCellElementsRef.current.forEach(function (element) {
+      var div = element;
+      div.style.width = "".concat(newWidth, "px");
+      div.style.minWidth = "".concat(newWidth, "px");
+      div.style.maxWidth = "".concat(newWidth, "px");
+    });
+  };
+
+  var handleResizeMouseUp = useEventCallback(function (nativeEvent) {
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    stopListening();
+    apiRef.current.updateColumn(colDefRef.current);
+    clearTimeout(stopResizeEventTimeout.current);
+    stopResizeEventTimeout.current = setTimeout(function () {
+      apiRef.current.publishEvent(GridEvents.columnResizeStop, null, nativeEvent);
+
+      if (colDefRef.current) {
+        var _colDefRef$current;
+
+        apiRef.current.publishEvent(GridEvents.columnWidthChange, {
+          element: colElementRef.current,
+          colDef: colDefRef.current,
+          width: (_colDefRef$current = colDefRef.current) == null ? void 0 : _colDefRef$current.computedWidth
+        }, nativeEvent);
+      }
+    });
+    logger.debug("Updating col ".concat(colDefRef.current.field, " with new width: ").concat(colDefRef.current.width));
+  });
+  var handleResizeMouseMove = useEventCallback(function (nativeEvent) {
+    // Cancel move in case some other element consumed a mouseup event and it was not fired.
+    if (nativeEvent.buttons === 0) {
+      handleResizeMouseUp(nativeEvent);
+      return;
+    }
+
+    var newWidth = computeNewWidth(initialOffsetToSeparator.current, nativeEvent.clientX, colElementRef.current.getBoundingClientRect(), separatorSide.current);
+    newWidth = clamp(newWidth, colDefRef.current.minWidth, colDefRef.current.maxWidth);
+    updateWidth(newWidth);
+    var params = {
+      element: colElementRef.current,
+      colDef: colDefRef.current,
+      width: newWidth
+    };
+    apiRef.current.publishEvent(GridEvents.columnResize, params, nativeEvent);
+  });
+  var handleColumnResizeMouseDown = useEventCallback(function (_ref, event) {
+    var _apiRef$current$colum;
+
+    var colDef = _ref.colDef;
+
+    // Only handle left clicks
+    if (event.button !== 0) {
+      return;
+    } // Skip if the column isn't resizable
+
+
+    if (!event.currentTarget.classList.contains(gridClasses['columnSeparator--resizable'])) {
+      return;
+    } // Avoid text selection
+
+
+    event.preventDefault();
+    logger.debug("Start Resize on col ".concat(colDef.field));
+    apiRef.current.publishEvent(GridEvents.columnResizeStart, {
+      field: colDef.field
+    }, event);
+    colDefRef.current = colDef;
+    colElementRef.current = (_apiRef$current$colum = apiRef.current.columnHeadersContainerElementRef) == null ? void 0 : _apiRef$current$colum.current.querySelector("[data-field=\"".concat(colDef.field, "\"]"));
+    colCellElementsRef.current = findGridCellElementsFromCol(colElementRef.current);
+    var doc = ownerDocument(apiRef.current.rootElementRef.current);
+    doc.body.style.cursor = 'col-resize';
+    separatorSide.current = getSeparatorSide(event.currentTarget);
+    initialOffsetToSeparator.current = computeOffsetToSeparator(event.clientX, colElementRef.current.getBoundingClientRect(), separatorSide.current);
+    doc.addEventListener('mousemove', handleResizeMouseMove);
+    doc.addEventListener('mouseup', handleResizeMouseUp);
+  });
+  var handleTouchEnd = useEventCallback(function (nativeEvent) {
+    var finger = trackFinger(nativeEvent, touchId.current);
+
+    if (!finger) {
+      return;
+    } // eslint-disable-next-line @typescript-eslint/no-use-before-define
+
+
+    stopListening();
+    apiRef.current.updateColumn(colDefRef.current);
+    clearTimeout(stopResizeEventTimeout.current);
+    stopResizeEventTimeout.current = setTimeout(function () {
+      apiRef.current.publishEvent(GridEvents.columnResizeStop, null, nativeEvent);
+    });
+    logger.debug("Updating col ".concat(colDefRef.current.field, " with new width: ").concat(colDefRef.current.width));
+  });
+  var handleTouchMove = useEventCallback(function (nativeEvent) {
+    var finger = trackFinger(nativeEvent, touchId.current);
+
+    if (!finger) {
+      return;
+    } // Cancel move in case some other element consumed a touchmove event and it was not fired.
+
+
+    if (nativeEvent.type === 'mousemove' && nativeEvent.buttons === 0) {
+      handleTouchEnd(nativeEvent);
+      return;
+    }
+
+    var newWidth = computeNewWidth(initialOffsetToSeparator.current, finger.x, colElementRef.current.getBoundingClientRect(), separatorSide.current);
+    newWidth = clamp(newWidth, colDefRef.current.minWidth, colDefRef.current.maxWidth);
+    updateWidth(newWidth);
+    var params = {
+      element: colElementRef.current,
+      colDef: colDefRef.current,
+      width: newWidth
+    };
+    apiRef.current.publishEvent(GridEvents.columnResize, params, nativeEvent);
+  });
+  var handleTouchStart = useEventCallback(function (event) {
+    var _apiRef$current$colum2;
+
+    var cellSeparator = findParentElementFromClassName(event.target, gridClasses['columnSeparator--resizable']); // Let the event bubble if the target is not a col separator
+
+    if (!cellSeparator) {
+      return;
+    } // If touch-action: none; is not supported we need to prevent the scroll manually.
+
+
+    if (!doesSupportTouchActionNone()) {
+      event.preventDefault();
+    }
+
+    var touch = event.changedTouches[0];
+
+    if (touch != null) {
+      // A number that uniquely identifies the current finger in the touch session.
+      touchId.current = touch.identifier;
+    }
+
+    colElementRef.current = findParentElementFromClassName(event.target, gridClasses.columnHeader);
+    var field = getFieldFromHeaderElem(colElementRef.current);
+    var colDef = apiRef.current.getColumn(field);
+    logger.debug("Start Resize on col ".concat(colDef.field));
+    apiRef.current.publishEvent(GridEvents.columnResizeStart, {
+      field: field
+    }, event);
+    colDefRef.current = colDef;
+    colElementRef.current = findHeaderElementFromField((_apiRef$current$colum2 = apiRef.current.columnHeadersElementRef) == null ? void 0 : _apiRef$current$colum2.current, colDef.field);
+    colCellElementsRef.current = findGridCellElementsFromCol(colElementRef.current);
+    separatorSide.current = getSeparatorSide(event.target);
+    initialOffsetToSeparator.current = computeOffsetToSeparator(touch.clientX, colElementRef.current.getBoundingClientRect(), separatorSide.current);
+    var doc = ownerDocument(event.currentTarget);
+    doc.addEventListener('touchmove', handleTouchMove);
+    doc.addEventListener('touchend', handleTouchEnd);
+  });
+  var stopListening = React.useCallback(function () {
+    var doc = ownerDocument(apiRef.current.rootElementRef.current);
+    doc.body.style.removeProperty('cursor');
+    doc.removeEventListener('mousemove', handleResizeMouseMove);
+    doc.removeEventListener('mouseup', handleResizeMouseUp);
+    doc.removeEventListener('touchmove', handleTouchMove);
+    doc.removeEventListener('touchend', handleTouchEnd);
+  }, [apiRef, handleResizeMouseMove, handleResizeMouseUp, handleTouchMove, handleTouchEnd]);
+  var handleResizeStart = React.useCallback(function (_ref2) {
+    var field = _ref2.field;
+    apiRef.current.setState(function (state) {
+      return _extends({}, state, {
+        columnResize: _extends({}, state.columnResize, {
+          resizingColumnField: field
+        })
+      });
+    });
+    apiRef.current.forceUpdate();
+  }, [apiRef]);
+  var handleResizeStop = React.useCallback(function () {
+    apiRef.current.setState(function (state) {
+      return _extends({}, state, {
+        columnResize: _extends({}, state.columnResize, {
+          resizingColumnField: ''
+        })
+      });
+    });
+    apiRef.current.forceUpdate();
+  }, [apiRef]);
+  React.useEffect(function () {
+    return function () {
+      clearTimeout(stopResizeEventTimeout.current);
+      stopListening();
+    };
+  }, [apiRef, handleTouchStart, stopListening]);
+  useGridNativeEventListener(apiRef, function () {
+    var _apiRef$current$colum3;
+
+    return (_apiRef$current$colum3 = apiRef.current.columnHeadersElementRef) == null ? void 0 : _apiRef$current$colum3.current;
+  }, 'touchstart', handleTouchStart, {
+    passive: doesSupportTouchActionNone()
+  });
+  useGridApiEventHandler(apiRef, GridEvents.columnSeparatorMouseDown, handleColumnResizeMouseDown);
+  useGridApiEventHandler(apiRef, GridEvents.columnResizeStart, handleResizeStart);
+  useGridApiEventHandler(apiRef, GridEvents.columnResizeStop, handleResizeStop);
+  useGridApiOptionHandler(apiRef, GridEvents.columnResize, props.onColumnResize);
+  useGridApiOptionHandler(apiRef, GridEvents.columnWidthChange, props.onColumnWidthChange);
+};

package/legacy/hooks/features/detailPanel/gridDetailPanelInterface.js

@@ -0,0 +1 @@
+export {};

package/legacy/hooks/features/detailPanel/gridDetailPanelSelector.js

@@ -0,0 +1,9 @@
+export var gridDetailPanelExpandedRowIdsSelector = function gridDetailPanelExpandedRowIdsSelector(state) {
+  return state.detailPanel.expandedRowIds;
+};
+export var gridDetailPanelExpandedRowsContentCacheSelector = function gridDetailPanelExpandedRowsContentCacheSelector(state) {
+  return state.detailPanel.contentCache;
+};
+export var gridDetailPanelExpandedRowsHeightCacheSelector = function gridDetailPanelExpandedRowsHeightCacheSelector(state) {
+  return state.detailPanel.heightCache;
+};

package/legacy/hooks/features/detailPanel/gridDetailPanelToggleColDef.js

@@ -0,0 +1,28 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { GRID_STRING_COL_DEF } from '@mui/x-data-grid';
+import { GridDetailPanelToggleCell } from '../../../components/GridDetailPanelToggleCell';
+import { gridDetailPanelExpandedRowIdsSelector } from './gridDetailPanelSelector';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var GRID_DETAIL_PANEL_TOGGLE_FIELD = '__detail_panel_toggle__';
+export var GRID_DETAIL_PANEL_TOGGLE_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
+  field: GRID_DETAIL_PANEL_TOGGLE_FIELD,
+  headerName: '',
+  type: 'detailPanelToggle',
+  editable: false,
+  sortable: false,
+  filterable: false,
+  resizable: false,
+  disableColumnMenu: true,
+  disableReorder: true,
+  disableExport: true,
+  align: 'left',
+  width: 40,
+  valueGetter: function valueGetter(params) {
+    var expandedRowIds = gridDetailPanelExpandedRowIdsSelector(params.api.state);
+    return expandedRowIds.includes(params.id);
+  },
+  renderCell: function renderCell(params) {
+    return /*#__PURE__*/_jsx(GridDetailPanelToggleCell, _extends({}, params));
+  }
+});

package/legacy/hooks/features/detailPanel/index.js

@@ -0,0 +1,3 @@
+export * from './gridDetailPanelToggleColDef';
+export * from './gridDetailPanelSelector';
+export * from './gridDetailPanelInterface';

package/legacy/hooks/features/detailPanel/useGridDetailPanel.js

@@ -0,0 +1,114 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { GridEvents, useGridSelector, useGridApiEventHandler, useGridApiMethod } from '@mui/x-data-grid';
+import { useGridRegisterPreProcessor } from '@mui/x-data-grid/internals';
+import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from './gridDetailPanelToggleColDef';
+import { gridDetailPanelExpandedRowIdsSelector, gridDetailPanelExpandedRowsContentCacheSelector, gridDetailPanelExpandedRowsHeightCacheSelector } from './gridDetailPanelSelector';
+export var detailPanelStateInitializer = function detailPanelStateInitializer(state, props) {
+  var _ref, _props$detailPanelExp, _props$initialState, _props$initialState$d;
+
+  return _extends({}, state, {
+    detailPanel: {
+      expandedRowIds: (_ref = (_props$detailPanelExp = props.detailPanelExpandedRowIds) != null ? _props$detailPanelExp : (_props$initialState = props.initialState) == null ? void 0 : (_props$initialState$d = _props$initialState.detailPanel) == null ? void 0 : _props$initialState$d.expandedRowIds) != null ? _ref : []
+    }
+  });
+};
+export var useGridDetailPanel = function useGridDetailPanel(apiRef, props) {
+  var expandedRowIds = useGridSelector(apiRef, gridDetailPanelExpandedRowIdsSelector);
+  var contentCache = useGridSelector(apiRef, gridDetailPanelExpandedRowsContentCacheSelector);
+  var handleCellClick = React.useCallback(function (params, event) {
+    if (params.field !== GRID_DETAIL_PANEL_TOGGLE_FIELD || props.getDetailPanelContent == null) {
+      return;
+    }
+
+    var content = contentCache[params.id];
+
+    if (! /*#__PURE__*/React.isValidElement(content)) {
+      return;
+    } // Ignore if the user didn't click specifically in the "i" button
+
+
+    if (event.target === event.currentTarget) {
+      return;
+    }
+
+    apiRef.current.toggleDetailPanel(params.id);
+  }, [apiRef, contentCache, props.getDetailPanelContent]);
+  var handleCellKeyDown = React.useCallback(function (params, event) {
+    if (!event.ctrlKey || event.key !== 'Enter' || props.getDetailPanelContent == null) {
+      return;
+    }
+
+    apiRef.current.toggleDetailPanel(params.id);
+  }, [apiRef, props.getDetailPanelContent]);
+  useGridApiEventHandler(apiRef, GridEvents.cellClick, handleCellClick);
+  useGridApiEventHandler(apiRef, GridEvents.cellKeyDown, handleCellKeyDown);
+  var addDetailHeight = React.useCallback(function (initialValue, row) {
+    var _heightCache$row$id;
+
+    if (expandedRowIds.length === 0 || !expandedRowIds.includes(row.id)) {
+      return _extends({}, initialValue, {
+        detail: 0
+      });
+    }
+
+    var heightCache = gridDetailPanelExpandedRowsHeightCacheSelector(apiRef.current.state);
+    return _extends({}, initialValue, {
+      detail: (_heightCache$row$id = heightCache[row.id]) != null ? _heightCache$row$id : 0 // Fallback to zero because the cache might not be ready yet (e.g. page was changed)
+
+    });
+  }, [apiRef, expandedRowIds]);
+  useGridRegisterPreProcessor(apiRef, 'rowHeight', addDetailHeight);
+  apiRef.current.unstable_updateControlState({
+    stateId: 'detailPanels',
+    propModel: props.detailPanelExpandedRowIds,
+    propOnChange: props.onDetailPanelExpandedRowIdsChange,
+    stateSelector: gridDetailPanelExpandedRowIdsSelector,
+    changeEvent: GridEvents.detailPanelsExpandedRowIdsChange
+  });
+  var toggleDetailPanel = React.useCallback(function (id) {
+    if (props.getDetailPanelContent == null) {
+      return;
+    }
+
+    var content = contentCache[id];
+
+    if (! /*#__PURE__*/React.isValidElement(content)) {
+      return;
+    }
+
+    var ids = apiRef.current.getExpandedDetailPanels();
+    apiRef.current.setExpandedDetailPanels(ids.includes(id) ? ids.filter(function (rowId) {
+      return rowId !== id;
+    }) : [].concat(_toConsumableArray(ids), [id]));
+  }, [apiRef, contentCache, props.getDetailPanelContent]);
+  var getExpandedDetailPanels = React.useCallback(function () {
+    return gridDetailPanelExpandedRowIdsSelector(apiRef.current.state);
+  }, [apiRef]);
+  var setExpandedDetailPanels = React.useCallback(function (ids) {
+    apiRef.current.setState(function (state) {
+      return _extends({}, state, {
+        detailPanel: _extends({}, state.detailPanel, {
+          expandedRowIds: ids
+        })
+      });
+    });
+    apiRef.current.forceUpdate();
+  }, [apiRef]);
+  var detailPanelApi = {
+    toggleDetailPanel: toggleDetailPanel,
+    getExpandedDetailPanels: getExpandedDetailPanels,
+    setExpandedDetailPanels: setExpandedDetailPanels
+  };
+  useGridApiMethod(apiRef, detailPanelApi, 'detailPanelApi');
+  React.useEffect(function () {
+    if (props.detailPanelExpandedRowIds) {
+      var currentModel = gridDetailPanelExpandedRowIdsSelector(apiRef.current.state);
+
+      if (currentModel !== props.detailPanelExpandedRowIds) {
+        apiRef.current.setExpandedDetailPanels(props.detailPanelExpandedRowIds);
+      }
+    }
+  }, [apiRef, props.detailPanelExpandedRowIds]);
+};

package/legacy/hooks/features/detailPanel/useGridDetailPanelCache.js

@@ -0,0 +1,57 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridApiEventHandler, gridRowIdsSelector, GridEvents } from '@mui/x-data-grid';
+
+function cacheContentAndHeight(apiRef, getDetailPanelContent, getDetailPanelHeight) {
+  if (typeof getDetailPanelContent !== 'function') {
+    return {};
+  } // TODO change to lazy approach using a Proxy
+  // only call getDetailPanelContent when asked for an id
+
+
+  var rowIds = gridRowIdsSelector(apiRef);
+  var contentCache = rowIds.reduce(function (acc, id) {
+    var params = apiRef.current.getRowParams(id);
+    acc[id] = getDetailPanelContent(params);
+    return acc;
+  }, {});
+  var heightCache = rowIds.reduce(function (acc, id) {
+    if (contentCache[id] == null) {
+      return acc;
+    }
+
+    var params = apiRef.current.getRowParams(id);
+    acc[id] = getDetailPanelHeight(params);
+    return acc;
+  }, {});
+  return {
+    contentCache: contentCache,
+    heightCache: heightCache
+  };
+}
+
+export var useGridDetailPanelCache = function useGridDetailPanelCache(apiRef, props) {
+  var updateCaches = React.useCallback(function () {
+    apiRef.current.setState(function (state) {
+      return _extends({}, state, {
+        detailPanel: _extends({}, state.detailPanel, cacheContentAndHeight(apiRef, props.getDetailPanelContent, props.getDetailPanelHeight))
+      });
+    });
+    apiRef.current.forceUpdate();
+  }, [apiRef, props.getDetailPanelContent, props.getDetailPanelHeight]);
+  useGridApiEventHandler(apiRef, GridEvents.visibleRowsSet, updateCaches);
+  var isFirstRender = React.useRef(true);
+
+  if (isFirstRender.current) {
+    isFirstRender.current = false;
+    updateCaches();
+  }
+
+  React.useEffect(function () {
+    if (isFirstRender.current) {
+      return;
+    }
+
+    updateCaches();
+  }, [updateCaches]);
+};

package/legacy/hooks/features/detailPanel/useGridDetailPanelPreProcessors.js

@@ -0,0 +1,31 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import * as React from 'react';
+import { useGridRegisterPreProcessor } from '@mui/x-data-grid/internals';
+import { GRID_DETAIL_PANEL_TOGGLE_FIELD, GRID_DETAIL_PANEL_TOGGLE_COL_DEF } from './gridDetailPanelToggleColDef';
+export var useGridDetailPanelPreProcessors = function useGridDetailPanelPreProcessors(apiRef, props) {
+  var addToggleColumn = React.useCallback(function (columnsState) {
+    if (props.getDetailPanelContent == null) {
+      // Remove the toggle column, when it exists
+      if (columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD]) {
+        delete columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD];
+        columnsState.all = columnsState.all.filter(function (field) {
+          return field !== GRID_DETAIL_PANEL_TOGGLE_FIELD;
+        });
+      }
+
+      return columnsState;
+    } // Don't add the toggle column if there's already one
+    // The user might have manually added it to have it in a custom position
+
+
+    if (columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD]) {
+      return columnsState;
+    } // Othewise, add the toggle column at the beginning
+
+
+    columnsState.all = [GRID_DETAIL_PANEL_TOGGLE_FIELD].concat(_toConsumableArray(columnsState.all));
+    columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD] = GRID_DETAIL_PANEL_TOGGLE_COL_DEF;
+    return columnsState;
+  }, [props.getDetailPanelContent]);
+  useGridRegisterPreProcessor(apiRef, 'hydrateColumns', addToggleColumn);
+};

package/legacy/hooks/features/index.js

@@ -0,0 +1,7 @@
+// Only export the variable and types that should be publicly exposed and re-exported from `@mui/x-data-grid-pro`
+export * from './columnPinning';
+export * from './columnReorder';
+export * from './columnResize';
+export * from './rowGrouping';
+export * from './treeData';
+export * from './detailPanel';

package/legacy/hooks/features/infiniteLoader/useGridInfiniteLoader.js

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { useGridSelector, GridEvents, useGridApiEventHandler, useGridApiOptionHandler, gridVisibleColumnDefinitionsSelector, gridRowsMetaSelector } from '@mui/x-data-grid';
+import { useGridVisibleRows } from '@mui/x-data-grid/internals';
+
+/**
+ * Only available in DataGridPro
+ * @requires useGridColumns (state)
+ * @requires useGridDimensions (method) - can be after
+ * @requires useGridScroll (method
+ */
+export var useGridInfiniteLoader = function useGridInfiniteLoader(apiRef, props) {
+  var visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
+  var currentPage = useGridVisibleRows(apiRef, props);
+  var rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector);
+  var contentHeight = Math.max(rowsMeta.currentPageTotalHeight, 1);
+  var isInScrollBottomArea = React.useRef(false);
+  var handleRowsScrollEnd = React.useCallback(function (scrollPosition) {
+    var dimensions = apiRef.current.getRootDimensions();
+
+    if (!dimensions) {
+      return;
+    }
+
+    var scrollPositionBottom = scrollPosition.top + dimensions.viewportOuterSize.height;
+    var viewportPageSize = apiRef.current.unstable_getViewportPageSize();
+
+    if (scrollPositionBottom < contentHeight - props.scrollEndThreshold) {
+      isInScrollBottomArea.current = false;
+    }
+
+    if (scrollPositionBottom >= contentHeight - props.scrollEndThreshold && !isInScrollBottomArea.current) {
+      var rowScrollEndParam = {
+        visibleColumns: visibleColumns,
+        viewportPageSize: viewportPageSize,
+        virtualRowsCount: currentPage.rows.length
+      };
+      apiRef.current.publishEvent(GridEvents.rowsScrollEnd, rowScrollEndParam);
+      isInScrollBottomArea.current = true;
+    }
+  }, [contentHeight, props.scrollEndThreshold, visibleColumns, apiRef, currentPage.rows.length]);
+  var handleGridScroll = React.useCallback(function (_ref) {
+    var left = _ref.left,
+        top = _ref.top;
+    handleRowsScrollEnd({
+      left: left,
+      top: top
+    });
+  }, [handleRowsScrollEnd]);
+  useGridApiEventHandler(apiRef, GridEvents.rowsScroll, handleGridScroll);
+  useGridApiOptionHandler(apiRef, GridEvents.rowsScrollEnd, props.onRowsScrollEnd);
+};