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

package/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/hooks/features/columns/gridColumnsUtils.d.ts

@@ -71,4 +71,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/hooks/features/columns/gridColumnsUtils.js

@@ -330,7 +330,7 @@ function getFirstNonSpannedColumnToRender({
   return firstNonSpannedColumnToRender;
 }
 function getTotalHeaderHeight(apiRef, props) {
-  if (props.unstable_listView) {
+  if (props.listView) {
     return 0;
   }
   const densityFactor = (0, _densitySelector.gridDensityFactorSelector)(apiRef);

package/hooks/features/columns/useGridColumnSpanning.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useGridColumnSpanning = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
-var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
+var _useGridEvent = require("../../utils/useGridEvent");
 /**
  * @requires useGridColumns (method, event)
  * @requires useGridParamsApi (method)
@@ -52,7 +52,7 @@ const useGridColumnSpanning = apiRef => {
   };
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, columnSpanningPublicApi, 'public');
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, columnSpanningPrivateApi, 'private');
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnOrderChange', resetColSpan);
+  (0, _useGridEvent.useGridEvent)(apiRef, 'columnOrderChange', resetColSpan);
 };
 exports.useGridColumnSpanning = useGridColumnSpanning;
 function calculateCellColSpan(params) {

package/hooks/features/columns/useGridColumns.js

@@ -13,7 +13,7 @@ var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _useGridLogger = require("../../utils/useGridLogger");
 var _gridColumnsSelector = require("./gridColumnsSelector");
 var _signature = require("../../../constants/signature");
-var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
+var _useGridEvent = require("../../utils/useGridEvent");
 var _pipeProcessing = require("../../core/pipeProcessing");
 var _gridColumnsInterfaces = require("./gridColumnsInterfaces");
 var _gridColumnsUtils = require("./gridColumnsUtils");
@@ -55,7 +55,6 @@ function useGridColumns(apiRef, props) {
     logger.debug('Updating columns state.');
     apiRef.current.setState(mergeColumnsState(columnsState));
     apiRef.current.publishEvent('columnsChange', columnsState.orderedFields);
-    apiRef.current.updateRenderContext?.();
   }, [logger, apiRef]);
 
   /**
@@ -262,7 +261,7 @@ function useGridColumns(apiRef, props) {
       setGridColumnsState((0, _gridColumnsUtils.hydrateColumnsWidth)((0, _gridColumnsSelector.gridColumnsStateSelector)(apiRef), apiRef.current.getRootDimensions()));
     }
   };
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'viewportInnerSizeChange', handleGridSizeChange);
+  (0, _useGridEvent.useGridEvent)(apiRef, 'viewportInnerSizeChange', handleGridSizeChange);
 
   /**
    * APPLIERS

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

@@ -8,7 +8,7 @@ exports.useGridDataSource = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _useGridRegisterStrategyProcessor = require("../../core/strategyProcessing/useGridRegisterStrategyProcessor");
-var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
+var _useGridEvent = require("../../utils/useGridEvent");
 var _useGridDataSourceBase = require("./useGridDataSourceBase");
 /**
  * Community version of the data source hook. Contains implementation of the `useGridDataSourceBase` hook.
@@ -23,7 +23,7 @@ const useGridDataSource = (apiRef, props) => {
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, api.public, 'public');
   (0, _useGridRegisterStrategyProcessor.useGridRegisterStrategyProcessor)(apiRef, strategyProcessor.strategyName, strategyProcessor.group, strategyProcessor.processor);
   Object.entries(events).forEach(([event, handler]) => {
-    (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, event, handler);
+    (0, _useGridEvent.useGridEvent)(apiRef, event, handler);
   });
   React.useEffect(() => {
     setStrategyAvailability();

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

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

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

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

package/hooks/features/dimensions/useGridDimensions.js

@@ -13,7 +13,8 @@ var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallb
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _ownerDocument = _interopRequireDefault(require("@mui/utils/ownerDocument"));
 var _throttle = require("@mui/x-internals/throttle");
-var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
+var _isDeepEqual = require("@mui/x-internals/isDeepEqual");
+var _useGridEvent = require("../../utils/useGridEvent");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _createSelector = require("../../../utils/createSelector");
 var _useGridLogger = require("../../utils/useGridLogger");
@@ -29,7 +30,6 @@ var _gridColumnsUtils = require("../columns/gridColumnsUtils");
 var _dataGridPropsDefaultValues = require("../../../constants/dataGridPropsDefaultValues");
 var _roundToDecimalPlaces = require("../../../utils/roundToDecimalPlaces");
 var _isJSDOM = require("../../../utils/isJSDOM");
-var _utils2 = require("../../../utils/utils");
 const EMPTY_SIZE = {
   width: 0,
   height: 0
@@ -201,7 +201,7 @@ function useGridDimensions(apiRef, props) {
       bottomContainerHeight
     };
     const prevDimensions = apiRef.current.state.dimensions;
-    if ((0, _utils2.isDeepEqual)(prevDimensions, newDimensions)) {
+    if ((0, _isDeepEqual.isDeepEqual)(prevDimensions, newDimensions)) {
       return;
     }
     setDimensions(newDimensions);
@@ -247,9 +247,9 @@ function useGridDimensions(apiRef, props) {
     }
     debouncedUpdateDimensions();
   }, [updateDimensions, props.autoHeight, debouncedUpdateDimensions, logger]);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'rootMount', handleRootMount);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'resize', handleResize);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'debouncedResize', props.onResize);
+  (0, _useGridEvent.useGridEventPriority)(apiRef, 'rootMount', handleRootMount);
+  (0, _useGridEvent.useGridEventPriority)(apiRef, 'resize', handleResize);
+  (0, _useGridEvent.useGridEventPriority)(apiRef, 'debouncedResize', props.onResize);
 }
 function setCSSVariables(root, dimensions) {
   const set = (k, v) => root.style.setProperty(k, v);

package/hooks/features/editing/gridEditingSelectors.d.ts

@@ -4,12 +4,12 @@ import { GridEditMode } from "../../../models/gridEditRowModel.js";
 /**
  * Select the row editing state.
  */
-export declare const gridEditRowsStateSelector: import("../../..").OutputSelector<GridStateCommunity, unknown, import("../../..").GridEditingState>;
-export declare const gridRowIsEditingSelector: import("../../..").OutputSelector<GridStateCommunity, {
+export declare const gridEditRowsStateSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, unknown, import("@mui/x-data-grid").GridEditingState>;
+export declare const gridRowIsEditingSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, {
   rowId: GridRowId;
   editMode: GridEditMode;
 }, boolean>;
-export declare const gridEditCellStateSelector: import("../../..").OutputSelector<GridStateCommunity, {
+export declare const gridEditCellStateSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, {
   rowId: GridRowId;
   field: string;
-}, import("../../..").GridEditCellProps<any>>;
+}, import("@mui/x-data-grid").GridEditCellProps<any>>;

package/hooks/features/editing/useGridCellEditing.js

@@ -13,7 +13,7 @@ var React = _interopRequireWildcard(require("react"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _warning = require("@mui/x-internals/warning");
-var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
+var _useGridEvent = require("../../utils/useGridEvent");
 var _gridEditRowModel = require("../../../models/gridEditRowModel");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _gridEditingSelectors = require("./gridEditingSelectors");
@@ -175,13 +175,13 @@ const useGridCellEditing = (apiRef, props) => {
       }
     }
   };
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellDoubleClick', runIfEditModeIsCell(handleCellDoubleClick));
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellFocusOut', runIfEditModeIsCell(handleCellFocusOut));
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellKeyDown', runIfEditModeIsCell(handleCellKeyDown));
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellEditStart', runIfEditModeIsCell(handleCellEditStart));
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellEditStop', runIfEditModeIsCell(handleCellEditStop));
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'cellEditStart', props.onCellEditStart);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'cellEditStop', runIfNoFieldErrors(props.onCellEditStop));
+  (0, _useGridEvent.useGridEvent)(apiRef, 'cellDoubleClick', runIfEditModeIsCell(handleCellDoubleClick));
+  (0, _useGridEvent.useGridEvent)(apiRef, 'cellFocusOut', runIfEditModeIsCell(handleCellFocusOut));
+  (0, _useGridEvent.useGridEvent)(apiRef, 'cellKeyDown', runIfEditModeIsCell(handleCellKeyDown));
+  (0, _useGridEvent.useGridEvent)(apiRef, 'cellEditStart', runIfEditModeIsCell(handleCellEditStart));
+  (0, _useGridEvent.useGridEvent)(apiRef, 'cellEditStop', runIfEditModeIsCell(handleCellEditStop));
+  (0, _useGridEvent.useGridEventPriority)(apiRef, 'cellEditStart', props.onCellEditStart);
+  (0, _useGridEvent.useGridEventPriority)(apiRef, 'cellEditStop', runIfNoFieldErrors(props.onCellEditStop));
   const getCellMode = React.useCallback((id, field) => {
     const editingState = (0, _gridEditingSelectors.gridEditRowsStateSelector)(apiRef);
     const isEditing = editingState[id] && editingState[id][field];

package/hooks/features/editing/useGridRowEditing.js

@@ -13,7 +13,7 @@ var React = _interopRequireWildcard(require("react"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _warning = require("@mui/x-internals/warning");
-var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
+var _useGridEvent = require("../../utils/useGridEvent");
 var _gridEditRowModel = require("../../../models/gridEditRowModel");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _gridEditingSelectors = require("./gridEditingSelectors");
@@ -233,14 +233,14 @@ const useGridRowEditing = (apiRef, props) => {
       cellToFocusAfter
     });
   }, [apiRef]);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellDoubleClick', runIfEditModeIsRow(handleCellDoubleClick));
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellFocusIn', runIfEditModeIsRow(handleCellFocusIn));
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellFocusOut', runIfEditModeIsRow(handleCellFocusOut));
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellKeyDown', runIfEditModeIsRow(handleCellKeyDown));
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'rowEditStart', runIfEditModeIsRow(handleRowEditStart));
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'rowEditStop', runIfEditModeIsRow(handleRowEditStop));
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'rowEditStart', props.onRowEditStart);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'rowEditStop', props.onRowEditStop);
+  (0, _useGridEvent.useGridEvent)(apiRef, 'cellDoubleClick', runIfEditModeIsRow(handleCellDoubleClick));
+  (0, _useGridEvent.useGridEvent)(apiRef, 'cellFocusIn', runIfEditModeIsRow(handleCellFocusIn));
+  (0, _useGridEvent.useGridEvent)(apiRef, 'cellFocusOut', runIfEditModeIsRow(handleCellFocusOut));
+  (0, _useGridEvent.useGridEvent)(apiRef, 'cellKeyDown', runIfEditModeIsRow(handleCellKeyDown));
+  (0, _useGridEvent.useGridEvent)(apiRef, 'rowEditStart', runIfEditModeIsRow(handleRowEditStart));
+  (0, _useGridEvent.useGridEvent)(apiRef, 'rowEditStop', runIfEditModeIsRow(handleRowEditStop));
+  (0, _useGridEvent.useGridEventPriority)(apiRef, 'rowEditStart', props.onRowEditStart);
+  (0, _useGridEvent.useGridEventPriority)(apiRef, 'rowEditStop', props.onRowEditStop);
   const getRowMode = React.useCallback(id => {
     const isEditing = (0, _gridEditingSelectors.gridRowIsEditingSelector)(apiRef, {
       rowId: id,

package/hooks/features/events/useGridEvents.js

@@ -4,27 +4,27 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useGridEvents = useGridEvents;
-var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
+var _useGridEvent = require("../../utils/useGridEvent");
 /**
  * @requires useGridFocus (event) - can be after, async only
  * @requires useGridColumns (event) - can be after, async only
  */
 function useGridEvents(apiRef, props) {
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'columnHeaderClick', props.onColumnHeaderClick);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'columnHeaderContextMenu', props.onColumnHeaderContextMenu);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'columnHeaderDoubleClick', props.onColumnHeaderDoubleClick);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'columnHeaderOver', props.onColumnHeaderOver);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'columnHeaderOut', props.onColumnHeaderOut);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'columnHeaderEnter', props.onColumnHeaderEnter);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'columnHeaderLeave', props.onColumnHeaderLeave);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'cellClick', props.onCellClick);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'cellDoubleClick', props.onCellDoubleClick);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'cellKeyDown', props.onCellKeyDown);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'preferencePanelClose', props.onPreferencePanelClose);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'preferencePanelOpen', props.onPreferencePanelOpen);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'menuOpen', props.onMenuOpen);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'menuClose', props.onMenuClose);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'rowDoubleClick', props.onRowDoubleClick);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'rowClick', props.onRowClick);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'stateChange', props.onStateChange);
+  (0, _useGridEvent.useGridEventPriority)(apiRef, 'columnHeaderClick', props.onColumnHeaderClick);
+  (0, _useGridEvent.useGridEventPriority)(apiRef, 'columnHeaderContextMenu', props.onColumnHeaderContextMenu);
+  (0, _useGridEvent.useGridEventPriority)(apiRef, 'columnHeaderDoubleClick', props.onColumnHeaderDoubleClick);
+  (0, _useGridEvent.useGridEventPriority)(apiRef, 'columnHeaderOver', props.onColumnHeaderOver);
+  (0, _useGridEvent.useGridEventPriority)(apiRef, 'columnHeaderOut', props.onColumnHeaderOut);
+  (0, _useGridEvent.useGridEventPriority)(apiRef, 'columnHeaderEnter', props.onColumnHeaderEnter);
+  (0, _useGridEvent.useGridEventPriority)(apiRef, 'columnHeaderLeave', props.onColumnHeaderLeave);
+  (0, _useGridEvent.useGridEventPriority)(apiRef, 'cellClick', props.onCellClick);
+  (0, _useGridEvent.useGridEventPriority)(apiRef, 'cellDoubleClick', props.onCellDoubleClick);
+  (0, _useGridEvent.useGridEventPriority)(apiRef, 'cellKeyDown', props.onCellKeyDown);
+  (0, _useGridEvent.useGridEventPriority)(apiRef, 'preferencePanelClose', props.onPreferencePanelClose);
+  (0, _useGridEvent.useGridEventPriority)(apiRef, 'preferencePanelOpen', props.onPreferencePanelOpen);
+  (0, _useGridEvent.useGridEventPriority)(apiRef, 'menuOpen', props.onMenuOpen);
+  (0, _useGridEvent.useGridEventPriority)(apiRef, 'menuClose', props.onMenuClose);
+  (0, _useGridEvent.useGridEventPriority)(apiRef, 'rowDoubleClick', props.onRowDoubleClick);
+  (0, _useGridEvent.useGridEventPriority)(apiRef, 'rowClick', props.onRowClick);
+  (0, _useGridEvent.useGridEventPriority)(apiRef, 'stateChange', props.onStateChange);
 }

package/hooks/features/filter/gridFilterSelector.d.ts

@@ -5,94 +5,94 @@ import { GridFilterItem } from "../../../models/gridFilterItem.js";
  * Get the current filter model.
  * @category Filtering
  */
-export declare const gridFilterModelSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridFilterState").GridFilterState, import("../../..").GridFilterModel>;
+export declare const gridFilterModelSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridFilterState, import("@mui/x-data-grid").GridFilterModel>;
 /**
  * Get the current quick filter values.
  * @category Filtering
  */
-export declare const gridQuickFilterValuesSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridFilterModel, any[] | undefined>;
+export declare const gridQuickFilterValuesSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridFilterModel, any[] | undefined>;
 /**
  * @category Visible rows
  * @ignore - do not document.
  */
-export declare const gridVisibleRowsLookupSelector: import("../../..").OutputSelector<GridStateCommunity, unknown, import("./gridFilterState").GridVisibleRowsLookupState>;
+export declare const gridVisibleRowsLookupSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, unknown, import("./gridFilterState").GridVisibleRowsLookupState>;
 /**
  * @category Filtering
  * @ignore - do not document.
  */
-export declare const gridFilteredRowsLookupSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridFilterState").GridFilterState, Record<GridRowId, false>>;
+export declare const gridFilteredRowsLookupSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridFilterState, Record<GridRowId, false>>;
 /**
  * @category Filtering
  * @ignore - do not document.
  */
-export declare const gridFilteredChildrenCountLookupSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridFilterState").GridFilterState, Record<GridRowId, number>>;
+export declare const gridFilteredChildrenCountLookupSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridFilterState, Record<GridRowId, number>>;
 /**
  * @category Filtering
  * @ignore - do not document.
  */
-export declare const gridFilteredDescendantCountLookupSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridFilterState").GridFilterState, Record<GridRowId, number>>;
+export declare const gridFilteredDescendantCountLookupSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridFilterState, Record<GridRowId, number>>;
 /**
  * Get the id and the model of the rows accessible after the filtering process.
  * Does not contain the collapsed children.
  * @category Filtering
  */
-export declare const gridExpandedSortedRowEntriesSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowEntry<import("../../..").GridValidRowModel>[], import("../../..").GridRowEntry<import("../../..").GridValidRowModel>[]>;
+export declare const gridExpandedSortedRowEntriesSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridRowEntry<import("@mui/x-data-grid").GridValidRowModel>[], import("@mui/x-data-grid").GridRowEntry<import("@mui/x-data-grid").GridValidRowModel>[]>;
 /**
  * Get the id of the rows accessible after the filtering process.
  * Does not contain the collapsed children.
  * @category Filtering
  */
-export declare const gridExpandedSortedRowIdsSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowEntry<import("../../..").GridValidRowModel>[], GridRowId[]>;
+export declare const gridExpandedSortedRowIdsSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridRowEntry<import("@mui/x-data-grid").GridValidRowModel>[], GridRowId[]>;
 /**
  * Get the id and the model of the rows accessible after the filtering process.
  * Contains the collapsed children.
  * @category Filtering
  */
-export declare const gridFilteredSortedRowEntriesSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowEntry<import("../../..").GridValidRowModel>[], import("../../..").GridRowEntry<import("../../..").GridValidRowModel>[]>;
+export declare const gridFilteredSortedRowEntriesSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridRowEntry<import("@mui/x-data-grid").GridValidRowModel>[], import("@mui/x-data-grid").GridRowEntry<import("@mui/x-data-grid").GridValidRowModel>[]>;
 /**
  * Get the id of the rows accessible after the filtering process.
  * Contains the collapsed children.
  * @category Filtering
  */
-export declare const gridFilteredSortedRowIdsSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowEntry<import("../../..").GridValidRowModel>[], GridRowId[]>;
+export declare const gridFilteredSortedRowIdsSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridRowEntry<import("@mui/x-data-grid").GridValidRowModel>[], GridRowId[]>;
 /**
  * Get the ids to position in the current tree level lookup of the rows accessible after the filtering process.
  * Does not contain the collapsed children.
  * @category Filtering
  * @ignore - do not document.
  */
-export declare const gridExpandedSortedRowTreeLevelPositionLookupSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowTreeConfig, Record<GridRowId, number>>;
+export declare const gridExpandedSortedRowTreeLevelPositionLookupSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridRowTreeConfig, Record<GridRowId, number>>;
 /**
  * Get the id and the model of the top level rows accessible after the filtering process.
  * @category Filtering
  */
-export declare const gridFilteredSortedTopLevelRowEntriesSelector: import("../../..").OutputSelector<GridStateCommunity, number, import("../../..").GridRowEntry<import("../../..").GridValidRowModel>[]>;
+export declare const gridFilteredSortedTopLevelRowEntriesSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, number, import("@mui/x-data-grid").GridRowEntry<import("@mui/x-data-grid").GridValidRowModel>[]>;
 /**
  * Get the amount of rows accessible after the filtering process.
  * @category Filtering
  */
-export declare const gridExpandedRowCountSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowEntry<import("../../..").GridValidRowModel>[], number>;
+export declare const gridExpandedRowCountSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridRowEntry<import("@mui/x-data-grid").GridValidRowModel>[], number>;
 /**
  * Get the amount of top level rows accessible after the filtering process.
  * @category Filtering
  */
-export declare const gridFilteredTopLevelRowCountSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowEntry<import("../../..").GridValidRowModel>[], number>;
+export declare const gridFilteredTopLevelRowCountSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridRowEntry<import("@mui/x-data-grid").GridValidRowModel>[], number>;
 /**
  * Get the amount of rows accessible after the filtering process.
  * Includes top level and descendant rows.
  * @category Filtering
  */
-export declare const gridFilteredRowCountSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowEntry<import("../../..").GridValidRowModel>[], number>;
+export declare const gridFilteredRowCountSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridRowEntry<import("@mui/x-data-grid").GridValidRowModel>[], number>;
 /**
  * Get the amount of descendant rows accessible after the filtering process.
  * @category Filtering
  */
-export declare const gridFilteredDescendantRowCountSelector: import("../../..").OutputSelector<GridStateCommunity, number, number>;
+export declare const gridFilteredDescendantRowCountSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, number, number>;
 /**
  * @category Filtering
  * @ignore - do not document.
  */
-export declare const gridFilterActiveItemsSelector: import("../../..").OutputSelector<GridStateCommunity, import("..").GridColumnLookup, GridFilterItem[]>;
+export declare const gridFilterActiveItemsSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridColumnLookup, GridFilterItem[]>;
 export type GridFilterActiveItemsLookup = {
   [field: string]: GridFilterItem[];
 };
@@ -100,4 +100,4 @@ export type GridFilterActiveItemsLookup = {
  * @category Filtering
  * @ignore - do not document.
  */
-export declare const gridFilterActiveItemsLookupSelector: import("../../..").OutputSelector<GridStateCommunity, GridFilterItem[], GridFilterActiveItemsLookup>;
+export declare const gridFilterActiveItemsLookupSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, GridFilterItem[], GridFilterActiveItemsLookup>;

package/hooks/features/filter/useGridFilter.js

@@ -10,8 +10,9 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _reselect = require("reselect");
 var _utils = require("@mui/utils");
+var _isDeepEqual = require("@mui/x-internals/isDeepEqual");
 var _useLazyRef = require("../../utils/useLazyRef");
-var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
+var _useGridEvent = require("../../utils/useGridEvent");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _useGridLogger = require("../../utils/useGridLogger");
 var _gridColumnsSelector = require("../columns/gridColumnsSelector");
@@ -23,7 +24,6 @@ var _rows = require("../rows");
 var _pipeProcessing = require("../../core/pipeProcessing");
 var _strategyProcessing = require("../../core/strategyProcessing");
 var _gridFilterUtils = require("./gridFilterUtils");
-var _utils2 = require("../../../utils/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const filterStateInitializer = (state, props, apiRef) => {
   const filterModel = props.filterModel ?? props.initialState?.filter?.filterModel ?? (0, _gridFilterState.getDefaultGridFilterModel)();
@@ -187,7 +187,7 @@ const useGridFilter = (apiRef, props) => {
   }, [apiRef]);
   const setQuickFilterValues = React.useCallback(values => {
     const filterModel = (0, _gridFilterSelector.gridFilterModelSelector)(apiRef);
-    if ((0, _utils2.isDeepEqual)(filterModel.quickFilterValues, values)) {
+    if ((0, _isDeepEqual.isDeepEqual)(filterModel.quickFilterValues, values)) {
       return;
     }
     apiRef.current.setFilterModel((0, _extends2.default)({}, filterModel, {
@@ -246,7 +246,7 @@ const useGridFilter = (apiRef, props) => {
     // Always export if the model has been initialized
     props.initialState?.filter?.filterModel != null ||
     // Export if the model is not equal to the default value
-    !(0, _utils2.isDeepEqual)(filterModelToExport, (0, _gridFilterState.getDefaultGridFilterModel)());
+    !(0, _isDeepEqual.isDeepEqual)(filterModelToExport, (0, _gridFilterState.getDefaultGridFilterModel)());
     if (!shouldExportFilterModel) {
       return prevState;
     }
@@ -345,11 +345,11 @@ const useGridFilter = (apiRef, props) => {
       });
     });
   }, [apiRef]);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'rowsSet', updateFilteredRows);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnsChange', handleColumnsChange);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'activeStrategyProcessorChange', handleStrategyProcessorChange);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'rowExpansionChange', updateVisibleRowsLookupState);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnVisibilityModelChange', () => {
+  (0, _useGridEvent.useGridEvent)(apiRef, 'rowsSet', updateFilteredRows);
+  (0, _useGridEvent.useGridEvent)(apiRef, 'columnsChange', handleColumnsChange);
+  (0, _useGridEvent.useGridEvent)(apiRef, 'activeStrategyProcessorChange', handleStrategyProcessorChange);
+  (0, _useGridEvent.useGridEvent)(apiRef, 'rowExpansionChange', updateVisibleRowsLookupState);
+  (0, _useGridEvent.useGridEvent)(apiRef, 'columnVisibilityModelChange', () => {
     const filterModel = (0, _gridFilterSelector.gridFilterModelSelector)(apiRef);
     if (filterModel.quickFilterValues && (0, _gridFilterUtils.shouldQuickFilterExcludeHiddenColumns)(filterModel)) {
       // re-apply filters because the quick filter results may have changed