[DataGrid] Add slot typings

docs/data/data-grid/components/CustomColumnMenu.tsx

@@ -10,6 +10,7 @@ import {
   GridColumnMenuSortItem,
   useGridApiRef,
   DataGridPro,
+  GridSlots,
 } from '@mui/x-data-grid-pro';
 import StarOutlineIcon from '@mui/icons-material/StarOutline';
 
@@ -119,7 +120,7 @@ export default function CustomColumnMenu() {
             },
           ]}
           slots={{
-            columnMenu: CustomColumnMenuComponent,
+            columnMenu: CustomColumnMenuComponent as GridSlots['columnMenu'],
           }}
           slotProps={{
             columnMenu: { color },

docs/data/data-grid/components/CustomLoadingOverlayGrid.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DataGrid } from '@mui/x-data-grid';
+import { DataGrid, GridSlots } from '@mui/x-data-grid';
 import LinearProgress from '@mui/material/LinearProgress';
 import { useDemoData } from '@mui/x-data-grid-generator';
 
@@ -14,7 +14,7 @@ export default function CustomLoadingOverlayGrid() {
     <div style={{ height: 400, width: '100%' }}>
       <DataGrid
         slots={{
-          loadingOverlay: LinearProgress,
+          loadingOverlay: LinearProgress as GridSlots['loadingOverlay'],
         }}
         loading
         {...data}

docs/data/data-grid/components/CustomLoadingOverlayGrid.tsx.preview

@@ -1,6 +1,6 @@
 <DataGrid
   slots={{
-    loadingOverlay: LinearProgress,
+    loadingOverlay: LinearProgress as GridSlots['loadingOverlay'],
   }}
   loading
   {...data}

docs/data/data-grid/editing/FullFeaturedCrudGrid.tsx

@@ -18,6 +18,7 @@ import {
   GridRowId,
   GridRowModel,
   GridRowEditStopReasons,
+  GridSlots,
 } from '@mui/x-data-grid';
 import {
   randomCreatedDate,
@@ -237,7 +238,7 @@ export default function FullFeaturedCrudGrid() {
         onRowEditStop={handleRowEditStop}
         processRowUpdate={processRowUpdate}
         slots={{
-          toolbar: EditToolbar,
+          toolbar: EditToolbar as GridSlots['toolbar'],
         }}
         slotProps={{
           toolbar: { setRows, setRowModesModel },

docs/data/data-grid/editing/FullFeaturedCrudGrid.tsx.preview

@@ -7,7 +7,7 @@
   onRowEditStop={handleRowEditStop}
   processRowUpdate={processRowUpdate}
   slots={{
-    toolbar: EditToolbar,
+    toolbar: EditToolbar as GridSlots['toolbar'],
   }}
   slotProps={{
     toolbar: { setRows, setRowModesModel },

docs/data/data-grid/editing/StartEditButtonGrid.tsx

@@ -9,6 +9,7 @@ import {
   GridCellModes,
   GridEventListener,
   GridCellModesModel,
+  GridSlots,
 } from '@mui/x-data-grid';
 import {
   randomCreatedDate,
@@ -147,7 +148,7 @@ export default function StartEditButtonGrid() {
         onCellEditStop={handleCellEditStop}
         onCellModesModelChange={(model) => setCellModesModel(model)}
         slots={{
-          toolbar: EditToolbar,
+          toolbar: EditToolbar as GridSlots['toolbar'],
         }}
         slotProps={{
           toolbar: {

docs/data/data-grid/filtering/CustomFilterPanelPosition.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {
   DataGrid,
+  GridSlots,
   GridToolbarContainer,
   GridToolbarFilterButton,
 } from '@mui/x-data-grid';
@@ -35,7 +36,7 @@ export default function CustomFilterPanelPosition() {
       <DataGrid
         {...data}
         slots={{
-          toolbar: CustomToolbar,
+          toolbar: CustomToolbar as GridSlots['toolbar'],
         }}
         slotProps={{
           panel: {

docs/data/data-grid/filtering/CustomFilterPanelPosition.tsx.preview

@@ -1,7 +1,7 @@
 <DataGrid
   {...data}
   slots={{
-    toolbar: CustomToolbar,
+    toolbar: CustomToolbar as GridSlots['toolbar'],
   }}
   slotProps={{
     panel: {

docs/data/data-grid/row-updates/InfiniteLoadingGrid.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DataGridPro, DataGridProProps } from '@mui/x-data-grid-pro';
+import { DataGridPro, DataGridProProps, GridSlots } from '@mui/x-data-grid-pro';
 import {
   useDemoData,
   getRealGridData,
@@ -61,7 +61,7 @@ export default function InfiniteLoadingGrid() {
         hideFooterPagination
         onRowsScrollEnd={handleOnRowsScrollEnd}
         slots={{
-          loadingOverlay: LinearProgress,
+          loadingOverlay: LinearProgress as GridSlots['loadingOverlay'],
         }}
       />
     </div>

docs/data/data-grid/row-updates/InfiniteLoadingGrid.tsx.preview

@@ -5,6 +5,6 @@
   hideFooterPagination
   onRowsScrollEnd={handleOnRowsScrollEnd}
   slots={{
-    loadingOverlay: LinearProgress,
+    loadingOverlay: LinearProgress as GridSlots['loadingOverlay'],
   }}
 />

docs/data/data-grid/state/RestoreStateInitialState.tsx

@@ -5,6 +5,7 @@ import Stack from '@mui/material/Stack';
 import {
   DataGridPro,
   GridInitialState,
+  GridSlots,
   GridToolbarContainer,
   GridToolbarDensitySelector,
   GridToolbarFilterButton,
@@ -62,7 +63,7 @@ export default function RestoreStateInitialState() {
         <DataGridPro
           {...data}
           loading={loading}
-          slots={{ toolbar: GridCustomToolbar }}
+          slots={{ toolbar: GridCustomToolbar as GridSlots['toolbar'] }}
           slotProps={{ toolbar: { syncState } }}
         />
       </Box>

docs/data/data-grid/state/RestoreStateInitialState.tsx.preview

@@ -2,7 +2,7 @@
   <DataGridPro
     {...data}
     loading={loading}
-    slots={{ toolbar: GridCustomToolbar }}
+    slots={{ toolbar: GridCustomToolbar as GridSlots['toolbar'] }}
     slotProps={{ toolbar: { syncState } }}
   />
 </Box>

packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx

@@ -23,6 +23,8 @@ import {
 import { useDataGridPremiumProps } from './useDataGridPremiumProps';
 import { getReleaseInfo } from '../utils/releaseInfo';
 
+export type { GridPremiumSlotsComponent as GridSlots } from '../models';
+
 const releaseInfo = getReleaseInfo();
 
 const dataGridPremiumPropValidators: PropValidator<DataGridPremiumProcessedProps>[] = [

packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx

@@ -16,6 +16,8 @@ import { useDataGridProProps } from './useDataGridProProps';
 import { getReleaseInfo } from '../utils/releaseInfo';
 import { propValidatorsDataGridPro } from '../internals/propValidation';
 
+export type { GridProSlotsComponent as GridSlots } from '../models';
+
 const releaseInfo = getReleaseInfo();
 
 const DataGridProRaw = React.forwardRef(function DataGridPro<R extends GridValidRowModel>(

packages/grid/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenuContainer.tsx

@@ -53,13 +53,16 @@ function GridHeaderFilterMenuContainer(props: {
     return null;
   }
 
+  const label = apiRef.current.getLocaleText('filterPanelOperator');
+  const labelString = label ? String(label) : undefined;
+
   return (
     <React.Fragment>
       <rootProps.slots.baseIconButton
         id={buttonId}
         ref={buttonRef}
-        aria-label={apiRef.current.getLocaleText('filterPanelOperator')}
-        title={apiRef.current.getLocaleText('filterPanelOperator')}
+        aria-label={labelString}
+        title={labelString}
         aria-controls={menuId}
         aria-expanded={open ? 'true' : undefined}
         aria-haspopup="true"

packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx

@@ -12,6 +12,8 @@ import {
   validateProps,
 } from '../internals/utils/propValidation';
 
+export type { GridSlotsComponent as GridSlots } from '../models';
+
 const propValidators: PropValidator<DataGridProcessedProps>[] = [
   ...propValidatorsDataGrid,
   // Only validate in MIT version

packages/grid/x-data-grid/src/components/GridPagination.tsx

@@ -26,7 +26,7 @@ const GridPaginationRoot = styled(TablePagination)(({ theme }) => ({
   },
 })) as typeof TablePagination;
 
-export const GridPagination = React.forwardRef<HTMLDivElement, Partial<TablePaginationProps>>(
+export const GridPagination = React.forwardRef<unknown, Partial<TablePaginationProps>>(
   function GridPagination(props, ref) {
     const apiRef = useGridApiContext();
     const rootProps = useGridRootProps();

packages/grid/x-data-grid/src/components/GridRow.tsx

@@ -389,7 +389,7 @@ const GridRow = React.forwardRef<HTMLDivElement, GridRowProps>(function GridRow(
           width={width}
           contentWidth={contentWidth}
           field={column.field}
-          align={column.align}
+          align={column.align ?? 'left'}
         />
       );
     }

packages/grid/x-data-grid/src/components/base/GridFooterPlaceholder.tsx

@@ -8,5 +8,7 @@ export function GridFooterPlaceholder() {
     return null;
   }
 
-  return <rootProps.slots.footer {...rootProps.slotProps?.footer} />;
+  return (
+    <rootProps.slots.footer {...(rootProps.slotProps?.footer as any) /* FIXME: typing error */} />
+  );
 }

packages/grid/x-data-grid/src/components/columnSelection/GridCellCheckboxRenderer.tsx

@@ -49,7 +49,7 @@ const GridCellCheckboxForwardRef = React.forwardRef<HTMLInputElement, GridRender
     const rootProps = useGridRootProps();
     const ownerState = { classes: rootProps.classes };
     const classes = useUtilityClasses(ownerState);
-    const checkboxElement = React.useRef<HTMLInputElement | null>(null);
+    const checkboxElement = React.useRef<HTMLElement>(null);
 
     const rippleRef = React.useRef<TouchRippleActions>(null);
     const handleRef = useForkRef(checkboxElement, ref);
@@ -104,7 +104,7 @@ const GridCellCheckboxForwardRef = React.forwardRef<HTMLInputElement, GridRender
         inputProps={{ 'aria-label': label }}
         onKeyDown={handleKeyDown}
         disabled={!isSelectable}
-        touchRippleRef={rippleRef}
+        touchRippleRef={rippleRef as any /* FIXME: typing error */}
         {...rootProps.slotProps?.baseCheckbox}
         {...other}
       />

packages/grid/x-data-grid/src/components/columnSelection/GridHeaderCheckbox.tsx

@@ -27,7 +27,7 @@ const useUtilityClasses = (ownerState: OwnerState) => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 
-const GridHeaderCheckbox = React.forwardRef<HTMLInputElement, GridColumnHeaderParams>(
+const GridHeaderCheckbox = React.forwardRef<HTMLButtonElement, GridColumnHeaderParams>(
   function GridHeaderCheckbox(props, ref) {
     const { field, colDef, ...other } = props;
     const [, forceUpdate] = React.useState(false);

packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx

@@ -316,7 +316,7 @@ const GridFilterForm = React.forwardRef<HTMLDivElement, GridFilterFormProps>(
     }, [item, currentColumn]);
 
     const changeColumn = React.useCallback(
-      (event: SelectChangeEvent) => {
+      (event: SelectChangeEvent<any>) => {
         const field = event.target.value as string;
         const column = apiRef.current.getColumn(field)!;
 
@@ -369,7 +369,7 @@ const GridFilterForm = React.forwardRef<HTMLDivElement, GridFilterFormProps>(
     );
 
     const changeOperator = React.useCallback(
-      (event: SelectChangeEvent) => {
+      (event: SelectChangeEvent<any>) => {
         const operator = event.target.value as string;
 
         const newOperator = currentColumn?.filterOperators!.find((op) => op.value === operator);
@@ -388,7 +388,7 @@ const GridFilterForm = React.forwardRef<HTMLDivElement, GridFilterFormProps>(
     );
 
     const changeLogicOperator = React.useCallback(
-      (event: SelectChangeEvent) => {
+      (event: SelectChangeEvent<any>) => {
         const logicOperator =
           (event.target.value as string) === GridLogicOperator.And.toString()
             ? GridLogicOperator.And

packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx

@@ -85,7 +85,9 @@ function GridFilterInputBoolean(props: GridFilterInputBooleanProps) {
           native={isSelectNative}
           displayEmpty
           inputProps={{ ref: focusElementRef, tabIndex }}
-          {...others}
+          {
+            ...(others as any) /* FIXME: typing error */
+          }
           {...baseSelectProps}
         >
           <rootProps.slots.baseSelectOption

packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx

@@ -104,7 +104,7 @@ function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps) {
   }, [resolvedColumn]);
 
   const onFilterChange = React.useCallback(
-    (event: SelectChangeEvent) => {
+    (event: SelectChangeEvent<any>) => {
       let value = event.target.value;
 
       // NativeSelect casts the value to a string.
@@ -146,7 +146,9 @@ function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps) {
             placeholder: placeholder ?? apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
           }}
           native={isSelectNative}
-          {...others}
+          {
+            ...(others as any) /* FIXME: typing error */
+          }
           {...rootProps.slotProps?.baseSelect}
         >
           {renderSingleSelectOptions({

packages/grid/x-data-grid/src/joy/joySlots.tsx

@@ -16,7 +16,7 @@ import JoyCircularProgress from '@mui/joy/CircularProgress';
 import JoyTooltip from '@mui/joy/Tooltip';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
 import joyIconSlots, { GridKeyboardArrowRight, GridKeyboardArrowLeft } from './icons';
-import type { GridSlotsComponent, GridSlotsComponentsProps } from '../models';
+import type { GridSlotProps, GridSlotsComponent, GridSlotsComponentsProps } from '../models';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { gridFilteredTopLevelRowCountSelector, gridPaginationModelSelector } from '../hooks';
@@ -116,10 +116,10 @@ const TextField = React.forwardRef<
   );
 });
 
-const Button = React.forwardRef<
-  HTMLButtonElement,
-  NonNullable<GridSlotsComponentsProps['baseButton']>
->(function Button({ startIcon, color, endIcon, size, sx, variant, ...props }, ref) {
+const Button = React.forwardRef<HTMLButtonElement, GridSlotProps['baseButton']>(function Button(
+  { startIcon, color, endIcon, size, sx, variant, ...props },
+  ref,
+) {
   return (
     <JoyButton
       {...props}
@@ -150,10 +150,7 @@ const IconButton = React.forwardRef<
   );
 });
 
-const Switch = React.forwardRef<
-  HTMLDivElement,
-  NonNullable<GridSlotsComponentsProps['baseSwitch']>
->(function Switch(
+const Switch = React.forwardRef<any, GridSlotProps['baseSwitch']>(function Switch(
   {
     name,
     checkedIcon,
@@ -204,10 +201,7 @@ const Switch = React.forwardRef<
   );
 });
 
-const Select = React.forwardRef<
-  HTMLButtonElement,
-  NonNullable<GridSlotsComponentsProps['baseSelect']>
->(
+const Select = React.forwardRef<any, GridSlotProps['baseSelect']>(
   (
     {
       open,
@@ -314,10 +308,7 @@ const getLabelDisplayedRowsTo = ({
   return pageSize === -1 ? rowCount : Math.min(rowCount, (page + 1) * pageSize);
 };
 
-const Pagination = React.forwardRef<
-  HTMLDivElement,
-  NonNullable<GridSlotsComponentsProps['pagination']>
->((props, ref) => {
+const Pagination = React.forwardRef<any, GridSlotProps['pagination']>((props, ref) => {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const paginationModel = gridPaginationModelSelector(apiRef);
@@ -443,8 +434,8 @@ const joySlots: Partial<GridSlotsComponent> = {
   baseSelect: Select,
   baseSelectOption: Option,
   baseInputLabel: InputLabel,
-  baseFormControl: JoyFormControl,
-  baseTooltip: JoyTooltip,
+  baseFormControl: JoyFormControl as any /* FIXME: typing error */,
+  baseTooltip: JoyTooltip as any /* FIXME: typing error */,
   pagination: Pagination,
   loadingOverlay: LoadingOverlay,
 };