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

package/components/index.js

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

package/constants/dataGridProDefaultSlotsComponents.d.ts

@@ -1,3 +1,2 @@
-import { GridProSlotsComponent, GridProIconSlotsComponent } from '../models';
-export declare const DEFAULT_GRID_PRO_ICON_SLOTS_COMPONENTS: GridProIconSlotsComponent;
+import type { GridProSlotsComponent } from '../models';
 export declare const DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS: GridProSlotsComponent;

package/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/hooks/features/detailPanel/useGridDetailPanelPreProcessors.js

@@ -20,7 +20,7 @@ export const useGridDetailPanelPreProcessors = (privateApiRef, props) => {
       return columnsState;
     }
 
-    // Othewise, add the toggle column at the beginning
+    // Otherwise, add the toggle column at the beginning
     columnsState.orderedFields = [GRID_DETAIL_PANEL_TOGGLE_FIELD, ...columnsState.orderedFields];
     columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD] = _extends({}, GRID_DETAIL_PANEL_TOGGLE_COL_DEF, {
       headerName: privateApiRef.current.getLocaleText('detailPanelToggle')

package/hooks/features/rowPinning/useGridRowPinning.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 rowPinningStateInitializer: GridStateInitializer<Pick<DataGridProProcessedProps, 'pinnedRows' | 'getRowId' | 'experimentalFeatures'>>;
-export declare const useGridRowPinning: (apiRef: React.MutableRefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, 'pinnedRows' | 'getRowId' | 'experimentalFeatures'>) => void;
+export declare const useGridRowPinning: (apiRef: React.MutableRefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, 'pinnedRows' | 'getRowId'>) => void;

package/hooks/features/rowPinning/useGridRowPinning.js

@@ -22,10 +22,7 @@ function createPinnedRowsInternalCache(pinnedRows, getRowId) {
   return cache;
 }
 export const rowPinningStateInitializer = (state, props, apiRef) => {
-  var _props$experimentalFe, _state$rows;
-  if (!((_props$experimentalFe = props.experimentalFeatures) != null && _props$experimentalFe.rowPinning)) {
-    return state;
-  }
+  var _state$rows;
   apiRef.current.caches.pinnedRows = createPinnedRowsInternalCache(props.pinnedRows, props.getRowId);
   return _extends({}, state, {
     rows: _extends({}, state.rows, {
@@ -39,15 +36,10 @@ export const rowPinningStateInitializer = (state, props, apiRef) => {
   });
 };
 export const useGridRowPinning = (apiRef, props) => {
-  var _props$experimentalFe3;
   const setPinnedRows = React.useCallback(newPinnedRows => {
-    var _props$experimentalFe2;
-    if (!((_props$experimentalFe2 = props.experimentalFeatures) != null && _props$experimentalFe2.rowPinning)) {
-      return;
-    }
     apiRef.current.caches.pinnedRows = createPinnedRowsInternalCache(newPinnedRows, props.getRowId);
     apiRef.current.requestPipeProcessorsApplication('hydrateRows');
-  }, [apiRef, (_props$experimentalFe3 = props.experimentalFeatures) == null ? void 0 : _props$experimentalFe3.rowPinning, props.getRowId]);
+  }, [apiRef, props.getRowId]);
   useGridApiMethod(apiRef, {
     unstable_setPinnedRows: setPinnedRows
   }, 'public');

package/index.d.ts

@@ -18,3 +18,4 @@ export type { DataGridProProps, GridExperimentalProFeatures } from './models/dat
 export { useGridApiContext, useGridApiRef, useGridRootProps } from './typeOverloads/reexports';
 export type { GridApi, GridInitialState, GridState } from './typeOverloads/reexports';
 export { GridColumnMenu, GRID_COLUMN_MENU_COMPONENTS, GRID_COLUMN_MENU_COMPONENTS_PROPS, } from './components/reexports';
+export { GridColumnHeaders } from './components/GridColumnHeaders';

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v6.0.0-beta.5
+ * @mui/x-data-grid-pro v6.0.1
  *
  * @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';

package/internals/index.d.ts

@@ -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/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/legacy/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";
 var releaseInfo = getReleaseInfo();
@@ -15,6 +15,7 @@ var DataGridProRaw = /*#__PURE__*/React.forwardRef(function DataGridPro(inProps,
   var props = useDataGridProProps(inProps);
   var privateApiRef = useDataGridProComponent(props.apiRef, props);
   useLicenseVerifier('x-data-grid-pro', releaseInfo);
+  var pinnedColumns = useGridSelector(privateApiRef, gridPinnedColumnsSelector);
   return /*#__PURE__*/_jsx(GridContextProvider, {
     privateApiRef: privateApiRef,
     props: props,
@@ -24,8 +25,10 @@ var DataGridProRaw = /*#__PURE__*/React.forwardRef(function DataGridPro(inProps,
       sx: props.sx,
       ref: ref,
       children: [/*#__PURE__*/_jsx(GridHeader, {}), /*#__PURE__*/_jsx(GridBody, {
-        ColumnHeadersComponent: DataGridProColumnHeaders,
         VirtualScrollerComponent: DataGridProVirtualScroller,
+        ColumnHeadersProps: {
+          pinnedColumns: pinnedColumns
+        },
         children: /*#__PURE__*/_jsx(Watermark, {
           packageName: "x-data-grid-pro",
           releaseInfo: releaseInfo
@@ -114,12 +117,12 @@ DataGridProRaw.propTypes = {
    */
   columnVisibilityModel: PropTypes.object,
   /**
-   * Overrideable components.
+   * Overridable components.
    * @deprecated Use the `slots` prop instead.
    */
   components: PropTypes.object,
   /**
-   * Overrideable components props dynamically passed to the component at rendering.
+   * Overridable components props dynamically passed to the component at rendering.
    * @deprecated Use the `slotProps` prop instead.
    */
   componentsProps: PropTypes.object,
@@ -220,7 +223,6 @@ DataGridProRaw.propTypes = {
   experimentalFeatures: PropTypes.shape({
     columnGrouping: PropTypes.bool,
     lazyLoading: PropTypes.bool,
-    rowPinning: PropTypes.bool,
     warnIfFocusStateIsNotSynced: PropTypes.bool
   }),
   /**
@@ -437,7 +439,7 @@ DataGridProRaw.propTypes = {
   onCellKeyDown: PropTypes.func,
   /**
    * Callback fired when the `cellModesModel` prop changes.
-   * @param {GridCellModesModel} cellModesModel Object containig which cells are in "edit" mode.
+   * @param {GridCellModesModel} cellModesModel Object containing which cells are in "edit" mode.
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onCellModesModelChange: PropTypes.func,
@@ -616,7 +618,7 @@ DataGridProRaw.propTypes = {
   onRowEditStop: PropTypes.func,
   /**
    * Callback fired when the `rowModesModel` prop changes.
-   * @param {GridRowModesModel} rowModesModel Object containig which rows are in "edit" mode.
+   * @param {GridRowModesModel} rowModesModel Object containing which rows are in "edit" mode.
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onRowModesModelChange: PropTypes.func,
@@ -774,11 +776,11 @@ DataGridProRaw.propTypes = {
    */
   showColumnVerticalBorder: PropTypes.bool,
   /**
-   * Overrideable components props dynamically passed to the component at rendering.
+   * Overridable components props dynamically passed to the component at rendering.
    */
   slotProps: PropTypes.object,
   /**
-   * Overrideable components.
+   * Overridable components.
    */
   slots: PropTypes.object,
   /**

package/legacy/components/DataGridProVirtualScroller.js

@@ -181,7 +181,7 @@ var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGrid
       bottomPinnedRowsRenderZoneRef.current.style.transform = "translate3d(".concat(left, "px, 0px, 0px)");
     }
   }, []);
-  var getRowProps = function getRowProps(id) {
+  var getRowProps = React.useCallback(function (id) {
     if (!expandedRowIds.includes(id)) {
       return null;
     }
@@ -191,7 +191,7 @@ var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGrid
         marginBottom: height
       }
     };
-  };
+  }, [detailPanelsHeights, expandedRowIds]);
   var pinnedColumns = useGridSelector(apiRef, gridPinnedColumnsSelector);
   var _filterColumns = filterColumns(pinnedColumns, visibleColumnFields, theme.direction === 'rtl'),
     _filterColumns2 = _slicedToArray(_filterColumns, 2),

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

@@ -2,15 +2,16 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-var _excluded = ["style", "className", "innerRef"];
+var _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";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
@@ -65,14 +66,35 @@ var GridColumnHeadersPinnedColumnHeaders = styled('div', {
     borderLeftStyle: 'solid'
   });
 });
-export var 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
+};
+var GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeaders(props, ref) {
   var style = props.style,
     className = props.className,
     innerRef = props.innerRef,
+    visibleColumns = props.visibleColumns,
+    sortColumnLookup = props.sortColumnLookup,
+    filterColumnLookup = props.filterColumnLookup,
+    columnPositions = props.columnPositions,
+    columnHeaderTabIndexState = props.columnHeaderTabIndexState,
+    columnGroupHeaderTabIndexState = props.columnGroupHeaderTabIndexState,
+    columnHeaderFocus = props.columnHeaderFocus,
+    columnGroupHeaderFocus = props.columnGroupHeaderFocus,
+    densityFactor = props.densityFactor,
+    headerGroupingMaxDepth = props.headerGroupingMaxDepth,
+    columnMenuState = props.columnMenuState,
+    columnVisibility = props.columnVisibility,
+    columnGroupsHeaderStructure = props.columnGroupsHeaderStructure,
+    hasOtherElementInTabSequence = props.hasOtherElementInTabSequence,
+    pinnedColumns = props.pinnedColumns,
     other = _objectWithoutProperties(props, _excluded);
   var rootProps = useGridRootProps();
   var apiRef = useGridApiContext();
-  var visibleColumnFields = useGridSelector(apiRef, gridVisibleColumnFieldsSelector);
   var _React$useState = React.useState(0),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     scrollbarSize = _React$useState2[0],
@@ -89,13 +111,32 @@ export var DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function Dat
     }
   });
   useGridApiEventHandler(apiRef, 'virtualScrollerContentSizeChange', handleContentSizeChange);
-  var pinnedColumns = useGridSelector(apiRef, gridPinnedColumnsSelector);
+  var visibleColumnFields = React.useMemo(function () {
+    return visibleColumns.map(function (_ref4) {
+      var field = _ref4.field;
+      return field;
+    });
+  }, [visibleColumns]);
   var _filterColumns = filterColumns(pinnedColumns, visibleColumnFields, theme.direction === 'rtl'),
     _filterColumns2 = _slicedToArray(_filterColumns, 2),
     leftPinnedColumns = _filterColumns2[0],
     rightPinnedColumns = _filterColumns2[1];
   var _useGridColumnHeaders = useGridColumnHeaders({
       innerRef: innerRef,
+      visibleColumns: visibleColumns,
+      sortColumnLookup: sortColumnLookup,
+      filterColumnLookup: filterColumnLookup,
+      columnPositions: columnPositions,
+      columnHeaderTabIndexState: columnHeaderTabIndexState,
+      hasOtherElementInTabSequence: hasOtherElementInTabSequence,
+      columnGroupHeaderTabIndexState: columnGroupHeaderTabIndexState,
+      columnHeaderFocus: columnHeaderFocus,
+      columnGroupHeaderFocus: columnGroupHeaderFocus,
+      densityFactor: densityFactor,
+      headerGroupingMaxDepth: headerGroupingMaxDepth,
+      columnMenuState: columnMenuState,
+      columnVisibility: columnVisibility,
+      columnGroupsHeaderStructure: columnGroupsHeaderStructure,
       minColumnIndex: leftPinnedColumns.length
     }),
     isDragging = _useGridColumnHeaders.isDragging,
@@ -122,7 +163,7 @@ export var DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function Dat
   var pinnedColumnHeadersProps = {
     role: innerProps.role
   };
-  return /*#__PURE__*/_jsxs(GridColumnHeaders, _extends({
+  return /*#__PURE__*/_jsxs(GridBaseColumnHeaders, _extends({
     ref: ref,
     className: className
   }, getRootProps(other), {
@@ -180,4 +221,49 @@ export var DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function Dat
       })]
     }))]
   }));
-});
+});
+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/legacy/components/index.js

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

package/legacy/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 var DEFAULT_GRID_PRO_ICON_SLOTS_COMPONENTS = {
-  ColumnMenuPinRightIcon: GridPushPinRightIcon,
-  ColumnMenuPinLeftIcon: GridPushPinLeftIcon
-};
-export var 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 var DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS = _extends({}, DATA_GRID_DEFAULT_SLOTS_COMPONENTS, materialSlots, {
+  ColumnMenu: GridProColumnMenu,
+  ColumnHeaders: GridColumnHeaders
 });

package/legacy/hooks/features/detailPanel/useGridDetailPanelPreProcessors.js

@@ -23,7 +23,7 @@ export var useGridDetailPanelPreProcessors = function useGridDetailPanelPreProce
       return columnsState;
     }
 
-    // Othewise, add the toggle column at the beginning
+    // Otherwise, add the toggle column at the beginning
     columnsState.orderedFields = [GRID_DETAIL_PANEL_TOGGLE_FIELD].concat(_toConsumableArray(columnsState.orderedFields));
     columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD] = _extends({}, GRID_DETAIL_PANEL_TOGGLE_COL_DEF, {
       headerName: privateApiRef.current.getLocaleText('detailPanelToggle')

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

@@ -22,10 +22,7 @@ function createPinnedRowsInternalCache(pinnedRows, getRowId) {
   return cache;
 }
 export var rowPinningStateInitializer = function rowPinningStateInitializer(state, props, apiRef) {
-  var _props$experimentalFe, _state$rows;
-  if (!((_props$experimentalFe = props.experimentalFeatures) != null && _props$experimentalFe.rowPinning)) {
-    return state;
-  }
+  var _state$rows;
   apiRef.current.caches.pinnedRows = createPinnedRowsInternalCache(props.pinnedRows, props.getRowId);
   return _extends({}, state, {
     rows: _extends({}, state.rows, {
@@ -39,15 +36,10 @@ export var rowPinningStateInitializer = function rowPinningStateInitializer(stat
   });
 };
 export var useGridRowPinning = function useGridRowPinning(apiRef, props) {
-  var _props$experimentalFe3;
   var setPinnedRows = React.useCallback(function (newPinnedRows) {
-    var _props$experimentalFe2;
-    if (!((_props$experimentalFe2 = props.experimentalFeatures) != null && _props$experimentalFe2.rowPinning)) {
-      return;
-    }
     apiRef.current.caches.pinnedRows = createPinnedRowsInternalCache(newPinnedRows, props.getRowId);
     apiRef.current.requestPipeProcessorsApplication('hydrateRows');
-  }, [apiRef, (_props$experimentalFe3 = props.experimentalFeatures) == null ? void 0 : _props$experimentalFe3.rowPinning, props.getRowId]);
+  }, [apiRef, props.getRowId]);
   useGridApiMethod(apiRef, {
     unstable_setPinnedRows: setPinnedRows
   }, 'public');

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v6.0.0-beta.5
+ * @mui/x-data-grid-pro v6.0.1
  *
  * @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';

package/legacy/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/legacy/material/index.js

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

package/legacy/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export var getReleaseInfo = function getReleaseInfo() {
-  var releaseInfo = "MTY3NzEwNjgwMDAwMA==";
+  var releaseInfo = "MTY3ODMwMjAwMDAwMA==";
   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/material/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const materialSlots: {
+    ColumnMenuPinLeftIcon: import("react").JSXElementConstructor<any>;
+    ColumnMenuPinRightIcon: import("react").JSXElementConstructor<any>;
+};
+export default materialSlots;

package/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/material/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/material/index.js",
+  "types": "./index.d.ts"
+}

package/models/dataGridProProps.d.ts

@@ -12,19 +12,15 @@ export interface GridExperimentalProFeatures extends GridExperimentalFeatures {
      * Enables the data grid to lazy load rows while scrolling.
      */
     lazyLoading: boolean;
-    /**
-     * Enables the ability for rows to be pinned in data grid.
-     */
-    rowPinning: boolean;
 }
 interface DataGridProPropsWithComplexDefaultValueBeforeProcessing extends Omit<DataGridPropsWithComplexDefaultValueBeforeProcessing, 'components'> {
     /**
-     * Overrideable components.
+     * Overridable components.
      * @deprecated Use the `slots` prop instead.
      */
     components?: Partial<GridProSlotsComponent>;
     /**
-     * Overrideable components.
+     * Overridable components.
      */
     slots?: Partial<UncapitalizedGridProSlotsComponent>;
 }

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
@@ -114,12 +117,12 @@ DataGridProRaw.propTypes = {
    */
   columnVisibilityModel: PropTypes.object,
   /**
-   * Overrideable components.
+   * Overridable components.
    * @deprecated Use the `slots` prop instead.
    */
   components: PropTypes.object,
   /**
-   * Overrideable components props dynamically passed to the component at rendering.
+   * Overridable components props dynamically passed to the component at rendering.
    * @deprecated Use the `slotProps` prop instead.
    */
   componentsProps: PropTypes.object,
@@ -220,7 +223,6 @@ DataGridProRaw.propTypes = {
   experimentalFeatures: PropTypes.shape({
     columnGrouping: PropTypes.bool,
     lazyLoading: PropTypes.bool,
-    rowPinning: PropTypes.bool,
     warnIfFocusStateIsNotSynced: PropTypes.bool
   }),
   /**
@@ -437,7 +439,7 @@ DataGridProRaw.propTypes = {
   onCellKeyDown: PropTypes.func,
   /**
    * Callback fired when the `cellModesModel` prop changes.
-   * @param {GridCellModesModel} cellModesModel Object containig which cells are in "edit" mode.
+   * @param {GridCellModesModel} cellModesModel Object containing which cells are in "edit" mode.
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onCellModesModelChange: PropTypes.func,
@@ -616,7 +618,7 @@ DataGridProRaw.propTypes = {
   onRowEditStop: PropTypes.func,
   /**
    * Callback fired when the `rowModesModel` prop changes.
-   * @param {GridRowModesModel} rowModesModel Object containig which rows are in "edit" mode.
+   * @param {GridRowModesModel} rowModesModel Object containing which rows are in "edit" mode.
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onRowModesModelChange: PropTypes.func,
@@ -774,11 +776,11 @@ DataGridProRaw.propTypes = {
    */
   showColumnVerticalBorder: PropTypes.bool,
   /**
-   * Overrideable components props dynamically passed to the component at rendering.
+   * Overridable components props dynamically passed to the component at rendering.
    */
   slotProps: PropTypes.object,
   /**
-   * Overrideable components.
+   * Overridable components.
    */
   slots: PropTypes.object,
   /**

package/modern/components/DataGridProVirtualScroller.js

@@ -176,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;
     }
@@ -186,7 +186,7 @@ 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);