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

package/models/gridFilterItem.d.ts

@@ -1,5 +1,7 @@
 /**
  * Filter item definition interface.
+ * @demos
+ *   - [Custom filter operator](/x/react-data-grid/filtering/#create-a-custom-operator)
  */
 export interface GridFilterItem {
     /**

package/models/gridFilterItem.js

@@ -1,5 +1,7 @@
 /**
  * Filter item definition interface.
+ * @demos
+ *   - [Custom filter operator](/x/react-data-grid/filtering/#create-a-custom-operator)
  */
 var GridLogicOperator;
 (function (GridLogicOperator) {

package/models/gridFilterModel.d.ts

@@ -1,6 +1,8 @@
 import { GridFilterItem, GridLogicOperator } from './gridFilterItem';
 /**
  * Model describing the filters to apply to the grid.
+ * @demos
+ *   - [Pass filters to the grid](/x/react-data-grid/filtering/#pass-filters-to-the-data-grid)
  */
 export interface GridFilterModel {
     /**

package/models/gridFilterOperator.d.ts

@@ -5,6 +5,8 @@ import type { GridColDef } from './colDef/gridColDef';
 import type { GridValidRowModel } from './gridRows';
 /**
  * Filter operator definition interface.
+ * @demos
+ *   - [Custom filter operator](/x/react-data-grid/filtering/#create-a-custom-operator)
  */
 export interface GridFilterOperator<R extends GridValidRowModel = any, V = any, F = V> {
     /**

package/models/gridIconSlotsComponent.d.ts

@@ -110,10 +110,20 @@ export interface GridIconSlotsComponent {
      */
     DetailPanelCollapseIcon: React.JSXElementConstructor<any>;
     /**
-     * Icon displayed for deleting the filter from filter Panel.
-     * @default GridCloseIcon
+     * Icon displayed for deleting the filter from filter panel.
+     * @default GridAddIcon
+     */
+    FilterPanelAddIcon: React.JSXElementConstructor<any>;
+    /**
+     * Icon displayed for deleting the filter from filter panel.
+     * @default GridDeleteIcon
      */
     FilterPanelDeleteIcon: React.JSXElementConstructor<any>;
+    /**
+     * Icon displayed for deleting all the active filters from filter panel.
+     * @default GridDeleteForeverIcon
+     */
+    FilterPanelRemoveAllIcon: React.JSXElementConstructor<any>;
     /**
      * Icon displayed on the `reorder` column type to reorder a row.
      * @default GridDragIcon
@@ -159,4 +169,14 @@ export interface GridIconSlotsComponent {
      * @default GridClearIcon
      */
     ColumnMenuClearIcon: React.JSXElementConstructor<any>;
+    /**
+     * Icon displayed on the input while processing.
+     * @default GridLoadIcon
+     */
+    LoadIcon: React.JSXElementConstructor<any>;
+    /**
+     * Icon displayed on the column reorder button.
+     * @default GridDragIcon
+     */
+    ColumnReorderIcon: React.JSXElementConstructor<any>;
 }

package/models/gridSlotsComponent.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
+import { UncapitalizeObjectKeys } from '../internals/utils';
 import { GridIconSlotsComponent } from './gridIconSlotsComponent';
 /**
  * Grid components React prop interface containing all the overridable components.
- * TODO: Differentiate community and pro interface
  */
 export interface GridSlotsComponent extends GridIconSlotsComponent {
     /**
@@ -50,6 +50,16 @@ export interface GridSlotsComponent extends GridIconSlotsComponent {
      * @default Popper
      */
     BasePopper: React.JSXElementConstructor<any>;
+    /**
+     * The custom InputLabel component used in the grid.
+     * @default InputLabel
+     */
+    BaseInputLabel: React.JSXElementConstructor<any>;
+    /**
+     * The custom SelectOption component used in the grid.
+     * @default MenuItem
+     */
+    BaseSelectOption: React.JSXElementConstructor<any>;
     /**
      * Component rendered for each cell.
      * @default GridCell
@@ -70,6 +80,11 @@ export interface GridSlotsComponent extends GridIconSlotsComponent {
      * @default GridColumnMenu
      */
     ColumnMenu: React.JSXElementConstructor<any>;
+    /**
+     * Component responsible for rendering the column headers.
+     * @default DataGridColumnHeaders
+     */
+    ColumnHeaders: React.JSXElementConstructor<any>;
     /**
      * Footer component rendered at the bottom of the grid viewport.
      * @default GridFooter
@@ -126,3 +141,5 @@ export interface GridSlotsComponent extends GridIconSlotsComponent {
      */
     Row: React.JSXElementConstructor<any>;
 }
+export interface UncapitalizedGridSlotsComponent extends UncapitalizeObjectKeys<GridSlotsComponent> {
+}

package/models/gridSlotsComponentsProps.d.ts

@@ -1,28 +1,108 @@
+import * as React from 'react';
+import { CheckboxProps } from '@mui/material/Checkbox';
+import { TextFieldProps } from '@mui/material/TextField';
+import { FormControlProps } from '@mui/material/FormControl';
+import { SelectProps } from '@mui/material/Select';
+import { SwitchProps } from '@mui/material/Switch';
+import { ButtonProps } from '@mui/material/Button';
+import { IconButtonProps } from '@mui/material/IconButton';
+import { TooltipProps } from '@mui/material/Tooltip';
+import type { InputLabelProps } from '@mui/material/InputLabel';
+import { PopperProps } from '@mui/material/Popper';
+import { TablePaginationProps } from '@mui/material/TablePagination';
+import { GridToolbarProps } from '../components/toolbar/GridToolbar';
+import { ColumnHeaderFilterIconButtonProps } from '../components/columnHeaders/GridColumnHeaderFilterIconButton';
+import { GridColumnMenuProps } from '../components/menu/columnMenu/GridColumnMenuProps';
+import { GridColumnsPanelProps } from '../components/panel/GridColumnsPanel';
+import { GridFilterPanelProps } from '../components/panel/filterPanel/GridFilterPanel';
+import { GridFooterContainerProps } from '../components/containers/GridFooterContainer';
+import { GridOverlayProps } from '../components/containers/GridOverlay';
+import { GridPanelProps } from '../components/panel/GridPanel';
+import type { GridRowProps } from '../components/GridRow';
+import type { GridCellProps } from '../components/cell/GridCell';
+export interface BaseCheckboxPropsOverrides {
+}
+export interface BaseTextFieldPropsOverrides {
+}
+export interface BaseFormControlPropsOverrides {
+}
+export interface BaseSelectPropsOverrides {
+}
+export interface BaseSwitchPropsOverrides {
+}
+export interface BaseButtonPropsOverrides {
+}
+export interface BaseIconButtonPropsOverrides {
+}
+export interface BaseTooltipPropsOverrides {
+}
+export interface BasePopperPropsOverrides {
+}
+export interface BaseInputLabelPropsOverrides {
+}
+export interface BaseSelectOptionPropsOverrides {
+}
+export interface CellPropsOverrides {
+}
+export interface ToolbarPropsOverrides {
+}
+export interface ColumnHeaderFilterIconButtonPropsOverrides {
+}
+export interface ColumnMenuPropsOverrides {
+}
+export interface ColumnsPanelPropsOverrides {
+}
+export interface FilterPanelPropsOverrides {
+}
+export interface FooterPropsOverrides {
+}
+export interface PaginationPropsOverrides {
+}
+export interface LoadingOverlayPropsOverrides {
+}
+export interface NoResultsOverlayPropsOverrides {
+}
+export interface NoRowsOverlayPropsOverrides {
+}
+export interface PanelPropsOverrides {
+}
+export interface PreferencesPanelPropsOverrides {
+}
+export interface RowPropsOverrides {
+}
+type SlotProps<Props, Overrides> = Partial<Props & Overrides>;
 /**
  * Overrideable components props dynamically passed to the component at rendering.
  */
 export interface GridSlotsComponentsProps {
-    baseCheckbox?: any;
-    baseTextField?: any;
-    baseFormControl?: any;
-    baseSelect?: any;
-    baseSwitch?: any;
-    baseButton?: any;
-    baseIconButton?: any;
-    basePopper?: any;
-    baseTooltip?: any;
-    cell?: any;
-    columnHeaderFilterIconButton?: any;
-    columnMenu?: any;
-    columnsPanel?: any;
-    filterPanel?: any;
-    footer?: any;
-    loadingOverlay?: any;
-    noResultsOverlay?: any;
-    noRowsOverlay?: any;
-    pagination?: any;
-    panel?: any;
-    preferencesPanel?: any;
-    row?: any;
-    toolbar?: any;
+    baseCheckbox?: SlotProps<CheckboxProps, BaseCheckboxPropsOverrides>;
+    baseTextField?: SlotProps<TextFieldProps, BaseTextFieldPropsOverrides>;
+    baseFormControl?: SlotProps<FormControlProps, BaseFormControlPropsOverrides>;
+    baseSelect?: SlotProps<SelectProps, BaseSelectPropsOverrides>;
+    baseSwitch?: SlotProps<SwitchProps, BaseSwitchPropsOverrides>;
+    baseButton?: SlotProps<ButtonProps, BaseButtonPropsOverrides>;
+    baseIconButton?: SlotProps<IconButtonProps, BaseIconButtonPropsOverrides>;
+    basePopper?: SlotProps<PopperProps, BasePopperPropsOverrides>;
+    baseTooltip?: SlotProps<TooltipProps, BaseTooltipPropsOverrides>;
+    baseInputLabel?: SlotProps<InputLabelProps, BaseInputLabelPropsOverrides>;
+    baseSelectOption?: SlotProps<{
+        native: boolean;
+        value: any;
+        children?: React.ReactNode;
+    }, BaseSelectOptionPropsOverrides>;
+    cell?: SlotProps<GridCellProps, CellPropsOverrides>;
+    columnHeaderFilterIconButton?: SlotProps<ColumnHeaderFilterIconButtonProps, ColumnHeaderFilterIconButtonPropsOverrides>;
+    columnMenu?: SlotProps<GridColumnMenuProps, ColumnMenuPropsOverrides>;
+    columnsPanel?: SlotProps<GridColumnsPanelProps, ColumnsPanelPropsOverrides>;
+    filterPanel?: SlotProps<GridFilterPanelProps, FilterPanelPropsOverrides>;
+    footer?: SlotProps<GridFooterContainerProps, FooterPropsOverrides>;
+    loadingOverlay?: SlotProps<GridOverlayProps, LoadingOverlayPropsOverrides>;
+    noResultsOverlay?: SlotProps<GridOverlayProps, NoResultsOverlayPropsOverrides>;
+    noRowsOverlay?: SlotProps<GridOverlayProps, NoRowsOverlayPropsOverrides>;
+    pagination?: SlotProps<TablePaginationProps, PaginationPropsOverrides>;
+    panel?: SlotProps<GridPanelProps, PanelPropsOverrides>;
+    preferencesPanel?: SlotProps<React.HTMLAttributes<HTMLDivElement>, PreferencesPanelPropsOverrides>;
+    row?: SlotProps<GridRowProps, RowPropsOverrides>;
+    toolbar?: SlotProps<GridToolbarProps, ToolbarPropsOverrides>;
 }
+export {};

package/models/params/gridRowParams.d.ts

@@ -2,6 +2,8 @@ import { GridValidRowModel, GridRowEntry, GridRowId } from '../gridRows';
 import type { GridColDef } from '../colDef/gridColDef';
 /**
  * Object passed as parameter in the row callbacks.
+ * @demos
+ *   - [Master detail](/x/react-data-grid/master-detail/)
  */
 export interface GridRowParams<R extends GridValidRowModel = any> {
     /**
@@ -34,6 +36,8 @@ interface GridRowVisibilityParams {
 }
 /**
  * Object passed as parameter in the row `getRowClassName` callback prop.
+ * @demos
+ *   - [Styling rows](/x/react-data-grid/style/#styling-rows)
  */
 export interface GridRowClassNameParams<R extends GridValidRowModel = any> extends GridRowParams<R>, GridRowVisibilityParams {
 }
@@ -92,6 +96,8 @@ export interface GridRowEditStopParams<R extends GridValidRowModel = any> extend
 }
 /**
  * Object passed as parameter in the row `getRowSpacing` callback prop.
+ * @demos
+ *   - [Row spacing](/x/react-data-grid/row-height/#row-spacing)
  */
 export interface GridRowSpacingParams extends GridRowEntry, GridRowVisibilityParams {
 }

package/models/params/gridRowParams.js

@@ -1,8 +1,12 @@
 /**
  * Object passed as parameter in the row callbacks.
+ * @demos
+ *   - [Master detail](/x/react-data-grid/master-detail/)
  */
 /**
  * Object passed as parameter in the row `getRowClassName` callback prop.
+ * @demos
+ *   - [Styling rows](/x/react-data-grid/style/#styling-rows)
  */
 /**
  * Object passed as parameter in the row `getRowHeight` callback prop.

package/models/props/DataGridProps.d.ts

@@ -24,6 +24,7 @@ import { GridColumnVisibilityModel } from '../../hooks/features/columns/gridColu
 import { GridCellModesModel, GridRowModesModel } from '../api/gridEditingApi';
 import { GridColumnGroupingModel } from '../gridColumnGrouping';
 import { GridPaginationModel } from '../gridPaginationProps';
+import { UncapitalizeObjectKeys } from '../../internals/utils';
 export interface GridExperimentalFeatures {
     /**
      * Enables the column grouping.
@@ -44,7 +45,7 @@ export type DataGridProps<R extends GridValidRowModel = any> = Omit<Partial<Data
 /**
  * The props of the `DataGrid` component after the pre-processing phase.
  */
-export interface DataGridProcessedProps<R extends GridValidRowModel = any> extends DataGridPropsWithDefaultValues, DataGridPropsWithComplexDefaultValueAfterProcessing, DataGridPropsWithoutDefaultValue<R> {
+export interface DataGridProcessedProps<R extends GridValidRowModel = any> extends DataGridPropsWithDefaultValues, DataGridPropsWithComplexDefaultValueAfterProcessing, Omit<DataGridPropsWithoutDefaultValue<R>, 'componentsProps'> {
 }
 /**
  * The props of the `DataGrid` component after the pre-processing phase that the user should not be able to override.
@@ -55,7 +56,7 @@ export type DataGridForcedPropsKey = 'checkboxSelectionVisibleOnly' | 'disableMu
  * The `DataGrid` options with a default value that must be merged with the value given through props.
  */
 export interface DataGridPropsWithComplexDefaultValueAfterProcessing {
-    components: GridSlotsComponent;
+    slots: UncapitalizeObjectKeys<GridSlotsComponent>;
     localeText: GridLocaleText;
 }
 /**
@@ -64,8 +65,13 @@ export interface DataGridPropsWithComplexDefaultValueAfterProcessing {
 export interface DataGridPropsWithComplexDefaultValueBeforeProcessing {
     /**
      * Overrideable components.
+     * @deprecated Use `slots` instead.
      */
     components?: Partial<GridSlotsComponent>;
+    /**
+     * Overrideable components.
+     */
+    slots?: UncapitalizeObjectKeys<Partial<GridSlotsComponent>>;
     /**
      * Set the locale text of the grid.
      * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/grid/x-data-grid/src/constants/localeTextConstants.ts) in the GitHub repository.
@@ -644,6 +650,11 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
     /**
      * Overrideable components props dynamically passed to the component at rendering.
      */
+    slotProps?: GridSlotsComponentsProps;
+    /**
+     * Overrideable components props dynamically passed to the component at rendering.
+     * @deprecated Use the `slotProps` prop instead.
+     */
     componentsProps?: GridSlotsComponentsProps;
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.

package/modern/DataGrid/DataGrid.js

@@ -6,7 +6,6 @@ import { GridContextProvider } from '../context/GridContextProvider';
 import { useDataGridComponent } from './useDataGridComponent';
 import { useDataGridProps } from './useDataGridProps';
 import { DataGridVirtualScroller } from '../components/DataGridVirtualScroller';
-import { DataGridColumnHeaders } from '../components/DataGridColumnHeaders';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const DataGridRaw = /*#__PURE__*/React.forwardRef(function DataGrid(inProps, ref) {
@@ -21,7 +20,6 @@ const DataGridRaw = /*#__PURE__*/React.forwardRef(function DataGrid(inProps, ref
       sx: props.sx,
       ref: ref,
       children: [/*#__PURE__*/_jsx(GridHeader, {}), /*#__PURE__*/_jsx(GridBody, {
-        ColumnHeadersComponent: DataGridColumnHeaders,
         VirtualScrollerComponent: DataGridVirtualScroller
       }), /*#__PURE__*/_jsx(GridFooterPlaceholder, {})]
     })
@@ -103,10 +101,12 @@ DataGridRaw.propTypes = {
   columnVisibilityModel: PropTypes.object,
   /**
    * Overrideable components.
+   * @deprecated Use `slots` instead.
    */
   components: PropTypes.object,
   /**
    * Overrideable components props dynamically passed to the component at rendering.
+   * @deprecated Use the `slotProps` prop instead.
    */
   componentsProps: PropTypes.object,
   /**
@@ -581,6 +581,14 @@ DataGridRaw.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/DataGrid/useDataGridProps.js

@@ -1,9 +1,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["components", "componentsProps"];
 import * as React from 'react';
 import { useThemeProps } from '@mui/material/styles';
 import { GRID_DEFAULT_LOCALE_TEXT } from '../constants';
 import { DATA_GRID_DEFAULT_SLOTS_COMPONENTS } from '../constants/defaultGridSlotsComponents';
 import { GridEditModes } from '../models';
+import { computeSlots, uncapitalizeObjectKeys } from '../internals/utils';
 const DATA_GRID_FORCED_PROPS = {
   disableMultipleColumnsFiltering: true,
   disableMultipleColumnsSorting: true,
@@ -65,25 +68,26 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES = {
   keepNonExistentRowsSelected: false,
   keepColumnPositionIfDraggedOutside: false
 };
+const defaultSlots = uncapitalizeObjectKeys(DATA_GRID_DEFAULT_SLOTS_COMPONENTS);
 export const useDataGridProps = 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_DEFAULT_SLOTS_COMPONENTS);
-    }
-    const mergedComponents = {};
-    Object.entries(DATA_GRID_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_PROPS_DEFAULT_VALUES, themedProps, {
     localeText,
-    components
-  }, DATA_GRID_FORCED_PROPS), [themedProps, localeText, components]);
+    slots,
+    slotProps: themedProps.slotProps ?? componentsProps
+  }, DATA_GRID_FORCED_PROPS), [themedProps, localeText, slots, componentsProps]);
 };

package/modern/colDef/gridSingleSelectColDef.js

@@ -2,12 +2,21 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { GRID_STRING_COL_DEF } from './gridStringColDef';
 import { renderEditSingleSelectCell } from '../components/cell/GridEditSingleSelectCell';
 import { getGridSingleSelectOperators } from './gridSingleSelectOperators';
-import { getLabelFromValueOption, isSingleSelectColDef } from '../components/panel/filterPanel/filterPanelUtils';
+import { isSingleSelectColDef } from '../components/panel/filterPanel/filterPanelUtils';
+import { isObject } from '../utils/utils';
 const isArrayOfObjects = options => {
   return typeof options[0] === 'object';
 };
+const defaultGetOptionValue = value => {
+  return isObject(value) ? value.value : value;
+};
+const defaultGetOptionLabel = value => {
+  return isObject(value) ? value.label : String(value);
+};
 export const GRID_SINGLE_SELECT_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   type: 'singleSelect',
+  getOptionLabel: defaultGetOptionLabel,
+  getOptionValue: defaultGetOptionValue,
   valueFormatter(params) {
     const {
       id,
@@ -36,10 +45,10 @@ export const GRID_SINGLE_SELECT_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
       return value;
     }
     if (!isArrayOfObjects(valueOptions)) {
-      return getLabelFromValueOption(value);
+      return colDef.getOptionLabel(value);
     }
-    const valueOption = valueOptions.find(option => option.value === value);
-    return valueOption ? getLabelFromValueOption(valueOption) : '';
+    const valueOption = valueOptions.find(option => colDef.getOptionValue(option) === value);
+    return valueOption ? colDef.getOptionLabel(valueOption) : '';
   },
   renderEditCell: renderEditSingleSelectCell,
   filterOperators: getGridSingleSelectOperators()

package/modern/components/GridColumnHeaders.js

@@ -0,0 +1,108 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["innerRef", "className", "visibleColumns", "sortColumnLookup", "filterColumnLookup", "columnPositions", "columnHeaderTabIndexState", "columnGroupHeaderTabIndexState", "columnHeaderFocus", "columnGroupHeaderFocus", "densityFactor", "headerGroupingMaxDepth", "columnMenuState", "columnVisibility", "columnGroupsHeaderStructure", "hasOtherElementInTabSequence"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridColumnHeaders';
+import { GridScrollArea } from './GridScrollArea';
+import { GridBaseColumnHeaders } from './columnHeaders/GridBaseColumnHeaders';
+import { GridColumnHeadersInner } from './columnHeaders/GridColumnHeadersInner';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnsHeaders(props, ref) {
+  const {
+      innerRef,
+      visibleColumns,
+      sortColumnLookup,
+      filterColumnLookup,
+      columnPositions,
+      columnHeaderTabIndexState,
+      columnGroupHeaderTabIndexState,
+      columnHeaderFocus,
+      columnGroupHeaderFocus,
+      densityFactor,
+      headerGroupingMaxDepth,
+      columnMenuState,
+      columnVisibility,
+      columnGroupsHeaderStructure,
+      hasOtherElementInTabSequence
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    isDragging,
+    getRootProps,
+    getInnerProps,
+    getColumnHeaders,
+    getColumnGroupHeaders
+  } = useGridColumnHeaders({
+    innerRef,
+    visibleColumns,
+    sortColumnLookup,
+    filterColumnLookup,
+    columnPositions,
+    columnHeaderTabIndexState,
+    columnGroupHeaderTabIndexState,
+    columnHeaderFocus,
+    columnGroupHeaderFocus,
+    densityFactor,
+    headerGroupingMaxDepth,
+    columnMenuState,
+    columnVisibility,
+    columnGroupsHeaderStructure,
+    hasOtherElementInTabSequence
+  });
+  return /*#__PURE__*/_jsxs(GridBaseColumnHeaders, _extends({
+    ref: ref
+  }, getRootProps(other), {
+    children: [/*#__PURE__*/_jsx(GridScrollArea, {
+      scrollDirection: "left"
+    }), /*#__PURE__*/_jsxs(GridColumnHeadersInner, _extends({
+      isDragging: isDragging
+    }, getInnerProps(), {
+      children: [getColumnGroupHeaders(), getColumnHeaders()]
+    })), /*#__PURE__*/_jsx(GridScrollArea, {
+      scrollDirection: "right"
+    })]
+  }));
+});
+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,
+  sortColumnLookup: PropTypes.object.isRequired,
+  visibleColumns: PropTypes.arrayOf(PropTypes.object).isRequired
+} : void 0;
+export { GridColumnHeaders };

package/modern/components/GridFooter.js

@@ -25,7 +25,7 @@ const GridFooter = /*#__PURE__*/React.forwardRef(function GridFooter(props, ref)
     rowCount: totalTopLevelRowCount,
     visibleRowCount: visibleTopLevelRowCount
   }) : null;
-  const paginationElement = rootProps.pagination && !rootProps.hideFooterPagination && rootProps.components.Pagination && /*#__PURE__*/_jsx(rootProps.components.Pagination, _extends({}, rootProps.componentsProps?.pagination));
+  const paginationElement = rootProps.pagination && !rootProps.hideFooterPagination && rootProps.slots.pagination && /*#__PURE__*/_jsx(rootProps.slots.pagination, _extends({}, rootProps.slotProps?.pagination));
   return /*#__PURE__*/_jsxs(GridFooterContainer, _extends({
     ref: ref
   }, props, {

package/modern/components/GridHeader.js

@@ -8,6 +8,6 @@ export const GridHeader = /*#__PURE__*/React.forwardRef(function GridHeader(prop
   return /*#__PURE__*/_jsxs("div", _extends({
     ref: ref
   }, props, {
-    children: [/*#__PURE__*/_jsx(rootProps.components.PreferencesPanel, _extends({}, rootProps.componentsProps?.preferencesPanel)), rootProps.components.Toolbar && /*#__PURE__*/_jsx(rootProps.components.Toolbar, _extends({}, rootProps.componentsProps?.toolbar))]
+    children: [/*#__PURE__*/_jsx(rootProps.slots.preferencesPanel, _extends({}, rootProps.slotProps?.preferencesPanel)), rootProps.slots.toolbar && /*#__PURE__*/_jsx(rootProps.slots.toolbar, _extends({}, rootProps.slotProps?.toolbar))]
   }));
 });