update Stepper

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

@@ -1,59 +1,63 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
+import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { Theme } from '../styles';
-import { InternalStandardProps as StandardProps } from '..';
 import { PaperProps } from '../Paper';
 import { StepperClasses } from './stepperClasses';
 
 export type Orientation = 'horizontal' | 'vertical';
 
-export interface StepperProps extends StandardProps<PaperProps> {
-  /**
-   * Set the active step (zero based index).
-   * Set to -1 to disable all the steps.
-   * @default 0
-   */
-  activeStep?: number;
-  /**
-   * If set to 'true' and orientation is horizontal,
-   * then the step label will be positioned under the icon.
-   * @default false
-   */
-  alternativeLabel?: boolean;
-  /**
-   * Two or more `<Step />` components.
-   */
-  children?: React.ReactNode;
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes?: Partial<StepperClasses>;
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component?: React.ElementType;
-  /**
-   * An element to be placed between each step.
-   * @default <StepConnector />
-   */
-  connector?: React.ReactElement<any, any> | null;
-  /**
-   * If set the `Stepper` will not assist in controlling steps for linear flow.
-   * @default false
-   */
-  nonLinear?: boolean;
-  /**
-   * The component orientation (layout flow direction).
-   * @default 'horizontal'
-   */
-  orientation?: Orientation;
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx?: SxProps<Theme>;
+export interface StepperTypeMap<P = {}, D extends React.ElementType = 'div'> {
+  props: P &
+    Pick<PaperProps, 'elevation' | 'square' | 'variant'> & {
+      /**
+       * Set the active step (zero based index).
+       * Set to -1 to disable all the steps.
+       * @default 0
+       */
+      activeStep?: number;
+      /**
+       * If set to 'true' and orientation is horizontal,
+       * then the step label will be positioned under the icon.
+       * @default false
+       */
+      alternativeLabel?: boolean;
+      /**
+       * Two or more `<Step />` components.
+       */
+      children?: React.ReactNode;
+      /**
+       * Override or extend the styles applied to the component.
+       */
+      classes?: Partial<StepperClasses>;
+      /**
+       * An element to be placed between each step.
+       * @default <StepConnector />
+       */
+      connector?: React.ReactElement<any, any> | null;
+      /**
+       * If set the `Stepper` will not assist in controlling steps for linear flow.
+       * @default false
+       */
+      nonLinear?: boolean;
+      /**
+       * The component orientation (layout flow direction).
+       * @default 'horizontal'
+       */
+      orientation?: Orientation;
+      /**
+       * The system prop that allows defining system overrides as well as additional CSS styles.
+       */
+      sx?: SxProps<Theme>;
+    };
+  defaultComponent: D;
 }
 
+export type StepperProps<
+  D extends React.ElementType = StepperTypeMap['defaultComponent'],
+  P = { component?: React.ElementType },
+> = OverrideProps<StepperTypeMap<P, D>, D>;
+
 export type StepperClasskey = keyof NonNullable<StepperProps['classes']>;
 
 /**
@@ -66,4 +70,6 @@ export type StepperClasskey = keyof NonNullable<StepperProps['classes']>;
  *
  * - [Stepper API](https://mui.com/material-ui/api/stepper/)
  */
-export default function Stepper(props: StepperProps): JSX.Element;
+declare const Stepper: OverridableComponent<StepperTypeMap>;
+
+export default Stepper;

packages/mui-material/src/Stepper/Stepper.spec.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import Stepper from '@mui/material/Stepper';
+
+<Stepper component="a" href="/" elevation={8} variant="elevation" orientation="vertical" />;
+
+<Stepper sx={(theme) => ({ bgcolor: 'red', borderColor: theme.palette.divider })} />;

packages/mui-material/src/Stepper/Stepper.test.tsx

@@ -22,7 +22,7 @@ describe('<Stepper />', () => {
       refInstanceof: window.HTMLDivElement,
       testVariantProps: { variant: 'foo' },
       testStateOverrides: { prop: 'alternativeLabel', value: true, styleKey: 'alternativeLabel' },
-      skip: ['componentProp', 'componentsProp'],
+      skip: ['componentsProp'],
     }),
   );