@mui/x-data-grid 8.0.0-beta.2 → 8.0.0

package/esm/context/GridContextProvider.js

@@ -3,7 +3,7 @@ import { GridApiContext } from "../components/GridApiContext.js";
 import { GridPrivateApiContext } from "../hooks/utils/useGridPrivateApiContext.js";
 import { GridRootPropsContext } from "./GridRootPropsContext.js";
 import { GridConfigurationContext } from "../components/GridConfigurationContext.js";
-import { GridPreferencePanelContextProvider } from "../components/panel/GridPreferencePanelContext.js";
+import { GridPanelContextProvider } from "../components/panel/GridPanelContext.js";
 import { GridCSSVariablesContext } from "../utils/css/context.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function GridContextProvider({
@@ -21,7 +21,7 @@ export function GridContextProvider({
         value: privateApiRef,
         children: /*#__PURE__*/_jsx(GridApiContext.Provider, {
           value: apiRef,
-          children: /*#__PURE__*/_jsx(GridPreferencePanelContextProvider, {
+          children: /*#__PURE__*/_jsx(GridPanelContextProvider, {
             children: /*#__PURE__*/_jsx(GridCSSVariablesContext, {
               children: children
             })

package/esm/hooks/core/gridCoreSelector.d.ts

@@ -3,4 +3,4 @@ import { GridStateCommunity } from "../../models/gridStateCommunity.js";
  * Get the theme state
  * @category Core
  */
-export declare const gridIsRtlSelector: import("../..").OutputSelector<GridStateCommunity, unknown, boolean>;
+export declare const gridIsRtlSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, unknown, boolean>;

package/esm/hooks/core/gridPropsSelectors.d.ts

@@ -6,4 +6,4 @@ import type { GridRowId } from '../../models/gridRows';
  * @param {GridRowModel} row - The row to get the id for
  * @returns {GridRowId} The row id
  */
-export declare const gridRowIdSelector: import("../..").OutputSelector<GridStateCommunity, import("../..").GridValidRowModel, GridRowId>;
+export declare const gridRowIdSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridValidRowModel, GridRowId>;

package/esm/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/esm/hooks/core/useGridInitialization.js

@@ -1,7 +1,6 @@
 import { useGridRefs } from "./useGridRefs.js";
 import { useGridIsRtl } from "./useGridIsRtl.js";
 import { useGridLoggerFactory } from "./useGridLoggerFactory.js";
-import { useGridApiInitialization } from "./useGridApiInitialization.js";
 import { useGridLocaleText } from "./useGridLocaleText.js";
 import { useGridPipeProcessing } from "./pipeProcessing/index.js";
 import { useGridStrategyProcessing } from "./strategyProcessing/index.js";
@@ -11,8 +10,7 @@ import { useGridProps } from "./useGridProps.js";
 /**
  * Initialize the technical pieces of the DataGrid (logger, state, ...) that any DataGrid implementation needs
  */
-export const useGridInitialization = (inputApiRef, props) => {
-  const privateApiRef = useGridApiInitialization(inputApiRef, props);
+export const useGridInitialization = (privateApiRef, props) => {
   useGridRefs(privateApiRef);
   useGridProps(privateApiRef, props);
   useGridIsRtl(privateApiRef);
@@ -24,5 +22,4 @@ export const useGridInitialization = (inputApiRef, props) => {
   privateApiRef.current.register('private', {
     rootProps: props
   });
-  return privateApiRef;
 };

package/esm/hooks/features/clipboard/useGridClipboard.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useGridApiOptionHandler, useGridNativeEventListener } from "../../utils/index.js";
+import { useGridEventPriority, useGridNativeEventListener } from "../../utils/index.js";
 import { gridFocusCellSelector } from "../focus/gridFocusStateSelector.js";
 import { serializeCellValue } from "../export/serializers/csvSerializer.js";
 import { isCopyShortcut } from "../../../utils/keyboardUtils.js";
@@ -93,5 +93,5 @@ export const useGridClipboard = (apiRef, props) => {
     }
   }, [apiRef, ignoreValueFormatter, clipboardCopyCellDelimiter]);
   useGridNativeEventListener(apiRef, () => apiRef.current.rootElementRef.current, 'keydown', handleCopy);
-  useGridApiOptionHandler(apiRef, 'clipboardCopy', props.onClipboardCopy);
+  useGridEventPriority(apiRef, 'clipboardCopy', props.onClipboardCopy);
 };

package/esm/hooks/features/columnGrouping/gridColumnGroupsSelector.d.ts

@@ -3,10 +3,10 @@ import { GridStateCommunity } from "../../../models/gridStateCommunity.js";
  * @category ColumnGrouping
  * @ignore - do not document.
  */
-export declare const gridColumnGroupingSelector: import("../../..").OutputSelector<GridStateCommunity, unknown, import("./gridColumnGroupsInterfaces").GridColumnsGroupingState>;
-export declare const gridColumnGroupsUnwrappedModelSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridColumnGroupsInterfaces").GridColumnsGroupingState, {
+export declare const gridColumnGroupingSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, unknown, import("@mui/x-data-grid").GridColumnsGroupingState>;
+export declare const gridColumnGroupsUnwrappedModelSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridColumnsGroupingState, {
   [columnField: string]: string[];
 }>;
-export declare const gridColumnGroupsLookupSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridColumnGroupsInterfaces").GridColumnsGroupingState, import("./gridColumnGroupsInterfaces").GridColumnGroupLookup>;
-export declare const gridColumnGroupsHeaderStructureSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridColumnGroupsInterfaces").GridColumnsGroupingState, import("./gridColumnGroupsInterfaces").GridGroupingStructure[][]>;
-export declare const gridColumnGroupsHeaderMaxDepthSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridColumnGroupsInterfaces").GridColumnsGroupingState, number>;
+export declare const gridColumnGroupsLookupSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridColumnsGroupingState, import("./gridColumnGroupsInterfaces").GridColumnGroupLookup>;
+export declare const gridColumnGroupsHeaderStructureSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridColumnsGroupingState, import("./gridColumnGroupsInterfaces").GridGroupingStructure[][]>;
+export declare const gridColumnGroupsHeaderMaxDepthSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridColumnsGroupingState, number>;

package/esm/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/esm/hooks/features/columnGrouping/useGridColumnGrouping.js

@@ -6,7 +6,7 @@ import { isLeaf } from "../../../models/gridColumnGrouping.js";
 import { gridColumnGroupsLookupSelector, gridColumnGroupsUnwrappedModelSelector } from "./gridColumnGroupsSelector.js";
 import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
 import { getColumnGroupsHeaderStructure, unwrapGroupingColumnModel } from "./gridColumnGroupsUtils.js";
-import { useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
+import { useGridEvent } from "../../utils/useGridEvent.js";
 import { gridColumnFieldsSelector, gridVisibleColumnFieldsSelector } from "../columns/index.js";
 const createGroupLookup = columnGroupingModel => {
   let groupLookup = {};
@@ -114,11 +114,11 @@ export const useGridColumnGrouping = (apiRef, props) => {
       });
     });
   }, [apiRef]);
-  useGridApiEventHandler(apiRef, 'columnIndexChange', handleColumnIndexChange);
-  useGridApiEventHandler(apiRef, 'columnsChange', () => {
+  useGridEvent(apiRef, 'columnIndexChange', handleColumnIndexChange);
+  useGridEvent(apiRef, 'columnsChange', () => {
     updateColumnGroupingState(props.columnGroupingModel);
   });
-  useGridApiEventHandler(apiRef, 'columnVisibilityModelChange', () => {
+  useGridEvent(apiRef, 'columnVisibilityModelChange', () => {
     updateColumnGroupingState(props.columnGroupingModel);
   });
 

package/esm/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -5,7 +5,7 @@ import { styled } from '@mui/material/styles';
 import { useGridSelector } from "../../utils/index.js";
 import { useGridRootProps } from "../../utils/useGridRootProps.js";
 import { useGridPrivateApiContext } from "../../utils/useGridPrivateApiContext.js";
-import { useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
+import { useGridEvent } from "../../utils/useGridEvent.js";
 import { GridColumnHeaderItem } from "../../../components/columnHeaders/GridColumnHeaderItem.js";
 import { gridColumnsTotalWidthSelector, gridGroupHeaderHeightSelector, gridHasFillerSelector, gridHeaderHeightSelector, gridVerticalScrollbarWidthSelector } from "../dimensions/gridDimensionsSelectors.js";
 import { gridRenderContextColumnsSelector } from "../virtualization/index.js";
@@ -73,10 +73,10 @@ export const useGridColumnHeaders = props => {
       lastColumnIndex: visibleColumns.length
     } : null;
   }, [pinnedColumns.right.length, visibleColumns.length]);
-  useGridApiEventHandler(apiRef, 'columnResizeStart', handleColumnResizeStart);
-  useGridApiEventHandler(apiRef, 'columnResizeStop', handleColumnResizeStop);
-  useGridApiEventHandler(apiRef, 'columnHeaderDragStart', handleColumnReorderStart);
-  useGridApiEventHandler(apiRef, 'columnHeaderDragEnd', handleColumnReorderStop);
+  useGridEvent(apiRef, 'columnResizeStart', handleColumnResizeStart);
+  useGridEvent(apiRef, 'columnResizeStop', handleColumnResizeStop);
+  useGridEvent(apiRef, 'columnHeaderDragStart', handleColumnReorderStart);
+  useGridEvent(apiRef, 'columnHeaderDragEnd', handleColumnReorderStop);
 
   // Helper for computation common between getColumnHeaders and getColumnGroupHeaders
   const getColumnsToRender = params => {

package/esm/hooks/features/columnMenu/columnMenuSelector.d.ts

@@ -1,2 +1,2 @@
 import { GridStateCommunity } from "../../../models/gridStateCommunity.js";
-export declare const gridColumnMenuSelector: import("../../..").OutputSelector<GridStateCommunity, unknown, import("./columnMenuInterfaces").GridColumnMenuState>;
+export declare const gridColumnMenuSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, unknown, import("@mui/x-data-grid").GridColumnMenuState>;

package/esm/hooks/features/columnMenu/useGridColumnMenu.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useGridLogger, useGridApiMethod, useGridApiEventHandler } from "../../utils/index.js";
+import { useGridLogger, useGridApiMethod, useGridEvent } from "../../utils/index.js";
 import { gridColumnMenuSelector } from "./columnMenuSelector.js";
 import { gridColumnLookupSelector, gridColumnVisibilityModelSelector, gridColumnFieldsSelector } from "../columns/gridColumnsSelector.js";
 export const columnMenuStateInitializer = state => _extends({}, state, {
@@ -98,7 +98,7 @@ export const useGridColumnMenu = apiRef => {
     toggleColumnMenu
   };
   useGridApiMethod(apiRef, columnMenuApi, 'public');
-  useGridApiEventHandler(apiRef, 'columnResizeStart', hideColumnMenu);
-  useGridApiEventHandler(apiRef, 'virtualScrollerWheel', apiRef.current.hideColumnMenu);
-  useGridApiEventHandler(apiRef, 'virtualScrollerTouchMove', apiRef.current.hideColumnMenu);
+  useGridEvent(apiRef, 'columnResizeStart', hideColumnMenu);
+  useGridEvent(apiRef, 'virtualScrollerWheel', apiRef.current.hideColumnMenu);
+  useGridEvent(apiRef, 'virtualScrollerTouchMove', apiRef.current.hideColumnMenu);
 };

package/esm/hooks/features/columnResize/columnResizeSelector.d.ts

@@ -1,3 +1,3 @@
 import { GridStateCommunity } from "../../../models/gridStateCommunity.js";
-export declare const gridColumnResizeSelector: import("../../..").OutputSelector<GridStateCommunity, unknown, import("./columnResizeState").GridColumnResizeState>;
-export declare const gridResizingColumnFieldSelector: import("../../..").OutputSelector<GridStateCommunity, import("./columnResizeState").GridColumnResizeState, string>;
+export declare const gridColumnResizeSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, unknown, import("@mui/x-data-grid").GridColumnResizeState>;
+export declare const gridResizingColumnFieldSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridColumnResizeState, string>;

package/esm/hooks/features/columnResize/useGridColumnResize.js

@@ -7,7 +7,7 @@ import { useRtl } from '@mui/system/RtlProvider';
 import { findGridCellElementsFromCol, findGridElement, findLeftPinnedCellsAfterCol, findRightPinnedCellsBeforeCol, getFieldFromHeaderElem, findHeaderElementFromField, getFieldsFromGroupHeaderElem, findGroupHeaderElementsFromField, findGridHeader, findGridCells, findParentElementFromClassName, findLeftPinnedHeadersAfterCol, findRightPinnedHeadersBeforeCol, escapeOperandAttributeSelector } from "../../../utils/domUtils.js";
 import { DEFAULT_GRID_AUTOSIZE_OPTIONS } from "./gridColumnResizeApi.js";
 import { gridClasses } from "../../../constants/gridClasses.js";
-import { useGridApiEventHandler, useGridApiMethod, useGridApiOptionHandler, useGridLogger, useGridNativeEventListener, useGridSelector, useOnMount } from "../../utils/index.js";
+import { useGridEvent, useGridApiMethod, useGridEventPriority, useGridLogger, useGridNativeEventListener, useGridSelector, useOnMount } from "../../utils/index.js";
 import { gridVirtualizationColumnEnabledSelector } from "../virtualization/index.js";
 import { createControllablePromise } from "../../../utils/createControllablePromise.js";
 import { clamp } from "../../../utils/utils.js";
@@ -547,12 +547,12 @@ export const useGridColumnResize = (apiRef, props) => {
   useGridApiMethod(apiRef, {
     autosizeColumns
   }, 'public');
-  useGridApiEventHandler(apiRef, 'columnResizeStop', handleResizeStop);
-  useGridApiEventHandler(apiRef, 'columnResizeStart', handleResizeStart);
-  useGridApiEventHandler(apiRef, 'columnSeparatorMouseDown', handleColumnResizeMouseDown);
-  useGridApiEventHandler(apiRef, 'columnSeparatorDoubleClick', handleColumnSeparatorDoubleClick);
-  useGridApiOptionHandler(apiRef, 'columnResize', props.onColumnResize);
-  useGridApiOptionHandler(apiRef, 'columnWidthChange', props.onColumnWidthChange);
+  useGridEvent(apiRef, 'columnResizeStop', handleResizeStop);
+  useGridEvent(apiRef, 'columnResizeStart', handleResizeStart);
+  useGridEvent(apiRef, 'columnSeparatorMouseDown', handleColumnResizeMouseDown);
+  useGridEvent(apiRef, 'columnSeparatorDoubleClick', handleColumnSeparatorDoubleClick);
+  useGridEventPriority(apiRef, 'columnResize', props.onColumnResize);
+  useGridEventPriority(apiRef, 'columnWidthChange', props.onColumnWidthChange);
 };
 function updateProperty(element, property, delta) {
   if (!element) {

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

@@ -4,55 +4,55 @@ import { GridColumnLookup, GridPinnedColumnFields } from "./gridColumnsInterface
  * Get the columns state
  * @category Columns
  */
-export declare const gridColumnsStateSelector: import("../../..").OutputSelector<GridStateCommunity, unknown, import("./gridColumnsInterfaces").GridColumnsState>;
+export declare const gridColumnsStateSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, unknown, import("@mui/x-data-grid").GridColumnsState>;
 /**
  * Get an array of column fields in the order rendered on screen.
  * @category Columns
  */
-export declare const gridColumnFieldsSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridColumnsInterfaces").GridColumnsState, string[]>;
+export declare const gridColumnFieldsSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridColumnsState, string[]>;
 /**
  * Get the columns as a lookup (an object containing the field for keys and the definition for values).
  * @category Columns
  */
-export declare const gridColumnLookupSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridColumnsInterfaces").GridColumnsState, GridColumnLookup>;
+export declare const gridColumnLookupSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridColumnsState, GridColumnLookup>;
 /**
  * Get an array of column definitions in the order rendered on screen..
  * @category Columns
  */
-export declare const gridColumnDefinitionsSelector: import("../../..").OutputSelector<GridStateCommunity, GridColumnLookup, import("../../../internals").GridStateColDef[]>;
+export declare const gridColumnDefinitionsSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, GridColumnLookup, import("../../../internals").GridStateColDef[]>;
 /**
  * Get the column visibility model, containing the visibility status of each column.
  * If a column is not registered in the model, it is visible.
  * @category Visible Columns
  */
-export declare const gridColumnVisibilityModelSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridColumnsInterfaces").GridColumnsState, import("./gridColumnsInterfaces").GridColumnVisibilityModel>;
+export declare const gridColumnVisibilityModelSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridColumnsState, import("@mui/x-data-grid").GridColumnVisibilityModel>;
 /**
  * Get the "initial" column visibility model, containing the visibility status of each column.
  * It is updated when the `columns` prop is updated or when `updateColumns` API method is called.
  * If a column is not registered in the model, it is visible.
  * @category Visible Columns
  */
-export declare const gridInitialColumnVisibilityModelSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridColumnsInterfaces").GridColumnsState, import("./gridColumnsInterfaces").GridColumnVisibilityModel>;
+export declare const gridInitialColumnVisibilityModelSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridColumnsState, import("@mui/x-data-grid").GridColumnVisibilityModel>;
 /**
  * Get the visible columns as a lookup (an object containing the field for keys and the definition for values).
  * @category Visible Columns
  */
-export declare const gridVisibleColumnDefinitionsSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridColumnsInterfaces").GridColumnVisibilityModel, import("../../../internals").GridStateColDef[]>;
+export declare const gridVisibleColumnDefinitionsSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridColumnVisibilityModel, import("../../../internals").GridStateColDef[]>;
 /**
  * Get the field of each visible column.
  * @category Visible Columns
  */
-export declare const gridVisibleColumnFieldsSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../../internals").GridStateColDef[], string[]>;
+export declare const gridVisibleColumnFieldsSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("../../../internals").GridStateColDef[], string[]>;
 /**
  * Get the visible pinned columns model.
  * @category Visible Columns
  */
-export declare const gridPinnedColumnsSelector: import("../../..").OutputSelector<GridStateCommunity, unknown, GridPinnedColumnFields>;
+export declare const gridPinnedColumnsSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, unknown, GridPinnedColumnFields>;
 /**
  * Get the visible pinned columns.
  * @category Visible Columns
  */
-export declare const gridVisiblePinnedColumnDefinitionsSelector: import("../../..").OutputSelector<GridStateCommunity, boolean, {
+export declare const gridVisiblePinnedColumnDefinitionsSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, boolean, {
   left: import("../../../internals").GridStateColDef[];
   right: import("../../../internals").GridStateColDef[];
 }>;
@@ -60,20 +60,20 @@ export declare const gridVisiblePinnedColumnDefinitionsSelector: import("../../.
  * Get the left position in pixel of each visible columns relative to the left of the first column.
  * @category Visible Columns
  */
-export declare const gridColumnPositionsSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../../internals").GridStateColDef[], number[]>;
+export declare const gridColumnPositionsSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("../../../internals").GridStateColDef[], number[]>;
 /**
  * Get the filterable columns as an array.
  * @category Columns
  */
-export declare const gridFilterableColumnDefinitionsSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../../internals").GridStateColDef[], import("../../../internals").GridStateColDef[]>;
+export declare const gridFilterableColumnDefinitionsSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("../../../internals").GridStateColDef[], import("../../../internals").GridStateColDef[]>;
 /**
  * Get the filterable columns as a lookup (an object containing the field for keys and the definition for values).
  * @category Columns
  */
-export declare const gridFilterableColumnLookupSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../../internals").GridStateColDef[], GridColumnLookup>;
+export declare const gridFilterableColumnLookupSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("../../../internals").GridStateColDef[], GridColumnLookup>;
 /**
  * Checks if some column has a colSpan field.
  * @category Columns
  * @ignore - Do not document
  */
-export declare const gridHasColSpanSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../../internals").GridStateColDef[], boolean>;
+export declare const gridHasColSpanSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("../../../internals").GridStateColDef[], boolean>;

package/esm/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,
@@ -71,4 +72,4 @@ export declare function getFirstNonSpannedColumnToRender({
   lastRowToRender: number;
   visibleRows: GridRowEntry[];
 }): number;
-export declare function getTotalHeaderHeight(apiRef: RefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'columnHeaderHeight' | 'headerFilterHeight' | 'unstable_listView' | 'columnGroupHeaderHeight'>): number;
+export declare function getTotalHeaderHeight(apiRef: RefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'columnHeaderHeight' | 'headerFilterHeight' | 'listView' | 'columnGroupHeaderHeight'>): number;

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

@@ -206,7 +206,7 @@ export const applyInitialState = (columnsState, initialState) => {
   });
   return newColumnsState;
 };
-function getDefaultColTypeDef(type) {
+export function getDefaultColTypeDef(type) {
   let colDef = COLUMN_TYPES[DEFAULT_GRID_COL_TYPE_KEY];
   if (type && COLUMN_TYPES[type]) {
     colDef = COLUMN_TYPES[type];
@@ -315,7 +315,7 @@ export function getFirstNonSpannedColumnToRender({
   return firstNonSpannedColumnToRender;
 }
 export function getTotalHeaderHeight(apiRef, props) {
-  if (props.unstable_listView) {
+  if (props.listView) {
     return 0;
   }
   const densityFactor = gridDensityFactorSelector(apiRef);

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
-import { useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
+import { useGridEvent } from "../../utils/useGridEvent.js";
 /**
  * @requires useGridColumns (method, event)
  * @requires useGridParamsApi (method)
@@ -45,7 +45,7 @@ export const useGridColumnSpanning = apiRef => {
   };
   useGridApiMethod(apiRef, columnSpanningPublicApi, 'public');
   useGridApiMethod(apiRef, columnSpanningPrivateApi, 'private');
-  useGridApiEventHandler(apiRef, 'columnOrderChange', resetColSpan);
+  useGridEvent(apiRef, 'columnOrderChange', resetColSpan);
 };
 function calculateCellColSpan(params) {
   const {

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

@@ -4,11 +4,12 @@ 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 { useGridEvent } from "../../utils/useGridEvent.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 { gridPivotActiveSelector } from "../pivoting/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const columnsStateInitializer = (state, props, apiRef) => {
   const columnsState = createColumnsState({
@@ -77,6 +78,10 @@ export function useGridColumns(apiRef, props) {
     }
   }, [apiRef]);
   const updateColumns = React.useCallback(columns => {
+    if (gridPivotActiveSelector(apiRef)) {
+      apiRef.current.updateNonPivotColumns(columns);
+      return;
+    }
     const columnsState = createColumnsState({
       apiRef,
       columnsToUpsert: columns,
@@ -226,11 +231,12 @@ export function useGridColumns(apiRef, props) {
     return initialValue;
   }, [props.slots.columnsPanel, props.slotProps?.columnsPanel]);
   const addColumnMenuItems = React.useCallback(columnMenuItems => {
-    if (props.disableColumnSelector) {
+    const isPivotActive = gridPivotActiveSelector(apiRef);
+    if (props.disableColumnSelector || isPivotActive) {
       return columnMenuItems;
     }
     return [...columnMenuItems, 'columnMenuColumnsItem'];
-  }, [props.disableColumnSelector]);
+  }, [props.disableColumnSelector, apiRef]);
   useGridRegisterPipeProcessor(apiRef, 'columnMenu', addColumnMenuItems);
   useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
   useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
@@ -251,7 +257,7 @@ export function useGridColumns(apiRef, props) {
       setGridColumnsState(hydrateColumnsWidth(gridColumnsStateSelector(apiRef), apiRef.current.getRootDimensions()));
     }
   };
-  useGridApiEventHandler(apiRef, 'viewportInnerSizeChange', handleGridSizeChange);
+  useGridEvent(apiRef, 'viewportInnerSizeChange', handleGridSizeChange);
 
   /**
    * APPLIERS

package/esm/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/esm/hooks/features/dataSource/cache.js

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

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

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

package/esm/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/esm/hooks/features/dataSource/useGridDataSource.js

@@ -1,7 +1,7 @@
 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 { useGridEvent as addEventHandler } from "../../utils/useGridEvent.js";
 import { useGridDataSourceBase } from "./useGridDataSourceBase.js";
 /**
  * Community version of the data source hook. Contains implementation of the `useGridDataSourceBase` hook.

package/esm/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/esm/hooks/features/dataSource/useGridDataSourceBase.js

@@ -3,6 +3,7 @@ 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 { isDeepEqual } from '@mui/x-internals/isDeepEqual';
 import { GRID_ROOT_GROUP_ID } from "../rows/gridRowsUtils.js";
 import { runIf } from "../../../utils/utils.js";
 import { GridStrategyGroup } from "../../core/strategyProcessing/index.js";
@@ -11,7 +12,7 @@ import { gridPaginationModelSelector } from "../pagination/gridPaginationSelecto
 import { gridGetRowsParamsSelector } from "./gridDataSourceSelector.js";
 import { CacheChunkManager, DataSourceRowsUpdateStrategy } from "./utils.js";
 import { GridDataSourceCacheDefault } from "./cache.js";
-import { GridGetRowsError } from "./gridDataSourceError.js";
+import { GridGetRowsError, GridUpdateRowError } from "./gridDataSourceError.js";
 const noopCache = {
   clear: () => {},
   get: () => undefined,
@@ -67,9 +68,7 @@ export 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,
@@ -89,7 +88,7 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
             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');
+          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 {
@@ -118,10 +117,42 @@ export 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 && !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 GridUpdateRowError({
+          message: errorThrown?.message,
+          params,
+          cause: errorThrown
+        }));
+      } else if (process.env.NODE_ENV !== 'production') {
+        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(() => debounce(fetchRows, 0), [fetchRows]);
@@ -147,6 +178,7 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
     api: {
       public: dataSourceApi
     },
+    debouncedFetchRows,
     strategyProcessor: {
       strategyName: DataSourceRowsUpdateStrategy.Default,
       group: 'dataSourceRowsUpdate',