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

package/components/toolbarV8/GridToolbar.d.ts

@@ -4,8 +4,13 @@ interface GridToolbarInternalProps {
   additionalExportMenuItems?: (onMenuItemClick: () => void) => React.ReactNode;
 }
 export type GridToolbarProps = GridSlotProps['toolbar'] & GridToolbarInternalProps;
+declare function GridToolbarDivider(props: GridSlotProps['baseDivider']): React.JSX.Element;
+declare namespace GridToolbarDivider {
+  var propTypes: any;
+}
+declare function GridToolbarLabel(props: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
 declare function GridToolbar(props: GridToolbarProps): React.JSX.Element;
 declare namespace GridToolbar {
   var propTypes: any;
 }
-export { GridToolbar };
+export { GridToolbar, GridToolbarDivider, GridToolbarLabel };

package/components/toolbarV8/GridToolbar.js

@@ -1,16 +1,20 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GridToolbar = GridToolbar;
+exports.GridToolbarDivider = GridToolbarDivider;
+exports.GridToolbarLabel = GridToolbarLabel;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _system = require("@mui/system");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _GridMenu = require("../menu/GridMenu");
 var _Toolbar = require("./Toolbar");
 var _ToolbarButton = require("./ToolbarButton");
@@ -22,7 +26,20 @@ var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _assert = require("../../utils/assert");
 var _cssVariables = require("../../constants/cssVariables");
+var _gridClasses = require("../../constants/gridClasses");
 var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["className"],
+  _excluded2 = ["className"];
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    divider: ['toolbarDivider'],
+    label: ['toolbarLabel']
+  };
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
+};
 const Divider = (0, _system.styled)(_assert.NotRendered, {
   name: 'MuiDataGrid',
   slot: 'ToolbarDivider'
@@ -30,6 +47,44 @@ const Divider = (0, _system.styled)(_assert.NotRendered, {
   height: '50%',
   margin: _cssVariables.vars.spacing(0, 0.5)
 });
+const Label = (0, _system.styled)('span', {
+  name: 'MuiDataGrid',
+  slot: 'ToolbarLabel'
+})({
+  flex: 1,
+  font: _cssVariables.vars.typography.font.large,
+  fontWeight: _cssVariables.vars.typography.fontWeight.medium,
+  margin: _cssVariables.vars.spacing(0, 0.5),
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap'
+});
+function GridToolbarDivider(props) {
+  const other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const classes = useUtilityClasses(rootProps);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Divider, (0, _extends2.default)({
+    as: rootProps.slots.baseDivider,
+    orientation: "vertical",
+    className: classes.divider
+  }, other));
+}
+process.env.NODE_ENV !== "production" ? GridToolbarDivider.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  className: _propTypes.default.string,
+  orientation: _propTypes.default.oneOf(['horizontal', 'vertical'])
+} : void 0;
+function GridToolbarLabel(props) {
+  const other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded2);
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const classes = useUtilityClasses(rootProps);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, (0, _extends2.default)({
+    className: classes.label
+  }, other));
+}
 function GridToolbar(props) {
   const {
     showQuickFilter = true,
@@ -47,7 +102,9 @@ function GridToolbar(props) {
   const showExportMenu = !csvOptions?.disableToolbarButton || !printOptions?.disableToolbarButton || additionalExportMenuItems;
   const closeExportMenu = () => setExportMenuOpen(false);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Toolbar.Toolbar, {
-    children: [!rootProps.disableColumnSelector && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, {
+    children: [rootProps.label && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridToolbarLabel, {
+      children: rootProps.label
+    }), !rootProps.disableColumnSelector && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, {
       title: apiRef.current.getLocaleText('toolbarColumns'),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_columnsPanel.ColumnsPanelTrigger, {
         render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolbarButton.ToolbarButton, {}),
@@ -59,7 +116,6 @@ function GridToolbar(props) {
       title: apiRef.current.getLocaleText('toolbarFilters'),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_filterPanel.FilterPanelTrigger, {
         render: (triggerProps, state) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolbarButton.ToolbarButton, (0, _extends2.default)({}, triggerProps, {
-          color: "default",
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseBadge, {
             badgeContent: state.filterCount,
             color: "primary",
@@ -70,10 +126,7 @@ function GridToolbar(props) {
           })
         }))
       })
-    }), showExportMenu && (!rootProps.disableColumnFilter || !rootProps.disableColumnSelector) && /*#__PURE__*/(0, _jsxRuntime.jsx)(Divider, {
-      as: rootProps.slots.baseDivider,
-      orientation: "vertical"
-    }), showExportMenu && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    }), showExportMenu && (!rootProps.disableColumnFilter || !rootProps.disableColumnSelector) && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridToolbarDivider, {}), showExportMenu && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, {
         title: apiRef.current.getLocaleText('toolbarExport'),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolbarButton.ToolbarButton, {
@@ -91,7 +144,7 @@ function GridToolbar(props) {
         target: exportMenuTriggerRef.current,
         open: exportMenuOpen,
         onClose: closeExportMenu,
-        position: "bottom-start",
+        position: "bottom-end",
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseMenuList, (0, _extends2.default)({
           id: exportMenuId,
           "aria-labelledby": exportMenuTriggerId,
@@ -110,7 +163,9 @@ function GridToolbar(props) {
           }), additionalExportMenuItems?.(closeExportMenu)]
         }))
       })]
-    }), showQuickFilter && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarQuickFilter.GridToolbarQuickFilter, (0, _extends2.default)({}, quickFilterProps))]
+    }), showQuickFilter && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(GridToolbarDivider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarQuickFilter.GridToolbarQuickFilter, (0, _extends2.default)({}, quickFilterProps))]
+    })]
   });
 }
 process.env.NODE_ENV !== "production" ? GridToolbar.propTypes = {

package/components/toolbarV8/Toolbar.js

@@ -37,6 +37,7 @@ const ToolbarRoot = (0, _system.styled)('div', {
   flex: 0,
   display: 'flex',
   alignItems: 'center',
+  justifyContent: 'end',
   gap: _cssVariables.vars.spacing(0.25),
   padding: _cssVariables.vars.spacing(0.75),
   minHeight: 52,
@@ -158,6 +159,7 @@ const Toolbar = exports.Toolbar = (0, _forwardRef.forwardRef)(function Toolbar(p
   const element = (0, _useGridComponentRenderer.useGridComponentRenderer)(ToolbarRoot, render, (0, _extends2.default)({
     role: 'toolbar',
     'aria-orientation': 'horizontal',
+    'aria-label': rootProps.label || undefined,
     className: (0, _clsx.default)(classes.root, className),
     ownerState: rootProps
   }, other, {

package/components/toolbarV8/ToolbarButton.js

@@ -96,117 +96,20 @@ process.env.NODE_ENV !== "production" ? ToolbarButton.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
-  /**
-   * A ref for imperative actions.
-   * It currently only supports `focusVisible()` action.
-   */
-  action: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
-    current: _propTypes.default.shape({
-      focusVisible: _propTypes.default.func.isRequired
-    })
-  })]),
-  /**
-   * If `true`, the ripples are centered.
-   * They won't start at the cursor interaction position.
-   * @default false
-   */
-  centerRipple: _propTypes.default.bool,
   className: _propTypes.default.string,
-  /**
-   * The color of the component.
-   * It supports both default and custom theme colors, which can be added as shown in the
-   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
-   */
   color: _propTypes.default.oneOf(['default', 'inherit', 'primary']),
-  component: _propTypes.default.elementType,
-  /**
-   * If `true`, the component is disabled.
-   */
   disabled: _propTypes.default.bool,
-  /**
-   * If `true`, the  keyboard focus ripple is disabled.
-   * @default false
-   */
-  disableFocusRipple: _propTypes.default.bool,
-  /**
-   * If `true`, the ripple effect is disabled.
-   *
-   * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
-   * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
-   * @default false
-   */
-  disableRipple: _propTypes.default.bool,
-  /**
-   * If `true`, the touch ripple effect is disabled.
-   * @default false
-   */
-  disableTouchRipple: _propTypes.default.bool,
-  /**
-   * If given, uses a negative margin to counteract the padding on one
-   * side (this is often helpful for aligning the left or right
-   * side of the icon with content above or below, without ruining the border
-   * size and shape).
-   */
   edge: _propTypes.default.oneOf(['end', 'start', false]),
-  /**
-   * If `true`, the base button will have a keyboard focus ripple.
-   * @default false
-   */
-  focusRipple: _propTypes.default.bool,
-  /**
-   * This prop can help identify which element has keyboard focus.
-   * The class name will be applied when the element gains the focus through keyboard interaction.
-   * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
-   * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
-   * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
-   * if needed.
-   */
-  focusVisibleClassName: _propTypes.default.string,
+  id: _propTypes.default.string,
   label: _propTypes.default.string,
-  /**
-   * The component used to render a link when the `href` prop is provided.
-   * @default 'a'
-   */
-  LinkComponent: _propTypes.default.elementType,
-  /**
-   * If `true`, the loading indicator is visible and the button is disabled.
-   * If `true | false`, the loading wrapper is always rendered before the children to prevent [Google Translation Crash](https://github.com/mui/material-ui/issues/27853).
-   * @default null
-   */
-  loading: _propTypes.default.bool,
-  /**
-   * Element placed before the children if the button is in loading state.
-   * The node should contain an element with `role="progressbar"` with an accessible name.
-   * By default, it renders a `CircularProgress` that is labeled by the button itself.
-   * @default <CircularProgress color="inherit" size={16} />
-   */
-  loadingIndicator: _propTypes.default.node,
-  /**
-   * Callback fired when the component is focused with a keyboard.
-   * We trigger a `onFocus` callback too.
-   */
-  onFocusVisible: _propTypes.default.func,
   /**
    * A function to customize rendering of the component.
    */
   render: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
-  /**
-   * The size of the component.
-   * `small` is equivalent to the dense button styling.
-   */
+  role: _propTypes.default.string,
   size: _propTypes.default.oneOf(['large', 'medium', 'small']),
   style: _propTypes.default.object,
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
   tabIndex: _propTypes.default.number,
-  /**
-   * Props applied to the `TouchRipple` element.
-   */
-  TouchRippleProps: _propTypes.default.object,
-  /**
-   * A ref that points to the `TouchRipple` element.
-   */
+  title: _propTypes.default.string,
   touchRippleRef: _propTypes.default.any
 } : void 0;

package/components/virtualization/GridVirtualScrollbar.js

@@ -135,7 +135,7 @@ const GridVirtualScrollbar = exports.GridVirtualScrollbar = (0, _forwardRef.forw
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
     ref: (0, _useForkRef.default)(ref, scrollbarRef),
     className: classes.root,
-    style: props.position === 'vertical' && rootProps.unstable_listView ? {
+    style: props.position === 'vertical' && rootProps.listView ? {
       height: '100%',
       top: 0
     } : undefined,

package/components/virtualization/GridVirtualScroller.js

@@ -110,7 +110,7 @@ function GridVirtualScroller(props) {
     }, getScrollerProps(), {
       ownerState: ownerState,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridTopContainer.GridTopContainer, {
-        children: [!rootProps.unstable_listView && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridHeaders.GridHeaders, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.pinnedRows, {
+        children: [!rootProps.listView && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridHeaders.GridHeaders, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.pinnedRows, {
           position: "top",
           virtualScroller: virtualScroller
         })]
@@ -128,7 +128,7 @@ function GridVirtualScroller(props) {
           virtualScroller: virtualScroller
         })
       })]
-    })), hasScrollX && !rootProps.unstable_listView && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollbar.GridVirtualScrollbar, (0, _extends2.default)({
+    })), hasScrollX && !rootProps.listView && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollbar.GridVirtualScrollbar, (0, _extends2.default)({
       position: "horizontal"
     }, getScrollbarHorizontalProps())), hasScrollY && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollbar.GridVirtualScrollbar, (0, _extends2.default)({
       position: "vertical"

package/constants/cssVariables.d.ts

@@ -43,6 +43,7 @@ declare const keys: {
     readonly font: {
       readonly body: "--DataGrid-t-typography-font-body";
       readonly small: "--DataGrid-t-typography-font-small";
+      readonly large: "--DataGrid-t-typography-font-large";
     };
     readonly fontFamily: {
       readonly base: "--DataGrid-t-typography-font-family-base";
@@ -134,6 +135,7 @@ export declare const vars: {
     readonly font: {
       readonly body: "--DataGrid-t-typography-font-body";
       readonly small: "--DataGrid-t-typography-font-small";
+      readonly large: "--DataGrid-t-typography-font-large";
     };
     readonly fontFamily: {
       readonly base: "--DataGrid-t-typography-font-family-base";
@@ -222,6 +224,7 @@ export declare const vars: {
       readonly font: {
         readonly body: "--DataGrid-t-typography-font-body";
         readonly small: "--DataGrid-t-typography-font-small";
+        readonly large: "--DataGrid-t-typography-font-large";
       };
       readonly fontFamily: {
         readonly base: "--DataGrid-t-typography-font-family-base";

package/constants/cssVariables.js

@@ -73,7 +73,8 @@ const keys = {
   typography: {
     font: {
       body: '--DataGrid-t-typography-font-body',
-      small: '--DataGrid-t-typography-font-small'
+      small: '--DataGrid-t-typography-font-small',
+      large: '--DataGrid-t-typography-font-large'
     },
     fontFamily: {
       base: '--DataGrid-t-typography-font-family-base'

package/constants/gridClasses.d.ts

@@ -598,6 +598,14 @@ export interface GridClasses {
    * Styles applied to the toolbar root element.
    */
   toolbar: string;
+  /**
+   * Styles applied to the toolbar label element.
+   */
+  toolbarLabel: string;
+  /**
+   * Styles applied to the toolbar divider element.
+   */
+  toolbarDivider: string;
   /**
    * Styles applied to the shadow scroll area element.
    * @ignore - do not document.

package/constants/gridClasses.js

@@ -9,4 +9,4 @@ var _utils = require("@mui/utils");
 function getDataGridUtilityClass(slot) {
   return (0, _utils.unstable_generateUtilityClass)('MuiDataGrid', slot);
 }
-const gridClasses = exports.gridClasses = (0, _utils.unstable_generateUtilityClasses)('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'aggregationRowOverlayWrapper', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeader--lastUnpinned', 'columnHeader--siblingFocused', 'columnHeader--filter', 'columnHeaderFilterInput', 'columnHeaderFilterOperatorLabel', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'columnsManagementScrollArea', 'columnsManagementEmptyText', 'container--top', 'container--bottom', 'detailPanel', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hiddenContent', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--borderBottom', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortIcon', 'shadowScrollArea', 'toolbarContainer', 'toolbarFilterList', 'toolbarPromptControl', 'toolbarPromptControl--recording', 'toolbarPromptControlRecordingIndicator', 'toolbarPromptControlRecordButton', 'toolbarPromptControlSendButton', 'toolbarQuickFilter', 'toolbarQuickFilterTrigger', 'toolbarQuickFilterControl', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'groupingCriteriaCellLoadingContainer', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom']);
+const gridClasses = exports.gridClasses = (0, _utils.unstable_generateUtilityClasses)('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'aggregationRowOverlayWrapper', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeader--lastUnpinned', 'columnHeader--siblingFocused', 'columnHeader--filter', 'columnHeaderFilterInput', 'columnHeaderFilterOperatorLabel', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'columnsManagementScrollArea', 'columnsManagementEmptyText', 'container--top', 'container--bottom', 'detailPanel', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hiddenContent', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--borderBottom', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortIcon', 'shadowScrollArea', 'toolbarContainer', 'toolbar', 'toolbarLabel', 'toolbarDivider', 'toolbarFilterList', 'toolbarPromptControl', 'toolbarPromptControl--recording', 'toolbarPromptControlRecordingIndicator', 'toolbarPromptControlRecordButton', 'toolbarPromptControlSendButton', 'toolbarQuickFilter', 'toolbarQuickFilterTrigger', 'toolbarQuickFilterControl', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'groupingCriteriaCellLoadingContainer', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom']);

package/esm/DataGrid/DataGrid.js

@@ -59,11 +59,11 @@ DataGridRaw.propTypes = {
     current: PropTypes.object
   }),
   /**
-   * The label of the Data Grid.
+   * The `aria-label` of the Data Grid.
    */
   'aria-label': PropTypes.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': PropTypes.string,
   /**
@@ -360,6 +360,12 @@ DataGridRaw.propTypes = {
    * @default false
    */
   keepNonExistentRowsSelected: PropTypes.bool,
+  /**
+   * 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: PropTypes.string,
   /**
    * If `true`, a loading overlay is displayed.
    * @default false

package/esm/DataGrid/useDataGridProps.js

@@ -15,7 +15,7 @@ const DATA_GRID_FORCED_PROPS = {
   disableColumnReorder: true,
   keepColumnPositionIfDraggedOutside: false,
   signature: 'DataGrid',
-  unstable_listView: false
+  listView: false
 };
 const getDataGridForcedProps = themedProps => _extends({}, DATA_GRID_FORCED_PROPS, themedProps.dataSource ? {
   filterMode: 'server',

package/esm/components/GridScrollArea.js

@@ -10,7 +10,7 @@ import { fastMemo } from '@mui/x-internals/fastMemo';
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
 import { getDataGridUtilityClass, gridClasses } from "../constants/index.js";
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
-import { useGridApiEventHandler } from "../hooks/utils/useGridApiEventHandler.js";
+import { useGridEvent } from "../hooks/utils/useGridEvent.js";
 import { useGridSelector } from "../hooks/utils/useGridSelector.js";
 import { gridDimensionsSelector, gridColumnsTotalWidthSelector } from "../hooks/features/dimensions/gridDimensionsSelectors.js";
 import { gridDensityFactorSelector } from "../hooks/features/density/densitySelector.js";
@@ -63,8 +63,8 @@ const offsetSelector = createSelector(gridDimensionsSelector, (dimensions, direc
 function GridScrollAreaWrapper(props) {
   const apiRef = useGridApiContext();
   const [dragging, setDragging] = React.useState(false);
-  useGridApiEventHandler(apiRef, 'columnHeaderDragStart', () => setDragging(true));
-  useGridApiEventHandler(apiRef, 'columnHeaderDragEnd', () => setDragging(false));
+  useGridEvent(apiRef, 'columnHeaderDragStart', () => setDragging(true));
+  useGridEvent(apiRef, 'columnHeaderDragEnd', () => setDragging(false));
   if (!dragging) {
     return null;
   }
@@ -136,7 +136,7 @@ function GridScrollAreaContent(props) {
       });
     });
   });
-  useGridApiEventHandler(apiRef, 'scrollPositionChange', handleScrolling);
+  useGridEvent(apiRef, 'scrollPositionChange', handleScrolling);
   if (!canScrollMore) {
     return null;
   }

package/esm/components/GridSkeletonLoadingOverlay.js

@@ -10,7 +10,7 @@ import { useRtl } from '@mui/system/RtlProvider';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
-import { gridColumnPositionsSelector, gridDimensionsSelector, gridVisibleColumnDefinitionsSelector, gridVisiblePinnedColumnDefinitionsSelector, useGridApiEventHandler, useGridSelector } from "../hooks/index.js";
+import { gridColumnPositionsSelector, gridDimensionsSelector, gridVisibleColumnDefinitionsSelector, gridVisiblePinnedColumnDefinitionsSelector, useGridEvent, useGridSelector } from "../hooks/index.js";
 import { PinnedColumnPosition } from "../internals/constants.js";
 import { gridColumnsTotalWidthSelector } from "../hooks/features/dimensions/gridDimensionsSelectors.js";
 import { getDataGridUtilityClass, gridClasses } from "../constants/gridClasses.js";
@@ -179,7 +179,7 @@ export const GridSkeletonLoadingOverlayInner = forwardRef(function GridSkeletonL
       });
     }
   };
-  useGridApiEventHandler(apiRef, 'columnResize', handleColumnResize);
+  useGridEvent(apiRef, 'columnResize', handleColumnResize);
   return /*#__PURE__*/_jsx(SkeletonOverlay, _extends({
     className: classes.root
   }, rest, {

package/esm/components/cell/GridActionsCellItem.d.ts

@@ -18,16 +18,7 @@ export type GridActionsCellItemProps = GridActionsCellItemCommonProps & (({
   closeMenuOnClick?: boolean;
   closeMenu?: () => void;
 } & Omit<GridSlotProps['baseMenuItem'], 'component'>));
-declare const GridActionsCellItem: React.ForwardRefExoticComponent<GridActionsCellItemProps> | React.ForwardRefExoticComponent<(Omit<GridActionsCellItemCommonProps & {
-  showInMenu?: false;
-  icon: React.ReactElement<any>;
-} & Omit<Omit<import("../../models/gridBaseSlots").ButtonProps, "startIcon"> & {
-  label?: string;
-  color?: "default" | "inherit" | "primary";
-  edge?: "start" | "end" | false;
-} & import("../..").BaseIconButtonPropsOverrides & import("@mui/material").IconButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "color" | "size" | "style" | "disabled" | "action" | "className" | "tabIndex" | "children" | "loading" | "sx" | "classes" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "loadingIndicator"> & {
-  component?: React.ElementType;
-}, "component">, "ref"> | Omit<GridActionsCellItemCommonProps & {
+declare const GridActionsCellItem: React.ForwardRefExoticComponent<GridActionsCellItemProps> | React.ForwardRefExoticComponent<((GridActionsCellItemCommonProps & {
   showInMenu: true;
   /**
    * If false, the menu will not close when this item is clicked.
@@ -35,7 +26,27 @@ declare const GridActionsCellItem: React.ForwardRefExoticComponent<GridActionsCe
    */
   closeMenuOnClick?: boolean;
   closeMenu?: () => void;
-} & Omit<import("../../models/gridBaseSlots").MenuItemProps & import("../..").BaseMenuItemPropsOverrides & import("@mui/material").MenuItemOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "style" | "dense" | "disabled" | "action" | "selected" | "autoFocus" | "className" | "tabIndex" | "children" | "sx" | "classes" | "disableGutters" | "divider" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef"> & {
-  component?: React.ElementType;
-}, "component">, "ref">) & React.RefAttributes<HTMLElement>>;
+} & Omit<React.DOMAttributes<HTMLElement> & {
+  [k: `aria-${string}`]: any;
+  [k: `data-${string}`]: any;
+  className?: string;
+  style?: React.CSSProperties;
+} & {
+  autoFocus?: boolean;
+  children?: React.ReactNode;
+  inert?: boolean;
+  disabled?: boolean;
+  iconStart?: React.ReactNode;
+  iconEnd?: React.ReactNode;
+  selected?: boolean;
+  value?: number | string | readonly string[];
+  style?: React.CSSProperties;
+} & import("@mui/x-data-grid").BaseMenuItemPropsOverrides, "component">) | Omit<GridActionsCellItemCommonProps & {
+  showInMenu?: false;
+  icon: React.ReactElement<any>;
+} & Omit<Omit<import("../../models/gridBaseSlots").ButtonProps, "startIcon"> & {
+  label?: string;
+  color?: "default" | "inherit" | "primary";
+  edge?: "start" | "end" | false;
+} & import("@mui/x-data-grid").BaseIconButtonPropsOverrides, "component">, "ref">) & React.RefAttributes<HTMLElement>>;
 export { GridActionsCellItem };

package/esm/components/cell/GridActionsCellItem.js

@@ -6,8 +6,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
-
-// FIXME(v8:romgrk): Make parametric
 import { jsx as _jsx } from "react/jsx-runtime";
 const GridActionsCellItem = forwardRef((props, ref) => {
   const rootProps = useGridRootProps();
@@ -61,12 +59,15 @@ process.env.NODE_ENV !== "production" ? GridActionsCellItem.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  className: PropTypes.string,
   /**
    * from https://mui.com/material-ui/api/button-base/#ButtonBase-prop-component
    */
   component: PropTypes.elementType,
+  disabled: PropTypes.bool,
   icon: PropTypes.element,
   label: PropTypes.string.isRequired,
-  showInMenu: PropTypes.bool
+  showInMenu: PropTypes.bool,
+  style: PropTypes.object
 } : void 0;
 export { GridActionsCellItem };

package/esm/components/columnSelection/GridCellCheckboxRenderer.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
 import type { GridRenderCellParams } from '../../models/params/gridCellParams';
-declare const GridCellCheckboxForwardRef: React.ForwardRefExoticComponent<GridRenderCellParams<any, any, any, import("../..").GridTreeNodeWithRender>> | React.ForwardRefExoticComponent<GridRenderCellParams<any, any, any, import("../..").GridTreeNodeWithRender> & React.RefAttributes<HTMLInputElement>>;
+declare const GridCellCheckboxForwardRef: React.ForwardRefExoticComponent<GridRenderCellParams<any, any, any, import("@mui/x-data-grid").GridTreeNodeWithRender>> | React.ForwardRefExoticComponent<GridRenderCellParams<any, any, any, import("@mui/x-data-grid").GridTreeNodeWithRender> & React.RefAttributes<HTMLInputElement>>;
 export { GridCellCheckboxForwardRef };
-export declare const GridCellCheckboxRenderer: React.ForwardRefExoticComponent<GridRenderCellParams<any, any, any, import("../..").GridTreeNodeWithRender>> | React.ForwardRefExoticComponent<GridRenderCellParams<any, any, any, import("../..").GridTreeNodeWithRender> & React.RefAttributes<HTMLInputElement>>;
+export declare const GridCellCheckboxRenderer: React.ForwardRefExoticComponent<GridRenderCellParams<any, any, any, import("@mui/x-data-grid").GridTreeNodeWithRender>> | React.ForwardRefExoticComponent<GridRenderCellParams<any, any, any, import("@mui/x-data-grid").GridTreeNodeWithRender> & React.RefAttributes<HTMLInputElement>>;

package/esm/components/columnSelection/GridHeaderCheckbox.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import type { GridColumnHeaderParams } from '../../models/params/gridColumnHeaderParams';
-declare const GridHeaderCheckbox: React.ForwardRefExoticComponent<GridColumnHeaderParams<import("../..").GridValidRowModel, any, any>> | React.ForwardRefExoticComponent<GridColumnHeaderParams<import("../..").GridValidRowModel, any, any> & React.RefAttributes<HTMLButtonElement>>;
+declare const GridHeaderCheckbox: React.ForwardRefExoticComponent<GridColumnHeaderParams<import("@mui/x-data-grid").GridValidRowModel, any, any>> | React.ForwardRefExoticComponent<GridColumnHeaderParams<import("@mui/x-data-grid").GridValidRowModel, any, any> & React.RefAttributes<HTMLButtonElement>>;
 export { GridHeaderCheckbox };

package/esm/components/columnsManagement/GridColumnsManagement.js

@@ -230,30 +230,7 @@ process.env.NODE_ENV !== "production" ? GridColumnsManagement.propTypes = {
    * @returns {GridColDef['field'][]} The list of togglable columns' field names.
    */
   getTogglableColumns: PropTypes.func,
-  searchInputProps: PropTypes.shape({
-    autoComplete: PropTypes.string,
-    className: PropTypes.string,
-    color: PropTypes.oneOf(['error', 'primary']),
-    disabled: PropTypes.bool,
-    error: PropTypes.bool,
-    fullWidth: PropTypes.bool,
-    helperText: PropTypes.string,
-    id: PropTypes.string,
-    inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-      current: PropTypes.object
-    })]),
-    label: PropTypes.node,
-    onChange: PropTypes.func,
-    onKeyDown: PropTypes.func,
-    placeholder: PropTypes.string,
-    role: PropTypes.string,
-    size: PropTypes.oneOf(['medium', 'small']),
-    slotProps: PropTypes.object,
-    style: PropTypes.object,
-    tabIndex: PropTypes.number,
-    type: PropTypes.oneOfType([PropTypes.oneOf(['button', 'checkbox', 'color', 'date', 'datetime-local', 'email', 'file', 'hidden', 'image', 'month', 'number', 'password', 'radio', 'range', 'reset', 'search', 'submit', 'tel', 'text', 'time', 'url', 'week']), PropTypes.object]),
-    value: PropTypes.string
-  }),
+  searchInputProps: PropTypes.object,
   searchPredicate: PropTypes.func,
   sort: PropTypes.oneOf(['asc', 'desc']),
   /**