@mui/x-data-grid 8.0.0-alpha.10 → 8.0.0-alpha.12

package/esm/hooks/features/columns/useGridColumnSpanning.js

@@ -0,0 +1,107 @@
+import * as React from 'react';
+import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
+import { useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
+/**
+ * @requires useGridColumns (method, event)
+ * @requires useGridParamsApi (method)
+ */
+export const useGridColumnSpanning = apiRef => {
+  const lookup = React.useRef({});
+  const getCellColSpanInfo = (rowId, columnIndex) => {
+    return lookup.current[rowId]?.[columnIndex];
+  };
+  const resetColSpan = () => {
+    lookup.current = {};
+  };
+
+  // Calculate `colSpan` for each cell in the row
+  const calculateColSpan = React.useCallback(({
+    rowId,
+    minFirstColumn,
+    maxLastColumn,
+    columns
+  }) => {
+    for (let i = minFirstColumn; i < maxLastColumn; i += 1) {
+      const cellProps = calculateCellColSpan({
+        apiRef,
+        lookup: lookup.current,
+        columnIndex: i,
+        rowId,
+        minFirstColumnIndex: minFirstColumn,
+        maxLastColumnIndex: maxLastColumn,
+        columns
+      });
+      if (cellProps.colSpan > 1) {
+        i += cellProps.colSpan - 1;
+      }
+    }
+  }, [apiRef]);
+  const columnSpanningPublicApi = {
+    unstable_getCellColSpanInfo: getCellColSpanInfo
+  };
+  const columnSpanningPrivateApi = {
+    resetColSpan,
+    calculateColSpan
+  };
+  useGridApiMethod(apiRef, columnSpanningPublicApi, 'public');
+  useGridApiMethod(apiRef, columnSpanningPrivateApi, 'private');
+  useGridApiEventHandler(apiRef, 'columnOrderChange', resetColSpan);
+};
+function calculateCellColSpan(params) {
+  const {
+    apiRef,
+    lookup,
+    columnIndex,
+    rowId,
+    minFirstColumnIndex,
+    maxLastColumnIndex,
+    columns
+  } = params;
+  const columnsLength = columns.length;
+  const column = columns[columnIndex];
+  const row = apiRef.current.getRow(rowId);
+  const value = apiRef.current.getRowValue(row, column);
+  const colSpan = typeof column.colSpan === 'function' ? column.colSpan(value, row, column, apiRef) : column.colSpan;
+  if (!colSpan || colSpan === 1) {
+    setCellColSpanInfo(lookup, rowId, columnIndex, {
+      spannedByColSpan: false,
+      cellProps: {
+        colSpan: 1,
+        width: column.computedWidth
+      }
+    });
+    return {
+      colSpan: 1
+    };
+  }
+  let width = column.computedWidth;
+  for (let j = 1; j < colSpan; j += 1) {
+    const nextColumnIndex = columnIndex + j;
+    // Cells should be spanned only within their column section (left-pinned, right-pinned and unpinned).
+    if (nextColumnIndex >= minFirstColumnIndex && nextColumnIndex < maxLastColumnIndex) {
+      const nextColumn = columns[nextColumnIndex];
+      width += nextColumn.computedWidth;
+      setCellColSpanInfo(lookup, rowId, columnIndex + j, {
+        spannedByColSpan: true,
+        rightVisibleCellIndex: Math.min(columnIndex + colSpan, columnsLength - 1),
+        leftVisibleCellIndex: columnIndex
+      });
+    }
+    setCellColSpanInfo(lookup, rowId, columnIndex, {
+      spannedByColSpan: false,
+      cellProps: {
+        colSpan,
+        width
+      }
+    });
+  }
+  return {
+    colSpan
+  };
+}
+function setCellColSpanInfo(lookup, rowId, columnIndex, cellColSpanInfo) {
+  if (!lookup[rowId]) {
+    lookup[rowId] = {};
+  }
+  lookup[rowId][columnIndex] = cellColSpanInfo;
+}

package/esm/hooks/features/columns/useGridColumns.d.ts

@@ -0,0 +1,11 @@
+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 columnsStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'columnVisibilityModel' | 'initialState' | 'columns'>>;
+/**
+ * @requires useGridParamsApi (method)
+ * @requires useGridDimensions (method, event) - can be after
+ * TODO: Impossible priority - useGridParamsApi also needs to be after useGridColumns
+ */
+export declare function useGridColumns(apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'initialState' | 'columns' | 'columnVisibilityModel' | 'onColumnVisibilityModelChange' | 'slots' | 'slotProps' | 'disableColumnSelector' | 'signature'>): void;

package/esm/hooks/features/columns/useGridColumns.js

@@ -0,0 +1,306 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
+import { useGridLogger } from "../../utils/useGridLogger.js";
+import { gridColumnFieldsSelector, gridColumnDefinitionsSelector, gridColumnLookupSelector, gridColumnsStateSelector, gridColumnVisibilityModelSelector, gridVisibleColumnDefinitionsSelector, gridColumnPositionsSelector } from "./gridColumnsSelector.js";
+import { GridSignature } from "../../../constants/signature.js";
+import { useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
+import { useGridRegisterPipeProcessor, useGridRegisterPipeApplier } from "../../core/pipeProcessing/index.js";
+import { EMPTY_PINNED_COLUMN_FIELDS } from "./gridColumnsInterfaces.js";
+import { hydrateColumnsWidth, createColumnsState, COLUMNS_DIMENSION_PROPERTIES } from "./gridColumnsUtils.js";
+import { GridPreferencePanelsValue } from "../preferencesPanel/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const columnsStateInitializer = (state, props, apiRef) => {
+  const columnsState = createColumnsState({
+    apiRef,
+    columnsToUpsert: props.columns,
+    initialState: props.initialState?.columns,
+    columnVisibilityModel: props.columnVisibilityModel ?? props.initialState?.columns?.columnVisibilityModel ?? {},
+    keepOnlyColumnsToUpsert: true
+  });
+  return _extends({}, state, {
+    columns: columnsState,
+    // In pro/premium, this part of the state is defined. We give it an empty but defined value
+    // for the community version.
+    pinnedColumns: state.pinnedColumns ?? EMPTY_PINNED_COLUMN_FIELDS
+  });
+};
+
+/**
+ * @requires useGridParamsApi (method)
+ * @requires useGridDimensions (method, event) - can be after
+ * TODO: Impossible priority - useGridParamsApi also needs to be after useGridColumns
+ */
+export function useGridColumns(apiRef, props) {
+  const logger = useGridLogger(apiRef, 'useGridColumns');
+  const previousColumnsProp = React.useRef(props.columns);
+  apiRef.current.registerControlState({
+    stateId: 'visibleColumns',
+    propModel: props.columnVisibilityModel,
+    propOnChange: props.onColumnVisibilityModelChange,
+    stateSelector: gridColumnVisibilityModelSelector,
+    changeEvent: 'columnVisibilityModelChange'
+  });
+  const setGridColumnsState = React.useCallback(columnsState => {
+    logger.debug('Updating columns state.');
+    apiRef.current.setState(mergeColumnsState(columnsState));
+    apiRef.current.publishEvent('columnsChange', columnsState.orderedFields);
+    apiRef.current.updateRenderContext?.();
+  }, [logger, apiRef]);
+
+  /**
+   * API METHODS
+   */
+  const getColumn = React.useCallback(field => gridColumnLookupSelector(apiRef)[field], [apiRef]);
+  const getAllColumns = React.useCallback(() => gridColumnDefinitionsSelector(apiRef), [apiRef]);
+  const getVisibleColumns = React.useCallback(() => gridVisibleColumnDefinitionsSelector(apiRef), [apiRef]);
+  const getColumnIndex = React.useCallback((field, useVisibleColumns = true) => {
+    const columns = useVisibleColumns ? gridVisibleColumnDefinitionsSelector(apiRef) : gridColumnDefinitionsSelector(apiRef);
+    return columns.findIndex(col => col.field === field);
+  }, [apiRef]);
+  const getColumnPosition = React.useCallback(field => {
+    const index = getColumnIndex(field);
+    return gridColumnPositionsSelector(apiRef)[index];
+  }, [apiRef, getColumnIndex]);
+  const setColumnVisibilityModel = React.useCallback(model => {
+    const currentModel = gridColumnVisibilityModelSelector(apiRef);
+    if (currentModel !== model) {
+      apiRef.current.setState(state => _extends({}, state, {
+        columns: createColumnsState({
+          apiRef,
+          columnsToUpsert: [],
+          initialState: undefined,
+          columnVisibilityModel: model,
+          keepOnlyColumnsToUpsert: false
+        })
+      }));
+      apiRef.current.updateRenderContext?.();
+    }
+  }, [apiRef]);
+  const updateColumns = React.useCallback(columns => {
+    const columnsState = createColumnsState({
+      apiRef,
+      columnsToUpsert: columns,
+      initialState: undefined,
+      keepOnlyColumnsToUpsert: false
+    });
+    setGridColumnsState(columnsState);
+  }, [apiRef, setGridColumnsState]);
+  const setColumnVisibility = React.useCallback((field, isVisible) => {
+    const columnVisibilityModel = gridColumnVisibilityModelSelector(apiRef);
+    const isCurrentlyVisible = columnVisibilityModel[field] ?? true;
+    if (isVisible !== isCurrentlyVisible) {
+      const newModel = _extends({}, columnVisibilityModel, {
+        [field]: isVisible
+      });
+      apiRef.current.setColumnVisibilityModel(newModel);
+    }
+  }, [apiRef]);
+  const getColumnIndexRelativeToVisibleColumns = React.useCallback(field => {
+    const allColumns = gridColumnFieldsSelector(apiRef);
+    return allColumns.findIndex(col => col === field);
+  }, [apiRef]);
+  const setColumnIndex = React.useCallback((field, targetIndexPosition) => {
+    const allColumns = gridColumnFieldsSelector(apiRef);
+    const oldIndexPosition = getColumnIndexRelativeToVisibleColumns(field);
+    if (oldIndexPosition === targetIndexPosition) {
+      return;
+    }
+    logger.debug(`Moving column ${field} to index ${targetIndexPosition}`);
+    const updatedColumns = [...allColumns];
+    const fieldRemoved = updatedColumns.splice(oldIndexPosition, 1)[0];
+    updatedColumns.splice(targetIndexPosition, 0, fieldRemoved);
+    setGridColumnsState(_extends({}, gridColumnsStateSelector(apiRef), {
+      orderedFields: updatedColumns
+    }));
+    const params = {
+      column: apiRef.current.getColumn(field),
+      targetIndex: apiRef.current.getColumnIndexRelativeToVisibleColumns(field),
+      oldIndex: oldIndexPosition
+    };
+    apiRef.current.publishEvent('columnIndexChange', params);
+  }, [apiRef, logger, setGridColumnsState, getColumnIndexRelativeToVisibleColumns]);
+  const setColumnWidth = React.useCallback((field, width) => {
+    logger.debug(`Updating column ${field} width to ${width}`);
+    const columnsState = gridColumnsStateSelector(apiRef);
+    const column = columnsState.lookup[field];
+    const newColumn = _extends({}, column, {
+      width,
+      hasBeenResized: true
+    });
+    setGridColumnsState(hydrateColumnsWidth(_extends({}, columnsState, {
+      lookup: _extends({}, columnsState.lookup, {
+        [field]: newColumn
+      })
+    }), apiRef.current.getRootDimensions()));
+    apiRef.current.publishEvent('columnWidthChange', {
+      element: apiRef.current.getColumnHeaderElement(field),
+      colDef: newColumn,
+      width
+    });
+  }, [apiRef, logger, setGridColumnsState]);
+  const columnApi = {
+    getColumn,
+    getAllColumns,
+    getColumnIndex,
+    getColumnPosition,
+    getVisibleColumns,
+    getColumnIndexRelativeToVisibleColumns,
+    updateColumns,
+    setColumnVisibilityModel,
+    setColumnVisibility,
+    setColumnWidth
+  };
+  const columnReorderApi = {
+    setColumnIndex
+  };
+  useGridApiMethod(apiRef, columnApi, 'public');
+  useGridApiMethod(apiRef, columnReorderApi, props.signature === GridSignature.DataGrid ? 'private' : 'public');
+
+  /**
+   * PRE-PROCESSING
+   */
+  const stateExportPreProcessing = React.useCallback((prevState, context) => {
+    const columnsStateToExport = {};
+    const columnVisibilityModelToExport = gridColumnVisibilityModelSelector(apiRef);
+    const shouldExportColumnVisibilityModel =
+    // Always export if the `exportOnlyDirtyModels` property is not activated
+    !context.exportOnlyDirtyModels ||
+    // Always export if the model is controlled
+    props.columnVisibilityModel != null ||
+    // Always export if the model has been initialized
+    // TODO v6 Do a nullish check instead to export even if the initial model equals "{}"
+    Object.keys(props.initialState?.columns?.columnVisibilityModel ?? {}).length > 0 ||
+    // Always export if the model is not empty
+    Object.keys(columnVisibilityModelToExport).length > 0;
+    if (shouldExportColumnVisibilityModel) {
+      columnsStateToExport.columnVisibilityModel = columnVisibilityModelToExport;
+    }
+    columnsStateToExport.orderedFields = gridColumnFieldsSelector(apiRef);
+    const columns = gridColumnDefinitionsSelector(apiRef);
+    const dimensions = {};
+    columns.forEach(colDef => {
+      if (colDef.hasBeenResized) {
+        const colDefDimensions = {};
+        COLUMNS_DIMENSION_PROPERTIES.forEach(propertyName => {
+          let propertyValue = colDef[propertyName];
+          if (propertyValue === Infinity) {
+            propertyValue = -1;
+          }
+          colDefDimensions[propertyName] = propertyValue;
+        });
+        dimensions[colDef.field] = colDefDimensions;
+      }
+    });
+    if (Object.keys(dimensions).length > 0) {
+      columnsStateToExport.dimensions = dimensions;
+    }
+    return _extends({}, prevState, {
+      columns: columnsStateToExport
+    });
+  }, [apiRef, props.columnVisibilityModel, props.initialState?.columns]);
+  const stateRestorePreProcessing = React.useCallback((params, context) => {
+    const columnVisibilityModelToImport = context.stateToRestore.columns?.columnVisibilityModel;
+    const initialState = context.stateToRestore.columns;
+    if (columnVisibilityModelToImport == null && initialState == null) {
+      return params;
+    }
+    const columnsState = createColumnsState({
+      apiRef,
+      columnsToUpsert: [],
+      initialState,
+      columnVisibilityModel: columnVisibilityModelToImport,
+      keepOnlyColumnsToUpsert: false
+    });
+    apiRef.current.setState(mergeColumnsState(columnsState));
+    if (initialState != null) {
+      apiRef.current.publishEvent('columnsChange', columnsState.orderedFields);
+    }
+    return params;
+  }, [apiRef]);
+  const preferencePanelPreProcessing = React.useCallback((initialValue, value) => {
+    if (value === GridPreferencePanelsValue.columns) {
+      const ColumnsPanel = props.slots.columnsPanel;
+      return /*#__PURE__*/_jsx(ColumnsPanel, _extends({}, props.slotProps?.columnsPanel));
+    }
+    return initialValue;
+  }, [props.slots.columnsPanel, props.slotProps?.columnsPanel]);
+  const addColumnMenuItems = React.useCallback(columnMenuItems => {
+    if (props.disableColumnSelector) {
+      return columnMenuItems;
+    }
+    return [...columnMenuItems, 'columnMenuColumnsItem'];
+  }, [props.disableColumnSelector]);
+  useGridRegisterPipeProcessor(apiRef, 'columnMenu', addColumnMenuItems);
+  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'preferencePanel', preferencePanelPreProcessing);
+
+  /*
+   * EVENTS
+   */
+
+  const prevInnerWidth = React.useRef(null);
+  const handleGridSizeChange = size => {
+    if (prevInnerWidth.current !== size.width) {
+      prevInnerWidth.current = size.width;
+      const hasFlexColumns = gridVisibleColumnDefinitionsSelector(apiRef).some(col => col.flex && col.flex > 0);
+      if (!hasFlexColumns) {
+        return;
+      }
+      setGridColumnsState(hydrateColumnsWidth(gridColumnsStateSelector(apiRef), apiRef.current.getRootDimensions()));
+    }
+  };
+  useGridApiEventHandler(apiRef, 'viewportInnerSizeChange', handleGridSizeChange);
+
+  /**
+   * APPLIERS
+   */
+  const hydrateColumns = React.useCallback(() => {
+    logger.info(`Columns pipe processing have changed, regenerating the columns`);
+    const columnsState = createColumnsState({
+      apiRef,
+      columnsToUpsert: [],
+      initialState: undefined,
+      keepOnlyColumnsToUpsert: false
+    });
+    setGridColumnsState(columnsState);
+  }, [apiRef, logger, setGridColumnsState]);
+  useGridRegisterPipeApplier(apiRef, 'hydrateColumns', hydrateColumns);
+
+  /*
+   * EFFECTS
+   */
+  // The effect do not track any value defined synchronously during the 1st render by hooks called after `useGridColumns`
+  // As a consequence, the state generated by the 1st run of this useEffect will always be equal to the initialization one
+  const isFirstRender = React.useRef(true);
+  React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    logger.info(`GridColumns have changed, new length ${props.columns.length}`);
+    if (previousColumnsProp.current === props.columns) {
+      return;
+    }
+    const columnsState = createColumnsState({
+      apiRef,
+      initialState: undefined,
+      // If the user provides a model, we don't want to set it in the state here because it has it's dedicated `useEffect` which calls `setColumnVisibilityModel`
+      columnsToUpsert: props.columns,
+      keepOnlyColumnsToUpsert: true
+    });
+    previousColumnsProp.current = props.columns;
+    setGridColumnsState(columnsState);
+  }, [logger, apiRef, setGridColumnsState, props.columns]);
+  React.useEffect(() => {
+    if (props.columnVisibilityModel !== undefined) {
+      apiRef.current.setColumnVisibilityModel(props.columnVisibilityModel);
+    }
+  }, [apiRef, logger, props.columnVisibilityModel]);
+}
+function mergeColumnsState(columnsState) {
+  return state => _extends({}, state, {
+    columns: columnsState
+  });
+}

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

@@ -0,0 +1,29 @@
+import type { GridGetRowsParams, GridGetRowsResponse } from '../../../models/gridDataSource';
+export type GridDataSourceCacheDefaultConfig = {
+  /**
+   * Time To Live for each cache entry in milliseconds.
+   * After this time the cache entry will become stale and the next query will result in cache miss.
+   * @default 300000 (5 minutes)
+   */
+  ttl?: number;
+  /**
+   * Function to generate a cache key from the params.
+   * @param {GridGetRowsParams} params The params to generate the cache key from.
+   * @returns {string} The cache key.
+   * @default `getKeyDefault()`
+   */
+  getKey?: (params: GridGetRowsParams) => string;
+};
+export declare function getKeyDefault(params: GridGetRowsParams): string;
+export declare class GridDataSourceCacheDefault {
+  private cache;
+  private ttl;
+  private getKey;
+  constructor({
+    ttl,
+    getKey
+  }: GridDataSourceCacheDefaultConfig);
+  set(key: GridGetRowsParams, value: GridGetRowsResponse): void;
+  get(key: GridGetRowsParams): GridGetRowsResponse | undefined;
+  clear(): void;
+}

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

@@ -0,0 +1,39 @@
+export function getKeyDefault(params) {
+  return JSON.stringify([params.filterModel, params.sortModel, params.start, params.end]);
+}
+export class GridDataSourceCacheDefault {
+  constructor({
+    ttl = 300000,
+    getKey = getKeyDefault
+  }) {
+    this.cache = void 0;
+    this.ttl = void 0;
+    this.getKey = void 0;
+    this.cache = {};
+    this.ttl = ttl;
+    this.getKey = getKey;
+  }
+  set(key, value) {
+    const keyString = this.getKey(key);
+    const expiry = Date.now() + this.ttl;
+    this.cache[keyString] = {
+      value,
+      expiry
+    };
+  }
+  get(key) {
+    const keyString = this.getKey(key);
+    const entry = this.cache[keyString];
+    if (!entry) {
+      return undefined;
+    }
+    if (Date.now() > entry.expiry) {
+      delete this.cache[keyString];
+      return undefined;
+    }
+    return entry.value;
+  }
+  clear() {
+    this.cache = {};
+  }
+}

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

@@ -0,0 +1,8 @@
+export declare const gridGetRowsParamsSelector: import("../../..").OutputSelector<import("../../../models/gridStateCommunity").GridStateCommunity, import("../../..").GridPaginationModel, {
+  groupKeys: never[];
+  paginationModel: import("../../..").GridPaginationModel;
+  sortModel: import("../../..").GridSortModel;
+  filterModel: import("../../..").GridFilterModel;
+  start: number;
+  end: number;
+}>;

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

@@ -0,0 +1,12 @@
+import { gridFilterModelSelector } from "../filter/gridFilterSelector.js";
+import { gridSortModelSelector } from "../sorting/gridSortingSelector.js";
+import { gridPaginationModelSelector } from "../pagination/gridPaginationSelector.js";
+import { createSelector } from "../../../utils/createSelector.js";
+export const gridGetRowsParamsSelector = createSelector(gridFilterModelSelector, gridSortModelSelector, gridPaginationModelSelector, (filterModel, sortModel, paginationModel) => ({
+  groupKeys: [],
+  paginationModel,
+  sortModel,
+  filterModel,
+  start: paginationModel.page * paginationModel.pageSize,
+  end: paginationModel.page * paginationModel.pageSize + paginationModel.pageSize - 1
+}));

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

@@ -0,0 +1,22 @@
+import { GridDataSourceCache, GridGetRowsParams } from "../../../models/gridDataSource.js";
+import { GridRowId } from "../../../models/gridRows.js";
+export interface GridDataSourceApiBase {
+  /**
+   * Fetches the rows from the server.
+   * If no `parentId` option is provided, it fetches the root rows.
+   * Any missing parameter from `params` will be filled from the state (sorting, filtering, etc.).
+   * @param {GridRowId} parentId The id of the parent node (default: `GRID_ROOT_GROUP_ID`).
+   * @param {Partial<GridGetRowsParams>} params Request parameters override.
+   */
+  fetchRows: (parentId?: GridRowId, params?: Partial<GridGetRowsParams>) => void;
+  /**
+   * The data source cache object.
+   */
+  cache: GridDataSourceCache;
+}
+export interface GridDataSourceApi {
+  /**
+   * The data source API.
+   */
+  unstable_dataSource: GridDataSourceApiBase;
+}

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

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

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

@@ -0,0 +1,7 @@
+import { RefObject } from '@mui/x-internals/types';
+import type { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
+import type { DataGridProcessedProps } from '../../../models/props/DataGridProps';
+/**
+ * Community version of the data source hook. Contains implementation of the `useGridDataSourceBase` hook.
+ */
+export declare const useGridDataSource: (apiRef: RefObject<GridPrivateApiCommunity>, props: DataGridProcessedProps) => void;

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

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
+import { useGridRegisterStrategyProcessor } from "../../core/strategyProcessing/useGridRegisterStrategyProcessor.js";
+import { useGridApiEventHandler as addEventHandler } from "../../utils/useGridApiEventHandler.js";
+import { useGridDataSourceBase } from "./useGridDataSourceBase.js";
+/**
+ * Community version of the data source hook. Contains implementation of the `useGridDataSourceBase` hook.
+ */
+export const useGridDataSource = (apiRef, props) => {
+  const {
+    api,
+    strategyProcessor,
+    events,
+    setStrategyAvailability
+  } = useGridDataSourceBase(apiRef, props);
+  useGridApiMethod(apiRef, api.public, 'public');
+  useGridRegisterStrategyProcessor(apiRef, strategyProcessor.strategyName, strategyProcessor.group, strategyProcessor.processor);
+  Object.entries(events).forEach(([event, handler]) => {
+    addEventHandler(apiRef, event, handler);
+  });
+  React.useEffect(() => {
+    setStrategyAvailability();
+  }, [setStrategyAvailability]);
+};

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, "unstable_dataSource" | "unstable_dataSourceCache" | "unstable_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;
+  };
+};