[DataGrid] Remove Header slot (#6999)

Closes #6977
mui · Dec 2, 2022 · 626106b · 626106b
1 parent 6e0feb3
commit 626106b
Show file tree

Hide file tree

Showing 17 changed files with 3 additions and 24 deletions.
diff --git a/docs/data/migration/migration-data-grid-v5/migration-data-grid-v5.md b/docs/data/migration/migration-data-grid-v5/migration-data-grid-v5.md
@@ -39,6 +39,7 @@ The minimum supported Node.js version has been changed from 12.0.0 to 14.0.0, si
 - The `disableIgnoreModificationsIfProcessingProps` prop was removed and its behavior when `true` was incorporated as the default behavior.
   The old behavior can be restored by using `apiRef.current.stopRowEditMode({ ignoreModifications: true })` or `apiRef.current.stopCellEditMode({ ignoreModifications: true })`.
 - The `onColumnVisibilityChange` prop was removed. Use `onColumnVisibilityModelChange` instead.
+- The `components.Header` slot was removed. Use `components.Toolbar` slot instead.
 
 ### State access
 

diff --git a/docs/pages/x/api/data-grid/data-grid-premium.json b/docs/pages/x/api/data-grid/data-grid-premium.json
@@ -307,7 +307,6 @@
       "default": "GridKeyboardArrowRight",
       "type": { "name": "elementType" }
     },
-    "Header": { "default": "GridHeader", "type": { "name": "elementType" } },
     "LoadingOverlay": { "default": "GridLoadingOverlay", "type": { "name": "elementType" } },
     "MoreActionsIcon": { "default": "GridMoreVertIcon", "type": { "name": "elementType" } },
     "NoResultsOverlay": { "default": "GridNoResultsOverlay", "type": { "name": "elementType" } },

diff --git a/docs/pages/x/api/data-grid/data-grid-pro.json b/docs/pages/x/api/data-grid/data-grid-pro.json
@@ -285,7 +285,6 @@
       "default": "GridKeyboardArrowRight",
       "type": { "name": "elementType" }
     },
-    "Header": { "default": "GridHeader", "type": { "name": "elementType" } },
     "LoadingOverlay": { "default": "GridLoadingOverlay", "type": { "name": "elementType" } },
     "MoreActionsIcon": { "default": "GridMoreVertIcon", "type": { "name": "elementType" } },
     "NoResultsOverlay": { "default": "GridNoResultsOverlay", "type": { "name": "elementType" } },

diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json
@@ -229,7 +229,6 @@
       "default": "GridKeyboardArrowRight",
       "type": { "name": "elementType" }
     },
-    "Header": { "default": "GridHeader", "type": { "name": "elementType" } },
     "LoadingOverlay": { "default": "GridLoadingOverlay", "type": { "name": "elementType" } },
     "MoreActionsIcon": { "default": "GridMoreVertIcon", "type": { "name": "elementType" } },
     "NoResultsOverlay": { "default": "GridNoResultsOverlay", "type": { "name": "elementType" } },

diff --git a/docs/translations/api-docs/data-grid/data-grid-premium-pt.json b/docs/translations/api-docs/data-grid/data-grid-premium-pt.json
@@ -673,7 +673,6 @@
     "ColumnMenu": "Column menu component rendered by clicking on the 3 dots &quot;kebab&quot; icon in column headers.",
     "ErrorOverlay": "Error overlay component rendered above the grid when an error is caught.",
     "Footer": "Footer component rendered at the bottom of the grid viewport.",
-    "Header": "Header component rendered above the grid column header bar.\nPrefer using the <code>Toolbar</code> slot. You should never need to use this slot.",
     "Toolbar": "Toolbar component rendered inside the Header component.",
     "PreferencesPanel": "PreferencesPanel component rendered inside the Header component.",
     "LoadingOverlay": "Loading overlay component rendered when the grid is in a loading state.",

diff --git a/docs/translations/api-docs/data-grid/data-grid-premium-zh.json b/docs/translations/api-docs/data-grid/data-grid-premium-zh.json
@@ -673,7 +673,6 @@
     "ColumnMenu": "Column menu component rendered by clicking on the 3 dots &quot;kebab&quot; icon in column headers.",
     "ErrorOverlay": "Error overlay component rendered above the grid when an error is caught.",
     "Footer": "Footer component rendered at the bottom of the grid viewport.",
-    "Header": "Header component rendered above the grid column header bar.\nPrefer using the <code>Toolbar</code> slot. You should never need to use this slot.",
     "Toolbar": "Toolbar component rendered inside the Header component.",
     "PreferencesPanel": "PreferencesPanel component rendered inside the Header component.",
     "LoadingOverlay": "Loading overlay component rendered when the grid is in a loading state.",

diff --git a/docs/translations/api-docs/data-grid/data-grid-premium.json b/docs/translations/api-docs/data-grid/data-grid-premium.json
@@ -673,7 +673,6 @@
     "ColumnMenu": "Column menu component rendered by clicking on the 3 dots &quot;kebab&quot; icon in column headers.",
     "ErrorOverlay": "Error overlay component rendered above the grid when an error is caught.",
     "Footer": "Footer component rendered at the bottom of the grid viewport.",
-    "Header": "Header component rendered above the grid column header bar.\nPrefer using the <code>Toolbar</code> slot. You should never need to use this slot.",
     "Toolbar": "Toolbar component rendered inside the Header component.",
     "PreferencesPanel": "PreferencesPanel component rendered inside the Header component.",
     "LoadingOverlay": "Loading overlay component rendered when the grid is in a loading state.",

diff --git a/docs/translations/api-docs/data-grid/data-grid-pro-pt.json b/docs/translations/api-docs/data-grid/data-grid-pro-pt.json
@@ -663,7 +663,6 @@
     "ColumnMenu": "Column menu component rendered by clicking on the 3 dots &quot;kebab&quot; icon in column headers.",
     "ErrorOverlay": "Error overlay component rendered above the grid when an error is caught.",
     "Footer": "Footer component rendered at the bottom of the grid viewport.",
-    "Header": "Header component rendered above the grid column header bar.\nPrefer using the <code>Toolbar</code> slot. You should never need to use this slot.",
     "Toolbar": "Toolbar component rendered inside the Header component.",
     "PreferencesPanel": "PreferencesPanel component rendered inside the Header component.",
     "LoadingOverlay": "Loading overlay component rendered when the grid is in a loading state.",

diff --git a/docs/translations/api-docs/data-grid/data-grid-pro-zh.json b/docs/translations/api-docs/data-grid/data-grid-pro-zh.json
@@ -663,7 +663,6 @@
     "ColumnMenu": "Column menu component rendered by clicking on the 3 dots &quot;kebab&quot; icon in column headers.",
     "ErrorOverlay": "Error overlay component rendered above the grid when an error is caught.",
     "Footer": "Footer component rendered at the bottom of the grid viewport.",
-    "Header": "Header component rendered above the grid column header bar.\nPrefer using the <code>Toolbar</code> slot. You should never need to use this slot.",
     "Toolbar": "Toolbar component rendered inside the Header component.",
     "PreferencesPanel": "PreferencesPanel component rendered inside the Header component.",
     "LoadingOverlay": "Loading overlay component rendered when the grid is in a loading state.",

diff --git a/docs/translations/api-docs/data-grid/data-grid-pro.json b/docs/translations/api-docs/data-grid/data-grid-pro.json
@@ -663,7 +663,6 @@
     "ColumnMenu": "Column menu component rendered by clicking on the 3 dots &quot;kebab&quot; icon in column headers.",
     "ErrorOverlay": "Error overlay component rendered above the grid when an error is caught.",
     "Footer": "Footer component rendered at the bottom of the grid viewport.",
-    "Header": "Header component rendered above the grid column header bar.\nPrefer using the <code>Toolbar</code> slot. You should never need to use this slot.",
     "Toolbar": "Toolbar component rendered inside the Header component.",
     "PreferencesPanel": "PreferencesPanel component rendered inside the Header component.",
     "LoadingOverlay": "Loading overlay component rendered when the grid is in a loading state.",

diff --git a/docs/translations/api-docs/data-grid/data-grid-pt.json b/docs/translations/api-docs/data-grid/data-grid-pt.json
@@ -630,7 +630,6 @@
     "ColumnMenu": "Column menu component rendered by clicking on the 3 dots &quot;kebab&quot; icon in column headers.",
     "ErrorOverlay": "Error overlay component rendered above the grid when an error is caught.",
     "Footer": "Footer component rendered at the bottom of the grid viewport.",
-    "Header": "Header component rendered above the grid column header bar.\nPrefer using the <code>Toolbar</code> slot. You should never need to use this slot.",
     "Toolbar": "Toolbar component rendered inside the Header component.",
     "PreferencesPanel": "PreferencesPanel component rendered inside the Header component.",
     "LoadingOverlay": "Loading overlay component rendered when the grid is in a loading state.",

diff --git a/docs/translations/api-docs/data-grid/data-grid-zh.json b/docs/translations/api-docs/data-grid/data-grid-zh.json
@@ -630,7 +630,6 @@
     "ColumnMenu": "Column menu component rendered by clicking on the 3 dots &quot;kebab&quot; icon in column headers.",
     "ErrorOverlay": "Error overlay component rendered above the grid when an error is caught.",
     "Footer": "Footer component rendered at the bottom of the grid viewport.",
-    "Header": "Header component rendered above the grid column header bar.\nPrefer using the <code>Toolbar</code> slot. You should never need to use this slot.",
     "Toolbar": "Toolbar component rendered inside the Header component.",
     "PreferencesPanel": "PreferencesPanel component rendered inside the Header component.",
     "LoadingOverlay": "Loading overlay component rendered when the grid is in a loading state.",

diff --git a/docs/translations/api-docs/data-grid/data-grid.json b/docs/translations/api-docs/data-grid/data-grid.json
@@ -630,7 +630,6 @@
     "ColumnMenu": "Column menu component rendered by clicking on the 3 dots &quot;kebab&quot; icon in column headers.",
     "ErrorOverlay": "Error overlay component rendered above the grid when an error is caught.",
     "Footer": "Footer component rendered at the bottom of the grid viewport.",
-    "Header": "Header component rendered above the grid column header bar.\nPrefer using the <code>Toolbar</code> slot. You should never need to use this slot.",
     "Toolbar": "Toolbar component rendered inside the Header component.",
     "PreferencesPanel": "PreferencesPanel component rendered inside the Header component.",
     "LoadingOverlay": "Loading overlay component rendered when the grid is in a loading state.",

diff --git a/packages/grid/x-data-grid/src/components/base/GridHeaderPlaceholder.tsx b/packages/grid/x-data-grid/src/components/base/GridHeaderPlaceholder.tsx
@@ -1,16 +1,15 @@
 import * as React from 'react';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { GridHeader } from '../GridHeader';
 
 export function GridHeaderPlaceholder() {
   const apiRef = useGridApiContext();
-  const rootProps = useGridRootProps();
   const headerRef = React.useRef<HTMLDivElement>(null);
   apiRef.current.headerRef = headerRef;
 
   return (
     <div ref={headerRef}>
-      <rootProps.components.Header {...rootProps.componentsProps?.header} />
+      <GridHeader />
     </div>
   );
 }
diff --git a/packages/grid/x-data-grid/src/constants/defaultGridSlotsComponents.ts b/packages/grid/x-data-grid/src/constants/defaultGridSlotsComponents.ts
@@ -21,7 +21,6 @@ import {
   GridFilterListIcon,
   GridFilterPanel,
   GridFooter,
-  GridHeader,
   GridLoadingOverlay,
   GridNoRowsOverlay,
   GridPagination,
@@ -94,7 +93,6 @@ export const DATA_GRID_DEFAULT_SLOTS_COMPONENTS: GridSlotsComponent = {
   ColumnMenu: GridColumnMenu,
   ErrorOverlay: GridErrorOverlay,
   Footer: GridFooter,
-  Header: GridHeader,
   Toolbar: null,
   PreferencesPanel: GridPreferencesPanel,
   LoadingOverlay: GridLoadingOverlay,

diff --git a/packages/grid/x-data-grid/src/models/gridSlotsComponent.ts b/packages/grid/x-data-grid/src/models/gridSlotsComponent.ts
@@ -76,12 +76,6 @@ export interface GridSlotsComponent extends GridIconSlotsComponent {
    * @default GridFooter
    */
   Footer: React.JSXElementConstructor<any>;
-  /**
-   * Header component rendered above the grid column header bar.
-   * Prefer using the `Toolbar` slot. You should never need to use this slot.
-   * @default GridHeader
-   */
-  Header: React.JSXElementConstructor<any>; // TODO remove.
   /**
    * Toolbar component rendered inside the Header component.
    * @default null

diff --git a/packages/grid/x-data-grid/src/models/gridSlotsComponentsProps.ts b/packages/grid/x-data-grid/src/models/gridSlotsComponentsProps.ts
@@ -17,7 +17,6 @@ export interface GridSlotsComponentsProps {
   errorOverlay?: any;
   filterPanel?: any;
   footer?: any;
-  header?: any;
   loadingOverlay?: any;
   noResultsOverlay?: any;
   noRowsOverlay?: any;