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

package/esm/models/gridBaseSlots.d.ts

@@ -1,4 +1,10 @@
 type Ref<T = HTMLElement> = React.RefCallback<T | null> | React.RefObject<T | null> | null;
+type CommonProps<T = HTMLElement> = React.DOMAttributes<T> & {
+  className?: string;
+  style?: React.CSSProperties;
+  [k: `aria-${string}`]: any;
+  [k: `data-${string}`]: any;
+};
 export interface AutocompleteFilterOptionsState<Value> {
   inputValue: string;
   getOptionLabel: (option: Value) => string;
@@ -54,7 +60,7 @@ export type AutocompleteProps<Value = string, Multiple extends boolean = false,
     textField: TextFieldProps;
   };
 };
-export type BadgeProps = {
+export type BadgeProps = CommonProps & {
   badgeContent?: React.ReactNode;
   children: React.ReactNode;
   color?: 'primary' | 'default' | 'error';
@@ -63,23 +69,19 @@ export type BadgeProps = {
   variant?: 'dot';
   style?: React.CSSProperties;
 };
-export type ButtonProps = {
-  ref?: Ref;
+export type ButtonProps = CommonProps & {
+  ref?: Ref<HTMLButtonElement>;
   children?: React.ReactNode;
-  className?: string;
   disabled?: boolean;
   id?: string;
-  onClick?: React.MouseEventHandler<HTMLElement>;
-  onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
   role?: string;
   size?: 'small' | 'medium' | 'large';
   startIcon?: React.ReactNode;
-  style?: React.CSSProperties;
   tabIndex?: number;
   title?: string;
   touchRippleRef?: any;
 };
-export type CheckboxProps = {
+export type CheckboxProps = CommonProps & {
   ref?: Ref<HTMLButtonElement>;
   id?: string;
   autoFocus?: boolean;
@@ -91,9 +93,7 @@ export type CheckboxProps = {
   inputRef?: React.Ref<HTMLInputElement>;
   name?: string;
   label?: React.ReactNode;
-  onClick?: React.MouseEventHandler;
   onChange?: React.ChangeEventHandler;
-  onKeyDown?: React.KeyboardEventHandler;
   size?: 'small' | 'medium';
   density?: 'standard' | 'compact';
   slotProps?: {
@@ -109,24 +109,22 @@ export type IconButtonProps = Omit<ButtonProps, 'startIcon'> & {
   edge?: 'start' | 'end' | false;
 };
 export type DividerProps = {
+  className?: string;
   orientation?: 'horizontal' | 'vertical';
 };
-export type MenuListProps = {
+export type MenuListProps = CommonProps & {
   ref?: Ref<HTMLUListElement>;
   id?: string;
-  className?: string;
   children?: React.ReactNode;
   autoFocus?: boolean;
   autoFocusItem?: boolean;
-  onKeyDown?: React.KeyboardEventHandler;
 };
-export type MenuItemProps = {
+export type MenuItemProps = CommonProps & {
   autoFocus?: boolean;
   children?: React.ReactNode;
   /** For items that aren't interactive themselves (but may contain an interactive widget) */
   inert?: boolean;
   disabled?: boolean;
-  onClick?: React.MouseEventHandler<HTMLElement>;
   iconStart?: React.ReactNode;
   iconEnd?: React.ReactNode;
   selected?: boolean;
@@ -139,7 +137,7 @@ type AutoPlacement = 'auto' | 'auto-start' | 'auto-end';
 type Placement = AutoPlacement | BasePlacement | VariationPlacement;
 type ClickAwayMouseEventHandler = 'onClick' | 'onMouseDown' | 'onMouseUp' | 'onPointerDown' | 'onPointerUp';
 type ClickAwayTouchEventHandler = 'onTouchStart' | 'onTouchEnd';
-export type PaginationProps = {
+export type PaginationProps = CommonProps & {
   count: number;
   page: number;
   rowsPerPage: number;
@@ -151,10 +149,10 @@ export type PaginationProps = {
   onRowsPerPageChange?: (rowsPerPage: number) => void;
   disabled?: boolean;
 };
-export type PopperProps = {
+export type PopperProps = CommonProps & {
+  ref?: Ref<HTMLDivElement>;
   open: boolean;
   children?: React.ReactNode;
-  className?: string;
   clickAwayTouchEvent?: false | ClickAwayTouchEventHandler;
   clickAwayMouseEvent?: false | ClickAwayMouseEventHandler;
   flip?: boolean;
@@ -164,13 +162,12 @@ export type PopperProps = {
   onDidShow?: () => void;
   onDidHide?: () => void;
   id?: string;
-  ref?: Ref;
   target?: Element | null;
   transition?: boolean;
   /** @default 'bottom' */
   placement?: Placement;
 };
-export type CircularProgressProps = {
+export type CircularProgressProps = CommonProps & {
   /**
    * Pixels or CSS value.
    * @default 40
@@ -179,11 +176,10 @@ export type CircularProgressProps = {
   /** @default 'primary' */
   color?: 'inherit' | 'primary';
 };
-export type LinearProgressProps = {};
-export type InputProps = {
+export type LinearProgressProps = CommonProps & {};
+export type InputProps = CommonProps & {
   ref?: React.Ref<HTMLElement>;
   inputRef?: React.Ref<HTMLInputElement>;
-  className?: string;
   fullWidth?: boolean;
   type?: React.HTMLInputTypeAttribute;
   value?: string;
@@ -195,7 +191,7 @@ export type InputProps = {
     htmlInput?: React.InputHTMLAttributes<HTMLInputElement>;
   };
 };
-export type SelectProps = {
+export type SelectProps = CommonProps & {
   ref?: Ref;
   id?: string;
   value?: any;
@@ -203,9 +199,6 @@ export type SelectProps = {
   error?: boolean;
   disabled?: boolean;
   onChange?: React.ChangeEventHandler;
-  onFocus?: React.FocusEventHandler;
-  onBlur?: React.FocusEventHandler;
-  onKeyDown?: React.KeyboardEventHandler;
   onOpen?: (event: React.SyntheticEvent) => void;
   onClose?: (event: React.KeyboardEvent, reason: 'backdropClick' | 'escapeKeyDown' | 'tabKeyDown') => void;
   label?: React.ReactNode;
@@ -218,28 +211,26 @@ export type SelectProps = {
       ref?: Ref;
     } & React.InputHTMLAttributes<HTMLInputElement>;
   };
-  style?: React.CSSProperties;
   children?: React.ReactNode;
 };
-export type SelectOptionProps = {
+export type SelectOptionProps = CommonProps & {
   native: boolean;
   value: any;
   children?: React.ReactNode;
 };
-export type SkeletonProps = {
+export type SkeletonProps = CommonProps & {
   variant?: 'circular' | 'text';
   width?: number | string;
   height?: number | string;
 };
-export type SwitchProps = {
+export type SwitchProps = CommonProps & {
   checked?: boolean;
   onChange?: React.ChangeEventHandler;
   size?: 'small' | 'medium';
 };
-export type TextFieldProps = {
+export type TextFieldProps = CommonProps & {
   role?: string;
   autoComplete?: string;
-  className?: string;
   color?: 'primary' | 'error';
   disabled?: boolean;
   error?: boolean;
@@ -249,7 +240,6 @@ export type TextFieldProps = {
   inputRef?: React.Ref<HTMLInputElement>;
   label?: React.ReactNode;
   onChange?: React.ChangeEventHandler;
-  onKeyDown?: React.KeyboardEventHandler;
   placeholder?: string;
   size?: 'small' | 'medium';
   slotProps?: {
@@ -257,13 +247,12 @@ export type TextFieldProps = {
     inputLabel?: {};
     htmlInput?: React.InputHTMLAttributes<HTMLInputElement>;
   };
-  style?: React.CSSProperties;
   tabIndex?: number;
   type?: React.HTMLInputTypeAttribute;
   value?: string;
   ref?: Ref<HTMLInputElement>;
 };
-export type TooltipProps = {
+export type TooltipProps = CommonProps & {
   children: React.ReactElement<any, any>;
   enterDelay?: number;
   title: React.ReactNode;

package/esm/models/gridSlotsComponentsProps.d.ts

@@ -1,11 +1,4 @@
 import * as React from 'react';
-import type { BadgeProps as MUIBadgeProps } from '@mui/material/Badge';
-import type { ButtonProps as MUIButtonProps } from '@mui/material/Button';
-import type { CircularProgressProps as MUICircularProgressProps } from '@mui/material/CircularProgress';
-import type { LinearProgressProps as MUILinearProgressProps } from '@mui/material/LinearProgress';
-import type { MenuItemProps as MUIMenuItemProps } from '@mui/material/MenuItem';
-import type { IconButtonProps as MUIIconButtonProps } from '@mui/material/IconButton';
-import type { TooltipProps as MUITooltipProps } from '@mui/material/Tooltip';
 import type { GridToolbarProps } from '../components/toolbar/GridToolbar';
 import type { ColumnHeaderFilterIconButtonProps } from '../components/columnHeaders/GridColumnHeaderFilterIconButton';
 import type { GridColumnMenuProps } from '../components/menu/columnMenu/GridColumnMenuProps';
@@ -91,15 +84,6 @@ interface BaseSlotProps {
   baseSelectOption: SelectOptionProps & BaseSelectOptionPropsOverrides;
   baseSkeleton: SkeletonProps & BaseSkeletonPropsOverrides;
 }
-interface MaterialSlotProps {
-  baseBadge: MUIBadgeProps;
-  baseButton: MUIButtonProps;
-  baseIconButton: MUIIconButtonProps;
-  baseLinearProgress: MUILinearProgressProps;
-  baseCircularProgress: MUICircularProgressProps;
-  baseMenuItem: MUIMenuItemProps;
-  baseTooltip: MUITooltipProps;
-}
 interface ElementSlotProps {
   bottomContainer: GridBottomContainerProps & BottomContainerPropsOverrides;
   cell: GridCellProps & CellPropsOverrides;
@@ -132,9 +116,7 @@ interface ElementSlotProps {
    */
   root: RootProps;
 }
-type Select<A, B, K> = K extends keyof A ? A[K] : K extends keyof B ? B[K] : never;
-type Merge<A, B> = { [K in keyof A | keyof B]: K extends 'ref' ? Select<A, B, 'ref'> : K extends keyof A & keyof B ? A[K] & B[K] : K extends keyof B ? B[K] : K extends keyof A ? A[K] : never };
-export type GridSlotProps = Merge<BaseSlotProps, MaterialSlotProps> & ElementSlotProps;
+export type GridSlotProps = BaseSlotProps & ElementSlotProps;
 /**
  * Overridable components props dynamically passed to the component at rendering.
  */

package/esm/models/props/DataGridProps.d.ts

@@ -12,7 +12,7 @@ import { GridRowId, GridRowIdGetter, GridRowsProp, GridValidRowModel } from "../
 import { GridEventListener } from "../events/index.js";
 import { GridCallbackDetails, GridLocaleText } from "../api/index.js";
 import { GridApiCommunity } from "../api/gridApiCommunity.js";
-import type { GridColDef, GridListColDef } from '../colDef/gridColDef';
+import type { GridColDef, GridListViewColDef } from '../colDef/gridColDef';
 import { GridClasses } from "../../constants/gridClasses.js";
 import { GridRowHeightParams, GridRowHeightReturnValue, GridRowParams, GridRowSpacing, GridRowSpacingParams, GridRowClassNameParams } from "../params/index.js";
 import { GridCellParams } from "../params/gridCellParams.js";
@@ -49,7 +49,7 @@ export type DataGridProps<R extends GridValidRowModel = any> = Omit<Partial<Data
  * The props of the Data Grid component after the pre-processing phase that the user should not be able to override.
  * Those are usually used in feature-hook for which the pro-plan has more advanced features (eg: multi-sorting, multi-filtering, ...).
  */
-export type DataGridForcedPropsKey = 'checkboxSelectionVisibleOnly' | 'disableMultipleColumnsFiltering' | 'disableMultipleColumnsSorting' | 'disableColumnReorder' | 'keepColumnPositionIfDraggedOutside' | 'throttleRowsMs' | 'hideFooterRowCount' | 'pagination' | 'signature' | 'unstable_listView';
+export type DataGridForcedPropsKey = 'checkboxSelectionVisibleOnly' | 'disableMultipleColumnsFiltering' | 'disableMultipleColumnsSorting' | 'disableColumnReorder' | 'keepColumnPositionIfDraggedOutside' | 'throttleRowsMs' | 'hideFooterRowCount' | 'pagination' | 'signature' | 'listView';
 /**
  * The Data Grid options with a default value that must be merged with the value given through props.
  */
@@ -724,13 +724,19 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
    */
   onSortModelChange?: (model: GridSortModel, details: GridCallbackDetails) => void;
   /**
-   * The label of the Data Grid.
+   * The `aria-label` of the Data Grid.
    */
   'aria-label'?: string;
   /**
-   * The id of the element containing a label for the Data Grid.
+   * The `id` of the element containing a label for the Data Grid.
    */
   'aria-labelledby'?: string;
+  /**
+   * The label of the Data Grid.
+   * If the `showToolbar` prop is `true`, the label will be displayed in the toolbar and applied to the `aria-label` attribute of the grid.
+   * If the `showToolbar` prop is `false`, the label will not be visible but will be applied to the `aria-label` attribute of the grid.
+   */
+  label?: string;
   /**
    * Set of columns of type [[GridColDef]][].
    */
@@ -831,10 +837,10 @@ export interface DataGridProSharedPropsWithDefaultValue {
   rowSelectionPropagation: GridRowSelectionPropagation;
   /**
    * If `true`, displays the data in a list view.
-   * Use in combination with `unstable_listColumn`.
+   * Use in combination with `listViewColumn`.
    * @default false
    */
-  unstable_listView: boolean;
+  listView: boolean;
 }
 export interface DataGridProSharedPropsWithoutDefaultValue<R extends GridValidRowModel = any> {
   /**
@@ -842,9 +848,9 @@ export interface DataGridProSharedPropsWithoutDefaultValue<R extends GridValidRo
    */
   headerFilterHeight?: number;
   /**
-   * Definition of the column rendered when the `unstable_listView` prop is enabled.
+   * Definition of the column rendered when the `listView` prop is enabled.
    */
-  unstable_listColumn?: GridListColDef<R>;
+  listViewColumn?: GridListViewColDef<R>;
 }
 export interface DataGridPremiumSharedPropsWithDefaultValue {
   /**

package/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/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/hooks/features/clipboard/useGridClipboard.js

@@ -100,6 +100,6 @@ const useGridClipboard = (apiRef, props) => {
     }
   }, [apiRef, ignoreValueFormatter, clipboardCopyCellDelimiter]);
   (0, _utils.useGridNativeEventListener)(apiRef, () => apiRef.current.rootElementRef.current, 'keydown', handleCopy);
-  (0, _utils.useGridApiOptionHandler)(apiRef, 'clipboardCopy', props.onClipboardCopy);
+  (0, _utils.useGridEventPriority)(apiRef, 'clipboardCopy', props.onClipboardCopy);
 };
 exports.useGridClipboard = useGridClipboard;

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

@@ -13,7 +13,7 @@ var _gridColumnGrouping = require("../../../models/gridColumnGrouping");
 var _gridColumnGroupsSelector = require("./gridColumnGroupsSelector");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _gridColumnGroupsUtils = require("./gridColumnGroupsUtils");
-var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
+var _useGridEvent = require("../../utils/useGridEvent");
 var _columns = require("../columns");
 const _excluded = ["groupId", "children"];
 const createGroupLookup = columnGroupingModel => {
@@ -123,11 +123,11 @@ const useGridColumnGrouping = (apiRef, props) => {
       });
     });
   }, [apiRef]);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnIndexChange', handleColumnIndexChange);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnsChange', () => {
+  (0, _useGridEvent.useGridEvent)(apiRef, 'columnIndexChange', handleColumnIndexChange);
+  (0, _useGridEvent.useGridEvent)(apiRef, 'columnsChange', () => {
     updateColumnGroupingState(props.columnGroupingModel);
   });
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnVisibilityModelChange', () => {
+  (0, _useGridEvent.useGridEvent)(apiRef, 'columnVisibilityModelChange', () => {
     updateColumnGroupingState(props.columnGroupingModel);
   });
 

package/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -13,7 +13,7 @@ var _styles = require("@mui/material/styles");
 var _utils = require("../../utils");
 var _useGridRootProps = require("../../utils/useGridRootProps");
 var _useGridPrivateApiContext = require("../../utils/useGridPrivateApiContext");
-var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
+var _useGridEvent = require("../../utils/useGridEvent");
 var _GridColumnHeaderItem = require("../../../components/columnHeaders/GridColumnHeaderItem");
 var _gridDimensionsSelectors = require("../dimensions/gridDimensionsSelectors");
 var _virtualization = require("../virtualization");
@@ -81,10 +81,10 @@ const useGridColumnHeaders = props => {
       lastColumnIndex: visibleColumns.length
     } : null;
   }, [pinnedColumns.right.length, visibleColumns.length]);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnResizeStart', handleColumnResizeStart);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnResizeStop', handleColumnResizeStop);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnHeaderDragStart', handleColumnReorderStart);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnHeaderDragEnd', handleColumnReorderStop);
+  (0, _useGridEvent.useGridEvent)(apiRef, 'columnResizeStart', handleColumnResizeStart);
+  (0, _useGridEvent.useGridEvent)(apiRef, 'columnResizeStop', handleColumnResizeStop);
+  (0, _useGridEvent.useGridEvent)(apiRef, 'columnHeaderDragStart', handleColumnReorderStart);
+  (0, _useGridEvent.useGridEvent)(apiRef, 'columnHeaderDragEnd', handleColumnReorderStop);
 
   // Helper for computation common between getColumnHeaders and getColumnGroupHeaders
   const getColumnsToRender = params => {

package/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/hooks/features/columnMenu/useGridColumnMenu.js

@@ -107,8 +107,8 @@ const useGridColumnMenu = apiRef => {
     toggleColumnMenu
   };
   (0, _utils.useGridApiMethod)(apiRef, columnMenuApi, 'public');
-  (0, _utils.useGridApiEventHandler)(apiRef, 'columnResizeStart', hideColumnMenu);
-  (0, _utils.useGridApiEventHandler)(apiRef, 'virtualScrollerWheel', apiRef.current.hideColumnMenu);
-  (0, _utils.useGridApiEventHandler)(apiRef, 'virtualScrollerTouchMove', apiRef.current.hideColumnMenu);
+  (0, _utils.useGridEvent)(apiRef, 'columnResizeStart', hideColumnMenu);
+  (0, _utils.useGridEvent)(apiRef, 'virtualScrollerWheel', apiRef.current.hideColumnMenu);
+  (0, _utils.useGridEvent)(apiRef, 'virtualScrollerTouchMove', apiRef.current.hideColumnMenu);
 };
 exports.useGridColumnMenu = useGridColumnMenu;

package/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/hooks/features/columnResize/useGridColumnResize.js

@@ -556,12 +556,12 @@ const useGridColumnResize = (apiRef, props) => {
   (0, _utils.useGridApiMethod)(apiRef, {
     autosizeColumns
   }, 'public');
-  (0, _utils.useGridApiEventHandler)(apiRef, 'columnResizeStop', handleResizeStop);
-  (0, _utils.useGridApiEventHandler)(apiRef, 'columnResizeStart', handleResizeStart);
-  (0, _utils.useGridApiEventHandler)(apiRef, 'columnSeparatorMouseDown', handleColumnResizeMouseDown);
-  (0, _utils.useGridApiEventHandler)(apiRef, 'columnSeparatorDoubleClick', handleColumnSeparatorDoubleClick);
-  (0, _utils.useGridApiOptionHandler)(apiRef, 'columnResize', props.onColumnResize);
-  (0, _utils.useGridApiOptionHandler)(apiRef, 'columnWidthChange', props.onColumnWidthChange);
+  (0, _utils.useGridEvent)(apiRef, 'columnResizeStop', handleResizeStop);
+  (0, _utils.useGridEvent)(apiRef, 'columnResizeStart', handleResizeStart);
+  (0, _utils.useGridEvent)(apiRef, 'columnSeparatorMouseDown', handleColumnResizeMouseDown);
+  (0, _utils.useGridEvent)(apiRef, 'columnSeparatorDoubleClick', handleColumnSeparatorDoubleClick);
+  (0, _utils.useGridEventPriority)(apiRef, 'columnResize', props.onColumnResize);
+  (0, _utils.useGridEventPriority)(apiRef, 'columnWidthChange', props.onColumnWidthChange);
 };
 exports.useGridColumnResize = useGridColumnResize;
 function updateProperty(element, property, delta) {

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");
@@ -261,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();