mui · romgrk · Feb 5, 2024 · Jan 23, 2024 · Jan 24, 2024 · Jan 24, 2024
diff --git a/docs/data/data-grid/components/CustomColumnMenu.tsx b/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 },

diff --git a/docs/data/data-grid/components/CustomLoadingOverlayGrid.tsx b/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}

diff --git a/docs/data/data-grid/components/CustomLoadingOverlayGrid.tsx.preview b/docs/data/data-grid/components/CustomLoadingOverlayGrid.tsx.preview
@@ -1,6 +1,6 @@
 <DataGrid
   slots={{
-    loadingOverlay: LinearProgress,
+    loadingOverlay: LinearProgress as GridSlots['loadingOverlay'],
   }}
   loading
   {...data}

diff --git a/docs/data/data-grid/editing/FullFeaturedCrudGrid.tsx b/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 },

diff --git a/docs/data/data-grid/editing/FullFeaturedCrudGrid.tsx.preview b/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 },

diff --git a/docs/data/data-grid/editing/StartEditButtonGrid.tsx b/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: {

diff --git a/docs/data/data-grid/filtering/CustomFilterPanelPosition.tsx b/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: {

diff --git a/docs/data/data-grid/filtering/CustomFilterPanelPosition.tsx.preview b/docs/data/data-grid/filtering/CustomFilterPanelPosition.tsx.preview
@@ -1,7 +1,7 @@
 <DataGrid
   {...data}
   slots={{
-    toolbar: CustomToolbar,
+    toolbar: CustomToolbar as GridSlots['toolbar'],
   }}
   slotProps={{
     panel: {

diff --git a/docs/data/data-grid/row-updates/InfiniteLoadingGrid.tsx b/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>

diff --git a/docs/data/data-grid/row-updates/InfiniteLoadingGrid.tsx.preview b/docs/data/data-grid/row-updates/InfiniteLoadingGrid.tsx.preview
@@ -5,6 +5,6 @@
   hideFooterPagination
   onRowsScrollEnd={handleOnRowsScrollEnd}
   slots={{
-    loadingOverlay: LinearProgress,
+    loadingOverlay: LinearProgress as GridSlots['loadingOverlay'],
   }}
 />
diff --git a/docs/data/data-grid/state/RestoreStateInitialState.tsx b/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>

diff --git a/docs/data/data-grid/state/RestoreStateInitialState.tsx.preview b/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>

diff --git a/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx b/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>[] = [

diff --git a/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx b/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>(

diff --git a/...ges/grid/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenuContainer.tsx b/...ges/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"

diff --git a/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx b/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

diff --git a/packages/grid/x-data-grid/src/components/GridPagination.tsx b/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();

diff --git a/packages/grid/x-data-grid/src/components/GridRow.tsx b/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'}
         />
       );
     }

diff --git a/packages/grid/x-data-grid/src/components/base/GridFooterPlaceholder.tsx b/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 */} />
 declare module '@mui/x-data-grid' { 
   interface FooterPropsOverrides { 
     status: FooterStatus; 
   } 
 } 
 declare module '@mui/x-data-grid' { 
   interface FooterPropsOverrides { 
     status: FooterStatus; 
   } 
 } 
+  );
 }
diff --git a/packages/grid/x-data-grid/src/components/columnSelection/GridCellCheckboxRenderer.tsx b/packages/grid/x-data-grid/src/components/columnSelection/GridCellCheckboxRenderer.tsx
@@ -96,15 +96,15 @@ const GridCellCheckboxForwardRef = React.forwardRef<HTMLInputElement, GridRender
 
     return (
       <rootProps.slots.baseCheckbox
-        ref={handleRef}
+        ref={handleRef as any /* FIXME: typing error */}
         tabIndex={tabIndex}
         checked={isChecked}
         onChange={handleChange}
         className={classes.root}
         inputProps={{ 'aria-label': label }}
         onKeyDown={handleKeyDown}
         disabled={!isSelectable}
-        touchRippleRef={rippleRef}
+        touchRippleRef={rippleRef as any /* FIXME: typing error */}
         {...rootProps.slotProps?.baseCheckbox}
         {...other}
       />

diff --git a/packages/grid/x-data-grid/src/components/columnSelection/GridHeaderCheckbox.tsx b/packages/grid/x-data-grid/src/components/columnSelection/GridHeaderCheckbox.tsx
@@ -131,7 +131,7 @@ const GridHeaderCheckbox = React.forwardRef<HTMLInputElement, GridColumnHeaderPa
 
     return (
       <rootProps.slots.baseCheckbox
-        ref={ref}
+        ref={ref as any /* FIXME: typing error */}
         indeterminate={isIndeterminate}
         checked={isChecked}
         onChange={handleChange}

diff --git a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx b/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

diff --git a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx
@@ -80,12 +80,14 @@ function GridFilterInputBoolean(props: GridFilterInputBooleanProps) {
           id={selectId}
           label={label}
           value={filterValueState}
-          onChange={onFilterChange}
+          onChange={onFilterChange as any /* FIXME: typing error */}
           variant="standard"
           native={isSelectNative}
           displayEmpty
           inputProps={{ ref: focusElementRef, tabIndex }}
-          {...others}
+          {
+            ...(others as any) /* FIXME: typing error */
+          }
           {...baseSelectProps}
         >
           <rootProps.slots.baseSelectOption

diff --git a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx b/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.
@@ -137,7 +137,7 @@ function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps) {
           label={label}
           labelId={labelId}
           value={filterValue}
-          onChange={onFilterChange}
+          onChange={onFilterChange as any /* FIXME: typing error */}
           variant="standard"
           type={type || 'text'}
           inputProps={{
@@ -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({

diff --git a/packages/grid/x-data-grid/src/joy/joySlots.tsx b/packages/grid/x-data-grid/src/joy/joySlots.tsx
@@ -439,13 +439,13 @@ const joySlots: Partial<GridSlotsComponent> = {
   baseTextField: TextField,
   baseButton: Button,
   baseIconButton: IconButton,
-  baseSwitch: Switch,
-  baseSelect: Select,
+  baseSwitch: Switch as any /* FIXME: typing error */,
+  baseSelect: Select as any /* FIXME: typing error */,
   baseSelectOption: Option,
   baseInputLabel: InputLabel,
-  baseFormControl: JoyFormControl,
-  baseTooltip: JoyTooltip,
-  pagination: Pagination,
+  baseFormControl: JoyFormControl as any /* FIXME: typing error */,
+  baseTooltip: JoyTooltip as any /* FIXME: typing error */,
+  pagination: Pagination as any /* FIXME: typing error */,
   loadingOverlay: LoadingOverlay,
 };
 

diff --git a/packages/grid/x-data-grid/src/models/api/gridLocaleTextApi.ts b/packages/grid/x-data-grid/src/models/api/gridLocaleTextApi.ts
@@ -41,9 +41,9 @@ export interface GridLocaleText {
   toolbarExportExcel: string;
 
   // Columns management text
-  columnsManagementSearchTitle: React.ReactNode;
-  columnsManagementNoColumns: React.ReactNode;
-  columnsManagementShowHideAllText: React.ReactNode;
+  columnsManagementSearchTitle: string;
+  columnsManagementNoColumns: string;
+  columnsManagementShowHideAllText: string;
 
   // Filter panel text
   filterPanelAddFilter: React.ReactNode;