@mui/x-data-grid-pro 5.4.0 → 5.6.0

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

@@ -0,0 +1,326 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridColumnResize = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _utils = require("@mui/material/utils");
+
+var _xDataGrid = require("@mui/x-data-grid");
+
+var _internals = require("@mui/x-data-grid/internals");
+
+var _domUtils = require("../../../utils/domUtils");
+
+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; }
+
+// 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
+let 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 (let i = 0; i < event.changedTouches.length; i += 1) {
+      const 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) {
+  let newWidth = initialOffsetToSeparator;
+
+  if (separatorSide === _xDataGrid.GridColumnHeaderSeparatorSides.Right) {
+    newWidth += clickX - columnBounds.left;
+  } else {
+    newWidth += columnBounds.right - clickX;
+  }
+
+  return newWidth;
+}
+
+function computeOffsetToSeparator(clickX, columnBounds, separatorSide) {
+  if (separatorSide === _xDataGrid.GridColumnHeaderSeparatorSides.Left) {
+    return clickX - columnBounds.left;
+  }
+
+  return columnBounds.right - clickX;
+}
+
+function getSeparatorSide(element) {
+  return element.classList.contains(_xDataGrid.gridClasses['columnSeparator--sideRight']) ? _xDataGrid.GridColumnHeaderSeparatorSides.Right : _xDataGrid.GridColumnHeaderSeparatorSides.Left;
+}
+/**
+ * Only available in DataGridPro
+ * @requires useGridColumns (method, event)
+ * TODO: improve experience for last column
+ */
+
+
+const useGridColumnResize = (apiRef, props) => {
+  const logger = (0, _xDataGrid.useGridLogger)(apiRef, 'useGridColumnResize');
+  (0, _internals.useGridStateInit)(apiRef, state => (0, _extends2.default)({}, state, {
+    columnResize: {
+      resizingColumnField: ''
+    }
+  }));
+  const colDefRef = React.useRef();
+  const colElementRef = React.useRef();
+  const 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.
+
+  const initialOffsetToSeparator = React.useRef();
+  const separatorSide = React.useRef();
+  const stopResizeEventTimeout = React.useRef();
+  const touchId = React.useRef();
+
+  const updateWidth = newWidth => {
+    logger.debug(`Updating width to ${newWidth} for col ${colDefRef.current.field}`);
+    colDefRef.current.computedWidth = newWidth;
+    colDefRef.current.width = newWidth;
+    colDefRef.current.flex = undefined;
+    colElementRef.current.style.width = `${newWidth}px`;
+    colElementRef.current.style.minWidth = `${newWidth}px`;
+    colElementRef.current.style.maxWidth = `${newWidth}px`;
+    colCellElementsRef.current.forEach(element => {
+      const div = element;
+      div.style.width = `${newWidth}px`;
+      div.style.minWidth = `${newWidth}px`;
+      div.style.maxWidth = `${newWidth}px`;
+    });
+  };
+
+  const handleResizeMouseUp = (0, _utils.useEventCallback)(nativeEvent => {
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    stopListening();
+    apiRef.current.updateColumn(colDefRef.current);
+    clearTimeout(stopResizeEventTimeout.current);
+    stopResizeEventTimeout.current = setTimeout(() => {
+      apiRef.current.publishEvent(_xDataGrid.GridEvents.columnResizeStop, null, nativeEvent);
+
+      if (colDefRef.current) {
+        var _colDefRef$current;
+
+        apiRef.current.publishEvent(_xDataGrid.GridEvents.columnWidthChange, {
+          element: colElementRef.current,
+          colDef: colDefRef.current,
+          width: (_colDefRef$current = colDefRef.current) == null ? void 0 : _colDefRef$current.computedWidth
+        }, nativeEvent);
+      }
+    });
+    logger.debug(`Updating col ${colDefRef.current.field} with new width: ${colDefRef.current.width}`);
+  });
+  const handleResizeMouseMove = (0, _utils.useEventCallback)(nativeEvent => {
+    // Cancel move in case some other element consumed a mouseup event and it was not fired.
+    if (nativeEvent.buttons === 0) {
+      handleResizeMouseUp(nativeEvent);
+      return;
+    }
+
+    let newWidth = computeNewWidth(initialOffsetToSeparator.current, nativeEvent.clientX, colElementRef.current.getBoundingClientRect(), separatorSide.current);
+    newWidth = (0, _internals.clamp)(newWidth, colDefRef.current.minWidth, colDefRef.current.maxWidth);
+    updateWidth(newWidth);
+    const params = {
+      element: colElementRef.current,
+      colDef: colDefRef.current,
+      width: newWidth
+    };
+    apiRef.current.publishEvent(_xDataGrid.GridEvents.columnResize, params, nativeEvent);
+  });
+  const handleColumnResizeMouseDown = (0, _utils.useEventCallback)(({
+    colDef
+  }, event) => {
+    var _apiRef$current$colum;
+
+    // Only handle left clicks
+    if (event.button !== 0) {
+      return;
+    } // Skip if the column isn't resizable
+
+
+    if (!event.currentTarget.classList.contains(_xDataGrid.gridClasses['columnSeparator--resizable'])) {
+      return;
+    } // Avoid text selection
+
+
+    event.preventDefault();
+    logger.debug(`Start Resize on col ${colDef.field}`);
+    apiRef.current.publishEvent(_xDataGrid.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="${colDef.field}"]`);
+    colCellElementsRef.current = (0, _domUtils.findGridCellElementsFromCol)(colElementRef.current);
+    const doc = (0, _utils.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);
+  });
+  const handleTouchEnd = (0, _utils.useEventCallback)(nativeEvent => {
+    const 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(() => {
+      apiRef.current.publishEvent(_xDataGrid.GridEvents.columnResizeStop, null, nativeEvent);
+    });
+    logger.debug(`Updating col ${colDefRef.current.field} with new width: ${colDefRef.current.width}`);
+  });
+  const handleTouchMove = (0, _utils.useEventCallback)(nativeEvent => {
+    const 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;
+    }
+
+    let newWidth = computeNewWidth(initialOffsetToSeparator.current, finger.x, colElementRef.current.getBoundingClientRect(), separatorSide.current);
+    newWidth = (0, _internals.clamp)(newWidth, colDefRef.current.minWidth, colDefRef.current.maxWidth);
+    updateWidth(newWidth);
+    const params = {
+      element: colElementRef.current,
+      colDef: colDefRef.current,
+      width: newWidth
+    };
+    apiRef.current.publishEvent(_xDataGrid.GridEvents.columnResize, params, nativeEvent);
+  });
+  const handleTouchStart = (0, _utils.useEventCallback)(event => {
+    var _apiRef$current$colum2;
+
+    const cellSeparator = (0, _internals.findParentElementFromClassName)(event.target, _xDataGrid.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();
+    }
+
+    const 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 = (0, _internals.findParentElementFromClassName)(event.target, _xDataGrid.gridClasses.columnHeader);
+    const field = (0, _domUtils.getFieldFromHeaderElem)(colElementRef.current);
+    const colDef = apiRef.current.getColumn(field);
+    logger.debug(`Start Resize on col ${colDef.field}`);
+    apiRef.current.publishEvent(_xDataGrid.GridEvents.columnResizeStart, {
+      field
+    }, event);
+    colDefRef.current = colDef;
+    colElementRef.current = (0, _domUtils.findHeaderElementFromField)((_apiRef$current$colum2 = apiRef.current.columnHeadersElementRef) == null ? void 0 : _apiRef$current$colum2.current, colDef.field);
+    colCellElementsRef.current = (0, _domUtils.findGridCellElementsFromCol)(colElementRef.current);
+    separatorSide.current = getSeparatorSide(event.target);
+    initialOffsetToSeparator.current = computeOffsetToSeparator(touch.clientX, colElementRef.current.getBoundingClientRect(), separatorSide.current);
+    const doc = (0, _utils.ownerDocument)(event.currentTarget);
+    doc.addEventListener('touchmove', handleTouchMove);
+    doc.addEventListener('touchend', handleTouchEnd);
+  });
+  const stopListening = React.useCallback(() => {
+    const doc = (0, _utils.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]);
+  const handleResizeStart = React.useCallback(({
+    field
+  }) => {
+    apiRef.current.setState(state => (0, _extends2.default)({}, state, {
+      columnResize: (0, _extends2.default)({}, state.columnResize, {
+        resizingColumnField: field
+      })
+    }));
+    apiRef.current.forceUpdate();
+  }, [apiRef]);
+  const handleResizeStop = React.useCallback(() => {
+    apiRef.current.setState(state => (0, _extends2.default)({}, state, {
+      columnResize: (0, _extends2.default)({}, state.columnResize, {
+        resizingColumnField: ''
+      })
+    }));
+    apiRef.current.forceUpdate();
+  }, [apiRef]);
+  React.useEffect(() => {
+    return () => {
+      clearTimeout(stopResizeEventTimeout.current);
+      stopListening();
+    };
+  }, [apiRef, handleTouchStart, stopListening]);
+  (0, _xDataGrid.useGridNativeEventListener)(apiRef, () => {
+    var _apiRef$current$colum3;
+
+    return (_apiRef$current$colum3 = apiRef.current.columnHeadersElementRef) == null ? void 0 : _apiRef$current$colum3.current;
+  }, 'touchstart', handleTouchStart, {
+    passive: doesSupportTouchActionNone()
+  });
+  (0, _xDataGrid.useGridApiEventHandler)(apiRef, _xDataGrid.GridEvents.columnSeparatorMouseDown, handleColumnResizeMouseDown);
+  (0, _xDataGrid.useGridApiEventHandler)(apiRef, _xDataGrid.GridEvents.columnResizeStart, handleResizeStart);
+  (0, _xDataGrid.useGridApiEventHandler)(apiRef, _xDataGrid.GridEvents.columnResizeStop, handleResizeStop);
+  (0, _xDataGrid.useGridApiOptionHandler)(apiRef, _xDataGrid.GridEvents.columnResize, props.onColumnResize);
+  (0, _xDataGrid.useGridApiOptionHandler)(apiRef, _xDataGrid.GridEvents.columnWidthChange, props.onColumnWidthChange);
+};
+
+exports.useGridColumnResize = useGridColumnResize;

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.gridDetailPanelExpandedRowsHeightCacheSelector = exports.gridDetailPanelExpandedRowsContentCacheSelector = exports.gridDetailPanelExpandedRowIdsSelector = void 0;
+
+const gridDetailPanelExpandedRowIdsSelector = state => state.detailPanel.expandedRowIds;
+
+exports.gridDetailPanelExpandedRowIdsSelector = gridDetailPanelExpandedRowIdsSelector;
+
+const gridDetailPanelExpandedRowsContentCacheSelector = state => state.detailPanel.contentCache;
+
+exports.gridDetailPanelExpandedRowsContentCacheSelector = gridDetailPanelExpandedRowsContentCacheSelector;
+
+const gridDetailPanelExpandedRowsHeightCacheSelector = state => state.detailPanel.heightCache;
+
+exports.gridDetailPanelExpandedRowsHeightCacheSelector = gridDetailPanelExpandedRowsHeightCacheSelector;

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

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GRID_DETAIL_PANEL_TOGGLE_FIELD = exports.GRID_DETAIL_PANEL_TOGGLE_COL_DEF = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _xDataGrid = require("@mui/x-data-grid");
+
+var _GridDetailPanelToggleCell = require("../../../components/GridDetailPanelToggleCell");
+
+var _gridDetailPanelSelector = require("./gridDetailPanelSelector");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+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; }
+
+const GRID_DETAIL_PANEL_TOGGLE_FIELD = '__detail_panel_toggle__';
+exports.GRID_DETAIL_PANEL_TOGGLE_FIELD = GRID_DETAIL_PANEL_TOGGLE_FIELD;
+const GRID_DETAIL_PANEL_TOGGLE_COL_DEF = (0, _extends2.default)({}, _xDataGrid.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: params => {
+    const expandedRowIds = (0, _gridDetailPanelSelector.gridDetailPanelExpandedRowIdsSelector)(params.api.state);
+    return expandedRowIds.includes(params.id);
+  },
+  renderCell: params => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridDetailPanelToggleCell.GridDetailPanelToggleCell, (0, _extends2.default)({}, params))
+});
+exports.GRID_DETAIL_PANEL_TOGGLE_COL_DEF = GRID_DETAIL_PANEL_TOGGLE_COL_DEF;

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

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _gridDetailPanelToggleColDef = require("./gridDetailPanelToggleColDef");
+
+Object.keys(_gridDetailPanelToggleColDef).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _gridDetailPanelToggleColDef[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _gridDetailPanelToggleColDef[key];
+    }
+  });
+});
+
+var _gridDetailPanelSelector = require("./gridDetailPanelSelector");
+
+Object.keys(_gridDetailPanelSelector).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _gridDetailPanelSelector[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _gridDetailPanelSelector[key];
+    }
+  });
+});
+
+var _gridDetailPanelInterface = require("./gridDetailPanelInterface");
+
+Object.keys(_gridDetailPanelInterface).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _gridDetailPanelInterface[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _gridDetailPanelInterface[key];
+    }
+  });
+});

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

@@ -0,0 +1,130 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridDetailPanel = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _xDataGrid = require("@mui/x-data-grid");
+
+var _internals = require("@mui/x-data-grid/internals");
+
+var _gridDetailPanelToggleColDef = require("./gridDetailPanelToggleColDef");
+
+var _gridDetailPanelSelector = require("./gridDetailPanelSelector");
+
+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; }
+
+const useGridDetailPanel = (apiRef, props) => {
+  (0, _internals.useGridStateInit)(apiRef, state => {
+    var _ref, _props$detailPanelExp, _props$initialState, _props$initialState$d;
+
+    return (0, _extends2.default)({}, 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 : []
+      }
+    });
+  });
+  const expandedRowIds = (0, _xDataGrid.useGridSelector)(apiRef, _gridDetailPanelSelector.gridDetailPanelExpandedRowIdsSelector);
+  const contentCache = (0, _xDataGrid.useGridSelector)(apiRef, _gridDetailPanelSelector.gridDetailPanelExpandedRowsContentCacheSelector);
+  const handleCellClick = React.useCallback((params, event) => {
+    if (params.field !== _gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD || props.getDetailPanelContent == null) {
+      return;
+    }
+
+    const 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]);
+  const handleCellKeyDown = React.useCallback((params, event) => {
+    if (!event.ctrlKey || event.key !== 'Enter' || props.getDetailPanelContent == null) {
+      return;
+    }
+
+    apiRef.current.toggleDetailPanel(params.id);
+  }, [apiRef, props.getDetailPanelContent]);
+  (0, _xDataGrid.useGridApiEventHandler)(apiRef, _xDataGrid.GridEvents.cellClick, handleCellClick);
+  (0, _xDataGrid.useGridApiEventHandler)(apiRef, _xDataGrid.GridEvents.cellKeyDown, handleCellKeyDown);
+  const addDetailHeight = React.useCallback((initialValue, row) => {
+    var _heightCache$row$id;
+
+    if (expandedRowIds.length === 0 || !expandedRowIds.includes(row.id)) {
+      return (0, _extends2.default)({}, initialValue, {
+        detail: 0
+      });
+    }
+
+    const heightCache = (0, _gridDetailPanelSelector.gridDetailPanelExpandedRowsHeightCacheSelector)(apiRef.current.state);
+    return (0, _extends2.default)({}, 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]);
+  (0, _internals.useGridRegisterPreProcessor)(apiRef, 'rowHeight', addDetailHeight);
+  apiRef.current.unstable_updateControlState({
+    stateId: 'detailPanels',
+    propModel: props.detailPanelExpandedRowIds,
+    propOnChange: props.onDetailPanelExpandedRowIdsChange,
+    stateSelector: _gridDetailPanelSelector.gridDetailPanelExpandedRowIdsSelector,
+    changeEvent: _xDataGrid.GridEvents.detailPanelsExpandedRowIdsChange
+  });
+  const toggleDetailPanel = React.useCallback(id => {
+    if (props.getDetailPanelContent == null) {
+      return;
+    }
+
+    const content = contentCache[id];
+
+    if (! /*#__PURE__*/React.isValidElement(content)) {
+      return;
+    }
+
+    const ids = apiRef.current.getExpandedDetailPanels();
+    apiRef.current.setExpandedDetailPanels(ids.includes(id) ? ids.filter(rowId => rowId !== id) : [...ids, id]);
+  }, [apiRef, contentCache, props.getDetailPanelContent]);
+  const getExpandedDetailPanels = React.useCallback(() => (0, _gridDetailPanelSelector.gridDetailPanelExpandedRowIdsSelector)(apiRef.current.state), [apiRef]);
+  const setExpandedDetailPanels = React.useCallback(ids => {
+    apiRef.current.setState(state => {
+      return (0, _extends2.default)({}, state, {
+        detailPanel: (0, _extends2.default)({}, state.detailPanel, {
+          expandedRowIds: ids
+        })
+      });
+    });
+    apiRef.current.forceUpdate();
+  }, [apiRef]);
+  const detailPanelApi = {
+    toggleDetailPanel,
+    getExpandedDetailPanels,
+    setExpandedDetailPanels
+  };
+  (0, _xDataGrid.useGridApiMethod)(apiRef, detailPanelApi, 'detailPanelApi');
+  React.useEffect(() => {
+    if (props.detailPanelExpandedRowIds) {
+      const currentModel = (0, _gridDetailPanelSelector.gridDetailPanelExpandedRowIdsSelector)(apiRef.current.state);
+
+      if (currentModel !== props.detailPanelExpandedRowIds) {
+        apiRef.current.setExpandedDetailPanels(props.detailPanelExpandedRowIds);
+      }
+    }
+  }, [apiRef, props.detailPanelExpandedRowIds]);
+};
+
+exports.useGridDetailPanel = useGridDetailPanel;

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

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridDetailPanelCache = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _xDataGrid = require("@mui/x-data-grid");
+
+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; }
+
+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
+
+
+  const rowIds = (0, _xDataGrid.gridRowIdsSelector)(apiRef);
+  const contentCache = rowIds.reduce((acc, id) => {
+    const params = apiRef.current.getRowParams(id);
+    acc[id] = getDetailPanelContent(params);
+    return acc;
+  }, {});
+  const heightCache = rowIds.reduce((acc, id) => {
+    if (contentCache[id] == null) {
+      return acc;
+    }
+
+    const params = apiRef.current.getRowParams(id);
+    acc[id] = getDetailPanelHeight(params);
+    return acc;
+  }, {});
+  return {
+    contentCache,
+    heightCache
+  };
+}
+
+const useGridDetailPanelCache = (apiRef, props) => {
+  const updateCaches = React.useCallback(() => {
+    apiRef.current.setState(state => {
+      return (0, _extends2.default)({}, state, {
+        detailPanel: (0, _extends2.default)({}, state.detailPanel, cacheContentAndHeight(apiRef, props.getDetailPanelContent, props.getDetailPanelHeight))
+      });
+    });
+    apiRef.current.forceUpdate();
+  }, [apiRef, props.getDetailPanelContent, props.getDetailPanelHeight]);
+  (0, _xDataGrid.useGridApiEventHandler)(apiRef, _xDataGrid.GridEvents.visibleRowsSet, updateCaches);
+  const isFirstRender = React.useRef(true);
+
+  if (isFirstRender.current) {
+    isFirstRender.current = false;
+    updateCaches();
+  }
+
+  React.useEffect(() => {
+    if (isFirstRender.current) {
+      return;
+    }
+
+    updateCaches();
+  }, [updateCaches]);
+};
+
+exports.useGridDetailPanelCache = useGridDetailPanelCache;