@mui/material 5.15.15 → 6.0.0-alpha.1

package/legacy/Backdrop/Backdrop.js

@@ -1,16 +1,18 @@
 'use client';
 
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
+import useSlot from '../utils/useSlot';
 import Fade from '../Fade';
 import { getBackdropUtilityClass } from './backdropClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+var useThemeProps = createUseThemeProps('MuiBackdrop');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
     invisible = ownerState.invisible;
@@ -26,25 +28,27 @@ var BackdropRoot = styled('div', {
     var ownerState = props.ownerState;
     return [styles.root, ownerState.invisible && styles.invisible];
   }
-})(function (_ref) {
-  var ownerState = _ref.ownerState;
-  return _extends({
-    position: 'fixed',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    right: 0,
-    bottom: 0,
-    top: 0,
-    left: 0,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    WebkitTapHighlightColor: 'transparent'
-  }, ownerState.invisible && {
-    backgroundColor: 'transparent'
-  });
+})({
+  position: 'fixed',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  right: 0,
+  bottom: 0,
+  top: 0,
+  left: 0,
+  backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  WebkitTapHighlightColor: 'transparent',
+  variants: [{
+    props: {
+      invisible: true
+    },
+    style: {
+      backgroundColor: 'transparent'
+    }
+  }]
 });
 var Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
-  var _slotProps$root, _ref2, _slots$root;
   var props = useThemeProps({
     props: inProps,
     name: 'MuiBackdrop'
@@ -53,37 +57,59 @@ var Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
     className = props.className,
     _props$component = props.component,
     component = _props$component === void 0 ? 'div' : _props$component,
+    _props$invisible = props.invisible,
+    invisible = _props$invisible === void 0 ? false : _props$invisible,
+    open = props.open,
     _props$components = props.components,
     components = _props$components === void 0 ? {} : _props$components,
     _props$componentsProp = props.componentsProps,
     componentsProps = _props$componentsProp === void 0 ? {} : _props$componentsProp,
-    _props$invisible = props.invisible,
-    invisible = _props$invisible === void 0 ? false : _props$invisible,
-    open = props.open,
     _props$slotProps = props.slotProps,
     slotProps = _props$slotProps === void 0 ? {} : _props$slotProps,
     _props$slots = props.slots,
     slots = _props$slots === void 0 ? {} : _props$slots,
-    _props$TransitionComp = props.TransitionComponent,
-    TransitionComponent = _props$TransitionComp === void 0 ? Fade : _props$TransitionComp,
+    TransitionComponentProp = props.TransitionComponent,
     transitionDuration = props.transitionDuration,
-    other = _objectWithoutProperties(props, ["children", "className", "component", "components", "componentsProps", "invisible", "open", "slotProps", "slots", "TransitionComponent", "transitionDuration"]);
+    other = _objectWithoutProperties(props, ["children", "className", "component", "invisible", "open", "components", "componentsProps", "slotProps", "slots", "TransitionComponent", "transitionDuration"]);
   var ownerState = _extends({}, props, {
     component: component,
     invisible: invisible
   });
   var classes = useUtilityClasses(ownerState);
-  var rootSlotProps = (_slotProps$root = slotProps.root) != null ? _slotProps$root : componentsProps.root;
-  return /*#__PURE__*/_jsx(TransitionComponent, _extends({
+  var backwardCompatibleSlots = _extends({
+    transition: TransitionComponentProp,
+    root: components.Root
+  }, slots);
+  var backwardCompatibleSlotProps = _extends({}, componentsProps, slotProps);
+  var externalForwardedProps = {
+    slots: backwardCompatibleSlots,
+    slotProps: backwardCompatibleSlotProps
+  };
+  var _useSlot = useSlot('root', {
+      elementType: BackdropRoot,
+      externalForwardedProps: externalForwardedProps,
+      className: clsx(classes.root, className),
+      ownerState: ownerState
+    }),
+    _useSlot2 = _slicedToArray(_useSlot, 2),
+    RootSlot = _useSlot2[0],
+    rootProps = _useSlot2[1];
+  var _useSlot3 = useSlot('transition', {
+      elementType: Fade,
+      externalForwardedProps: externalForwardedProps,
+      ownerState: ownerState
+    }),
+    _useSlot4 = _slicedToArray(_useSlot3, 2),
+    TransitionSlot = _useSlot4[0],
+    transitionProps = _useSlot4[1];
+  delete transitionProps.ownerState;
+  return /*#__PURE__*/_jsx(TransitionSlot, _extends({
     in: open,
     timeout: transitionDuration
-  }, other, {
-    children: /*#__PURE__*/_jsx(BackdropRoot, _extends({
+  }, other, transitionProps, {
+    children: /*#__PURE__*/_jsx(RootSlot, _extends({
       "aria-hidden": true
-    }, rootSlotProps, {
-      as: (_ref2 = (_slots$root = slots.root) != null ? _slots$root : components.Root) != null ? _ref2 : component,
-      className: clsx(classes.root, className, rootSlotProps == null ? void 0 : rootSlotProps.className),
-      ownerState: _extends({}, ownerState, rootSlotProps == null ? void 0 : rootSlotProps.ownerState),
+    }, rootProps, {
       classes: classes,
       ref: ref,
       children: children
@@ -146,25 +172,20 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes /* remove-proptypes *
    */
   open: PropTypes.bool.isRequired,
   /**
-   * The extra props for the slot components.
-   * You can override the existing props or add new ones.
-   *
-   * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
-   *
+   * The props used for each slot inside.
    * @default {}
    */
   slotProps: PropTypes.shape({
-    root: PropTypes.object
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    transition: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
   }),
   /**
    * The components used for each slot inside.
-   *
-   * This prop is an alias for the `components` prop, which will be deprecated in the future.
-   *
    * @default {}
    */
   slots: PropTypes.shape({
-    root: PropTypes.elementType
+    root: PropTypes.elementType,
+    transition: PropTypes.elementType
   }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
@@ -174,6 +195,7 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes /* remove-proptypes *
    * The component used for the transition.
    * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
    * @default Fade
+   * @deprecated Use `slots.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    */
   TransitionComponent: PropTypes.elementType,
   /**

package/legacy/Badge/Badge.js

@@ -14,8 +14,7 @@ import { useSlotProps } from '@mui/base/utils';
 import { styled, createUseThemeProps } from '../zero-styled';
 import capitalize from '../utils/capitalize';
 import badgeClasses, { getBadgeUtilityClass } from './badgeClasses';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var RADIUS_STANDARD = 10;
 var RADIUS_DOT = 4;
 var useThemeProps = createUseThemeProps('MuiBadge');
@@ -370,8 +369,7 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes /* remove-proptypes */ =
   /**
    * The components used for each slot inside.
    *
-   * This prop is an alias for the `slots` prop.
-   * It's recommended to use the `slots` prop instead.
+   * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    *
    * @default {}
    */
@@ -383,8 +381,7 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes /* remove-proptypes */ =
    * The extra props for the slot components.
    * You can override the existing props or add new ones.
    *
-   * This prop is an alias for the `slotProps` prop.
-   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    *
    * @default {}
    */

package/legacy/BottomNavigation/BottomNavigation.js

@@ -7,10 +7,10 @@ import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getBottomNavigationUtilityClass } from './bottomNavigationClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+var useThemeProps = createUseThemeProps('MuiBottomNavigation');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes;
   var slots = {

package/legacy/BottomNavigationAction/BottomNavigationAction.js

@@ -1,19 +1,18 @@
 'use client';
 
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import ButtonBase from '../ButtonBase';
 import unsupportedProp from '../utils/unsupportedProp';
 import bottomNavigationActionClasses, { getBottomNavigationActionUtilityClass } from './bottomNavigationActionClasses';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var useThemeProps = createUseThemeProps('MuiBottomNavigationAction');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
     showLabel = ownerState.showLabel,
@@ -32,9 +31,8 @@ var BottomNavigationActionRoot = styled(ButtonBase, {
     return [styles.root, !ownerState.showLabel && !ownerState.selected && styles.iconOnly];
   }
 })(function (_ref) {
-  var theme = _ref.theme,
-    ownerState = _ref.ownerState;
-  return _extends({
+  var theme = _ref.theme;
+  return _defineProperty(_defineProperty({
     transition: theme.transitions.create(['color', 'padding-top'], {
       duration: theme.transitions.duration.short
     }),
@@ -44,13 +42,28 @@ var BottomNavigationActionRoot = styled(ButtonBase, {
     color: (theme.vars || theme).palette.text.secondary,
     flexDirection: 'column',
     flex: '1'
-  }, !ownerState.showLabel && !ownerState.selected && {
-    paddingTop: 14
-  }, !ownerState.showLabel && !ownerState.selected && !ownerState.label && {
-    paddingTop: 0
-  }, _defineProperty({}, "&.".concat(bottomNavigationActionClasses.selected), {
+  }, "&.".concat(bottomNavigationActionClasses.selected), {
     color: (theme.vars || theme).palette.primary.main
-  }));
+  }), "variants", [{
+    props: function props(_ref2) {
+      var showLabel = _ref2.showLabel,
+        selected = _ref2.selected;
+      return !showLabel && !selected;
+    },
+    style: {
+      paddingTop: 14
+    }
+  }, {
+    props: function props(_ref3) {
+      var showLabel = _ref3.showLabel,
+        selected = _ref3.selected,
+        label = _ref3.label;
+      return !showLabel && !selected && !label;
+    },
+    style: {
+      paddingTop: 0
+    }
+  }]);
 });
 var BottomNavigationActionLabel = styled('span', {
   name: 'MuiBottomNavigationAction',
@@ -58,21 +71,27 @@ var BottomNavigationActionLabel = styled('span', {
   overridesResolver: function overridesResolver(props, styles) {
     return styles.label;
   }
-})(function (_ref2) {
-  var theme = _ref2.theme,
-    ownerState = _ref2.ownerState;
-  return _extends({
+})(function (_ref5) {
+  var theme = _ref5.theme;
+  return _defineProperty(_defineProperty({
     fontFamily: theme.typography.fontFamily,
     fontSize: theme.typography.pxToRem(12),
     opacity: 1,
     transition: 'font-size 0.2s, opacity 0.2s',
     transitionDelay: '0.1s'
-  }, !ownerState.showLabel && !ownerState.selected && {
-    opacity: 0,
-    transitionDelay: '0s'
-  }, _defineProperty({}, "&.".concat(bottomNavigationActionClasses.selected), {
+  }, "&.".concat(bottomNavigationActionClasses.selected), {
     fontSize: theme.typography.pxToRem(14)
-  }));
+  }), "variants", [{
+    props: function props(_ref6) {
+      var showLabel = _ref6.showLabel,
+        selected = _ref6.selected;
+      return !showLabel && !selected;
+    },
+    style: {
+      opacity: 0,
+      transitionDelay: '0s'
+    }
+  }]);
 });
 var BottomNavigationAction = /*#__PURE__*/React.forwardRef(function BottomNavigationAction(inProps, ref) {
   var props = useThemeProps({

package/legacy/Breadcrumbs/Breadcrumbs.js

@@ -11,12 +11,12 @@ import clsx from 'clsx';
 import integerPropType from '@mui/utils/integerPropType';
 import { useSlotProps } from '@mui/base/utils';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import Typography from '../Typography';
 import BreadcrumbCollapsed from './BreadcrumbCollapsed';
 import breadcrumbsClasses, { getBreadcrumbsUtilityClass } from './breadcrumbsClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+var useThemeProps = createUseThemeProps('MuiBreadcrumbs');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes;
   var slots = {