@mui/material 5.15.11 → 5.15.13

package/node/Rating/Rating.js

@@ -15,7 +15,7 @@ var _clamp = _interopRequireDefault(require("@mui/utils/clamp"));
 var _visuallyHidden = _interopRequireDefault(require("@mui/utils/visuallyHidden"));
 var _chainPropTypes = _interopRequireDefault(require("@mui/utils/chainPropTypes"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
+var _RtlProvider = require("@mui/system/RtlProvider");
 var _utils = require("../utils");
 var _Star = _interopRequireDefault(require("../internal/svg-icons/Star"));
 var _StarBorder = _interopRequireDefault(require("../internal/svg-icons/StarBorder"));
@@ -307,7 +307,7 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
     name: 'Rating'
   });
   const valueRounded = roundValueToPrecision(valueDerived, precision);
-  const theme = (0, _useTheme.default)();
+  const isRtl = (0, _RtlProvider.useRtl)();
   const [{
     hover,
     focus
@@ -342,7 +342,7 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
       width: containerWidth
     } = rootNode.getBoundingClientRect();
     let percent;
-    if (theme.direction === 'rtl') {
+    if (isRtl) {
       percent = (right - event.clientX) / containerWidth;
     } else {
       percent = (event.clientX - left) / containerWidth;

package/node/Slider/Slider.js

@@ -16,9 +16,9 @@ var _utils = require("@mui/base/utils");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _useSlider = require("@mui/base/useSlider");
 var _colorManipulator = require("@mui/system/colorManipulator");
+var _RtlProvider = require("@mui/system/RtlProvider");
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _styled = _interopRequireWildcard(require("../styles/styled"));
-var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
 var _shouldSpreadAdditionalProps = _interopRequireDefault(require("../utils/shouldSpreadAdditionalProps"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _SliderValueLabel = _interopRequireDefault(require("./SliderValueLabel"));
@@ -378,8 +378,7 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     props: inputProps,
     name: 'MuiSlider'
   });
-  const theme = (0, _useTheme.default)();
-  const isRtl = theme.direction === 'rtl';
+  const isRtl = (0, _RtlProvider.useRtl)();
   const {
       'aria-label': ariaLabel,
       'aria-valuetext': ariaValuetext,
@@ -640,8 +639,7 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
   /**
    * The components used for each slot inside.
    *
-   * This prop is an alias for the `slots` prop.
-   * It's recommended to use the `slots` prop instead.
+   * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    *
    * @default {}
    */
@@ -659,8 +657,7 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
    * The extra props for the slot components.
    * You can override the existing props or add new ones.
    *
-   * This prop is an alias for the `slotProps` prop.
-   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    *
    * @default {}
    */

package/node/Switch/Switch.js

@@ -17,13 +17,13 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _colorManipulator = require("@mui/system/colorManipulator");
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _SwitchBase = _interopRequireDefault(require("../internal/SwitchBase"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
+var _zeroStyled = require("../zero-styled");
 var _switchClasses = _interopRequireWildcard(require("./switchClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["className", "color", "edge", "size", "sx"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiSwitch');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -43,7 +43,7 @@ const useUtilityClasses = ownerState => {
   const composedClasses = (0, _composeClasses.default)(slots, _switchClasses.getSwitchUtilityClass, classes);
   return (0, _extends2.default)({}, classes, composedClasses);
 };
-const SwitchRoot = (0, _styled.default)('span', {
+const SwitchRoot = (0, _zeroStyled.styled)('span', {
   name: 'MuiSwitch',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -52,9 +52,7 @@ const SwitchRoot = (0, _styled.default)('span', {
     } = props;
     return [styles.root, ownerState.edge && styles[`edge${(0, _capitalize.default)(ownerState.edge)}`], styles[`size${(0, _capitalize.default)(ownerState.size)}`]];
   }
-})(({
-  ownerState
-}) => (0, _extends2.default)({
+})({
   display: 'inline-flex',
   width: 34 + 12 * 2,
   height: 14 + 12 * 2,
@@ -69,27 +67,43 @@ const SwitchRoot = (0, _styled.default)('span', {
   // For correct alignment with the text.
   '@media print': {
     colorAdjust: 'exact'
-  }
-}, ownerState.edge === 'start' && {
-  marginLeft: -8
-}, ownerState.edge === 'end' && {
-  marginRight: -8
-}, ownerState.size === 'small' && {
-  width: 40,
-  height: 24,
-  padding: 7,
-  [`& .${_switchClasses.default.thumb}`]: {
-    width: 16,
-    height: 16
   },
-  [`& .${_switchClasses.default.switchBase}`]: {
-    padding: 4,
-    [`&.${_switchClasses.default.checked}`]: {
-      transform: 'translateX(16px)'
+  variants: [{
+    props: {
+      edge: 'start'
+    },
+    style: {
+      marginLeft: -8
     }
-  }
-}));
-const SwitchSwitchBase = (0, _styled.default)(_SwitchBase.default, {
+  }, {
+    props: {
+      edge: 'end'
+    },
+    style: {
+      marginRight: -8
+    }
+  }, {
+    props: {
+      size: 'small'
+    },
+    style: {
+      width: 40,
+      height: 24,
+      padding: 7,
+      [`& .${_switchClasses.default.thumb}`]: {
+        width: 16,
+        height: 16
+      },
+      [`& .${_switchClasses.default.switchBase}`]: {
+        padding: 4,
+        [`&.${_switchClasses.default.checked}`]: {
+          transform: 'translateX(16px)'
+        }
+      }
+    }
+  }]
+});
+const SwitchSwitchBase = (0, _zeroStyled.styled)(_SwitchBase.default, {
   name: 'MuiSwitch',
   slot: 'SwitchBase',
   overridesResolver: (props, styles) => {
@@ -129,34 +143,40 @@ const SwitchSwitchBase = (0, _styled.default)(_SwitchBase.default, {
     width: '300%'
   }
 }), ({
-  theme,
-  ownerState
-}) => (0, _extends2.default)({
+  theme
+}) => ({
   '&:hover': {
     backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _colorManipulator.alpha)(theme.palette.action.active, theme.palette.action.hoverOpacity),
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
       backgroundColor: 'transparent'
     }
-  }
-}, ownerState.color !== 'default' && {
-  [`&.${_switchClasses.default.checked}`]: {
-    color: (theme.vars || theme).palette[ownerState.color].main,
-    '&:hover': {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _colorManipulator.alpha)(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
-      '@media (hover: none)': {
-        backgroundColor: 'transparent'
-      }
+  },
+  variants: [...Object.entries(theme.palette).filter(([, value]) => value.main && value.light) // check all the used fields in the style below
+  .map(([color]) => ({
+    props: {
+      color
     },
-    [`&.${_switchClasses.default.disabled}`]: {
-      color: theme.vars ? theme.vars.palette.Switch[`${ownerState.color}DisabledColor`] : `${theme.palette.mode === 'light' ? (0, _colorManipulator.lighten)(theme.palette[ownerState.color].main, 0.62) : (0, _colorManipulator.darken)(theme.palette[ownerState.color].main, 0.55)}`
+    style: {
+      [`&.${_switchClasses.default.checked}`]: {
+        color: (theme.vars || theme).palette[color].main,
+        '&:hover': {
+          backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _colorManipulator.alpha)(theme.palette[color].main, theme.palette.action.hoverOpacity),
+          '@media (hover: none)': {
+            backgroundColor: 'transparent'
+          }
+        },
+        [`&.${_switchClasses.default.disabled}`]: {
+          color: theme.vars ? theme.vars.palette.Switch[`${color}DisabledColor`] : `${theme.palette.mode === 'light' ? (0, _colorManipulator.lighten)(theme.palette[color].main, 0.62) : (0, _colorManipulator.darken)(theme.palette[color].main, 0.55)}`
+        }
+      },
+      [`&.${_switchClasses.default.checked} + .${_switchClasses.default.track}`]: {
+        backgroundColor: (theme.vars || theme).palette[color].main
+      }
     }
-  },
-  [`&.${_switchClasses.default.checked} + .${_switchClasses.default.track}`]: {
-    backgroundColor: (theme.vars || theme).palette[ownerState.color].main
-  }
+  }))]
 }));
-const SwitchTrack = (0, _styled.default)('span', {
+const SwitchTrack = (0, _zeroStyled.styled)('span', {
   name: 'MuiSwitch',
   slot: 'Track',
   overridesResolver: (props, styles) => styles.track
@@ -173,7 +193,7 @@ const SwitchTrack = (0, _styled.default)('span', {
   backgroundColor: theme.vars ? theme.vars.palette.common.onBackground : `${theme.palette.mode === 'light' ? theme.palette.common.black : theme.palette.common.white}`,
   opacity: theme.vars ? theme.vars.opacity.switchTrack : `${theme.palette.mode === 'light' ? 0.38 : 0.3}`
 }));
-const SwitchThumb = (0, _styled.default)('span', {
+const SwitchThumb = (0, _zeroStyled.styled)('span', {
   name: 'MuiSwitch',
   slot: 'Thumb',
   overridesResolver: (props, styles) => styles.thumb
@@ -187,7 +207,7 @@ const SwitchThumb = (0, _styled.default)('span', {
   borderRadius: '50%'
 }));
 const Switch = /*#__PURE__*/React.forwardRef(function Switch(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiSwitch'
   });

package/node/TabScrollButton/TabScrollButton.js

@@ -14,10 +14,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/base/utils");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _RtlProvider = require("@mui/system/RtlProvider");
 var _KeyboardArrowLeft = _interopRequireDefault(require("../internal/svg-icons/KeyboardArrowLeft"));
 var _KeyboardArrowRight = _interopRequireDefault(require("../internal/svg-icons/KeyboardArrowRight"));
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
-var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _styled = _interopRequireDefault(require("../styles/styled"));
 var _tabScrollButtonClasses = _interopRequireWildcard(require("./tabScrollButtonClasses"));
@@ -74,8 +74,7 @@ const TabScrollButton = /*#__PURE__*/React.forwardRef(function TabScrollButton(i
       direction
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const theme = (0, _useTheme.default)();
-  const isRtl = theme.direction === 'rtl';
+  const isRtl = (0, _RtlProvider.useRtl)();
   const ownerState = (0, _extends2.default)({
     isRtl
   }, props);

package/node/TablePagination/TablePaginationActions.js

@@ -10,9 +10,9 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _RtlProvider = require("@mui/system/RtlProvider");
 var _KeyboardArrowLeft = _interopRequireDefault(require("../internal/svg-icons/KeyboardArrowLeft"));
 var _KeyboardArrowRight = _interopRequireDefault(require("../internal/svg-icons/KeyboardArrowRight"));
-var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
 var _IconButton = _interopRequireDefault(require("../IconButton"));
 var _LastPage = _interopRequireDefault(require("../internal/svg-icons/LastPage"));
 var _FirstPage = _interopRequireDefault(require("../internal/svg-icons/FirstPage"));
@@ -40,7 +40,7 @@ const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePagin
       slotProps = {}
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const theme = (0, _useTheme.default)();
+  const isRtl = (0, _RtlProvider.useRtl)();
   const handleFirstPageButtonClick = event => {
     onPageChange(event, 0);
   };
@@ -61,14 +61,14 @@ const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePagin
   const LastButtonIcon = (_slots$lastButtonIcon = slots.lastButtonIcon) != null ? _slots$lastButtonIcon : _LastPage.default;
   const NextButtonIcon = (_slots$nextButtonIcon = slots.nextButtonIcon) != null ? _slots$nextButtonIcon : _KeyboardArrowRight.default;
   const PreviousButtonIcon = (_slots$previousButton2 = slots.previousButtonIcon) != null ? _slots$previousButton2 : _KeyboardArrowLeft.default;
-  const FirstButtonSlot = theme.direction === 'rtl' ? LastButton : FirstButton;
-  const PreviousButtonSlot = theme.direction === 'rtl' ? NextButton : PreviousButton;
-  const NextButtonSlot = theme.direction === 'rtl' ? PreviousButton : NextButton;
-  const LastButtonSlot = theme.direction === 'rtl' ? FirstButton : LastButton;
-  const firstButtonSlotProps = theme.direction === 'rtl' ? slotProps.lastButton : slotProps.firstButton;
-  const previousButtonSlotProps = theme.direction === 'rtl' ? slotProps.nextButton : slotProps.previousButton;
-  const nextButtonSlotProps = theme.direction === 'rtl' ? slotProps.previousButton : slotProps.nextButton;
-  const lastButtonSlotProps = theme.direction === 'rtl' ? slotProps.firstButton : slotProps.lastButton;
+  const FirstButtonSlot = isRtl ? LastButton : FirstButton;
+  const PreviousButtonSlot = isRtl ? NextButton : PreviousButton;
+  const NextButtonSlot = isRtl ? PreviousButton : NextButton;
+  const LastButtonSlot = isRtl ? FirstButton : LastButton;
+  const firstButtonSlotProps = isRtl ? slotProps.lastButton : slotProps.firstButton;
+  const previousButtonSlotProps = isRtl ? slotProps.nextButton : slotProps.previousButton;
+  const nextButtonSlotProps = isRtl ? slotProps.previousButton : slotProps.nextButton;
+  const lastButtonSlotProps = isRtl ? slotProps.firstButton : slotProps.lastButton;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
     ref: ref
   }, other, {
@@ -78,7 +78,7 @@ const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePagin
       "aria-label": getItemAriaLabel('first', page),
       title: getItemAriaLabel('first', page)
     }, firstButtonSlotProps, {
-      children: theme.direction === 'rtl' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(LastButtonIcon, (0, _extends2.default)({}, slotProps.lastButtonIcon)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(FirstButtonIcon, (0, _extends2.default)({}, slotProps.firstButtonIcon))
+      children: isRtl ? /*#__PURE__*/(0, _jsxRuntime.jsx)(LastButtonIcon, (0, _extends2.default)({}, slotProps.lastButtonIcon)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(FirstButtonIcon, (0, _extends2.default)({}, slotProps.firstButtonIcon))
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(PreviousButtonSlot, (0, _extends2.default)({
       onClick: handleBackButtonClick,
       disabled: disabled || page === 0,
@@ -86,7 +86,7 @@ const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePagin
       "aria-label": getItemAriaLabel('previous', page),
       title: getItemAriaLabel('previous', page)
     }, previousButtonSlotProps != null ? previousButtonSlotProps : backIconButtonProps, {
-      children: theme.direction === 'rtl' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(NextButtonIcon, (0, _extends2.default)({}, slotProps.nextButtonIcon)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(PreviousButtonIcon, (0, _extends2.default)({}, slotProps.previousButtonIcon))
+      children: isRtl ? /*#__PURE__*/(0, _jsxRuntime.jsx)(NextButtonIcon, (0, _extends2.default)({}, slotProps.nextButtonIcon)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(PreviousButtonIcon, (0, _extends2.default)({}, slotProps.previousButtonIcon))
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(NextButtonSlot, (0, _extends2.default)({
       onClick: handleNextButtonClick,
       disabled: disabled || (count !== -1 ? page >= Math.ceil(count / rowsPerPage) - 1 : false),
@@ -94,14 +94,14 @@ const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePagin
       "aria-label": getItemAriaLabel('next', page),
       title: getItemAriaLabel('next', page)
     }, nextButtonSlotProps != null ? nextButtonSlotProps : nextIconButtonProps, {
-      children: theme.direction === 'rtl' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(PreviousButtonIcon, (0, _extends2.default)({}, slotProps.previousButtonIcon)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(NextButtonIcon, (0, _extends2.default)({}, slotProps.nextButtonIcon))
+      children: isRtl ? /*#__PURE__*/(0, _jsxRuntime.jsx)(PreviousButtonIcon, (0, _extends2.default)({}, slotProps.previousButtonIcon)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(NextButtonIcon, (0, _extends2.default)({}, slotProps.nextButtonIcon))
     })), showLastButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(LastButtonSlot, (0, _extends2.default)({
       onClick: handleLastPageButtonClick,
       disabled: disabled || page >= Math.ceil(count / rowsPerPage) - 1,
       "aria-label": getItemAriaLabel('last', page),
       title: getItemAriaLabel('last', page)
     }, lastButtonSlotProps, {
-      children: theme.direction === 'rtl' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(FirstButtonIcon, (0, _extends2.default)({}, slotProps.firstButtonIcon)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(LastButtonIcon, (0, _extends2.default)({}, slotProps.lastButtonIcon))
+      children: isRtl ? /*#__PURE__*/(0, _jsxRuntime.jsx)(FirstButtonIcon, (0, _extends2.default)({}, slotProps.firstButtonIcon)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(LastButtonIcon, (0, _extends2.default)({}, slotProps.lastButtonIcon))
     }))]
   }));
 });

package/node/Tabs/Tabs.js

@@ -15,6 +15,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _refType = _interopRequireDefault(require("@mui/utils/refType"));
 var _utils = require("@mui/base/utils");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _RtlProvider = require("@mui/system/RtlProvider");
 var _styled = _interopRequireDefault(require("../styles/styled"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
@@ -216,7 +217,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     name: 'MuiTabs'
   });
   const theme = (0, _useTheme.default)();
-  const isRtl = theme.direction === 'rtl';
+  const isRtl = (0, _RtlProvider.useRtl)();
   const {
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledBy,
@@ -304,7 +305,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
         clientWidth: tabsNode.clientWidth,
         scrollLeft: tabsNode.scrollLeft,
         scrollTop: tabsNode.scrollTop,
-        scrollLeftNormalized: (0, _scrollLeft.getNormalizedScrollLeft)(tabsNode, theme.direction),
+        scrollLeftNormalized: (0, _scrollLeft.getNormalizedScrollLeft)(tabsNode, isRtl ? 'rtl' : 'ltr'),
         scrollWidth: tabsNode.scrollWidth,
         top: rect.top,
         bottom: rect.bottom,

package/node/Tooltip/Tooltip.js

@@ -17,6 +17,7 @@ var _elementAcceptingRef = _interopRequireDefault(require("@mui/utils/elementAcc
 var _utils = require("@mui/base/utils");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _colorManipulator = require("@mui/system/colorManipulator");
+var _RtlProvider = require("@mui/system/RtlProvider");
 var _styled = _interopRequireDefault(require("../styles/styled"));
 var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
@@ -214,11 +215,11 @@ function testReset() {
   hystersisTimer.clear();
 }
 function composeEventHandler(handler, eventHandler) {
-  return event => {
+  return (event, ...params) => {
     if (eventHandler) {
-      eventHandler(event);
+      eventHandler(event, ...params);
     }
-    handler(event);
+    handler(event, ...params);
   };
 }
 
@@ -265,7 +266,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
     children: childrenProp
   });
   const theme = (0, _useTheme.default)();
-  const isRtl = theme.direction === 'rtl';
+  const isRtl = (0, _RtlProvider.useRtl)();
   const [childNode, setChildNode] = React.useState();
   const [arrowRef, setArrowRef] = React.useState(null);
   const ignoreNonTouchEvents = React.useRef(false);

package/node/index.js

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

package/node/styles/experimental_extendTheme.js

@@ -256,6 +256,9 @@ function extendTheme(options = {}, ...args) {
 
     // MUI X - DataGrid needs this token.
     setColorChannel(palette.background, 'default');
+
+    // added for consistency with the `background.default` token
+    setColorChannel(palette.background, 'paper');
     setColorChannel(palette.common, 'background');
     setColorChannel(palette.common, 'onBackground');
     setColorChannel(palette, 'divider');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.15.11",
+  "version": "5.15.13",
   "private": false,
   "author": "MUI Team",
   "description": "Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.",
@@ -34,11 +34,11 @@
     "prop-types": "^15.8.1",
     "react-is": "^18.2.0",
     "react-transition-group": "^4.4.5",
-    "@mui/base": "5.0.0-beta.37",
+    "@mui/base": "5.0.0-beta.39",
     "@mui/types": "^7.2.13",
-    "@mui/utils": "^5.15.11",
-    "@mui/system": "^5.15.11",
-    "@mui/core-downloads-tracker": "^5.15.11"
+    "@mui/system": "^5.15.13",
+    "@mui/utils": "^5.15.13",
+    "@mui/core-downloads-tracker": "^5.15.13"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",

package/styles/experimental_extendTheme.d.ts

@@ -69,6 +69,7 @@ export type Overlays = [
 
 export interface PaletteBackgroundChannel {
   defaultChannel: string;
+  paperChannel: string;
 }
 
 export interface PaletteCommonChannel {

package/styles/experimental_extendTheme.js

@@ -245,6 +245,9 @@ export default function extendTheme(options = {}, ...args) {
 
     // MUI X - DataGrid needs this token.
     setColorChannel(palette.background, 'default');
+
+    // added for consistency with the `background.default` token
+    setColorChannel(palette.background, 'paper');
     setColorChannel(palette.common, 'background');
     setColorChannel(palette.common, 'onBackground');
     setColorChannel(palette, 'divider');

package/styles/variants.d.ts

@@ -3,7 +3,13 @@ import { ComponentsPropsList } from './props';
 
 export type ComponentsVariants<Theme = unknown> = {
   [Name in keyof ComponentsPropsList]?: Array<{
-    props: Partial<ComponentsPropsList[Name]>;
+    props:
+      | Partial<ComponentsPropsList[Name]>
+      | ((
+          props: Partial<ComponentsPropsList[Name]> & {
+            ownerState: Partial<ComponentsPropsList[Name]>;
+          },
+        ) => boolean);
     style: Interpolation<{ theme: Theme }>;
   }>;
 };