@mui/material 5.10.3 → 5.10.4

package/Step/Step.d.ts

@@ -1,61 +1,72 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
-import { InternalStandardProps as StandardProps, Theme } from '..';
+import { OverridableComponent, OverrideProps } from '../OverridableComponent';
+import { Theme } from '../styles';
 import { StepClasses } from './stepClasses';
 
-export interface StepProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
-  /**
-   * Sets the step as active. Is passed to child components.
-   */
-  active?: boolean;
-  /**
-   * Should be `Step` sub-components such as `StepLabel`, `StepContent`.
-   */
-  children?: React.ReactNode;
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes?: Partial<StepClasses>;
-  /**
-   * Mark the step as completed. Is passed to child components.
-   */
-  completed?: boolean;
-  /**
-   * If `true`, the step is disabled, will also disable the button if
-   * `StepButton` is a child of `Step`. Is passed to child components.
-   */
-  disabled?: boolean;
-  /**
-   * Expand the step.
-   * @default false
-   */
-  expanded?: boolean;
-  /**
-   * The position of the step.
-   * The prop defaults to the value inherited from the parent Stepper component.
-   */
-  index?: number;
-  /**
-   * If `true`, the Step is displayed as rendered last.
-   * The prop defaults to the value inherited from the parent Stepper component.
-   */
-  last?: boolean;
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx?: SxProps<Theme>;
+export interface StepTypeMap<P = {}, D extends React.ElementType = 'div'> {
+  props: P & {
+    /**
+     * Sets the step as active. Is passed to child components.
+     */
+    active?: boolean;
+    /**
+     * Should be `Step` sub-components such as `StepLabel`, `StepContent`.
+     */
+    children?: React.ReactNode;
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes?: Partial<StepClasses>;
+    /**
+     * Mark the step as completed. Is passed to child components.
+     */
+    completed?: boolean;
+    /**
+     * If `true`, the step is disabled, will also disable the button if
+     * `StepButton` is a child of `Step`. Is passed to child components.
+     */
+    disabled?: boolean;
+    /**
+     * Expand the step.
+     * @default false
+     */
+    expanded?: boolean;
+    /**
+     * The position of the step.
+     * The prop defaults to the value inherited from the parent Stepper component.
+     */
+    index?: number;
+    /**
+     * If `true`, the Step is displayed as rendered last.
+     * The prop defaults to the value inherited from the parent Stepper component.
+     */
+    last?: boolean;
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps<Theme>;
+  };
+  defaultComponent: D;
 }
 
+export type StepProps<
+  D extends React.ElementType = StepTypeMap['defaultComponent'],
+  P = { component?: React.ElementType },
+> = OverrideProps<StepTypeMap<P, D>, D>;
+
 export type StepClasskey = keyof NonNullable<StepProps['classes']>;
 
 /**
  *
  * Demos:
  *
- * - [Steppers](https://mui.com/material-ui/react-stepper/)
+ * - [Stepper](https://mui.com/material-ui/react-stepper/)
  *
  * API:
  *
  * - [Step API](https://mui.com/material-ui/api/step/)
  */
-export default function Step(props: StepProps): JSX.Element;
+declare const Step: OverridableComponent<StepTypeMap>;
+
+export default Step;

package/Step/Step.js

@@ -33,7 +33,7 @@ var _stepClasses = require("./stepClasses");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["active", "children", "className", "completed", "disabled", "expanded", "index", "last"];
+const _excluded = ["active", "children", "className", "component", "completed", "disabled", "expanded", "index", "last"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -79,6 +79,7 @@ const Step = /*#__PURE__*/React.forwardRef(function Step(inProps, ref) {
     active: activeProp,
     children,
     className,
+    component = 'div',
     completed: completedProp,
     disabled: disabledProp,
     expanded = false,
@@ -118,10 +119,12 @@ const Step = /*#__PURE__*/React.forwardRef(function Step(inProps, ref) {
     alternativeLabel,
     completed,
     disabled,
-    expanded
+    expanded,
+    component
   });
   const classes = useUtilityClasses(ownerState);
   const newChildren = /*#__PURE__*/(0, _jsxRuntime.jsxs)(StepRoot, (0, _extends2.default)({
+    as: component,
     className: (0, _clsx.default)(classes.root, className),
     ref: ref,
     ownerState: ownerState
@@ -168,6 +171,12 @@ process.env.NODE_ENV !== "production" ? Step.propTypes
    */
   completed: _propTypes.default.bool,
 
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: _propTypes.default.elementType,
+
   /**
    * If `true`, the step is disabled, will also disable the button if
    * `StepButton` is a child of `Step`. Is passed to child components.

package/Step/StepContext.d.ts

@@ -1,20 +1,20 @@
-import * as React from 'react';
-export interface StepContextType {
-    index: number;
-    last: boolean;
-    expanded: boolean;
-    icon: React.ReactNode;
-    active: boolean;
-    completed: boolean;
-    disabled: boolean;
-}
-/**
- * Provides information about the current step in Stepper.
- */
-declare const StepContext: React.Context<{} | StepContextType>;
-/**
- * Returns the current StepContext or an empty object if no StepContext
- * has been defined in the component tree.
- */
-export declare function useStepContext(): StepContextType | {};
-export default StepContext;
+import * as React from 'react';
+export interface StepContextType {
+    index: number;
+    last: boolean;
+    expanded: boolean;
+    icon: React.ReactNode;
+    active: boolean;
+    completed: boolean;
+    disabled: boolean;
+}
+/**
+ * Provides information about the current step in Stepper.
+ */
+declare const StepContext: React.Context<{} | StepContextType>;
+/**
+ * Returns the current StepContext or an empty object if no StepContext
+ * has been defined in the component tree.
+ */
+export declare function useStepContext(): StepContextType | {};
+export default StepContext;

package/Step/stepClasses.d.ts

@@ -1,16 +1,16 @@
-export interface StepClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `orientation="horizontal"`. */
-    horizontal: string;
-    /** Styles applied to the root element if `orientation="vertical"`. */
-    vertical: string;
-    /** Styles applied to the root element if `alternativeLabel={true}`. */
-    alternativeLabel: string;
-    /** State class applied to the root element if `completed={true}`. */
-    completed: string;
-}
-export declare type StepClassKey = keyof StepClasses;
-export declare function getStepUtilityClass(slot: string): string;
-declare const stepClasses: StepClasses;
-export default stepClasses;
+export interface StepClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `orientation="horizontal"`. */
+    horizontal: string;
+    /** Styles applied to the root element if `orientation="vertical"`. */
+    vertical: string;
+    /** Styles applied to the root element if `alternativeLabel={true}`. */
+    alternativeLabel: string;
+    /** State class applied to the root element if `completed={true}`. */
+    completed: string;
+}
+export declare type StepClassKey = keyof StepClasses;
+export declare function getStepUtilityClass(slot: string): string;
+declare const stepClasses: StepClasses;
+export default stepClasses;

package/StepButton/StepButton.d.ts

@@ -42,7 +42,7 @@ export type StepButtonTypeMap<P, D extends React.ElementType> = ExtendButtonBase
  *
  * Demos:
  *
- * - [Steppers](https://mui.com/material-ui/react-stepper/)
+ * - [Stepper](https://mui.com/material-ui/react-stepper/)
  *
  * API:
  *

package/StepButton/stepButtonClasses.d.ts

@@ -1,14 +1,14 @@
-export interface StepButtonClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `orientation="horizontal"`. */
-    horizontal: string;
-    /** Styles applied to the root element if `orientation="vertical"`. */
-    vertical: string;
-    /** Styles applied to the `ButtonBase` touch-ripple. */
-    touchRipple: string;
-}
-export declare type StepButtonClassKey = keyof StepButtonClasses;
-export declare function getStepButtonUtilityClass(slot: string): string;
-declare const stepButtonClasses: StepButtonClasses;
-export default stepButtonClasses;
+export interface StepButtonClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `orientation="horizontal"`. */
+    horizontal: string;
+    /** Styles applied to the root element if `orientation="vertical"`. */
+    vertical: string;
+    /** Styles applied to the `ButtonBase` touch-ripple. */
+    touchRipple: string;
+}
+export declare type StepButtonClassKey = keyof StepButtonClasses;
+export declare function getStepButtonUtilityClass(slot: string): string;
+declare const stepButtonClasses: StepButtonClasses;
+export default stepButtonClasses;

package/StepConnector/StepConnector.d.ts

@@ -24,7 +24,7 @@ export type StepConnectorClasskey = keyof NonNullable<StepConnectorProps['classe
  *
  * Demos:
  *
- * - [Steppers](https://mui.com/material-ui/react-stepper/)
+ * - [Stepper](https://mui.com/material-ui/react-stepper/)
  *
  * API:
  *

package/StepConnector/stepConnectorClasses.d.ts

@@ -1,26 +1,26 @@
-export interface StepConnectorClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `orientation="horizontal"`. */
-    horizontal: string;
-    /** Styles applied to the root element if `orientation="vertical"`. */
-    vertical: string;
-    /** Styles applied to the root element if `alternativeLabel={true}`. */
-    alternativeLabel: string;
-    /** State class applied to the root element if `active={true}`. */
-    active: string;
-    /** State class applied to the root element if `completed={true}`. */
-    completed: string;
-    /** State class applied to the root element if `disabled={true}`. */
-    disabled: string;
-    /** Styles applied to the line element. */
-    line: string;
-    /** Styles applied to the root element if `orientation="horizontal"`. */
-    lineHorizontal: string;
-    /** Styles applied to the root element if `orientation="vertical"`. */
-    lineVertical: string;
-}
-export declare type StepConnectorClassKey = keyof StepConnectorClasses;
-export declare function getStepConnectorUtilityClass(slot: string): string;
-declare const stepConnectorClasses: StepConnectorClasses;
-export default stepConnectorClasses;
+export interface StepConnectorClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `orientation="horizontal"`. */
+    horizontal: string;
+    /** Styles applied to the root element if `orientation="vertical"`. */
+    vertical: string;
+    /** Styles applied to the root element if `alternativeLabel={true}`. */
+    alternativeLabel: string;
+    /** State class applied to the root element if `active={true}`. */
+    active: string;
+    /** State class applied to the root element if `completed={true}`. */
+    completed: string;
+    /** State class applied to the root element if `disabled={true}`. */
+    disabled: string;
+    /** Styles applied to the line element. */
+    line: string;
+    /** Styles applied to the root element if `orientation="horizontal"`. */
+    lineHorizontal: string;
+    /** Styles applied to the root element if `orientation="vertical"`. */
+    lineVertical: string;
+}
+export declare type StepConnectorClassKey = keyof StepConnectorClasses;
+export declare function getStepConnectorUtilityClass(slot: string): string;
+declare const stepConnectorClasses: StepConnectorClasses;
+export default stepConnectorClasses;

package/StepContent/StepContent.d.ts

@@ -47,7 +47,7 @@ export type StepContentClasskey = keyof NonNullable<StepContentProps['classes']>
  *
  * Demos:
  *
- * - [Steppers](https://mui.com/material-ui/react-stepper/)
+ * - [Stepper](https://mui.com/material-ui/react-stepper/)
  *
  * API:
  *

package/StepContent/stepContentClasses.d.ts

@@ -1,12 +1,12 @@
-export interface StepContentClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `last={true}` (controlled by `Step`). */
-    last: string;
-    /** Styles applied to the Transition component. */
-    transition: string;
-}
-export declare type StepContentClassKey = keyof StepContentClasses;
-export declare function getStepContentUtilityClass(slot: string): string;
-declare const stepContentClasses: StepContentClasses;
-export default stepContentClasses;
+export interface StepContentClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `last={true}` (controlled by `Step`). */
+    last: string;
+    /** Styles applied to the Transition component. */
+    transition: string;
+}
+export declare type StepContentClassKey = keyof StepContentClasses;
+export declare function getStepContentUtilityClass(slot: string): string;
+declare const stepContentClasses: StepContentClasses;
+export default stepContentClasses;

package/StepIcon/StepIcon.d.ts

@@ -41,7 +41,7 @@ export type StepIconClasskey = keyof NonNullable<StepIconProps['classes']>;
  *
  * Demos:
  *
- * - [Steppers](https://mui.com/material-ui/react-stepper/)
+ * - [Stepper](https://mui.com/material-ui/react-stepper/)
  *
  * API:
  *

package/StepIcon/stepIconClasses.d.ts

@@ -1,16 +1,16 @@
-export interface StepIconClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the SVG text element. */
-    text: string;
-    /** State class applied to the root element if `active={true}`. */
-    active: string;
-    /** State class applied to the root element if `completed={true}`. */
-    completed: string;
-    /** State class applied to the root element if `error={true}`. */
-    error: string;
-}
-export declare type StepIconClassKey = keyof StepIconClasses;
-export declare function getStepIconUtilityClass(slot: string): string;
-declare const stepIconClasses: StepIconClasses;
-export default stepIconClasses;
+export interface StepIconClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the SVG text element. */
+    text: string;
+    /** State class applied to the root element if `active={true}`. */
+    active: string;
+    /** State class applied to the root element if `completed={true}`. */
+    completed: string;
+    /** State class applied to the root element if `error={true}`. */
+    error: string;
+}
+export declare type StepIconClassKey = keyof StepIconClasses;
+export declare function getStepIconUtilityClass(slot: string): string;
+declare const stepIconClasses: StepIconClasses;
+export default stepIconClasses;

package/StepLabel/StepLabel.d.ts

@@ -58,7 +58,7 @@ export type StepLabelClasskey = keyof NonNullable<StepLabelProps['classes']>;
  *
  * Demos:
  *
- * - [Steppers](https://mui.com/material-ui/react-stepper/)
+ * - [Stepper](https://mui.com/material-ui/react-stepper/)
  *
  * API:
  *

package/StepLabel/stepLabelClasses.d.ts

@@ -1,28 +1,28 @@
-export interface StepLabelClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `orientation="horizontal"`. */
-    horizontal: string;
-    /** Styles applied to the root element if `orientation="vertical"`. */
-    vertical: string;
-    /** Styles applied to the label element that wraps `children`. */
-    label: string;
-    /** State class applied to the label element if `active={true}`. */
-    active: string;
-    /** State class applied to the label element if `completed={true}`. */
-    completed: string;
-    /** State class applied to the root and label elements if `error={true}`. */
-    error: string;
-    /** State class applied to the root and label elements if `disabled={true}`. */
-    disabled: string;
-    /** Styles applied to the `icon` container element. */
-    iconContainer: string;
-    /** State class applied to the root and icon container and label if `alternativeLabel={true}`. */
-    alternativeLabel: string;
-    /** Styles applied to the container element which wraps label and `optional`. */
-    labelContainer: string;
-}
-export declare type StepLabelClassKey = keyof StepLabelClasses;
-export declare function getStepLabelUtilityClass(slot: string): string;
-declare const stepLabelClasses: StepLabelClasses;
-export default stepLabelClasses;
+export interface StepLabelClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `orientation="horizontal"`. */
+    horizontal: string;
+    /** Styles applied to the root element if `orientation="vertical"`. */
+    vertical: string;
+    /** Styles applied to the label element that wraps `children`. */
+    label: string;
+    /** State class applied to the label element if `active={true}`. */
+    active: string;
+    /** State class applied to the label element if `completed={true}`. */
+    completed: string;
+    /** State class applied to the root and label elements if `error={true}`. */
+    error: string;
+    /** State class applied to the root and label elements if `disabled={true}`. */
+    disabled: string;
+    /** Styles applied to the `icon` container element. */
+    iconContainer: string;
+    /** State class applied to the root and icon container and label if `alternativeLabel={true}`. */
+    alternativeLabel: string;
+    /** Styles applied to the container element which wraps label and `optional`. */
+    labelContainer: string;
+}
+export declare type StepLabelClassKey = keyof StepLabelClasses;
+export declare function getStepLabelUtilityClass(slot: string): string;
+declare const stepLabelClasses: StepLabelClasses;
+export default stepLabelClasses;

package/Stepper/Stepper.d.ts

@@ -1,64 +1,75 @@
 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>;
-  /**
-   * 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']>;
 
 /**
  *
  * Demos:
  *
- * - [Steppers](https://mui.com/material-ui/react-stepper/)
+ * - [Stepper](https://mui.com/material-ui/react-stepper/)
  *
  * API:
  *
  * - [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;