@mui/material 5.14.1 → 5.14.2

package/Button/Button.js

@@ -307,7 +307,7 @@ process.env.NODE_ENV !== "production" ? Button.propTypes /* remove-proptypes */
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
-  component: PropTypes /* @typescript-to-proptypes-ignore */.elementType,
+  component: PropTypes.elementType,
   /**
    * If `true`, the component is disabled.
    * @default false

package/CHANGELOG.md

@@ -1,5 +1,66 @@
 # [Versions](https://mui.com/versions/)
 
+## 5.14.2
+
+<!-- generated comparing v5.14.1..master -->
+
+_Jul 25, 2023_
+
+A big thanks to the 23 contributors who made this release possible.
+
+### @mui/material@5.14.2
+
+- &#8203;<!-- 39 -->Revert "[core] Adds `component` prop to `OverrideProps` type (#35924)" (#38150) @michaldudak
+- &#8203;<!-- 32 -->[Chip][material] Fix base cursor style to be "auto" not "default" (#38076) @DiegoAndai
+- &#8203;<!-- 12 -->[Tabs] Refactor IntersectionObserver logic (#38133) @ZeeshanTamboli
+- &#8203;<!-- 11 -->[Tabs] Fix and improve visibility of tab scroll buttons using the IntersectionObserver API (#36071) @SaidMarar
+
+### @mui/joy@5.0.0-alpha.89
+
+- &#8203;<!-- 15 -->[Joy] Replace leftover `Joy-` prefix with `Mui-` (#38086) @siriwatknp
+- &#8203;<!-- 14 -->[Skeleton][joy] Fix WebkitMaskImage CSS property (#38077) @Bestwebdesign
+- &#8203;<!-- 13 -->[Link][Joy UI] Fix font inherit (#38124) @oliviertassinari
+
+### Docs
+
+- &#8203;<!-- 37 -->[docs] Add listbox placement demo for Select (#38130) @sai6855
+- &#8203;<!-- 36 -->[docs][base] Add Tailwind CSS & plain CSS demo on the Tabs page (#37910) @mnajdova
+- &#8203;<!-- 35 -->[docs][base] Add Tailwind CSS & plain CSS demos on the Textarea page (#37943) @zanivan
+- &#8203;<!-- 29 -->[docs] Fix Joy UI menu example (#38140) @harikrishnanp
+- &#8203;<!-- 28 -->[docs] Remove translations section from contributing guide (#38125) @nikohoffren
+- &#8203;<!-- 27 -->[docs] Fix Base UI Button Tailwind CSS padding @oliviertassinari
+- &#8203;<!-- 26 -->[docs] Mention in hompage hero that Core is free (#38075) @mbrookes
+- &#8203;<!-- 25 -->[docs] Fix a typo in notifications.json (#38078) @mbrookes
+- &#8203;<!-- 24 -->[docs] Add Tailwind CSS & plain CSS demo on the table pagination page (#37937) @mnajdova
+- &#8203;<!-- 23 -->[docs] Implement the new API display design (#37405) @alexfauquette
+- &#8203;<!-- 22 -->[docs] Update migration installation code blocks (#38028) @danilo-leal
+- &#8203;<!-- 21 -->[docs][joy] Revise the Joy UI Link page (#37829) @danilo-leal
+- &#8203;<!-- 20 -->[docs][joy] Add playground for Card component (#37820) @Studio384
+- &#8203;<!-- 19 -->[docs][joy] Add adjustments to the color inversion page (#37143) @danilo-leal
+- &#8203;<!-- 18 -->[docs][material] Improve documentation about adding custom colors (#37743) @DiegoAndai
+- &#8203;<!-- 17 -->[examples] Fix Joy UI Next.js App Router font loading (#38095) @IgnacioUtrilla
+- &#8203;<!-- 16 -->[examples] Fix material-next-app-router Font Usage with next/font (#38026) @onderonur
+
+### Core
+
+- &#8203;<!-- 34 -->[blog] Update Discord invite link in Toolpad beta announcement (#38143) @samuelsycamore
+- &#8203;<!-- 33 -->[blog] Update discord server link (#38131) @prakhargupta1
+- &#8203;<!-- 31 -->[core] Fix rsc-builder removing the first line (#38134) @michaldudak
+- &#8203;<!-- 30 -->[core] Remove the deprecation rule in tslint (#38087) @michaldudak
+- &#8203;<!-- 09 -->[website] Mobile navigation: Toolpad to Beta (#38146) @bharatkashyap
+- &#8203;<!-- 08 -->[website] Fix typo on pricing page @oliviertassinari
+- &#8203;<!-- 07 -->[website] Fix a few regression (#38050) @oliviertassinari
+- &#8203;<!-- 06 -->[website] Update Demo footers on MUI X landing page (#38027) @richbustos
+- &#8203;<!-- 05 -->[website] Fix 301 redirection to base index page @oliviertassinari
+- &#8203;<!-- 04 -->[website] Fix Cell selection feature name (#38029) @oliviertassinari
+- &#8203;<!-- 03 -->[website] Improve button look (#38052) @oliviertassinari
+- &#8203;<!-- 02 -->[website] Link new core page to new Base UI landing page (#38030) @mj12albert
+- &#8203;<!-- 01 -->[website] Polish pricing page (#37975) @oliviertassinari
+- &#8203;<!-- 10 -->[test] Fail the CI when new unexpected files are created (#38039) @oliviertassinari
+- &#8203;<!-- 09 -->[test] Fix linting error by matching main component demo name to filename (#38122) @ZeeshanTamboli
+
+All contributors of this release in alphabetical order: @alexfauquette, @Bestwebdesign, @bharatkashyap, @danilo-leal, @DiegoAndai, @harikrishnanp, @IgnacioUtrilla, @mbrookes, @michaldudak, @mj12albert, @mnajdova, @nikohoffren, @oliviertassinari, @onderonur, @prakhargupta1, @richbustos, @sai6855, @SaidMarar, @samuelsycamore, @siriwatknp, @Studio384, @zanivan, @ZeeshanTamboli
+
 ## 5.14.1
 
 <!-- generated comparing v5.14.0..master -->

package/Card/Card.d.ts

@@ -3,7 +3,7 @@ import { SxProps } from '@mui/system';
 import { DistributiveOmit } from '@mui/types';
 import { OverridableComponent, OverrideProps } from '@mui/material/OverridableComponent';
 import { Theme } from '..';
-import { PaperOwnProps } from '../Paper';
+import { PaperProps } from '../Paper';
 import { CardClasses } from './cardClasses';
 
 // TODO: v6 remove this interface, it is not used
@@ -11,7 +11,7 @@ export interface CardPropsColorOverrides {}
 
 export interface CardTypeMap<P = {}, D extends React.ElementType = 'div'> {
   props: P &
-    DistributiveOmit<PaperOwnProps, 'classes'> & {
+    DistributiveOmit<PaperProps, 'classes'> & {
       /**
        * Override or extend the styles applied to the component.
        */

package/Chip/Chip.js

@@ -93,8 +93,6 @@ const ChipRoot = styled('div', {
     borderRadius: 32 / 2,
     whiteSpace: 'nowrap',
     transition: theme.transitions.create(['background-color', 'box-shadow']),
-    // label will inherit this from root, then `clickable` class overrides this for both
-    cursor: 'default',
     // We disable the focus ring for mouse, touch and keyboard users.
     outline: 0,
     textDecoration: 'none',

package/Dialog/Dialog.d.ts

@@ -72,7 +72,7 @@ export interface DialogProps extends StandardProps<ModalProps, 'children'> {
    * Props applied to the [`Paper`](/material-ui/api/paper/) element.
    * @default {}
    */
-  PaperProps?: Partial<PaperProps<React.ElementType>>;
+  PaperProps?: Partial<PaperProps>;
   /**
    * Determine the container for scrolling the dialog.
    * @default 'paper'

package/Drawer/Drawer.d.ts

@@ -46,7 +46,7 @@ export interface DrawerProps extends StandardProps<ModalProps, 'open' | 'childre
    * Props applied to the [`Paper`](/material-ui/api/paper/) element.
    * @default {}
    */
-  PaperProps?: Partial<PaperProps<React.ElementType>>;
+  PaperProps?: Partial<PaperProps>;
   /**
    * Props applied to the [`Slide`](/material-ui/api/slide/) element.
    */

package/Fab/Fab.js

@@ -186,7 +186,7 @@ process.env.NODE_ENV !== "production" ? Fab.propTypes /* remove-proptypes */ = {
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
-  component: PropTypes /* @typescript-to-proptypes-ignore */.elementType,
+  component: PropTypes.elementType,
   /**
    * If `true`, the component is disabled.
    * @default false

package/Link/Link.d.ts

@@ -3,12 +3,12 @@ import { DistributiveOmit } from '@mui/types';
 import { SxProps } from '@mui/system';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { Theme } from '../styles';
-import { TypographyOwnProps } from '../Typography';
+import { TypographyProps } from '../Typography';
 import { LinkClasses } from './linkClasses';
 
 export interface LinkTypeMap<P = {}, D extends React.ElementType = 'a'> {
   props: P &
-    LinkBaseProps & {
+    DistributiveOmit<LinkBaseProps, 'classes'> & {
       /**
        * The content of the component.
        */
@@ -21,7 +21,7 @@ export interface LinkTypeMap<P = {}, D extends React.ElementType = 'a'> {
        * The color of the link.
        * @default 'primary'
        */
-      color?: TypographyOwnProps['color'];
+      color?: TypographyProps['color'];
       /**
        * The system prop that allows defining system overrides as well as additional CSS styles.
        */
@@ -29,7 +29,7 @@ export interface LinkTypeMap<P = {}, D extends React.ElementType = 'a'> {
       /**
        * `classes` prop applied to the [`Typography`](/material-ui/api/typography/) element.
        */
-      TypographyClasses?: TypographyOwnProps['classes'];
+      TypographyClasses?: TypographyProps['classes'];
       /**
        * Controls when the link should have an underline.
        * @default 'always'
@@ -39,7 +39,7 @@ export interface LinkTypeMap<P = {}, D extends React.ElementType = 'a'> {
        * Applies the theme typography styles.
        * @default 'inherit'
        */
-      variant?: TypographyOwnProps['variant'];
+      variant?: TypographyProps['variant'];
     };
   defaultComponent: D;
 }
@@ -58,10 +58,8 @@ export interface LinkTypeMap<P = {}, D extends React.ElementType = 'a'> {
  */
 declare const Link: OverridableComponent<LinkTypeMap>;
 
-export type LinkBaseProps = DistributiveOmit<
-  TypographyOwnProps,
-  'children' | 'color' | 'variant' | 'classes'
->;
+export type LinkBaseProps = Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'color'> &
+  DistributiveOmit<TypographyProps, 'children' | 'component' | 'color' | 'ref' | 'variant'>;
 
 export type LinkProps<
   D extends React.ElementType = LinkTypeMap['defaultComponent'],

package/ListItem/ListItem.js

@@ -314,7 +314,7 @@ process.env.NODE_ENV !== "production" ? ListItem.propTypes /* remove-proptypes *
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
-  component: PropTypes /* @typescript-to-proptypes-ignore */.elementType,
+  component: PropTypes.elementType,
   /**
    * The components used for each slot inside.
    *

package/ListItemButton/ListItemButton.js

@@ -193,7 +193,7 @@ process.env.NODE_ENV !== "production" ? ListItemButton.propTypes /* remove-propt
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
-  component: PropTypes /* @typescript-to-proptypes-ignore */.elementType,
+  component: PropTypes.elementType,
   /**
    * If `true`, compact vertical padding designed for keyboard and mouse input is used.
    * The prop defaults to the value inherited from the parent List component.

package/MenuItem/MenuItem.js

@@ -209,7 +209,7 @@ process.env.NODE_ENV !== "production" ? MenuItem.propTypes /* remove-proptypes *
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
-  component: PropTypes /* @typescript-to-proptypes-ignore */.elementType,
+  component: PropTypes.elementType,
   /**
    * If `true`, compact vertical padding designed for keyboard and mouse input is used.
    * The prop defaults to the value inherited from the parent Menu component.

package/OverridableComponent.d.ts

@@ -34,13 +34,6 @@ export type OverrideProps<
 > = (
   & BaseProps<M>
   & DistributiveOmit<React.ComponentPropsWithRef<C>, keyof BaseProps<M>>
-  & {
-      /**
-       * The component used for the root node.
-       * Either a string to use a HTML element or a component.
-       */
-      component?: C
-    }
 );
 
 /**

package/Paper/Paper.d.ts

@@ -7,39 +7,37 @@ import { PaperClasses } from './paperClasses';
 
 export interface PaperPropsVariantOverrides {}
 
-export interface PaperOwnProps {
-  /**
-   * The content of the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes?: Partial<PaperClasses>;
-  /**
-   * Shadow depth, corresponds to `dp` in the spec.
-   * It accepts values between 0 and 24 inclusive.
-   * @default 1
-   */
-  elevation?: number;
-  /**
-   * If `true`, rounded corners are disabled.
-   * @default false
-   */
-  square?: boolean;
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx?: SxProps<Theme>;
-  /**
-   * The variant to use.
-   * @default 'elevation'
-   */
-  variant?: OverridableStringUnion<'elevation' | 'outlined', PaperPropsVariantOverrides>;
-}
-
 export interface PaperTypeMap<P = {}, D extends React.ElementType = 'div'> {
-  props: P & PaperOwnProps;
+  props: P & {
+    /**
+     * The content of the component.
+     */
+    children?: React.ReactNode;
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes?: Partial<PaperClasses>;
+    /**
+     * Shadow depth, corresponds to `dp` in the spec.
+     * It accepts values between 0 and 24 inclusive.
+     * @default 1
+     */
+    elevation?: number;
+    /**
+     * If `true`, rounded corners are disabled.
+     * @default false
+     */
+    square?: boolean;
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps<Theme>;
+    /**
+     * The variant to use.
+     * @default 'elevation'
+     */
+    variant?: OverridableStringUnion<'elevation' | 'outlined', PaperPropsVariantOverrides>;
+  };
   defaultComponent: D;
 }
 

package/Paper/index.d.ts

@@ -1,5 +1,5 @@
 export { default } from './Paper';
-export type { PaperProps, PaperPropsVariantOverrides, PaperTypeMap, PaperOwnProps } from './Paper';
+export type { PaperProps, PaperPropsVariantOverrides, PaperTypeMap } from './Paper';
 
 export { default as paperClasses } from './paperClasses';
 export * from './paperClasses';

package/Popover/Popover.d.ts

@@ -107,7 +107,7 @@ export interface PopoverProps
    *
    * @default {}
    */
-  PaperProps?: Partial<PaperProps<React.ElementType>>;
+  PaperProps?: Partial<PaperProps>;
   /**
    * The components used for each slot inside.
    *

package/README.md

@@ -131,7 +131,7 @@ Diamond Sponsors are those who have pledged \$1,500/month or more to MUI.
 via [OpenCollective](https://opencollective.com/mui) or via [Patreon](https://www.patreon.com/oliviertassinari)
 
 <p>
-  <a href="https://tidelift.com/subscription/pkg/npm-material-ui?utm_source=npm-material-ui&utm_medium=referral&utm_campaign=homepage" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://avatars.githubusercontent.com/u/30204434?s=192" alt="tidelift.com" title="Enterprise-ready open-source software" loading="lazy" /></a>
+  <a href="https://www.tidelift.com/subscription/pkg/npm-material-ui?utm_source=npm-material-ui&utm_medium=referral&utm_campaign=homepage" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://avatars.githubusercontent.com/u/30204434?s=192" alt="tidelift.com" title="Enterprise-ready open-source software" loading="lazy" /></a>
   <a href="https://www.text-em-all.com/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img src="https://avatars.githubusercontent.com/u/1262264?s=192" alt="text-em-all.com" title="Mass Text Messaging & Automated Calling" height="96" width="96" loading="lazy"></a>
   <a href="https://open.spotify.com/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://images.opencollective.com/spotify/f37ea28/logo/192.png" alt="Spotify" title="Music service to access to millions of songs" loading="lazy" /></a>
   <a href="https://megafamous.com/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://mui.com/static/sponsors/megafamous.png" alt="megafamous.com" title="The best place to buy Instagram followers & likes." loading="lazy" /></a>

package/Tabs/Tabs.js

@@ -280,10 +280,9 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
   }
   const [mounted, setMounted] = React.useState(false);
   const [indicatorStyle, setIndicatorStyle] = React.useState(defaultIndicatorStyle);
-  const [displayScroll, setDisplayScroll] = React.useState({
-    start: false,
-    end: false
-  });
+  const [displayStartScroll, setDisplayStartScroll] = React.useState(false);
+  const [displayEndScroll, setDisplayEndScroll] = React.useState(false);
+  const [updateScrollObserver, setUpdateScrollObserver] = React.useState(false);
   const [scrollerStyle, setScrollerStyle] = React.useState({
     overflow: 'hidden',
     scrollbarWidth: 0
@@ -434,7 +433,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       onChange: handleScrollbarSizeChange,
       className: clsx(classes.scrollableX, classes.hideScrollbar)
     }) : null;
-    const scrollButtonsActive = displayScroll.start || displayScroll.end;
+    const scrollButtonsActive = displayStartScroll || displayEndScroll;
     const showScrollButtons = scrollable && (scrollButtons === 'auto' && scrollButtonsActive || scrollButtons === true);
     conditionalElements.scrollButtonStart = showScrollButtons ? /*#__PURE__*/_jsx(ScrollButtonComponent, _extends({
       slots: {
@@ -446,7 +445,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       orientation: orientation,
       direction: isRtl ? 'right' : 'left',
       onClick: handleStartScrollClick,
-      disabled: !displayScroll.start
+      disabled: !displayStartScroll
     }, TabScrollButtonProps, {
       className: clsx(classes.scrollButtons, TabScrollButtonProps.className)
     })) : null;
@@ -460,7 +459,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       orientation: orientation,
       direction: isRtl ? 'left' : 'right',
       onClick: handleEndScrollClick,
-      disabled: !displayScroll.end
+      disabled: !displayEndScroll
     }, TabScrollButtonProps, {
       className: clsx(classes.scrollButtons, TabScrollButtonProps.className)
     })) : null;
@@ -490,30 +489,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
   });
   const updateScrollButtonState = useEventCallback(() => {
     if (scrollable && scrollButtons !== false) {
-      const {
-        scrollTop,
-        scrollHeight,
-        clientHeight,
-        scrollWidth,
-        clientWidth
-      } = tabsRef.current;
-      let showStartScroll;
-      let showEndScroll;
-      if (vertical) {
-        showStartScroll = scrollTop > 1;
-        showEndScroll = scrollTop < scrollHeight - clientHeight - 1;
-      } else {
-        const scrollLeft = getNormalizedScrollLeft(tabsRef.current, theme.direction);
-        // use 1 for the potential rounding error with browser zooms.
-        showStartScroll = isRtl ? scrollLeft < scrollWidth - clientWidth - 1 : scrollLeft > 1;
-        showEndScroll = !isRtl ? scrollLeft < scrollWidth - clientWidth - 1 : scrollLeft > 1;
-      }
-      if (showStartScroll !== displayScroll.start || showEndScroll !== displayScroll.end) {
-        setDisplayScroll({
-          start: showStartScroll,
-          end: showEndScroll
-        });
-      }
+      setUpdateScrollObserver(!updateScrollObserver);
     }
   });
   React.useEffect(() => {
@@ -526,7 +502,6 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       // replaced by Suspense with a fallback, once React is updated to version 18
       if (tabsRef.current) {
         updateIndicatorState();
-        updateScrollButtonState();
       }
     });
     const win = ownerWindow(tabsRef.current);
@@ -545,21 +520,44 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
         resizeObserver.disconnect();
       }
     };
-  }, [updateIndicatorState, updateScrollButtonState]);
-  const handleTabsScroll = React.useMemo(() => debounce(() => {
-    updateScrollButtonState();
-  }), [updateScrollButtonState]);
+  }, [updateIndicatorState]);
+
+  /**
+   * Toggle visibility of start and end scroll buttons
+   * Using IntersectionObserver on first and last Tabs.
+   */
   React.useEffect(() => {
-    return () => {
-      handleTabsScroll.clear();
-    };
-  }, [handleTabsScroll]);
+    const tabListChildren = Array.from(tabListRef.current.children);
+    const length = tabListChildren.length;
+    if (typeof IntersectionObserver !== 'undefined' && length > 0 && scrollable && scrollButtons !== false) {
+      const firstTab = tabListChildren[0];
+      const lastTab = tabListChildren[length - 1];
+      const observerOptions = {
+        root: tabsRef.current,
+        threshold: 0.99
+      };
+      const handleScrollButtonStart = entries => {
+        setDisplayStartScroll(!entries[0].isIntersecting);
+      };
+      const firstObserver = new IntersectionObserver(handleScrollButtonStart, observerOptions);
+      firstObserver.observe(firstTab);
+      const handleScrollButtonEnd = entries => {
+        setDisplayEndScroll(!entries[0].isIntersecting);
+      };
+      const lastObserver = new IntersectionObserver(handleScrollButtonEnd, observerOptions);
+      lastObserver.observe(lastTab);
+      return () => {
+        firstObserver.disconnect();
+        lastObserver.disconnect();
+      };
+    }
+    return undefined;
+  }, [scrollable, scrollButtons, updateScrollObserver, childrenProp == null ? void 0 : childrenProp.length]);
   React.useEffect(() => {
     setMounted(true);
   }, []);
   React.useEffect(() => {
     updateIndicatorState();
-    updateScrollButtonState();
   });
   React.useEffect(() => {
     // Don't animate on the first render.
@@ -653,7 +651,6 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
         [vertical ? `margin${isRtl ? 'Left' : 'Right'}` : 'marginBottom']: visibleScrollbar ? undefined : -scrollerStyle.scrollbarWidth
       },
       ref: tabsRef,
-      onScroll: handleTabsScroll,
       children: [/*#__PURE__*/_jsx(FlexContainer, {
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledBy,

package/Typography/Typography.d.ts

@@ -8,73 +8,72 @@ import { TypographyClasses } from './typographyClasses';
 
 export interface TypographyPropsVariantOverrides {}
 
-export interface TypographyOwnProps extends SystemProps<Theme> {
-  /**
-   * Set the text-align on the component.
-   * @default 'inherit'
-   */
-  align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
-  /**
-   * The content of the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes?: Partial<TypographyClasses>;
-  /**
-   * If `true`, the text will have a bottom margin.
-   * @default false
-   */
-  gutterBottom?: boolean;
-  /**
-   * If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis.
-   *
-   * Note that text overflow can only happen with block or inline-block level elements
-   * (the element needs to have a width in order to overflow).
-   * @default false
-   */
-  noWrap?: boolean;
-  /**
-   * If `true`, the element will be a paragraph element.
-   * @default false
-   */
-  paragraph?: boolean;
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx?: SxProps<Theme>;
-  /**
-   * Applies the theme typography styles.
-   * @default 'body1'
-   */
-  variant?: OverridableStringUnion<Variant | 'inherit', TypographyPropsVariantOverrides>;
-  /**
-   * The component maps the variant prop to a range of different HTML element types.
-   * For instance, subtitle1 to `<h6>`.
-   * If you wish to change that mapping, you can provide your own.
-   * Alternatively, you can use the `component` prop.
-   * @default {
-   *   h1: 'h1',
-   *   h2: 'h2',
-   *   h3: 'h3',
-   *   h4: 'h4',
-   *   h5: 'h5',
-   *   h6: 'h6',
-   *   subtitle1: 'h6',
-   *   subtitle2: 'h6',
-   *   body1: 'p',
-   *   body2: 'p',
-   *   inherit: 'p',
-   * }
-   */
-  variantMapping?: Partial<
-    Record<OverridableStringUnion<Variant | 'inherit', TypographyPropsVariantOverrides>, string>
-  >;
-}
-
 export interface TypographyTypeMap<P = {}, D extends React.ElementType = 'span'> {
-  props: P & TypographyOwnProps;
+  props: P &
+    SystemProps<Theme> & {
+      /**
+       * Set the text-align on the component.
+       * @default 'inherit'
+       */
+      align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
+      /**
+       * The content of the component.
+       */
+      children?: React.ReactNode;
+      /**
+       * Override or extend the styles applied to the component.
+       */
+      classes?: Partial<TypographyClasses>;
+      /**
+       * If `true`, the text will have a bottom margin.
+       * @default false
+       */
+      gutterBottom?: boolean;
+      /**
+       * If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis.
+       *
+       * Note that text overflow can only happen with block or inline-block level elements
+       * (the element needs to have a width in order to overflow).
+       * @default false
+       */
+      noWrap?: boolean;
+      /**
+       * If `true`, the element will be a paragraph element.
+       * @default false
+       */
+      paragraph?: boolean;
+      /**
+       * The system prop that allows defining system overrides as well as additional CSS styles.
+       */
+      sx?: SxProps<Theme>;
+      /**
+       * Applies the theme typography styles.
+       * @default 'body1'
+       */
+      variant?: OverridableStringUnion<Variant | 'inherit', TypographyPropsVariantOverrides>;
+      /**
+       * The component maps the variant prop to a range of different HTML element types.
+       * For instance, subtitle1 to `<h6>`.
+       * If you wish to change that mapping, you can provide your own.
+       * Alternatively, you can use the `component` prop.
+       * @default {
+       *   h1: 'h1',
+       *   h2: 'h2',
+       *   h3: 'h3',
+       *   h4: 'h4',
+       *   h5: 'h5',
+       *   h6: 'h6',
+       *   subtitle1: 'h6',
+       *   subtitle2: 'h6',
+       *   body1: 'p',
+       *   body2: 'p',
+       *   inherit: 'p',
+       * }
+       */
+      variantMapping?: Partial<
+        Record<OverridableStringUnion<Variant | 'inherit', TypographyPropsVariantOverrides>, string>
+      >;
+    };
   defaultComponent: D;
 }
 

package/index.js

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

package/legacy/Button/Button.js

@@ -307,7 +307,7 @@ process.env.NODE_ENV !== "production" ? Button.propTypes /* remove-proptypes */
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
-  component: PropTypes /* @typescript-to-proptypes-ignore */.elementType,
+  component: PropTypes.elementType,
   /**
    * If `true`, the component is disabled.
    * @default false

package/legacy/Chip/Chip.js

@@ -67,8 +67,6 @@ var ChipRoot = styled('div', {
     borderRadius: 32 / 2,
     whiteSpace: 'nowrap',
     transition: theme.transitions.create(['background-color', 'box-shadow']),
-    // label will inherit this from root, then `clickable` class overrides this for both
-    cursor: 'default',
     // We disable the focus ring for mouse, touch and keyboard users.
     outline: 0,
     textDecoration: 'none',

package/legacy/Fab/Fab.js

@@ -186,7 +186,7 @@ process.env.NODE_ENV !== "production" ? Fab.propTypes /* remove-proptypes */ = {
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
-  component: PropTypes /* @typescript-to-proptypes-ignore */.elementType,
+  component: PropTypes.elementType,
   /**
    * If `true`, the component is disabled.
    * @default false