@mui/x-data-grid 8.0.0-alpha.8 → 8.0.0-beta.0

package/esm/hooks/features/dataSource/useGridDataSourceBase.d.ts

@@ -0,0 +1,33 @@
+import { RefObject } from '@mui/x-internals/types';
+import { GridDataSourceCache } from "../../../models/gridDataSource.js";
+import { CacheChunkManager, DataSourceRowsUpdateStrategy } from "./utils.js";
+import { type GridDataSourceCacheDefaultConfig } from "./cache.js";
+import type { GridDataSourceApi } from './models';
+import type { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
+import type { DataGridProcessedProps } from '../../../models/props/DataGridProps';
+import type { GridStrategyProcessor } from '../../core/strategyProcessing';
+import type { GridEventListener } from '../../../models/events';
+import type { GridRowId } from '../../../models';
+export declare const useGridDataSourceBase: <Api extends GridPrivateApiCommunity>(apiRef: RefObject<Api>, props: Pick<DataGridProcessedProps, "dataSource" | "dataSourceCache" | "onDataSourceError" | "pageSizeOptions" | "signature">, options?: {
+  cacheOptions?: GridDataSourceCacheDefaultConfig;
+  fetchRowChildren?: (parents: GridRowId[]) => void;
+  clearDataSourceState?: () => void;
+}) => {
+  api: {
+    public: GridDataSourceApi;
+  };
+  strategyProcessor: {
+    strategyName: DataSourceRowsUpdateStrategy;
+    group: "dataSourceRowsUpdate";
+    processor: GridStrategyProcessor<"dataSourceRowsUpdate">;
+  };
+  setStrategyAvailability: () => void;
+  cacheChunkManager: CacheChunkManager;
+  cache: GridDataSourceCache;
+  events: {
+    strategyAvailabilityChange: GridEventListener<"strategyAvailabilityChange">;
+    sortModelChange: (params: unknown) => void;
+    filterModelChange: (params: unknown) => void;
+    paginationModelChange: (params: unknown) => void;
+  };
+};

package/esm/hooks/features/dataSource/useGridDataSourceBase.js

@@ -0,0 +1,165 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import useLazyRef from '@mui/utils/useLazyRef';
+import { unstable_debounce as debounce } from '@mui/utils';
+import { warnOnce } from '@mui/x-internals/warning';
+import { GRID_ROOT_GROUP_ID } from "../rows/gridRowsUtils.js";
+import { runIf } from "../../../utils/utils.js";
+import { GridStrategyGroup } from "../../core/strategyProcessing/index.js";
+import { useGridSelector } from "../../utils/useGridSelector.js";
+import { gridPaginationModelSelector } from "../pagination/gridPaginationSelector.js";
+import { gridGetRowsParamsSelector } from "./gridDataSourceSelector.js";
+import { CacheChunkManager, DataSourceRowsUpdateStrategy } from "./utils.js";
+import { GridDataSourceCacheDefault } from "./cache.js";
+import { GridGetRowsError } from "./gridDataSourceError.js";
+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 [defaultRowsUpdateStrategyActive, setDefaultRowsUpdateStrategyActive] = React.useState(false);
+  const paginationModel = useGridSelector(apiRef, gridPaginationModelSelector);
+  const lastRequestId = React.useRef(0);
+  const onDataSourceErrorProp = props.onDataSourceError;
+  const cacheChunkManager = useLazyRef(() => {
+    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 fetchParams = _extends({}, gridGetRowsParamsSelector(apiRef), apiRef.current.unstable_applyPipeProcessors('getRowsParams', {}), params);
+    const cacheKeys = cacheChunkManager.getCacheKeys(fetchParams);
+    const responses = cacheKeys.map(cacheKey => cache.get(cacheKey));
+    if (responses.every(response => response !== undefined)) {
+      apiRef.current.applyStrategyProcessor('dataSourceRowsUpdate', {
+        response: CacheChunkManager.mergeResponses(responses),
+        fetchParams
+      });
+      return;
+    }
+
+    // Manage loading state only for the default strategy
+    if (defaultRowsUpdateStrategyActive || 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
+        });
+      }
+    } catch (originalError) {
+      if (lastRequestId.current === requestId) {
+        apiRef.current.applyStrategyProcessor('dataSourceRowsUpdate', {
+          error: originalError,
+          fetchParams
+        });
+        if (typeof onDataSourceErrorProp === 'function') {
+          onDataSourceErrorProp(new GridGetRowsError({
+            message: originalError?.message,
+            params: fetchParams,
+            cause: originalError
+          }));
+        } 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 {
+      if (defaultRowsUpdateStrategyActive && lastRequestId.current === requestId) {
+        apiRef.current.setLoading(false);
+      }
+    }
+  }, [cacheChunkManager, cache, apiRef, defaultRowsUpdateStrategyActive, props.dataSource?.getRows, onDataSourceErrorProp, options, props.signature]);
+  const handleStrategyActivityChange = React.useCallback(() => {
+    setDefaultRowsUpdateStrategyActive(apiRef.current.getActiveStrategy(GridStrategyGroup.DataSource) === DataSourceRowsUpdateStrategy.Default);
+  }, [apiRef]);
+  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);
+  }, [apiRef]);
+  const dataSourceApi = {
+    dataSource: {
+      fetchRows,
+      cache
+    }
+  };
+  const debouncedFetchRows = React.useMemo(() => debounce(fetchRows, 0), [fetchRows]);
+  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 (props.dataSource) {
+      apiRef.current.dataSource.cache.clear();
+      apiRef.current.dataSource.fetchRows();
+    }
+  }, [apiRef, props.dataSource]);
+  return {
+    api: {
+      public: dataSourceApi
+    },
+    strategyProcessor: {
+      strategyName: DataSourceRowsUpdateStrategy.Default,
+      group: 'dataSourceRowsUpdate',
+      processor: handleDataUpdate
+    },
+    setStrategyAvailability,
+    cacheChunkManager,
+    cache,
+    events: {
+      strategyAvailabilityChange: handleStrategyActivityChange,
+      sortModelChange: runIf(defaultRowsUpdateStrategyActive, () => debouncedFetchRows()),
+      filterModelChange: runIf(defaultRowsUpdateStrategyActive, () => debouncedFetchRows()),
+      paginationModelChange: runIf(defaultRowsUpdateStrategyActive, () => debouncedFetchRows())
+    }
+  };
+};

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

@@ -0,0 +1,23 @@
+import { GridGetRowsParams, GridGetRowsResponse } from "../../../models/gridDataSource.js";
+export declare enum DataSourceRowsUpdateStrategy {
+  Default = "set-new-rows",
+  LazyLoading = "replace-row-range",
+}
+/**
+ * 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/esm/hooks/features/dataSource/utils.js

@@ -0,0 +1,71 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+export let DataSourceRowsUpdateStrategy = /*#__PURE__*/function (DataSourceRowsUpdateStrategy) {
+  DataSourceRowsUpdateStrategy["Default"] = "set-new-rows";
+  DataSourceRowsUpdateStrategy["LazyLoading"] = "replace-row-range";
+  return DataSourceRowsUpdateStrategy;
+}({});
+
+/**
+ * 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 class CacheChunkManager {
+  /**
+   * @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) {
+    this.chunkSize = void 0;
+    this.getCacheKeys = key => {
+      if (this.chunkSize < 1 || typeof key.start !== 'number') {
+        return [key];
+      }
+
+      // split the range into chunks
+      const chunkedKeys = [];
+      for (let i = key.start; i < key.end; i += this.chunkSize) {
+        const end = Math.min(i + this.chunkSize - 1, key.end);
+        chunkedKeys.push(_extends({}, key, {
+          start: i,
+          end
+        }));
+      }
+      return chunkedKeys;
+    };
+    this.splitResponse = (key, response) => {
+      const cacheKeys = this.getCacheKeys(key);
+      const responses = new Map();
+      cacheKeys.forEach(chunkKey => {
+        const isLastChunk = chunkKey.end === key.end;
+        const responseSlice = _extends({}, response, {
+          pageInfo: _extends({}, response.pageInfo, {
+            // If the original response had page info, update that information for all but last chunk and keep the original value for the last chunk
+            hasNextPage: response.pageInfo?.hasNextPage !== undefined && !isLastChunk ? true : response.pageInfo?.hasNextPage,
+            nextCursor: response.pageInfo?.nextCursor !== undefined && !isLastChunk ? response.rows[chunkKey.end + 1].id : response.pageInfo?.nextCursor
+          }),
+          rows: typeof chunkKey.start !== 'number' || typeof key.start !== 'number' ? response.rows : response.rows.slice(chunkKey.start - key.start, chunkKey.end - key.start + 1)
+        });
+        responses.set(chunkKey, responseSlice);
+      });
+      return responses;
+    };
+    this.chunkSize = chunkSize;
+  }
+}
+CacheChunkManager.mergeResponses = responses => {
+  if (responses.length === 1) {
+    return responses[0];
+  }
+  return responses.reduce((acc, response) => ({
+    rows: [...acc.rows, ...response.rows],
+    rowCount: response.rowCount,
+    pageInfo: response.pageInfo
+  }), {
+    rows: [],
+    rowCount: 0,
+    pageInfo: {}
+  });
+};

package/esm/hooks/features/density/densitySelector.d.ts

@@ -0,0 +1,6 @@
+import { GridStateCommunity } from "../../../models/gridStateCommunity.js";
+import { GridDensity } from "../../../models/gridDensity.js";
+export declare const COMPACT_DENSITY_FACTOR = 0.7;
+export declare const COMFORTABLE_DENSITY_FACTOR = 1.3;
+export declare const gridDensitySelector: import("../../..").OutputSelector<GridStateCommunity, unknown, GridDensity>;
+export declare const gridDensityFactorSelector: import("../../..").OutputSelector<GridStateCommunity, GridDensity, number>;

package/esm/hooks/features/density/densitySelector.js

@@ -0,0 +1,10 @@
+import { createSelector, createRootSelector } from "../../../utils/createSelector.js";
+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/esm/hooks/features/density/densityState.d.ts

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

package/esm/hooks/features/density/densityState.js

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

package/esm/hooks/features/density/index.d.ts

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

package/esm/hooks/features/density/index.js

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

package/esm/hooks/features/density/useGridDensity.d.ts

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

package/esm/hooks/features/density/useGridDensity.js

@@ -0,0 +1,64 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import useEventCallback from '@mui/utils/useEventCallback';
+import { useGridLogger } from "../../utils/useGridLogger.js";
+import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
+import { gridDensitySelector } from "./densitySelector.js";
+import { useGridRegisterPipeProcessor } from "../../core/pipeProcessing/index.js";
+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/esm/hooks/features/dimensions/gridDimensionsApi.d.ts

@@ -0,0 +1,103 @@
+import type { ElementSize } from '../../../models/elementSize';
+export interface GridDimensions {
+  /**
+   * Indicates that the dimensions have been initialized.
+   */
+  isReady: boolean;
+  /**
+   * The root container size.
+   */
+  root: ElementSize;
+  /**
+   * The viewport size including scrollbars.
+   */
+  viewportOuterSize: ElementSize;
+  /**
+   * The viewport size not including scrollbars.
+   */
+  viewportInnerSize: ElementSize;
+  /**
+   * The size of the main content (unpinned rows & columns).
+   */
+  contentSize: ElementSize;
+  /**
+   * The minimum size to display the grid, including all pinned sections and headers.
+   */
+  minimumSize: ElementSize;
+  /**
+   * Indicates if a scroll is currently needed to go from the beginning of the first column to the end of the last column.
+   */
+  hasScrollX: boolean;
+  /**
+   * Indicates if a scroll is currently needed to go from the beginning of the first row to the end of the last row.
+   */
+  hasScrollY: boolean;
+  /**
+   * Size of the scrollbar used to scroll the rows in pixel.
+   * It is defined even when the scrollbar is currently not needed.
+   */
+  scrollbarSize: number;
+  /**
+   * Width of a row.
+   */
+  rowWidth: number;
+  /**
+   * Height of a row.
+   */
+  rowHeight: number;
+  /**
+   * Size of all the visible columns.
+   */
+  columnsTotalWidth: number;
+  /**
+   * Size of left pinned columns.
+   */
+  leftPinnedWidth: number;
+  /**
+   * Size of right pinned columns.
+   */
+  rightPinnedWidth: number;
+  /**
+   * Height of one column header.
+   */
+  headerHeight: number;
+  /**
+   * Height of one column group header.
+   */
+  groupHeaderHeight: number;
+  /**
+   * Height of header filters.
+   */
+  headerFilterHeight: number;
+  /**
+   * Height of all the column headers.
+   */
+  headersTotalHeight: number;
+  /**
+   * Size of the top container.
+   */
+  topContainerHeight: number;
+  /**
+   * Size of the bottom container.
+   */
+  bottomContainerHeight: number;
+}
+export interface GridDimensionsApi {
+  /**
+   * Returns the dimensions of the grid
+   * @returns {GridDimensions} The dimension information of the grid. If `null`, the grid is not ready yet.
+   */
+  getRootDimensions: () => GridDimensions;
+}
+export interface GridDimensionsPrivateApi {
+  /**
+   * Recalculates the grid layout. This should be called when an operation has changed the size
+   * of the content of the grid.
+   */
+  updateDimensions: () => void;
+  /**
+   * Returns the amount of rows that are currently visible in the viewport
+   * @returns {number} The amount of rows visible in the viewport
+   */
+  getViewportPageSize: () => number;
+}

package/esm/hooks/features/dimensions/gridDimensionsApi.js

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

package/esm/hooks/features/dimensions/gridDimensionsSelectors.d.ts

@@ -0,0 +1,18 @@
+import { GridStateCommunity } from "../../../models/gridStateCommunity.js";
+export declare const gridDimensionsSelector: import("../../..").OutputSelector<GridStateCommunity, unknown, import("./gridDimensionsApi").GridDimensions>;
+/**
+ * Get the summed width of all the visible columns.
+ * @category Visible Columns
+ */
+export declare const gridColumnsTotalWidthSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridDimensionsApi").GridDimensions, number>;
+export declare const gridRowHeightSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridDimensionsApi").GridDimensions, number>;
+export declare const gridContentHeightSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridDimensionsApi").GridDimensions, number>;
+export declare const gridHasScrollXSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridDimensionsApi").GridDimensions, boolean>;
+export declare const gridHasScrollYSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridDimensionsApi").GridDimensions, boolean>;
+export declare const gridHasFillerSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridDimensionsApi").GridDimensions, boolean>;
+export declare const gridHeaderHeightSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridDimensionsApi").GridDimensions, number>;
+export declare const gridGroupHeaderHeightSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridDimensionsApi").GridDimensions, number>;
+export declare const gridHeaderFilterHeightSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridDimensionsApi").GridDimensions, number>;
+export declare const gridHorizontalScrollbarHeightSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridDimensionsApi").GridDimensions, number>;
+export declare const gridVerticalScrollbarWidthSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridDimensionsApi").GridDimensions, number>;
+export declare const gridHasBottomFillerSelector: import("../../..").OutputSelector<GridStateCommunity, number, boolean>;

package/esm/hooks/features/dimensions/gridDimensionsSelectors.js

@@ -0,0 +1,25 @@
+import { createSelector, createRootSelector } from "../../../utils/createSelector.js";
+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/esm/hooks/features/dimensions/index.d.ts

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

package/esm/hooks/features/dimensions/index.js

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

package/esm/hooks/features/dimensions/useGridDimensions.d.ts

@@ -0,0 +1,10 @@
+import { RefObject } from '@mui/x-internals/types';
+import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
+import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
+import { GridDimensions } from "./gridDimensionsApi.js";
+import { GridStateInitializer } from "../../utils/useGridInitializeState.js";
+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 {};