@mui/x-data-grid-pro 6.0.0-beta.3 → 6.0.0-beta.5

package/CHANGELOG.md

@@ -3,6 +3,107 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.0.0-beta.5
+
+_Feb 23, 2023_
+
+We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+- ⚡️ Add web worker support for Excel export (#7770) @m4theushw
+- 🎁 Add a button to remove all filters on the data grid filter panel (#7326) @MBilalShafi
+- ⚙️ Allow to customize options label and value in the data grid `singleSelect` column (#7684) @m4theushw
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v6.0.0-beta.5` / `@mui/x-data-grid-pro@v6.0.0-beta.5` / `@mui/x-data-grid-premium@v6.0.0-beta.5`
+
+#### Changes
+
+- [DataGrid] Allow to customize label and value for `singleSelect` (#7684) @m4theushw
+- [DataGrid] Fix `ownerState` being `undefined` in theme style overrides (#7964) @lolaignatova
+- [DataGrid] Introduce `slots` and deprecate `components` (#7882) @MBilalShafi
+- [DataGridPro] Add `Remove All` option in filter panel (#7326) @MBilalShafi
+- [DataGridPremium] Add web worker support for Excel export (#7770) @m4theushw
+
+### `@mui/x-date-pickers@v6.0.0-beta.5` / `@mui/x-date-pickers-pro@v6.0.0-beta.5`
+
+#### Breaking changes
+
+- The `MuiDateSectionName` type was renamed to `FieldSectionType`
+
+#### Changes
+
+- [fields] Fix multi input range fields validation when uncontrolled (#8002) @LukasTy
+- [fields] Fix single input time range fields slot props (#7988) @LukasTy
+- [fields] Make the `ArrowUp` / `ArrowDown` edition only impact the active section (#7993) @flaviendelangle
+- [fields] Fix single input range fields clearing (#7995) @flaviendelangle
+- [fields] Clean the section object (#8009) @flaviendelangle
+- [pickers] Fix `textField` slot `error` prop propagation (#7987) @LukasTy
+
+### `@mui/x-codemod@v6.0.0-beta.5`
+
+#### Changes
+
+- [codemod] Add `apiRef.current.getRowIndex` to `DataGrid` renaming codemod (#8001) @MBilalShafi
+
+### Docs
+
+- [docs] Fine tune range fields demos (#7992) @LukasTy
+- [docs] Fix a few scroll issues on mobile (#7900) @oliviertassinari
+- [docs] Fix inconsistency in the data grid migration guide (#7963) @MBilalShafi
+
+### Core
+
+- [core] Fix `moment` locale on adapter tests (#8020) @flaviendelangle
+- [test] Support all adapters on the field tests about the formats (#7996) @flaviendelangle
+
+## 6.0.0-beta.4
+
+_Feb 16, 2023_
+
+We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:
+
+- ⚡️ Improve grid performance by reducing rerenders (#7857) @cherniavskii
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v6.0.0-beta.4` / `@mui/x-data-grid-pro@v6.0.0-beta.4` / `@mui/x-data-grid-premium@v6.0.0-beta.4`
+
+#### Changes
+
+- [DataGrid] Add interface for `singleSelect` column (#7685) @m4theushw
+- [DataGrid] Allow to pass props to the `TrapFocus` inside the panel wrapper (#7733) @Vivek-Prajapatii
+- [DataGrid] Avoid unnecessary rerenders after `updateRows` (#7857) @cherniavskii
+- [DataGridPro] Change cursor when dragging a column (#7725) @sai6855
+- [DataGridPremium] Fix `leafField` to have correct focus value (#7950) @MBilalShafi
+
+### `@mui/x-date-pickers@v6.0.0-beta.4` / `@mui/x-date-pickers-pro@v6.0.0-beta.4`
+
+#### Changes
+
+- [DateRangePicker] Fix slide transition by avoiding useless component re-rendering (#7874) @LukasTy
+- [fields] Support Backspace key on `Android` (#7842) @flaviendelangle
+- [fields] Support escaped characters on `Luxon` (#7888) @flaviendelangle
+- [pickers] Prepare new pickers for custom fields (#7806) @flaviendelangle
+
+### `@mui/x-codemod@v6.0.0-beta.4`
+
+#### Changes
+
+- [codemod] Fix import path (#7952) @LukasTy
+
+### Docs
+
+- [docs] Add an info callout specifying the current state of desktop time view (#7933) @LukasTy
+- [docs] Add missing param in `useGridApiEventHandler` examples (#7939) @flaviendelangle
+- [docs] Fix markdown table alignments (#7898) @oliviertassinari
+- [docs] Improve `DataGrid` migration guide (#7861) @MBilalShafi
+- [docs] Update `LocalizationProvider` `dateAdapter` with a link to the doc (#7872) @LukasTy
+
+### Core
+
+- [core] Run editing field tests on all major adapters (#7868) @flaviendelangle
+
 ## 6.0.0-beta.3
 
 _Feb 9, 2023_
@@ -2132,6 +2233,50 @@ You can find more information about the new api, including how to set those tran
 - [test] Skip tests for column pinning and dynamic row height (#5997) @m4theushw
 - [website] Improve security header @oliviertassinari
 
+## 5.17.25
+
+_Feb 23, 2023_
+
+We'd like to offer a big thanks to the 2 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.17.25` / `@mui/x-data-grid-pro@v5.17.25` / `@mui/x-data-grid-premium@v5.17.25`
+
+#### Changes
+
+- [DataGrid] Fix `ownerState` being `undefined` in theme style overrides (#7757) @lolaignatova
+
+### `@mui/x-date-pickers@v5.0.20` / `@mui/x-date-pickers-pro@v5.0.20`
+
+#### Changes
+
+- [DateTimePicker] Ensure toolbar `viewType` is correctly updated (#7942) @LukasTy
+
+## 5.17.24
+
+_Feb 16, 2023_
+
+We'd like to offer a big thanks to the 5 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Add Hungarian (hu-HU) locale
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.17.24` / `@mui/x-data-grid-pro@v5.17.24` / `@mui/x-data-grid-premium@v5.17.24`
+
+#### Changes
+
+- [DataGrid] Allow to pass props to the `TrapFocus` inside the panel wrapper (#7897) @Vivek-Prajapatii
+- [DataGrid] Avoid unnecessary rerenders after `updateRows` (#7945) @cherniavskii
+- [DataGridPro] Change cursor when dragging a column (#7878) @sai6855
+- [DataGridPremium] Fix `leafField` to have correct focus value (#7959) @MBilalShafi
+
+### `@mui/x-date-pickers@v5.0.19` / `@mui/x-date-pickers-pro@v5.0.19`
+
+#### Changes
+
+- [l10n] Add Hungarian (hu-HU) locale (#7796) @noherczeg
+
 ## 5.17.23
 
 _Feb 9, 2023_

package/DataGridPro/DataGridPro.js

@@ -115,10 +115,12 @@ DataGridProRaw.propTypes = {
   columnVisibilityModel: PropTypes.object,
   /**
    * Overrideable components.
+   * @deprecated Use the `slots` prop instead.
    */
   components: PropTypes.object,
   /**
    * Overrideable components props dynamically passed to the component at rendering.
+   * @deprecated Use the `slotProps` prop instead.
    */
   componentsProps: PropTypes.object,
   /**
@@ -771,6 +773,14 @@ DataGridProRaw.propTypes = {
    * @default false
    */
   showColumnVerticalBorder: PropTypes.bool,
+  /**
+   * Overrideable components props dynamically passed to the component at rendering.
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overrideable components.
+   */
+  slots: PropTypes.object,
   /**
    * Sorting can be processed on the server or client-side.
    * Set it to 'client' if you would like to handle sorting on the client-side.

package/DataGridPro/useDataGridProProps.js

@@ -1,7 +1,10 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["components", "componentsProps"];
 import * as React from 'react';
 import { useThemeProps } from '@mui/material/styles';
 import { GRID_DEFAULT_LOCALE_TEXT, DATA_GRID_PROPS_DEFAULT_VALUES } from '@mui/x-data-grid';
+import { computeSlots, uncapitalizeObjectKeys } from '@mui/x-data-grid/internals';
 import { DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS } from '../constants/dataGridProDefaultSlotsComponents';
 
 /**
@@ -19,26 +22,30 @@ export const DATA_GRID_PRO_PROPS_DEFAULT_VALUES = _extends({}, DATA_GRID_PROPS_D
   rowsLoadingMode: 'client',
   getDetailPanelHeight: () => 500
 });
+const defaultSlots = uncapitalizeObjectKeys(DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS);
 export const useDataGridProProps = inProps => {
-  const themedProps = useThemeProps({
-    props: inProps,
-    name: 'MuiDataGrid'
-  });
+  const _useThemeProps = useThemeProps({
+      props: inProps,
+      name: 'MuiDataGrid'
+    }),
+    {
+      components,
+      componentsProps
+    } = _useThemeProps,
+    themedProps = _objectWithoutPropertiesLoose(_useThemeProps, _excluded);
   const localeText = React.useMemo(() => _extends({}, GRID_DEFAULT_LOCALE_TEXT, themedProps.localeText), [themedProps.localeText]);
-  const components = React.useMemo(() => {
-    const overrides = themedProps.components;
-    if (!overrides) {
-      return _extends({}, DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS);
-    }
-    const mergedComponents = {};
-    Object.entries(DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS).forEach(([key, defaultComponent]) => {
-      mergedComponents[key] = overrides[key] === undefined ? defaultComponent : overrides[key];
+  const slots = React.useMemo(() => computeSlots({
+    defaultSlots,
+    slots: themedProps.slots,
+    components
+  }), [components, themedProps.slots]);
+  return React.useMemo(() => {
+    var _themedProps$slotProp;
+    return _extends({}, DATA_GRID_PRO_PROPS_DEFAULT_VALUES, themedProps, {
+      localeText,
+      slots,
+      slotProps: (_themedProps$slotProp = themedProps.slotProps) != null ? _themedProps$slotProp : componentsProps,
+      signature: 'DataGridPro'
     });
-    return mergedComponents;
-  }, [themedProps.components]);
-  return React.useMemo(() => _extends({}, DATA_GRID_PRO_PROPS_DEFAULT_VALUES, themedProps, {
-    localeText,
-    components,
-    signature: 'DataGridPro'
-  }), [themedProps, localeText, components]);
+  }, [themedProps, localeText, slots, componentsProps]);
 };

package/components/DataGridProColumnHeaders.js

@@ -103,11 +103,11 @@ export const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function D
     innerRef,
     minColumnIndex: leftPinnedColumns.length
   });
-  const ownerState = {
+  const ownerState = _extends({}, rootProps, {
     leftPinnedColumns,
     rightPinnedColumns,
     classes: rootProps.classes
-  };
+  });
   const classes = useUtilityClasses(ownerState);
   const leftRenderContext = renderContext && leftPinnedColumns.length ? _extends({}, renderContext, {
     firstColumnIndex: 0,
@@ -127,10 +127,10 @@ export const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function D
   }, getRootProps(other), {
     children: [leftRenderContext && /*#__PURE__*/_jsxs(GridColumnHeadersPinnedColumnHeaders, _extends({
       className: classes.leftPinnedColumns,
-      ownerState: {
+      ownerState: _extends({}, ownerState, {
         side: GridPinnedPosition.left,
         showCellVerticalBorder: rootProps.showCellVerticalBorder
-      }
+      })
     }, pinnedColumnHeadersProps, {
       children: [getColumnGroupHeaders({
         renderContext: leftRenderContext,
@@ -156,10 +156,10 @@ export const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function D
         maxLastColumn: visibleColumnFields.length - rightPinnedColumns.length
       })]
     })), rightRenderContext && /*#__PURE__*/_jsxs(GridColumnHeadersPinnedColumnHeaders, _extends({
-      ownerState: {
+      ownerState: _extends({}, ownerState, {
         side: GridPinnedPosition.right,
         showCellVerticalBorder: rootProps.showCellVerticalBorder
-      },
+      }),
       className: classes.rightPinnedColumns,
       style: {
         paddingRight: scrollbarSize

package/components/DataGridProVirtualScroller.js

@@ -110,6 +110,11 @@ const VirtualScrollerPinnedColumns = styled('div', {
     borderLeftStyle: 'solid'
   });
 });
+var PinnedRowsPosition;
+(function (PinnedRowsPosition) {
+  PinnedRowsPosition["top"] = "top";
+  PinnedRowsPosition["bottom"] = "bottom";
+})(PinnedRowsPosition || (PinnedRowsPosition = {}));
 const VirtualScrollerPinnedRows = styled('div', {
   name: 'MuiDataGrid',
   slot: 'PinnedRows',
@@ -136,7 +141,7 @@ const VirtualScrollerPinnedRows = styled('div', {
   }), ownerState.position === 'top' && {
     top: 0,
     boxShadow: `0px 3px 4px -2px ${boxShadowColor}`
-  }, ownerState.position === 'bottom' && {
+  }, ownerState.position === PinnedRowsPosition.bottom && {
     boxShadow: `0px -3px 4px -2px ${boxShadowColor}`,
     bottom: 0
   });
@@ -190,9 +195,10 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
   const pinnedRows = useGridSelector(apiRef, gridPinnedRowsSelector);
   const topPinnedRowsData = React.useMemo(() => (pinnedRows == null ? void 0 : pinnedRows.top) || [], [pinnedRows == null ? void 0 : pinnedRows.top]);
   const bottomPinnedRowsData = React.useMemo(() => (pinnedRows == null ? void 0 : pinnedRows.bottom) || [], [pinnedRows == null ? void 0 : pinnedRows.bottom]);
-  const classes = useUtilityClasses({
+  const ownerState = _extends({}, rootProps, {
     classes: rootProps.classes
   });
+  const classes = useUtilityClasses(ownerState);
   const {
     renderContext,
     getRows,
@@ -284,9 +290,9 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
   return /*#__PURE__*/_jsxs(GridVirtualScroller, _extends({}, getRootProps(other), {
     children: [/*#__PURE__*/_jsx(GridOverlays, {}), topPinnedRowsData.length > 0 ? /*#__PURE__*/_jsxs(VirtualScrollerPinnedRows, {
       className: classes.topPinnedRows,
-      ownerState: {
-        position: 'top'
-      },
+      ownerState: _extends({}, ownerState, {
+        position: PinnedRowsPosition.top
+      }),
       style: {
         width: contentProps.style.width,
         height: pinnedRowsHeight.top
@@ -294,10 +300,10 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
       role: "rowgroup",
       children: [leftRenderContext && /*#__PURE__*/_jsx(VirtualScrollerPinnedColumns, {
         className: classes.leftPinnedColumns,
-        ownerState: {
+        ownerState: _extends({}, ownerState, {
           side: GridPinnedPosition.left,
           showCellVerticalBorder: rootProps.showCellVerticalBorder
-        },
+        }),
         children: getRows({
           renderContext: leftRenderContext,
           minFirstColumn: leftRenderContext.firstColumnIndex,
@@ -313,10 +319,10 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
         children: topPinnedRows
       }), rightRenderContext && /*#__PURE__*/_jsx(VirtualScrollerPinnedColumns, {
         className: classes.rightPinnedColumns,
-        ownerState: {
+        ownerState: _extends({}, ownerState, {
           side: GridPinnedPosition.right,
           showCellVerticalBorder: rootProps.showCellVerticalBorder
-        },
+        }),
         children: getRows({
           renderContext: rightRenderContext,
           minFirstColumn: rightRenderContext.firstColumnIndex,
@@ -330,10 +336,10 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
       children: [leftRenderContext && /*#__PURE__*/_jsx(VirtualScrollerPinnedColumns, {
         ref: leftColumns,
         className: classes.leftPinnedColumns,
-        ownerState: {
+        ownerState: _extends({}, ownerState, {
           side: GridPinnedPosition.left,
           showCellVerticalBorder: rootProps.showCellVerticalBorder
-        },
+        }),
         style: pinnedColumnsStyle,
         children: getRows({
           renderContext: leftRenderContext,
@@ -347,10 +353,10 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
         children: mainRows
       })), rightRenderContext && /*#__PURE__*/_jsx(VirtualScrollerPinnedColumns, {
         ref: rightColumns,
-        ownerState: {
+        ownerState: _extends({}, ownerState, {
           side: GridPinnedPosition.right,
           showCellVerticalBorder: rootProps.showCellVerticalBorder
-        },
+        }),
         className: classes.rightPinnedColumns,
         style: pinnedColumnsStyle,
         children: getRows({
@@ -363,13 +369,14 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
         })
       }), detailPanels.length > 0 && /*#__PURE__*/_jsx(VirtualScrollerDetailPanels, {
         className: classes.detailPanels,
+        ownerState: ownerState,
         children: detailPanels
       })]
     })), bottomPinnedRowsData.length > 0 ? /*#__PURE__*/_jsxs(VirtualScrollerPinnedRows, {
       className: classes.bottomPinnedRows,
-      ownerState: {
-        position: 'bottom'
-      },
+      ownerState: _extends({}, ownerState, {
+        position: PinnedRowsPosition.bottom
+      }),
       style: {
         width: contentProps.style.width,
         height: pinnedRowsHeight.bottom
@@ -377,10 +384,10 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
       role: "rowgroup",
       children: [leftRenderContext && /*#__PURE__*/_jsx(VirtualScrollerPinnedColumns, {
         className: classes.leftPinnedColumns,
-        ownerState: {
+        ownerState: _extends({}, ownerState, {
           side: GridPinnedPosition.left,
           showCellVerticalBorder: rootProps.showCellVerticalBorder
-        },
+        }),
         children: getRows({
           renderContext: leftRenderContext,
           minFirstColumn: leftRenderContext.firstColumnIndex,
@@ -397,10 +404,10 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
         children: bottomPinnedRows
       }), rightRenderContext && /*#__PURE__*/_jsx(VirtualScrollerPinnedColumns, {
         className: classes.rightPinnedColumns,
-        ownerState: {
+        ownerState: _extends({}, ownerState, {
           side: GridPinnedPosition.right,
           showCellVerticalBorder: rootProps.showCellVerticalBorder
-        },
+        }),
         children: getRows({
           renderContext: rightRenderContext,
           minFirstColumn: rightRenderContext.firstColumnIndex,

package/components/GridColumnMenuPinningItem.js

@@ -28,7 +28,7 @@ function GridColumnMenuPinningItem(props) {
   const pinToLeftMenuItem = /*#__PURE__*/_jsxs(MenuItem, {
     onClick: pinColumn(GridPinnedPosition.left),
     children: [/*#__PURE__*/_jsx(ListItemIcon, {
-      children: /*#__PURE__*/_jsx(rootProps.components.ColumnMenuPinLeftIcon, {
+      children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuPinLeftIcon, {
         fontSize: "small"
       })
     }), /*#__PURE__*/_jsx(ListItemText, {
@@ -38,7 +38,7 @@ function GridColumnMenuPinningItem(props) {
   const pinToRightMenuItem = /*#__PURE__*/_jsxs(MenuItem, {
     onClick: pinColumn(GridPinnedPosition.right),
     children: [/*#__PURE__*/_jsx(ListItemIcon, {
-      children: /*#__PURE__*/_jsx(rootProps.components.ColumnMenuPinRightIcon, {
+      children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuPinRightIcon, {
         fontSize: "small"
       })
     }), /*#__PURE__*/_jsx(ListItemText, {
@@ -52,7 +52,7 @@ function GridColumnMenuPinningItem(props) {
   if (side) {
     const otherSide = side === GridPinnedPosition.right ? GridPinnedPosition.left : GridPinnedPosition.right;
     const label = otherSide === GridPinnedPosition.right ? 'pinToRight' : 'pinToLeft';
-    const Icon = side === GridPinnedPosition.right ? rootProps.components.ColumnMenuPinLeftIcon : rootProps.components.ColumnMenuPinRightIcon;
+    const Icon = side === GridPinnedPosition.right ? rootProps.slots.columnMenuPinLeftIcon : rootProps.slots.columnMenuPinRightIcon;
     return /*#__PURE__*/_jsxs(React.Fragment, {
       children: [/*#__PURE__*/_jsxs(MenuItem, {
         onClick: pinColumn(otherSide),

package/components/GridDetailPanel.js

@@ -4,6 +4,7 @@ const _excluded = ["rowId", "height", "style"];
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
+import { useGridRootProps } from '@mui/x-data-grid';
 import { useGridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 const DetailPanel = styled(Box, {
@@ -28,6 +29,8 @@ function GridDetailPanel(props) {
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const apiRef = useGridPrivateApiContext();
   const ref = React.useRef();
+  const rootProps = useGridRootProps();
+  const ownerState = rootProps;
   React.useLayoutEffect(() => {
     if (height === 'auto' && ref.current && typeof ResizeObserver === 'undefined') {
       // Fallback for IE
@@ -52,6 +55,7 @@ function GridDetailPanel(props) {
   });
   return /*#__PURE__*/_jsx(DetailPanel, _extends({
     ref: ref,
+    ownerState: ownerState,
     style: style
   }, other));
 }

package/components/GridDetailPanelToggleCell.js

@@ -18,7 +18,7 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 function GridDetailPanelToggleCell(props) {
-  var _rootProps$components;
+  var _rootProps$slotProps;
   const {
     id,
     value: isExpanded
@@ -32,14 +32,14 @@ function GridDetailPanelToggleCell(props) {
   const classes = useUtilityClasses(ownerState);
   const contentCache = useGridSelector(apiRef, gridDetailPanelExpandedRowsContentCacheSelector);
   const hasContent = /*#__PURE__*/React.isValidElement(contentCache[id]);
-  const Icon = isExpanded ? rootProps.components.DetailPanelCollapseIcon : rootProps.components.DetailPanelExpandIcon;
-  return /*#__PURE__*/_jsx(rootProps.components.BaseIconButton, _extends({
+  const Icon = isExpanded ? rootProps.slots.detailPanelCollapseIcon : rootProps.slots.detailPanelExpandIcon;
+  return /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
     size: "small",
     tabIndex: -1,
     disabled: !hasContent,
     className: classes.root,
     "aria-label": isExpanded ? apiRef.current.getLocaleText('collapseDetailPanel') : apiRef.current.getLocaleText('expandDetailPanel')
-  }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseIconButton, {
+  }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseIconButton, {
     children: /*#__PURE__*/_jsx(Icon, {
       fontSize: "inherit"
     })

package/components/GridRowReorderCell.js

@@ -62,7 +62,7 @@ function GridRowReorderCell(params) {
     className: classes.root,
     draggable: isDraggable
   }, draggableEventHandlers, {
-    children: [/*#__PURE__*/_jsx(rootProps.components.RowReorderIcon, {}), /*#__PURE__*/_jsx("div", {
+    children: [/*#__PURE__*/_jsx(rootProps.slots.rowReorderIcon, {}), /*#__PURE__*/_jsx("div", {
       className: classes.placeholder,
       children: cellValue
     })]

package/components/GridTreeDataGroupingCell.js

@@ -19,7 +19,7 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 function GridTreeDataGroupingCell(props) {
-  var _filteredDescendantCo, _rootProps$components;
+  var _filteredDescendantCo, _rootProps$slotProps;
   const {
     id,
     field,
@@ -36,7 +36,7 @@ function GridTreeDataGroupingCell(props) {
   const classes = useUtilityClasses(ownerState);
   const filteredDescendantCountLookup = useGridSelector(apiRef, gridFilteredDescendantCountLookupSelector);
   const filteredDescendantCount = (_filteredDescendantCo = filteredDescendantCountLookup[rowNode.id]) != null ? _filteredDescendantCo : 0;
-  const Icon = rowNode.childrenExpanded ? rootProps.components.TreeDataCollapseIcon : rootProps.components.TreeDataExpandIcon;
+  const Icon = rowNode.childrenExpanded ? rootProps.slots.treeDataCollapseIcon : rootProps.slots.treeDataExpandIcon;
   const handleClick = event => {
     apiRef.current.setRowChildrenExpansion(id, !rowNode.childrenExpanded);
     apiRef.current.setCellFocus(id, field);
@@ -50,12 +50,12 @@ function GridTreeDataGroupingCell(props) {
     },
     children: [/*#__PURE__*/_jsx("div", {
       className: classes.toggle,
-      children: filteredDescendantCount > 0 && /*#__PURE__*/_jsx(rootProps.components.BaseIconButton, _extends({
+      children: filteredDescendantCount > 0 && /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
         size: "small",
         onClick: handleClick,
         tabIndex: -1,
         "aria-label": rowNode.childrenExpanded ? apiRef.current.getLocaleText('treeDataCollapse') : apiRef.current.getLocaleText('treeDataExpand')
-      }, rootProps == null ? void 0 : (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseIconButton, {
+      }, rootProps == null ? void 0 : (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseIconButton, {
         children: /*#__PURE__*/_jsx(Icon, {
           fontSize: "inherit"
         })

package/hooks/features/columnPinning/useGridColumnPinning.d.ts

@@ -3,4 +3,4 @@ import { GridStateInitializer } from '@mui/x-data-grid/internals';
 import { GridPrivateApiPro } from '../../../models/gridApiPro';
 import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
 export declare const columnPinningStateInitializer: GridStateInitializer<Pick<DataGridProProcessedProps, 'pinnedColumns' | 'initialState' | 'disableColumnPinning'>>;
-export declare const useGridColumnPinning: (apiRef: React.MutableRefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, 'disableColumnPinning' | 'initialState' | 'pinnedColumns' | 'onPinnedColumnsChange' | 'componentsProps' | 'components'>) => void;
+export declare const useGridColumnPinning: (apiRef: React.MutableRefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, 'disableColumnPinning' | 'initialState' | 'pinnedColumns' | 'onPinnedColumnsChange' | 'slotProps' | 'slots'>) => void;

package/hooks/features/columnReorder/useGridColumnReorder.js

@@ -58,6 +58,9 @@ export const useGridColumnReorder = (apiRef, props) => {
     event.stopPropagation();
     dragColNode.current = event.currentTarget;
     dragColNode.current.classList.add(classes.columnHeaderDragging);
+    if (event.dataTransfer) {
+      event.dataTransfer.effectAllowed = 'move';
+    }
     apiRef.current.setState(state => _extends({}, state, {
       columnReorder: _extends({}, state.columnReorder, {
         dragCol: params.field

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v6.0.0-beta.3
+ * @mui/x-data-grid-pro v6.0.0-beta.5
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/legacy/DataGridPro/DataGridPro.js

@@ -115,10 +115,12 @@ DataGridProRaw.propTypes = {
   columnVisibilityModel: PropTypes.object,
   /**
    * Overrideable components.
+   * @deprecated Use the `slots` prop instead.
    */
   components: PropTypes.object,
   /**
    * Overrideable components props dynamically passed to the component at rendering.
+   * @deprecated Use the `slotProps` prop instead.
    */
   componentsProps: PropTypes.object,
   /**
@@ -771,6 +773,14 @@ DataGridProRaw.propTypes = {
    * @default false
    */
   showColumnVerticalBorder: PropTypes.bool,
+  /**
+   * Overrideable components props dynamically passed to the component at rendering.
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overrideable components.
+   */
+  slots: PropTypes.object,
   /**
    * Sorting can be processed on the server or client-side.
    * Set it to 'client' if you would like to handle sorting on the client-side.