@mui/material 7.0.0-alpha.1 → 7.0.0-beta.0

package/esm/InputBase/inputBaseClasses.d.ts

@@ -27,17 +27,26 @@ export interface InputBaseClasses {
   readOnly: string;
   /** Styles applied to the input element. */
   input: string;
-  /** Styles applied to the input element if `size="small"`. */
+  /** Styles applied to the input element if `size="small"`.
+   * @deprecated Combine the [.MuiInputBase-input](/material-ui/api/input-base/#inputbase-classes-input) and [.MuiInputBase-sizeSmall](/material-ui/api/input-base/#inputbase-classes-sizeSmall) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
   inputSizeSmall: string;
-  /** Styles applied to the input element if `multiline={true}`. */
+  /** Styles applied to the input element if `multiline={true}`.
+   * @deprecated Combine the [.MuiInputBase-input](/material-ui/api/input-base/#inputbase-classes-input) and [.MuiInputBase-multiline](/material-ui/api/input-base/#inputbase-classes-multiline) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
   inputMultiline: string;
-  /** Styles applied to the input element if `type="search"`. */
   inputTypeSearch: string;
-  /** Styles applied to the input element if `startAdornment` is provided. */
+  /** Styles applied to the input element if `startAdornment` is provided.
+   * @deprecated Combine the [.MuiInputBase-input](/material-ui/api/input-base/#inputbase-classes-input) and [.MuiInputBase-adornedStart](/material-ui/api/input-base/#inputbase-classes-adornedStart) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
   inputAdornedStart: string;
-  /** Styles applied to the input element if `endAdornment` is provided. */
+  /** Styles applied to the input element if `endAdornment` is provided.
+   * @deprecated Combine the [.MuiInputBase-input](/material-ui/api/input-base/#inputbase-classes-input) and [.MuiInputBase-adornedEnd](/material-ui/api/input-base/#inputbase-classes-adornedEnd) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
   inputAdornedEnd: string;
-  /** Styles applied to the input element if `hiddenLabel={true}`. */
+  /** Styles applied to the input element if `hiddenLabel={true}`.
+   * @deprecated Combine the [.MuiInputBase-input](/material-ui/api/input-base/#inputbase-classes-input) and [.MuiInputBase-hiddenLabel](/material-ui/api/input-base/#inputbase-classes-hiddenLabel) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
   inputHiddenLabel: string;
 }
 export type InputBaseClassKey = keyof InputBaseClasses;

package/esm/InputLabel/InputLabel.d.ts

@@ -44,9 +44,9 @@ export interface InputLabelOwnProps extends Pick<FormLabelProps, 'children'> {
   shrink?: boolean;
   /**
    * The size of the component.
-   * @default 'normal'
+   * @default 'medium'
    */
-  size?: OverridableStringUnion<'small' | 'normal', InputLabelPropsSizeOverrides>;
+  size?: OverridableStringUnion<'small' | 'medium', InputLabelPropsSizeOverrides>;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/esm/InputLabel/InputLabel.js

@@ -25,7 +25,7 @@ const useUtilityClasses = ownerState => {
     required
   } = ownerState;
   const slots = {
-    root: ['root', formControl && 'formControl', !disableAnimation && 'animated', shrink && 'shrink', size && size !== 'normal' && `size${capitalize(size)}`, variant],
+    root: ['root', formControl && 'formControl', !disableAnimation && 'animated', shrink && 'shrink', size && size !== 'medium' && `size${capitalize(size)}`, variant],
     asterisk: [required && 'asterisk']
   };
   const composedClasses = composeClasses(slots, getInputLabelUtilityClasses, classes);
@@ -268,9 +268,9 @@ process.env.NODE_ENV !== "production" ? InputLabel.propTypes /* remove-proptypes
   shrink: PropTypes.bool,
   /**
    * The size of the component.
-   * @default 'normal'
+   * @default 'medium'
    */
-  size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['normal', 'small']), PropTypes.string]),
+  size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.string]),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/esm/Menu/Menu.d.ts

@@ -4,10 +4,74 @@ import { InternalStandardProps as StandardProps } from "../index.js";
 import { PaperProps } from "../Paper/index.js";
 import { PopoverProps } from "../Popover/index.js";
 import { MenuListProps } from "../MenuList/index.js";
+import { ModalProps } from "../Modal/index.js";
+import { BackdropProps } from "../Backdrop/index.js";
 import { Theme } from "../styles/index.js";
 import { TransitionProps } from "../transitions/transition.js";
 import { MenuClasses } from "./menuClasses.js";
-export interface MenuProps extends StandardProps<PopoverProps> {
+import { CreateSlotsAndSlotProps, SlotComponentProps, SlotProps } from "../utils/types.js";
+export interface MenuRootSlotPropsOverrides {}
+export interface MenuPaperSlotPropsOverrides {}
+export interface MenuTransitionSlotPropsOverrides {}
+export interface MenuListSlotPropsOverrides {}
+export interface MenuBackdropSlotPropsOverrides {}
+export interface MenuSlots {
+  /**
+   * The component used for the popper.
+   * @default Modal
+   */
+  root: React.ElementType;
+  /**
+   * The component used for the paper.
+   * @default Paper
+   */
+  paper: React.ElementType;
+  /**
+   * The component used for the list.
+   * @default MenuList
+   */
+  list: 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 type MenuSlotsAndSlotProps = CreateSlotsAndSlotProps<MenuSlots, {
+  /**
+   * Props forwarded to the root slot.
+   * By default, the avaible props are based on the [Popover](https://mui.com/material-ui/api/popover/#props) component.
+   */
+  root: SlotProps<React.ElementType<ModalProps>, MenuRootSlotPropsOverrides, MenuOwnerState>;
+  /**
+   * 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<React.ElementType<PaperProps>, MenuPaperSlotPropsOverrides, MenuOwnerState>;
+  /**
+   * Props forwarded to the list slot.
+   * By default, the avaible props are based on the [MenuList](https://mui.com/material-ui/api/menu-list/#props) component.
+   */
+  list: SlotProps<React.ElementType<MenuListProps>, MenuListSlotPropsOverrides, MenuOwnerState>;
+  /**
+   * 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 & MenuTransitionSlotPropsOverrides, MenuOwnerState>;
+  /**
+   * 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>, MenuBackdropSlotPropsOverrides, MenuOwnerState>;
+}>;
+export interface MenuProps extends StandardProps<Omit<PopoverProps, 'slots' | 'slotProps'>>, MenuSlotsAndSlotProps {
   /**
    * An HTML element, or a function that returns one.
    * It's used to set the position of the menu.
@@ -39,6 +103,7 @@ export interface MenuProps extends StandardProps<PopoverProps> {
   disableAutoFocusItem?: boolean;
   /**
    * Props applied to the [`MenuList`](https://mui.com/material-ui/api/menu-list/) element.
+   * @deprecated use the `slotProps.list` 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 {}
    */
   MenuListProps?: Partial<MenuListProps>;
@@ -69,6 +134,7 @@ export interface MenuProps extends StandardProps<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;
@@ -78,6 +144,7 @@ export interface MenuProps extends StandardProps<PopoverProps> {
    */
   variant?: 'menu' | 'selectedMenu';
 }
+export interface MenuOwnerState extends Omit<MenuProps, 'slots' | 'slotProps'> {}
 export declare const MenuPaper: React.FC<PaperProps>;
 
 /**

package/esm/Menu/Menu.js

@@ -14,6 +14,7 @@ import rootShouldForwardProp from "../styles/rootShouldForwardProp.js";
 import { styled } from "../zero-styled/index.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import { getMenuUtilityClass } from "./menuClasses.js";
+import useSlot from "../utils/useSlot.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const RTL_ORIGIN = {
   vertical: 'top',
@@ -145,20 +146,43 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
       }
     }
   });
-  const PaperSlot = slots.paper ?? MenuPaper;
-  const paperExternalSlotProps = slotProps.paper ?? PaperProps;
+  const externalForwardedProps = {
+    slots,
+    slotProps: {
+      list: MenuListProps,
+      transition: TransitionProps,
+      paper: PaperProps,
+      ...slotProps
+    }
+  };
   const rootSlotProps = useSlotProps({
     elementType: slots.root,
     externalSlotProps: slotProps.root,
     ownerState,
     className: [classes.root, className]
   });
-  const paperSlotProps = useSlotProps({
-    elementType: PaperSlot,
-    externalSlotProps: paperExternalSlotProps,
-    ownerState,
-    className: classes.paper
+  const [PaperSlot, paperSlotProps] = useSlot('paper', {
+    className: classes.paper,
+    elementType: MenuPaper,
+    externalForwardedProps,
+    shouldForwardComponentProp: true,
+    ownerState
+  });
+  const [ListSlot, listSlotProps] = useSlot('list', {
+    className: clsx(classes.list, MenuListProps.className),
+    elementType: MenuMenuList,
+    shouldForwardComponentProp: true,
+    externalForwardedProps,
+    getSlotProps: handlers => ({
+      ...handlers,
+      onKeyDown: event => {
+        handleListKeyDown(event);
+        handlers.onKeyDown?.(event);
+      }
+    }),
+    ownerState
   });
+  const resolvedTransitionProps = typeof externalForwardedProps.slotProps.transition === 'function' ? externalForwardedProps.slotProps.transition(ownerState) : externalForwardedProps.slotProps.transition;
   return /*#__PURE__*/_jsx(MenuRoot, {
     onClose: onClose,
     anchorOrigin: {
@@ -167,31 +191,38 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
     },
     transformOrigin: isRtl ? RTL_ORIGIN : LTR_ORIGIN,
     slots: {
+      root: slots.root,
       paper: PaperSlot,
-      root: slots.root
+      backdrop: slots.backdrop,
+      ...(slots.transition && {
+        // TODO: pass `slots.transition` directly once `TransitionComponent` is removed from Popover
+        transition: slots.transition
+      })
     },
     slotProps: {
       root: rootSlotProps,
-      paper: paperSlotProps
+      paper: paperSlotProps,
+      backdrop: typeof slotProps.backdrop === 'function' ? slotProps.backdrop(ownerState) : slotProps.backdrop,
+      transition: {
+        ...resolvedTransitionProps,
+        onEntering: (...args) => {
+          handleEntering(...args);
+          resolvedTransitionProps?.onEntering?.(...args);
+        }
+      }
     },
     open: open,
     ref: ref,
     transitionDuration: transitionDuration,
-    TransitionProps: {
-      onEntering: handleEntering,
-      ...TransitionProps
-    },
     ownerState: ownerState,
     ...other,
     classes: PopoverClasses,
-    children: /*#__PURE__*/_jsx(MenuMenuList, {
-      onKeyDown: handleListKeyDown,
+    children: /*#__PURE__*/_jsx(ListSlot, {
       actions: menuListActionsRef,
       autoFocus: autoFocus && (activeItemIndex === -1 || disableAutoFocusItem),
       autoFocusItem: autoFocusItem,
       variant: variant,
-      ...MenuListProps,
-      className: clsx(classes.list, MenuListProps.className),
+      ...listSlotProps,
       children: children
     })
   });
@@ -236,6 +267,7 @@ process.env.NODE_ENV !== "production" ? Menu.propTypes /* remove-proptypes */ =
   disableAutoFocusItem: PropTypes.bool,
   /**
    * Props applied to the [`MenuList`](https://mui.com/material-ui/api/menu-list/) element.
+   * @deprecated use the `slotProps.list` 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 {}
    */
   MenuListProps: PropTypes.object,
@@ -264,6 +296,7 @@ process.env.NODE_ENV !== "production" ? Menu.propTypes /* remove-proptypes */ =
    */
   slotProps: PropTypes.shape({
     backdrop: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    list: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     paper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     transition: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
@@ -274,6 +307,7 @@ process.env.NODE_ENV !== "production" ? Menu.propTypes /* remove-proptypes */ =
    */
   slots: PropTypes.shape({
     backdrop: PropTypes.elementType,
+    list: PropTypes.elementType,
     paper: PropTypes.elementType,
     root: PropTypes.elementType,
     transition: PropTypes.elementType
@@ -294,6 +328,7 @@ process.env.NODE_ENV !== "production" ? Menu.propTypes /* remove-proptypes */ =
   /**
    * Props applied to the transition element.
    * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
+   * @deprecated use the `slotProps.transition` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    * @default {}
    */
   TransitionProps: PropTypes.object,

package/esm/Modal/Modal.d.ts

@@ -145,11 +145,6 @@ export interface ModalOwnProps {
    * @default false
    */
   keepMounted?: boolean;
-  /**
-   * Callback fired when the backdrop is clicked.
-   * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.
-   */
-  onBackdropClick?: React.ReactEventHandler<{}>;
   /**
    * Callback fired when the component requests to be closed.
    * The `reason` parameter can optionally be used to control the response to `onClose`.

package/esm/Modal/Modal.js

@@ -102,7 +102,6 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     disableScrollLock = false,
     hideBackdrop = false,
     keepMounted = false,
-    onBackdropClick,
     onClose,
     onTransitionEnter,
     onTransitionExited,
@@ -189,9 +188,6 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
       return getBackdropProps({
         ...otherHandlers,
         onClick: event => {
-          if (onBackdropClick) {
-            onBackdropClick(event);
-          }
           if (otherHandlers?.onClick) {
             otherHandlers.onClick(event);
           }
@@ -355,11 +351,6 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes /* remove-proptypes */ =
    * @default false
    */
   keepMounted: PropTypes.bool,
-  /**
-   * Callback fired when the backdrop is clicked.
-   * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.
-   */
-  onBackdropClick: PropTypes.func,
   /**
    * Callback fired when the component requests to be closed.
    * The `reason` parameter can optionally be used to control the response to `onClose`.

package/esm/PigmentGrid/PigmentGrid.d.ts

@@ -73,7 +73,7 @@ export type GridProps<RootComponent extends React.ElementType = GridTypeMap['def
  *
  * Demos:
  *
- * - [Grid version 2](https://next.mui.com/material-ui/react-grid2/)
+ * - [Grid](https://next.mui.com/material-ui/react-grid/)
  *
  * API:
  *

package/esm/PigmentGrid/PigmentGrid.js

@@ -31,13 +31,13 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', container && 'container', ...generateDirectionClasses(direction), ...generateSizeClassNames(gridSize), ...(container ? generateSpacingClassNames(spacing) : [])]
   };
-  return composeClasses(slots, slot => generateUtilityClass('MuiGrid2', slot), {});
+  return composeClasses(slots, slot => generateUtilityClass('MuiGrid', slot), {});
 };
 /**
  *
  * Demos:
  *
- * - [Grid version 2](https://next.mui.com/material-ui/react-grid2/)
+ * - [Grid](https://next.mui.com/material-ui/react-grid/)
  *
  * API:
  *

package/esm/PigmentGrid/index.d.ts

@@ -1,3 +1,3 @@
 export { default } from "./PigmentGrid.js";
 export * from "./PigmentGrid.js";
-export { default as grid2Classes } from "../Grid2/grid2Classes.js";
+export { default as gridClasses } from "../Grid/gridClasses.js";

package/esm/PigmentGrid/index.js

@@ -1,3 +1,3 @@
 export { default } from "./PigmentGrid.js";
 export * from "./PigmentGrid.js";
-export { default as grid2Classes } from "../Grid2/grid2Classes.js";
+export { default as gridClasses } from "../Grid/gridClasses.js";

package/esm/Popover/Popover.d.ts

@@ -51,7 +51,7 @@ export type PopoverSlotsAndSlotProps = CreateSlotsAndSlotProps<PopoverSlots, {
    */
   transition: SlotComponentProps<
   // use SlotComponentProps because transition slot does not support `component` and `sx` prop
-  React.ElementType<TransitionProps>, PopoverTransitionSlotPropsOverrides, PopoverOwnerState>;
+  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.

package/esm/Rating/Rating.d.ts

@@ -4,11 +4,60 @@ import { OverridableStringUnion } from '@mui/types';
 import { Theme } from "../index.js";
 import { RatingClasses } from "./ratingClasses.js";
 import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.js";
+import { CreateSlotsAndSlotProps, SlotProps } from "../utils/types.js";
 export interface IconContainerProps extends React.HTMLAttributes<HTMLSpanElement> {
   value: number;
 }
 export interface RatingPropsSizeOverrides {}
-export interface RatingOwnProps {
+export interface RatingRootSlotPropsOverrides {}
+export interface RatingLabelSlotPropsOverrides {}
+export interface RatingIconSlotPropsOverrides {}
+export interface RatingDecimalSlotPropsOverrides {}
+export interface RatingSlots {
+  /**
+   * The component used for the root slot.
+   * @default 'span'
+   */
+  root: React.ElementType;
+  /**
+   * The component used for the label slot.
+   * @default 'label'
+   */
+  label: React.ElementType;
+  /**
+   * The component used for the icon slot.
+   * @default 'span'
+   */
+  icon: React.ElementType;
+  /**
+   * The component used fo r the decimal slot.
+   * @default 'span'
+   */
+  decimal: React.ElementType;
+}
+export type RatingSlotsAndSlotProps = CreateSlotsAndSlotProps<RatingSlots, {
+  /**
+   * Props forwarded to the root slot.
+   * By default, the avaible props are based on the span element.
+   */
+  root: SlotProps<'span', RatingRootSlotPropsOverrides, RatingOwnerState>;
+  /**
+   * Props forwarded to the label slot.
+   * By default, the avaible props are based on the label element.
+   */
+  label: SlotProps<'label', RatingLabelSlotPropsOverrides, RatingOwnerState>;
+  /**
+   * Props forwarded to the icon slot.
+   * By default, the avaible props are based on the span element.
+   */
+  icon: SlotProps<'span', RatingIconSlotPropsOverrides, RatingOwnerState>;
+  /**
+   * Props forwarded to the decimal slot.
+   * By default, the avaible props are based on the span element.
+   */
+  decimal: SlotProps<'span', RatingDecimalSlotPropsOverrides, RatingOwnerState>;
+}>;
+export interface RatingOwnProps extends RatingSlotsAndSlotProps {
   /**
    * Override or extend the styles applied to the component.
    */
@@ -57,6 +106,7 @@ export interface RatingOwnProps {
   icon?: React.ReactNode;
   /**
    * The component containing the icon.
+   * @deprecated Use `slotProps.icon.component` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    * @default function IconContainer(props) {
    *   const { value, ...other } = props;
    *   return <span {...other} />;
@@ -110,6 +160,7 @@ export interface RatingOwnProps {
    */
   value?: number | null;
 }
+export interface RatingOwnerState extends Omit<RatingProps, 'slots' | 'slotProps'> {}
 export type RatingTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'span'> = {
   props: AdditionalProps & RatingOwnProps;
   defaultComponent: RootComponent;