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

package/models/gridProSlotsComponent.d.ts

@@ -1,4 +1,5 @@
-import { GridSlotsComponent } from '@mui/x-data-grid';
+import { GridSlotsComponent, UncapitalizedGridSlotsComponent } from '@mui/x-data-grid';
+import { UncapitalizeObjectKeys } from '@mui/x-data-grid/internals';
 import { GridProIconSlotsComponent } from './gridProIconSlotsComponent';
 /**
  * Grid components React prop interface containing all the overridable components
@@ -6,3 +7,5 @@ import { GridProIconSlotsComponent } from './gridProIconSlotsComponent';
  */
 export interface GridProSlotsComponent extends GridSlotsComponent, GridProIconSlotsComponent {
 }
+export interface UncapitalizedGridProSlotsComponent extends UncapitalizedGridSlotsComponent, UncapitalizeObjectKeys<GridProIconSlotsComponent> {
+}

package/modern/DataGridPro/DataGridPro.js

@@ -2,12 +2,12 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useLicenseVerifier, Watermark } from '@mui/x-license-pro';
 import { chainPropTypes } from '@mui/utils';
-import { GridBody, GridFooterPlaceholder, GridHeader, GridRoot, GridContextProvider } from '@mui/x-data-grid';
+import { GridBody, GridFooterPlaceholder, GridHeader, GridRoot, GridContextProvider, useGridSelector } from '@mui/x-data-grid';
 import { useDataGridProComponent } from './useDataGridProComponent';
 import { useDataGridProProps } from './useDataGridProProps';
 import { DataGridProVirtualScroller } from '../components/DataGridProVirtualScroller';
-import { DataGridProColumnHeaders } from '../components/DataGridProColumnHeaders';
 import { getReleaseInfo } from '../utils/releaseInfo';
+import { gridPinnedColumnsSelector } from '../hooks/features/columnPinning/gridColumnPinningSelector';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const releaseInfo = getReleaseInfo();
@@ -15,6 +15,7 @@ const DataGridProRaw = /*#__PURE__*/React.forwardRef(function DataGridPro(inProp
   const props = useDataGridProProps(inProps);
   const privateApiRef = useDataGridProComponent(props.apiRef, props);
   useLicenseVerifier('x-data-grid-pro', releaseInfo);
+  const pinnedColumns = useGridSelector(privateApiRef, gridPinnedColumnsSelector);
   return /*#__PURE__*/_jsx(GridContextProvider, {
     privateApiRef: privateApiRef,
     props: props,
@@ -24,8 +25,10 @@ const DataGridProRaw = /*#__PURE__*/React.forwardRef(function DataGridPro(inProp
       sx: props.sx,
       ref: ref,
       children: [/*#__PURE__*/_jsx(GridHeader, {}), /*#__PURE__*/_jsx(GridBody, {
-        ColumnHeadersComponent: DataGridProColumnHeaders,
         VirtualScrollerComponent: DataGridProVirtualScroller,
+        ColumnHeadersProps: {
+          pinnedColumns
+        },
         children: /*#__PURE__*/_jsx(Watermark, {
           packageName: "x-data-grid-pro",
           releaseInfo: releaseInfo
@@ -115,10 +118,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,
   /**
@@ -218,7 +223,6 @@ DataGridProRaw.propTypes = {
   experimentalFeatures: PropTypes.shape({
     columnGrouping: PropTypes.bool,
     lazyLoading: PropTypes.bool,
-    rowPinning: PropTypes.bool,
     warnIfFocusStateIsNotSynced: PropTypes.bool
   }),
   /**
@@ -771,6 +775,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/modern/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,27 @@ 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];
-    });
-    return mergedComponents;
-  }, [themedProps.components]);
+  const slots = React.useMemo(() => computeSlots({
+    defaultSlots,
+    slots: themedProps.slots,
+    components
+  }), [components, themedProps.slots]);
   return React.useMemo(() => _extends({}, DATA_GRID_PRO_PROPS_DEFAULT_VALUES, themedProps, {
     localeText,
-    components,
+    slots,
+    slotProps: themedProps.slotProps ?? componentsProps,
     signature: 'DataGridPro'
-  }), [themedProps, localeText, components]);
+  }), [themedProps, localeText, slots, componentsProps]);
 };

package/modern/components/DataGridProVirtualScroller.js

@@ -108,6 +108,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',
@@ -133,7 +138,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
   });
@@ -171,7 +176,7 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
       bottomPinnedRowsRenderZoneRef.current.style.transform = `translate3d(${left}px, 0px, 0px)`;
     }
   }, []);
-  const getRowProps = id => {
+  const getRowProps = React.useCallback(id => {
     if (!expandedRowIds.includes(id)) {
       return null;
     }
@@ -181,15 +186,16 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
         marginBottom: height
       }
     };
-  };
+  }, [detailPanelsHeights, expandedRowIds]);
   const pinnedColumns = useGridSelector(apiRef, gridPinnedColumnsSelector);
   const [leftPinnedColumns, rightPinnedColumns] = filterColumns(pinnedColumns, visibleColumnFields, theme.direction === 'rtl');
   const pinnedRows = useGridSelector(apiRef, gridPinnedRowsSelector);
   const topPinnedRowsData = React.useMemo(() => pinnedRows?.top || [], [pinnedRows?.top]);
   const bottomPinnedRowsData = React.useMemo(() => pinnedRows?.bottom || [], [pinnedRows?.bottom]);
-  const classes = useUtilityClasses({
+  const ownerState = _extends({}, rootProps, {
     classes: rootProps.classes
   });
+  const classes = useUtilityClasses(ownerState);
   const {
     renderContext,
     getRows,
@@ -281,9 +287,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
@@ -291,10 +297,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,
@@ -310,10 +316,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,
@@ -327,10 +333,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,
@@ -344,10 +350,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({
@@ -360,13 +366,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
@@ -374,10 +381,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,
@@ -394,10 +401,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/modern/components/{DataGridProColumnHeaders.js → GridColumnHeaders.js}

@@ -1,14 +1,15 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["style", "className", "innerRef"];
+const _excluded = ["style", "className", "innerRef", "visibleColumns", "sortColumnLookup", "filterColumnLookup", "columnPositions", "columnHeaderTabIndexState", "columnGroupHeaderTabIndexState", "columnHeaderFocus", "columnGroupHeaderFocus", "densityFactor", "headerGroupingMaxDepth", "columnMenuState", "columnVisibility", "columnGroupsHeaderStructure", "hasOtherElementInTabSequence", "pinnedColumns"];
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses, unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import { styled, alpha, useTheme } from '@mui/material/styles';
-import { getDataGridUtilityClass, gridClasses, useGridSelector, useGridApiEventHandler, gridVisibleColumnFieldsSelector, GridColumnHeaderSeparatorSides } from '@mui/x-data-grid';
-import { GridColumnHeaders, GridColumnHeadersInner, useGridColumnHeaders } from '@mui/x-data-grid/internals';
+import { getDataGridUtilityClass, gridClasses, useGridApiEventHandler, GridColumnHeaderSeparatorSides } from '@mui/x-data-grid';
+import { GridBaseColumnHeaders, GridColumnHeadersInner, useGridColumnHeaders } from '@mui/x-data-grid/internals';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
-import { gridPinnedColumnsSelector, GridPinnedPosition } from '../hooks/features/columnPinning';
+import { GridPinnedPosition } from '../hooks/features/columnPinning';
 import { filterColumns } from './DataGridProVirtualScroller';
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -65,15 +66,36 @@ const GridColumnHeadersPinnedColumnHeaders = styled('div', {
   borderLeftWidth: '1px',
   borderLeftStyle: 'solid'
 }));
-export const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function DataGridProColumnHeaders(props, ref) {
+GridColumnHeadersPinnedColumnHeaders.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  ownerState: PropTypes.object.isRequired
+};
+const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeaders(props, ref) {
   const {
       className,
-      innerRef
+      innerRef,
+      visibleColumns,
+      sortColumnLookup,
+      filterColumnLookup,
+      columnPositions,
+      columnHeaderTabIndexState,
+      columnGroupHeaderTabIndexState,
+      columnHeaderFocus,
+      columnGroupHeaderFocus,
+      densityFactor,
+      headerGroupingMaxDepth,
+      columnMenuState,
+      columnVisibility,
+      columnGroupsHeaderStructure,
+      hasOtherElementInTabSequence,
+      pinnedColumns
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const rootProps = useGridRootProps();
   const apiRef = useGridApiContext();
-  const visibleColumnFields = useGridSelector(apiRef, gridVisibleColumnFieldsSelector);
   const [scrollbarSize, setScrollbarSize] = React.useState(0);
   const theme = useTheme();
   const handleContentSizeChange = useEventCallback(() => {
@@ -87,7 +109,9 @@ export const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function D
     }
   });
   useGridApiEventHandler(apiRef, 'virtualScrollerContentSizeChange', handleContentSizeChange);
-  const pinnedColumns = useGridSelector(apiRef, gridPinnedColumnsSelector);
+  const visibleColumnFields = React.useMemo(() => visibleColumns.map(({
+    field
+  }) => field), [visibleColumns]);
   const [leftPinnedColumns, rightPinnedColumns] = filterColumns(pinnedColumns, visibleColumnFields, theme.direction === 'rtl');
   const {
     isDragging,
@@ -98,13 +122,27 @@ export const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function D
     getColumnGroupHeaders
   } = useGridColumnHeaders({
     innerRef,
+    visibleColumns,
+    sortColumnLookup,
+    filterColumnLookup,
+    columnPositions,
+    columnHeaderTabIndexState,
+    hasOtherElementInTabSequence,
+    columnGroupHeaderTabIndexState,
+    columnHeaderFocus,
+    columnGroupHeaderFocus,
+    densityFactor,
+    headerGroupingMaxDepth,
+    columnMenuState,
+    columnVisibility,
+    columnGroupsHeaderStructure,
     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,
@@ -118,16 +156,16 @@ export const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function D
   const pinnedColumnHeadersProps = {
     role: innerProps.role
   };
-  return /*#__PURE__*/_jsxs(GridColumnHeaders, _extends({
+  return /*#__PURE__*/_jsxs(GridBaseColumnHeaders, _extends({
     ref: ref,
     className: className
   }, 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,
@@ -153,10 +191,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
@@ -176,4 +214,49 @@ export const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function D
       })]
     }))]
   }));
-});
+});
+process.env.NODE_ENV !== "production" ? GridColumnHeaders.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  columnGroupHeaderFocus: PropTypes.shape({
+    depth: PropTypes.number.isRequired,
+    field: PropTypes.string.isRequired
+  }),
+  columnGroupHeaderTabIndexState: PropTypes.shape({
+    depth: PropTypes.number.isRequired,
+    field: PropTypes.string.isRequired
+  }),
+  columnGroupsHeaderStructure: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.shape({
+    columnFields: PropTypes.arrayOf(PropTypes.string).isRequired,
+    groupId: PropTypes.string
+  }))).isRequired,
+  columnHeaderFocus: PropTypes.shape({
+    field: PropTypes.string.isRequired
+  }),
+  columnHeaderTabIndexState: PropTypes.shape({
+    field: PropTypes.string.isRequired
+  }),
+  columnMenuState: PropTypes.shape({
+    field: PropTypes.string,
+    open: PropTypes.bool.isRequired
+  }).isRequired,
+  columnPositions: PropTypes.arrayOf(PropTypes.number).isRequired,
+  columnVisibility: PropTypes.object.isRequired,
+  densityFactor: PropTypes.number.isRequired,
+  filterColumnLookup: PropTypes.object.isRequired,
+  hasOtherElementInTabSequence: PropTypes.bool.isRequired,
+  headerGroupingMaxDepth: PropTypes.number.isRequired,
+  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.object
+  })]),
+  minColumnIndex: PropTypes.number,
+  pinnedColumns: PropTypes.shape({
+    left: PropTypes.arrayOf(PropTypes.string),
+    right: PropTypes.arrayOf(PropTypes.string)
+  }).isRequired,
+  sortColumnLookup: PropTypes.object.isRequired,
+  visibleColumns: PropTypes.arrayOf(PropTypes.object).isRequired
+} : void 0;
+export { GridColumnHeaders };

package/modern/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/modern/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/modern/components/GridDetailPanelToggleCell.js

@@ -31,14 +31,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.componentsProps?.baseIconButton, {
+  }, rootProps.slotProps?.baseIconButton, {
     children: /*#__PURE__*/_jsx(Icon, {
       fontSize: "inherit"
     })

package/modern/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/modern/components/GridTreeDataGroupingCell.js

@@ -35,7 +35,7 @@ function GridTreeDataGroupingCell(props) {
   const classes = useUtilityClasses(ownerState);
   const filteredDescendantCountLookup = useGridSelector(apiRef, gridFilteredDescendantCountLookupSelector);
   const filteredDescendantCount = filteredDescendantCountLookup[rowNode.id] ?? 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);
@@ -49,12 +49,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?.componentsProps?.baseIconButton, {
+      }, rootProps?.slotProps?.baseIconButton, {
         children: /*#__PURE__*/_jsx(Icon, {
           fontSize: "inherit"
         })

package/modern/components/index.js

@@ -2,4 +2,4 @@
 export * from './GridTreeDataGroupingCell';
 export * from './GridColumnMenuPinningItem';
 export * from './GridDetailPanelToggleCell';
-export * from './icons';
+export * from '../material/icons';

package/modern/constants/dataGridProDefaultSlotsComponents.js

@@ -1,11 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { DATA_GRID_DEFAULT_SLOTS_COMPONENTS } from '@mui/x-data-grid/internals';
-import { GridPushPinRightIcon, GridPushPinLeftIcon } from '../components';
 import { GridProColumnMenu } from '../components/GridProColumnMenu';
-export const DEFAULT_GRID_PRO_ICON_SLOTS_COMPONENTS = {
-  ColumnMenuPinRightIcon: GridPushPinRightIcon,
-  ColumnMenuPinLeftIcon: GridPushPinLeftIcon
-};
-export const DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS = _extends({}, DATA_GRID_DEFAULT_SLOTS_COMPONENTS, DEFAULT_GRID_PRO_ICON_SLOTS_COMPONENTS, {
-  ColumnMenu: GridProColumnMenu
+import { GridColumnHeaders } from '../components/GridColumnHeaders';
+import materialSlots from '../material';
+export const DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS = _extends({}, DATA_GRID_DEFAULT_SLOTS_COMPONENTS, materialSlots, {
+  ColumnMenu: GridProColumnMenu,
+  ColumnHeaders: GridColumnHeaders
 });

package/modern/hooks/features/rowPinning/useGridRowPinning.js

@@ -21,9 +21,6 @@ function createPinnedRowsInternalCache(pinnedRows, getRowId) {
   return cache;
 }
 export const rowPinningStateInitializer = (state, props, apiRef) => {
-  if (!props.experimentalFeatures?.rowPinning) {
-    return state;
-  }
   apiRef.current.caches.pinnedRows = createPinnedRowsInternalCache(props.pinnedRows, props.getRowId);
   return _extends({}, state, {
     rows: _extends({}, state.rows, {
@@ -38,12 +35,9 @@ export const rowPinningStateInitializer = (state, props, apiRef) => {
 };
 export const useGridRowPinning = (apiRef, props) => {
   const setPinnedRows = React.useCallback(newPinnedRows => {
-    if (!props.experimentalFeatures?.rowPinning) {
-      return;
-    }
     apiRef.current.caches.pinnedRows = createPinnedRowsInternalCache(newPinnedRows, props.getRowId);
     apiRef.current.requestPipeProcessorsApplication('hydrateRows');
-  }, [apiRef, props.experimentalFeatures?.rowPinning, props.getRowId]);
+  }, [apiRef, props.getRowId]);
   useGridApiMethod(apiRef, {
     unstable_setPinnedRows: setPinnedRows
   }, 'public');

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v6.0.0-beta.4
+ * @mui/x-data-grid-pro v6.0.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the
@@ -21,4 +21,5 @@ export * from './models';
 export * from './components';
 export * from './utils';
 export { useGridApiContext, useGridApiRef, useGridRootProps } from './typeOverloads/reexports';
-export { GridColumnMenu, GRID_COLUMN_MENU_COMPONENTS, GRID_COLUMN_MENU_COMPONENTS_PROPS } from './components/reexports';
+export { GridColumnMenu, GRID_COLUMN_MENU_COMPONENTS, GRID_COLUMN_MENU_COMPONENTS_PROPS } from './components/reexports';
+export { GridColumnHeaders } from './components/GridColumnHeaders';