@mui/x-data-grid-pro 8.0.0-beta.3 → 8.1.0

package/modern/hooks/features/dataSource/useGridDataSourceBasePro.js

@@ -1,179 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import useLazyRef from '@mui/utils/useLazyRef';
-import { useGridSelector, GridGetRowsError } from '@mui/x-data-grid';
-import { gridRowGroupsToFetchSelector, useGridDataSourceBase, CacheChunkManager, gridGetRowsParamsSelector, DataSourceRowsUpdateStrategy, GridStrategyGroup } from '@mui/x-data-grid/internals';
-import { warnOnce } from '@mui/x-internals/warning';
-import { NestedDataManager, RequestStatus } from "./utils.js";
-import { gridDataSourceErrorsSelector } from "./gridDataSourceSelector.js";
-export const INITIAL_STATE = {
-  loading: {},
-  errors: {}
-};
-export const useGridDataSourceBasePro = (apiRef, props, options = {}) => {
-  const groupsToAutoFetch = useGridSelector(apiRef, gridRowGroupsToFetchSelector);
-  const nestedDataManager = useLazyRef(() => new NestedDataManager(apiRef)).current;
-  const scheduledGroups = React.useRef(0);
-  const clearDataSourceState = React.useCallback(() => {
-    nestedDataManager.clear();
-    scheduledGroups.current = 0;
-    const dataSourceState = apiRef.current.state.dataSource;
-    if (dataSourceState !== INITIAL_STATE) {
-      apiRef.current.resetDataSourceState();
-    }
-    return null;
-  }, [apiRef, nestedDataManager]);
-  const {
-    api,
-    strategyProcessor,
-    events,
-    cacheChunkManager,
-    cache
-  } = useGridDataSourceBase(apiRef, props, _extends({}, options, {
-    fetchRowChildren: nestedDataManager.queue,
-    clearDataSourceState
-  }));
-  const setStrategyAvailability = React.useCallback(() => {
-    apiRef.current.setStrategyAvailability(GridStrategyGroup.DataSource, DataSourceRowsUpdateStrategy.Default, props.dataSource && !props.lazyLoading ? () => true : () => false);
-  }, [apiRef, props.dataSource, props.lazyLoading]);
-  const onDataSourceErrorProp = props.onDataSourceError;
-  const fetchRowChildren = React.useCallback(async id => {
-    const pipedParams = apiRef.current.unstable_applyPipeProcessors('getRowsParams', {});
-    if (!props.treeData && (pipedParams.groupFields?.length ?? 0) === 0) {
-      nestedDataManager.clearPendingRequest(id);
-      return;
-    }
-    const getRows = props.dataSource?.getRows;
-    if (!getRows) {
-      nestedDataManager.clearPendingRequest(id);
-      return;
-    }
-    const rowNode = apiRef.current.getRowNode(id);
-    if (!rowNode) {
-      nestedDataManager.clearPendingRequest(id);
-      return;
-    }
-    const fetchParams = _extends({}, gridGetRowsParamsSelector(apiRef), pipedParams, {
-      groupKeys: rowNode.path
-    });
-    const cacheKeys = cacheChunkManager.getCacheKeys(fetchParams);
-    const responses = cacheKeys.map(cacheKey => cache.get(cacheKey));
-    const cachedData = responses.some(response => response === undefined) ? undefined : CacheChunkManager.mergeResponses(responses);
-    if (cachedData !== undefined) {
-      const rows = cachedData.rows;
-      nestedDataManager.setRequestSettled(id);
-      apiRef.current.updateServerRows(rows, rowNode.path);
-      apiRef.current.setRowCount(cachedData.rowCount === undefined ? -1 : cachedData.rowCount);
-      apiRef.current.setRowChildrenExpansion(id, true);
-      apiRef.current.dataSource.setChildrenLoading(id, false);
-      return;
-    }
-    const existingError = gridDataSourceErrorsSelector(apiRef)[id] ?? null;
-    if (existingError) {
-      apiRef.current.dataSource.setChildrenFetchError(id, null);
-    }
-    try {
-      const getRowsResponse = await getRows(fetchParams);
-      if (!apiRef.current.getRowNode(id)) {
-        // The row has been removed from the grid
-        nestedDataManager.clearPendingRequest(id);
-        return;
-      }
-      if (nestedDataManager.getRequestStatus(id) === RequestStatus.UNKNOWN) {
-        apiRef.current.dataSource.setChildrenLoading(id, false);
-        return;
-      }
-      nestedDataManager.setRequestSettled(id);
-      const cacheResponses = cacheChunkManager.splitResponse(fetchParams, getRowsResponse);
-      cacheResponses.forEach((response, key) => {
-        cache.set(key, response);
-      });
-      apiRef.current.setRowCount(getRowsResponse.rowCount === undefined ? -1 : getRowsResponse.rowCount);
-      apiRef.current.updateServerRows(getRowsResponse.rows, rowNode.path);
-      apiRef.current.setRowChildrenExpansion(id, true);
-    } catch (error) {
-      const childrenFetchError = error;
-      apiRef.current.dataSource.setChildrenFetchError(id, childrenFetchError);
-      if (typeof onDataSourceErrorProp === 'function') {
-        onDataSourceErrorProp(new GridGetRowsError({
-          message: childrenFetchError.message,
-          params: fetchParams,
-          cause: childrenFetchError
-        }));
-      } else if (process.env.NODE_ENV !== 'production') {
-        warnOnce(['MUI X: A call to `dataSource.getRows()` threw an error which was not handled because `unstable_onDataSourceError()` is missing.', 'To handle the error pass a callback to the `onDataSourceError` prop, for example `<DataGrid unstable_onDataSourceError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/server-side-data/#error-handling.'], 'error');
-      }
-    } finally {
-      apiRef.current.dataSource.setChildrenLoading(id, false);
-      nestedDataManager.setRequestSettled(id);
-    }
-  }, [nestedDataManager, cacheChunkManager, cache, onDataSourceErrorProp, apiRef, props.treeData, props.dataSource?.getRows]);
-  const setChildrenLoading = React.useCallback((parentId, isLoading) => {
-    apiRef.current.setState(state => {
-      if (!state.dataSource.loading[parentId] && isLoading === false) {
-        return state;
-      }
-      const newLoadingState = _extends({}, state.dataSource.loading);
-      if (isLoading === false) {
-        delete newLoadingState[parentId];
-      } else {
-        newLoadingState[parentId] = isLoading;
-      }
-      return _extends({}, state, {
-        dataSource: _extends({}, state.dataSource, {
-          loading: newLoadingState
-        })
-      });
-    });
-  }, [apiRef]);
-  const setChildrenFetchError = React.useCallback((parentId, error) => {
-    apiRef.current.setState(state => {
-      const newErrorsState = _extends({}, state.dataSource.errors);
-      if (error === null && newErrorsState[parentId] !== undefined) {
-        delete newErrorsState[parentId];
-      } else {
-        newErrorsState[parentId] = error;
-      }
-      return _extends({}, state, {
-        dataSource: _extends({}, state.dataSource, {
-          errors: newErrorsState
-        })
-      });
-    });
-  }, [apiRef]);
-  const resetDataSourceState = React.useCallback(() => {
-    apiRef.current.setState(state => {
-      return _extends({}, state, {
-        dataSource: INITIAL_STATE
-      });
-    });
-  }, [apiRef]);
-  const dataSourceApi = {
-    dataSource: _extends({}, api.public.dataSource, {
-      setChildrenLoading,
-      setChildrenFetchError
-    })
-  };
-  const dataSourcePrivateApi = {
-    fetchRowChildren,
-    resetDataSourceState
-  };
-  React.useEffect(() => {
-    if (groupsToAutoFetch && groupsToAutoFetch.length && scheduledGroups.current < groupsToAutoFetch.length) {
-      const groupsToSchedule = groupsToAutoFetch.slice(scheduledGroups.current);
-      nestedDataManager.queue(groupsToSchedule);
-      scheduledGroups.current = groupsToAutoFetch.length;
-    }
-  }, [apiRef, nestedDataManager, groupsToAutoFetch]);
-  return {
-    api: {
-      public: dataSourceApi,
-      private: dataSourcePrivateApi
-    },
-    strategyProcessor,
-    events,
-    setStrategyAvailability,
-    cacheChunkManager,
-    cache
-  };
-};

package/modern/hooks/features/dataSource/useGridDataSourcePro.d.ts

@@ -1,6 +0,0 @@
-import { RefObject } from '@mui/x-internals/types';
-import { GridStateInitializer } from '@mui/x-data-grid/internals';
-import { GridPrivateApiPro } from "../../../models/gridApiPro.js";
-import { DataGridProProcessedProps } from "../../../models/dataGridProProps.js";
-export declare const dataSourceStateInitializer: GridStateInitializer;
-export declare const useGridDataSourcePro: (apiRef: RefObject<GridPrivateApiPro>, props: DataGridProProcessedProps) => void;

package/modern/hooks/features/dataSource/useGridDataSourcePro.js

@@ -1,35 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import { useGridEvent as addEventHandler, useGridApiMethod } from '@mui/x-data-grid';
-import { useGridRegisterStrategyProcessor } from '@mui/x-data-grid/internals';
-import { INITIAL_STATE, useGridDataSourceBasePro } from "./useGridDataSourceBasePro.js";
-function getKeyPro(params) {
-  return JSON.stringify([params.filterModel, params.sortModel, params.groupKeys, params.start, params.end]);
-}
-export const dataSourceStateInitializer = state => {
-  return _extends({}, state, {
-    dataSource: INITIAL_STATE
-  });
-};
-const options = {
-  cacheOptions: {
-    getKey: getKeyPro
-  }
-};
-export const useGridDataSourcePro = (apiRef, props) => {
-  const {
-    api,
-    strategyProcessor,
-    events,
-    setStrategyAvailability
-  } = useGridDataSourceBasePro(apiRef, props, options);
-  useGridApiMethod(apiRef, api.public, 'public');
-  useGridApiMethod(apiRef, api.private, 'private');
-  useGridRegisterStrategyProcessor(apiRef, strategyProcessor.strategyName, strategyProcessor.group, strategyProcessor.processor);
-  Object.entries(events).forEach(([event, handler]) => {
-    addEventHandler(apiRef, event, handler);
-  });
-  React.useEffect(() => {
-    setStrategyAvailability();
-  }, [setStrategyAvailability]);
-};

package/modern/hooks/features/dataSource/utils.d.ts

@@ -1,29 +0,0 @@
-import { RefObject } from '@mui/x-internals/types';
-import { GridRowId } from '@mui/x-data-grid';
-import { GridPrivateApiPro } from "../../../models/index.js";
-export declare enum RequestStatus {
-  QUEUED = 0,
-  PENDING = 1,
-  SETTLED = 2,
-  UNKNOWN = 3,
-}
-/**
- * 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 declare class NestedDataManager {
-  private pendingRequests;
-  private queuedRequests;
-  private settledRequests;
-  private api;
-  private maxConcurrentRequests;
-  constructor(privateApiRef: RefObject<GridPrivateApiPro>, maxConcurrentRequests?: number);
-  private processQueue;
-  queue: (ids: GridRowId[]) => Promise<void>;
-  setRequestSettled: (id: GridRowId) => void;
-  clear: () => void;
-  clearPendingRequest: (id: GridRowId) => void;
-  getRequestStatus: (id: GridRowId) => RequestStatus;
-  getActiveRequestsCount: () => number;
-}

package/modern/hooks/features/dataSource/utils.js

@@ -1,82 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-const MAX_CONCURRENT_REQUESTS = Infinity;
-export let 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 {
-  constructor(privateApiRef, maxConcurrentRequests = MAX_CONCURRENT_REQUESTS) {
-    this.pendingRequests = new Set();
-    this.queuedRequests = new Set();
-    this.settledRequests = new Set();
-    this.api = void 0;
-    this.maxConcurrentRequests = void 0;
-    this.processQueue = async () => {
-      if (this.queuedRequests.size === 0 || this.pendingRequests.size >= this.maxConcurrentRequests) {
-        return;
-      }
-      const loopLength = Math.min(this.maxConcurrentRequests - this.pendingRequests.size, this.queuedRequests.size);
-      if (loopLength === 0) {
-        return;
-      }
-      const fetchQueue = Array.from(this.queuedRequests);
-      for (let i = 0; i < loopLength; i += 1) {
-        const id = fetchQueue[i];
-        this.queuedRequests.delete(id);
-        this.pendingRequests.add(id);
-        this.api.fetchRowChildren(id);
-      }
-    };
-    this.queue = async ids => {
-      const loadingIds = {};
-      ids.forEach(id => {
-        this.queuedRequests.add(id);
-        loadingIds[id] = true;
-      });
-      this.api.setState(state => _extends({}, state, {
-        dataSource: _extends({}, state.dataSource, {
-          loading: _extends({}, state.dataSource.loading, loadingIds)
-        })
-      }));
-      this.processQueue();
-    };
-    this.setRequestSettled = id => {
-      this.pendingRequests.delete(id);
-      this.settledRequests.add(id);
-      this.processQueue();
-    };
-    this.clear = () => {
-      this.queuedRequests.clear();
-      Array.from(this.pendingRequests).forEach(id => this.clearPendingRequest(id));
-    };
-    this.clearPendingRequest = id => {
-      this.api.dataSource.setChildrenLoading(id, false);
-      this.pendingRequests.delete(id);
-      this.processQueue();
-    };
-    this.getRequestStatus = id => {
-      if (this.pendingRequests.has(id)) {
-        return RequestStatus.PENDING;
-      }
-      if (this.queuedRequests.has(id)) {
-        return RequestStatus.QUEUED;
-      }
-      if (this.settledRequests.has(id)) {
-        return RequestStatus.SETTLED;
-      }
-      return RequestStatus.UNKNOWN;
-    };
-    this.getActiveRequestsCount = () => this.pendingRequests.size + this.queuedRequests.size;
-    this.api = privateApiRef.current;
-    this.maxConcurrentRequests = maxConcurrentRequests;
-  }
-}

package/modern/hooks/features/detailPanel/gridDetailPanelInterface.d.ts

@@ -1,41 +0,0 @@
-import * as React from 'react';
-import { GridRowId } from '@mui/x-data-grid';
-type DetailPanelHeightCache = Record<GridRowId, {
-  autoHeight: boolean;
-  height: number;
-}>;
-/**
- * The master/detail API interface that is available in the grid [[apiRef]].
- */
-export interface GridDetailPanelApi {
-  /**
-   * Expands or collapses the detail panel of a row.
-   * @param {string} id The row id to toggle the panel.
-   */
-  toggleDetailPanel: (id: GridRowId) => void;
-  /**
-   * Returns the rows whose detail panel is open.
-   * @returns {GridRowId[]} An array of row ids.
-   */
-  getExpandedDetailPanels: () => Set<GridRowId>;
-  /**
-   * Changes which rows to expand the detail panel.
-   * @param {GridRowId[]} ids The ids of the rows to open the detail panel.
-   */
-  setExpandedDetailPanels: (ids: Set<GridRowId>) => void;
-}
-export interface GridDetailPanelPrivateApi {
-  /**
-   * Stores the panel height measurement and triggers the row height pre-processing.
-   * @param {GridRowId} id The id of the row.
-   * @param {number} height The new height.
-   */
-  storeDetailPanelHeight: (id: GridRowId, height: number) => void;
-}
-export interface GridDetailPanelState {
-  expandedRowIds: Set<GridRowId>;
-  contentCache: Record<GridRowId, React.ReactNode>;
-  heightCache: DetailPanelHeightCache;
-}
-export type GridDetailPanelInitialState = Pick<GridDetailPanelState, 'expandedRowIds'>;
-export {};

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

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

package/modern/hooks/features/detailPanel/gridDetailPanelSelector.d.ts

@@ -1,14 +0,0 @@
-import { GridStatePro } from "../../../models/gridStatePro.js";
-export declare const gridDetailPanelStateSelector: import("@mui/x-data-grid").OutputSelector<GridStatePro, unknown, import("./gridDetailPanelInterface").GridDetailPanelState>;
-export declare const gridDetailPanelExpandedRowIdsSelector: import("@mui/x-data-grid").OutputSelector<GridStatePro, import("./gridDetailPanelInterface").GridDetailPanelState, Set<import("@mui/x-data-grid").GridRowId>>;
-export declare const gridDetailPanelExpandedRowsContentCacheSelector: import("@mui/x-data-grid").OutputSelector<GridStatePro, import("./gridDetailPanelInterface").GridDetailPanelState, Record<import("@mui/x-data-grid").GridRowId, import("react").ReactNode>>;
-export declare const gridDetailPanelRawHeightCacheSelector: import("@mui/x-data-grid").OutputSelector<GridStatePro, import("./gridDetailPanelInterface").GridDetailPanelState, {
-  [x: string]: {
-    autoHeight: boolean;
-    height: number;
-  };
-  [x: number]: {
-    autoHeight: boolean;
-    height: number;
-  };
-}>;

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

@@ -1,5 +0,0 @@
-import { createSelector, createRootSelector, createSelectorMemoized } from '@mui/x-data-grid/internals';
-export const gridDetailPanelStateSelector = createRootSelector(state => state.detailPanel);
-export const gridDetailPanelExpandedRowIdsSelector = createSelector(gridDetailPanelStateSelector, detailPanelState => detailPanelState.expandedRowIds);
-export const gridDetailPanelExpandedRowsContentCacheSelector = createSelector(gridDetailPanelStateSelector, detailPanelState => detailPanelState.contentCache);
-export const gridDetailPanelRawHeightCacheSelector = createSelectorMemoized(gridDetailPanelStateSelector, detailPanelState => detailPanelState.heightCache);

package/modern/hooks/features/detailPanel/gridDetailPanelToggleColDef.d.ts

@@ -1,4 +0,0 @@
-import { GridColDef } from '@mui/x-data-grid';
-import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '@mui/x-data-grid/internals';
-export { GRID_DETAIL_PANEL_TOGGLE_FIELD };
-export declare const GRID_DETAIL_PANEL_TOGGLE_COL_DEF: GridColDef;

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

@@ -1,34 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import { GRID_STRING_COL_DEF, gridRowIdSelector } from '@mui/x-data-grid';
-import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '@mui/x-data-grid/internals';
-import { GridDetailPanelToggleCell } from "../../../components/GridDetailPanelToggleCell.js";
-import { gridDetailPanelExpandedRowIdsSelector } from "./gridDetailPanelSelector.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-export { GRID_DETAIL_PANEL_TOGGLE_FIELD };
-export const GRID_DETAIL_PANEL_TOGGLE_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
-  type: 'custom',
-  field: 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 = gridRowIdSelector(apiRef, row);
-    const expandedRowIds = gridDetailPanelExpandedRowIdsSelector(apiRef);
-    return expandedRowIds.has(rowId);
-  },
-  renderCell: params => /*#__PURE__*/_jsx(GridDetailPanelToggleCell, _extends({}, params)),
-  renderHeader: ({
-    colDef
-  }) => /*#__PURE__*/_jsx("div", {
-    "aria-label": colDef.headerName
-  })
-});

package/modern/hooks/features/detailPanel/index.d.ts

@@ -1,3 +0,0 @@
-export * from "./gridDetailPanelToggleColDef.js";
-export { gridDetailPanelExpandedRowIdsSelector, gridDetailPanelExpandedRowsContentCacheSelector } from "./gridDetailPanelSelector.js";
-export * from "./gridDetailPanelInterface.js";

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

@@ -1,3 +0,0 @@
-export * from "./gridDetailPanelToggleColDef.js";
-export { gridDetailPanelExpandedRowIdsSelector, gridDetailPanelExpandedRowsContentCacheSelector } from "./gridDetailPanelSelector.js";
-export * from "./gridDetailPanelInterface.js";

package/modern/hooks/features/detailPanel/useGridDetailPanel.d.ts

@@ -1,6 +0,0 @@
-import { RefObject } from '@mui/x-internals/types';
-import { GridStateInitializer } from '@mui/x-data-grid/internals';
-import { GridPrivateApiPro } from "../../../models/gridApiPro.js";
-import { DataGridProProcessedProps } from "../../../models/dataGridProProps.js";
-export declare const detailPanelStateInitializer: GridStateInitializer<Pick<DataGridProProcessedProps, 'initialState' | 'detailPanelExpandedRowIds'>>;
-export declare const useGridDetailPanel: (apiRef: RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "getDetailPanelContent" | "getDetailPanelHeight" | "detailPanelExpandedRowIds" | "onDetailPanelExpandedRowIdsChange">) => void;

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

@@ -1,191 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import { useGridSelector, useGridEvent, 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, gridDetailPanelRawHeightCacheSelector } from "./gridDetailPanelSelector.js";
-const emptySet = new Set();
-export const detailPanelStateInitializer = (state, props) => {
-  return _extends({}, state, {
-    detailPanel: {
-      heightCache: {},
-      expandedRowIds: props.detailPanelExpandedRowIds ?? props.initialState?.detailPanel?.expandedRowIds ?? emptySet
-    }
-  });
-};
-function cacheContentAndHeight(apiRef, getDetailPanelContent, getDetailPanelHeight, previousHeightCache) {
-  if (typeof getDetailPanelContent !== 'function') {
-    return {};
-  }
-
-  // TODO change to lazy approach using a Proxy
-  // only call getDetailPanelContent when asked for an id
-  const rowIds = gridDataRowIdsSelector(apiRef);
-  const contentCache = {};
-  const heightCache = {};
-  for (let i = 0; i < rowIds.length; i += 1) {
-    const id = rowIds[i];
-    const params = apiRef.current.getRowParams(id);
-    const content = getDetailPanelContent(params);
-    contentCache[id] = content;
-    if (content == null) {
-      continue;
-    }
-    const height = getDetailPanelHeight(params);
-    const autoHeight = height === 'auto';
-    heightCache[id] = {
-      autoHeight,
-      height: autoHeight ? previousHeightCache[id]?.height : height
-    };
-  }
-  return {
-    contentCache,
-    heightCache
-  };
-}
-export const useGridDetailPanel = (apiRef, props) => {
-  const expandedRowIds = useGridSelector(apiRef, gridDetailPanelExpandedRowIdsSelector);
-  const contentCache = useGridSelector(apiRef, gridDetailPanelExpandedRowsContentCacheSelector);
-  const handleCellClick = React.useCallback((params, event) => {
-    if (params.field !== 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 (props.getDetailPanelContent == null) {
-      return;
-    }
-    if (params.field === GRID_DETAIL_PANEL_TOGGLE_FIELD && event.key === ' ') {
-      apiRef.current.toggleDetailPanel(params.id);
-    }
-  }, [apiRef, props.getDetailPanelContent]);
-  useGridEvent(apiRef, 'cellClick', handleCellClick);
-  useGridEvent(apiRef, 'cellKeyDown', handleCellKeyDown);
-  apiRef.current.registerControlState({
-    stateId: 'detailPanels',
-    propModel: props.detailPanelExpandedRowIds,
-    propOnChange: props.onDetailPanelExpandedRowIdsChange,
-    stateSelector: gridDetailPanelExpandedRowIdsSelector,
-    changeEvent: '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();
-    const newIds = new Set(ids);
-    if (ids.has(id)) {
-      newIds.delete(id);
-    } else {
-      newIds.add(id);
-    }
-    apiRef.current.setExpandedDetailPanels(newIds);
-  }, [apiRef, contentCache, props.getDetailPanelContent]);
-  const getExpandedDetailPanels = React.useCallback(() => gridDetailPanelExpandedRowIdsSelector(apiRef), [apiRef]);
-  const setExpandedDetailPanels = React.useCallback(ids => {
-    apiRef.current.setState(state => {
-      return _extends({}, state, {
-        detailPanel: _extends({}, state.detailPanel, {
-          expandedRowIds: ids
-        })
-      });
-    });
-  }, [apiRef]);
-  const storeDetailPanelHeight = React.useCallback((id, height) => {
-    const heightCache = gridDetailPanelRawHeightCacheSelector(apiRef);
-    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], {
-              height
-            })
-          })
-        })
-      });
-    });
-    apiRef.current.requestPipeProcessorsApplication('rowHeight');
-  }, [apiRef]);
-  const detailPanelPubicApi = {
-    toggleDetailPanel,
-    getExpandedDetailPanels,
-    setExpandedDetailPanels
-  };
-  const detailPanelPrivateApi = {
-    storeDetailPanelHeight
-  };
-  useGridApiMethod(apiRef, detailPanelPubicApi, 'public');
-  useGridApiMethod(apiRef, detailPanelPrivateApi, 'private');
-  React.useEffect(() => {
-    if (props.detailPanelExpandedRowIds) {
-      const currentModel = gridDetailPanelExpandedRowIdsSelector(apiRef);
-      if (currentModel !== props.detailPanelExpandedRowIds) {
-        apiRef.current.setExpandedDetailPanels(props.detailPanelExpandedRowIds);
-      }
-    }
-  }, [apiRef, props.detailPanelExpandedRowIds]);
-  const updateCaches = React.useCallback(() => {
-    if (!props.getDetailPanelContent) {
-      return;
-    }
-    apiRef.current.setState(state => {
-      return _extends({}, state, {
-        detailPanel: _extends({}, state.detailPanel, cacheContentAndHeight(apiRef, props.getDetailPanelContent, props.getDetailPanelHeight, state.detailPanel.heightCache))
-      });
-    });
-  }, [apiRef, props.getDetailPanelContent, props.getDetailPanelHeight]);
-  useGridEvent(apiRef, 'sortedRowsSet', updateCaches);
-  const previousGetDetailPanelContentProp = React.useRef(undefined);
-  const previousGetDetailPanelHeightProp = React.useRef(undefined);
-  const updateCachesIfNeeded = React.useCallback(() => {
-    if (props.getDetailPanelContent === previousGetDetailPanelContentProp.current && props.getDetailPanelHeight === previousGetDetailPanelHeightProp.current) {
-      return;
-    }
-    apiRef.current.setState(state => {
-      return _extends({}, state, {
-        detailPanel: _extends({}, 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) => {
-    if (!expandedRowIds || expandedRowIds.size === 0 || !expandedRowIds.has(row.id)) {
-      initialValue.detail = 0;
-      return initialValue;
-    }
-    updateCachesIfNeeded();
-    const heightCache = gridDetailPanelRawHeightCacheSelector(apiRef);
-    initialValue.detail = heightCache[row.id].height ?? 0; // Fallback to zero because the cache might not be ready yet (for example page was changed)
-    return initialValue;
-  }, [apiRef, expandedRowIds, updateCachesIfNeeded]);
-  const enabled = props.getDetailPanelContent !== undefined;
-  useGridRegisterPipeProcessor(apiRef, 'rowHeight', addDetailHeight, enabled);
-  const isFirstRender = React.useRef(true);
-  if (isFirstRender.current) {
-    updateCachesIfNeeded();
-  }
-  React.useEffect(() => {
-    if (!isFirstRender.current) {
-      updateCachesIfNeeded();
-    }
-    isFirstRender.current = false;
-  }, [apiRef, updateCachesIfNeeded]);
-};

package/modern/hooks/features/detailPanel/useGridDetailPanelPreProcessors.d.ts

@@ -1,4 +0,0 @@
-import { RefObject } from '@mui/x-internals/types';
-import { DataGridProProcessedProps } from "../../../models/dataGridProProps.js";
-import { GridPrivateApiPro } from "../../../models/gridApiPro.js";
-export declare const useGridDetailPanelPreProcessors: (privateApiRef: RefObject<GridPrivateApiPro>, props: DataGridProProcessedProps) => void;