@mui/material 6.4.4 → 7.0.0-alpha.0

package/Modal/Modal.d.ts

@@ -211,23 +211,23 @@ export declare const ModalRoot: React.FC<ModalRootProps>;
 /**
  * Modal is a lower-level construct that is leveraged by the following components:
  *
- * * [Dialog](https://mui.com/material-ui/api/dialog/)
- * * [Drawer](https://mui.com/material-ui/api/drawer/)
- * * [Menu](https://mui.com/material-ui/api/menu/)
- * * [Popover](https://mui.com/material-ui/api/popover/)
+ * * [Dialog](https://next.mui.com/material-ui/api/dialog/)
+ * * [Drawer](https://next.mui.com/material-ui/api/drawer/)
+ * * [Menu](https://next.mui.com/material-ui/api/menu/)
+ * * [Popover](https://next.mui.com/material-ui/api/popover/)
  *
- * If you are creating a modal dialog, you probably want to use the [Dialog](https://mui.com/material-ui/api/dialog/) component
+ * If you are creating a modal dialog, you probably want to use the [Dialog](https://next.mui.com/material-ui/api/dialog/) component
  * rather than directly using Modal.
  *
  * This component shares many concepts with [react-overlays](https://react-bootstrap.github.io/react-overlays/#modals).
  *
  * Demos:
  *
- * - [Modal](https://mui.com/material-ui/react-modal/)
+ * - [Modal](https://next.mui.com/material-ui/react-modal/)
  *
  * API:
  *
- * - [Modal API](https://mui.com/material-ui/api/modal/)
+ * - [Modal API](https://next.mui.com/material-ui/api/modal/)
  */
 declare const Modal: OverridableComponent<ModalTypeMap>;
 

package/Modal/Modal.js

@@ -15,7 +15,6 @@ import Backdrop from "../Backdrop/index.js";
 import useModal from "./useModal.js";
 import { getModalUtilityClass } from "./modalClasses.js";
 import useSlot from "../utils/useSlot.js";
-import { useForkRef } from "../utils/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -158,7 +157,6 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     childProps.onExited = onExited;
   }
   const externalForwardedProps = {
-    ...other,
     slots: {
       root: components.Root,
       backdrop: components.Backdrop,
@@ -170,19 +168,22 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     }
   };
   const [RootSlot, rootProps] = useSlot('root', {
+    ref,
     elementType: ModalRoot,
-    externalForwardedProps,
-    getSlotProps: getRootProps,
-    additionalProps: {
-      ref,
-      as: component
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other,
+      component
     },
+    getSlotProps: getRootProps,
     ownerState,
     className: clsx(className, classes?.root, !ownerState.open && ownerState.exited && classes?.hidden)
   });
   const [BackdropSlot, backdropProps] = useSlot('backdrop', {
+    ref: BackdropProps?.ref,
     elementType: BackdropComponent,
     externalForwardedProps,
+    shouldForwardComponentProp: true,
     additionalProps: BackdropProps,
     getSlotProps: otherHandlers => {
       return getBackdropProps({
@@ -200,7 +201,6 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     className: clsx(BackdropProps?.className, classes?.backdrop),
     ownerState
   });
-  const backdropRef = useForkRef(BackdropProps?.ref, backdropProps.ref);
   if (!keepMounted && !open && (!hasTransition || exited)) {
     return null;
   }
@@ -211,8 +211,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     children: /*#__PURE__*/_jsxs(RootSlot, {
       ...rootProps,
       children: [!hideBackdrop && BackdropComponent ? /*#__PURE__*/_jsx(BackdropSlot, {
-        ...backdropProps,
-        ref: backdropRef
+        ...backdropProps
       }) : null, /*#__PURE__*/_jsx(FocusTrap, {
         disableEnforceFocus: disableEnforceFocus,
         disableAutoFocus: disableAutoFocus,

package/NativeSelect/NativeSelect.d.ts

@@ -57,12 +57,12 @@ export interface NativeSelectProps
  *
  * Demos:
  *
- * - [Select](https://mui.com/material-ui/react-select/)
+ * - [Select](https://next.mui.com/material-ui/react-select/)
  *
  * API:
  *
- * - [NativeSelect API](https://mui.com/material-ui/api/native-select/)
- * - inherits [Input API](https://mui.com/material-ui/api/input/)
+ * - [NativeSelect API](https://next.mui.com/material-ui/api/native-select/)
+ * - inherits [Input API](https://next.mui.com/material-ui/api/input/)
  */
 declare const NativeSelect: ((props: NativeSelectProps) => React.JSX.Element) & { muiName: string };
 

package/NoSsr/NoSsr.d.ts

@@ -12,11 +12,11 @@ import { NoSsrProps } from './NoSsr.types';
  *
  * 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/)
  */
 declare function NoSsr(props: NoSsrProps): React.JSX.Element;
 declare namespace NoSsr {

package/NoSsr/NoSsr.js

@@ -15,11 +15,11 @@ import { exactProp, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui
  *
  * 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/OutlinedInput/OutlinedInput.d.ts

@@ -28,12 +28,12 @@ export interface OutlinedInputProps extends StandardProps<InputBaseProps> {
  *
  * Demos:
  *
- * - [Text Field](https://mui.com/material-ui/react-text-field/)
+ * - [Text Field](https://next.mui.com/material-ui/react-text-field/)
  *
  * API:
  *
- * - [OutlinedInput API](https://mui.com/material-ui/api/outlined-input/)
- * - inherits [InputBase API](https://mui.com/material-ui/api/input-base/)
+ * - [OutlinedInput API](https://next.mui.com/material-ui/api/outlined-input/)
+ * - inherits [InputBase API](https://next.mui.com/material-ui/api/input-base/)
  */
 declare const OutlinedInput: ((props: OutlinedInputProps) => React.JSX.Element) & {
   muiName: string;

package/Pagination/Pagination.d.ts

@@ -84,10 +84,10 @@ export interface PaginationProps
  *
  * Demos:
  *
- * - [Pagination](https://mui.com/material-ui/react-pagination/)
+ * - [Pagination](https://next.mui.com/material-ui/react-pagination/)
  *
  * API:
  *
- * - [Pagination API](https://mui.com/material-ui/api/pagination/)
+ * - [Pagination API](https://next.mui.com/material-ui/api/pagination/)
  */
 export default function Pagination(props: PaginationProps): React.JSX.Element;

package/PaginationItem/PaginationItem.d.ts

@@ -118,11 +118,11 @@ export interface PaginationItemTypeMap<
  *
  * Demos:
  *
- * - [Pagination](https://mui.com/material-ui/react-pagination/)
+ * - [Pagination](https://next.mui.com/material-ui/react-pagination/)
  *
  * API:
  *
- * - [PaginationItem API](https://mui.com/material-ui/api/pagination-item/)
+ * - [PaginationItem API](https://next.mui.com/material-ui/api/pagination-item/)
  */
 declare const PaginationItem: OverridableComponent<PaginationItemTypeMap>;
 

package/Paper/Paper.d.ts

@@ -50,12 +50,12 @@ export interface PaperTypeMap<
  *
  * Demos:
  *
- * - [Card](https://mui.com/material-ui/react-card/)
- * - [Paper](https://mui.com/material-ui/react-paper/)
+ * - [Card](https://next.mui.com/material-ui/react-card/)
+ * - [Paper](https://next.mui.com/material-ui/react-paper/)
  *
  * API:
  *
- * - [Paper API](https://mui.com/material-ui/api/paper/)
+ * - [Paper API](https://next.mui.com/material-ui/api/paper/)
  */
 declare const Paper: OverridableComponent<PaperTypeMap>;
 

package/PigmentContainer/PigmentContainer.d.ts

@@ -45,11 +45,11 @@ export type PigmentContainerProps<RootComponent extends React.ElementType = Pigm
  *
  * 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/)
  */
 declare const PigmentContainer: OverridableComponent<PigmentContainerTypeMap>;
 export default PigmentContainer;

package/PigmentContainer/PigmentContainer.js

@@ -23,11 +23,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/PigmentGrid/PigmentGrid.d.ts

@@ -75,11 +75,11 @@ export type GridProps<RootComponent extends React.ElementType = GridTypeMap['def
  *
  * 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/)
  */
 declare const PigmentGrid: OverridableComponent<GridTypeMap>;
 export default PigmentGrid;

package/PigmentGrid/PigmentGrid.js

@@ -37,11 +37,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/PigmentHidden/PigmentHidden.d.ts

@@ -82,11 +82,11 @@ export interface HiddenProps {
  *
  * 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/)
  */
 declare function PigmentHidden({ implementation, ...props }: HiddenProps & {
     className?: string;

package/PigmentHidden/PigmentHidden.js

@@ -171,11 +171,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/PigmentStack/PigmentStack.d.ts

@@ -41,11 +41,11 @@ export type PigmentStackProps<RootComponent extends React.ElementType = PigmentS
  *
  * 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/)
  */
 declare const PigmentStack: OverridableComponent<PigmentStackTypeMap>;
 export default PigmentStack;

package/PigmentStack/PigmentStack.js

@@ -16,11 +16,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/Popover/Popover.d.ts

@@ -1,23 +1,74 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
+import { SlotComponentProps } from '@mui/utils';
 import { BackdropProps, InternalStandardProps as StandardProps } from '..';
 import Paper, { PaperProps } from '../Paper';
-import Modal, { ModalOwnerState, ModalProps } from '../Modal';
+import Modal, { 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 {
+  /**
+   * The component used for the root slot.
+   * @default Modal
+   */
   root: React.ElementType;
+  /**
+   * The component used for the paper slot.
+   * @default Paper
+   */
   paper: React.ElementType;
+  /**
+   * The component used for the transition slot.
+   * @default Grow
+   */
+  transition: React.ElementType;
+  /**
+   * The component used for the backdrop slot.
+   * @default Backdrop
+   */
+  backdrop: React.ElementType;
 }
 
+export interface PopoverRootSlotPropsOverrides {}
+export interface PopoverPaperSlotPropsOverrides {}
+export interface PopoverTransitionSlotPropsOverrides {}
+export interface PopoverBackdropSlotPropsOverrides {}
+
 export type PopoverSlotsAndSlotProps = CreateSlotsAndSlotProps<
   PopoverSlots,
   {
-    root: SlotProps<typeof Modal, {}, ModalOwnerState>;
-    paper: SlotProps<typeof Paper, {}, {}>;
+    /**
+     * Props forwarded to the root slot.
+     * By default, the avaible props are based on the [Modal](https://mui.com/material-ui/api/modal/#props) component.
+     */
+    root: SlotProps<typeof Modal, PopoverRootSlotPropsOverrides, PopoverOwnerState>;
+    /**
+     * Props forwarded to the paper slot.
+     * By default, the avaible props are based on the [Paper](https://mui.com/material-ui/api/paper/#props) component.
+     */
+    paper: SlotProps<typeof Paper, PopoverPaperSlotPropsOverrides, PopoverOwnerState>;
+    /**
+     * Props forwarded to the transition slot.
+     * By default, the avaible props are based on the [Grow](https://mui.com/material-ui/api/grow/#props) component.
+     */
+    transition: SlotComponentProps<
+      // use SlotComponentProps because transition slot does not support `component` and `sx` prop
+      React.ElementType<TransitionProps>,
+      PopoverTransitionSlotPropsOverrides,
+      PopoverOwnerState
+    >;
+    /**
+     * Props forwarded to the backdrop slot.
+     * By default, the avaible props are based on the [Backdrop](https://mui.com/material-ui/api/backdrop/#props) component.
+     */
+    backdrop: SlotProps<
+      React.ElementType<BackdropProps>,
+      PopoverBackdropSlotPropsOverrides,
+      PopoverOwnerState
+    >;
   }
 >;
 
@@ -87,8 +138,7 @@ export interface PopoverProps
   anchorReference?: PopoverReference;
   /**
    * 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',
@@ -102,7 +152,7 @@ export interface PopoverProps
   BackdropComponent?: React.ElementType<BackdropProps>;
   /**
    * 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?: Partial<BackdropProps>;
   /**
@@ -166,6 +216,7 @@ export interface PopoverProps
   /**
    * 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?: React.JSXElementConstructor<
@@ -179,11 +230,14 @@ export interface PopoverProps
   /**
    * 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?: TransitionProps;
 }
 
+export interface PopoverOwnerState extends Omit<PopoverProps, 'slots' | 'slotProps'> {}
+
 export interface PopoverActions {
   updatePosition(): void;
 }
@@ -205,12 +259,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): React.JSX.Element;