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

package/modern/internals/index.js

@@ -1,6 +1,6 @@
 export * from '@mui/x-data-grid/internals';
 export { DataGridProVirtualScroller } from '../components/DataGridProVirtualScroller';
-export { DataGridProColumnHeaders } from '../components/DataGridProColumnHeaders';
+export { GridColumnHeaders } from '../components/GridColumnHeaders';
 export { DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS } from '../constants/dataGridProDefaultSlotsComponents';
 export { useGridColumnResize, columnResizeStateInitializer } from '../hooks/features/columnResize/useGridColumnResize';
 export { useGridColumnPinning, columnPinningStateInitializer } from '../hooks/features/columnPinning/useGridColumnPinning';

package/modern/material/index.js

@@ -0,0 +1,8 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { GridPushPinRightIcon, GridPushPinLeftIcon } from './icons';
+const iconSlots = {
+  ColumnMenuPinRightIcon: GridPushPinRightIcon,
+  ColumnMenuPinLeftIcon: GridPushPinLeftIcon
+};
+const materialSlots = _extends({}, iconSlots);
+export default materialSlots;

package/modern/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTY3NjQ5ODQwMDAwMA==";
+  const releaseInfo = "MTY3Nzc5ODAwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/node/DataGridPro/DataGridPro.js

@@ -13,8 +13,8 @@ var _xDataGrid = require("@mui/x-data-grid");
 var _useDataGridProComponent = require("./useDataGridProComponent");
 var _useDataGridProProps = require("./useDataGridProProps");
 var _DataGridProVirtualScroller = require("../components/DataGridProVirtualScroller");
-var _DataGridProColumnHeaders = require("../components/DataGridProColumnHeaders");
 var _releaseInfo = require("../utils/releaseInfo");
+var _gridColumnPinningSelector = require("../hooks/features/columnPinning/gridColumnPinningSelector");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -23,6 +23,7 @@ const DataGridProRaw = /*#__PURE__*/React.forwardRef(function DataGridPro(inProp
   const props = (0, _useDataGridProProps.useDataGridProProps)(inProps);
   const privateApiRef = (0, _useDataGridProComponent.useDataGridProComponent)(props.apiRef, props);
   (0, _xLicensePro.useLicenseVerifier)('x-data-grid-pro', releaseInfo);
+  const pinnedColumns = (0, _xDataGrid.useGridSelector)(privateApiRef, _gridColumnPinningSelector.gridPinnedColumnsSelector);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGrid.GridContextProvider, {
     privateApiRef: privateApiRef,
     props: props,
@@ -32,8 +33,10 @@ const DataGridProRaw = /*#__PURE__*/React.forwardRef(function DataGridPro(inProp
       sx: props.sx,
       ref: ref,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGrid.GridHeader, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGrid.GridBody, {
-        ColumnHeadersComponent: _DataGridProColumnHeaders.DataGridProColumnHeaders,
         VirtualScrollerComponent: _DataGridProVirtualScroller.DataGridProVirtualScroller,
+        ColumnHeadersProps: {
+          pinnedColumns
+        },
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_xLicensePro.Watermark, {
           packageName: "x-data-grid-pro",
           releaseInfo: releaseInfo
@@ -124,10 +127,12 @@ DataGridProRaw.propTypes = {
   columnVisibilityModel: _propTypes.default.object,
   /**
    * Overrideable components.
+   * @deprecated Use the `slots` prop instead.
    */
   components: _propTypes.default.object,
   /**
    * Overrideable components props dynamically passed to the component at rendering.
+   * @deprecated Use the `slotProps` prop instead.
    */
   componentsProps: _propTypes.default.object,
   /**
@@ -227,7 +232,6 @@ DataGridProRaw.propTypes = {
   experimentalFeatures: _propTypes.default.shape({
     columnGrouping: _propTypes.default.bool,
     lazyLoading: _propTypes.default.bool,
-    rowPinning: _propTypes.default.bool,
     warnIfFocusStateIsNotSynced: _propTypes.default.bool
   }),
   /**
@@ -780,6 +784,14 @@ DataGridProRaw.propTypes = {
    * @default false
    */
   showColumnVerticalBorder: _propTypes.default.bool,
+  /**
+   * Overrideable components props dynamically passed to the component at rendering.
+   */
+  slotProps: _propTypes.default.object,
+  /**
+   * Overrideable components.
+   */
+  slots: _propTypes.default.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/node/DataGridPro/useDataGridProProps.js

@@ -5,11 +5,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useDataGridProProps = exports.DATA_GRID_PRO_PROPS_DEFAULT_VALUES = void 0;
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
 var _xDataGrid = require("@mui/x-data-grid");
+var _internals = require("@mui/x-data-grid/internals");
 var _dataGridProDefaultSlotsComponents = require("../constants/dataGridProDefaultSlotsComponents");
+const _excluded = ["components", "componentsProps"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /**
@@ -28,27 +31,28 @@ const DATA_GRID_PRO_PROPS_DEFAULT_VALUES = (0, _extends2.default)({}, _xDataGrid
   getDetailPanelHeight: () => 500
 });
 exports.DATA_GRID_PRO_PROPS_DEFAULT_VALUES = DATA_GRID_PRO_PROPS_DEFAULT_VALUES;
+const defaultSlots = (0, _internals.uncapitalizeObjectKeys)(_dataGridProDefaultSlotsComponents.DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS);
 const useDataGridProProps = inProps => {
-  const themedProps = (0, _styles.useThemeProps)({
-    props: inProps,
-    name: 'MuiDataGrid'
-  });
+  const _useThemeProps = (0, _styles.useThemeProps)({
+      props: inProps,
+      name: 'MuiDataGrid'
+    }),
+    {
+      components,
+      componentsProps
+    } = _useThemeProps,
+    themedProps = (0, _objectWithoutPropertiesLoose2.default)(_useThemeProps, _excluded);
   const localeText = React.useMemo(() => (0, _extends2.default)({}, _xDataGrid.GRID_DEFAULT_LOCALE_TEXT, themedProps.localeText), [themedProps.localeText]);
-  const components = React.useMemo(() => {
-    const overrides = themedProps.components;
-    if (!overrides) {
-      return (0, _extends2.default)({}, _dataGridProDefaultSlotsComponents.DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS);
-    }
-    const mergedComponents = {};
-    Object.entries(_dataGridProDefaultSlotsComponents.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(() => (0, _internals.computeSlots)({
+    defaultSlots,
+    slots: themedProps.slots,
+    components
+  }), [components, themedProps.slots]);
   return React.useMemo(() => (0, _extends2.default)({}, DATA_GRID_PRO_PROPS_DEFAULT_VALUES, themedProps, {
     localeText,
-    components,
+    slots,
+    slotProps: themedProps.slotProps ?? componentsProps,
     signature: 'DataGridPro'
-  }), [themedProps, localeText, components]);
+  }), [themedProps, localeText, slots, componentsProps]);
 };
 exports.useDataGridProProps = useDataGridProProps;

package/node/components/DataGridProVirtualScroller.js

@@ -117,6 +117,11 @@ const VirtualScrollerPinnedColumns = (0, _styles.styled)('div', {
     borderLeftStyle: 'solid'
   });
 });
+var PinnedRowsPosition;
+(function (PinnedRowsPosition) {
+  PinnedRowsPosition["top"] = "top";
+  PinnedRowsPosition["bottom"] = "bottom";
+})(PinnedRowsPosition || (PinnedRowsPosition = {}));
 const VirtualScrollerPinnedRows = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'PinnedRows',
@@ -142,7 +147,7 @@ const VirtualScrollerPinnedRows = (0, _styles.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
   });
@@ -180,7 +185,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;
     }
@@ -190,15 +195,16 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
         marginBottom: height
       }
     };
-  };
+  }, [detailPanelsHeights, expandedRowIds]);
   const pinnedColumns = (0, _xDataGrid.useGridSelector)(apiRef, _columnPinning.gridPinnedColumnsSelector);
   const [leftPinnedColumns, rightPinnedColumns] = filterColumns(pinnedColumns, visibleColumnFields, theme.direction === 'rtl');
   const pinnedRows = (0, _xDataGrid.useGridSelector)(apiRef, _gridRowPinningSelector.gridPinnedRowsSelector);
   const topPinnedRowsData = React.useMemo(() => pinnedRows?.top || [], [pinnedRows?.top]);
   const bottomPinnedRowsData = React.useMemo(() => pinnedRows?.bottom || [], [pinnedRows?.bottom]);
-  const classes = useUtilityClasses({
+  const ownerState = (0, _extends2.default)({}, rootProps, {
     classes: rootProps.classes
   });
+  const classes = useUtilityClasses(ownerState);
   const {
     renderContext,
     getRows,
@@ -290,9 +296,9 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.GridVirtualScroller, (0, _extends2.default)({}, getRootProps(other), {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGrid.GridOverlays, {}), topPinnedRowsData.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(VirtualScrollerPinnedRows, {
       className: classes.topPinnedRows,
-      ownerState: {
-        position: 'top'
-      },
+      ownerState: (0, _extends2.default)({}, ownerState, {
+        position: PinnedRowsPosition.top
+      }),
       style: {
         width: contentProps.style.width,
         height: pinnedRowsHeight.top
@@ -300,10 +306,10 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
       role: "rowgroup",
       children: [leftRenderContext && /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerPinnedColumns, {
         className: classes.leftPinnedColumns,
-        ownerState: {
+        ownerState: (0, _extends2.default)({}, ownerState, {
           side: _columnPinning.GridPinnedPosition.left,
           showCellVerticalBorder: rootProps.showCellVerticalBorder
-        },
+        }),
         children: getRows({
           renderContext: leftRenderContext,
           minFirstColumn: leftRenderContext.firstColumnIndex,
@@ -319,10 +325,10 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
         children: topPinnedRows
       }), rightRenderContext && /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerPinnedColumns, {
         className: classes.rightPinnedColumns,
-        ownerState: {
+        ownerState: (0, _extends2.default)({}, ownerState, {
           side: _columnPinning.GridPinnedPosition.right,
           showCellVerticalBorder: rootProps.showCellVerticalBorder
-        },
+        }),
         children: getRows({
           renderContext: rightRenderContext,
           minFirstColumn: rightRenderContext.firstColumnIndex,
@@ -336,10 +342,10 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
       children: [leftRenderContext && /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerPinnedColumns, {
         ref: leftColumns,
         className: classes.leftPinnedColumns,
-        ownerState: {
+        ownerState: (0, _extends2.default)({}, ownerState, {
           side: _columnPinning.GridPinnedPosition.left,
           showCellVerticalBorder: rootProps.showCellVerticalBorder
-        },
+        }),
         style: pinnedColumnsStyle,
         children: getRows({
           renderContext: leftRenderContext,
@@ -353,10 +359,10 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
         children: mainRows
       })), rightRenderContext && /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerPinnedColumns, {
         ref: rightColumns,
-        ownerState: {
+        ownerState: (0, _extends2.default)({}, ownerState, {
           side: _columnPinning.GridPinnedPosition.right,
           showCellVerticalBorder: rootProps.showCellVerticalBorder
-        },
+        }),
         className: classes.rightPinnedColumns,
         style: pinnedColumnsStyle,
         children: getRows({
@@ -369,13 +375,14 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
         })
       }), detailPanels.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerDetailPanels, {
         className: classes.detailPanels,
+        ownerState: ownerState,
         children: detailPanels
       })]
     })), bottomPinnedRowsData.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(VirtualScrollerPinnedRows, {
       className: classes.bottomPinnedRows,
-      ownerState: {
-        position: 'bottom'
-      },
+      ownerState: (0, _extends2.default)({}, ownerState, {
+        position: PinnedRowsPosition.bottom
+      }),
       style: {
         width: contentProps.style.width,
         height: pinnedRowsHeight.bottom
@@ -383,10 +390,10 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
       role: "rowgroup",
       children: [leftRenderContext && /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerPinnedColumns, {
         className: classes.leftPinnedColumns,
-        ownerState: {
+        ownerState: (0, _extends2.default)({}, ownerState, {
           side: _columnPinning.GridPinnedPosition.left,
           showCellVerticalBorder: rootProps.showCellVerticalBorder
-        },
+        }),
         children: getRows({
           renderContext: leftRenderContext,
           minFirstColumn: leftRenderContext.firstColumnIndex,
@@ -403,10 +410,10 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
         children: bottomPinnedRows
       }), rightRenderContext && /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerPinnedColumns, {
         className: classes.rightPinnedColumns,
-        ownerState: {
+        ownerState: (0, _extends2.default)({}, ownerState, {
           side: _columnPinning.GridPinnedPosition.right,
           showCellVerticalBorder: rootProps.showCellVerticalBorder
-        },
+        }),
         children: getRows({
           renderContext: rightRenderContext,
           minFirstColumn: rightRenderContext.firstColumnIndex,

package/node/components/{DataGridProColumnHeaders.js → GridColumnHeaders.js}

@@ -4,10 +4,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DataGridProColumnHeaders = void 0;
+exports.GridColumnHeaders = void 0;
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
 var _styles = require("@mui/material/styles");
 var _xDataGrid = require("@mui/x-data-grid");
@@ -17,7 +18,7 @@ var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 var _columnPinning = require("../hooks/features/columnPinning");
 var _DataGridProVirtualScroller = require("./DataGridProVirtualScroller");
 var _jsxRuntime = require("react/jsx-runtime");
-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"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const useUtilityClasses = ownerState => {
@@ -74,15 +75,36 @@ const GridColumnHeadersPinnedColumnHeaders = (0, _styles.styled)('div', {
   borderLeftWidth: '1px',
   borderLeftStyle: 'solid'
 }));
-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.default.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 = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
-  const visibleColumnFields = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridVisibleColumnFieldsSelector);
   const [scrollbarSize, setScrollbarSize] = React.useState(0);
   const theme = (0, _styles.useTheme)();
   const handleContentSizeChange = (0, _utils.unstable_useEventCallback)(() => {
@@ -96,7 +118,9 @@ const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function DataGrid
     }
   });
   (0, _xDataGrid.useGridApiEventHandler)(apiRef, 'virtualScrollerContentSizeChange', handleContentSizeChange);
-  const pinnedColumns = (0, _xDataGrid.useGridSelector)(apiRef, _columnPinning.gridPinnedColumnsSelector);
+  const visibleColumnFields = React.useMemo(() => visibleColumns.map(({
+    field
+  }) => field), [visibleColumns]);
   const [leftPinnedColumns, rightPinnedColumns] = (0, _DataGridProVirtualScroller.filterColumns)(pinnedColumns, visibleColumnFields, theme.direction === 'rtl');
   const {
     isDragging,
@@ -107,13 +131,27 @@ const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function DataGrid
     getColumnGroupHeaders
   } = (0, _internals.useGridColumnHeaders)({
     innerRef,
+    visibleColumns,
+    sortColumnLookup,
+    filterColumnLookup,
+    columnPositions,
+    columnHeaderTabIndexState,
+    hasOtherElementInTabSequence,
+    columnGroupHeaderTabIndexState,
+    columnHeaderFocus,
+    columnGroupHeaderFocus,
+    densityFactor,
+    headerGroupingMaxDepth,
+    columnMenuState,
+    columnVisibility,
+    columnGroupsHeaderStructure,
     minColumnIndex: leftPinnedColumns.length
   });
-  const ownerState = {
+  const ownerState = (0, _extends2.default)({}, rootProps, {
     leftPinnedColumns,
     rightPinnedColumns,
     classes: rootProps.classes
-  };
+  });
   const classes = useUtilityClasses(ownerState);
   const leftRenderContext = renderContext && leftPinnedColumns.length ? (0, _extends2.default)({}, renderContext, {
     firstColumnIndex: 0,
@@ -127,16 +165,16 @@ const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function DataGrid
   const pinnedColumnHeadersProps = {
     role: innerProps.role
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.GridColumnHeaders, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.GridBaseColumnHeaders, (0, _extends2.default)({
     ref: ref,
     className: className
   }, getRootProps(other), {
     children: [leftRenderContext && /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridColumnHeadersPinnedColumnHeaders, (0, _extends2.default)({
       className: classes.leftPinnedColumns,
-      ownerState: {
+      ownerState: (0, _extends2.default)({}, ownerState, {
         side: _columnPinning.GridPinnedPosition.left,
         showCellVerticalBorder: rootProps.showCellVerticalBorder
-      }
+      })
     }, pinnedColumnHeadersProps, {
       children: [getColumnGroupHeaders({
         renderContext: leftRenderContext,
@@ -162,10 +200,10 @@ const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function DataGrid
         maxLastColumn: visibleColumnFields.length - rightPinnedColumns.length
       })]
     })), rightRenderContext && /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridColumnHeadersPinnedColumnHeaders, (0, _extends2.default)({
-      ownerState: {
+      ownerState: (0, _extends2.default)({}, ownerState, {
         side: _columnPinning.GridPinnedPosition.right,
         showCellVerticalBorder: rootProps.showCellVerticalBorder
-      },
+      }),
       className: classes.rightPinnedColumns,
       style: {
         paddingRight: scrollbarSize
@@ -186,4 +224,48 @@ const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function DataGrid
     }))]
   }));
 });
-exports.DataGridProColumnHeaders = DataGridProColumnHeaders;
+exports.GridColumnHeaders = GridColumnHeaders;
+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.default.shape({
+    depth: _propTypes.default.number.isRequired,
+    field: _propTypes.default.string.isRequired
+  }),
+  columnGroupHeaderTabIndexState: _propTypes.default.shape({
+    depth: _propTypes.default.number.isRequired,
+    field: _propTypes.default.string.isRequired
+  }),
+  columnGroupsHeaderStructure: _propTypes.default.arrayOf(_propTypes.default.arrayOf(_propTypes.default.shape({
+    columnFields: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+    groupId: _propTypes.default.string
+  }))).isRequired,
+  columnHeaderFocus: _propTypes.default.shape({
+    field: _propTypes.default.string.isRequired
+  }),
+  columnHeaderTabIndexState: _propTypes.default.shape({
+    field: _propTypes.default.string.isRequired
+  }),
+  columnMenuState: _propTypes.default.shape({
+    field: _propTypes.default.string,
+    open: _propTypes.default.bool.isRequired
+  }).isRequired,
+  columnPositions: _propTypes.default.arrayOf(_propTypes.default.number).isRequired,
+  columnVisibility: _propTypes.default.object.isRequired,
+  densityFactor: _propTypes.default.number.isRequired,
+  filterColumnLookup: _propTypes.default.object.isRequired,
+  hasOtherElementInTabSequence: _propTypes.default.bool.isRequired,
+  headerGroupingMaxDepth: _propTypes.default.number.isRequired,
+  innerRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
+    current: _propTypes.default.object
+  })]),
+  minColumnIndex: _propTypes.default.number,
+  pinnedColumns: _propTypes.default.shape({
+    left: _propTypes.default.arrayOf(_propTypes.default.string),
+    right: _propTypes.default.arrayOf(_propTypes.default.string)
+  }).isRequired,
+  sortColumnLookup: _propTypes.default.object.isRequired,
+  visibleColumns: _propTypes.default.arrayOf(_propTypes.default.object).isRequired
+} : void 0;

package/node/components/GridColumnMenuPinningItem.js

@@ -36,7 +36,7 @@ function GridColumnMenuPinningItem(props) {
   const pinToLeftMenuItem = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
     onClick: pinColumn(_columnPinning.GridPinnedPosition.left),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.ColumnMenuPinLeftIcon, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuPinLeftIcon, {
         fontSize: "small"
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
@@ -46,7 +46,7 @@ function GridColumnMenuPinningItem(props) {
   const pinToRightMenuItem = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
     onClick: pinColumn(_columnPinning.GridPinnedPosition.right),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.ColumnMenuPinRightIcon, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuPinRightIcon, {
         fontSize: "small"
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
@@ -60,7 +60,7 @@ function GridColumnMenuPinningItem(props) {
   if (side) {
     const otherSide = side === _columnPinning.GridPinnedPosition.right ? _columnPinning.GridPinnedPosition.left : _columnPinning.GridPinnedPosition.right;
     const label = otherSide === _columnPinning.GridPinnedPosition.right ? 'pinToRight' : 'pinToLeft';
-    const Icon = side === _columnPinning.GridPinnedPosition.right ? rootProps.components.ColumnMenuPinLeftIcon : rootProps.components.ColumnMenuPinRightIcon;
+    const Icon = side === _columnPinning.GridPinnedPosition.right ? rootProps.slots.columnMenuPinLeftIcon : rootProps.slots.columnMenuPinRightIcon;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
         onClick: pinColumn(otherSide),

package/node/components/GridDetailPanel.js

@@ -10,6 +10,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
 var _styles = require("@mui/material/styles");
+var _xDataGrid = require("@mui/x-data-grid");
 var _useGridPrivateApiContext = require("../hooks/utils/useGridPrivateApiContext");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["rowId", "height", "style"];
@@ -37,6 +38,8 @@ function GridDetailPanel(props) {
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const ref = React.useRef();
+  const rootProps = (0, _xDataGrid.useGridRootProps)();
+  const ownerState = rootProps;
   React.useLayoutEffect(() => {
     if (height === 'auto' && ref.current && typeof ResizeObserver === 'undefined') {
       // Fallback for IE
@@ -61,6 +64,7 @@ function GridDetailPanel(props) {
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(DetailPanel, (0, _extends2.default)({
     ref: ref,
+    ownerState: ownerState,
     style: style
   }, other));
 }

package/node/components/GridDetailPanelToggleCell.js

@@ -40,14 +40,14 @@ function GridDetailPanelToggleCell(props) {
   const classes = useUtilityClasses(ownerState);
   const contentCache = (0, _xDataGrid.useGridSelector)(apiRef, _gridDetailPanelSelector.gridDetailPanelExpandedRowsContentCacheSelector);
   const hasContent = /*#__PURE__*/React.isValidElement(contentCache[id]);
-  const Icon = isExpanded ? rootProps.components.DetailPanelCollapseIcon : rootProps.components.DetailPanelExpandIcon;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseIconButton, (0, _extends2.default)({
+  const Icon = isExpanded ? rootProps.slots.detailPanelCollapseIcon : rootProps.slots.detailPanelExpandIcon;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
     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__*/(0, _jsxRuntime.jsx)(Icon, {
       fontSize: "inherit"
     })

package/node/components/GridRowReorderCell.js

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

package/node/components/GridTreeDataGroupingCell.js

@@ -43,7 +43,7 @@ function GridTreeDataGroupingCell(props) {
   const classes = useUtilityClasses(ownerState);
   const filteredDescendantCountLookup = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.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);
@@ -57,12 +57,12 @@ function GridTreeDataGroupingCell(props) {
     },
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: classes.toggle,
-      children: filteredDescendantCount > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseIconButton, (0, _extends2.default)({
+      children: filteredDescendantCount > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
         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__*/(0, _jsxRuntime.jsx)(Icon, {
           fontSize: "inherit"
         })

package/node/components/index.js

@@ -36,7 +36,7 @@ Object.keys(_GridDetailPanelToggleCell).forEach(function (key) {
     }
   });
 });
-var _icons = require("./icons");
+var _icons = require("../material/icons");
 Object.keys(_icons).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _icons[key]) return;

package/node/constants/dataGridProDefaultSlotsComponents.js

@@ -4,17 +4,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DEFAULT_GRID_PRO_ICON_SLOTS_COMPONENTS = exports.DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS = void 0;
+exports.DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _internals = require("@mui/x-data-grid/internals");
-var _components = require("../components");
 var _GridProColumnMenu = require("../components/GridProColumnMenu");
-const DEFAULT_GRID_PRO_ICON_SLOTS_COMPONENTS = {
-  ColumnMenuPinRightIcon: _components.GridPushPinRightIcon,
-  ColumnMenuPinLeftIcon: _components.GridPushPinLeftIcon
-};
-exports.DEFAULT_GRID_PRO_ICON_SLOTS_COMPONENTS = DEFAULT_GRID_PRO_ICON_SLOTS_COMPONENTS;
-const DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS = (0, _extends2.default)({}, _internals.DATA_GRID_DEFAULT_SLOTS_COMPONENTS, DEFAULT_GRID_PRO_ICON_SLOTS_COMPONENTS, {
-  ColumnMenu: _GridProColumnMenu.GridProColumnMenu
+var _GridColumnHeaders = require("../components/GridColumnHeaders");
+var _material = _interopRequireDefault(require("../material"));
+const DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS = (0, _extends2.default)({}, _internals.DATA_GRID_DEFAULT_SLOTS_COMPONENTS, _material.default, {
+  ColumnMenu: _GridProColumnMenu.GridProColumnMenu,
+  ColumnHeaders: _GridColumnHeaders.GridColumnHeaders
 });
 exports.DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS = DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS;