@mui/x-data-grid 9.0.0-alpha.1 → 9.0.0-alpha.2

package/hooks/features/dataSource/useGridDataSourceBase.mjs

@@ -0,0 +1,321 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["skipCache", "keepChildrenExpanded"];
+import * as React from 'react';
+import useLazyRef from '@mui/utils/useLazyRef';
+import useEventCallback from '@mui/utils/useEventCallback';
+import debounce from '@mui/utils/debounce';
+import { warnOnce } from '@mui/x-internals/warning';
+import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
+import { GRID_ROOT_GROUP_ID } from "../rows/gridRowsUtils.mjs";
+import { runIf } from "../../../utils/utils.mjs";
+import { GridStrategyGroup } from "../../core/strategyProcessing/index.mjs";
+import { useGridSelector } from "../../utils/useGridSelector.mjs";
+import { gridPaginationModelSelector, gridVisibleRowsSelector } from "../pagination/gridPaginationSelector.mjs";
+import { gridRowTreeSelector } from "../rows/gridRowsSelector.mjs";
+import { gridGetRowsParamsSelector } from "./gridDataSourceSelector.mjs";
+import { CacheChunkManager, DataSourceRowsUpdateStrategy } from "./utils.mjs";
+import { GridDataSourceCacheDefault } from "./cache.mjs";
+import { GridGetRowsError, GridUpdateRowError } from "./gridDataSourceError.mjs";
+const noopCache = {
+  clear: () => {},
+  get: () => undefined,
+  set: () => {}
+};
+function getCache(cacheProp, options = {}) {
+  if (cacheProp === null) {
+    return noopCache;
+  }
+  return cacheProp ?? new GridDataSourceCacheDefault(options);
+}
+export const useGridDataSourceBase = (apiRef, props, options = {}) => {
+  const setStrategyAvailability = React.useCallback(() => {
+    apiRef.current.setStrategyAvailability(GridStrategyGroup.DataSource, DataSourceRowsUpdateStrategy.Default, props.dataSource ? () => true : () => false);
+  }, [apiRef, props.dataSource]);
+  const [currentStrategy, setCurrentStrategy] = React.useState(apiRef.current.getActiveStrategy(GridStrategyGroup.DataSource));
+  const standardRowsUpdateStrategyActive = React.useMemo(() => {
+    return currentStrategy === DataSourceRowsUpdateStrategy.Default || currentStrategy === DataSourceRowsUpdateStrategy.GroupedData;
+  }, [currentStrategy]);
+  const paginationModel = useGridSelector(apiRef, gridPaginationModelSelector);
+  const lastRequestId = React.useRef(0);
+  const pollingIntervalRef = React.useRef(null);
+  const onDataSourceErrorProp = props.onDataSourceError;
+  const revalidateMs = props.dataSourceRevalidateMs;
+  const cacheChunkManager = useLazyRef(() => {
+    if (!props.pagination) {
+      return new CacheChunkManager(paginationModel.pageSize);
+    }
+    const sortedPageSizeOptions = props.pageSizeOptions.map(option => typeof option === 'number' ? option : option.value).sort((a, b) => a - b);
+    const cacheChunkSize = Math.min(paginationModel.pageSize, sortedPageSizeOptions[0]);
+    return new CacheChunkManager(cacheChunkSize);
+  }).current;
+  const [cache, setCache] = React.useState(() => getCache(props.dataSourceCache, options.cacheOptions));
+  const fetchRows = React.useCallback(async (parentId, params) => {
+    const getRows = props.dataSource?.getRows;
+    if (!getRows) {
+      return;
+    }
+    if (parentId && parentId !== GRID_ROOT_GROUP_ID && props.signature !== 'DataGrid') {
+      options.fetchRowChildren?.([parentId]);
+      return;
+    }
+    options.clearDataSourceState?.();
+    const _ref = params || {},
+      {
+        skipCache,
+        keepChildrenExpanded
+      } = _ref,
+      getRowsParams = _objectWithoutPropertiesLoose(_ref, _excluded);
+    const fetchParams = _extends({}, gridGetRowsParamsSelector(apiRef), apiRef.current.unstable_applyPipeProcessors('getRowsParams', {}), getRowsParams);
+    const cacheKeys = cacheChunkManager.getCacheKeys(fetchParams);
+    const responses = cacheKeys.map(cacheKey => cache.get(cacheKey));
+    if (!skipCache && responses.every(response => response !== undefined)) {
+      apiRef.current.applyStrategyProcessor('dataSourceRowsUpdate', {
+        response: CacheChunkManager.mergeResponses(responses),
+        fetchParams,
+        options: {
+          skipCache,
+          keepChildrenExpanded
+        }
+      });
+      return;
+    }
+
+    // Manage loading state only for the default strategy
+    if (standardRowsUpdateStrategyActive || apiRef.current.getRowsCount() === 0) {
+      apiRef.current.setLoading(true);
+    }
+    const requestId = lastRequestId.current + 1;
+    lastRequestId.current = requestId;
+    try {
+      const getRowsResponse = await getRows(fetchParams);
+      const cacheResponses = cacheChunkManager.splitResponse(fetchParams, getRowsResponse);
+      cacheResponses.forEach((response, key) => cache.set(key, response));
+      if (lastRequestId.current === requestId) {
+        apiRef.current.applyStrategyProcessor('dataSourceRowsUpdate', {
+          response: getRowsResponse,
+          fetchParams,
+          options: {
+            skipCache,
+            keepChildrenExpanded
+          }
+        });
+      }
+    } catch (originalError) {
+      if (lastRequestId.current === requestId) {
+        apiRef.current.applyStrategyProcessor('dataSourceRowsUpdate', {
+          error: originalError,
+          fetchParams,
+          options: {
+            skipCache,
+            keepChildrenExpanded
+          }
+        });
+        if (typeof onDataSourceErrorProp === 'function') {
+          onDataSourceErrorProp(new GridGetRowsError({
+            message: originalError?.message,
+            params: fetchParams,
+            cause: originalError
+          }));
+        } else {
+          warnOnce(['MUI X: A call to `dataSource.getRows()` threw an error which was not handled because `onDataSourceError()` is missing.', 'To handle the error pass a callback to the `onDataSourceError` prop, for example `<DataGrid onDataSourceError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/server-side-data/#error-handling.'], 'error');
+        }
+      }
+    } finally {
+      if (standardRowsUpdateStrategyActive && lastRequestId.current === requestId) {
+        apiRef.current.setLoading(false);
+      }
+    }
+  }, [cacheChunkManager, cache, apiRef, standardRowsUpdateStrategyActive, props.dataSource?.getRows, onDataSourceErrorProp, options, props.signature]);
+  const handleStrategyActivityChange = React.useCallback(() => {
+    setCurrentStrategy(apiRef.current.getActiveStrategy(GridStrategyGroup.DataSource));
+  }, [apiRef]);
+  const fetchRowChildrenOption = options.fetchRowChildren;
+  const revalidate = useEventCallback(async () => {
+    const getRows = props.dataSource?.getRows;
+    if (!getRows || !standardRowsUpdateStrategyActive) {
+      return;
+    }
+    const revalidateExpandedGroups = () => {
+      if (currentStrategy !== DataSourceRowsUpdateStrategy.GroupedData || !fetchRowChildrenOption) {
+        return;
+      }
+      const rowTree = gridRowTreeSelector(apiRef);
+      const visibleRows = gridVisibleRowsSelector(apiRef).rows;
+      const expandedGroupIds = visibleRows.reduce((acc, row) => {
+        const node = rowTree[row.id];
+        if (node.type === 'group' && node.id !== GRID_ROOT_GROUP_ID && node.childrenExpanded === true) {
+          acc.push(row.id);
+        }
+        return acc;
+      }, []);
+      if (expandedGroupIds.length > 0) {
+        fetchRowChildrenOption(expandedGroupIds, {
+          showChildrenLoading: false
+        });
+      }
+    };
+    const fetchParams = _extends({}, gridGetRowsParamsSelector(apiRef), apiRef.current.unstable_applyPipeProcessors('getRowsParams', {}));
+    const cacheKeys = cacheChunkManager.getCacheKeys(fetchParams);
+    const responses = cacheKeys.map(cacheKey => cache.get(cacheKey));
+    if (responses.every(response => response !== undefined)) {
+      revalidateExpandedGroups();
+      return;
+    }
+    try {
+      const response = await getRows(fetchParams);
+      const currentParams = _extends({}, gridGetRowsParamsSelector(apiRef), apiRef.current.unstable_applyPipeProcessors('getRowsParams', {}));
+      if (!isDeepEqual(fetchParams, currentParams)) {
+        return;
+      }
+      const cacheResponses = cacheChunkManager.splitResponse(fetchParams, response);
+      cacheResponses.forEach((cacheResponse, key) => cache.set(key, cacheResponse));
+      apiRef.current.applyStrategyProcessor('dataSourceRowsUpdate', {
+        response,
+        fetchParams,
+        options: {}
+      });
+      revalidateExpandedGroups();
+    } catch {
+      // Ignore background revalidation errors.
+    }
+  });
+  const stopPolling = React.useCallback(() => {
+    if (pollingIntervalRef.current !== null) {
+      clearInterval(pollingIntervalRef.current);
+      pollingIntervalRef.current = null;
+    }
+  }, []);
+  const startPolling = useEventCallback(() => {
+    stopPolling();
+    if (revalidateMs <= 0 || !standardRowsUpdateStrategyActive) {
+      return;
+    }
+    pollingIntervalRef.current = setInterval(revalidate, revalidateMs);
+  });
+  const handleDataUpdate = React.useCallback(params => {
+    if ('error' in params) {
+      apiRef.current.setRows([]);
+      return;
+    }
+    const {
+      response
+    } = params;
+    if (response.rowCount !== undefined) {
+      apiRef.current.setRowCount(response.rowCount);
+    }
+    apiRef.current.setRows(response.rows);
+    apiRef.current.unstable_applyPipeProcessors('processDataSourceRows', {
+      params: params.fetchParams,
+      response
+    }, true);
+    startPolling();
+  }, [apiRef, startPolling]);
+  const dataSourceUpdateRow = props.dataSource?.updateRow;
+  const handleEditRowOption = options.handleEditRow;
+  const editRow = React.useCallback(async params => {
+    if (!dataSourceUpdateRow) {
+      return undefined;
+    }
+    try {
+      const finalRowUpdate = await dataSourceUpdateRow(params);
+      if (typeof handleEditRowOption === 'function') {
+        handleEditRowOption(params, finalRowUpdate);
+        return finalRowUpdate;
+      }
+      if (finalRowUpdate && !isDeepEqual(finalRowUpdate, params.previousRow)) {
+        // Reset the outdated cache, only if the row is _actually_ updated
+        apiRef.current.dataSource.cache.clear();
+      }
+      apiRef.current.updateNestedRows([finalRowUpdate], []);
+      return finalRowUpdate;
+    } catch (errorThrown) {
+      if (typeof onDataSourceErrorProp === 'function') {
+        onDataSourceErrorProp(new GridUpdateRowError({
+          message: errorThrown?.message,
+          params,
+          cause: errorThrown
+        }));
+      } else {
+        warnOnce(['MUI X: A call to `dataSource.updateRow()` threw an error which was not handled because `onDataSourceError()` is missing.', 'To handle the error pass a callback to the `onDataSourceError` prop, for example `<DataGrid onDataSourceError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/server-side-data/#error-handling.'], 'error');
+      }
+      throw errorThrown; // Let the caller handle the error further
+    }
+  }, [apiRef, dataSourceUpdateRow, onDataSourceErrorProp, handleEditRowOption]);
+  const dataSourceApi = {
+    dataSource: {
+      fetchRows,
+      cache,
+      editRow
+    }
+  };
+  const debouncedFetchRows = React.useMemo(() => debounce(fetchRows, 0), [fetchRows]);
+  const handleFetchRowsOnParamsChange = React.useCallback(() => {
+    stopPolling();
+    debouncedFetchRows();
+  }, [stopPolling, debouncedFetchRows]);
+  const isFirstRender = React.useRef(true);
+  React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    if (props.dataSourceCache === undefined) {
+      return;
+    }
+    const newCache = getCache(props.dataSourceCache, options.cacheOptions);
+    setCache(prevCache => prevCache !== newCache ? newCache : prevCache);
+  }, [props.dataSourceCache, options.cacheOptions]);
+  React.useEffect(() => {
+    if (!standardRowsUpdateStrategyActive) {
+      stopPolling();
+    }
+  }, [standardRowsUpdateStrategyActive, stopPolling]);
+  React.useEffect(() => {
+    if (revalidateMs <= 0) {
+      stopPolling();
+    }
+  }, [revalidateMs, stopPolling]);
+  React.useEffect(() => stopPolling, [stopPolling]);
+  React.useEffect(() => {
+    // Return early if the proper strategy isn't set yet
+    // Context: https://github.com/mui/mui-x/issues/19650
+    if (currentStrategy !== DataSourceRowsUpdateStrategy.Default && currentStrategy !== DataSourceRowsUpdateStrategy.LazyLoading && currentStrategy !== DataSourceRowsUpdateStrategy.GroupedData) {
+      return undefined;
+    }
+    if (props.dataSource) {
+      stopPolling();
+      apiRef.current.setRows([]);
+      apiRef.current.dataSource.cache.clear();
+      apiRef.current.dataSource.fetchRows();
+    }
+    return () => {
+      // ignore the current request on unmount
+      lastRequestId.current += 1;
+    };
+  }, [apiRef, props.dataSource, currentStrategy, stopPolling]);
+  return {
+    api: {
+      public: dataSourceApi
+    },
+    debouncedFetchRows,
+    strategyProcessor: {
+      strategyName: DataSourceRowsUpdateStrategy.Default,
+      group: 'dataSourceRowsUpdate',
+      processor: handleDataUpdate
+    },
+    setStrategyAvailability,
+    startPolling,
+    stopPolling,
+    cacheChunkManager,
+    cache,
+    events: {
+      strategyAvailabilityChange: handleStrategyActivityChange,
+      sortModelChange: runIf(standardRowsUpdateStrategyActive, handleFetchRowsOnParamsChange),
+      filterModelChange: runIf(standardRowsUpdateStrategyActive, handleFetchRowsOnParamsChange),
+      paginationModelChange: runIf(standardRowsUpdateStrategyActive, handleFetchRowsOnParamsChange)
+    }
+  };
+};

package/hooks/features/dataSource/utils.d.mts

@@ -0,0 +1,24 @@
+import type { GridGetRowsParams, GridGetRowsResponse } from "../../../models/gridDataSource.mjs";
+export declare enum DataSourceRowsUpdateStrategy {
+  Default = "set-flat-rows",
+  LazyLoading = "replace-row-range",
+  GroupedData = "set-grouped-rows",
+}
+/**
+ * Provides better cache hit rate by:
+ * 1. Splitting the data into smaller chunks to be stored in the cache (cache `set`)
+ * 2. Merging multiple cache entries into a single response to get the required chunk (cache `get`)
+ */
+export declare class CacheChunkManager {
+  private chunkSize;
+  /**
+   * @param chunkSize The number of rows to store in each cache entry.
+   * If not set, the whole array will be stored in a single cache entry.
+   * Setting this value to smallest page size will result in better cache hit rate.
+   * Has no effect if cursor pagination is used.
+   */
+  constructor(chunkSize: number);
+  getCacheKeys: (key: GridGetRowsParams) => GridGetRowsParams[];
+  splitResponse: (key: GridGetRowsParams, response: GridGetRowsResponse) => Map<GridGetRowsParams, GridGetRowsResponse>;
+  static mergeResponses: (responses: GridGetRowsResponse[]) => GridGetRowsResponse;
+}

package/hooks/features/density/densitySelector.d.mts

@@ -0,0 +1,8 @@
+import type { GridStateCommunity } from "../../../models/gridStateCommunity.mjs";
+import type { GridDensity } from "../../../models/gridDensity.mjs";
+export declare const COMPACT_DENSITY_FACTOR = 0.7;
+export declare const COMFORTABLE_DENSITY_FACTOR = 1.3;
+export declare const gridDensitySelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, unknown, GridDensity>;
+export declare const gridDensityFactorSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => number;

package/hooks/features/density/densitySelector.mjs

@@ -0,0 +1,10 @@
+import { createSelector, createRootSelector } from "../../../utils/createSelector.mjs";
+export const COMPACT_DENSITY_FACTOR = 0.7;
+export const COMFORTABLE_DENSITY_FACTOR = 1.3;
+const DENSITY_FACTORS = {
+  compact: COMPACT_DENSITY_FACTOR,
+  comfortable: COMFORTABLE_DENSITY_FACTOR,
+  standard: 1
+};
+export const gridDensitySelector = createRootSelector(state => state.density);
+export const gridDensityFactorSelector = createSelector(gridDensitySelector, density => DENSITY_FACTORS[density]);

package/hooks/features/density/densityState.d.mts

@@ -0,0 +1,2 @@
+import type { GridDensity } from "../../../models/gridDensity.mjs";
+export type GridDensityState = GridDensity;

package/hooks/features/density/index.d.mts

@@ -0,0 +1,2 @@
+export * from "./densityState.mjs";
+export * from "./densitySelector.mjs";

package/hooks/features/density/index.mjs

@@ -0,0 +1,2 @@
+export * from "./densityState.mjs";
+export * from "./densitySelector.mjs";

package/hooks/features/density/useGridDensity.d.mts

@@ -0,0 +1,6 @@
+import type { RefObject } from '@mui/x-internals/types';
+import type { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.mjs";
+import type { DataGridProcessedProps } from "../../../models/props/DataGridProps.mjs";
+import type { GridStateInitializer } from "../../utils/useGridInitializeState.mjs";
+export declare const densityStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'initialState' | 'density'>>;
+export declare const useGridDensity: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "density" | "onDensityChange" | "initialState">) => void;

package/hooks/features/density/useGridDensity.mjs

@@ -0,0 +1,66 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import useEventCallback from '@mui/utils/useEventCallback';
+import { useGridLogger } from "../../utils/useGridLogger.mjs";
+import { useGridApiMethod } from "../../utils/useGridApiMethod.mjs";
+import { gridDensitySelector } from "./densitySelector.mjs";
+import { useGridRegisterPipeProcessor } from "../../core/pipeProcessing/index.mjs";
+export const densityStateInitializer = (state, props) => _extends({}, state, {
+  density: props.initialState?.density ?? props.density ?? 'standard'
+});
+export const useGridDensity = (apiRef, props) => {
+  const logger = useGridLogger(apiRef, 'useDensity');
+  apiRef.current.registerControlState({
+    stateId: 'density',
+    propModel: props.density,
+    propOnChange: props.onDensityChange,
+    stateSelector: gridDensitySelector,
+    changeEvent: 'densityChange'
+  });
+  const setDensity = useEventCallback(newDensity => {
+    const currentDensity = gridDensitySelector(apiRef);
+    if (currentDensity === newDensity) {
+      return;
+    }
+    logger.debug(`Set grid density to ${newDensity}`);
+    apiRef.current.setState(state => _extends({}, state, {
+      density: newDensity
+    }));
+  });
+  const densityApi = {
+    setDensity
+  };
+  useGridApiMethod(apiRef, densityApi, 'public');
+  const stateExportPreProcessing = React.useCallback((prevState, context) => {
+    const exportedDensity = gridDensitySelector(apiRef);
+    const shouldExportRowCount =
+    // Always export if the `exportOnlyDirtyModels` property is not activated
+    !context.exportOnlyDirtyModels ||
+    // Always export if the `density` is controlled
+    props.density != null ||
+    // Always export if the `density` has been initialized
+    props.initialState?.density != null;
+    if (!shouldExportRowCount) {
+      return prevState;
+    }
+    return _extends({}, prevState, {
+      density: exportedDensity
+    });
+  }, [apiRef, props.density, props.initialState?.density]);
+  const stateRestorePreProcessing = React.useCallback((params, context) => {
+    const restoredDensity = context.stateToRestore?.density ? context.stateToRestore.density : gridDensitySelector(apiRef);
+    apiRef.current.setState(state => _extends({}, state, {
+      density: restoredDensity
+    }));
+    return params;
+  }, [apiRef]);
+  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+  React.useEffect(() => {
+    if (props.density) {
+      apiRef.current.setDensity(props.density);
+    }
+  }, [apiRef, props.density]);
+};

package/hooks/features/dimensions/gridDimensionsSelectors.d.mts

@@ -0,0 +1,42 @@
+import type { GridStateCommunity } from "../../../models/gridStateCommunity.mjs";
+export declare const gridDimensionsSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, unknown, import("@mui/x-data-grid").GridDimensions>;
+/**
+ * Get the summed width of all the visible columns.
+ * @category Visible Columns
+ */
+export declare const gridColumnsTotalWidthSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => number;
+export declare const gridRowHeightSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => number;
+export declare const gridContentHeightSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => number;
+export declare const gridHasScrollXSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => boolean;
+export declare const gridHasScrollYSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => boolean;
+export declare const gridHasFillerSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => boolean;
+export declare const gridHeaderHeightSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => number;
+export declare const gridGroupHeaderHeightSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => number;
+export declare const gridHeaderFilterHeightSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => number;
+export declare const gridHorizontalScrollbarHeightSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => number;
+export declare const gridVerticalScrollbarWidthSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => number;
+export declare const gridHasBottomFillerSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => boolean;

package/hooks/features/dimensions/gridDimensionsSelectors.mjs

@@ -0,0 +1,25 @@
+import { createSelector, createRootSelector } from "../../../utils/createSelector.mjs";
+export const gridDimensionsSelector = createRootSelector(state => state.dimensions);
+
+/**
+ * Get the summed width of all the visible columns.
+ * @category Visible Columns
+ */
+export const gridColumnsTotalWidthSelector = createSelector(gridDimensionsSelector, dimensions => dimensions.columnsTotalWidth);
+export const gridRowHeightSelector = createSelector(gridDimensionsSelector, dimensions => dimensions.rowHeight);
+export const gridContentHeightSelector = createSelector(gridDimensionsSelector, dimensions => dimensions.contentSize.height);
+export const gridHasScrollXSelector = createSelector(gridDimensionsSelector, dimensions => dimensions.hasScrollX);
+export const gridHasScrollYSelector = createSelector(gridDimensionsSelector, dimensions => dimensions.hasScrollY);
+export const gridHasFillerSelector = createSelector(gridDimensionsSelector, dimensions => dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width);
+export const gridHeaderHeightSelector = createSelector(gridDimensionsSelector, dimensions => dimensions.headerHeight);
+export const gridGroupHeaderHeightSelector = createSelector(gridDimensionsSelector, dimensions => dimensions.groupHeaderHeight);
+export const gridHeaderFilterHeightSelector = createSelector(gridDimensionsSelector, dimensions => dimensions.headerFilterHeight);
+export const gridHorizontalScrollbarHeightSelector = createSelector(gridDimensionsSelector, dimensions => dimensions.hasScrollX ? dimensions.scrollbarSize : 0);
+export const gridVerticalScrollbarWidthSelector = createSelector(gridDimensionsSelector, dimensions => dimensions.hasScrollY ? dimensions.scrollbarSize : 0);
+export const gridHasBottomFillerSelector = createSelector(gridDimensionsSelector, gridHorizontalScrollbarHeightSelector, (dimensions, height) => {
+  const needsLastRowBorder = dimensions.viewportOuterSize.height - dimensions.minimumSize.height > 0;
+  if (height === 0 && !needsLastRowBorder) {
+    return false;
+  }
+  return true;
+});

package/hooks/features/dimensions/index.d.mts

@@ -0,0 +1,3 @@
+export type { GridDimensionsState } from "./useGridDimensions.mjs";
+export { gridDimensionsSelector, gridColumnsTotalWidthSelector } from "./gridDimensionsSelectors.mjs";
+export type { GridDimensions, GridDimensionsApi } from "./gridDimensionsApi.mjs";

package/hooks/features/dimensions/index.mjs

@@ -0,0 +1 @@
+export { gridDimensionsSelector, gridColumnsTotalWidthSelector } from "./gridDimensionsSelectors.mjs";

package/hooks/features/dimensions/useGridDimensions.d.mts

@@ -0,0 +1,10 @@
+import type { RefObject } from '@mui/x-internals/types';
+import type { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.mjs";
+import type { DataGridProcessedProps } from "../../../models/props/DataGridProps.mjs";
+import type { GridDimensions } from "./gridDimensionsApi.mjs";
+import type { GridStateInitializer } from "../../utils/useGridInitializeState.mjs";
+type RootProps = Pick<DataGridProcessedProps, 'onResize' | 'scrollbarSize' | 'pagination' | 'paginationMode' | 'autoHeight' | 'getRowHeight' | 'rowHeight' | 'resizeThrottleMs' | 'columnHeaderHeight' | 'columnGroupHeaderHeight' | 'headerFilterHeight'>;
+export type GridDimensionsState = GridDimensions;
+export declare const dimensionsStateInitializer: GridStateInitializer<RootProps>;
+export declare function useGridDimensions(apiRef: RefObject<GridPrivateApiCommunity>, props: RootProps): void;
+export {};