@mui/material 5.10.12 → 5.10.14

package/modern/StepContent/StepContent.js

@@ -12,7 +12,6 @@ import StepperContext from '../Stepper/StepperContext';
 import StepContext from '../Step/StepContext';
 import { getStepContentUtilityClass } from './stepContentClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -24,7 +23,6 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getStepContentUtilityClass, classes);
 };
-
 const StepContentRoot = styled('div', {
   name: 'MuiStepContent',
   slot: 'Root',
@@ -57,16 +55,14 @@ const StepContent = /*#__PURE__*/React.forwardRef(function StepContent(inProps,
     props: inProps,
     name: 'MuiStepContent'
   });
-
   const {
-    children,
-    className,
-    TransitionComponent = Collapse,
-    transitionDuration: transitionDurationProp = 'auto',
-    TransitionProps
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
+      children,
+      className,
+      TransitionComponent = Collapse,
+      transitionDuration: transitionDurationProp = 'auto',
+      TransitionProps
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
     orientation
   } = React.useContext(StepperContext);
@@ -75,25 +71,19 @@ const StepContent = /*#__PURE__*/React.forwardRef(function StepContent(inProps,
     last,
     expanded
   } = React.useContext(StepContext);
-
   const ownerState = _extends({}, props, {
     last
   });
-
   const classes = useUtilityClasses(ownerState);
-
   if (process.env.NODE_ENV !== 'production') {
     if (orientation !== 'vertical') {
       console.error('MUI: <StepContent /> is only designed for use with the vertical stepper.');
     }
   }
-
   let transitionDuration = transitionDurationProp;
-
   if (transitionDurationProp === 'auto' && !TransitionComponent.muiSupportAuto) {
     transitionDuration = undefined;
   }
-
   return /*#__PURE__*/_jsx(StepContentRoot, _extends({
     className: clsx(classes.root, className),
     ref: ref,
@@ -111,41 +101,33 @@ const StepContent = /*#__PURE__*/React.forwardRef(function StepContent(inProps,
     }))
   }));
 });
-process.env.NODE_ENV !== "production" ? StepContent.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? StepContent.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
   // ----------------------------------------------------------------------
-
   /**
    * The content of the component.
    */
   children: PropTypes.node,
-
   /**
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
-
   /**
    * @ignore
    */
   className: PropTypes.string,
-
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-
   /**
    * The component used for the transition.
    * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
    * @default Collapse
    */
   TransitionComponent: PropTypes.elementType,
-
   /**
    * Adjust the duration of the content expand transition.
    * Passed as a prop to the transition component.
@@ -158,7 +140,6 @@ process.env.NODE_ENV !== "production" ? StepContent.propTypes
     enter: PropTypes.number,
     exit: PropTypes.number
   })]),
-
   /**
    * Props applied to the transition element.
    * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.

package/modern/StepIcon/StepIcon.js

@@ -1,8 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-
 var _circle;
-
 const _excluded = ["active", "className", "completed", "error", "icon"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -16,7 +14,6 @@ import SvgIcon from '../SvgIcon';
 import stepIconClasses, { getStepIconUtilityClass } from './stepIconClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -30,7 +27,6 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getStepIconUtilityClass, classes);
 };
-
 const StepIconRoot = styled(SvgIcon, {
   name: 'MuiStepIcon',
   slot: 'Root',
@@ -69,27 +65,22 @@ const StepIcon = /*#__PURE__*/React.forwardRef(function StepIcon(inProps, ref) {
     props: inProps,
     name: 'MuiStepIcon'
   });
-
   const {
-    active = false,
-    className: classNameProp,
-    completed = false,
-    error = false,
-    icon
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
+      active = false,
+      className: classNameProp,
+      completed = false,
+      error = false,
+      icon
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = _extends({}, props, {
     active,
     completed,
     error
   });
-
   const classes = useUtilityClasses(ownerState);
-
   if (typeof icon === 'number' || typeof icon === 'string') {
     const className = clsx(classNameProp, classes.root);
-
     if (error) {
       return /*#__PURE__*/_jsx(StepIconRoot, _extends({
         as: Warning,
@@ -98,7 +89,6 @@ const StepIcon = /*#__PURE__*/React.forwardRef(function StepIcon(inProps, ref) {
         ownerState: ownerState
       }, other));
     }
-
     if (completed) {
       return /*#__PURE__*/_jsx(StepIconRoot, _extends({
         as: CheckCircle,
@@ -107,7 +97,6 @@ const StepIcon = /*#__PURE__*/React.forwardRef(function StepIcon(inProps, ref) {
         ownerState: ownerState
       }, other));
     }
-
     return /*#__PURE__*/_jsxs(StepIconRoot, _extends({
       className: className,
       ref: ref,
@@ -128,50 +117,40 @@ const StepIcon = /*#__PURE__*/React.forwardRef(function StepIcon(inProps, ref) {
       })]
     }));
   }
-
   return icon;
 });
-process.env.NODE_ENV !== "production" ? StepIcon.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? StepIcon.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
   // ----------------------------------------------------------------------
-
   /**
    * Whether this step is active.
    * @default false
    */
   active: PropTypes.bool,
-
   /**
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
-
   /**
    * @ignore
    */
   className: PropTypes.string,
-
   /**
    * Mark the step as completed. Is passed to child components.
    * @default false
    */
   completed: PropTypes.bool,
-
   /**
    * If `true`, the step is marked as failed.
    * @default false
    */
   error: PropTypes.bool,
-
   /**
    * The label displayed in the step icon.
    */
   icon: PropTypes.node,
-
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/modern/StepLabel/StepLabel.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children", "className", "componentsProps", "error", "icon", "optional", "StepIconComponent", "StepIconProps"];
+const _excluded = ["children", "className", "componentsProps", "error", "icon", "optional", "slotProps", "StepIconComponent", "StepIconProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -13,7 +13,6 @@ import StepContext from '../Step/StepContext';
 import stepLabelClasses, { getStepLabelUtilityClass } from './stepLabelClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -32,7 +31,6 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getStepLabelUtilityClass, classes);
 };
-
 const StepLabelRoot = styled('span', {
   name: 'MuiStepLabel',
   slot: 'Root',
@@ -114,19 +112,18 @@ const StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref)
     props: inProps,
     name: 'MuiStepLabel'
   });
-
   const {
-    children,
-    className,
-    componentsProps = {},
-    error = false,
-    icon: iconProp,
-    optional,
-    StepIconComponent: StepIconComponentProp,
-    StepIconProps
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
+      children,
+      className,
+      componentsProps = {},
+      error = false,
+      icon: iconProp,
+      optional,
+      slotProps = {},
+      StepIconComponent: StepIconComponentProp,
+      StepIconProps
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
     alternativeLabel,
     orientation
@@ -139,11 +136,9 @@ const StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref)
   } = React.useContext(StepContext);
   const icon = iconProp || iconContext;
   let StepIconComponent = StepIconComponentProp;
-
   if (icon && !StepIconComponent) {
     StepIconComponent = StepIcon;
   }
-
   const ownerState = _extends({}, props, {
     active,
     alternativeLabel,
@@ -152,8 +147,8 @@ const StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref)
     error,
     orientation
   });
-
   const classes = useUtilityClasses(ownerState);
+  const labelSlotProps = slotProps.label ?? componentsProps.label;
   return /*#__PURE__*/_jsxs(StepLabelRoot, _extends({
     className: clsx(classes.root, className),
     ref: ref,
@@ -172,37 +167,31 @@ const StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref)
       className: classes.labelContainer,
       ownerState: ownerState,
       children: [children ? /*#__PURE__*/_jsx(StepLabelLabel, _extends({
-        className: classes.label,
         ownerState: ownerState
-      }, componentsProps.label, {
+      }, labelSlotProps, {
+        className: clsx(classes.label, labelSlotProps?.className),
         children: children
       })) : null, optional]
     })]
   }));
 });
-process.env.NODE_ENV !== "production" ? StepLabel.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? StepLabel.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
   // ----------------------------------------------------------------------
-
   /**
    * In most cases will simply be a string containing a title for the label.
    */
   children: PropTypes.node,
-
   /**
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
-
   /**
    * @ignore
    */
   className: PropTypes.string,
-
   /**
    * The props used for each slot inside.
    * @default {}
@@ -210,33 +199,34 @@ process.env.NODE_ENV !== "production" ? StepLabel.propTypes
   componentsProps: PropTypes.shape({
     label: PropTypes.object
   }),
-
   /**
    * If `true`, the step is marked as failed.
    * @default false
    */
   error: PropTypes.bool,
-
   /**
    * Override the default label of the step icon.
    */
   icon: PropTypes.node,
-
   /**
    * The optional node to display.
    */
   optional: PropTypes.node,
-
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    label: PropTypes.object
+  }),
   /**
    * The component to render in place of the [`StepIcon`](/material-ui/api/step-icon/).
    */
   StepIconComponent: PropTypes.elementType,
-
   /**
    * Props applied to the [`StepIcon`](/material-ui/api/step-icon/) element.
    */
   StepIconProps: PropTypes.object,
-
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/modern/Stepper/Stepper.js

@@ -12,7 +12,6 @@ import { getStepperUtilityClass } from './stepperClasses';
 import StepConnector from '../StepConnector';
 import StepperContext from './StepperContext';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const useUtilityClasses = ownerState => {
   const {
     orientation,
@@ -24,7 +23,6 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getStepperUtilityClass, classes);
 };
-
 const StepperRoot = styled('div', {
   name: 'MuiStepper',
   slot: 'Root',
@@ -46,33 +44,28 @@ const StepperRoot = styled('div', {
 }, ownerState.alternativeLabel && {
   alignItems: 'flex-start'
 }));
-
 const defaultConnector = /*#__PURE__*/_jsx(StepConnector, {});
-
 const Stepper = /*#__PURE__*/React.forwardRef(function Stepper(inProps, ref) {
   const props = useThemeProps({
     props: inProps,
     name: 'MuiStepper'
   });
-
   const {
-    activeStep = 0,
-    alternativeLabel = false,
-    children,
-    className,
-    component = 'div',
-    connector = defaultConnector,
-    nonLinear = false,
-    orientation = 'horizontal'
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
+      activeStep = 0,
+      alternativeLabel = false,
+      children,
+      className,
+      component = 'div',
+      connector = defaultConnector,
+      nonLinear = false,
+      orientation = 'horizontal'
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = _extends({}, props, {
     alternativeLabel,
     orientation,
     component
   });
-
   const classes = useUtilityClasses(ownerState);
   const childrenArray = React.Children.toArray(children).filter(Boolean);
   const steps = childrenArray.map((step, index) => {
@@ -100,67 +93,55 @@ const Stepper = /*#__PURE__*/React.forwardRef(function Stepper(inProps, ref) {
     }))
   });
 });
-process.env.NODE_ENV !== "production" ? Stepper.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? Stepper.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
   // ----------------------------------------------------------------------
-
   /**
    * Set the active step (zero based index).
    * Set to -1 to disable all the steps.
    * @default 0
    */
   activeStep: integerPropType,
-
   /**
    * If set to 'true' and orientation is horizontal,
    * then the step label will be positioned under the icon.
    * @default false
    */
   alternativeLabel: PropTypes.bool,
-
   /**
    * Two or more `<Step />` components.
    */
   children: PropTypes.node,
-
   /**
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
-
   /**
    * @ignore
    */
   className: PropTypes.string,
-
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
   component: PropTypes.elementType,
-
   /**
    * An element to be placed between each step.
    * @default <StepConnector />
    */
   connector: PropTypes.element,
-
   /**
    * If set the `Stepper` will not assist in controlling steps for linear flow.
    * @default false
    */
   nonLinear: PropTypes.bool,
-
   /**
    * The component orientation (layout flow direction).
    * @default 'horizontal'
    */
   orientation: PropTypes.oneOf(['horizontal', 'vertical']),
-
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/modern/Stepper/StepperContext.js

@@ -1,19 +1,16 @@
 import * as React from 'react';
-
 /**
  * Provides information about the current step in Stepper.
  */
 const StepperContext = /*#__PURE__*/React.createContext({});
-
 if (process.env.NODE_ENV !== 'production') {
   StepperContext.displayName = 'StepperContext';
 }
+
 /**
  * Returns the current StepperContext or an empty object if no StepperContext
  * has been defined in the component tree.
  */
-
-
 export function useStepperContext() {
   return React.useContext(StepperContext);
 }