@mui/material 5.13.3 → 5.13.4

package/Autocomplete/autocompleteClasses.d.ts

@@ -7,6 +7,8 @@ export interface AutocompleteClasses {
     expanded: string;
     /** State class applied to the root element if focused. */
     focused: string;
+    /** Styles applied to the option elements if they are keyboard focused. */
+    focusVisible: string;
     /** Styles applied to the tag elements, e.g. the chips. */
     tag: string;
     /** Styles applied to the tag elements, e.g. the chips if `size="small"`. */

package/CHANGELOG.md

@@ -1,5 +1,50 @@
 # [Versions](https://mui.com/versions/)
 
+## 5.13.4
+
+<!-- generated comparing v5.13.3..master -->
+
+_Jun 5, 2023_
+
+A big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+### `@mui/material@5.13.4`
+
+- &#8203;<!-- 20 -->[Autocomplete][material] Add missing `focusVisible` class in AutocompleteClasses (#37502) @sai6855
+- &#8203;<!-- 04 -->[Menu][material] Fix MenuPaper class composition precedence (#37390) @DiegoAndai
+- &#8203;<!-- 03 -->[MenuList] Fix to allow conditional rendering for a menu item under ListSubheader (#36890) @danielplewes
+- &#8203;<!-- 02 -->[Stepper] Handle progress bar of mobile stepper when `steps` is one (#37079) @gitstart
+
+### `@mui/base@5.0.0-beta.4`
+
+- &#8203;<!-- 16 -->[Input][base] Fix calling slotProps event handlers (#37463) @sai6855
+
+### `@mui/joy@5.0.0-alpha.82`
+
+- &#8203;<!-- 19 -->[Avatar][joy] Fallback to `alt` when `src` or `srcSet` are not defined (#37469) @vishalthatipamula0219
+- &#8203;<!-- 15 -->[Card][joy] Improve usability of card family (#37474) @siriwatknp
+
+### Docs
+
+- &#8203;<!-- 18 -->[docs][base] useAutocomplete demos & docs (#37029) @mj12albert
+- &#8203;<!-- 17 -->[docs][base] Remove usage of `component` prop in docs (#37462) @sai6855
+- &#8203;<!-- 13 -->[docs] Fix docs redirections @oliviertassinari
+- &#8203;<!-- 12 -->[docs] Fix Fluent -> Fluent UI @oliviertassinari
+- &#8203;<!-- 11 -->[docs] Fix MUI Base -> Base UI @oliviertassinari
+- &#8203;<!-- 10 -->[docs] Add base-vite-tailwind example repo (#36994) @mj12albert
+- &#8203;<!-- 09 -->[docs] Fix search bar layout shift (#37460) @oliviertassinari
+- &#8203;<!-- 08 -->[docs] Tweak Material UI's "Showcase" page design (#37259) @danilo-leal
+- &#8203;<!-- 07 -->[docs] Tweak Material UI's "Template" page design (#37260) @danilo-leal
+- &#8203;<!-- 06 -->[docs] Fix "Language" page removal leftovers (#37408) @danilo-leal
+- &#8203;<!-- 05 -->[docs] Move contents of css-variables to sibling pages (#37411) @brijeshb42
+
+### Core
+
+- &#8203;<!-- 14 -->[core] Do not let Renovate handle `examples` packages updates (#37386) @ZeeshanTamboli
+- &#8203;<!-- 01 -->[website] Add header filters to the pricing table (#37455) @MBilalShafi
+
+All contributors of this release in alphabetical order: @brijeshb42, @danielplewes, @danilo-leal, @DiegoAndai, @gitstart, @MBilalShafi, @mj12albert, @oliviertassinari, @sai6855, @siriwatknp, @vishalthatipamula0219, @ZeeshanTamboli
+
 ## 5.13.3
 
 <!-- generated comparing v5.13.2..master -->

package/Menu/Menu.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { InternalStandardProps as StandardProps } from '..';
+import { PaperProps } from '../Paper';
 import { PopoverProps } from '../Popover';
 import { MenuListProps } from '../MenuList';
 import { Theme } from '../styles';
@@ -79,6 +80,8 @@ export interface MenuProps extends StandardProps<PopoverProps> {
   variant?: 'menu' | 'selectedMenu';
 }
 
+export declare const MenuPaper: React.FC<PaperProps>;
+
 /**
  *
  * Demos:

package/Menu/Menu.js

@@ -9,8 +9,7 @@ import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { HTMLElementType } from '@mui/utils';
 import MenuList from '../MenuList';
-import Paper from '../Paper';
-import Popover from '../Popover';
+import Popover, { PopoverPaper } from '../Popover';
 import styled, { rootShouldForwardProp } from '../styles/styled';
 import useTheme from '../styles/useTheme';
 import useThemeProps from '../styles/useThemeProps';
@@ -41,7 +40,7 @@ const MenuRoot = styled(Popover, {
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
 })({});
-const MenuPaper = styled(Paper, {
+export const MenuPaper = styled(PopoverPaper, {
   name: 'MuiMenu',
   slot: 'Paper',
   overridesResolver: (props, styles) => styles.paper
@@ -148,13 +147,16 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
       horizontal: isRtl ? 'right' : 'left'
     },
     transformOrigin: isRtl ? RTL_ORIGIN : LTR_ORIGIN,
-    PaperProps: _extends({
-      as: MenuPaper
-    }, PaperProps, {
-      classes: _extends({}, PaperProps.classes, {
-        root: classes.paper
+    slots: {
+      paper: MenuPaper
+    },
+    slotProps: {
+      paper: _extends({}, PaperProps, {
+        classes: _extends({}, PaperProps.classes, {
+          root: classes.paper
+        })
       })
-    }),
+    },
     className: classes.root,
     open: open,
     ref: ref,

package/MenuList/MenuList.js

@@ -180,6 +180,13 @@ const MenuList = /*#__PURE__*/React.forwardRef(function MenuList(props, ref) {
   // 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') {

package/MobileStepper/MobileStepper.js

@@ -126,6 +126,14 @@ const MobileStepper = /*#__PURE__*/React.forwardRef(function MobileStepper(inPro
     position,
     variant
   });
+  let value;
+  if (variant === 'progress') {
+    if (steps === 1) {
+      value = 100;
+    } else {
+      value = Math.ceil(activeStep / (steps - 1) * 100);
+    }
+  }
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsxs(MobileStepperRoot, _extends({
     square: true,
@@ -148,7 +156,7 @@ const MobileStepper = /*#__PURE__*/React.forwardRef(function MobileStepper(inPro
       ownerState: ownerState,
       className: classes.progress,
       variant: "determinate",
-      value: Math.ceil(activeStep / (steps - 1) * 100)
+      value: value
     }, LinearProgressProps)), nextButton]
   }));
 });

package/Popover/Popover.d.ts

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
+import { SlotComponentProps } from '@mui/base';
 import { InternalStandardProps as StandardProps } from '..';
-import { PaperProps } from '../Paper';
-import { ModalProps } from '../Modal';
+import Paper, { PaperProps } from '../Paper';
+import Modal, { ModalOwnerState, ModalProps } from '../Modal';
 import { Theme } from '../styles';
 import { TransitionProps } from '../transitions/transition';
 import { PopoverClasses } from './popoverClasses';
@@ -19,7 +20,8 @@ export interface PopoverPosition {
 
 export type PopoverReference = 'anchorEl' | 'anchorPosition' | 'none';
 
-export interface PopoverProps extends StandardProps<ModalProps, 'children'> {
+export interface PopoverProps
+  extends StandardProps<Omit<ModalProps, 'slots' | 'slotProps'>, 'children'> {
   /**
    * A ref for imperative actions.
    * It currently only supports updatePosition() action.
@@ -88,9 +90,32 @@ export interface PopoverProps extends StandardProps<ModalProps, 'children'> {
   open: boolean;
   /**
    * Props applied to the [`Paper`](/material-ui/api/paper/) element.
+   *
+   * This prop is an alias for `slotProps.paper` and will be overriden by it if both are used.
+   * @deprecated Use `slotProps.paper` instead.
+   *
    * @default {}
    */
   PaperProps?: Partial<PaperProps>;
+  /**
+   * The components used for each slot inside.
+   *
+   * @default {}
+   */
+  slots?: {
+    root?: React.ElementType;
+    paper?: React.ElementType;
+  };
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * @default {}
+   */
+  slotProps?: {
+    root?: SlotComponentProps<typeof Modal, {}, ModalOwnerState>;
+    paper?: SlotComponentProps<typeof Paper, {}, {}>;
+  };
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
@@ -140,6 +165,12 @@ export function getOffsetLeft(
   horizontal: number | 'center' | 'right' | 'left',
 ): number;
 
+type PopoverRootProps = NonNullable<PopoverProps['slotProps']>['root'];
+type PopoverPaperProps = NonNullable<PopoverProps['slotProps']>['paper'];
+
+export declare const PopoverRoot: React.FC<PopoverRootProps>;
+export declare const PopoverPaper: React.FC<PopoverPaperProps>;
+
 /**
  *
  * Demos:

package/Popover/Popover.js

@@ -1,11 +1,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["onEntering"],
-  _excluded2 = ["action", "anchorEl", "anchorOrigin", "anchorPosition", "anchorReference", "children", "className", "container", "elevation", "marginThreshold", "open", "PaperProps", "transformOrigin", "TransitionComponent", "transitionDuration", "TransitionProps"];
+  _excluded2 = ["action", "anchorEl", "anchorOrigin", "anchorPosition", "anchorReference", "children", "className", "container", "elevation", "marginThreshold", "open", "PaperProps", "slots", "slotProps", "transformOrigin", "TransitionComponent", "transitionDuration", "TransitionProps"],
+  _excluded3 = ["slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/base';
+import { unstable_composeClasses as composeClasses, useSlotProps, isHostComponent } from '@mui/base';
 import { chainPropTypes, integerPropType, elementTypeAcceptingRef, refType, HTMLElementType } from '@mui/utils';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
@@ -15,7 +16,7 @@ import ownerWindow from '../utils/ownerWindow';
 import useForkRef from '../utils/useForkRef';
 import Grow from '../Grow';
 import Modal from '../Modal';
-import Paper from '../Paper';
+import PaperBase from '../Paper';
 import { getPopoverUtilityClass } from './popoverClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 export function getOffsetTop(rect, vertical) {
@@ -56,12 +57,12 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getPopoverUtilityClass, classes);
 };
-const PopoverRoot = styled(Modal, {
+export const PopoverRoot = styled(Modal, {
   name: 'MuiPopover',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
 })({});
-const PopoverPaper = styled(Paper, {
+export const PopoverPaper = styled(PaperBase, {
   name: 'MuiPopover',
   slot: 'Paper',
   overridesResolver: (props, styles) => styles.paper
@@ -79,6 +80,7 @@ const PopoverPaper = styled(Paper, {
   outline: 0
 });
 const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
+  var _slotProps$paper, _slots$root, _slots$paper;
   const props = useThemeProps({
     props: inProps,
     name: 'MuiPopover'
@@ -98,7 +100,9 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
       elevation = 8,
       marginThreshold = 16,
       open,
-      PaperProps = {},
+      PaperProps: PaperPropsProp = {},
+      slots,
+      slotProps,
       transformOrigin = {
         vertical: 'top',
         horizontal: 'left'
@@ -111,14 +115,15 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     } = props,
     TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded),
     other = _objectWithoutPropertiesLoose(props, _excluded2);
+  const externalPaperSlotProps = (_slotProps$paper = slotProps == null ? void 0 : slotProps.paper) != null ? _slotProps$paper : PaperPropsProp;
   const paperRef = React.useRef();
-  const handlePaperRef = useForkRef(paperRef, PaperProps.ref);
+  const handlePaperRef = useForkRef(paperRef, externalPaperSlotProps.ref);
   const ownerState = _extends({}, props, {
     anchorOrigin,
     anchorReference,
     elevation,
     marginThreshold,
-    PaperProps,
+    externalPaperSlotProps,
     transformOrigin,
     TransitionComponent,
     transitionDuration: transitionDurationProp,
@@ -283,16 +288,46 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
   // If the anchorEl prop is provided, use its parent body element as the container
   // If neither are provided let the Modal take care of choosing the container
   const container = containerProp || (anchorEl ? ownerDocument(resolveAnchorEl(anchorEl)).body : undefined);
-  return /*#__PURE__*/_jsx(PopoverRoot, _extends({
-    BackdropProps: {
-      invisible: true
+  const RootSlot = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : PopoverRoot;
+  const PaperSlot = (_slots$paper = slots == null ? void 0 : slots.paper) != null ? _slots$paper : PopoverPaper;
+  const paperProps = useSlotProps({
+    elementType: PaperSlot,
+    externalSlotProps: _extends({}, externalPaperSlotProps, {
+      style: isPositioned ? externalPaperSlotProps.style : _extends({}, externalPaperSlotProps.style, {
+        opacity: 0
+      })
+    }),
+    additionalProps: {
+      elevation,
+      ref: handlePaperRef
     },
-    className: clsx(classes.root, className),
-    container: container,
-    open: open,
-    ref: ref,
-    ownerState: ownerState
-  }, other, {
+    ownerState,
+    className: clsx(classes.paper, externalPaperSlotProps == null ? void 0 : externalPaperSlotProps.className)
+  });
+  const _useSlotProps = useSlotProps({
+      elementType: RootSlot,
+      externalSlotProps: (slotProps == null ? void 0 : slotProps.root) || {},
+      externalForwardedProps: other,
+      additionalProps: {
+        ref,
+        slotProps: {
+          backdrop: {
+            invisible: true
+          }
+        },
+        container,
+        open
+      },
+      ownerState,
+      className: clsx(classes.root, className)
+    }),
+    {
+      slotProps: rootSlotPropsProp
+    } = _useSlotProps,
+    rootProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded3);
+  return /*#__PURE__*/_jsx(RootSlot, _extends({}, rootProps, !isHostComponent(RootSlot) && {
+    slotProps: rootSlotPropsProp
+  }, {
     children: /*#__PURE__*/_jsx(TransitionComponent, _extends({
       appear: true,
       in: open,
@@ -300,17 +335,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
       onExited: handleExited,
       timeout: transitionDuration
     }, TransitionProps, {
-      children: /*#__PURE__*/_jsx(PopoverPaper, _extends({
-        elevation: elevation
-      }, PaperProps, {
-        ref: handlePaperRef,
-        className: clsx(classes.paper, PaperProps.className)
-      }, isPositioned ? undefined : {
-        style: _extends({}, PaperProps.style, {
-          opacity: 0
-        })
-      }, {
-        ownerState: ownerState,
+      children: /*#__PURE__*/_jsx(PaperSlot, _extends({}, paperProps, {
         children: children
       }))
     }))
@@ -416,11 +441,34 @@ process.env.NODE_ENV !== "production" ? Popover.propTypes /* remove-proptypes */
   open: PropTypes.bool.isRequired,
   /**
    * Props applied to the [`Paper`](/material-ui/api/paper/) element.
+   *
+   * This prop is an alias for `slotProps.paper` and will be overriden by it if both are used.
+   * @deprecated Use `slotProps.paper` instead.
+   *
    * @default {}
    */
   PaperProps: PropTypes /* @typescript-to-proptypes-ignore */.shape({
     component: elementTypeAcceptingRef
   }),
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    paper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   *
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    paper: PropTypes.elementType,
+    root: PropTypes.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.13.3
+ * @mui/material v5.13.4
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/Menu/Menu.js

@@ -7,8 +7,7 @@ import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { HTMLElementType } from '@mui/utils';
 import MenuList from '../MenuList';
-import Paper from '../Paper';
-import Popover from '../Popover';
+import Popover, { PopoverPaper } from '../Popover';
 import styled, { rootShouldForwardProp } from '../styles/styled';
 import useTheme from '../styles/useTheme';
 import useThemeProps from '../styles/useThemeProps';
@@ -41,7 +40,7 @@ var MenuRoot = styled(Popover, {
     return styles.root;
   }
 })({});
-var MenuPaper = styled(Paper, {
+export var MenuPaper = styled(PopoverPaper, {
   name: 'MuiMenu',
   slot: 'Paper',
   overridesResolver: function overridesResolver(props, styles) {
@@ -156,13 +155,16 @@ var Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
       horizontal: isRtl ? 'right' : 'left'
     },
     transformOrigin: isRtl ? RTL_ORIGIN : LTR_ORIGIN,
-    PaperProps: _extends({
-      as: MenuPaper
-    }, PaperProps, {
-      classes: _extends({}, PaperProps.classes, {
-        root: classes.paper
+    slots: {
+      paper: MenuPaper
+    },
+    slotProps: {
+      paper: _extends({}, PaperProps, {
+        classes: _extends({}, PaperProps.classes, {
+          root: classes.paper
+        })
       })
-    }),
+    },
     className: classes.root,
     open: open,
     ref: ref,

package/legacy/MenuList/MenuList.js

@@ -182,6 +182,13 @@ var MenuList = /*#__PURE__*/React.forwardRef(function MenuList(props, ref) {
   // item and use the first valid item as a fallback
   React.Children.forEach(children, function (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') {

package/legacy/MobileStepper/MobileStepper.js

@@ -131,6 +131,14 @@ var MobileStepper = /*#__PURE__*/React.forwardRef(function MobileStepper(inProps
     position: position,
     variant: variant
   });
+  var value;
+  if (variant === 'progress') {
+    if (steps === 1) {
+      value = 100;
+    } else {
+      value = Math.ceil(activeStep / (steps - 1) * 100);
+    }
+  }
   var classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsxs(MobileStepperRoot, _extends({
     square: true,
@@ -155,7 +163,7 @@ var MobileStepper = /*#__PURE__*/React.forwardRef(function MobileStepper(inProps
       ownerState: ownerState,
       className: classes.progress,
       variant: "determinate",
-      value: Math.ceil(activeStep / (steps - 1) * 100)
+      value: value
     }, LinearProgressProps)), nextButton]
   }));
 });