@mui/material 5.11.13 → 5.11.14

package/Breadcrumbs/BreadcrumbCollapsed.js

@@ -1,4 +1,6 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { emphasize } from '@mui/system';
@@ -42,19 +44,40 @@ const BreadcrumbCollapsedIcon = styled(MoreHorizIcon)({
  * @ignore - internal component.
  */
 function BreadcrumbCollapsed(props) {
+  const {
+      slots = {},
+      slotProps = {}
+    } = props,
+    otherProps = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = props;
   return /*#__PURE__*/_jsx("li", {
     children: /*#__PURE__*/_jsx(BreadcrumbCollapsedButton, _extends({
       focusRipple: true
-    }, props, {
+    }, otherProps, {
       ownerState: ownerState,
-      children: /*#__PURE__*/_jsx(BreadcrumbCollapsedIcon, {
+      children: /*#__PURE__*/_jsx(BreadcrumbCollapsedIcon, _extends({
+        as: slots.CollapsedIcon,
         ownerState: ownerState
-      })
+      }, slotProps.collapsedIcon))
     }))
   });
 }
 process.env.NODE_ENV !== "production" ? BreadcrumbCollapsed.propTypes = {
+  /**
+   * The props used for the CollapsedIcon slot.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    collapsedIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside the BreadcumbCollapsed.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    CollapsedIcon: PropTypes.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,8 +1,16 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
+import { SlotComponentProps } from '@mui/base';
 import { Theme } from '../styles';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { BreadcrumbsClasses } from './breadcrumbsClasses';
+import SvgIcon from '../SvgIcon';
+
+export interface BreadcrumbsCollapsedIconSlotPropsOverrides {}
+
+export interface BreadcrumbsOwnerState extends BreadcrumbsProps {
+  expanded: boolean;
+}
 
 export interface BreadcrumbsTypeMap<P = {}, D extends React.ElementType = 'nav'> {
   props: P & {
@@ -14,6 +22,29 @@ export interface BreadcrumbsTypeMap<P = {}, D extends React.ElementType = 'nav'>
      * Override or extend the styles applied to the component.
      */
     classes?: Partial<BreadcrumbsClasses>;
+    /**
+     * The components used for each slot inside the Breadcumb.
+     * Either a string to use a HTML element or a component.
+     * @default {}
+     */
+    slots?: {
+      CollapsedIcon?: React.ElementType;
+    };
+    /**
+     * The props used for each slot inside the Breadcumb.
+     * @default {}
+     */
+    slotProps?: {
+      /**
+       * Props applied to the CollapsedIcon slot.
+       * @default {}
+       */
+      collapsedIcon?: SlotComponentProps<
+        typeof SvgIcon,
+        BreadcrumbsCollapsedIconSlotPropsOverrides,
+        BreadcrumbsOwnerState
+      >;
+    };
     /**
      * Override the default label for the expand button.
      *

package/Breadcrumbs/Breadcrumbs.js

@@ -1,12 +1,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "className", "component", "expandText", "itemsAfterCollapse", "itemsBeforeCollapse", "maxItems", "separator"];
+const _excluded = ["children", "className", "component", "slots", "slotProps", "expandText", "itemsAfterCollapse", "itemsBeforeCollapse", "maxItems", "separator"];
 import * as React from 'react';
 import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { integerPropType } from '@mui/utils';
-import { unstable_composeClasses as composeClasses } from '@mui/base';
+import { unstable_composeClasses as composeClasses, useSlotProps } from '@mui/base';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import Typography from '../Typography';
@@ -80,6 +80,8 @@ const Breadcrumbs = /*#__PURE__*/React.forwardRef(function Breadcrumbs(inProps,
       children,
       className,
       component = 'nav',
+      slots = {},
+      slotProps = {},
       expandText = 'Show path',
       itemsAfterCollapse = 1,
       itemsBeforeCollapse = 1,
@@ -98,6 +100,11 @@ const Breadcrumbs = /*#__PURE__*/React.forwardRef(function Breadcrumbs(inProps,
     separator
   });
   const classes = useUtilityClasses(ownerState);
+  const collapsedIconSlotProps = useSlotProps({
+    elementType: slots.CollapsedIcon,
+    externalSlotProps: slotProps.collapsedIcon,
+    ownerState
+  });
   const listRef = React.useRef(null);
   const renderItemsBeforeAndAfter = allItems => {
     const handleClickExpand = () => {
@@ -123,6 +130,12 @@ const Breadcrumbs = /*#__PURE__*/React.forwardRef(function Breadcrumbs(inProps,
     }
     return [...allItems.slice(0, itemsBeforeCollapse), /*#__PURE__*/_jsx(BreadcrumbCollapsed, {
       "aria-label": expandText,
+      slots: {
+        CollapsedIcon: slots.CollapsedIcon
+      },
+      slotProps: {
+        collapsedIcon: collapsedIconSlotProps
+      },
       onClick: handleClickExpand
     }, "ellipsis"), ...allItems.slice(allItems.length - itemsAfterCollapse, allItems.length)];
   };
@@ -203,6 +216,21 @@ process.env.NODE_ENV !== "production" ? Breadcrumbs.propTypes /* remove-proptype
    * @default '/'
    */
   separator: PropTypes.node,
+  /**
+   * The props used for each slot inside the Breadcumb.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    collapsedIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside the Breadcumb.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    CollapsedIcon: PropTypes.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/CHANGELOG.md

@@ -1,5 +1,73 @@
 # [Versions](https://mui.com/versions/)
 
+## 5.11.14
+
+<!-- generated comparing v5.11.13..master -->
+
+_Mar 21, 2023_
+
+A big thanks to the 15 contributors who made this release possible.
+This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
+
+### `@mui/material@5.11.14`
+
+- [Breadcrumbs] Add ability to change icon used in `BreadcrumbCollapsed` through slots (#33812) @pratikkarad
+- [Stepper] Add aria-current to active StepButton (#36526) @michalak111
+- [TabScrollButton] Add ability to change left and right icons (#33863) @pratikkarad
+- [ListItemButton] Respect LinkComponent (#34159) @zaverden
+- [l10n] Add Central Kurdish (ku-CKB) locale (#36592) @HediMuhamad
+
+### `@mui/system@5.11.14`
+
+- [system] Fix sx prop regression for fontWeight values (#36543) @mnajdova
+
+### `@mui/base@5.0.0-alpha.121`
+
+- [docs][base] Improve the Slots Table in API docs (#36330) @hbjORbj
+
+### `@mui/joy@5.0.0-alpha.72`
+
+- [Joy] Ensure new CSS variable naming is everywhere (#36460) @hbjORbj
+- [Menu][joy] Classname listbox is missing (#36520) @hbjORbj
+- [Joy] Fix `--List-decorator*` vars (#36595) @siriwatknp
+
+### `@mui/lab@5.0.0-alpha.124`
+
+- [Masonry] Include Masonry in theme augmentation interface (#36533) @hbjORbj
+
+### Docs
+
+- [blog] Post blog about Chamonix retreat to the website (#36517) @mikailaread
+- [blog] Fix image layout shift (#36522) @oliviertassinari
+- [docs] Use `theme.applyDarkStyles` for the rest of the docs (#36161) @siriwatknp
+- [docs] Fix 301 and 404 links (#36555) @oliviertassinari
+- [docs] Keep slot code order in API docs (#36499) @oliviertassinari
+- [docs] Missing className on Migrating from JSS example (#36536) @gabrielnafuzi
+- [docs] Fix function name for Joy templates (#36512) @hbjORbj
+- [docs] Add multiline Chip example (#36437) @dav1app
+- [docs] Add a new gold sponsor (#36518) @hbjORbj
+- [docs][joy] Improve the Slots Table in API docs (#36328) @hbjORbj
+- [docs] Fix virtualElement demo for Popper (#36320) @sai6855
+- [docs] Fix typo in API docs (#36388) @RomanHotsiy
+- [docs] Ensure classname displayed under Slots section in API docs exists (#36539) @hbjORbj
+- [docs][joy] Build TS versions for Modal component demos (#36385) @varunmulay22
+- [docs][joy] Build TS versions for Menu component demos (#36383) @varunmulay22
+- [docs][joy] Build TS versions for Switch component demos (#36379) @varunmulay22
+- [docs] Remove `shouldSkipGeneratingVar` usage (#36581) @siriwatknp
+- [docs][material] Update Table's demo to show pointer cursor on clickable rows (#36546) @varunmulay22
+- [website] Designer role changes (#36528) @danilo-leal
+- [website] No association between showcase and MUI @oliviertassinari
+- [website] Open Head of Operations role (#36501) @oliviertassinari
+- [website] Limit sponsors description to two rows @oliviertassinari
+
+### Core
+
+- [core] Fix CI @oliviertassinari
+- [core] Fix blank line @oliviertassinari
+- [website] Simplify internal ops @oliviertassinari
+
+All contributors of this release in alphabetical order: @danilo-leal, @dav1app, @gabrielnafuzi, @hbjORbj, @HediMuhamad, @michalak111, @mikailaread, @mnajdova, @oliviertassinari, @pratikkarad, @RomanHotsiy, @sai6855, @siriwatknp, @varunmulay22, @zaverden
+
 ## 5.11.13
 
 <!-- generated comparing v5.11.12..master -->
@@ -9076,7 +9144,7 @@ _Nov 4, 2020_
 A big thanks to the 20 contributors who made this release possible. Here are some highlights ✨:
 
 - ⚛️ Add support for React 17 (#23311) @eps1lon.
-  React 17 release is unusual because it doesn't add any new developer-facing features. It was released a couple of days ago. You can learn more about it in the [introduction post](https://reactjs.org/blog/2020/10/20/react-v17.html). Material UI now supports `^16.8.0 || ^17.0.0`.
+  React 17 release is unusual because it doesn't add any new developer-facing features. It was released a couple of days ago. You can learn more about it in the [introduction post](https://legacy.reactjs.org/blog/2020/10/20/react-v17.html). Material UI now supports `^16.8.0 || ^17.0.0`.
 - 🛠 Introduce a new `@material-ui/unstyled` package (#23270) @mnajdova.
   This package will host the unstyled version of the components. In this first iteration, only the Slider is available. You can find it documented under the [same page](https://mui.com/components/slider-styled/#unstyled-slider) as the styled version.
 
@@ -10085,7 +10153,7 @@ Here are some highlights ✨:
 #### Breaking changes
 
 - [Modal] Remove `onRendered` prop from Modal and Portal (#22464) @eps1lon
-  Depending on your use case either use a [callback ref](https://reactjs.org/docs/refs-and-the-dom.html#callback-refs) on the child element or an effect hook in the child component.
+  Depending on your use case either use a [callback ref](https://legacy.reactjs.org/docs/refs-and-the-dom.html#callback-refs) on the child element or an effect hook in the child component.
 
 #### Changes
 
@@ -10548,7 +10616,7 @@ Here are some highlights ✨:
 
 - [RootRef] Remove component (#21974) @eps1lon
   This component was removed. You can get a reference to the underlying DOM node of our components via `ref` prop.
-  The component relied on [`ReactDOM.findDOMNode`](https://reactjs.org/docs/react-dom.html#finddomnode) which is [deprecated in `React.StrictMode`](https://reactjs.org/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage).
+  The component relied on [`ReactDOM.findDOMNode`](https://legacy.reactjs.org/docs/react-dom.html#finddomnode) which is [deprecated in `React.StrictMode`](https://legacy.reactjs.org/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage).
 
   ```diff
   -<RootRef rootRef={ref}>

package/ListItemButton/ListItemButton.js

@@ -145,8 +145,10 @@ const ListItemButton = /*#__PURE__*/React.forwardRef(function ListItemButton(inP
     value: childContext,
     children: /*#__PURE__*/_jsx(ListItemButtonRoot, _extends({
       ref: handleRef,
-      href: other.href || other.to,
-      component: (other.href || other.to) && component === 'div' ? 'a' : component,
+      href: other.href || other.to
+      // `ButtonBase` processes `href` or `to` if `component` is set to 'button'
+      ,
+      component: (other.href || other.to) && component === 'div' ? 'button' : component,
       focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
       ownerState: ownerState,
       className: clsx(classes.root, className)

package/README.md

@@ -133,6 +133,7 @@ via [OpenCollective](https://opencollective.com/mui) or via [Patreon](https://ww
 <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.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>
   <a href="https://www.dialmycalls.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/dialmycalls/f5ae9ab/avatar/192.png" alt="dialmycalls.com" title="Send text messages, calls & emails to thousands with ease." loading="lazy" /></a>
   <a href="https://goread.io/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://images.opencollective.com/goread_io/eb6337d/logo/192.png" alt="goread.io" title="Instagram followers, likes, power likes, views, comments, saves in minutes." loading="lazy" /></a>
@@ -217,7 +218,7 @@ These great services sponsor MUI's core infrastructure:
 <picture>
   <source media="(prefers-color-scheme: dark)" srcset="/docs/public/static/readme/github-darkmode.svg">
   <source media="(prefers-color-scheme: light)" srcset="/docs/public/static/readme/github-lightmode.svg">
-  <img alt="GitHub logo" src="/docs/public/static/readme/github-darkmode.svg">
+  <img alt="GitHub logo" src="/docs/public/static/readme/github-lightmode.svg" width="80" height="43">
 </picture>
 
 [GitHub](https://github.com/) lets us host the Git repository and coordinate contributions.
@@ -225,7 +226,7 @@ These great services sponsor MUI's core infrastructure:
 <picture>
   <source media="(prefers-color-scheme: dark)" srcset="/docs/public/static/readme/netlify-darkmode.svg">
   <source media="(prefers-color-scheme: light)" srcset="/docs/public/static/readme/netlify-lightmode.svg">
-  <img alt="Netlify logo" src="/docs/public/static/readme/netlify-darkmode.svg">
+  <img alt="Netlify logo" src="/docs/public/static/readme/netlify-lightmode.svg" width="100" height="27" style="margin-top: 1rem;">
 </picture>
 
 [Netlify](https://www.netlify.com/) lets us distribute the documentation.
@@ -233,11 +234,11 @@ These great services sponsor MUI's core infrastructure:
 <picture>
   <source media="(prefers-color-scheme: dark)" srcset="/docs/public/static/readme/browserstack-darkmode.svg">
   <source media="(prefers-color-scheme: light)" srcset="/docs/public/static/readme/browserstack-lightmode.svg">
-  <img alt="GitHub logo" src="/docs/public/static/readme/browserstack-darkmode.svg">
+  <img alt="BrowserStack logo" src="/docs/public/static/readme/browserstack-lightmode.svg" width="140" height="25" style="margin-top: 1rem;">
 </picture>
 
 [BrowserStack](https://www.browserstack.com/) lets us test in real browsers.
 
-<img loading="lazy" alt="CodeCov logo" src="https://github.com/codecov.png?size=70" width="35" height="35">
+<img loading="lazy" alt="CodeCov logo" src="https://avatars.githubusercontent.com/u/8226205?s=70" width="35" height="35" style="margin-top: 1rem;">
 
 [CodeCov](https://about.codecov.io/) lets us monitor test coverage.

package/StepButton/StepButton.js

@@ -65,7 +65,8 @@ const StepButton = /*#__PURE__*/React.forwardRef(function StepButton(inProps, re
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
-    disabled
+    disabled,
+    active
   } = React.useContext(StepContext);
   const {
     orientation
@@ -89,7 +90,8 @@ const StepButton = /*#__PURE__*/React.forwardRef(function StepButton(inProps, re
     },
     className: clsx(classes.root, className),
     ref: ref,
-    ownerState: ownerState
+    ownerState: ownerState,
+    "aria-current": active ? 'step' : undefined
   }, other, {
     children: child
   }));

package/TabScrollButton/TabScrollButton.d.ts

@@ -1,8 +1,16 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
-import { InternalStandardProps as StandardProps, Theme } from '..';
+import { SlotComponentProps } from '@mui/base';
+import { InternalStandardProps as StandardProps, SvgIcon, Theme } from '..';
 import { TabScrollButtonClasses } from './tabScrollButtonClasses';
 
+export interface TabScrollButtonStartIconSlotPropsOverrides {}
+export interface TabScrollButtonEndIconSlotPropsOverrides {}
+
+export interface TabScrollButtonOwnerState extends TabScrollButtonProps {
+  isRtl: boolean;
+}
+
 export interface TabScrollButtonProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
   /**
    * The content of the component.
@@ -12,6 +20,31 @@ export interface TabScrollButtonProps extends StandardProps<React.HTMLAttributes
    * Override or extend the styles applied to the component.
    */
   classes?: Partial<TabScrollButtonClasses>;
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots?: {
+    StartScrollButtonIcon?: React.ElementType;
+    EndScrollButtonIcon?: React.ElementType;
+  };
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   * @default {}
+   */
+  slotProps?: {
+    startScrollButtonIcon?: SlotComponentProps<
+      typeof SvgIcon,
+      TabScrollButtonStartIconSlotPropsOverrides,
+      TabScrollButtonOwnerState
+    >;
+    endScrollButtonIcon?: SlotComponentProps<
+      typeof SvgIcon,
+      TabScrollButtonEndIconSlotPropsOverrides,
+      TabScrollButtonOwnerState
+    >;
+  };
   /**
    * The direction the button should indicate.
    */

package/TabScrollButton/TabScrollButton.js

@@ -1,12 +1,11 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _KeyboardArrowLeft, _KeyboardArrowRight;
-const _excluded = ["className", "direction", "orientation", "disabled"];
+const _excluded = ["className", "slots", "slotProps", "direction", "orientation", "disabled"];
 /* eslint-disable jsx-a11y/aria-role */
 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 } from '@mui/base';
 import KeyboardArrowLeft from '../internal/svg-icons/KeyboardArrowLeft';
 import KeyboardArrowRight from '../internal/svg-icons/KeyboardArrowRight';
 import ButtonBase from '../ButtonBase';
@@ -52,12 +51,15 @@ const TabScrollButtonRoot = styled(ButtonBase, {
   }
 }));
 const TabScrollButton = /*#__PURE__*/React.forwardRef(function TabScrollButton(inProps, ref) {
+  var _slots$StartScrollBut, _slots$EndScrollButto;
   const props = useThemeProps({
     props: inProps,
     name: 'MuiTabScrollButton'
   });
   const {
       className,
+      slots = {},
+      slotProps = {},
       direction
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
@@ -67,6 +69,24 @@ const TabScrollButton = /*#__PURE__*/React.forwardRef(function TabScrollButton(i
     isRtl
   }, props);
   const classes = useUtilityClasses(ownerState);
+  const StartButtonIcon = (_slots$StartScrollBut = slots.StartScrollButtonIcon) != null ? _slots$StartScrollBut : KeyboardArrowLeft;
+  const EndButtonIcon = (_slots$EndScrollButto = slots.EndScrollButtonIcon) != null ? _slots$EndScrollButto : KeyboardArrowRight;
+  const startButtonIconProps = useSlotProps({
+    elementType: StartButtonIcon,
+    externalSlotProps: slotProps.startScrollButtonIcon,
+    additionalProps: {
+      fontSize: 'small'
+    },
+    ownerState
+  });
+  const endButtonIconProps = useSlotProps({
+    elementType: EndButtonIcon,
+    externalSlotProps: slotProps.endScrollButtonIcon,
+    additionalProps: {
+      fontSize: 'small'
+    },
+    ownerState
+  });
   return /*#__PURE__*/_jsx(TabScrollButtonRoot, _extends({
     component: "div",
     className: clsx(classes.root, className),
@@ -75,11 +95,7 @@ const TabScrollButton = /*#__PURE__*/React.forwardRef(function TabScrollButton(i
     ownerState: ownerState,
     tabIndex: null
   }, other, {
-    children: direction === 'left' ? _KeyboardArrowLeft || (_KeyboardArrowLeft = /*#__PURE__*/_jsx(KeyboardArrowLeft, {
-      fontSize: "small"
-    })) : _KeyboardArrowRight || (_KeyboardArrowRight = /*#__PURE__*/_jsx(KeyboardArrowRight, {
-      fontSize: "small"
-    }))
+    children: direction === 'left' ? /*#__PURE__*/_jsx(StartButtonIcon, _extends({}, startButtonIconProps)) : /*#__PURE__*/_jsx(EndButtonIcon, _extends({}, endButtonIconProps))
   }));
 });
 process.env.NODE_ENV !== "production" ? TabScrollButton.propTypes /* remove-proptypes */ = {
@@ -112,6 +128,23 @@ process.env.NODE_ENV !== "production" ? TabScrollButton.propTypes /* remove-prop
    * The component orientation (layout flow direction).
    */
   orientation: PropTypes.oneOf(['horizontal', 'vertical']).isRequired,
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    endScrollButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    startScrollButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    EndScrollButtonIcon: PropTypes.elementType,
+    StartScrollButtonIcon: PropTypes.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/Tabs/Tabs.d.ts

@@ -1,14 +1,29 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
+import { SlotComponentProps } from '@mui/base';
 import { OverridableStringUnion } from '@mui/types';
 import { Theme } from '../styles';
 import ButtonBase from '../ButtonBase';
 import { TabScrollButtonProps } from '../TabScrollButton';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { TabsClasses } from './tabsClasses';
+import SvgIcon from '../SvgIcon';
 
 export interface TabsPropsIndicatorColorOverrides {}
 
+export interface TabsStartScrollButtonIconSlotPropsOverrides {}
+export interface TabsEndScrollButtonIconSlotPropsOverrides {}
+
+export interface TabsOwnerState extends TabsProps {
+  vertical: boolean;
+  fixed: boolean;
+  hideScrollbar: boolean;
+  scrollableX: boolean;
+  scrollableY: boolean;
+  centered: boolean;
+  scrollButtonsHideMobile: boolean;
+}
+
 export interface TabsTypeMap<P = {}, D extends React.ElementType = typeof ButtonBase> {
   props: P & {
     /**
@@ -48,6 +63,31 @@ export interface TabsTypeMap<P = {}, D extends React.ElementType = typeof Button
      * Override or extend the styles applied to the component.
      */
     classes?: Partial<TabsClasses>;
+    /**
+     * The components used for each slot inside.
+     * @default {}
+     */
+    slots?: {
+      StartScrollButtonIcon?: React.ElementType;
+      EndScrollButtonIcon?: React.ElementType;
+    };
+    /**
+     * The extra props for the slot components.
+     * You can override the existing props or add new ones.
+     * @default {}
+     */
+    slotProps?: {
+      startScrollButtonIcon?: SlotComponentProps<
+        typeof SvgIcon,
+        TabsStartScrollButtonIconSlotPropsOverrides,
+        TabsOwnerState
+      >;
+      endScrollButtonIcon?: SlotComponentProps<
+        typeof SvgIcon,
+        TabsEndScrollButtonIconSlotPropsOverrides,
+        TabsOwnerState
+      >;
+    };
     /**
      * Determines the color of the indicator.
      * @default 'primary'

package/Tabs/Tabs.js

@@ -1,12 +1,12 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["aria-label", "aria-labelledby", "action", "centered", "children", "className", "component", "allowScrollButtonsMobile", "indicatorColor", "onChange", "orientation", "ScrollButtonComponent", "scrollButtons", "selectionFollowsFocus", "TabIndicatorProps", "TabScrollButtonProps", "textColor", "value", "variant", "visibleScrollbar"];
+const _excluded = ["aria-label", "aria-labelledby", "action", "centered", "children", "className", "component", "allowScrollButtonsMobile", "indicatorColor", "onChange", "orientation", "ScrollButtonComponent", "scrollButtons", "selectionFollowsFocus", "slots", "slotProps", "TabIndicatorProps", "TabScrollButtonProps", "textColor", "value", "variant", "visibleScrollbar"];
 import * as React from 'react';
 import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { refType } from '@mui/utils';
-import { unstable_composeClasses as composeClasses } from '@mui/base';
+import { unstable_composeClasses as composeClasses, useSlotProps } from '@mui/base';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import useTheme from '../styles/useTheme';
@@ -226,6 +226,8 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       ScrollButtonComponent = TabScrollButton,
       scrollButtons = 'auto',
       selectionFollowsFocus,
+      slots = {},
+      slotProps = {},
       TabIndicatorProps = {},
       TabScrollButtonProps = {},
       textColor = 'primary',
@@ -259,6 +261,16 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     scrollButtonsHideMobile: !allowScrollButtonsMobile
   });
   const classes = useUtilityClasses(ownerState);
+  const startScrollButtonIconProps = useSlotProps({
+    elementType: slots.StartScrollButtonIcon,
+    externalSlotProps: slotProps.startScrollButtonIcon,
+    ownerState
+  });
+  const endScrollButtonIconProps = useSlotProps({
+    elementType: slots.EndScrollButtonIcon,
+    externalSlotProps: slotProps.endScrollButtonIcon,
+    ownerState
+  });
   if (process.env.NODE_ENV !== 'production') {
     if (centered && scrollable) {
       console.error('MUI: You can not use the `centered={true}` and `variant="scrollable"` properties ' + 'at the same time on a `Tabs` component.');
@@ -423,6 +435,12 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     const scrollButtonsActive = displayScroll.start || displayScroll.end;
     const showScrollButtons = scrollable && (scrollButtons === 'auto' && scrollButtonsActive || scrollButtons === true);
     conditionalElements.scrollButtonStart = showScrollButtons ? /*#__PURE__*/_jsx(ScrollButtonComponent, _extends({
+      slots: {
+        StartScrollButtonIcon: slots.StartScrollButtonIcon
+      },
+      slotProps: {
+        startScrollButtonIcon: startScrollButtonIconProps
+      },
       orientation: orientation,
       direction: isRtl ? 'right' : 'left',
       onClick: handleStartScrollClick,
@@ -431,6 +449,12 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       className: clsx(classes.scrollButtons, TabScrollButtonProps.className)
     })) : null;
     conditionalElements.scrollButtonEnd = showScrollButtons ? /*#__PURE__*/_jsx(ScrollButtonComponent, _extends({
+      slots: {
+        EndScrollButtonIcon: slots.EndScrollButtonIcon
+      },
+      slotProps: {
+        endScrollButtonIcon: endScrollButtonIconProps
+      },
       orientation: orientation,
       direction: isRtl ? 'left' : 'right',
       onClick: handleEndScrollClick,
@@ -732,6 +756,23 @@ process.env.NODE_ENV !== "production" ? Tabs.propTypes /* remove-proptypes */ =
    * changes on activation.
    */
   selectionFollowsFocus: PropTypes.bool,
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    endScrollButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    startScrollButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    EndScrollButtonIcon: PropTypes.elementType,
+    StartScrollButtonIcon: 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.11.13
+ * @mui/material v5.11.14
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the