@mui/material 6.4.4 → 7.0.0-alpha.0

package/node/Modal/Modal.js

@@ -22,7 +22,6 @@ var _Backdrop = _interopRequireDefault(require("../Backdrop"));
 var _useModal = _interopRequireDefault(require("./useModal"));
 var _modalClasses = require("./modalClasses");
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
-var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -165,7 +164,6 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     childProps.onExited = onExited;
   }
   const externalForwardedProps = {
-    ...other,
     slots: {
       root: components.Root,
       backdrop: components.Backdrop,
@@ -177,19 +175,22 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     }
   };
   const [RootSlot, rootProps] = (0, _useSlot.default)('root', {
+    ref,
     elementType: ModalRoot,
-    externalForwardedProps,
-    getSlotProps: getRootProps,
-    additionalProps: {
-      ref,
-      as: component
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other,
+      component
     },
+    getSlotProps: getRootProps,
     ownerState,
     className: (0, _clsx.default)(className, classes?.root, !ownerState.open && ownerState.exited && classes?.hidden)
   });
   const [BackdropSlot, backdropProps] = (0, _useSlot.default)('backdrop', {
+    ref: BackdropProps?.ref,
     elementType: BackdropComponent,
     externalForwardedProps,
+    shouldForwardComponentProp: true,
     additionalProps: BackdropProps,
     getSlotProps: otherHandlers => {
       return getBackdropProps({
@@ -207,7 +208,6 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     className: (0, _clsx.default)(BackdropProps?.className, classes?.backdrop),
     ownerState
   });
-  const backdropRef = (0, _utils.useForkRef)(BackdropProps?.ref, backdropProps.ref);
   if (!keepMounted && !open && (!hasTransition || exited)) {
     return null;
   }
@@ -218,8 +218,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(RootSlot, {
       ...rootProps,
       children: [!hideBackdrop && BackdropComponent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(BackdropSlot, {
-        ...backdropProps,
-        ref: backdropRef
+        ...backdropProps
       }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_TrapFocus.default, {
         disableEnforceFocus: disableEnforceFocus,
         disableAutoFocus: disableAutoFocus,

package/node/NoSsr/NoSsr.js

@@ -22,11 +22,11 @@ var _utils = require("@mui/utils");
  *
  * Demos:
  *
- * - [No SSR](https://mui.com/material-ui/react-no-ssr/)
+ * - [No SSR](https://next.mui.com/material-ui/react-no-ssr/)
  *
  * API:
  *
- * - [NoSsr API](https://mui.com/material-ui/api/no-ssr/)
+ * - [NoSsr API](https://next.mui.com/material-ui/api/no-ssr/)
  */
 function NoSsr(props) {
   const {

package/node/PigmentContainer/PigmentContainer.js

@@ -32,11 +32,11 @@ const useUtilityClasses = ownerState => {
  *
  * Demos:
  *
- * - [Container](https://mui.com/material-ui/react-container/)
+ * - [Container](https://next.mui.com/material-ui/react-container/)
  *
  * API:
  *
- * - [PigmentContainer API](https://mui.com/material-ui/api/pigment-container/)
+ * - [PigmentContainer API](https://next.mui.com/material-ui/api/pigment-container/)
  */
 const PigmentContainer = /*#__PURE__*/React.forwardRef(function PigmentContainer({
   className,

package/node/PigmentGrid/PigmentGrid.js

@@ -46,11 +46,11 @@ const useUtilityClasses = ownerState => {
  *
  * Demos:
  *
- * - [Grid version 2](https://mui.com/material-ui/react-grid2/)
+ * - [Grid version 2](https://next.mui.com/material-ui/react-grid2/)
  *
  * API:
  *
- * - [PigmentGrid API](https://mui.com/material-ui/api/pigment-grid/)
+ * - [PigmentGrid API](https://next.mui.com/material-ui/api/pigment-grid/)
  */
 const PigmentGrid = /*#__PURE__*/React.forwardRef(function PigmentGrid(props, ref) {
   const {

package/node/PigmentHidden/PigmentHidden.js

@@ -179,11 +179,11 @@ process.env.NODE_ENV !== "production" ? HiddenCss.propTypes /* remove-proptypes
  *
  * Demos:
  *
- * - [Hidden](https://mui.com/material-ui/react-hidden/)
+ * - [Hidden](https://next.mui.com/material-ui/react-hidden/)
  *
  * API:
  *
- * - [PigmentHidden API](https://mui.com/material-ui/api/pigment-hidden/)
+ * - [PigmentHidden API](https://next.mui.com/material-ui/api/pigment-hidden/)
  */
 function PigmentHidden({
   implementation = 'js',

package/node/PigmentStack/PigmentStack.js

@@ -25,11 +25,11 @@ const useUtilityClasses = () => {
  *
  * Demos:
  *
- * - [Stack](https://mui.com/material-ui/react-stack/)
+ * - [Stack](https://next.mui.com/material-ui/react-stack/)
  *
  * API:
  *
- * - [PigmentStack API](https://mui.com/material-ui/api/pigment-stack/)
+ * - [PigmentStack API](https://next.mui.com/material-ui/api/pigment-stack/)
  */
 const PigmentStack = /*#__PURE__*/React.forwardRef(function PigmentStack({
   className,

package/node/Popover/Popover.js

@@ -24,12 +24,12 @@ var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _debounce = _interopRequireDefault(require("../utils/debounce"));
 var _ownerDocument = _interopRequireDefault(require("../utils/ownerDocument"));
 var _ownerWindow = _interopRequireDefault(require("../utils/ownerWindow"));
-var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _Grow = _interopRequireDefault(require("../Grow"));
 var _Modal = _interopRequireDefault(require("../Modal"));
 var _Paper = _interopRequireDefault(require("../Paper"));
 var _popoverClasses = require("./popoverClasses");
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
+var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function getOffsetTop(rect, vertical) {
   let offset = 0;
@@ -112,22 +112,21 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     marginThreshold = 16,
     open,
     PaperProps: PaperPropsProp = {},
+    // TODO: remove in v7
     slots = {},
     slotProps = {},
     transformOrigin = {
       vertical: 'top',
       horizontal: 'left'
     },
-    TransitionComponent = _Grow.default,
+    TransitionComponent,
+    // TODO: remove in v7
     transitionDuration: transitionDurationProp = 'auto',
-    TransitionProps: {
-      onEntering,
-      ...TransitionProps
-    } = {},
+    TransitionProps = {},
+    // TODO: remove in v7
     disableScrollLock = false,
     ...other
   } = props;
-  const externalPaperSlotProps = slotProps?.paper ?? PaperPropsProp;
   const paperRef = React.useRef();
   const ownerState = {
     ...props,
@@ -135,7 +134,6 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     anchorReference,
     elevation,
     marginThreshold,
-    externalPaperSlotProps,
     transformOrigin,
     TransitionComponent,
     transitionDuration: transitionDurationProp,
@@ -264,10 +262,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     }
     return () => window.removeEventListener('scroll', setPositioningStyles);
   }, [anchorEl, disableScrollLock, setPositioningStyles]);
-  const handleEntering = (element, isAppearing) => {
-    if (onEntering) {
-      onEntering(element, isAppearing);
-    }
+  const handleEntering = () => {
     setPositioningStyles();
   };
   const handleExited = () => {
@@ -298,45 +293,65 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     };
   }, [anchorEl, open, setPositioningStyles]);
   let transitionDuration = transitionDurationProp;
-  if (transitionDurationProp === 'auto' && !TransitionComponent.muiSupportAuto) {
-    transitionDuration = undefined;
-  }
-
-  // If the container prop is provided, use that
-  // If the anchorEl prop is provided, use its parent body element as the container
-  // If neither are provided let the Modal take care of choosing the container
-  const container = containerProp || (anchorEl ? (0, _ownerDocument.default)(resolveAnchorEl(anchorEl)).body : undefined);
   const externalForwardedProps = {
-    slots,
+    slots: {
+      transition: TransitionComponent,
+      ...slots
+    },
     slotProps: {
-      ...slotProps,
-      paper: externalPaperSlotProps
+      transition: TransitionProps,
+      paper: PaperPropsProp,
+      ...slotProps
     }
   };
-  const [PaperSlot, paperProps] = (0, _useSlot.default)('paper', {
-    elementType: PopoverPaper,
+  const [TransitionSlot, transitionSlotProps] = (0, _useSlot.default)('transition', {
+    elementType: _Grow.default,
     externalForwardedProps,
-    additionalProps: {
-      elevation,
-      className: (0, _clsx.default)(classes.paper, externalPaperSlotProps?.className),
-      style: isPositioned ? externalPaperSlotProps.style : {
-        ...externalPaperSlotProps.style,
-        opacity: 0
+    ownerState,
+    getSlotProps: handlers => ({
+      ...handlers,
+      onEntering: (element, isAppearing) => {
+        handlers.onEntering?.(element, isAppearing);
+        handleEntering();
+      },
+      onExited: element => {
+        handlers.onExited?.(element);
+        handleExited();
       }
-    },
-    ownerState
+    }),
+    additionalProps: {
+      appear: true,
+      in: open
+    }
   });
+  if (transitionDurationProp === 'auto' && !TransitionSlot.muiSupportAuto) {
+    transitionDuration = undefined;
+  }
+
+  // If the container prop is provided, use that
+  // If the anchorEl prop is provided, use its parent body element as the container
+  // If neither are provided let the Modal take care of choosing the container
+  const container = containerProp || (anchorEl ? (0, _ownerDocument.default)(resolveAnchorEl(anchorEl)).body : undefined);
   const [RootSlot, {
+    slots: rootSlotsProp,
     slotProps: rootSlotPropsProp,
     ...rootProps
   }] = (0, _useSlot.default)('root', {
+    ref,
     elementType: PopoverRoot,
-    externalForwardedProps,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other
+    },
+    shouldForwardComponentProp: true,
     additionalProps: {
+      slots: {
+        backdrop: slots.backdrop
+      },
       slotProps: {
-        backdrop: {
+        backdrop: (0, _utils.mergeSlotProps)(typeof slotProps.backdrop === 'function' ? slotProps.backdrop(ownerState) : slotProps.backdrop, {
           invisible: true
-        }
+        })
       },
       container,
       open
@@ -344,25 +359,32 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     ownerState,
     className: (0, _clsx.default)(classes.root, className)
   });
-  const handlePaperRef = (0, _useForkRef.default)(paperRef, paperProps.ref);
+  const [PaperSlot, paperProps] = (0, _useSlot.default)('paper', {
+    ref: paperRef,
+    className: classes.paper,
+    elementType: PopoverPaper,
+    externalForwardedProps,
+    shouldForwardComponentProp: true,
+    additionalProps: {
+      elevation,
+      style: isPositioned ? undefined : {
+        opacity: 0
+      }
+    },
+    ownerState
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(RootSlot, {
     ...rootProps,
     ...(!(0, _isHostComponent.default)(RootSlot) && {
+      slots: rootSlotsProp,
       slotProps: rootSlotPropsProp,
       disableScrollLock
     }),
-    ...other,
-    ref: ref,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionComponent, {
-      appear: true,
-      in: open,
-      onEntering: handleEntering,
-      onExited: handleExited,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionSlot, {
+      ...transitionSlotProps,
       timeout: transitionDuration,
-      ...TransitionProps,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PaperSlot, {
         ...paperProps,
-        ref: handlePaperRef,
         children: children
       })
     })
@@ -430,8 +452,7 @@ process.env.NODE_ENV !== "production" ? Popover.propTypes /* remove-proptypes */
   anchorReference: _propTypes.default.oneOf(['anchorEl', 'anchorPosition', 'none']),
   /**
    * A backdrop component. This prop enables custom backdrop rendering.
-   * @deprecated Use `slotProps.root.slots.backdrop` instead. While this prop currently works, it will be removed in the next major version.
-   * Use the `slotProps.root.slots.backdrop` prop to make your application ready for the next version of Material UI.
+   * @deprecated Use `slots.backdrop` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    * @default styled(Backdrop, {
    *   name: 'MuiModal',
    *   slot: 'Backdrop',
@@ -445,7 +466,7 @@ process.env.NODE_ENV !== "production" ? Popover.propTypes /* remove-proptypes */
   BackdropComponent: _propTypes.default.elementType,
   /**
    * Props applied to the [`Backdrop`](/material-ui/api/backdrop/) element.
-   * @deprecated Use `slotProps.root.slotProps.backdrop` instead.
+   * @deprecated Use `slotProps.backdrop` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   BackdropProps: _propTypes.default.object,
   /**
@@ -509,16 +530,20 @@ process.env.NODE_ENV !== "production" ? Popover.propTypes /* remove-proptypes */
    * @default {}
    */
   slotProps: _propTypes.default.shape({
+    backdrop: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
     paper: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
-    root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+    root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    transition: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
   }),
   /**
    * The components used for each slot inside.
    * @default {}
    */
   slots: _propTypes.default.shape({
+    backdrop: _propTypes.default.elementType,
     paper: _propTypes.default.elementType,
-    root: _propTypes.default.elementType
+    root: _propTypes.default.elementType,
+    transition: _propTypes.default.elementType
   }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
@@ -543,6 +568,7 @@ process.env.NODE_ENV !== "production" ? Popover.propTypes /* remove-proptypes */
   /**
    * 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.
+   * @deprecated use the `slots.transition` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    * @default Grow
    */
   TransitionComponent: _propTypes.default.elementType,
@@ -558,6 +584,7 @@ process.env.NODE_ENV !== "production" ? Popover.propTypes /* remove-proptypes */
   /**
    * 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 the `slotProps.transition` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    * @default {}
    */
   TransitionProps: _propTypes.default.object

package/node/Popper/Popper.js

@@ -26,13 +26,13 @@ const PopperRoot = (0, _zeroStyled.styled)(_BasePopper.default, {
  *
  * Demos:
  *
- * - [Autocomplete](https://mui.com/material-ui/react-autocomplete/)
- * - [Menu](https://mui.com/material-ui/react-menu/)
- * - [Popper](https://mui.com/material-ui/react-popper/)
+ * - [Autocomplete](https://next.mui.com/material-ui/react-autocomplete/)
+ * - [Menu](https://next.mui.com/material-ui/react-menu/)
+ * - [Popper](https://next.mui.com/material-ui/react-popper/)
  *
  * API:
  *
- * - [Popper API](https://mui.com/material-ui/api/popper/)
+ * - [Popper API](https://next.mui.com/material-ui/api/popper/)
  */
 const Popper = /*#__PURE__*/React.forwardRef(function Popper(inProps, ref) {
   const isRtl = (0, _RtlProvider.useRtl)();

package/node/Portal/Portal.js

@@ -21,11 +21,11 @@ function getContainer(container) {
  *
  * Demos:
  *
- * - [Portal](https://mui.com/material-ui/react-portal/)
+ * - [Portal](https://next.mui.com/material-ui/react-portal/)
  *
  * API:
  *
- * - [Portal API](https://mui.com/material-ui/api/portal/)
+ * - [Portal API](https://next.mui.com/material-ui/api/portal/)
  */
 const Portal = /*#__PURE__*/React.forwardRef(function Portal(props, forwardedRef) {
   const {

package/node/Slider/Slider.js

@@ -972,7 +972,7 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
    * @param {Event} event The event source of the callback.
    * You can pull out the new value by accessing `event.target.value` (any).
    * **Warning**: This is a generic event not a change event.
-   * @param {number | number[]} value The new value.
+   * @param {Value} value The new value.
    * @param {number} activeThumb Index of the currently moved thumb.
    */
   onChange: _propTypes.default.func,
@@ -980,7 +980,7 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
    * Callback function that is fired when the `mouseup` is triggered.
    *
    * @param {React.SyntheticEvent | Event} event The event source of the callback. **Warning**: This is a generic event not a change event.
-   * @param {number | number[]} value The new value.
+   * @param {Value} value The new value.
    */
   onChangeCommitted: _propTypes.default.func,
   /**