@mui/material 6.0.0-alpha.8 → 6.0.0-beta.0

package/ListItemButton/ListItemButton.js

@@ -5,7 +5,8 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import rootShouldForwardProp from '../styles/rootShouldForwardProp';
 import ButtonBase from '../ButtonBase';
 import useEnhancedEffect from '../utils/useEnhancedEffect';
@@ -13,7 +14,6 @@ import useForkRef from '../utils/useForkRef';
 import ListContext from '../List/ListContext';
 import listItemButtonClasses, { getListItemButtonUtilityClass } from './listItemButtonClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiListItemButton');
 export const overridesResolver = (props, styles) => {
   const {
     ownerState
@@ -122,7 +122,7 @@ const ListItemButtonRoot = styled(ButtonBase, {
   }]
 }));
 const ListItemButton = /*#__PURE__*/React.forwardRef(function ListItemButton(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiListItemButton'
   });

package/ListItemIcon/ListItemIcon.d.ts

@@ -24,10 +24,10 @@ export interface ListItemIconProps extends StandardProps<React.HTMLAttributes<HT
  *
  * Demos:
  *
- * - [Lists](https://mui.com/material-ui/react-list/)
+ * - [Lists](https://next.mui.com/material-ui/react-list/)
  *
  * API:
  *
- * - [ListItemIcon API](https://mui.com/material-ui/api/list-item-icon/)
+ * - [ListItemIcon API](https://next.mui.com/material-ui/api/list-item-icon/)
  */
-export default function ListItemIcon(props: ListItemIconProps): JSX.Element;
+export default function ListItemIcon(props: ListItemIconProps): React.JSX.Element;

package/ListItemIcon/ListItemIcon.js

@@ -4,11 +4,11 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import { getListItemIconUtilityClass } from './listItemIconClasses';
 import ListContext from '../List/ListContext';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiListItemIcon');
 const useUtilityClasses = ownerState => {
   const {
     alignItems,
@@ -49,7 +49,7 @@ const ListItemIconRoot = styled('div', {
  * A simple wrapper to apply `List` styles to an `Icon` or `SvgIcon`.
  */
 const ListItemIcon = /*#__PURE__*/React.forwardRef(function ListItemIcon(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiListItemIcon'
   });

package/ListItemSecondaryAction/ListItemSecondaryAction.d.ts

@@ -24,13 +24,17 @@ export interface ListItemSecondaryActionProps
  *
  * Demos:
  *
- * - [Lists](https://mui.com/material-ui/react-list/)
+ * - [Lists](https://next.mui.com/material-ui/react-list/)
  *
  * API:
  *
- * - [ListItemSecondaryAction API](https://mui.com/material-ui/api/list-item-secondary-action/)
+ * - [ListItemSecondaryAction API](https://next.mui.com/material-ui/api/list-item-secondary-action/)
+ *
+ * @deprecated Use the `secondaryAction` prop in the `ListItem` component instead. This component will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
  */
-declare const ListItemSecondaryAction: ((props: ListItemSecondaryActionProps) => JSX.Element) & {
+declare const ListItemSecondaryAction: ((
+  props: ListItemSecondaryActionProps,
+) => React.JSX.Element) & {
   muiName: string;
 };
 

package/ListItemSecondaryAction/ListItemSecondaryAction.js

@@ -4,11 +4,11 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import ListContext from '../List/ListContext';
 import { getListItemSecondaryActionClassesUtilityClass } from './listItemSecondaryActionClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiListItemSecondaryAction');
 const useUtilityClasses = ownerState => {
   const {
     disableGutters,
@@ -45,9 +45,11 @@ const ListItemSecondaryActionRoot = styled('div', {
 
 /**
  * Must be used as the last child of ListItem to function properly.
+ *
+ * @deprecated Use the `secondaryAction` prop in the `ListItem` component instead. This component will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
  */
 const ListItemSecondaryAction = /*#__PURE__*/React.forwardRef(function ListItemSecondaryAction(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiListItemSecondaryAction'
   });

package/ListItemText/ListItemText.d.ts

@@ -64,13 +64,15 @@ export interface ListItemTextProps<
  *
  * Demos:
  *
- * - [Lists](https://mui.com/material-ui/react-list/)
+ * - [Lists](https://next.mui.com/material-ui/react-list/)
  *
  * API:
  *
- * - [ListItemText API](https://mui.com/material-ui/api/list-item-text/)
+ * - [ListItemText API](https://next.mui.com/material-ui/api/list-item-text/)
  */
 export default function ListItemText<
   PrimaryTypographyComponent extends React.ElementType = 'span',
   SecondaryTypographyComponent extends React.ElementType = 'p',
->(props: ListItemTextProps<PrimaryTypographyComponent, SecondaryTypographyComponent>): JSX.Element;
+>(
+  props: ListItemTextProps<PrimaryTypographyComponent, SecondaryTypographyComponent>,
+): React.JSX.Element;

package/ListItemText/ListItemText.js

@@ -6,10 +6,10 @@ import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import Typography from '../Typography';
 import ListContext from '../List/ListContext';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import listItemTextClasses, { getListItemTextUtilityClass } from './listItemTextClasses';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiListItemText');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -61,7 +61,7 @@ const ListItemTextRoot = styled('div', {
   }]
 });
 const ListItemText = /*#__PURE__*/React.forwardRef(function ListItemText(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiListItemText'
   });

package/ListSubheader/ListSubheader.d.ts

@@ -51,11 +51,11 @@ export interface ListSubheaderTypeMap<
  *
  * Demos:
  *
- * - [Lists](https://mui.com/material-ui/react-list/)
+ * - [Lists](https://next.mui.com/material-ui/react-list/)
  *
  * API:
  *
- * - [ListSubheader API](https://mui.com/material-ui/api/list-subheader/)
+ * - [ListSubheader API](https://next.mui.com/material-ui/api/list-subheader/)
  */
 declare const ListSubheader: OverridableComponent<ListSubheaderTypeMap>;
 

package/ListSubheader/ListSubheader.js

@@ -4,11 +4,11 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import capitalize from '../utils/capitalize';
 import { getListSubheaderUtilityClass } from './listSubheaderClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiListSubheader');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -83,7 +83,7 @@ const ListSubheaderRoot = styled('li', {
   }]
 }));
 const ListSubheader = /*#__PURE__*/React.forwardRef(function ListSubheader(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiListSubheader'
   });

package/Menu/Menu.d.ts

@@ -86,12 +86,12 @@ export declare const MenuPaper: React.FC<PaperProps>;
  *
  * Demos:
  *
- * - [App Bar](https://mui.com/material-ui/react-app-bar/)
- * - [Menu](https://mui.com/material-ui/react-menu/)
+ * - [App Bar](https://next.mui.com/material-ui/react-app-bar/)
+ * - [Menu](https://next.mui.com/material-ui/react-menu/)
  *
  * API:
  *
- * - [Menu API](https://mui.com/material-ui/api/menu/)
- * - inherits [Popover API](https://mui.com/material-ui/api/popover/)
+ * - [Menu API](https://next.mui.com/material-ui/api/menu/)
+ * - inherits [Popover API](https://next.mui.com/material-ui/api/popover/)
  */
-export default function Menu(props: MenuProps): JSX.Element;
+export default function Menu(props: MenuProps): React.JSX.Element;

package/Menu/Menu.js

@@ -11,10 +11,10 @@ import { useRtl } from '@mui/system/RtlProvider';
 import MenuList from '../MenuList';
 import Popover, { PopoverPaper } from '../Popover';
 import rootShouldForwardProp from '../styles/rootShouldForwardProp';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import { getMenuUtilityClass } from './menuClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiMenu');
 const RTL_ORIGIN = {
   vertical: 'top',
   horizontal: 'right'
@@ -61,7 +61,7 @@ const MenuMenuList = styled(MenuList, {
   outline: 0
 });
 const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiMenu'
   });
@@ -259,9 +259,7 @@ process.env.NODE_ENV !== "production" ? Menu.propTypes /* remove-proptypes */ =
    */
   PopoverClasses: PropTypes.object,
   /**
-   * 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({
@@ -270,7 +268,6 @@ process.env.NODE_ENV !== "production" ? Menu.propTypes /* remove-proptypes */ =
   }),
   /**
    * The components used for each slot inside.
-   *
    * @default {}
    */
   slots: PropTypes.shape({

package/MenuItem/MenuItem.d.ts

@@ -60,12 +60,12 @@ export type MenuItemTypeMap<
  *
  * Demos:
  *
- * - [Menu](https://mui.com/material-ui/react-menu/)
+ * - [Menu](https://next.mui.com/material-ui/react-menu/)
  *
  * API:
  *
- * - [MenuItem API](https://mui.com/material-ui/api/menu-item/)
- * - inherits [ButtonBase API](https://mui.com/material-ui/api/button-base/)
+ * - [MenuItem API](https://next.mui.com/material-ui/api/menu-item/)
+ * - inherits [ButtonBase API](https://next.mui.com/material-ui/api/button-base/)
  */
 declare const MenuItem: ExtendButtonBase<MenuItemTypeMap>;
 

package/MenuItem/MenuItem.js

@@ -6,7 +6,8 @@ import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
 import rootShouldForwardProp from '../styles/rootShouldForwardProp';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import ListContext from '../List/ListContext';
 import ButtonBase from '../ButtonBase';
 import useEnhancedEffect from '../utils/useEnhancedEffect';
@@ -16,7 +17,6 @@ import { listItemIconClasses } from '../ListItemIcon';
 import { listItemTextClasses } from '../ListItemText';
 import menuItemClasses, { getMenuItemUtilityClass } from './menuItemClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiMenuItem');
 export const overridesResolver = (props, styles) => {
   const {
     ownerState
@@ -146,7 +146,7 @@ const MenuItemRoot = styled(ButtonBase, {
   }]
 }));
 const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiMenuItem'
   });

package/MenuList/MenuList.d.ts

@@ -48,18 +48,18 @@ export type MenuListClassKey = keyof NonNullable<MenuListTypeMap['props']['class
 
 /**
  * A permanently displayed menu following https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/.
- * It's exposed to help customization of the [`Menu`](https://mui.com/material-ui/api/menu/) component if you
+ * It's exposed to help customization of the [`Menu`](https://next.mui.com/material-ui/api/menu/) component if you
  * use it separately you need to move focus into the component manually. Once
  * the focus is placed inside the component it is fully keyboard accessible.
  *
  * Demos:
  *
- * - [Menu](https://mui.com/material-ui/react-menu/)
+ * - [Menu](https://next.mui.com/material-ui/react-menu/)
  *
  * API:
  *
- * - [MenuList API](https://mui.com/material-ui/api/menu-list/)
- * - inherits [List API](https://mui.com/material-ui/api/list/)
+ * - [MenuList API](https://next.mui.com/material-ui/api/menu-list/)
+ * - inherits [List API](https://next.mui.com/material-ui/api/list/)
  */
 declare const MenuList: ExtendList<MenuListTypeMap>;
 

package/MobileStepper/MobileStepper.d.ts

@@ -52,11 +52,11 @@ export interface MobileStepperProps extends StandardProps<PaperProps, 'children'
  *
  * Demos:
  *
- * - [Stepper](https://mui.com/material-ui/react-stepper/)
+ * - [Stepper](https://next.mui.com/material-ui/react-stepper/)
  *
  * API:
  *
- * - [MobileStepper API](https://mui.com/material-ui/api/mobile-stepper/)
- * - inherits [Paper API](https://mui.com/material-ui/api/paper/)
+ * - [MobileStepper API](https://next.mui.com/material-ui/api/mobile-stepper/)
+ * - inherits [Paper API](https://next.mui.com/material-ui/api/paper/)
  */
-export default function MobileStepper(props: MobileStepperProps): JSX.Element;
+export default function MobileStepper(props: MobileStepperProps): React.JSX.Element;

package/MobileStepper/MobileStepper.js

@@ -8,11 +8,11 @@ import composeClasses from '@mui/utils/composeClasses';
 import Paper from '../Paper';
 import capitalize from '../utils/capitalize';
 import LinearProgress from '../LinearProgress';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import slotShouldForwardProp from '../styles/slotShouldForwardProp';
 import { getMobileStepperUtilityClass } from './mobileStepperClasses';
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiMobileStepper');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -138,7 +138,7 @@ const MobileStepperProgress = styled(LinearProgress, {
   }]
 });
 const MobileStepper = /*#__PURE__*/React.forwardRef(function MobileStepper(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiMobileStepper'
   });

package/Modal/Modal.d.ts

@@ -50,7 +50,7 @@ export interface ModalOwnProps {
   /**
    * A single child content element.
    */
-  children: React.ReactElement;
+  children: React.ReactElement<unknown>;
   /**
    * Override or extend the styles applied to the component.
    */
@@ -67,8 +67,7 @@ export interface ModalOwnProps {
   /**
    * 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. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    *
    * @default {}
    */
@@ -80,8 +79,7 @@ export interface ModalOwnProps {
    * 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. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    *
    * @default {}
    */
@@ -213,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

@@ -5,16 +5,17 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import HTMLElementType from '@mui/utils/HTMLElementType';
 import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
-import { useSlotProps } from '@mui/base/utils';
 import { unstable_useModal as useModal } from '@mui/base/unstable_useModal';
 import composeClasses from '@mui/utils/composeClasses';
 import FocusTrap from '../Unstable_TrapFocus';
 import Portal from '../Portal';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import Backdrop from '../Backdrop';
 import { getModalUtilityClass } from './modalClasses';
+import useSlot from '../utils/useSlot';
+import { useForkRef } from '../utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiModal');
 const useUtilityClasses = ownerState => {
   const {
     open,
@@ -78,7 +79,7 @@ const ModalBackdrop = styled(Backdrop, {
  * This component shares many concepts with [react-overlays](https://react-bootstrap.github.io/react-overlays/#modals).
  */
 const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     name: 'MuiModal',
     props: inProps
   });
@@ -106,8 +107,8 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     onTransitionEnter,
     onTransitionExited,
     open,
-    slotProps,
-    slots,
+    slotProps = {},
+    slots = {},
     // eslint-disable-next-line react/prop-types
     theme,
     ...other
@@ -155,25 +156,31 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     childProps.onEnter = onEnter;
     childProps.onExited = onExited;
   }
-  const RootSlot = slots?.root ?? components.Root ?? ModalRoot;
-  const BackdropSlot = slots?.backdrop ?? components.Backdrop ?? BackdropComponent;
-  const rootSlotProps = slotProps?.root ?? componentsProps.root;
-  const backdropSlotProps = slotProps?.backdrop ?? componentsProps.backdrop;
-  const rootProps = useSlotProps({
-    elementType: RootSlot,
-    externalSlotProps: rootSlotProps,
-    externalForwardedProps: other,
+  const externalForwardedProps = {
+    slots: {
+      root: components.Root,
+      backdrop: components.Backdrop,
+      ...slots
+    },
+    slotProps: {
+      ...componentsProps,
+      ...slotProps
+    }
+  };
+  const [RootSlot, rootProps] = useSlot('root', {
+    elementType: ModalRoot,
+    externalForwardedProps,
     getSlotProps: getRootProps,
     additionalProps: {
       ref,
       as: component
     },
     ownerState,
-    className: clsx(className, rootSlotProps?.className, classes?.root, !ownerState.open && ownerState.exited && classes?.hidden)
+    className: clsx(className, classes?.root, !ownerState.open && ownerState.exited && classes?.hidden)
   });
-  const backdropProps = useSlotProps({
-    elementType: BackdropSlot,
-    externalSlotProps: backdropSlotProps,
+  const [BackdropSlot, backdropProps] = useSlot('backdrop', {
+    elementType: BackdropComponent,
+    externalForwardedProps,
     additionalProps: BackdropProps,
     getSlotProps: otherHandlers => {
       return getBackdropProps({
@@ -188,9 +195,10 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
         }
       });
     },
-    className: clsx(backdropSlotProps?.className, BackdropProps?.className, classes?.backdrop),
+    className: clsx(BackdropProps?.className, classes?.backdrop),
     ownerState
   });
+  const backdropRef = useForkRef(BackdropProps?.ref, backdropProps.ref);
   if (!keepMounted && !open && (!hasTransition || exited)) {
     return null;
   }
@@ -200,8 +208,10 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     disablePortal: disablePortal,
     children: /*#__PURE__*/_jsxs(RootSlot, {
       ...rootProps,
+      ...other,
       children: [!hideBackdrop && BackdropComponent ? /*#__PURE__*/_jsx(BackdropSlot, {
-        ...backdropProps
+        ...backdropProps,
+        ref: backdropRef
       }) : null, /*#__PURE__*/_jsx(FocusTrap, {
         disableEnforceFocus: disableEnforceFocus,
         disableAutoFocus: disableAutoFocus,
@@ -263,8 +273,7 @@ process.env.NODE_ENV !== "production" ? Modal.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. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    *
    * @default {}
    */
@@ -276,8 +285,7 @@ process.env.NODE_ENV !== "production" ? Modal.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. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    *
    * @default {}
    */

package/NativeSelect/NativeSelect.d.ts

@@ -57,13 +57,13 @@ 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) => JSX.Element) & { muiName: string };
+declare const NativeSelect: ((props: NativeSelectProps) => React.JSX.Element) & { muiName: string };
 
 export default NativeSelect;

package/NativeSelect/NativeSelectInput.js

@@ -42,10 +42,6 @@ export const StyledSelectSelect = styled('select')(({
     // Reset Chrome style
     borderRadius: 0
   },
-  // Remove IE11 arrow
-  '&::-ms-expand': {
-    display: 'none'
-  },
   [`&.${nativeSelectClasses.disabled}`]: {
     cursor: 'default'
   },

package/OutlinedInput/OutlinedInput.d.ts

@@ -28,13 +28,15 @@ 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) => JSX.Element) & { muiName: string };
+declare const OutlinedInput: ((props: OutlinedInputProps) => React.JSX.Element) & {
+  muiName: string;
+};
 
 export default OutlinedInput;

package/OutlinedInput/OutlinedInput.js

@@ -8,11 +8,11 @@ import NotchedOutline from './NotchedOutline';
 import useFormControl from '../FormControl/useFormControl';
 import formControlState from '../FormControl/formControlState';
 import rootShouldForwardProp from '../styles/rootShouldForwardProp';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import outlinedInputClasses, { getOutlinedInputUtilityClass } from './outlinedInputClasses';
 import InputBase, { rootOverridesResolver as inputBaseRootOverridesResolver, inputOverridesResolver as inputBaseInputOverridesResolver, InputBaseRoot, InputBaseInput } from '../InputBase/InputBase';
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiOutlinedInput');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -177,7 +177,7 @@ const OutlinedInputInput = styled(InputBaseInput, {
 }));
 const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inProps, ref) {
   var _React$Fragment;
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiOutlinedInput'
   });
@@ -268,8 +268,7 @@ process.env.NODE_ENV !== "production" ? OutlinedInput.propTypes /* remove-propty
   /**
    * 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. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    *
    * @default {}
    */