[typescript] Make types of componentsProps consistent

packages/mui-core/src/BackdropUnstyled/BackdropUnstyled.d.ts

@@ -2,6 +2,8 @@ import * as React from 'react';
 import { OverridableComponent, OverridableTypeMap, OverrideProps } from '@mui/types';
 import { BackdropUnstyledClasses } from './backdropUnstyledClasses';
 
+export interface BackdropUnstyledComponentsPropsOverrides {}
+
 export interface BackdropUnstyledTypeMap<P = {}, D extends React.ElementType = 'div'> {
   props: P & {
     /**
@@ -21,10 +23,7 @@ export interface BackdropUnstyledTypeMap<P = {}, D extends React.ElementType = '
      * @default {}
      */
     componentsProps?: {
-      root?: {
-        as: React.ElementType;
-        ownerState?: Omit<BackdropUnstyledTypeMap<P, D>['props'], 'components' | 'componentsProps'>;
-      };
+      root?: React.HTMLAttributes<HTMLDivElement> & BackdropUnstyledComponentsPropsOverrides;
     };
     /**
      * Override or extend the styles applied to the component.

packages/mui-core/src/BadgeUnstyled/BadgeUnstyled.d.ts

@@ -7,7 +7,9 @@ export interface BadgeOrigin {
   horizontal: 'left' | 'right';
 }
 
-export interface BadgeUnstyledTypeMap<P = {}, D extends React.ElementType = 'div'> {
+export interface BadgeUnstyledComponentsPropsOverrides {}
+
+export interface BadgeUnstyledTypeMap<P = {}, D extends React.ElementType = 'span'> {
   props: P & {
     /**
      * The anchor of the badge.
@@ -31,14 +33,8 @@ export interface BadgeUnstyledTypeMap<P = {}, D extends React.ElementType = 'div
      * @default {}
      */
     componentsProps?: {
-      root?: {
-        as: React.ElementType;
-        ownerState?: Omit<BadgeUnstyledTypeMap<P, D>['props'], 'components' | 'componentsProps'>;
-      };
-      badge?: {
-        as?: React.ElementType;
-        ownerState?: Omit<BadgeUnstyledTypeMap<P, D>['props'], 'components' | 'componentsProps'>;
-      };
+      root?: React.HTMLAttributes<HTMLSpanElement> & BadgeUnstyledComponentsPropsOverrides;
+      badge?: React.HTMLAttributes<HTMLSpanElement> & BadgeUnstyledComponentsPropsOverrides;
     };
     /**
      * Wrapped shape the badge should overlap.

packages/mui-core/src/ButtonUnstyled/ButtonUnstyledProps.ts

@@ -1,10 +1,13 @@
 import { OverrideProps } from '@mui/types';
+import React from 'react';
 import UseButtonProps from './UseButtonProps';
 
 export interface ButtonUnstyledActions {
   focusVisible(): void;
 }
 
+export interface ButtonUnstyledComponentsPropsOverrides {}
+
 export interface ButtonUnstyledOwnProps extends Omit<UseButtonProps, 'ref'> {
   /**
    * A ref for imperative actions. It currently only supports `focusVisible()` action.
@@ -13,7 +16,7 @@ export interface ButtonUnstyledOwnProps extends Omit<UseButtonProps, 'ref'> {
   children?: React.ReactNode;
   className?: string;
   componentsProps?: {
-    root?: Record<string, any>;
+    root?: React.ButtonHTMLAttributes<HTMLButtonElement> & ButtonUnstyledComponentsPropsOverrides;
   };
 }
 

packages/mui-core/src/FormControlUnstyled/FormControlUnstyledProps.ts

@@ -3,6 +3,8 @@ import * as React from 'react';
 
 export type NativeFormControlElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
 
+export interface FormControlUnstyledComponentsPropsOverrides {}
+
 export interface FormControlUnstyledOwnProps {
   /**
    * The content of the component.
@@ -21,7 +23,7 @@ export interface FormControlUnstyledOwnProps {
     Root?: React.ElementType;
   };
   componentsProps?: {
-    root?: object;
+    root?: React.HTMLAttributes<HTMLDivElement> & FormControlUnstyledComponentsPropsOverrides;
   };
   defaultValue?: unknown;
   /**

packages/mui-core/src/ModalUnstyled/ModalUnstyled.d.ts

@@ -4,6 +4,8 @@ import { BackdropUnstyledProps } from '../BackdropUnstyled';
 import { PortalProps } from '../Portal';
 import { ModalUnstyledClasses } from './modalUnstyledClasses';
 
+export interface ModalUnstyledComponentsPropsOverrides {}
+
 export interface ModalUnstyledTypeMap<P = {}, D extends React.ElementType = 'div'> {
   props: P & {
     /**
@@ -40,10 +42,7 @@ export interface ModalUnstyledTypeMap<P = {}, D extends React.ElementType = 'div
      * @default {}
      */
     componentsProps?: {
-      root?: {
-        as: React.ElementType;
-        ownerState?: Omit<ModalUnstyledTypeMap<P, D>['props'], 'components' | 'componentsProps'>;
-      };
+      root?: React.HTMLAttributes<HTMLDivElement> & ModalUnstyledComponentsPropsOverrides;
     };
     /**
      * An HTML element or function that returns one.

packages/mui-core/src/SliderUnstyled/SliderUnstyled.d.ts

@@ -1,5 +1,6 @@
 import { OverridableComponent, OverridableTypeMap, OverrideProps } from '@mui/types';
 import { SliderUnstyledClasses } from './sliderUnstyledClasses';
+import SliderValueLabelUnstyled from './SliderValueLabelUnstyled';
 
 export interface SliderOwnerStateOverrides {}
 
@@ -15,6 +16,8 @@ export interface ValueLabelProps extends React.HTMLAttributes<HTMLSpanElement> {
   value: number;
 }
 
+export interface SliderUnstyledComponentsPropsOverrides {}
+
 export interface SliderUnstyledTypeMap<P = {}, D extends React.ElementType = 'span'> {
   props: P & {
     /**
@@ -52,45 +55,14 @@ export interface SliderUnstyledTypeMap<P = {}, D extends React.ElementType = 'sp
      * @default {}
      */
     componentsProps?: {
-      root?: {
-        as?: React.ElementType;
-        ownerState?: Omit<SliderUnstyledTypeMap<P, D>['props'], 'components' | 'componentsProps'> &
-          SliderOwnerStateOverrides;
-      };
-      track?: {
-        as?: React.ElementType;
-        ownerState?: Omit<SliderUnstyledTypeMap<P, D>['props'], 'components' | 'componentsProps'> &
-          SliderOwnerStateOverrides;
-      };
-      rail?: {
-        as?: React.ElementType;
-        ownerState?: Omit<SliderUnstyledTypeMap<P, D>['props'], 'components' | 'componentsProps'> &
-          SliderOwnerStateOverrides;
-      };
-      thumb?: {
-        as?: React.ElementType;
-        ownerState?: Omit<SliderUnstyledTypeMap<P, D>['props'], 'components' | 'componentsProps'> &
-          SliderOwnerStateOverrides;
-      };
-      mark?: {
-        as?: React.ElementType;
-        ownerState?: Omit<
-          SliderUnstyledTypeMap<P, D>['props'],
-          'components' | 'componentsProps'
-        > & { markActive?: boolean } & SliderOwnerStateOverrides;
-      };
-      markLabel?: {
-        as?: React.ElementType;
-        ownerState?: Omit<
-          SliderUnstyledTypeMap<P, D>['props'],
-          'components' | 'componentsProps'
-        > & { markLabelActive?: boolean } & SliderOwnerStateOverrides;
-      };
-      valueLabel?: {
-        as?: React.ElementType;
-        ownerState?: Omit<SliderUnstyledTypeMap<P, D>['props'], 'components' | 'componentsProps'> &
-          SliderOwnerStateOverrides;
-      };
+      root?: React.HTMLAttributes<HTMLSpanElement> & SliderUnstyledComponentsPropsOverrides;
+      track?: React.HTMLAttributes<HTMLSpanElement> & SliderUnstyledComponentsPropsOverrides;
+      rail?: React.HTMLAttributes<HTMLSpanElement> & SliderUnstyledComponentsPropsOverrides;
+      thumb?: React.HTMLAttributes<HTMLSpanElement> & SliderUnstyledComponentsPropsOverrides;
+      mark?: React.HTMLAttributes<HTMLSpanElement> & SliderUnstyledComponentsPropsOverrides;
+      markLabel?: React.HTMLAttributes<HTMLSpanElement> & SliderUnstyledComponentsPropsOverrides;
+      valueLabel?: React.ComponentPropsWithRef<typeof SliderValueLabelUnstyled> &
+        SliderUnstyledComponentsPropsOverrides;
     };
     /**
      * The default value. Use when the component is not controlled.

packages/mui-core/src/SliderUnstyled/SliderValueLabelUnstyled.d.ts

@@ -27,4 +27,4 @@ export interface ValueLabelUnstyledProps {
   valueLabelDisplay?: 'on' | 'auto' | 'off';
 }
 
-export default function ValueLabel(props: ValueLabelUnstyledProps): JSX.Element;
+export default function SliderValueLabelUnstyled(props: ValueLabelUnstyledProps): JSX.Element;

packages/mui-core/src/SwitchUnstyled/SwitchUnstyled.tsx

@@ -5,6 +5,8 @@ import useSwitch, { SwitchState, UseSwitchProps } from './useSwitch';
 import classes from './switchUnstyledClasses';
 import appendOwnerState from '../utils/appendOwnerState';
 
+export interface SwitchUnstyledComponentsPropsOverrides {}
+
 export interface SwitchUnstyledProps extends UseSwitchProps {
   /**
    * Class name applied to the root element.
@@ -33,10 +35,10 @@ export interface SwitchUnstyledProps extends UseSwitchProps {
    * @default {}
    */
   componentsProps?: {
-    root?: {};
-    thumb?: {};
-    input?: {};
-    track?: {};
+    root?: React.HTMLAttributes<HTMLSpanElement> & SwitchUnstyledComponentsPropsOverrides;
+    thumb?: React.HTMLAttributes<HTMLSpanElement> & SwitchUnstyledComponentsPropsOverrides;
+    input?: React.InputHTMLAttributes<HTMLInputElement> & SwitchUnstyledComponentsPropsOverrides;
+    track?: React.HTMLAttributes<HTMLSpanElement> & SwitchUnstyledComponentsPropsOverrides;
   };
 }
 

packages/mui-core/test/typescript/moduleAugmentation/sliderComponentsProps.spec.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { SliderUnstyled } from '@mui/core';
+
+declare module '@mui/core' {
+  interface SliderUnstyledComponentsPropsOverrides {
+    variant?: 'one' | 'two';
+  }
+}
+
+<SliderUnstyled componentsProps={{ root: { variant: 'one' } }} />;
+
+// @ts-expect-error unknown color
+<SliderUnstyled componentsProps={{ root: { variant: 'three' } }} />;

packages/mui-core/test/typescript/moduleAugmentation/sliderComponentsProps.tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../../../../tsconfig",
+  "files": ["sliderComponentsProps.spec.tsx"]
+}

packages/mui-lab/src/CalendarPicker/PickersCalendarHeader.tsx

@@ -26,6 +26,8 @@ export type ExportedCalendarHeaderProps<TDate> = Pick<
   | 'rightArrowButtonText'
 >;
 
+export interface PickersCalendarHeaderComponentsPropsOverides {}
+
 export interface PickersCalendarHeaderProps<TDate>
   extends ExportedArrowSwitcherProps,
     Omit<DateValidationProps<TDate>, 'shouldDisableDate'> {
@@ -43,7 +45,8 @@ export interface PickersCalendarHeaderProps<TDate>
    * @default {}
    */
   componentsProps?: ExportedArrowSwitcherProps['componentsProps'] & {
-    switchViewButton?: any;
+    switchViewButton?: React.ComponentPropsWithRef<typeof IconButton> &
+      PickersCalendarHeaderComponentsPropsOverides;
   };
   currentMonth: TDate;
   views: readonly CalendarPickerView[];
@@ -201,7 +204,6 @@ function PickersCalendarHeader<TDate>(props: PickersCalendarHeaderProps<TDate>)
             as={components.SwitchViewButton}
             aria-label={getViewSwitchingButtonText(currentView)}
             {...switchViewButtonProps}
-            ownerState={{ ...ownerState, ...switchViewButtonProps }}
           >
             <PickersCalendarHeaderSwitchView
               as={components.SwitchViewIcon}

packages/mui-lab/src/ClockPicker/ClockPicker.tsx

@@ -29,6 +29,8 @@ export interface ClockPickerClasses {
 
 export type ClockPickerClassKey = keyof ClockPickerClasses;
 
+export interface ClockPickerComponentsPropsOverrides {}
+
 export function getClockPickerUtilityClass(slot: string) {
   return generateUtilityClass('MuiClockPicker', slot);
 }
@@ -104,8 +106,8 @@ export interface ClockPickerProps<TDate> extends ExportedClockPickerProps<TDate>
    * The props used for each slot inside.
    */
   componentsProps?: {
-    leftArrowButton?: any;
-    rightArrowButton?: any;
+    leftArrowButton?: React.SVGAttributes<SVGSVGElement> & ClockPickerComponentsPropsOverrides;
+    rightArrowButton?: React.SVGAttributes<SVGSVGElement> & ClockPickerComponentsPropsOverrides;
   };
 
   /**

packages/mui-lab/src/internal/pickers/PickersArrowSwitcher.tsx

@@ -22,8 +22,8 @@ export interface ExportedArrowSwitcherProps {
    * @default {}
    */
   componentsProps?: {
-    leftArrowButton?: any;
-    rightArrowButton?: any;
+    leftArrowButton?: Record<string, any>;
+    rightArrowButton?: Record<string, any>;
   };
   /**
    * Left arrow icon aria-label text.
@@ -58,7 +58,7 @@ const PickersArrowSwitcherSpacer = styled('div', { skipSx: true })<{
 }));
 
 const PickersArrowSwitcherButton = styled(IconButton, { skipSx: true })<{
-  ownerState: ArrowSwitcherProps & { hidden: boolean };
+  ownerState: ArrowSwitcherProps;
 }>(({ ownerState }) => ({
   ...(ownerState.hidden && {
     visibility: 'hidden',

packages/mui-material/src/InputBase/InputBase.d.ts

@@ -9,6 +9,8 @@ export interface InputBasePropsSizeOverrides {}
 
 export interface InputBasePropsColorOverrides {}
 
+export interface InputBaseComponentsPropsOverrides {}
+
 export interface InputBaseProps
   extends StandardProps<
     React.HTMLAttributes<HTMLDivElement>,
@@ -51,26 +53,13 @@ export interface InputBaseProps
     Root?: React.ElementType;
     Input?: React.ElementType;
   };
-
   /**
    * The props used for each slot inside the Input.
    * @default {}
    */
   componentsProps?: {
-    root?: {
-      as: React.ElementType;
-      ownerState?: Omit<InputBaseProps, 'components' | 'componentsProps'> & {
-        hiddenLabel?: boolean;
-        focused?: boolean;
-      };
-    };
-    input?: {
-      as?: React.ElementType;
-      ownerState?: Omit<InputBaseProps, 'components' | 'componentsProps'> & {
-        hiddenLabel?: boolean;
-        focused?: boolean;
-      };
-    };
+    root?: React.HTMLAttributes<HTMLDivElement> & InputBaseComponentsPropsOverrides;
+    input?: React.InputHTMLAttributes<HTMLInputElement> & InputBaseComponentsPropsOverrides;
   };
   /**
    * The default value. Use when the component is not controlled.

packages/mui-material/src/ListItem/ListItem.d.ts

@@ -5,6 +5,8 @@ import { ExtendButtonBase } from '../ButtonBase';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { ListItemClasses } from './listItemClasses';
 
+export interface ListItemComponentsPropsOverrides {}
+
 interface ListItemBaseProps {
   /**
    * Defines the `align-items` style property.
@@ -98,12 +100,7 @@ export interface ListItemTypeMap<P, D extends React.ElementType> {
        * @default {}
        */
       componentsProps?: {
-        root?: {
-          as: React.ElementType;
-          ownerState?: Omit<ListItemBaseProps, 'components' | 'componentsProps'> & {
-            dense?: boolean;
-          };
-        };
+        root?: React.HTMLAttributes<HTMLDivElement> & ListItemComponentsPropsOverrides;
       };
     };
   defaultComponent: D;