@mui/x-data-grid-pro 7.28.3 → 7.29.1

package/{esm → node}/hooks/features/dataSource/useGridDataSource.js

@@ -1,12 +1,20 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import useLazyRef from '@mui/utils/useLazyRef';
-import { useGridApiEventHandler, gridRowsLoadingSelector, useGridApiMethod, useGridSelector } from '@mui/x-data-grid';
-import { gridRowGroupsToFetchSelector } from '@mui/x-data-grid/internals';
-import { unstable_debounce as debounce } from '@mui/utils';
-import { gridGetRowsParamsSelector, gridDataSourceErrorsSelector } from "./gridDataSourceSelector.js";
-import { NestedDataManager, RequestStatus, runIfServerMode } from "./utils.js";
-import { GridDataSourceCacheDefault } from "./cache.js";
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridDataSource = exports.dataSourceStateInitializer = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _useLazyRef = _interopRequireDefault(require("@mui/utils/useLazyRef"));
+var _xDataGrid = require("@mui/x-data-grid");
+var _internals = require("@mui/x-data-grid/internals");
+var _utils = require("@mui/utils");
+var _gridDataSourceSelector = require("./gridDataSourceSelector");
+var _utils2 = require("./utils");
+var _cache = require("./cache");
 const INITIAL_STATE = {
   loading: {},
   errors: {}
@@ -20,16 +28,17 @@ function getCache(cacheProp) {
   if (cacheProp === null) {
     return noopCache;
   }
-  return cacheProp ?? new GridDataSourceCacheDefault({});
+  return cacheProp ?? new _cache.GridDataSourceCacheDefault({});
 }
-export const dataSourceStateInitializer = state => {
-  return _extends({}, state, {
+const dataSourceStateInitializer = state => {
+  return (0, _extends2.default)({}, state, {
     dataSource: INITIAL_STATE
   });
 };
-export const useGridDataSource = (apiRef, props) => {
-  const nestedDataManager = useLazyRef(() => new NestedDataManager(apiRef)).current;
-  const groupsToAutoFetch = useGridSelector(apiRef, gridRowGroupsToFetchSelector);
+exports.dataSourceStateInitializer = dataSourceStateInitializer;
+const useGridDataSource = (apiRef, props) => {
+  const nestedDataManager = (0, _useLazyRef.default)(() => new _utils2.NestedDataManager(apiRef)).current;
+  const groupsToAutoFetch = (0, _xDataGrid.useGridSelector)(apiRef, _internals.gridRowGroupsToFetchSelector);
   const scheduledGroups = React.useRef(0);
   const onError = props.unstable_onDataSourceError;
   const [cache, setCache] = React.useState(() => getCache(props.unstable_dataSourceCache));
@@ -48,7 +57,7 @@ export const useGridDataSource = (apiRef, props) => {
     if (dataSourceState !== INITIAL_STATE) {
       apiRef.current.resetDataSourceState();
     }
-    const fetchParams = _extends({}, gridGetRowsParamsSelector(apiRef), apiRef.current.unstable_applyPipeProcessors('getRowsParams', {}));
+    const fetchParams = (0, _extends2.default)({}, (0, _gridDataSourceSelector.gridGetRowsParamsSelector)(apiRef), apiRef.current.unstable_applyPipeProcessors('getRowsParams', {}));
     const cachedData = apiRef.current.unstable_dataSource.cache.get(fetchParams);
     if (cachedData !== undefined) {
       const rows = cachedData.rows;
@@ -58,7 +67,7 @@ export const useGridDataSource = (apiRef, props) => {
       }
       return;
     }
-    const isLoading = gridRowsLoadingSelector(apiRef);
+    const isLoading = (0, _xDataGrid.gridRowsLoadingSelector)(apiRef);
     if (!isLoading) {
       apiRef.current.setLoading(true);
     }
@@ -92,7 +101,7 @@ export const useGridDataSource = (apiRef, props) => {
       nestedDataManager.clearPendingRequest(id);
       return;
     }
-    const fetchParams = _extends({}, gridGetRowsParamsSelector(apiRef), pipedParams, {
+    const fetchParams = (0, _extends2.default)({}, (0, _gridDataSourceSelector.gridGetRowsParamsSelector)(apiRef), pipedParams, {
       groupKeys: rowNode.path
     });
     const cachedData = apiRef.current.unstable_dataSource.cache.get(fetchParams);
@@ -107,7 +116,7 @@ export const useGridDataSource = (apiRef, props) => {
       apiRef.current.unstable_dataSource.setChildrenLoading(id, false);
       return;
     }
-    const existingError = gridDataSourceErrorsSelector(apiRef)[id] ?? null;
+    const existingError = (0, _gridDataSourceSelector.gridDataSourceErrorsSelector)(apiRef)[id] ?? null;
     if (existingError) {
       apiRef.current.unstable_dataSource.setChildrenFetchError(id, null);
     }
@@ -118,7 +127,7 @@ export const useGridDataSource = (apiRef, props) => {
         nestedDataManager.clearPendingRequest(id);
         return;
       }
-      if (nestedDataManager.getRequestStatus(id) === RequestStatus.UNKNOWN) {
+      if (nestedDataManager.getRequestStatus(id) === _utils2.RequestStatus.UNKNOWN) {
         apiRef.current.unstable_dataSource.setChildrenLoading(id, false);
         return;
       }
@@ -143,14 +152,14 @@ export const useGridDataSource = (apiRef, props) => {
       if (!state.dataSource.loading[parentId] && isLoading === false) {
         return state;
       }
-      const newLoadingState = _extends({}, state.dataSource.loading);
+      const newLoadingState = (0, _extends2.default)({}, state.dataSource.loading);
       if (isLoading === false) {
         delete newLoadingState[parentId];
       } else {
         newLoadingState[parentId] = isLoading;
       }
-      return _extends({}, state, {
-        dataSource: _extends({}, state.dataSource, {
+      return (0, _extends2.default)({}, state, {
+        dataSource: (0, _extends2.default)({}, state.dataSource, {
           loading: newLoadingState
         })
       });
@@ -158,14 +167,14 @@ export const useGridDataSource = (apiRef, props) => {
   }, [apiRef]);
   const setChildrenFetchError = React.useCallback((parentId, error) => {
     apiRef.current.setState(state => {
-      const newErrorsState = _extends({}, state.dataSource.errors);
+      const newErrorsState = (0, _extends2.default)({}, state.dataSource.errors);
       if (error === null && newErrorsState[parentId] !== undefined) {
         delete newErrorsState[parentId];
       } else {
         newErrorsState[parentId] = error;
       }
-      return _extends({}, state, {
-        dataSource: _extends({}, state.dataSource, {
+      return (0, _extends2.default)({}, state, {
+        dataSource: (0, _extends2.default)({}, state.dataSource, {
           errors: newErrorsState
         })
       });
@@ -173,12 +182,12 @@ export const useGridDataSource = (apiRef, props) => {
   }, [apiRef]);
   const resetDataSourceState = React.useCallback(() => {
     apiRef.current.setState(state => {
-      return _extends({}, state, {
+      return (0, _extends2.default)({}, state, {
         dataSource: INITIAL_STATE
       });
     });
   }, [apiRef]);
-  const debouncedFetchRows = React.useMemo(() => debounce(fetchRows, 0), [fetchRows]);
+  const debouncedFetchRows = React.useMemo(() => (0, _utils.unstable_debounce)(fetchRows, 0), [fetchRows]);
   const dataSourceApi = {
     unstable_dataSource: {
       setChildrenLoading,
@@ -191,11 +200,11 @@ export const useGridDataSource = (apiRef, props) => {
     fetchRowChildren,
     resetDataSourceState
   };
-  useGridApiMethod(apiRef, dataSourceApi, 'public');
-  useGridApiMethod(apiRef, dataSourcePrivateApi, 'private');
-  useGridApiEventHandler(apiRef, 'sortModelChange', runIfServerMode(props.sortingMode, debouncedFetchRows));
-  useGridApiEventHandler(apiRef, 'filterModelChange', runIfServerMode(props.filterMode, debouncedFetchRows));
-  useGridApiEventHandler(apiRef, 'paginationModelChange', runIfServerMode(props.paginationMode, debouncedFetchRows));
+  (0, _xDataGrid.useGridApiMethod)(apiRef, dataSourceApi, 'public');
+  (0, _xDataGrid.useGridApiMethod)(apiRef, dataSourcePrivateApi, 'private');
+  (0, _xDataGrid.useGridApiEventHandler)(apiRef, 'sortModelChange', (0, _utils2.runIfServerMode)(props.sortingMode, debouncedFetchRows));
+  (0, _xDataGrid.useGridApiEventHandler)(apiRef, 'filterModelChange', (0, _utils2.runIfServerMode)(props.filterMode, debouncedFetchRows));
+  (0, _xDataGrid.useGridApiEventHandler)(apiRef, 'paginationModelChange', (0, _utils2.runIfServerMode)(props.paginationMode, debouncedFetchRows));
   const isFirstRender = React.useRef(true);
   React.useEffect(() => {
     if (isFirstRender.current) {
@@ -218,4 +227,5 @@ export const useGridDataSource = (apiRef, props) => {
       scheduledGroups.current = groupsToAutoFetch.length;
     }
   }, [apiRef, nestedDataManager, groupsToAutoFetch]);
-};
+};
+exports.useGridDataSource = useGridDataSource;

package/{esm → node}/hooks/features/dataSource/utils.js

@@ -1,24 +1,31 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.runIfServerMode = exports.RequestStatus = exports.NestedDataManager = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 const MAX_CONCURRENT_REQUESTS = Infinity;
-export const runIfServerMode = (modeProp, fn) => () => {
+const runIfServerMode = (modeProp, fn) => () => {
   if (modeProp === 'server') {
     fn();
   }
 };
-export let RequestStatus = /*#__PURE__*/function (RequestStatus) {
+exports.runIfServerMode = runIfServerMode;
+let RequestStatus = exports.RequestStatus = /*#__PURE__*/function (RequestStatus) {
   RequestStatus[RequestStatus["QUEUED"] = 0] = "QUEUED";
   RequestStatus[RequestStatus["PENDING"] = 1] = "PENDING";
   RequestStatus[RequestStatus["SETTLED"] = 2] = "SETTLED";
   RequestStatus[RequestStatus["UNKNOWN"] = 3] = "UNKNOWN";
   return RequestStatus;
 }({});
-
 /**
  * Fetches row children from the server with option to limit the number of concurrent requests
  * Determines the status of a request based on the enum `RequestStatus`
  * Uses `GridRowId` to uniquely identify a request
  */
-export class NestedDataManager {
+class NestedDataManager {
   constructor(privateApiRef, maxConcurrentRequests = MAX_CONCURRENT_REQUESTS) {
     this.pendingRequests = new Set();
     this.queuedRequests = new Set();
@@ -47,9 +54,9 @@ export class NestedDataManager {
         this.queuedRequests.add(id);
         loadingIds[id] = true;
       });
-      this.api.setState(state => _extends({}, state, {
-        dataSource: _extends({}, state.dataSource, {
-          loading: _extends({}, state.dataSource.loading, loadingIds)
+      this.api.setState(state => (0, _extends2.default)({}, state, {
+        dataSource: (0, _extends2.default)({}, state.dataSource, {
+          loading: (0, _extends2.default)({}, state.dataSource.loading, loadingIds)
         })
       }));
       this.processQueue();
@@ -84,4 +91,5 @@ export class NestedDataManager {
     this.api = privateApiRef.current;
     this.maxConcurrentRequests = maxConcurrentRequests;
   }
-}
+}
+exports.NestedDataManager = NestedDataManager;

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,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.gridDetailPanelRawHeightCacheSelector = exports.gridDetailPanelExpandedRowsHeightCacheSelector = exports.gridDetailPanelExpandedRowsContentCacheSelector = exports.gridDetailPanelExpandedRowIdsSelector = void 0;
+var _internals = require("@mui/x-data-grid/internals");
+const gridDetailPanelExpandedRowIdsSelector = state => state.detailPanel.expandedRowIds;
+exports.gridDetailPanelExpandedRowIdsSelector = gridDetailPanelExpandedRowIdsSelector;
+const gridDetailPanelExpandedRowsContentCacheSelector = state => state.detailPanel.contentCache;
+exports.gridDetailPanelExpandedRowsContentCacheSelector = gridDetailPanelExpandedRowsContentCacheSelector;
+const gridDetailPanelRawHeightCacheSelector = state => state.detailPanel.heightCache;
+
+// TODO v6: Make this selector return the full object, including the autoHeight flag
+exports.gridDetailPanelRawHeightCacheSelector = gridDetailPanelRawHeightCacheSelector;
+const gridDetailPanelExpandedRowsHeightCacheSelector = exports.gridDetailPanelExpandedRowsHeightCacheSelector = (0, _internals.createSelectorMemoized)(gridDetailPanelRawHeightCacheSelector, heightCache => Object.entries(heightCache).reduce((acc, [id, {
+  height
+}]) => {
+  acc[id] = height || 0;
+  return acc;
+}, {}));

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

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GRID_DETAIL_PANEL_TOGGLE_COL_DEF = void 0;
+Object.defineProperty(exports, "GRID_DETAIL_PANEL_TOGGLE_FIELD", {
+  enumerable: true,
+  get: function () {
+    return _internals.GRID_DETAIL_PANEL_TOGGLE_FIELD;
+  }
+});
+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 _GridDetailPanelToggleCell = require("../../../components/GridDetailPanelToggleCell");
+var _gridDetailPanelSelector = require("./gridDetailPanelSelector");
+var _jsxRuntime = require("react/jsx-runtime");
+const GRID_DETAIL_PANEL_TOGGLE_COL_DEF = exports.GRID_DETAIL_PANEL_TOGGLE_COL_DEF = (0, _extends2.default)({}, _xDataGrid.GRID_STRING_COL_DEF, {
+  type: 'custom',
+  field: _internals.GRID_DETAIL_PANEL_TOGGLE_FIELD,
+  editable: false,
+  sortable: false,
+  filterable: false,
+  resizable: false,
+  // @ts-ignore
+  aggregable: false,
+  disableColumnMenu: true,
+  disableReorder: true,
+  disableExport: true,
+  align: 'left',
+  width: 40,
+  valueGetter: (value, row, column, apiRef) => {
+    const rowId = (0, _xDataGrid.gridRowIdSelector)(apiRef.current.state, row);
+    const expandedRowIds = (0, _gridDetailPanelSelector.gridDetailPanelExpandedRowIdsSelector)(apiRef.current.state);
+    return expandedRowIds.includes(rowId);
+  },
+  renderCell: params => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridDetailPanelToggleCell.GridDetailPanelToggleCell, (0, _extends2.default)({}, params)),
+  renderHeader: ({
+    colDef
+  }) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    "aria-label": colDef.headerName
+  })
+});

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

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  gridDetailPanelExpandedRowIdsSelector: true,
+  gridDetailPanelExpandedRowsContentCacheSelector: true,
+  gridDetailPanelExpandedRowsHeightCacheSelector: true
+};
+Object.defineProperty(exports, "gridDetailPanelExpandedRowIdsSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridDetailPanelSelector.gridDetailPanelExpandedRowIdsSelector;
+  }
+});
+Object.defineProperty(exports, "gridDetailPanelExpandedRowsContentCacheSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridDetailPanelSelector.gridDetailPanelExpandedRowsContentCacheSelector;
+  }
+});
+Object.defineProperty(exports, "gridDetailPanelExpandedRowsHeightCacheSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridDetailPanelSelector.gridDetailPanelExpandedRowsHeightCacheSelector;
+  }
+});
+var _gridDetailPanelToggleColDef = require("./gridDetailPanelToggleColDef");
+Object.keys(_gridDetailPanelToggleColDef).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) 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");
+var _gridDetailPanelInterface = require("./gridDetailPanelInterface");
+Object.keys(_gridDetailPanelInterface).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _gridDetailPanelInterface[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _gridDetailPanelInterface[key];
+    }
+  });
+});

package/{esm → node}/hooks/features/detailPanel/useGridDetailPanel.js

@@ -1,17 +1,26 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import { useGridSelector, useGridApiEventHandler, useGridApiMethod, gridDataRowIdsSelector } from '@mui/x-data-grid';
-import { useGridRegisterPipeProcessor } from '@mui/x-data-grid/internals';
-import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from "./gridDetailPanelToggleColDef.js";
-import { gridDetailPanelExpandedRowIdsSelector, gridDetailPanelExpandedRowsContentCacheSelector, gridDetailPanelExpandedRowsHeightCacheSelector, gridDetailPanelRawHeightCacheSelector } from "./gridDetailPanelSelector.js";
-export const detailPanelStateInitializer = (state, props) => {
-  return _extends({}, state, {
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridDetailPanel = exports.detailPanelStateInitializer = 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");
+const detailPanelStateInitializer = (state, props) => {
+  return (0, _extends2.default)({}, state, {
     detailPanel: {
       heightCache: {},
       expandedRowIds: props.detailPanelExpandedRowIds ?? props.initialState?.detailPanel?.expandedRowIds ?? []
     }
   });
 };
+exports.detailPanelStateInitializer = detailPanelStateInitializer;
 function cacheContentAndHeight(apiRef, getDetailPanelContent, getDetailPanelHeight, previousHeightCache) {
   if (typeof getDetailPanelContent !== 'function') {
     return {};
@@ -19,7 +28,7 @@ function cacheContentAndHeight(apiRef, getDetailPanelContent, getDetailPanelHeig
 
   // TODO change to lazy approach using a Proxy
   // only call getDetailPanelContent when asked for an id
-  const rowIds = gridDataRowIdsSelector(apiRef);
+  const rowIds = (0, _xDataGrid.gridDataRowIdsSelector)(apiRef);
   const contentCache = rowIds.reduce((acc, id) => {
     const params = apiRef.current.getRowParams(id);
     acc[id] = getDetailPanelContent(params);
@@ -43,11 +52,10 @@ function cacheContentAndHeight(apiRef, getDetailPanelContent, getDetailPanelHeig
     heightCache
   };
 }
-export const useGridDetailPanel = (apiRef, props) => {
-  const expandedRowIds = useGridSelector(apiRef, gridDetailPanelExpandedRowIdsSelector);
-  const contentCache = useGridSelector(apiRef, gridDetailPanelExpandedRowsContentCacheSelector);
+const useGridDetailPanel = (apiRef, props) => {
+  const contentCache = (0, _xDataGrid.useGridSelector)(apiRef, _gridDetailPanelSelector.gridDetailPanelExpandedRowsContentCacheSelector);
   const handleCellClick = React.useCallback((params, event) => {
-    if (params.field !== GRID_DETAIL_PANEL_TOGGLE_FIELD || props.getDetailPanelContent == null) {
+    if (params.field !== _gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD || props.getDetailPanelContent == null) {
       return;
     }
     const content = contentCache[params.id];
@@ -65,17 +73,17 @@ export const useGridDetailPanel = (apiRef, props) => {
     if (props.getDetailPanelContent == null) {
       return;
     }
-    if (params.field === GRID_DETAIL_PANEL_TOGGLE_FIELD && event.key === ' ') {
+    if (params.field === _gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD && event.key === ' ') {
       apiRef.current.toggleDetailPanel(params.id);
     }
   }, [apiRef, props.getDetailPanelContent]);
-  useGridApiEventHandler(apiRef, 'cellClick', handleCellClick);
-  useGridApiEventHandler(apiRef, 'cellKeyDown', handleCellKeyDown);
+  (0, _xDataGrid.useGridApiEventHandler)(apiRef, 'cellClick', handleCellClick);
+  (0, _xDataGrid.useGridApiEventHandler)(apiRef, 'cellKeyDown', handleCellKeyDown);
   apiRef.current.registerControlState({
     stateId: 'detailPanels',
     propModel: props.detailPanelExpandedRowIds,
     propOnChange: props.onDetailPanelExpandedRowIdsChange,
-    stateSelector: gridDetailPanelExpandedRowIdsSelector,
+    stateSelector: _gridDetailPanelSelector.gridDetailPanelExpandedRowIdsSelector,
     changeEvent: 'detailPanelsExpandedRowIdsChange'
   });
   const toggleDetailPanel = React.useCallback(id => {
@@ -89,26 +97,27 @@ export const useGridDetailPanel = (apiRef, props) => {
     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(() => gridDetailPanelExpandedRowIdsSelector(apiRef.current.state), [apiRef]);
+  const getExpandedDetailPanels = React.useCallback(() => (0, _gridDetailPanelSelector.gridDetailPanelExpandedRowIdsSelector)(apiRef.current.state), [apiRef]);
   const setExpandedDetailPanels = React.useCallback(ids => {
     apiRef.current.setState(state => {
-      return _extends({}, state, {
-        detailPanel: _extends({}, state.detailPanel, {
+      return (0, _extends2.default)({}, state, {
+        detailPanel: (0, _extends2.default)({}, state.detailPanel, {
           expandedRowIds: ids
         })
       });
     });
+    apiRef.current.requestPipeProcessorsApplication('rowHeight');
   }, [apiRef]);
   const storeDetailPanelHeight = React.useCallback((id, height) => {
-    const heightCache = gridDetailPanelRawHeightCacheSelector(apiRef.current.state);
+    const heightCache = (0, _gridDetailPanelSelector.gridDetailPanelRawHeightCacheSelector)(apiRef.current.state);
     if (!heightCache[id] || heightCache[id].height === height) {
       return;
     }
     apiRef.current.setState(state => {
-      return _extends({}, state, {
-        detailPanel: _extends({}, state.detailPanel, {
-          heightCache: _extends({}, heightCache, {
-            [id]: _extends({}, heightCache[id], {
+      return (0, _extends2.default)({}, state, {
+        detailPanel: (0, _extends2.default)({}, state.detailPanel, {
+          heightCache: (0, _extends2.default)({}, heightCache, {
+            [id]: (0, _extends2.default)({}, heightCache[id], {
               height
             })
           })
@@ -118,7 +127,7 @@ export const useGridDetailPanel = (apiRef, props) => {
     apiRef.current.requestPipeProcessorsApplication('rowHeight');
   }, [apiRef]);
   const detailPanelHasAutoHeight = React.useCallback(id => {
-    const heightCache = gridDetailPanelRawHeightCacheSelector(apiRef.current.state);
+    const heightCache = (0, _gridDetailPanelSelector.gridDetailPanelRawHeightCacheSelector)(apiRef.current.state);
     return heightCache[id] ? heightCache[id].autoHeight : false;
   }, [apiRef]);
   const detailPanelPubicApi = {
@@ -130,11 +139,11 @@ export const useGridDetailPanel = (apiRef, props) => {
     storeDetailPanelHeight,
     detailPanelHasAutoHeight
   };
-  useGridApiMethod(apiRef, detailPanelPubicApi, 'public');
-  useGridApiMethod(apiRef, detailPanelPrivateApi, 'private');
+  (0, _xDataGrid.useGridApiMethod)(apiRef, detailPanelPubicApi, 'public');
+  (0, _xDataGrid.useGridApiMethod)(apiRef, detailPanelPrivateApi, 'private');
   React.useEffect(() => {
     if (props.detailPanelExpandedRowIds) {
-      const currentModel = gridDetailPanelExpandedRowIdsSelector(apiRef.current.state);
+      const currentModel = (0, _gridDetailPanelSelector.gridDetailPanelExpandedRowIdsSelector)(apiRef.current.state);
       if (currentModel !== props.detailPanelExpandedRowIds) {
         apiRef.current.setExpandedDetailPanels(props.detailPanelExpandedRowIds);
       }
@@ -145,13 +154,13 @@ export const useGridDetailPanel = (apiRef, props) => {
       return;
     }
     apiRef.current.setState(state => {
-      return _extends({}, state, {
-        detailPanel: _extends({}, state.detailPanel, cacheContentAndHeight(apiRef, props.getDetailPanelContent, props.getDetailPanelHeight, state.detailPanel.heightCache))
+      return (0, _extends2.default)({}, state, {
+        detailPanel: (0, _extends2.default)({}, state.detailPanel, cacheContentAndHeight(apiRef, props.getDetailPanelContent, props.getDetailPanelHeight, state.detailPanel.heightCache))
       });
     });
     apiRef.current.forceUpdate();
   }, [apiRef, props.getDetailPanelContent, props.getDetailPanelHeight]);
-  useGridApiEventHandler(apiRef, 'sortedRowsSet', updateCachesAndForceUpdate);
+  (0, _xDataGrid.useGridApiEventHandler)(apiRef, 'sortedRowsSet', updateCachesAndForceUpdate);
   const previousGetDetailPanelContentProp = React.useRef(undefined);
   const previousGetDetailPanelHeightProp = React.useRef(undefined);
   const updateCachesIfNeeded = React.useCallback(() => {
@@ -159,25 +168,26 @@ export const useGridDetailPanel = (apiRef, props) => {
       return;
     }
     apiRef.current.setState(state => {
-      return _extends({}, state, {
-        detailPanel: _extends({}, state.detailPanel, cacheContentAndHeight(apiRef, props.getDetailPanelContent, props.getDetailPanelHeight, state.detailPanel.heightCache))
+      return (0, _extends2.default)({}, state, {
+        detailPanel: (0, _extends2.default)({}, state.detailPanel, cacheContentAndHeight(apiRef, props.getDetailPanelContent, props.getDetailPanelHeight, state.detailPanel.heightCache))
       });
     });
     previousGetDetailPanelContentProp.current = props.getDetailPanelContent;
     previousGetDetailPanelHeightProp.current = props.getDetailPanelHeight;
   }, [apiRef, props.getDetailPanelContent, props.getDetailPanelHeight]);
   const addDetailHeight = React.useCallback((initialValue, row) => {
+    const expandedRowIds = (0, _gridDetailPanelSelector.gridDetailPanelExpandedRowIdsSelector)(apiRef.current.state);
     if (!expandedRowIds || expandedRowIds.length === 0 || !expandedRowIds.includes(row.id)) {
       initialValue.detail = 0;
       return initialValue;
     }
     updateCachesIfNeeded();
-    const heightCache = gridDetailPanelExpandedRowsHeightCacheSelector(apiRef);
+    const heightCache = (0, _gridDetailPanelSelector.gridDetailPanelExpandedRowsHeightCacheSelector)(apiRef);
     initialValue.detail = heightCache[row.id] ?? 0; // Fallback to zero because the cache might not be ready yet (for example page was changed)
     return initialValue;
-  }, [apiRef, expandedRowIds, updateCachesIfNeeded]);
+  }, [apiRef, updateCachesIfNeeded]);
   const enabled = props.getDetailPanelContent !== undefined;
-  useGridRegisterPipeProcessor(apiRef, 'rowHeight', addDetailHeight, enabled);
+  (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'rowHeight', addDetailHeight, enabled);
   const isFirstRender = React.useRef(true);
   if (isFirstRender.current) {
     updateCachesIfNeeded();
@@ -188,4 +198,5 @@ export const useGridDetailPanel = (apiRef, props) => {
     }
     isFirstRender.current = false;
   }, [apiRef, updateCachesIfNeeded]);
-};
+};
+exports.useGridDetailPanel = useGridDetailPanel;

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

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridDetailPanelPreProcessors = 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");
+const useGridDetailPanelPreProcessors = (privateApiRef, props) => {
+  const addToggleColumn = React.useCallback(columnsState => {
+    if (props.getDetailPanelContent == null) {
+      // Remove the toggle column, when it exists
+      if (columnsState.lookup[_gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD]) {
+        delete columnsState.lookup[_gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD];
+        columnsState.orderedFields = columnsState.orderedFields.filter(field => field !== _gridDetailPanelToggleColDef.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[_gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD]) {
+      return columnsState;
+    }
+
+    // Otherwise, add the toggle column at the beginning
+    columnsState.orderedFields = [_gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD, ...columnsState.orderedFields];
+    columnsState.lookup[_gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD] = (0, _extends2.default)({}, _gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_COL_DEF, {
+      headerName: privateApiRef.current.getLocaleText('detailPanelToggle')
+    });
+    return columnsState;
+  }, [privateApiRef, props.getDetailPanelContent]);
+  const addExpandedClassToRow = React.useCallback((classes, id) => {
+    if (props.getDetailPanelContent == null) {
+      return classes;
+    }
+    const expandedRowIds = (0, _gridDetailPanelSelector.gridDetailPanelExpandedRowIdsSelector)(privateApiRef.current.state);
+    if (!expandedRowIds.includes(id)) {
+      return classes;
+    }
+    return [...classes, _xDataGrid.gridClasses['row--detailPanelExpanded']];
+  }, [privateApiRef, props.getDetailPanelContent]);
+  (0, _internals.useGridRegisterPipeProcessor)(privateApiRef, 'hydrateColumns', addToggleColumn);
+  (0, _internals.useGridRegisterPipeProcessor)(privateApiRef, 'rowClassName', addExpandedClassToRow);
+};
+exports.useGridDetailPanelPreProcessors = useGridDetailPanelPreProcessors;