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

package/esm/models/gridBaseSlots.d.ts

@@ -62,7 +62,7 @@ export type AutocompleteProps<Value = string, Multiple extends boolean = false,
 };
 export type BadgeProps = CommonProps & {
   badgeContent?: React.ReactNode;
-  children: React.ReactNode;
+  children?: React.ReactNode;
   color?: 'primary' | 'default' | 'error';
   invisible?: boolean;
   overlap?: 'circular';
@@ -86,7 +86,6 @@ export type CheckboxProps = CommonProps & {
   id?: string;
   autoFocus?: boolean;
   checked?: boolean;
-  className?: string;
   disabled?: boolean;
   fullWidth?: boolean;
   indeterminate?: boolean;
@@ -103,6 +102,15 @@ export type CheckboxProps = CommonProps & {
   tabIndex?: number;
   touchRippleRef?: any;
 };
+export type ChipProps = CommonProps & {
+  ref?: Ref<HTMLDivElement>;
+  id?: string;
+  label: string;
+  size?: 'small' | 'medium';
+  icon?: React.ReactElement;
+  children?: null;
+  variant?: 'filled' | 'outlined';
+};
 export type IconButtonProps = Omit<ButtonProps, 'startIcon'> & {
   label?: string;
   color?: 'default' | 'inherit' | 'primary';
@@ -227,6 +235,7 @@ export type SwitchProps = CommonProps & {
   checked?: boolean;
   onChange?: React.ChangeEventHandler;
   size?: 'small' | 'medium';
+  label?: React.ReactNode;
 };
 export type TextFieldProps = CommonProps & {
   role?: string;
@@ -251,10 +260,17 @@ export type TextFieldProps = CommonProps & {
   type?: React.HTMLInputTypeAttribute;
   value?: string;
   ref?: Ref<HTMLInputElement>;
+  multiline?: boolean;
+  autoFocus?: boolean;
 };
 export type TooltipProps = CommonProps & {
   children: React.ReactElement<any, any>;
   enterDelay?: number;
   title: React.ReactNode;
 };
+export type IconProps = CommonProps<SVGSVGElement> & {
+  fontSize?: 'small' | 'medium' | 'large' | 'inherit';
+  color?: 'action' | string;
+  titleAccess?: string;
+};
 export {};

package/esm/models/gridIconSlotsComponent.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { IconProps } from "./gridBaseSlots.js";
 /**
  * Set of icons used in the grid component UI.
  */
@@ -7,185 +8,180 @@ export interface GridIconSlotsComponent {
    * Icon displayed on the boolean cell to represent the true value.
    * @default GridCheckIcon
    */
-  booleanCellTrueIcon: React.JSXElementConstructor<any>;
+  booleanCellTrueIcon: React.JSXElementConstructor<IconProps>;
   /**
    * Icon displayed on the boolean cell to represent the false value.
    * @default GridCloseIcon
    */
-  booleanCellFalseIcon: React.JSXElementConstructor<any>;
+  booleanCellFalseIcon: React.JSXElementConstructor<IconProps>;
   /**
    * Icon displayed on the side of the column header title to display the filter input component.
    * @default GridTripleDotsVerticalIcon
    */
-  columnMenuIcon: React.JSXElementConstructor<any>;
+  columnMenuIcon: React.JSXElementConstructor<IconProps>;
   /**
    * Icon displayed on the open filter button present in the toolbar by default.
    * @default GridFilterListIcon
    */
-  openFilterButtonIcon: React.JSXElementConstructor<any>;
+  openFilterButtonIcon: React.JSXElementConstructor<IconProps>;
   /**
    * Icon displayed on the column header menu to show that a filter has been applied to the column.
    * @default GridFilterAltIcon
    */
-  columnFilteredIcon: React.JSXElementConstructor<any>;
+  columnFilteredIcon: React.JSXElementConstructor<IconProps>;
   /**
    * Icon displayed on the column menu selector tab.
    * @default GridColumnIcon
    */
-  columnSelectorIcon: React.JSXElementConstructor<any>;
-  /**
-   * Icon displayed on the side of the column header title when unsorted.
-   * @default GridColumnUnsortedIcon
-   */
-  columnUnsortedIcon: React.JSXElementConstructor<any> | null;
+  columnSelectorIcon: React.JSXElementConstructor<IconProps>;
   /**
    * Icon displayed on the side of the column header title when sorted in ascending order.
    * @default GridArrowUpwardIcon
    */
-  columnSortedAscendingIcon: React.JSXElementConstructor<any> | null;
+  columnSortedAscendingIcon: React.JSXElementConstructor<IconProps> | null;
   /**
    * Icon displayed on the side of the column header title when sorted in descending order.
    * @default GridArrowDownwardIcon
    */
-  columnSortedDescendingIcon: React.JSXElementConstructor<any> | null;
+  columnSortedDescendingIcon: React.JSXElementConstructor<IconProps> | null;
   /**
    * Icon displayed in between two column headers that allows to resize the column header.
    * @default GridSeparatorIcon
    */
-  columnResizeIcon: React.JSXElementConstructor<any>;
+  columnResizeIcon: React.JSXElementConstructor<IconProps>;
   /**
    * Icon displayed on the compact density option in the toolbar.
    * @default GridViewHeadlineIcon
    */
-  densityCompactIcon: React.JSXElementConstructor<any>;
+  densityCompactIcon: React.JSXElementConstructor<IconProps>;
   /**
    * Icon displayed on the standard density option in the toolbar.
    * @default GridTableRowsIcon
    */
-  densityStandardIcon: React.JSXElementConstructor<any>;
+  densityStandardIcon: React.JSXElementConstructor<IconProps>;
   /**
    * Icon displayed on the "comfortable" density option in the toolbar.
    * @default GridViewStreamIcon
    */
-  densityComfortableIcon: React.JSXElementConstructor<any>;
+  densityComfortableIcon: React.JSXElementConstructor<IconProps>;
   /**
    * Icon displayed on the open export button present in the toolbar by default.
    * @default GridDownloadIcon
    */
-  exportIcon: React.JSXElementConstructor<any>;
+  exportIcon: React.JSXElementConstructor<IconProps>;
   /**
    * Icon displayed on the `actions` column type to open the menu.
    * @default GridMoreVertIcon
    */
-  moreActionsIcon: React.JSXElementConstructor<any>;
+  moreActionsIcon: React.JSXElementConstructor<IconProps>;
   /**
    * Icon displayed on the tree data toggling column when the children are collapsed
    * @default GridKeyboardArrowRight
    */
-  treeDataExpandIcon: React.JSXElementConstructor<any>;
+  treeDataExpandIcon: React.JSXElementConstructor<IconProps>;
   /**
    * Icon displayed on the tree data toggling column when the children are expanded
    * @default GridExpandMoreIcon
    */
-  treeDataCollapseIcon: React.JSXElementConstructor<any>;
+  treeDataCollapseIcon: React.JSXElementConstructor<IconProps>;
   /**
    * Icon displayed on the grouping column when the children are collapsed
    * @default GridKeyboardArrowRight
    */
-  groupingCriteriaExpandIcon: React.JSXElementConstructor<any>;
+  groupingCriteriaExpandIcon: React.JSXElementConstructor<IconProps>;
   /**
    * Icon displayed on the grouping column when the children are expanded
    * @default GridExpandMoreIcon
    */
-  groupingCriteriaCollapseIcon: React.JSXElementConstructor<any>;
+  groupingCriteriaCollapseIcon: React.JSXElementConstructor<IconProps>;
   /**
    * Icon displayed on the detail panel toggle column when collapsed.
    * @default GridAddIcon
    */
-  detailPanelExpandIcon: React.JSXElementConstructor<any>;
+  detailPanelExpandIcon: React.JSXElementConstructor<IconProps>;
   /**
    * Icon displayed on the detail panel toggle column when expanded.
    * @default GridRemoveIcon
    */
-  detailPanelCollapseIcon: React.JSXElementConstructor<any>;
+  detailPanelCollapseIcon: React.JSXElementConstructor<IconProps>;
   /**
    * Icon displayed for deleting the filter from filter panel.
    * @default GridAddIcon
    */
-  filterPanelAddIcon: React.JSXElementConstructor<any>;
+  filterPanelAddIcon: React.JSXElementConstructor<IconProps>;
   /**
    * Icon displayed for deleting the filter from filter panel.
    * @default GridDeleteIcon
    */
-  filterPanelDeleteIcon: React.JSXElementConstructor<any>;
+  filterPanelDeleteIcon: React.JSXElementConstructor<IconProps>;
   /**
    * Icon displayed for deleting all the active filters from filter panel.
    * @default GridDeleteForeverIcon
    */
-  filterPanelRemoveAllIcon: React.JSXElementConstructor<any>;
+  filterPanelRemoveAllIcon: React.JSXElementConstructor<IconProps>;
   /**
    * Icon displayed on the `reorder` column type to reorder a row.
    * @default GridDragIcon
    */
-  rowReorderIcon: React.JSXElementConstructor<any>;
+  rowReorderIcon: React.JSXElementConstructor<IconProps>;
   /**
    * Icon displayed on the quick filter input.
    * @default GridSearchIcon
    */
-  quickFilterIcon: React.JSXElementConstructor<any>;
+  quickFilterIcon: React.JSXElementConstructor<IconProps>;
   /**
    * Icon displayed on the quick filter reset input.
    * @default GridCloseIcon
    */
-  quickFilterClearIcon: React.JSXElementConstructor<any>;
+  quickFilterClearIcon: React.JSXElementConstructor<IconProps>;
   /**
    * Icon displayed in column menu for hiding column
    * @default GridVisibilityOffIcon
    */
-  columnMenuHideIcon: React.JSXElementConstructor<any>;
+  columnMenuHideIcon: React.JSXElementConstructor<IconProps>;
   /**
    * Icon displayed in column menu for ascending sort
    * @default GridArrowUpwardIcon
    */
-  columnMenuSortAscendingIcon: React.JSXElementConstructor<any>;
+  columnMenuSortAscendingIcon: React.JSXElementConstructor<IconProps>;
   /**
    * Icon displayed in column menu for descending sort
    * @default GridArrowDownwardIcon
    */
-  columnMenuSortDescendingIcon: React.JSXElementConstructor<any>;
+  columnMenuSortDescendingIcon: React.JSXElementConstructor<IconProps>;
   /**
    * Icon displayed in column menu for unsort
    * @default null
    */
-  columnMenuUnsortIcon: React.JSXElementConstructor<any> | null;
+  columnMenuUnsortIcon: React.JSXElementConstructor<IconProps> | null;
   /**
    * Icon displayed in column menu for filter
    * @default GridFilterAltIcon
    */
-  columnMenuFilterIcon: React.JSXElementConstructor<any>;
+  columnMenuFilterIcon: React.JSXElementConstructor<IconProps>;
   /**
    * Icon displayed in column menu for showing all columns
    * @default GridViewColumnIcon
    */
-  columnMenuManageColumnsIcon: React.JSXElementConstructor<any>;
+  columnMenuManageColumnsIcon: React.JSXElementConstructor<IconProps>;
   /**
    * Icon displayed in column menu for clearing values
    * @default GridClearIcon
    */
-  columnMenuClearIcon: React.JSXElementConstructor<any>;
+  columnMenuClearIcon: React.JSXElementConstructor<IconProps>;
   /**
    * Icon displayed on the input while processing.
    * @default GridLoadIcon
    */
-  loadIcon: React.JSXElementConstructor<any>;
+  loadIcon: React.JSXElementConstructor<IconProps>;
   /**
    * Icon displayed on the column reorder button.
    * @default GridDragIcon
    */
-  columnReorderIcon: React.JSXElementConstructor<any>;
+  columnReorderIcon: React.JSXElementConstructor<IconProps>;
   /**
    * Icon displayed to indicate that a menu item is selected.
    * @default GridCheckIcon
    */
-  menuItemCheckIcon: React.JSXElementConstructor<any>;
+  menuItemCheckIcon: React.JSXElementConstructor<IconProps>;
 }

package/esm/models/gridSlotsComponent.d.ts

@@ -18,6 +18,11 @@ export interface GridBaseSlots {
    * @default Checkbox
    */
   baseCheckbox: React.JSXElementConstructor<GridSlotProps['baseCheckbox']>;
+  /**
+   * The custom Chip component used in the grid.
+   * @default Chip
+   */
+  baseChip: React.JSXElementConstructor<GridSlotProps['baseChip']>;
   /**
    * The custom CircularProgress component used in the grid.
    * @default CircularProgress

package/esm/models/gridSlotsComponentsProps.d.ts

@@ -18,12 +18,13 @@ import type { GridLoadingOverlayProps } from '../components/GridLoadingOverlay';
 import type { GridRowCountProps } from '../components/GridRowCount';
 import type { GridColumnHeaderSortIconProps } from '../components/columnHeaders/GridColumnHeaderSortIcon';
 import type { GridBottomContainerProps } from '../components/virtualization/GridBottomContainer';
-import type { AutocompleteProps, BadgeProps, ButtonProps, CheckboxProps, CircularProgressProps, DividerProps, IconButtonProps, InputProps, LinearProgressProps, MenuListProps, MenuItemProps, PaginationProps, PopperProps, SelectProps, SelectOptionProps, SkeletonProps, SwitchProps, TooltipProps, TextFieldProps } from './gridBaseSlots';
+import type { AutocompleteProps, BadgeProps, ButtonProps, CheckboxProps, ChipProps, CircularProgressProps, DividerProps, IconButtonProps, InputProps, LinearProgressProps, MenuListProps, MenuItemProps, PaginationProps, PopperProps, SelectProps, SelectOptionProps, SkeletonProps, SwitchProps, TooltipProps, TextFieldProps, IconProps } from './gridBaseSlots';
 type RootProps = React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>;
 type MainProps = React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>;
 export interface BaseAutocompletePropsOverrides {}
 export interface BaseBadgePropsOverrides {}
 export interface BaseCheckboxPropsOverrides {}
+export interface BaseChipPropsOverrides {}
 export interface BaseCircularProgressPropsOverrides {}
 export interface BaseDividerPropsOverrides {}
 export interface BaseLinearProgressPropsOverrides {}
@@ -41,7 +42,7 @@ export interface BaseInputPropsOverrides {}
 export interface BaseInputLabelPropsOverrides {}
 export interface BaseSelectOptionPropsOverrides {}
 export interface BaseSkeletonPropsOverrides {}
-export interface BaseChipPropsOverrides {}
+export interface BaseIconPropsOverrides {}
 export interface CellPropsOverrides {}
 export interface ToolbarPropsOverrides {}
 export interface ColumnHeaderFilterIconButtonPropsOverrides {}
@@ -67,6 +68,7 @@ interface BaseSlotProps {
   baseAutocomplete: AutocompleteProps<string, true, false, true> & BaseAutocompletePropsOverrides;
   baseBadge: BadgeProps & BaseBadgePropsOverrides;
   baseCheckbox: CheckboxProps & BaseCheckboxPropsOverrides;
+  baseChip: ChipProps & BaseChipPropsOverrides;
   baseCircularProgress: CircularProgressProps & BaseCircularProgressPropsOverrides;
   baseDivider: DividerProps & BaseDividerPropsOverrides;
   baseLinearProgress: LinearProgressProps & BaseLinearProgressPropsOverrides;
@@ -84,6 +86,7 @@ interface BaseSlotProps {
   baseSelectOption: SelectOptionProps & BaseSelectOptionPropsOverrides;
   baseSkeleton: SkeletonProps & BaseSkeletonPropsOverrides;
 }
+export type GridBaseIconProps = IconProps & BaseIconPropsOverrides;
 interface ElementSlotProps {
   bottomContainer: GridBottomContainerProps & BottomContainerPropsOverrides;
   cell: GridCellProps & CellPropsOverrides;

package/esm/models/index.d.ts

@@ -21,11 +21,11 @@ export type { GridSlotsComponent } from './gridSlotsComponent';
 export * from "./gridSlotsComponentsProps.js";
 export * from "./gridDensity.js";
 export * from "./logger.js";
-export * from "./muiEvent.js";
+export type { MuiBaseEvent, MuiEvent } from '@mui/x-internals/types';
 export * from "./events/index.js";
 export type { GridSortCellParams, GridSortDirection, GridComparatorFn, GridSortModel } from './gridSortModel';
 export * from "./gridColumnGrouping.js";
-export type { GridDataSourceCache } from './gridDataSource';
+export type { GridDataSourceCache, GridUpdateRowParams } from './gridDataSource';
 export type { GridExportOptions, GridFileExportOptions, GridGetRowsToExportParams, GridCsvGetRowsToExportParams, GridPrintGetRowsToExportParams, GridCsvExportOptions, GridPrintExportOptions } from './gridExport';
 export * from "./gridFilterOperator.js";
 export type { PropsFromSlot } from '@mui/x-internals/slots';

package/esm/models/index.js

@@ -19,7 +19,6 @@ export * from "./gridIconSlotsComponent.js";
 export * from "./gridSlotsComponentsProps.js";
 export * from "./gridDensity.js";
 export * from "./logger.js";
-export * from "./muiEvent.js";
 export * from "./events/index.js";
 export * from "./gridColumnGrouping.js";
 

package/esm/models/params/gridColumnResizeParams.d.ts

@@ -1,7 +1,6 @@
 import type { GridStateColDef } from '../colDef/gridColDef';
 /**
  * Object passed as parameter of the column resize event.
- * TODO: Move to `x-data-grid-pro` folder
  */
 export interface GridColumnResizeParams {
   /**

package/esm/package.json

@@ -1 +1 @@
-{"type":"module","sideEffects":false}
+{"type":"module","sideEffects":["**/*.css"]}

package/hooks/core/useGridInitialization.d.ts

@@ -1,7 +1,7 @@
 import { RefObject } from '@mui/x-internals/types';
-import type { GridApiCommon, GridPrivateApiCommon } from '../../models/api/gridApiCommon';
+import type { GridPrivateApiCommon } from '../../models/api/gridApiCommon';
 import { DataGridProcessedProps } from "../../models/props/DataGridProps.js";
 /**
  * Initialize the technical pieces of the DataGrid (logger, state, ...) that any DataGrid implementation needs
  */
-export declare const useGridInitialization: <PrivateApi extends GridPrivateApiCommon, Api extends GridApiCommon>(inputApiRef: RefObject<Api | null> | undefined, props: DataGridProcessedProps) => import("react").RefObject<PrivateApi>;
+export declare const useGridInitialization: <PrivateApi extends GridPrivateApiCommon>(privateApiRef: RefObject<PrivateApi>, props: DataGridProcessedProps) => void;

package/hooks/core/useGridInitialization.js

@@ -7,7 +7,6 @@ exports.useGridInitialization = void 0;
 var _useGridRefs = require("./useGridRefs");
 var _useGridIsRtl = require("./useGridIsRtl");
 var _useGridLoggerFactory = require("./useGridLoggerFactory");
-var _useGridApiInitialization = require("./useGridApiInitialization");
 var _useGridLocaleText = require("./useGridLocaleText");
 var _pipeProcessing = require("./pipeProcessing");
 var _strategyProcessing = require("./strategyProcessing");
@@ -16,8 +15,7 @@ var _useGridProps = require("./useGridProps");
 /**
  * Initialize the technical pieces of the DataGrid (logger, state, ...) that any DataGrid implementation needs
  */
-const useGridInitialization = (inputApiRef, props) => {
-  const privateApiRef = (0, _useGridApiInitialization.useGridApiInitialization)(inputApiRef, props);
+const useGridInitialization = (privateApiRef, props) => {
   (0, _useGridRefs.useGridRefs)(privateApiRef);
   (0, _useGridProps.useGridProps)(privateApiRef, props);
   (0, _useGridIsRtl.useGridIsRtl)(privateApiRef);
@@ -29,6 +27,5 @@ const useGridInitialization = (inputApiRef, props) => {
   privateApiRef.current.register('private', {
     rootProps: props
   });
-  return privateApiRef;
 };
 exports.useGridInitialization = useGridInitialization;

package/hooks/features/columnGrouping/useGridColumnGrouping.d.ts

@@ -2,7 +2,7 @@ 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 columnGroupsStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'columnGroupingModel' | 'experimentalFeatures'>>;
+export declare const columnGroupsStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'columnGroupingModel'>>;
 /**
  * @requires useGridColumns (method, event)
  * @requires useGridParamsApi (method)

package/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -30,8 +30,7 @@ var _constants = require("../../../internals/constants");
 var _jsxRuntime = require("react/jsx-runtime");
 const GridColumnHeaderRow = exports.GridColumnHeaderRow = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
-  slot: 'ColumnHeaderRow',
-  overridesResolver: (_, styles) => styles.columnHeaderRow
+  slot: 'ColumnHeaderRow'
 })({
   display: 'flex'
 });

package/hooks/features/columns/gridColumnsUtils.d.ts

@@ -43,6 +43,7 @@ export declare const hydrateColumnsWidth: (rawState: GridColumnsRawState, dimens
  * The columns not registered in `orderedFields` will be placed after the imported columns.
  */
 export declare const applyInitialState: (columnsState: GridColumnsRawState, initialState: GridColumnsInitialState | undefined) => GridColumnsRawState;
+export declare function getDefaultColTypeDef(type: GridColDef['type']): import("@mui/x-data-grid").GridColTypeDef;
 export declare const createColumnsState: ({
   apiRef,
   columnsToUpsert,

package/hooks/features/columns/gridColumnsUtils.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.applyInitialState = exports.COLUMNS_DIMENSION_PROPERTIES = void 0;
 exports.computeFlexColumnsWidth = computeFlexColumnsWidth;
 exports.createColumnsState = void 0;
+exports.getDefaultColTypeDef = getDefaultColTypeDef;
 exports.getFirstNonSpannedColumnToRender = getFirstNonSpannedColumnToRender;
 exports.getTotalHeaderHeight = getTotalHeaderHeight;
 exports.hydrateColumnsWidth = void 0;

package/hooks/features/columns/useGridColumns.js

@@ -18,6 +18,7 @@ var _pipeProcessing = require("../../core/pipeProcessing");
 var _gridColumnsInterfaces = require("./gridColumnsInterfaces");
 var _gridColumnsUtils = require("./gridColumnsUtils");
 var _preferencesPanel = require("../preferencesPanel");
+var _pivoting = require("../pivoting");
 var _jsxRuntime = require("react/jsx-runtime");
 const columnsStateInitializer = (state, props, apiRef) => {
   const columnsState = (0, _gridColumnsUtils.createColumnsState)({
@@ -87,6 +88,10 @@ function useGridColumns(apiRef, props) {
     }
   }, [apiRef]);
   const updateColumns = React.useCallback(columns => {
+    if ((0, _pivoting.gridPivotActiveSelector)(apiRef)) {
+      apiRef.current.updateNonPivotColumns(columns);
+      return;
+    }
     const columnsState = (0, _gridColumnsUtils.createColumnsState)({
       apiRef,
       columnsToUpsert: columns,
@@ -236,11 +241,12 @@ function useGridColumns(apiRef, props) {
     return initialValue;
   }, [props.slots.columnsPanel, props.slotProps?.columnsPanel]);
   const addColumnMenuItems = React.useCallback(columnMenuItems => {
-    if (props.disableColumnSelector) {
+    const isPivotActive = (0, _pivoting.gridPivotActiveSelector)(apiRef);
+    if (props.disableColumnSelector || isPivotActive) {
       return columnMenuItems;
     }
     return [...columnMenuItems, 'columnMenuColumnsItem'];
-  }, [props.disableColumnSelector]);
+  }, [props.disableColumnSelector, apiRef]);
   (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'columnMenu', addColumnMenuItems);
   (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'exportState', stateExportPreProcessing);
   (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'restoreState', stateRestorePreProcessing);

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

@@ -3,7 +3,7 @@ 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)
+   * @default 300_000 (5 minutes)
    */
   ttl?: number;
   /**

package/hooks/features/dataSource/cache.js

@@ -10,7 +10,7 @@ function getKeyDefault(params) {
 }
 class GridDataSourceCacheDefault {
   constructor({
-    ttl = 300000,
+    ttl = 300_000,
     getKey = getKeyDefault
   }) {
     this.cache = void 0;

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

@@ -1,5 +1,6 @@
-import { GridDataSourceCache, GridGetRowsParams } from "../../../models/gridDataSource.js";
-import { GridRowId } from "../../../models/gridRows.js";
+import type { GridDataSourceCache, GridGetRowsParams, GridUpdateRowParams } from '../../../models/gridDataSource';
+import type { GridRowId, GridRowModel } from '../../../models/gridRows';
+import type { GridDataSourceCacheDefaultConfig } from './cache';
 export interface GridDataSourceApiBase {
   /**
    * Fetches the rows from the server.
@@ -13,10 +14,22 @@ export interface GridDataSourceApiBase {
    * The data source cache object.
    */
   cache: GridDataSourceCache;
+  /**
+   * Syncs the row with the server and updates in the grid.
+   * @param {GridUpdateRowParams} params The parameters for the edit operation.
+   * @returns {Promise<GridRowModel> | undefined} The updated row or `undefined` if `dataSource.updateRow` is not passed.
+   */
+  editRow: (params: GridUpdateRowParams) => Promise<GridRowModel> | undefined;
 }
 export interface GridDataSourceApi {
   /**
    * The data source API.
    */
   dataSource: GridDataSourceApiBase;
+}
+export interface GridDataSourceBaseOptions {
+  cacheOptions?: GridDataSourceCacheDefaultConfig;
+  fetchRowChildren?: (parents: GridRowId[]) => void;
+  clearDataSourceState?: () => void;
+  handleEditRow?: (params: GridUpdateRowParams, updatedRow: GridRowModel) => void;
 }

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

@@ -1,21 +1,16 @@
 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 { GridDataSourceApi, GridDataSourceBaseOptions } 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;
-}) => {
+export declare const useGridDataSourceBase: <Api extends GridPrivateApiCommunity>(apiRef: RefObject<Api>, props: Pick<DataGridProcessedProps, "dataSource" | "dataSourceCache" | "onDataSourceError" | "pageSizeOptions" | "signature">, options?: GridDataSourceBaseOptions) => {
   api: {
     public: GridDataSourceApi;
   };
+  debouncedFetchRows: ((parentId?: import("@mui/x-data-grid").GridRowId, params?: Partial<import("@mui/x-data-grid").GridGetRowsParams>) => void) & import("@mui/utils/debounce").Cancelable;
   strategyProcessor: {
     strategyName: DataSourceRowsUpdateStrategy;
     group: "dataSourceRowsUpdate";

package/hooks/features/dataSource/useGridDataSourceBase.js

@@ -11,6 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _useLazyRef = _interopRequireDefault(require("@mui/utils/useLazyRef"));
 var _utils = require("@mui/utils");
 var _warning = require("@mui/x-internals/warning");
+var _isDeepEqual = require("@mui/x-internals/isDeepEqual");
 var _gridRowsUtils = require("../rows/gridRowsUtils");
 var _utils2 = require("../../../utils/utils");
 var _strategyProcessing = require("../../core/strategyProcessing");
@@ -75,9 +76,7 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
     try {
       const getRowsResponse = await getRows(fetchParams);
       const cacheResponses = cacheChunkManager.splitResponse(fetchParams, getRowsResponse);
-      cacheResponses.forEach((response, key) => {
-        cache.set(key, response);
-      });
+      cacheResponses.forEach((response, key) => cache.set(key, response));
       if (lastRequestId.current === requestId) {
         apiRef.current.applyStrategyProcessor('dataSourceRowsUpdate', {
           response: getRowsResponse,
@@ -97,7 +96,7 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
             cause: originalError
           }));
         } else if (process.env.NODE_ENV !== 'production') {
-          (0, _warning.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');
+          (0, _warning.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 {
@@ -126,10 +125,42 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
       response
     }, true);
   }, [apiRef]);
+  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;
+      }
+      apiRef.current.updateNestedRows([finalRowUpdate], []);
+      if (finalRowUpdate && !(0, _isDeepEqual.isDeepEqual)(finalRowUpdate, params.previousRow)) {
+        // Reset the outdated cache, only if the row is _actually_ updated
+        apiRef.current.dataSource.cache.clear();
+      }
+      return finalRowUpdate;
+    } catch (errorThrown) {
+      if (typeof onDataSourceErrorProp === 'function') {
+        onDataSourceErrorProp(new _gridDataSourceError.GridUpdateRowError({
+          message: errorThrown?.message,
+          params,
+          cause: errorThrown
+        }));
+      } else if (process.env.NODE_ENV !== 'production') {
+        (0, _warning.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
+      cache,
+      editRow
     }
   };
   const debouncedFetchRows = React.useMemo(() => (0, _utils.unstable_debounce)(fetchRows, 0), [fetchRows]);
@@ -155,6 +186,7 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
     api: {
       public: dataSourceApi
     },
+    debouncedFetchRows,
     strategyProcessor: {
       strategyName: _utils3.DataSourceRowsUpdateStrategy.Default,
       group: 'dataSourceRowsUpdate',