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

package/GridLegacy/index.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  gridLegacyClasses: true
+};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _GridLegacy.default;
+  }
+});
+Object.defineProperty(exports, "gridLegacyClasses", {
+  enumerable: true,
+  get: function () {
+    return _gridLegacyClasses.default;
+  }
+});
+var _GridLegacy = _interopRequireDefault(require("./GridLegacy"));
+var _gridLegacyClasses = _interopRequireWildcard(require("./gridLegacyClasses"));
+Object.keys(_gridLegacyClasses).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _gridLegacyClasses[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _gridLegacyClasses[key];
+    }
+  });
+});

package/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/Menu/Menu.js

@@ -21,6 +21,7 @@ var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShoul
 var _zeroStyled = require("../zero-styled");
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _menuClasses = require("./menuClasses");
+var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _jsxRuntime = require("react/jsx-runtime");
 const RTL_ORIGIN = {
   vertical: 'top',
@@ -152,20 +153,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 = (0, _useSlotProps.default)({
     elementType: slots.root,
     externalSlotProps: slotProps.root,
     ownerState,
     className: [classes.root, className]
   });
-  const paperSlotProps = (0, _useSlotProps.default)({
-    elementType: PaperSlot,
-    externalSlotProps: paperExternalSlotProps,
-    ownerState,
-    className: classes.paper
+  const [PaperSlot, paperSlotProps] = (0, _useSlot.default)('paper', {
+    className: classes.paper,
+    elementType: MenuPaper,
+    externalForwardedProps,
+    shouldForwardComponentProp: true,
+    ownerState
+  });
+  const [ListSlot, listSlotProps] = (0, _useSlot.default)('list', {
+    className: (0, _clsx.default)(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__*/(0, _jsxRuntime.jsx)(MenuRoot, {
     onClose: onClose,
     anchorOrigin: {
@@ -174,31 +198,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__*/(0, _jsxRuntime.jsx)(MenuMenuList, {
-      onKeyDown: handleListKeyDown,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ListSlot, {
       actions: menuListActionsRef,
       autoFocus: autoFocus && (activeItemIndex === -1 || disableAutoFocusItem),
       autoFocusItem: autoFocusItem,
       variant: variant,
-      ...MenuListProps,
-      className: (0, _clsx.default)(classes.list, MenuListProps.className),
+      ...listSlotProps,
       children: children
     })
   });
@@ -243,6 +274,7 @@ process.env.NODE_ENV !== "production" ? Menu.propTypes /* remove-proptypes */ =
   disableAutoFocusItem: _propTypes.default.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.default.object,
@@ -271,6 +303,7 @@ process.env.NODE_ENV !== "production" ? Menu.propTypes /* remove-proptypes */ =
    */
   slotProps: _propTypes.default.shape({
     backdrop: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    list: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
     paper: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
     root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
     transition: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
@@ -281,6 +314,7 @@ process.env.NODE_ENV !== "production" ? Menu.propTypes /* remove-proptypes */ =
    */
   slots: _propTypes.default.shape({
     backdrop: _propTypes.default.elementType,
+    list: _propTypes.default.elementType,
     paper: _propTypes.default.elementType,
     root: _propTypes.default.elementType,
     transition: _propTypes.default.elementType
@@ -301,6 +335,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.default.object,

package/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/Modal/Modal.js

@@ -109,7 +109,6 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     disableScrollLock = false,
     hideBackdrop = false,
     keepMounted = false,
-    onBackdropClick,
     onClose,
     onTransitionEnter,
     onTransitionExited,
@@ -196,9 +195,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);
           }
@@ -362,11 +358,6 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes /* remove-proptypes */ =
    * @default false
    */
   keepMounted: _propTypes.default.bool,
-  /**
-   * Callback fired when the backdrop is clicked.
-   * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.
-   */
-  onBackdropClick: _propTypes.default.func,
   /**
    * Callback fired when the component requests to be closed.
    * The `reason` parameter can optionally be used to control the response to `onClose`.

package/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/PigmentGrid/PigmentGrid.js

@@ -40,13 +40,13 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', container && 'container', ...(0, _Grid2.unstable_generateDirectionClasses)(direction), ...(0, _Grid2.unstable_generateSizeClassNames)(gridSize), ...(container ? (0, _Grid2.unstable_generateSpacingClassNames)(spacing) : [])]
   };
-  return (0, _composeClasses.default)(slots, slot => (0, _generateUtilityClass.default)('MuiGrid2', slot), {});
+  return (0, _composeClasses.default)(slots, slot => (0, _generateUtilityClass.default)('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/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/PigmentGrid/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
-  grid2Classes: true
+  gridClasses: true
 };
 Object.defineProperty(exports, "default", {
   enumerable: true,
@@ -14,10 +14,10 @@ Object.defineProperty(exports, "default", {
     return _PigmentGrid.default;
   }
 });
-Object.defineProperty(exports, "grid2Classes", {
+Object.defineProperty(exports, "gridClasses", {
   enumerable: true,
   get: function () {
-    return _grid2Classes.default;
+    return _gridClasses.default;
   }
 });
 var _PigmentGrid = _interopRequireWildcard(require("./PigmentGrid"));
@@ -32,4 +32,4 @@ Object.keys(_PigmentGrid).forEach(function (key) {
     }
   });
 });
-var _grid2Classes = _interopRequireDefault(require("../Grid2/grid2Classes"));
+var _gridClasses = _interopRequireDefault(require("../Grid/gridClasses"));

package/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;