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

package/CHANGELOG.md

@@ -5,6 +5,241 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.0.0-beta.3
+
+_Apr 3, 2025_
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚫 Removed `react-spring` as a dependency of `@mui/x-charts`
+- 📦 Data Grid list view feature is now stable
+- 💫 Support title in Data Grid
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+Team members who have contributed to this release:
+@bernardobelchior, @cherniavskii, @flaviendelangle, @JCQuintas, @KenanYusuf, @LukasTy, @MBilalShafi, @michelengelen, @oliviertassinari, @noraleonte, @romgrk, @alexfauquette.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### Breaking changes
+
+- The list view feature and its related props are now stable.
+
+  The `unstable_listColumn` prop has been renamed to `listViewColumn`.
+
+  The `GridListColDef` type has been renamed to `GridListViewColDef`.
+
+  ```diff
+  -const listViewColDef: GridListColDef = {
+  +const listViewColDef: GridListViewColDef = {
+     field: 'listColumn',
+     renderCell: ListViewCell,
+   };
+
+   <DataGridPro
+  -  unstable_listView
+  -  unstable_listColumn={listViewColDef}
+  +  listView
+  +  listViewColumn={listViewColDef}
+   />
+  ```
+
+- The `useGridApiEventHandler()` hook has been renamed to `useGridEvent()`.
+- The `useGridApiOptionHandler()` hook has been renamed to `useGridEventPriority()`.
+
+#### `@mui/x-data-grid@8.0.0-beta.3`
+
+- [DataGrid] Fix "is any of" autocomplete rendering (#17226) @KenanYusuf
+- [DataGrid] Rename `useGridApiEventHandler()` to `useGridEvent()` (#17159) @romgrk
+- [DataGrid] Support adding a label to the grid (#17147) @KenanYusuf
+- [DataGrid] Refactor: remove material typings (#17119) @romgrk
+
+#### `@mui/x-data-grid-pro@8.0.0-beta.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.0.0-beta.3`, plus:
+
+- [DataGridPro] Make list view feature stable (#17217) @KenanYusuf
+- [DataGridPro] Always refetch lazy-loading rows (#16827) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@8.0.0-beta.3` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.0.0-beta.3`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.0.0-beta.3`
+
+- [pickers] Add new `nextOrAccept` action bar action (#17037) @flaviendelangle
+- [pickers] Improve the Multi Section Digital Clock scrollbar thickness (#16774) @oliviertassinari
+- [TimePicker] Align the Digital Clock scrollbar thickness (#17203) @LukasTy
+
+#### `@mui/x-date-pickers-pro@8.0.0-beta.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.0.0-beta.3`.
+
+### Charts
+
+#### Breaking changes
+
+- Removed `react-spring` as a dependency of `@mui/x-charts`.
+  A consequence of this change is that the props of some slots have been changed because the `SpringValue` wrapper has been removed. The affected slots and props are:
+
+  - the type of the `x`, `y`, `width` and `height` props of the `bar` slot are now `number`;
+  - the type of `startAngle`, `endAngle`, `innerRadius`, `outerRadius`, `arcLabelRadius`, `cornerRadius` and `paddingAngle` props of `pieArc` and `pieArcLabel` slot are now `number`.
+
+  Additionally, the `pieArc` slot now receives a `skipAnimation` prop to configure whether animations should be enabled or disabled.
+
+- Tick labels in the y-axis of cartesian charts will now have an ellipsis applied to prevent overflow.
+  If your tick labels are being clipped sooner than you would like, you can increase the y-axis size by increasing its width property.
+
+- The tooltip DOM structure is modified to improve accessibility. If you relied on it to apply some style or run tests, you might be impacted by this modification.
+  - The axis tooltip displays a table per axis with the axis value in a caption.
+  - Cells containing the series label and the color mark got merged in a th cell.
+
+#### `@mui/x-charts@8.0.0-beta.3`
+
+- [charts] Adjust color palettes (#17209) @noraleonte
+- [charts] Allow multiple axes in the tooltip (#17058) @alexfauquette
+- [charts] Improve custom legend docs (#17231) @JCQuintas
+- [charts] Fix crash when item shown in tooltip is unmounted (#17169) @bernardobelchior
+- [charts] Migrate some animations from `react-spring` (#16961) @bernardobelchior
+- [charts] Remove `react-spring` (#17123) @bernardobelchior
+- [charts] Fix y-axis tick label overflow (#16846) @bernardobelchior
+
+#### `@mui/x-charts-pro@8.0.0-beta.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.0.0-beta.3`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.0.0-beta.3`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.0.0-beta.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.0.0-beta.3`.
+
+### `@mui/x-codemod@8.0.0-beta.3`
+
+- [codemod] Add `listView` prop rename codemod (#17220) @MBilalShafi
+
+### Docs
+
+- [docs] Add "Usage with Material UI v5/v6" guide (#17164) @cherniavskii
+- [docs] Fix 301 link @oliviertassinari
+- [docs] Fix redirection getting-started (#17200) @oliviertassinari
+- [docs] Sync Stack Overflow docs with reality (#17198) @oliviertassinari
+- [docs] Update Localization Provider JSDoc link (#17207) @LukasTy
+
+### Core
+
+- [core] Cleanup `@mui` dependency versions (#17160) @LukasTy
+- [core] Sync scorecards.yml across codebase @oliviertassinari
+- [core] Revert upgrade to React 19.1 (#17206) @bernardobelchior
+- [code-infra] Fix `test:unit` warning (#17224) @JCQuintas
+- [code-infra] Fix pickers failing test after clock=fake removal (#17202) @JCQuintas
+- [code-infra] Remove clock=fake from `describeValidation` (#17150) @JCQuintas
+- [code-infra] Remove clock=fake from `describeValue` (#17199) @JCQuintas
+- [infra] Add write permission for actions in issue status label handler (#17161) @michelengelen
+
+## 8.0.0-beta.2
+
+_Mar 27, 2025_
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 🔍 Update the Data Grid quick filter to be collapsed when not in use
+- 🐞 Bugfixes
+
+Special thanks go out to the community members for their valuable contributions:
+@lhilgert9.
+Following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @flaviendelangle, @hasdfa, @JCQuintas, @KenanYusuf, @LukasTy, @MBilalShafi, @michelengelen, @mnajdova, @romgrk.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.0.0-beta.2`
+
+- [DataGrid] Fix error caused by trying to render rows that are not in the state anymore (#17057) @arminmeh
+- [DataGrid] Refactor: remove more material (#16922) @romgrk
+- [DataGrid] Update Quick Filter component to be expandable (#16862) @KenanYusuf
+- [DataGrid] Fix crash when used with `@mui/styled-engine-sc` (#17154) @KenanYusuf
+
+#### `@mui/x-data-grid-pro@8.0.0-beta.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.0.0-beta.2`, plus:
+
+- [DataGridPro] Data source: Allow expanding groups with unknown children (#17144) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@8.0.0-beta.2` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.0.0-beta.2`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.0.0-beta.2`
+
+- [fields] Extract the props of each field slot into a standalone hook for easier re-use (#17114) @flaviendelangle
+- [pickers] Fix visual regression in Date Range Calendar's day (#17148) @flaviendelangle
+- [pickers] Remove all code duplication to apply default values to validation props (#17038) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@8.0.0-beta.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.0.0-beta.2`.
+
+### Charts
+
+#### `@mui/x-charts@8.0.0-beta.2`
+
+- [charts] Memoize axes and series with default (#17156) @alexfauquette
+- [charts] Add pie benchmark (#17115) @JCQuintas
+- [charts] Fix CSS vars support for dark theme (#17106) @alexfauquette
+- [charts] Fix radar hover (#17134) @alexfauquette
+- [charts] Move axis interaction to selectors (#17039) @alexfauquette
+- [charts] Fix Pie benchmark (#17125) @JCQuintas
+
+#### `@mui/x-charts-pro@8.0.0-beta.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.0.0-beta.2`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.0.0-beta.2`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.0.0-beta.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.0.0-beta.2`.
+
+### `@mui/x-codemod@8.0.0-beta.1`
+
+- [codemod] Add Data Grid codemods (#17121, #17124) @MBilalShafi
+
+### Docs
+
+- [docs] Fix example import for `ExportExcel` component (#17110) @KenanYusuf
+
+### Core
+
+- [code-infra] Remove `@mui/styles` dependency & patches (#17071) @mnajdova
+- [code-infra] Add more tests to slow screenshot tests (#17075) @JCQuintas
+- [code-infra] Fix pickers codecov (#17120) @JCQuintas
+- [code-infra] Move `isDeepEqual` to @mui/x-internals (#17129) @JCQuintas
+- [code-infra] Remove `test_regressions` step from React 18 pipeline (#17108) @LukasTy
+- [code-infra] Update some data-grid tests for vitest (#17078, #17104, #17146) @JCQuintas
+- [code-infra] Update some date-pickers tests for vitest (#17083) @JCQuintas
+- [infra] Update `issue-status-label-handler.yml` @michelengelen
+- [infra] Added reusable issue status label handler workflow (#17145) @michelengelen
+- [infra] Switch to reusable 'stale issues/PRs' workflow (#17107) @michelengelen
+- [telemetry] Improve request body size, update dependencies, and optimize SSR handling (#17008) @hasdfa
+
 ## 8.0.0-beta.1
 
 _Mar 21, 2025_

package/DataGrid/DataGrid.js

@@ -66,11 +66,11 @@ DataGridRaw.propTypes = {
     current: _propTypes.default.object
   }),
   /**
-   * The label of the Data Grid.
+   * The `aria-label` of the Data Grid.
    */
   'aria-label': _propTypes.default.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.default.string,
   /**
@@ -117,6 +117,7 @@ DataGridRaw.propTypes = {
    * Override or extend the styles applied to the component.
    */
   classes: _propTypes.default.object,
+  className: _propTypes.default.string,
   /**
    * The character used to separate cell values when copying to the clipboard.
    * @default '\t'
@@ -366,6 +367,12 @@ DataGridRaw.propTypes = {
    * @default false
    */
   keepNonExistentRowsSelected: _propTypes.default.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.default.string,
   /**
    * If `true`, a loading overlay is displayed.
    * @default false
@@ -776,6 +783,7 @@ DataGridRaw.propTypes = {
     field: _propTypes.default.string.isRequired,
     sort: _propTypes.default.oneOf(['asc', 'desc'])
   })),
+  style: _propTypes.default.object,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/DataGrid/useDataGridProps.js

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

package/components/GridRow.js

@@ -86,7 +86,7 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
   const rowReordering = rootProps.rowReordering;
   const isRowReorderingEnabled = (0, _useGridSelector.useGridSelector)(apiRef, isRowReorderingEnabledSelector, rowReordering);
   const handleRef = (0, _utils.unstable_useForkRef)(ref, refProp);
-  const rowNode = apiRef.current.getRowNode(rowId);
+  const rowNode = (0, _gridRowsSelector.gridRowNodeSelector)(apiRef, rowId);
   const editing = (0, _useGridSelector.useGridSelector)(apiRef, _gridEditingSelectors.gridRowIsEditingSelector, {
     rowId,
     editMode: rootProps.editMode
@@ -199,7 +199,7 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
     return rowStyle;
   }, [isNotVisible, rowHeight, styleProp, heightEntry, rootProps.rowSpacingType]);
   const rowClassNames = apiRef.current.unstable_applyPipeProcessors('rowClassName', [], rowId);
-  const ariaAttributes = rowNode ? getRowAriaAttributes(rowNode, index) : undefined;
+  const ariaAttributes = getRowAriaAttributes(rowNode, index);
   if (typeof rootProps.getRowClassName === 'function') {
     const indexRelativeToCurrentPage = index - (currentPage.range?.firstRowIndex || 0);
     const rowParams = (0, _extends2.default)({}, apiRef.current.getRowParams(rowId), {
@@ -209,11 +209,6 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
     });
     rowClassNames.push(rootProps.getRowClassName(rowParams));
   }
-
-  /* Start of rendering */
-  if (!rowNode) {
-    return null;
-  }
   const getCell = (column, indexInSection, indexRelativeToAllColumns, sectionLength, pinnedPosition = _constants.PinnedColumnPosition.NONE) => {
     const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, indexRelativeToAllColumns);
     if (cellColSpanInfo?.spannedByColSpan) {
@@ -222,7 +217,7 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
     const width = cellColSpanInfo?.cellProps.width ?? column.computedWidth;
     const colSpan = cellColSpanInfo?.cellProps.colSpan ?? 1;
     const pinnedOffset = (0, _getPinnedCellOffset.getPinnedCellOffset)(pinnedPosition, column.computedWidth, indexRelativeToAllColumns, columnPositions, columnsTotalWidth, scrollbarWidth);
-    if (rowNode?.type === 'skeletonRow') {
+    if (rowNode.type === 'skeletonRow') {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(slots.skeletonCell, {
         type: column.type,
         width: width,

package/components/GridScrollArea.js

@@ -17,7 +17,7 @@ var _fastMemo = require("@mui/x-internals/fastMemo");
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
 var _constants = require("../constants");
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
-var _useGridApiEventHandler = require("../hooks/utils/useGridApiEventHandler");
+var _useGridEvent = require("../hooks/utils/useGridEvent");
 var _useGridSelector = require("../hooks/utils/useGridSelector");
 var _gridDimensionsSelectors = require("../hooks/features/dimensions/gridDimensionsSelectors");
 var _densitySelector = require("../hooks/features/density/densitySelector");
@@ -70,8 +70,8 @@ const offsetSelector = (0, _createSelector.createSelector)(_gridDimensionsSelect
 function GridScrollAreaWrapper(props) {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const [dragging, setDragging] = React.useState(false);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnHeaderDragStart', () => setDragging(true));
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnHeaderDragEnd', () => setDragging(false));
+  (0, _useGridEvent.useGridEvent)(apiRef, 'columnHeaderDragStart', () => setDragging(true));
+  (0, _useGridEvent.useGridEvent)(apiRef, 'columnHeaderDragEnd', () => setDragging(false));
   if (!dragging) {
     return null;
   }
@@ -143,7 +143,7 @@ function GridScrollAreaContent(props) {
       });
     });
   });
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'scrollPositionChange', handleScrolling);
+  (0, _useGridEvent.useGridEvent)(apiRef, 'scrollPositionChange', handleScrolling);
   if (!canScrollMore) {
     return null;
   }

package/components/GridShadowScrollArea.js

@@ -25,48 +25,56 @@ const detectScroll = (0, _system.keyframes)({
     '--scrollable': '" "'
   }
 });
+
+// This `styled()` function invokes keyframes. `styled-components` only supports keyframes
+// in string templates. Do not convert these styles in JS object as it will break.
 const ShadowScrollArea = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'ShadowScrollArea'
-})({
-  flex: 1,
-  display: 'flex',
-  flexDirection: 'column',
-  animation: detectScroll,
-  animationTimeline: '--scroll-timeline',
-  animationFillMode: 'none',
-  boxSizing: 'border-box',
-  overflow: 'auto',
-  scrollTimeline: '--scroll-timeline block',
-  '&::before, &::after': {
-    content: '""',
-    flexShrink: 0,
-    display: 'block',
-    position: 'sticky',
-    left: 0,
-    width: '100%',
-    height: '4px',
-    animation: `${reveal} linear both`,
-    animationTimeline: '--scroll-timeline',
+})`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  animation: ${detectScroll};
+  animation-timeline: --scroll-timeline;
+  animation-fill-mode: none;
+  box-sizing: border-box;
+  overflow: auto;
+  scroll-timeline: --scroll-timeline block;
+
+  &::before,
+  &::after {
+    content: '';
+    flex-shrink: 0;
+    display: block;
+    position: sticky;
+    left: 0;
+    width: 100%;
+    height: 4px;
+    animation: ${reveal} linear both;
+    animation-timeline: --scroll-timeline;
+
     // Custom property toggle trick:
     // - Detects if the element is scrollable
     // - https://css-tricks.com/the-css-custom-property-toggle-trick/
-    '--visibility-scrollable': 'var(--scrollable) visible',
-    '--visibility-not-scrollable': 'hidden',
-    visibility: 'var(--visibility-scrollable, var(--visibility-not-scrollable))'
-  },
-  '&::before': {
-    top: 0,
-    background: 'linear-gradient(to bottom, rgba(0,0,0,0.05) 0, transparent 100%)',
-    animationRange: '0 4px'
-  },
-  '&::after': {
-    bottom: 0,
-    background: 'linear-gradient(to top, rgba(0,0,0,0.05) 0, transparent 100%)',
-    animationDirection: 'reverse',
-    animationRange: 'calc(100% - 4px) 100%'
+    --visibility-scrollable: var(--scrollable) visible;
+    --visibility-not-scrollable: hidden;
+    visibility: var(--visibility-scrollable, var(--visibility-not-scrollable));
   }
-});
+
+  &::before {
+    top: 0;
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 0, transparent 100%);
+    animation-range: 0 4px;
+  }
+
+  &::after {
+    bottom: 0;
+    background: linear-gradient(to top, rgba(0, 0, 0, 0.05) 0, transparent 100%);
+    animation-direction: reverse;
+    animation-range: calc(100% - 4px) 100%;
+  }
+`;
 
 /**
  * Adds scroll shadows above and below content in a scrollable container.

package/components/GridSkeletonLoadingOverlay.js

@@ -187,7 +187,7 @@ const GridSkeletonLoadingOverlayInner = exports.GridSkeletonLoadingOverlayInner
       });
     }
   };
-  (0, _hooks.useGridApiEventHandler)(apiRef, 'columnResize', handleColumnResize);
+  (0, _hooks.useGridEvent)(apiRef, 'columnResize', handleColumnResize);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(SkeletonOverlay, (0, _extends2.default)({
     className: classes.root
   }, rest, {

package/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/components/cell/GridActionsCellItem.js

@@ -14,7 +14,7 @@ var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["label", "icon", "showInMenu", "onClick"],
-  _excluded2 = ["label", "icon", "showInMenu", "onClick", "closeMenuOnClick", "closeMenu"]; // FIXME(v8:romgrk): Make parametric
+  _excluded2 = ["label", "icon", "showInMenu", "onClick", "closeMenuOnClick", "closeMenu"];
 const GridActionsCellItem = exports.GridActionsCellItem = (0, _forwardRef.forwardRef)((props, ref) => {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   if (!props.showInMenu) {
@@ -67,11 +67,14 @@ 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.default.string,
   /**
    * from https://mui.com/material-ui/api/button-base/#ButtonBase-prop-component
    */
   component: _propTypes.default.elementType,
+  disabled: _propTypes.default.bool,
   icon: _propTypes.default.element,
   label: _propTypes.default.string.isRequired,
-  showInMenu: _propTypes.default.bool
+  showInMenu: _propTypes.default.bool,
+  style: _propTypes.default.object
 } : void 0;

package/components/cell/GridBooleanCell.d.ts

@@ -1,8 +1,7 @@
 import * as React from 'react';
-import { SvgIconProps } from '@mui/material/SvgIcon';
 import type { GridColDef } from '../../models/colDef/gridColDef';
 import type { GridRenderCellParams } from '../../models/params/gridCellParams';
-interface GridBooleanCellProps extends GridRenderCellParams, Omit<SvgIconProps, 'tabIndex' | 'id'> {
+interface GridBooleanCellProps extends GridRenderCellParams {
   hideDescendantCount?: boolean;
 }
 declare function GridBooleanCellRaw(props: GridBooleanCellProps): React.JSX.Element | null;

package/components/cell/GridEditSingleSelectCell.d.ts

@@ -1,14 +1,14 @@
 import * as React from 'react';
-import { SelectProps, SelectChangeEvent } from '@mui/material/Select';
+import type { GridSlotProps } from '../../models/gridSlotsComponentsProps';
 import { GridRenderEditCellParams } from "../../models/params/gridCellParams.js";
-export interface GridEditSingleSelectCellProps extends GridRenderEditCellParams, Omit<SelectProps, 'id' | 'tabIndex' | 'value'> {
+export interface GridEditSingleSelectCellProps extends GridRenderEditCellParams {
   /**
    * Callback called when the value is changed by the user.
-   * @param {SelectChangeEvent<any>} event The event source of the callback.
+   * @param {Event<any>} event The event source of the callback.
    * @param {any} newValue The value that is going to be passed to `apiRef.current.setEditCellValue`.
    * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
    */
-  onValueChange?: (event: SelectChangeEvent<any>, newValue: any) => Promise<void> | void;
+  onValueChange?: (event: Parameters<NonNullable<GridSlotProps['baseSelect']['onOpen']>>[0], newValue: any) => Promise<void> | void;
   /**
    * If true, the select opens by default.
    */

package/components/cell/GridEditSingleSelectCell.js

@@ -171,7 +171,7 @@ process.env.NODE_ENV !== "production" ? GridEditSingleSelectCell.propTypes = {
   isValidating: _propTypes.default.bool,
   /**
    * Callback called when the value is changed by the user.
-   * @param {SelectChangeEvent<any>} event The event source of the callback.
+   * @param {Event<any>} event The event source of the callback.
    * @param {any} newValue The value that is going to be passed to `apiRef.current.setEditCellValue`.
    * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
    */

package/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/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/components/columnsManagement/GridColumnsManagement.js

@@ -239,30 +239,7 @@ process.env.NODE_ENV !== "production" ? GridColumnsManagement.propTypes = {
    * @returns {GridColDef['field'][]} The list of togglable columns' field names.
    */
   getTogglableColumns: _propTypes.default.func,
-  searchInputProps: _propTypes.default.shape({
-    autoComplete: _propTypes.default.string,
-    className: _propTypes.default.string,
-    color: _propTypes.default.oneOf(['error', 'primary']),
-    disabled: _propTypes.default.bool,
-    error: _propTypes.default.bool,
-    fullWidth: _propTypes.default.bool,
-    helperText: _propTypes.default.string,
-    id: _propTypes.default.string,
-    inputRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
-      current: _propTypes.default.object
-    })]),
-    label: _propTypes.default.node,
-    onChange: _propTypes.default.func,
-    onKeyDown: _propTypes.default.func,
-    placeholder: _propTypes.default.string,
-    role: _propTypes.default.string,
-    size: _propTypes.default.oneOf(['medium', 'small']),
-    slotProps: _propTypes.default.object,
-    style: _propTypes.default.object,
-    tabIndex: _propTypes.default.number,
-    type: _propTypes.default.oneOfType([_propTypes.default.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.default.object]),
-    value: _propTypes.default.string
-  }),
+  searchInputProps: _propTypes.default.object,
   searchPredicate: _propTypes.default.func,
   sort: _propTypes.default.oneOf(['asc', 'desc']),
   /**