@mui/material 7.3.8 → 9.0.0-alpha.1

package/StepButton/StepButton.d.mts

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { ButtonBaseTypeMap, ExtendButtonBase, ExtendButtonBaseTypeMap } from "../ButtonBase/index.mjs";
+import { OverrideProps } from "../OverridableComponent/index.mjs";
+import { Theme } from "../styles/index.mjs";
+import { StepButtonClasses } from "./stepButtonClasses.mjs";
+export interface StepButtonOwnProps {
+  /**
+   * Can be a `StepLabel` or a node to place inside `StepLabel` as children.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<StepButtonClasses> | undefined;
+  /**
+   * The icon displayed by the step label.
+   */
+  icon?: React.ReactNode;
+  /**
+   * The optional node to display.
+   */
+  optional?: React.ReactNode;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme> | undefined;
+}
+export type StepButtonTypeMap<AdditionalProps, RootComponent extends React.ElementType> = ExtendButtonBaseTypeMap<{
+  props: AdditionalProps & StepButtonOwnProps;
+  defaultComponent: RootComponent;
+  ignoredProps: 'disabled';
+}>;
+
+/**
+ *
+ * Demos:
+ *
+ * - [Stepper](https://next.mui.com/material-ui/react-stepper/)
+ *
+ * API:
+ *
+ * - [StepButton API](https://next.mui.com/material-ui/api/step-button/)
+ * - inherits [ButtonBase API](https://next.mui.com/material-ui/api/button-base/)
+ */
+declare const StepButton: ExtendButtonBase<StepButtonTypeMap<{}, ButtonBaseTypeMap['defaultComponent']>>;
+export type StepButtonClasskey = keyof NonNullable<StepButtonProps['classes']>;
+export type StepButtonProps<RootComponent extends React.ElementType = ButtonBaseTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<StepButtonTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType | undefined;
+};
+export default StepButton;

package/StepButton/StepButton.d.ts

@@ -12,7 +12,7 @@ export interface StepButtonOwnProps {
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: Partial<StepButtonClasses>;
+  classes?: Partial<StepButtonClasses> | undefined;
   /**
    * The icon displayed by the step label.
    */
@@ -24,7 +24,7 @@ export interface StepButtonOwnProps {
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx?: SxProps<Theme>;
+  sx?: SxProps<Theme> | undefined;
 }
 export type StepButtonTypeMap<AdditionalProps, RootComponent extends React.ElementType> = ExtendButtonBaseTypeMap<{
   props: AdditionalProps & StepButtonOwnProps;
@@ -36,16 +36,16 @@ export type StepButtonTypeMap<AdditionalProps, RootComponent extends React.Eleme
  *
  * Demos:
  *
- * - [Stepper](https://mui.com/material-ui/react-stepper/)
+ * - [Stepper](https://next.mui.com/material-ui/react-stepper/)
  *
  * API:
  *
- * - [StepButton API](https://mui.com/material-ui/api/step-button/)
- * - inherits [ButtonBase API](https://mui.com/material-ui/api/button-base/)
+ * - [StepButton API](https://next.mui.com/material-ui/api/step-button/)
+ * - inherits [ButtonBase API](https://next.mui.com/material-ui/api/button-base/)
  */
 declare const StepButton: ExtendButtonBase<StepButtonTypeMap<{}, ButtonBaseTypeMap['defaultComponent']>>;
 export type StepButtonClasskey = keyof NonNullable<StepButtonProps['classes']>;
 export type StepButtonProps<RootComponent extends React.ElementType = ButtonBaseTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<StepButtonTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
-  component?: React.ElementType;
+  component?: React.ElementType | undefined;
 };
 export default StepButton;

package/StepButton/StepButton.mjs

@@ -0,0 +1,133 @@
+'use client';
+
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import composeClasses from '@mui/utils/composeClasses';
+import { styled } from "../zero-styled/index.mjs";
+import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
+import ButtonBase from "../ButtonBase/index.mjs";
+import StepLabel from "../StepLabel/index.mjs";
+import isMuiElement from "../utils/isMuiElement.mjs";
+import StepperContext from "../Stepper/StepperContext.mjs";
+import StepContext from "../Step/StepContext.mjs";
+import stepButtonClasses, { getStepButtonUtilityClass } from "./stepButtonClasses.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    orientation
+  } = ownerState;
+  const slots = {
+    root: ['root', orientation],
+    touchRipple: ['touchRipple']
+  };
+  return composeClasses(slots, getStepButtonUtilityClass, classes);
+};
+const StepButtonRoot = styled(ButtonBase, {
+  name: 'MuiStepButton',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [{
+      [`& .${stepButtonClasses.touchRipple}`]: styles.touchRipple
+    }, styles.root, styles[ownerState.orientation]];
+  }
+})({
+  width: '100%',
+  padding: '24px 16px',
+  margin: '-24px -16px',
+  boxSizing: 'content-box',
+  [`& .${stepButtonClasses.touchRipple}`]: {
+    color: 'rgba(0, 0, 0, 0.3)'
+  },
+  variants: [{
+    props: {
+      orientation: 'vertical'
+    },
+    style: {
+      justifyContent: 'flex-start',
+      padding: '8px',
+      margin: '-8px'
+    }
+  }]
+});
+const StepButton = /*#__PURE__*/React.forwardRef(function StepButton(inProps, ref) {
+  const props = useDefaultProps({
+    props: inProps,
+    name: 'MuiStepButton'
+  });
+  const {
+    children,
+    className,
+    icon,
+    optional,
+    ...other
+  } = props;
+  const {
+    disabled,
+    active
+  } = React.useContext(StepContext);
+  const {
+    orientation
+  } = React.useContext(StepperContext);
+  const ownerState = {
+    ...props,
+    orientation
+  };
+  const classes = useUtilityClasses(ownerState);
+  const childProps = {
+    icon,
+    optional
+  };
+  const child = isMuiElement(children, ['StepLabel']) ? (/*#__PURE__*/React.cloneElement(children, childProps)) : /*#__PURE__*/_jsx(StepLabel, {
+    ...childProps,
+    children: children
+  });
+  return /*#__PURE__*/_jsx(StepButtonRoot, {
+    focusRipple: true,
+    disabled: disabled,
+    TouchRippleProps: {
+      className: classes.touchRipple
+    },
+    className: clsx(classes.root, className),
+    ref: ref,
+    ownerState: ownerState,
+    "aria-current": active ? 'step' : undefined,
+    ...other,
+    children: child
+  });
+});
+process.env.NODE_ENV !== "production" ? StepButton.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * Can be a `StepLabel` or a node to place inside `StepLabel` as children.
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The icon displayed by the step label.
+   */
+  icon: PropTypes.node,
+  /**
+   * The optional node to display.
+   */
+  optional: PropTypes.node,
+  /**
+   * 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])
+} : void 0;
+export default StepButton;

package/StepButton/index.d.mts

@@ -0,0 +1,4 @@
+export { default } from "./StepButton.mjs";
+export * from "./StepButton.mjs";
+export { default as stepButtonClasses } from "./stepButtonClasses.mjs";
+export * from "./stepButtonClasses.mjs";

package/StepButton/index.mjs

@@ -0,0 +1,3 @@
+export { default } from "./StepButton.mjs";
+export { default as stepButtonClasses } from "./stepButtonClasses.mjs";
+export * from "./stepButtonClasses.mjs";

package/StepConnector/StepConnector.d.mts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { Theme } from "../styles/index.mjs";
+import { InternalStandardProps as StandardProps } from "../internal/index.mjs";
+import { StepConnectorClasses } from "./stepConnectorClasses.mjs";
+export type StepConnectorIcon = React.ReactElement<unknown> | string | number;
+export interface StepConnectorProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<StepConnectorClasses> | undefined;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme> | undefined;
+}
+export type StepConnectorClasskey = keyof NonNullable<StepConnectorProps['classes']>;
+
+/**
+ *
+ * Demos:
+ *
+ * - [Stepper](https://next.mui.com/material-ui/react-stepper/)
+ *
+ * API:
+ *
+ * - [StepConnector API](https://next.mui.com/material-ui/api/step-connector/)
+ */
+export default function StepConnector(props: StepConnectorProps): React.JSX.Element;

package/StepConnector/StepConnector.d.ts

@@ -8,11 +8,11 @@ export interface StepConnectorProps extends StandardProps<React.HTMLAttributes<H
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: Partial<StepConnectorClasses>;
+  classes?: Partial<StepConnectorClasses> | undefined;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx?: SxProps<Theme>;
+  sx?: SxProps<Theme> | undefined;
 }
 export type StepConnectorClasskey = keyof NonNullable<StepConnectorProps['classes']>;
 
@@ -20,10 +20,10 @@ export type StepConnectorClasskey = keyof NonNullable<StepConnectorProps['classe
  *
  * Demos:
  *
- * - [Stepper](https://mui.com/material-ui/react-stepper/)
+ * - [Stepper](https://next.mui.com/material-ui/react-stepper/)
  *
  * API:
  *
- * - [StepConnector API](https://mui.com/material-ui/api/step-connector/)
+ * - [StepConnector API](https://next.mui.com/material-ui/api/step-connector/)
  */
 export default function StepConnector(props: StepConnectorProps): React.JSX.Element;

package/StepConnector/StepConnector.mjs

@@ -0,0 +1,152 @@
+'use client';
+
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import composeClasses from '@mui/utils/composeClasses';
+import capitalize from "../utils/capitalize.mjs";
+import { styled } from "../zero-styled/index.mjs";
+import memoTheme from "../utils/memoTheme.mjs";
+import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
+import StepperContext from "../Stepper/StepperContext.mjs";
+import StepContext from "../Step/StepContext.mjs";
+import { getStepConnectorUtilityClass } from "./stepConnectorClasses.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    orientation,
+    alternativeLabel,
+    active,
+    completed,
+    disabled
+  } = ownerState;
+  const slots = {
+    root: ['root', orientation, alternativeLabel && 'alternativeLabel', active && 'active', completed && 'completed', disabled && 'disabled'],
+    line: ['line', `line${capitalize(orientation)}`]
+  };
+  return composeClasses(slots, getStepConnectorUtilityClass, classes);
+};
+const StepConnectorRoot = styled('div', {
+  name: 'MuiStepConnector',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.root, styles[ownerState.orientation], ownerState.alternativeLabel && styles.alternativeLabel, ownerState.completed && styles.completed];
+  }
+})({
+  flex: '1 1 auto',
+  variants: [{
+    props: {
+      orientation: 'vertical'
+    },
+    style: {
+      marginLeft: 12 // half icon
+    }
+  }, {
+    props: {
+      alternativeLabel: true
+    },
+    style: {
+      position: 'absolute',
+      top: 8 + 4,
+      left: 'calc(-50% + 20px)',
+      right: 'calc(50% + 20px)'
+    }
+  }]
+});
+const StepConnectorLine = styled('span', {
+  name: 'MuiStepConnector',
+  slot: 'Line',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.line, styles[`line${capitalize(ownerState.orientation)}`]];
+  }
+})(memoTheme(({
+  theme
+}) => {
+  const borderColor = theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600];
+  return {
+    display: 'block',
+    borderColor: theme.vars ? theme.vars.palette.StepConnector.border : borderColor,
+    variants: [{
+      props: {
+        orientation: 'horizontal'
+      },
+      style: {
+        borderTopStyle: 'solid',
+        borderTopWidth: 1
+      }
+    }, {
+      props: {
+        orientation: 'vertical'
+      },
+      style: {
+        borderLeftStyle: 'solid',
+        borderLeftWidth: 1,
+        minHeight: 24
+      }
+    }]
+  };
+}));
+const StepConnector = /*#__PURE__*/React.forwardRef(function StepConnector(inProps, ref) {
+  const props = useDefaultProps({
+    props: inProps,
+    name: 'MuiStepConnector'
+  });
+  const {
+    className,
+    ...other
+  } = props;
+  const {
+    alternativeLabel,
+    orientation = 'horizontal'
+  } = React.useContext(StepperContext);
+  const {
+    active,
+    disabled,
+    completed
+  } = React.useContext(StepContext);
+  const ownerState = {
+    ...props,
+    alternativeLabel,
+    orientation,
+    active,
+    completed,
+    disabled
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/_jsx(StepConnectorRoot, {
+    className: clsx(classes.root, className),
+    ref: ref,
+    ownerState: ownerState,
+    ...other,
+    children: /*#__PURE__*/_jsx(StepConnectorLine, {
+      className: classes.line,
+      ownerState: ownerState
+    })
+  });
+});
+process.env.NODE_ENV !== "production" ? StepConnector.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * 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])
+} : void 0;
+export default StepConnector;

package/StepConnector/index.d.mts

@@ -0,0 +1,4 @@
+export { default } from "./StepConnector.mjs";
+export * from "./StepConnector.mjs";
+export { default as stepConnectorClasses } from "./stepConnectorClasses.mjs";
+export * from "./stepConnectorClasses.mjs";

package/StepConnector/index.mjs

@@ -0,0 +1,3 @@
+export { default } from "./StepConnector.mjs";
+export { default as stepConnectorClasses } from "./stepConnectorClasses.mjs";
+export * from "./stepConnectorClasses.mjs";

package/StepContent/StepContent.d.mts

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { Theme } from "../styles/index.mjs";
+import { InternalStandardProps as StandardProps } from "../internal/index.mjs";
+import { CollapseProps } from "../Collapse/index.mjs";
+import { TransitionProps } from "../transitions/transition.mjs";
+import { StepContentClasses } from "./stepContentClasses.mjs";
+import { CreateSlotsAndSlotProps, SlotComponentProps } from "../utils/types.mjs";
+export interface StepContentSlots {
+  /**
+   * The component that renders the transition slot.
+   * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+   * @default Collapse
+   */
+  transition?: React.JSXElementConstructor<TransitionProps & {
+    children?: React.ReactElement<unknown, any> | undefined;
+  }> | undefined;
+}
+export type StepContentSlotsAndSlotProps = CreateSlotsAndSlotProps<StepContentSlots, {
+  /**
+   * Props forwarded to the transition slot.
+   * By default, the available props are based on the [Collapse](https://mui.com/material-ui/api/collapse/#props) component
+   */
+  transition: SlotComponentProps<React.ElementType, CollapseProps, StepContentOwnerState>;
+}>;
+export interface StepContentOwnerState extends StepContentProps {}
+export interface StepContentProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>>, StepContentSlotsAndSlotProps {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<StepContentClasses> | undefined;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme> | undefined;
+  /**
+   * The component used for the transition.
+   * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+   * @default Collapse
+   * @deprecated Use `slots.transition` instead. This prop will be removed in a future major release. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   */
+  TransitionComponent?: React.JSXElementConstructor<TransitionProps & {
+    children: React.ReactElement<unknown, any>;
+  }> | undefined;
+  /**
+   * Adjust the duration of the content expand transition.
+   * Passed as a prop to the transition component.
+   *
+   * Set to 'auto' to automatically calculate transition time based on height.
+   * @default 'auto'
+   */
+  transitionDuration?: TransitionProps['timeout'] | 'auto' | undefined;
+  /**
+   * Props applied to the transition element.
+   * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
+   * @deprecated Use `slotProps.transition` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  TransitionProps?: TransitionProps | undefined;
+}
+export type StepContentClasskey = keyof NonNullable<StepContentProps['classes']>;
+
+/**
+ *
+ * Demos:
+ *
+ * - [Stepper](https://next.mui.com/material-ui/react-stepper/)
+ *
+ * API:
+ *
+ * - [StepContent API](https://next.mui.com/material-ui/api/step-content/)
+ */
+export default function StepContent(props: StepContentProps): React.JSX.Element;

package/StepContent/StepContent.d.ts

@@ -13,8 +13,8 @@ export interface StepContentSlots {
    * @default Collapse
    */
   transition?: React.JSXElementConstructor<TransitionProps & {
-    children?: React.ReactElement<unknown, any>;
-  }>;
+    children?: React.ReactElement<unknown, any> | undefined;
+  }> | undefined;
 }
 export type StepContentSlotsAndSlotProps = CreateSlotsAndSlotProps<StepContentSlots, {
   /**
@@ -32,11 +32,11 @@ export interface StepContentProps extends StandardProps<React.HTMLAttributes<HTM
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: Partial<StepContentClasses>;
+  classes?: Partial<StepContentClasses> | undefined;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx?: SxProps<Theme>;
+  sx?: SxProps<Theme> | undefined;
   /**
    * The component used for the transition.
    * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
@@ -45,7 +45,7 @@ export interface StepContentProps extends StandardProps<React.HTMLAttributes<HTM
    */
   TransitionComponent?: React.JSXElementConstructor<TransitionProps & {
     children: React.ReactElement<unknown, any>;
-  }>;
+  }> | undefined;
   /**
    * Adjust the duration of the content expand transition.
    * Passed as a prop to the transition component.
@@ -53,13 +53,13 @@ export interface StepContentProps extends StandardProps<React.HTMLAttributes<HTM
    * Set to 'auto' to automatically calculate transition time based on height.
    * @default 'auto'
    */
-  transitionDuration?: TransitionProps['timeout'] | 'auto';
+  transitionDuration?: TransitionProps['timeout'] | 'auto' | undefined;
   /**
    * Props applied to the transition element.
    * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
    * @deprecated Use `slotProps.transition` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
-  TransitionProps?: TransitionProps;
+  TransitionProps?: TransitionProps | undefined;
 }
 export type StepContentClasskey = keyof NonNullable<StepContentProps['classes']>;
 
@@ -67,10 +67,10 @@ export type StepContentClasskey = keyof NonNullable<StepContentProps['classes']>
  *
  * Demos:
  *
- * - [Stepper](https://mui.com/material-ui/react-stepper/)
+ * - [Stepper](https://next.mui.com/material-ui/react-stepper/)
  *
  * API:
  *
- * - [StepContent API](https://mui.com/material-ui/api/step-content/)
+ * - [StepContent API](https://next.mui.com/material-ui/api/step-content/)
  */
 export default function StepContent(props: StepContentProps): React.JSX.Element;