@mui/material 6.0.0-alpha.1 → 6.0.0-alpha.11

package/Paper/Paper.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "component", "elevation", "square", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -10,12 +7,11 @@ import integerPropType from '@mui/utils/integerPropType';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps, useTheme } from '../zero-styled';
 import getOverlayAlpha from '../styles/getOverlayAlpha';
-import useThemeProps from '../styles/useThemeProps';
-import useTheme from '../styles/useTheme';
 import { getPaperUtilityClass } from './paperClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiPaper');
 const useUtilityClasses = ownerState => {
   const {
     square,
@@ -38,56 +34,81 @@ const PaperRoot = styled('div', {
     return [styles.root, styles[ownerState.variant], !ownerState.square && styles.rounded, ownerState.variant === 'elevation' && styles[`elevation${ownerState.elevation}`]];
   }
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   backgroundColor: (theme.vars || theme).palette.background.paper,
   color: (theme.vars || theme).palette.text.primary,
-  transition: theme.transitions.create('box-shadow')
-}, !ownerState.square && {
-  borderRadius: theme.shape.borderRadius
-}, ownerState.variant === 'outlined' && {
-  border: `1px solid ${(theme.vars || theme).palette.divider}`
-}, ownerState.variant === 'elevation' && _extends({
-  boxShadow: (theme.vars || theme).shadows[ownerState.elevation]
-}, !theme.vars && theme.palette.mode === 'dark' && {
-  backgroundImage: `linear-gradient(${alpha('#fff', getOverlayAlpha(ownerState.elevation))}, ${alpha('#fff', getOverlayAlpha(ownerState.elevation))})`
-}, theme.vars && {
-  backgroundImage: theme.vars.overlays?.[ownerState.elevation]
-})));
+  transition: theme.transitions.create('box-shadow'),
+  variants: [{
+    props: ({
+      ownerState
+    }) => !ownerState.square,
+    style: {
+      borderRadius: theme.shape.borderRadius
+    }
+  }, {
+    props: {
+      variant: 'outlined'
+    },
+    style: {
+      border: `1px solid ${(theme.vars || theme).palette.divider}`
+    }
+  }, {
+    props: {
+      variant: 'elevation'
+    },
+    style: {
+      boxShadow: 'var(--Paper-shadow)',
+      backgroundImage: 'var(--Paper-overlay)'
+    }
+  }]
+}));
 const Paper = /*#__PURE__*/React.forwardRef(function Paper(inProps, ref) {
   const props = useThemeProps({
     props: inProps,
     name: 'MuiPaper'
   });
+  const theme = useTheme();
   const {
-      className,
-      component = 'div',
-      elevation = 1,
-      square = false,
-      variant = 'elevation'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    className,
+    component = 'div',
+    elevation = 1,
+    square = false,
+    variant = 'elevation',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     component,
     elevation,
     square,
     variant
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   if (process.env.NODE_ENV !== 'production') {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const theme = useTheme();
     if (theme.shadows[elevation] === undefined) {
       console.error([`MUI: The elevation provided <Paper elevation={${elevation}}> is not available in the theme.`, `Please make sure that \`theme.shadows[${elevation}]\` is defined.`].join('\n'));
     }
   }
-  return /*#__PURE__*/_jsx(PaperRoot, _extends({
+  return /*#__PURE__*/_jsx(PaperRoot, {
     as: component,
     ownerState: ownerState,
     className: clsx(classes.root, className),
-    ref: ref
-  }, other));
+    ref: ref,
+    ...other,
+    style: {
+      ...(variant === 'elevation' && {
+        '--Paper-shadow': (theme.vars || theme).shadows[elevation],
+        ...(theme.vars && {
+          '--Paper-overlay': theme.overlays?.[elevation]
+        }),
+        ...(!theme.vars && theme.palette.mode === 'dark' && {
+          '--Paper-overlay': `linear-gradient(${alpha('#fff', getOverlayAlpha(elevation))}, ${alpha('#fff', getOverlayAlpha(elevation))})`
+        })
+      }),
+      ...other.style
+    }
+  });
 });
 process.env.NODE_ENV !== "production" ? Paper.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
@@ -131,6 +152,10 @@ process.env.NODE_ENV !== "production" ? Paper.propTypes /* remove-proptypes */ =
    * @default false
    */
   square: PropTypes.bool,
+  /**
+   * @ignore
+   */
+  style: PropTypes.object,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/Popover/Popover.d.ts

@@ -1,12 +1,25 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
-import { SlotComponentProps } from '@mui/base';
 import { InternalStandardProps as StandardProps } from '..';
 import Paper, { PaperProps } from '../Paper';
 import Modal, { ModalOwnerState, ModalProps } from '../Modal';
 import { Theme } from '../styles';
 import { TransitionProps } from '../transitions/transition';
 import { PopoverClasses } from './popoverClasses';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
+
+export interface PopoverSlots {
+  root?: React.ElementType;
+  paper?: React.ElementType;
+}
+
+export type PopoverSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  PopoverSlots,
+  {
+    root: SlotProps<typeof Modal, {}, ModalOwnerState>;
+    paper: SlotProps<typeof Paper, {}, {}>;
+  }
+>;
 
 export interface PopoverOrigin {
   vertical: 'top' | 'center' | 'bottom' | number;
@@ -26,7 +39,8 @@ interface PopoverVirtualElement {
 }
 
 export interface PopoverProps
-  extends StandardProps<Omit<ModalProps, 'slots' | 'slotProps'>, 'children'> {
+  extends StandardProps<Omit<ModalProps, 'slots' | 'slotProps'>, 'children'>,
+    PopoverSlotsAndSlotProps {
   /**
    * A ref for imperative actions.
    * It currently only supports updatePosition() action.
@@ -109,25 +123,6 @@ export interface PopoverProps
    * @default {}
    */
   PaperProps?: Partial<PaperProps<React.ElementType>>;
-  /**
-   * The components used for each slot inside.
-   *
-   * @default {}
-   */
-  slots?: {
-    root?: React.ElementType;
-    paper?: React.ElementType;
-  };
-  /**
-   * The extra props for the slot components.
-   * You can override the existing props or add new ones.
-   *
-   * @default {}
-   */
-  slotProps?: {
-    root?: SlotComponentProps<typeof Modal, {}, ModalOwnerState>;
-    paper?: SlotComponentProps<typeof Paper, {}, {}>;
-  };
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
@@ -187,12 +182,12 @@ export declare const PopoverPaper: React.FC<PopoverPaperProps>;
  *
  * Demos:
  *
- * - [Menu](https://mui.com/material-ui/react-menu/)
- * - [Popover](https://mui.com/material-ui/react-popover/)
+ * - [Menu](https://next.mui.com/material-ui/react-menu/)
+ * - [Popover](https://next.mui.com/material-ui/react-popover/)
  *
  * API:
  *
- * - [Popover API](https://mui.com/material-ui/api/popover/)
- * - inherits [Modal API](https://mui.com/material-ui/api/modal/)
+ * - [Popover API](https://next.mui.com/material-ui/api/popover/)
+ * - inherits [Modal API](https://next.mui.com/material-ui/api/modal/)
  */
-export default function Popover(props: PopoverProps): JSX.Element;
+export default function Popover(props: PopoverProps): React.JSX.Element;

package/Popover/Popover.js

@@ -1,14 +1,9 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["onEntering"],
-  _excluded2 = ["action", "anchorEl", "anchorOrigin", "anchorPosition", "anchorReference", "children", "className", "container", "elevation", "marginThreshold", "open", "PaperProps", "slots", "slotProps", "transformOrigin", "TransitionComponent", "transitionDuration", "TransitionProps", "disableScrollLock"],
-  _excluded3 = ["slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { useSlotProps, isHostComponent } from '@mui/base/utils';
+import { isHostComponent } from '@mui/base/utils';
 import composeClasses from '@mui/utils/composeClasses';
 import HTMLElementType from '@mui/utils/HTMLElementType';
 import refType from '@mui/utils/refType';
@@ -24,6 +19,7 @@ import Grow from '../Grow';
 import Modal from '../Modal';
 import PaperBase from '../Paper';
 import { getPopoverUtilityClass } from './popoverClasses';
+import useSlot from '../utils/useSlot';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useThemeProps = createUseThemeProps('MuiPopover');
 export function getOffsetTop(rect, vertical) {
@@ -92,40 +88,40 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     name: 'MuiPopover'
   });
   const {
-      action,
-      anchorEl,
-      anchorOrigin = {
-        vertical: 'top',
-        horizontal: 'left'
-      },
-      anchorPosition,
-      anchorReference = 'anchorEl',
-      children,
-      className,
-      container: containerProp,
-      elevation = 8,
-      marginThreshold = 16,
-      open,
-      PaperProps: PaperPropsProp = {},
-      slots,
-      slotProps,
-      transformOrigin = {
-        vertical: 'top',
-        horizontal: 'left'
-      },
-      TransitionComponent = Grow,
-      transitionDuration: transitionDurationProp = 'auto',
-      TransitionProps: {
-        onEntering
-      } = {},
-      disableScrollLock = false
-    } = props,
-    TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded),
-    other = _objectWithoutPropertiesLoose(props, _excluded2);
+    action,
+    anchorEl,
+    anchorOrigin = {
+      vertical: 'top',
+      horizontal: 'left'
+    },
+    anchorPosition,
+    anchorReference = 'anchorEl',
+    children,
+    className,
+    container: containerProp,
+    elevation = 8,
+    marginThreshold = 16,
+    open,
+    PaperProps: PaperPropsProp = {},
+    slots = {},
+    slotProps = {},
+    transformOrigin = {
+      vertical: 'top',
+      horizontal: 'left'
+    },
+    TransitionComponent = Grow,
+    transitionDuration: transitionDurationProp = 'auto',
+    TransitionProps: {
+      onEntering,
+      ...TransitionProps
+    } = {},
+    disableScrollLock = false,
+    ...other
+  } = props;
   const externalPaperSlotProps = slotProps?.paper ?? PaperPropsProp;
   const paperRef = React.useRef();
-  const handlePaperRef = useForkRef(paperRef, externalPaperSlotProps.ref);
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     anchorOrigin,
     anchorReference,
     elevation,
@@ -135,7 +131,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     TransitionComponent,
     transitionDuration: transitionDurationProp,
     TransitionProps
-  });
+  };
   const classes = useUtilityClasses(ownerState);
 
   // Returns the top/left offset of the position
@@ -301,59 +297,67 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
   // 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 ? ownerDocument(resolveAnchorEl(anchorEl)).body : undefined);
-  const RootSlot = slots?.root ?? PopoverRoot;
-  const PaperSlot = slots?.paper ?? PopoverPaper;
-  const paperProps = useSlotProps({
-    elementType: PaperSlot,
-    externalSlotProps: _extends({}, externalPaperSlotProps, {
-      style: isPositioned ? externalPaperSlotProps.style : _extends({}, externalPaperSlotProps.style, {
-        opacity: 0
-      })
-    }),
+  const externalForwardedProps = {
+    slots,
+    slotProps: {
+      ...slotProps,
+      paper: externalPaperSlotProps
+    }
+  };
+  const [PaperSlot, paperProps] = useSlot('paper', {
+    elementType: PopoverPaper,
+    externalForwardedProps,
     additionalProps: {
       elevation,
-      ref: handlePaperRef
+      className: clsx(classes.paper, externalPaperSlotProps?.className),
+      style: isPositioned ? externalPaperSlotProps.style : {
+        ...externalPaperSlotProps.style,
+        opacity: 0
+      }
     },
-    ownerState,
-    className: clsx(classes.paper, externalPaperSlotProps?.className)
+    ownerState
   });
-  const _useSlotProps = useSlotProps({
-      elementType: RootSlot,
-      externalSlotProps: slotProps?.root || {},
-      externalForwardedProps: other,
-      additionalProps: {
-        ref,
-        slotProps: {
-          backdrop: {
-            invisible: true
-          }
-        },
-        container,
-        open
+  const [RootSlot, {
+    slotProps: rootSlotPropsProp,
+    ...rootProps
+  }] = useSlot('root', {
+    elementType: PopoverRoot,
+    externalForwardedProps,
+    additionalProps: {
+      slotProps: {
+        backdrop: {
+          invisible: true
+        }
       },
-      ownerState,
-      className: clsx(classes.root, className)
+      container,
+      open
+    },
+    ownerState,
+    className: clsx(classes.root, className)
+  });
+  const handlePaperRef = useForkRef(paperRef, paperProps.ref);
+  return /*#__PURE__*/_jsx(RootSlot, {
+    ...rootProps,
+    ...(!isHostComponent(RootSlot) && {
+      slotProps: rootSlotPropsProp,
+      disableScrollLock
     }),
-    {
-      slotProps: rootSlotPropsProp
-    } = _useSlotProps,
-    rootProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded3);
-  return /*#__PURE__*/_jsx(RootSlot, _extends({}, rootProps, !isHostComponent(RootSlot) && {
-    slotProps: rootSlotPropsProp,
-    disableScrollLock
-  }, {
-    children: /*#__PURE__*/_jsx(TransitionComponent, _extends({
+    ...other,
+    ref: ref,
+    children: /*#__PURE__*/_jsx(TransitionComponent, {
       appear: true,
       in: open,
       onEntering: handleEntering,
       onExited: handleExited,
-      timeout: transitionDuration
-    }, TransitionProps, {
-      children: /*#__PURE__*/_jsx(PaperSlot, _extends({}, paperProps, {
+      timeout: transitionDuration,
+      ...TransitionProps,
+      children: /*#__PURE__*/_jsx(PaperSlot, {
+        ...paperProps,
+        ref: handlePaperRef,
         children: children
-      }))
-    }))
-  }));
+      })
+    })
+  });
 });
 process.env.NODE_ENV !== "production" ? Popover.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
@@ -472,9 +476,7 @@ process.env.NODE_ENV !== "production" ? Popover.propTypes /* remove-proptypes */
     component: elementTypeAcceptingRef
   }),
   /**
-   * The extra props for the slot components.
-   * You can override the existing props or add new ones.
-   *
+   * The props used for each slot inside.
    * @default {}
    */
   slotProps: PropTypes.shape({
@@ -483,7 +485,6 @@ process.env.NODE_ENV !== "production" ? Popover.propTypes /* remove-proptypes */
   }),
   /**
    * The components used for each slot inside.
-   *
    * @default {}
    */
   slots: PropTypes.shape({

package/Popper/Popper.d.ts

@@ -11,6 +11,8 @@ export interface PopperProps extends Omit<BasePopperProps, 'direction'> {
     /**
      * The components used for each slot inside the Popper.
      * Either a string to use a HTML element or a component.
+     *
+     * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
      * @default {}
      */
     components?: {
@@ -18,6 +20,8 @@ export interface PopperProps extends Omit<BasePopperProps, 'direction'> {
     };
     /**
      * The props used for each slot inside the Popper.
+     *
+     * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
      * @default {}
      */
     componentsProps?: BasePopperProps['slotProps'];
@@ -30,13 +34,13 @@ export interface PopperProps extends Omit<BasePopperProps, 'direction'> {
  *
  * 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/)
  */
 declare const Popper: React.ForwardRefExoticComponent<PopperProps & React.RefAttributes<HTMLDivElement>>;
 export default Popper;

package/Popper/Popper.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["anchorEl", "component", "components", "componentsProps", "container", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "transition", "slots", "slotProps"];
 import { Popper as BasePopper } from '@mui/base/Popper';
 import useTheme from '@mui/system/useThemeWithoutDefault';
 import refType from '@mui/utils/refType';
@@ -21,13 +18,13 @@ const PopperRoot = styled(BasePopper, {
  *
  * 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 theme = useTheme();
@@ -36,25 +33,25 @@ const Popper = /*#__PURE__*/React.forwardRef(function Popper(inProps, ref) {
     name: 'MuiPopper'
   });
   const {
-      anchorEl,
-      component,
-      components,
-      componentsProps,
-      container,
-      disablePortal,
-      keepMounted,
-      modifiers,
-      open,
-      placement,
-      popperOptions,
-      popperRef,
-      transition,
-      slots,
-      slotProps
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    anchorEl,
+    component,
+    components,
+    componentsProps,
+    container,
+    disablePortal,
+    keepMounted,
+    modifiers,
+    open,
+    placement,
+    popperOptions,
+    popperRef,
+    transition,
+    slots,
+    slotProps,
+    ...other
+  } = props;
   const RootComponent = slots?.root ?? components?.Root;
-  const otherProps = _extends({
+  const otherProps = {
     anchorEl,
     container,
     disablePortal,
@@ -64,18 +61,19 @@ const Popper = /*#__PURE__*/React.forwardRef(function Popper(inProps, ref) {
     placement,
     popperOptions,
     popperRef,
-    transition
-  }, other);
-  return /*#__PURE__*/_jsx(PopperRoot, _extends({
+    transition,
+    ...other
+  };
+  return /*#__PURE__*/_jsx(PopperRoot, {
     as: component,
     direction: theme?.direction,
     slots: {
       root: RootComponent
     },
-    slotProps: slotProps ?? componentsProps
-  }, otherProps, {
+    slotProps: slotProps ?? componentsProps,
+    ...otherProps,
     ref: ref
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? Popper.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
@@ -101,6 +99,8 @@ process.env.NODE_ENV !== "production" ? Popper.propTypes /* remove-proptypes */
   /**
    * The components used for each slot inside the Popper.
    * Either a string to use a HTML element or a component.
+   *
+   * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    * @default {}
    */
   components: PropTypes.shape({
@@ -108,6 +108,8 @@ process.env.NODE_ENV !== "production" ? Popper.propTypes /* remove-proptypes */
   }),
   /**
    * The props used for each slot inside the Popper.
+   *
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    * @default {}
    */
   componentsProps: PropTypes.shape({

package/Radio/Radio.d.ts

@@ -55,11 +55,11 @@ export interface RadioProps
  *
  * Demos:
  *
- * - [Radio Group](https://mui.com/material-ui/react-radio-button/)
+ * - [Radio Group](https://next.mui.com/material-ui/react-radio-button/)
  *
  * API:
  *
- * - [Radio API](https://mui.com/material-ui/api/radio/)
- * - inherits [ButtonBase API](https://mui.com/material-ui/api/button-base/)
+ * - [Radio API](https://next.mui.com/material-ui/api/radio/)
+ * - inherits [ButtonBase API](https://next.mui.com/material-ui/api/button-base/)
  */
-export default function Radio(props: RadioProps): JSX.Element;
+export default function Radio(props: RadioProps): React.JSX.Element;