@mui/material 9.0.0-alpha.4 → 9.0.0-beta.1

package/MenuList/MenuList.mjs

@@ -1,26 +1,41 @@
 'use client';
 
 import * as React from 'react';
-import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
-import useRovingTabIndex from "../utils/useRovingTabIndex.mjs";
+import { isItemFocusable } from '@mui/utils/useRovingTabIndex';
 import ownerDocument from "../utils/ownerDocument.mjs";
-import List from "../List/index.mjs";
 import getActiveElement from "../utils/getActiveElement.mjs";
 import getScrollbarSize from "../utils/getScrollbarSize.mjs";
+import focusWithVisible from "../utils/focusWithVisible.mjs";
+import useEventCallback from "../utils/useEventCallback.mjs";
 import useForkRef from "../utils/useForkRef.mjs";
 import useEnhancedEffect from "../utils/useEnhancedEffect.mjs";
-import { ownerWindow } from "../utils/index.mjs";
+import { RovingTabIndexContext, useRovingTabIndexRoot } from "../utils/useRovingTabIndex.mjs";
+import ownerWindow from "../utils/ownerWindow.mjs";
+import List from "../List/index.mjs";
+import { useSelectFocusSource } from "../Select/utils/index.mjs";
+import { MenuListContext } from "./MenuListContext.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
-function textCriteriaMatches(nextFocus, textCriteria) {
-  if (textCriteria === undefined) {
-    return true;
+function getItemText(itemOrElement) {
+  const element = itemOrElement?.element ?? itemOrElement;
+  if (!element) {
+    return '';
   }
-  let text = nextFocus.innerText;
+  if (itemOrElement?.textValue !== undefined) {
+    return itemOrElement.textValue;
+  }
+  let text = element.innerText;
   if (text === undefined) {
     // jsdom doesn't support innerText
-    text = nextFocus.textContent;
+    text = element.textContent;
   }
+  return text ?? '';
+}
+function textCriteriaMatches(itemOrElement, textCriteria) {
+  if (textCriteria === undefined) {
+    return true;
+  }
+  let text = getItemText(itemOrElement);
   text = text.trim().toLowerCase();
   if (text.length === 0) {
     return false;
@@ -30,20 +45,17 @@ function textCriteriaMatches(nextFocus, textCriteria) {
   }
   return text.startsWith(textCriteria.keys.join(''));
 }
-function shouldFocusWithTextCriteria(element, criteria, disabledItemsFocusable) {
-  if (!textCriteriaMatches(element, criteria)) {
+function isItemFocusableWithTextCriteria(item, criteria) {
+  if (!textCriteriaMatches(item, criteria)) {
     return false;
   }
-  return shouldFocus(element, disabledItemsFocusable);
+  return isItemFocusable(item);
 }
-function shouldFocus(element, disabledItemsFocusable) {
-  if (!element || !element.hasAttribute('tabindex')) {
-    return false;
-  }
-  if (disabledItemsFocusable) {
-    return true;
-  }
-  return !element.disabled && element.getAttribute('aria-disabled') !== 'true';
+
+// Menu auto-focus is not always keyboard-driven. On open we often move focus to the
+// active item programmatically so arrow-key navigation starts from the right place.
+function focusInitialItem(element, focusSource) {
+  focusWithVisible(element, focusSource);
 }
 
 /**
@@ -57,8 +69,8 @@ const MenuList = /*#__PURE__*/React.forwardRef(function MenuList(props, ref) {
     // private
     // eslint-disable-next-line react/prop-types
     actions,
-    autoFocus = false,
-    autoFocusItem = false,
+    autoFocus: autoFocusList = false,
+    autoFocusItem: autoFocusActiveItem = false,
     children,
     className,
     disabledItemsFocusable = false,
@@ -68,17 +80,85 @@ const MenuList = /*#__PURE__*/React.forwardRef(function MenuList(props, ref) {
     ...other
   } = props;
   const listRef = React.useRef(null);
+  const hasFocusedInitialTargetRef = React.useRef(false);
+  // Escape hatch for <Menu variant="menu"> (items have no selection state). When opened with
+  // mouse/pointer, the initial focused item should still receive DOM focus, but ButtonBase
+  // should suppress its focus-visible state for that one initial handoff.
+  const [suppressInitialFocusVisible, setSuppressInitialFocusVisible] = React.useState(false);
+  // Current anchored <Menu>s cannot receive a `openInteractionType` signal from a trigger
+  // the API only receives `open` and `anchorEl`. When <MenuList> is used in <Select>, the
+  // internal <SelectInput> is able to achieve this via `useSelectFocusSource`.
+  const focusSource = useSelectFocusSource();
   const textCriteriaRef = React.useRef({
     keys: [],
     repeating: true,
     previousKeyMatched: true,
     lastTime: null
   });
-  useEnhancedEffect(() => {
-    if (autoFocus) {
+  const getDefaultActiveItemId = React.useCallback(items => {
+    if (variant === 'selectedMenu') {
+      return items.find(item => item.selected && isItemFocusable(item))?.id ?? items.find(item => isItemFocusable(item))?.id ?? null;
+    }
+    return items.find(item => isItemFocusable(item))?.id ?? null;
+  }, [variant]);
+  const rovingContainer = useRovingTabIndexRoot({
+    activeItemId: undefined,
+    getDefaultActiveItemId,
+    orientation: 'vertical',
+    wrap: !disableListWrap
+  });
+  const {
+    activeItemId,
+    focusNext,
+    getActiveItem,
+    getContainerProps,
+    getItemMap
+  } = rovingContainer;
+  const focusInitialTarget = useEventCallback((force = false) => {
+    // `force` is used by the imperative action when `Menu` asks `MenuList` to restore its
+    // initial focus target after the popover finishes entering, even if this list already
+    // completed its normal one-time initial-focus path on an earlier render.
+    if (!listRef.current || !force && hasFocusedInitialTargetRef.current) {
+      return null;
+    }
+    if (autoFocusActiveItem) {
+      const activeItem = getActiveItem();
+      if (activeItem?.element) {
+        const hasSelectedItem = Array.from(getItemMap().values()).some(item => item.selected);
+        const shouldSuppressInitialFocusVisible = variant === 'menu' && hasSelectedItem && !activeItem.selected && focusSource == null;
+        setSuppressInitialFocusVisible(shouldSuppressInitialFocusVisible);
+        focusInitialItem(activeItem.element, focusSource);
+        hasFocusedInitialTargetRef.current = true;
+        return activeItem.element;
+      }
+      if (!autoFocusList) {
+        return null;
+      }
+
+      // Keep the list container focusable while waiting for items to register,
+      // or when there is no focusable item to move to.
+      setSuppressInitialFocusVisible(false);
       listRef.current.focus();
+      return listRef.current;
     }
-  }, [autoFocus]);
+    if (!autoFocusList) {
+      setSuppressInitialFocusVisible(false);
+      return null;
+    }
+    setSuppressInitialFocusVisible(false);
+    listRef.current.focus();
+    hasFocusedInitialTargetRef.current = true;
+    return listRef.current;
+  });
+  useEnhancedEffect(() => {
+    if (!autoFocusList && !autoFocusActiveItem) {
+      hasFocusedInitialTargetRef.current = false;
+      setSuppressInitialFocusVisible(false);
+      return undefined;
+    }
+    focusInitialTarget();
+    return undefined;
+  }, [activeItemId, autoFocusActiveItem, autoFocusList, focusInitialTarget]);
   React.useImperativeHandle(actions, () => ({
     adjustStyleForScrollbar: (containerElement, {
       direction
@@ -92,86 +172,35 @@ const MenuList = /*#__PURE__*/React.forwardRef(function MenuList(props, ref) {
         listRef.current.style.width = `calc(100% + ${scrollbarSize})`;
       }
       return listRef.current;
-    }
-  }), []);
-
-  /**
-   * the index of the item should receive focus
-   * in a `variant="selectedMenu"` it's the first `selected` item
-   * otherwise it's the very first item.
-   */
-  let activeItemIndex = -1;
-  // since we inject focus related props into children we have to do a lookahead
-  // to check if there is a `selected` item. We're looking for the last `selected`
-  // item and use the first valid item as a fallback
-  React.Children.forEach(children, (child, index) => {
-    if (! /*#__PURE__*/React.isValidElement(child)) {
-      if (activeItemIndex === index) {
-        activeItemIndex += 1;
-        if (activeItemIndex >= children.length) {
-          // there are no focusable items within the list.
-          activeItemIndex = -1;
-        }
-      }
-      return;
-    }
-    if (process.env.NODE_ENV !== 'production') {
-      if (isFragment(child)) {
-        console.error(["MUI: The Menu component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
-      }
-    }
-    if (!child.props.disabled) {
-      if (variant === 'selectedMenu' && child.props.selected) {
-        activeItemIndex = index;
-      } else if (activeItemIndex === -1) {
-        activeItemIndex = index;
+    },
+    focusInitialTarget: () => {
+      if (!listRef.current) {
+        return null;
       }
-    }
-    if (activeItemIndex === index && (child.props.disabled || child.props.muiSkipListHighlight || child.type.muiSkipListHighlight)) {
-      activeItemIndex += 1;
-      if (activeItemIndex >= children.length) {
-        // there are no focusable items within the list.
-        activeItemIndex = -1;
+      const currentFocus = getActiveElement(ownerDocument(listRef.current));
+      if (currentFocus && listRef.current.contains(currentFocus)) {
+        return currentFocus;
       }
+      return focusInitialTarget(true);
     }
-  });
-  const {
-    focusNext,
-    getContainerProps,
-    getItemProps
-  } = useRovingTabIndex({
-    focusableIndex: activeItemIndex,
-    orientation: 'vertical',
-    shouldWrap: !disableListWrap,
-    shouldFocus: element => shouldFocus(element, disabledItemsFocusable)
-  });
-  const rovingTabIndexContainerProps = getContainerProps();
-  const handleRef = useForkRef(listRef, rovingTabIndexContainerProps.ref, ref);
-  let focusableIndex = 0;
-  const items = React.Children.map(children, (child, index) => {
-    if (! /*#__PURE__*/React.isValidElement(child) || child.props.muiSkipListHighlight || child.type.muiSkipListHighlight) {
-      return child;
-    }
-    const rovingTabIndexItemProps = getItemProps(focusableIndex, child.ref);
-    const newChildProps = {
-      ref: rovingTabIndexItemProps.ref
-    };
-    if (child.props.tabIndex === undefined && variant === 'selectedMenu') {
-      newChildProps.tabIndex = rovingTabIndexItemProps.tabIndex;
+  }), [focusInitialTarget]);
+  const rovingContainerProps = getContainerProps();
+  const handleRef = useForkRef(listRef, rovingContainerProps.ref, ref);
+  const menuListContextValue = React.useMemo(() => ({
+    itemsFocusableWhenDisabled: disabledItemsFocusable,
+    suppressInitialFocusVisible,
+    variant
+  }), [disabledItemsFocusable, suppressInitialFocusVisible, variant]);
+  const handleKeyDown = useEventCallback(event => {
+    if (suppressInitialFocusVisible) {
+      setSuppressInitialFocusVisible(false);
     }
-    if (index === activeItemIndex && autoFocusItem) {
-      newChildProps.autoFocus = true;
-    }
-    focusableIndex += 1;
-    return /*#__PURE__*/React.cloneElement(child, newChildProps);
-  });
-  const handleKeyDown = event => {
     const isModifierKeyPressed = event.ctrlKey || event.metaKey || event.altKey;
     if (isModifierKeyPressed && onKeyDown) {
       onKeyDown(event);
       return;
     }
-    rovingTabIndexContainerProps.onKeyDown(event);
+    rovingContainerProps.onKeyDown(event);
     if (event.key.length === 1) {
       const criteria = textCriteriaRef.current;
       const lowerKey = event.key.toLowerCase();
@@ -190,7 +219,7 @@ const MenuList = /*#__PURE__*/React.forwardRef(function MenuList(props, ref) {
       criteria.keys.push(lowerKey);
       const currentFocus = getActiveElement(ownerDocument(listRef.current));
       const keepFocusOnCurrent = currentFocus && !criteria.repeating && textCriteriaMatches(currentFocus, criteria);
-      if (criteria.previousKeyMatched && (keepFocusOnCurrent || focusNext(element => shouldFocusWithTextCriteria(element, criteria, disabledItemsFocusable)) !== -1)) {
+      if (criteria.previousKeyMatched && (keepFocusOnCurrent || focusNext(item => isItemFocusableWithTextCriteria(item, criteria)) != null)) {
         event.preventDefault();
       } else {
         criteria.previousKeyMatched = false;
@@ -199,16 +228,22 @@ const MenuList = /*#__PURE__*/React.forwardRef(function MenuList(props, ref) {
     if (onKeyDown) {
       onKeyDown(event);
     }
-  };
+  });
   return /*#__PURE__*/_jsx(List, {
     role: "menu",
     ref: handleRef,
     className: className,
     onKeyDown: handleKeyDown,
-    onFocus: rovingTabIndexContainerProps.onFocus,
+    onFocus: rovingContainerProps.onFocus,
     tabIndex: -1,
     ...other,
-    children: items
+    children: /*#__PURE__*/_jsx(MenuListContext.Provider, {
+      value: menuListContextValue,
+      children: /*#__PURE__*/_jsx(RovingTabIndexContext.Provider, {
+        value: rovingContainer,
+        children: children
+      })
+    })
   });
 });
 process.env.NODE_ENV !== "production" ? MenuList.propTypes /* remove-proptypes */ = {

package/MenuList/MenuListContext.d.mts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+/**
+ * @ignore - internal component.
+ */
+export interface MenuListContextValue {
+  itemsFocusableWhenDisabled: boolean;
+  suppressInitialFocusVisible: boolean;
+  variant: 'menu' | 'selectedMenu';
+}
+export declare const MenuListContext: React.Context<MenuListContextValue | undefined>;
+export declare function useMenuListContext(): MenuListContextValue;

package/MenuList/MenuListContext.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+/**
+ * @ignore - internal component.
+ */
+export interface MenuListContextValue {
+  itemsFocusableWhenDisabled: boolean;
+  suppressInitialFocusVisible: boolean;
+  variant: 'menu' | 'selectedMenu';
+}
+export declare const MenuListContext: React.Context<MenuListContextValue | undefined>;
+export declare function useMenuListContext(): MenuListContextValue;

package/MenuList/MenuListContext.js

@@ -0,0 +1,25 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuListContext = void 0;
+exports.useMenuListContext = useMenuListContext;
+var React = _interopRequireWildcard(require("react"));
+/**
+ * @ignore - internal component.
+ */
+
+const MenuListContext = exports.MenuListContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== 'production') {
+  MenuListContext.displayName = 'MenuListContext';
+}
+function useMenuListContext() {
+  const context = React.useContext(MenuListContext);
+  if (context === undefined) {
+    throw new Error('MUI: MenuListContext is missing. MenuItems must be placed within Menu or MenuList.');
+  }
+  return context;
+}

package/MenuList/MenuListContext.mjs

@@ -0,0 +1,19 @@
+'use client';
+
+import * as React from 'react';
+
+/**
+ * @ignore - internal component.
+ */
+
+export const MenuListContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== 'production') {
+  MenuListContext.displayName = 'MenuListContext';
+}
+export function useMenuListContext() {
+  const context = React.useContext(MenuListContext);
+  if (context === undefined) {
+    throw new Error('MUI: MenuListContext is missing. MenuItems must be placed within Menu or MenuList.');
+  }
+  return context;
+}

package/Modal/Modal.d.mts

@@ -4,7 +4,7 @@ import { OverrideProps } from '@mui/types';
 import { SlotComponentProps } from "../utils/types.mjs";
 import { PortalProps } from "../Portal/index.mjs";
 import { Theme } from "../styles/index.mjs";
-import Backdrop, { BackdropProps } from "../Backdrop/index.mjs";
+import Backdrop from "../Backdrop/index.mjs";
 import { OverridableComponent } from "../OverridableComponent/index.mjs";
 import { ModalClasses } from "./modalClasses.mjs";
 export interface ModalComponentsPropsOverrides {}
@@ -23,23 +23,6 @@ export interface ModalSlots {
   backdrop?: React.ElementType | undefined;
 }
 export interface ModalOwnProps {
-  /**
-   * A backdrop component. This prop enables custom backdrop rendering.
-   * @deprecated Use `slots.backdrop` instead. While this prop currently works, it will be removed in the next major version.
-   * Use the `slots.backdrop` prop to make your application ready for the next version of Material UI.
-   * @default styled(Backdrop, {
-   *   name: 'MuiModal',
-   *   slot: 'Backdrop',
-   * })({
-   *   zIndex: -1,
-   * })
-   */
-  BackdropComponent?: React.ElementType<BackdropProps> | undefined;
-  /**
-   * Props applied to the [`Backdrop`](https://mui.com/material-ui/api/backdrop/) element.
-   * @deprecated Use `slotProps.backdrop` instead.
-   */
-  BackdropProps?: Partial<BackdropProps> | undefined;
   /**
    * A single child content element.
    */
@@ -57,29 +40,6 @@ export interface ModalOwnProps {
    * @default false
    */
   closeAfterTransition?: boolean | undefined;
-  /**
-   * The components used for each slot inside.
-   *
-   * @deprecated Use the `slots` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   *
-   * @default {}
-   */
-  components?: {
-    Root?: React.ElementType | undefined;
-    Backdrop?: React.ElementType | undefined;
-  } | undefined;
-  /**
-   * The extra props for the slot components.
-   * You can override the existing props or add new ones.
-   *
-   * @deprecated Use the `slotProps` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   *
-   * @default {}
-   */
-  componentsProps?: {
-    root?: SlotComponentProps<'div', ModalComponentsPropsOverrides, ModalOwnerState> | undefined;
-    backdrop?: SlotComponentProps<typeof Backdrop, ModalComponentsPropsOverrides, ModalOwnerState> | undefined;
-  } | undefined;
   /**
    * An HTML element or function that returns one.
    * The `container` will have the portal children appended to it.

package/Modal/Modal.d.ts

@@ -4,7 +4,7 @@ import { OverrideProps } from '@mui/types';
 import { SlotComponentProps } from "../utils/types.js";
 import { PortalProps } from "../Portal/index.js";
 import { Theme } from "../styles/index.js";
-import Backdrop, { BackdropProps } from "../Backdrop/index.js";
+import Backdrop from "../Backdrop/index.js";
 import { OverridableComponent } from "../OverridableComponent/index.js";
 import { ModalClasses } from "./modalClasses.js";
 export interface ModalComponentsPropsOverrides {}
@@ -23,23 +23,6 @@ export interface ModalSlots {
   backdrop?: React.ElementType | undefined;
 }
 export interface ModalOwnProps {
-  /**
-   * A backdrop component. This prop enables custom backdrop rendering.
-   * @deprecated Use `slots.backdrop` instead. While this prop currently works, it will be removed in the next major version.
-   * Use the `slots.backdrop` prop to make your application ready for the next version of Material UI.
-   * @default styled(Backdrop, {
-   *   name: 'MuiModal',
-   *   slot: 'Backdrop',
-   * })({
-   *   zIndex: -1,
-   * })
-   */
-  BackdropComponent?: React.ElementType<BackdropProps> | undefined;
-  /**
-   * Props applied to the [`Backdrop`](https://mui.com/material-ui/api/backdrop/) element.
-   * @deprecated Use `slotProps.backdrop` instead.
-   */
-  BackdropProps?: Partial<BackdropProps> | undefined;
   /**
    * A single child content element.
    */
@@ -57,29 +40,6 @@ export interface ModalOwnProps {
    * @default false
    */
   closeAfterTransition?: boolean | undefined;
-  /**
-   * The components used for each slot inside.
-   *
-   * @deprecated Use the `slots` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   *
-   * @default {}
-   */
-  components?: {
-    Root?: React.ElementType | undefined;
-    Backdrop?: React.ElementType | undefined;
-  } | undefined;
-  /**
-   * The extra props for the slot components.
-   * You can override the existing props or add new ones.
-   *
-   * @deprecated Use the `slotProps` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   *
-   * @default {}
-   */
-  componentsProps?: {
-    root?: SlotComponentProps<'div', ModalComponentsPropsOverrides, ModalOwnerState> | undefined;
-    backdrop?: SlotComponentProps<typeof Backdrop, ModalComponentsPropsOverrides, ModalOwnerState> | undefined;
-  } | undefined;
   /**
    * An HTML element or function that returns one.
    * The `container` will have the portal children appended to it.

package/Modal/Modal.js

@@ -88,16 +88,12 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     props: inProps
   });
   const {
-    BackdropComponent = ModalBackdrop,
-    BackdropProps,
     classes: classesProp,
     className,
     closeAfterTransition = false,
     children,
     container,
     component,
-    components = {},
-    componentsProps = {},
     disableAutoFocus = false,
     disableEnforceFocus = false,
     disablePortal = false,
@@ -158,15 +154,8 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     childProps.onExited = onExited;
   }
   const externalForwardedProps = {
-    slots: {
-      root: components.Root,
-      backdrop: components.Backdrop,
-      ...slots
-    },
-    slotProps: {
-      ...componentsProps,
-      ...slotProps
-    }
+    slots,
+    slotProps
   };
   const [RootSlot, rootProps] = (0, _useSlot.default)('root', {
     ref,
@@ -181,11 +170,9 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     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,
+    elementType: ModalBackdrop,
     externalForwardedProps,
     shouldForwardComponentProp: true,
-    additionalProps: BackdropProps,
     getSlotProps: otherHandlers => {
       return getBackdropProps({
         ...otherHandlers,
@@ -196,7 +183,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
         }
       });
     },
-    className: (0, _clsx.default)(BackdropProps?.className, classes?.backdrop),
+    className: classes?.backdrop,
     ownerState
   });
   if (!keepMounted && !open && (!hasTransition || exited)) {
@@ -208,7 +195,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     disablePortal: disablePortal,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(RootSlot, {
       ...rootProps,
-      children: [!hideBackdrop && BackdropComponent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(BackdropSlot, {
+      children: [!hideBackdrop ? /*#__PURE__*/(0, _jsxRuntime.jsx)(BackdropSlot, {
         ...backdropProps
       }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_TrapFocus.default, {
         disableEnforceFocus: disableEnforceFocus,
@@ -226,23 +213,6 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes /* remove-proptypes */ =
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
   // └─────────────────────────────────────────────────────────────────────┘
-  /**
-   * A backdrop component. This prop enables custom backdrop rendering.
-   * @deprecated Use `slots.backdrop` instead. While this prop currently works, it will be removed in the next major version.
-   * Use the `slots.backdrop` prop to make your application ready for the next version of Material UI.
-   * @default styled(Backdrop, {
-   *   name: 'MuiModal',
-   *   slot: 'Backdrop',
-   * })({
-   *   zIndex: -1,
-   * })
-   */
-  BackdropComponent: _propTypes.default.elementType,
-  /**
-   * Props applied to the [`Backdrop`](https://mui.com/material-ui/api/backdrop/) element.
-   * @deprecated Use `slotProps.backdrop` instead.
-   */
-  BackdropProps: _propTypes.default.object,
   /**
    * A single child content element.
    */
@@ -265,29 +235,6 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes /* remove-proptypes */ =
    * Either a string to use a HTML element or a component.
    */
   component: _propTypes.default.elementType,
-  /**
-   * The components used for each slot inside.
-   *
-   * @deprecated Use the `slots` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   *
-   * @default {}
-   */
-  components: _propTypes.default.shape({
-    Backdrop: _propTypes.default.elementType,
-    Root: _propTypes.default.elementType
-  }),
-  /**
-   * The extra props for the slot components.
-   * You can override the existing props or add new ones.
-   *
-   * @deprecated Use the `slotProps` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   *
-   * @default {}
-   */
-  componentsProps: _propTypes.default.shape({
-    backdrop: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
-    root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
-  }),
   /**
    * An HTML element or function that returns one.
    * The `container` will have the portal children appended to it.