@mui/material 5.15.5 → 5.15.7

package/node/ButtonBase/TouchRipple.js

@@ -13,6 +13,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactTransitionGroup = require("react-transition-group");
 var _clsx = _interopRequireDefault(require("clsx"));
 var _system = require("@mui/system");
+var _utils = require("@mui/utils");
 var _styled = _interopRequireDefault(require("../styles/styled"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _Ripple = _interopRequireDefault(require("./Ripple"));
@@ -159,18 +160,11 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
   const ignoringMouseDown = React.useRef(false);
   // We use a timer in order to only show the ripples for touch "click" like events.
   // We don't want to display the ripple for touch scroll events.
-  const startTimer = React.useRef(0);
+  const startTimer = (0, _utils.unstable_useTimeout)();
 
   // This is the hook called once the previous timeout is ready.
   const startTimerCommit = React.useRef(null);
   const container = React.useRef(null);
-  React.useEffect(() => {
-    return () => {
-      if (startTimer.current) {
-        clearTimeout(startTimer.current);
-      }
-    };
-  }, []);
   const startCommit = React.useCallback(params => {
     const {
       pulsate,
@@ -263,12 +257,13 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
           });
         };
         // Delay the execution of the ripple effect.
-        startTimer.current = setTimeout(() => {
+        // We have to make a tradeoff with this delay value.
+        startTimer.start(DELAY_RIPPLE, () => {
           if (startTimerCommit.current) {
             startTimerCommit.current();
             startTimerCommit.current = null;
           }
-        }, DELAY_RIPPLE); // We have to make a tradeoff with this value.
+        });
       }
     } else {
       startCommit({
@@ -279,21 +274,21 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
         cb
       });
     }
-  }, [centerProp, startCommit]);
+  }, [centerProp, startCommit, startTimer]);
   const pulsate = React.useCallback(() => {
     start({}, {
       pulsate: true
     });
   }, [start]);
   const stop = React.useCallback((event, cb) => {
-    clearTimeout(startTimer.current);
+    startTimer.clear();
 
     // The touch interaction occurs too quickly.
     // We still want to show ripple effect.
     if ((event == null ? void 0 : event.type) === 'touchend' && startTimerCommit.current) {
       startTimerCommit.current();
       startTimerCommit.current = null;
-      startTimer.current = setTimeout(() => {
+      startTimer.start(0, () => {
         stop(event, cb);
       });
       return;
@@ -306,7 +301,7 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
       return oldRipples;
     });
     rippleCallback.current = cb;
-  }, []);
+  }, [startTimer]);
   React.useImperativeHandle(ref, () => ({
     pulsate,
     start,

package/node/Collapse/Collapse.js

@@ -131,17 +131,12 @@ const Collapse = /*#__PURE__*/React.forwardRef(function Collapse(inProps, ref) {
   });
   const classes = useUtilityClasses(ownerState);
   const theme = (0, _useTheme.default)();
-  const timer = React.useRef();
+  const timer = (0, _utils.unstable_useTimeout)();
   const wrapperRef = React.useRef(null);
   const autoTransitionDuration = React.useRef();
   const collapsedSize = typeof collapsedSizeProp === 'number' ? `${collapsedSizeProp}px` : collapsedSizeProp;
   const isHorizontal = orientation === 'horizontal';
   const size = isHorizontal ? 'width' : 'height';
-  React.useEffect(() => {
-    return () => {
-      clearTimeout(timer.current);
-    };
-  }, []);
   const nodeRef = React.useRef(null);
   const handleRef = (0, _utils3.useForkRef)(ref, nodeRef);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
@@ -238,7 +233,7 @@ const Collapse = /*#__PURE__*/React.forwardRef(function Collapse(inProps, ref) {
   });
   const handleAddEndListener = next => {
     if (timeout === 'auto') {
-      timer.current = setTimeout(next, autoTransitionDuration.current || 0);
+      timer.start(autoTransitionDuration.current || 0, next);
     }
     if (addEndListener) {
       // Old call signature before `react-transition-group` implemented `nodeRef`

package/node/Grow/Grow.js

@@ -63,7 +63,7 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
       TransitionComponent = _reactTransitionGroup.Transition
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const timer = React.useRef();
+  const timer = (0, _utils.unstable_useTimeout)();
   const autoTimeout = React.useRef();
   const theme = (0, _useTheme.default)();
   const nodeRef = React.useRef(null);
@@ -152,18 +152,13 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
   const handleExited = normalizedTransitionCallback(onExited);
   const handleAddEndListener = next => {
     if (timeout === 'auto') {
-      timer.current = setTimeout(next, autoTimeout.current || 0);
+      timer.start(autoTimeout.current || 0, next);
     }
     if (addEndListener) {
       // Old call signature before `react-transition-group` implemented `nodeRef`
       addEndListener(nodeRef.current, next);
     }
   };
-  React.useEffect(() => {
-    return () => {
-      clearTimeout(timer.current);
-    };
-  }, []);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionComponent, (0, _extends2.default)({
     appear: appear,
     in: inProp,

package/node/PaginationItem/PaginationItem.js

@@ -45,7 +45,7 @@ const useUtilityClasses = ownerState => {
     variant
   } = ownerState;
   const slots = {
-    root: ['root', `size${(0, _capitalize.default)(size)}`, variant, shape, color !== 'standard' && `${variant}${(0, _capitalize.default)(color)}`, disabled && 'disabled', selected && 'selected', {
+    root: ['root', `size${(0, _capitalize.default)(size)}`, variant, shape, color !== 'standard' && `color${(0, _capitalize.default)(color)}`, color !== 'standard' && `${variant}${(0, _capitalize.default)(color)}`, disabled && 'disabled', selected && 'selected', {
       page: 'page',
       first: 'firstLast',
       last: 'firstLast',

package/node/PaginationItem/paginationItemClasses.js

@@ -11,5 +11,5 @@ var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateU
 function getPaginationItemUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiPaginationItem', slot);
 }
-const paginationItemClasses = (0, _generateUtilityClasses.default)('MuiPaginationItem', ['root', 'page', 'sizeSmall', 'sizeLarge', 'text', 'textPrimary', 'textSecondary', 'outlined', 'outlinedPrimary', 'outlinedSecondary', 'rounded', 'ellipsis', 'firstLast', 'previousNext', 'focusVisible', 'disabled', 'selected', 'icon']);
+const paginationItemClasses = (0, _generateUtilityClasses.default)('MuiPaginationItem', ['root', 'page', 'sizeSmall', 'sizeLarge', 'text', 'textPrimary', 'textSecondary', 'outlined', 'outlinedPrimary', 'outlinedSecondary', 'rounded', 'ellipsis', 'firstLast', 'previousNext', 'focusVisible', 'disabled', 'selected', 'icon', 'colorPrimary', 'colorSecondary']);
 var _default = exports.default = paginationItemClasses;

package/node/Rating/Rating.js

@@ -82,6 +82,7 @@ const RatingRoot = (0, _styled.default)('span', {
   color: '#faaf00',
   cursor: 'pointer',
   textAlign: 'left',
+  width: 'min-content',
   WebkitTapHighlightColor: 'transparent',
   [`&.${_ratingClasses.default.disabled}`]: {
     opacity: (theme.vars || theme).palette.action.disabledOpacity,

package/node/Rating/index.js

@@ -1,5 +1,4 @@
 "use strict";
-'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {

package/node/Select/Select.js

@@ -130,7 +130,7 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
       }, inputProps, {
         classes: inputProps ? (0, _utils.deepmerge)(restOfClasses, inputProps.classes) : restOfClasses
       }, input ? input.props.inputProps : {})
-    }, multiple && native && variant === 'outlined' ? {
+    }, (multiple && native || displayEmpty) && variant === 'outlined' ? {
       notched: true
     } : {}, {
       ref: inputComponentRef,

package/node/SpeedDial/SpeedDial.js

@@ -170,12 +170,7 @@ const SpeedDial = /*#__PURE__*/React.forwardRef(function SpeedDial(inProps, ref)
     direction
   });
   const classes = useUtilityClasses(ownerState);
-  const eventTimer = React.useRef();
-  React.useEffect(() => {
-    return () => {
-      clearTimeout(eventTimer.current);
-    };
-  }, []);
+  const eventTimer = (0, _utils.unstable_useTimeout)();
 
   /**
    * an index in actions.current
@@ -259,9 +254,9 @@ const SpeedDial = /*#__PURE__*/React.forwardRef(function SpeedDial(inProps, ref)
     if (event.type === 'blur' && onBlur) {
       onBlur(event);
     }
-    clearTimeout(eventTimer.current);
+    eventTimer.clear();
     if (event.type === 'blur') {
-      eventTimer.current = setTimeout(() => {
+      eventTimer.start(0, () => {
         setOpenState(false);
         if (onClose) {
           onClose(event, 'blur');
@@ -278,7 +273,7 @@ const SpeedDial = /*#__PURE__*/React.forwardRef(function SpeedDial(inProps, ref)
     if (FabProps.onClick) {
       FabProps.onClick(event);
     }
-    clearTimeout(eventTimer.current);
+    eventTimer.clear();
     if (open) {
       setOpenState(false);
       if (onClose) {
@@ -302,10 +297,10 @@ const SpeedDial = /*#__PURE__*/React.forwardRef(function SpeedDial(inProps, ref)
     // When moving the focus between two items,
     // a chain if blur and focus event is triggered.
     // We only handle the last event.
-    clearTimeout(eventTimer.current);
+    eventTimer.clear();
     if (!open) {
       // Wait for a future focus or click event
-      eventTimer.current = setTimeout(() => {
+      eventTimer.start(0, () => {
         setOpenState(true);
         if (onOpen) {
           const eventMap = {

package/node/Toolbar/index.js

@@ -1,5 +1,4 @@
 "use strict";
-'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {

package/node/Tooltip/Tooltip.js

@@ -202,14 +202,14 @@ const TooltipArrow = (0, _styled.default)('span', {
   }
 }));
 let hystersisOpen = false;
-let hystersisTimer = null;
+const hystersisTimer = new _utils.unstable_Timeout();
 let cursorPosition = {
   x: 0,
   y: 0
 };
 function testReset() {
   hystersisOpen = false;
-  clearTimeout(hystersisTimer);
+  hystersisTimer.clear();
 }
 function composeEventHandler(handler, eventHandler) {
   return event => {
@@ -268,10 +268,10 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   const [arrowRef, setArrowRef] = React.useState(null);
   const ignoreNonTouchEvents = React.useRef(false);
   const disableInteractive = disableInteractiveProp || followCursor;
-  const closeTimer = React.useRef();
-  const enterTimer = React.useRef();
-  const leaveTimer = React.useRef();
-  const touchTimer = React.useRef();
+  const closeTimer = (0, _utils.unstable_useTimeout)();
+  const enterTimer = (0, _utils.unstable_useTimeout)();
+  const leaveTimer = (0, _utils.unstable_useTimeout)();
+  const touchTimer = (0, _utils.unstable_useTimeout)();
   const [openState, setOpenState] = (0, _useControlled.default)({
     controlled: openProp,
     default: false,
@@ -294,23 +294,16 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   }
   const id = (0, _useId.default)(idProp);
   const prevUserSelect = React.useRef();
-  const stopTouchInteraction = React.useCallback(() => {
+  const stopTouchInteraction = (0, _useEventCallback.default)(() => {
     if (prevUserSelect.current !== undefined) {
       document.body.style.WebkitUserSelect = prevUserSelect.current;
       prevUserSelect.current = undefined;
     }
-    clearTimeout(touchTimer.current);
-  }, []);
-  React.useEffect(() => {
-    return () => {
-      clearTimeout(closeTimer.current);
-      clearTimeout(enterTimer.current);
-      clearTimeout(leaveTimer.current);
-      stopTouchInteraction();
-    };
-  }, [stopTouchInteraction]);
+    touchTimer.clear();
+  });
+  React.useEffect(() => stopTouchInteraction, [stopTouchInteraction]);
   const handleOpen = event => {
-    clearTimeout(hystersisTimer);
+    hystersisTimer.clear();
     hystersisOpen = true;
 
     // The mouseover event will trigger for every nested element in the tooltip.
@@ -326,18 +319,16 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
    * @param {React.SyntheticEvent | Event} event
    */
   event => {
-    clearTimeout(hystersisTimer);
-    hystersisTimer = setTimeout(() => {
+    hystersisTimer.start(800 + leaveDelay, () => {
       hystersisOpen = false;
-    }, 800 + leaveDelay);
+    });
     setOpenState(false);
     if (onClose && open) {
       onClose(event);
     }
-    clearTimeout(closeTimer.current);
-    closeTimer.current = setTimeout(() => {
+    closeTimer.start(theme.transitions.duration.shortest, () => {
       ignoreNonTouchEvents.current = false;
-    }, theme.transitions.duration.shortest);
+    });
   });
   const handleEnter = event => {
     if (ignoreNonTouchEvents.current && event.type !== 'touchstart') {
@@ -350,22 +341,21 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
     if (childNode) {
       childNode.removeAttribute('title');
     }
-    clearTimeout(enterTimer.current);
-    clearTimeout(leaveTimer.current);
+    enterTimer.clear();
+    leaveTimer.clear();
     if (enterDelay || hystersisOpen && enterNextDelay) {
-      enterTimer.current = setTimeout(() => {
+      enterTimer.start(hystersisOpen ? enterNextDelay : enterDelay, () => {
         handleOpen(event);
-      }, hystersisOpen ? enterNextDelay : enterDelay);
+      });
     } else {
       handleOpen(event);
     }
   };
   const handleLeave = event => {
-    clearTimeout(enterTimer.current);
-    clearTimeout(leaveTimer.current);
-    leaveTimer.current = setTimeout(() => {
+    enterTimer.clear();
+    leaveTimer.start(leaveDelay, () => {
       handleClose(event);
-    }, leaveDelay);
+    });
   };
   const {
     isFocusVisibleRef,
@@ -407,26 +397,25 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   const handleMouseLeave = handleLeave;
   const handleTouchStart = event => {
     detectTouchStart(event);
-    clearTimeout(leaveTimer.current);
-    clearTimeout(closeTimer.current);
+    leaveTimer.clear();
+    closeTimer.clear();
     stopTouchInteraction();
     prevUserSelect.current = document.body.style.WebkitUserSelect;
     // Prevent iOS text selection on long-tap.
     document.body.style.WebkitUserSelect = 'none';
-    touchTimer.current = setTimeout(() => {
+    touchTimer.start(enterTouchDelay, () => {
       document.body.style.WebkitUserSelect = prevUserSelect.current;
       handleEnter(event);
-    }, enterTouchDelay);
+    });
   };
   const handleTouchEnd = event => {
     if (children.props.onTouchEnd) {
       children.props.onTouchEnd(event);
     }
     stopTouchInteraction();
-    clearTimeout(leaveTimer.current);
-    leaveTimer.current = setTimeout(() => {
+    leaveTimer.start(leaveTouchDelay, () => {
       handleClose(event);
-    }, leaveTouchDelay);
+    });
   };
   React.useEffect(() => {
     if (!open) {

package/node/index.js

@@ -1,14 +1,12 @@
 /**
- * @mui/material v5.15.5
+ * @mui/material v5.15.7
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
 "use strict";
-'use client';
 
-/* eslint-disable import/export */
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true

package/node/zero-styled/index.js

@@ -4,10 +4,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.createUseThemeProps = createUseThemeProps;
 Object.defineProperty(exports, "styled", {
   enumerable: true,
   get: function () {
     return _styled.default;
   }
 });
-var _styled = _interopRequireDefault(require("../styles/styled"));
+var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _styled = _interopRequireDefault(require("../styles/styled"));
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function createUseThemeProps(name) {
+  return _useThemeProps.default;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.15.5",
+  "version": "5.15.7",
   "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.",
@@ -27,18 +27,18 @@
     "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/runtime": "^7.23.8",
+    "@babel/runtime": "^7.23.9",
     "@types/react-transition-group": "^4.4.10",
     "clsx": "^2.1.0",
     "csstype": "^3.1.2",
     "prop-types": "^15.8.1",
     "react-is": "^18.2.0",
     "react-transition-group": "^4.4.5",
-    "@mui/base": "5.0.0-beta.32",
-    "@mui/core-downloads-tracker": "^5.15.5",
-    "@mui/system": "^5.15.5",
-    "@mui/utils": "^5.15.5",
-    "@mui/types": "^7.2.13"
+    "@mui/base": "5.0.0-beta.34",
+    "@mui/types": "^7.2.13",
+    "@mui/core-downloads-tracker": "^5.15.7",
+    "@mui/system": "^5.15.7",
+    "@mui/utils": "^5.15.7"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",

package/styles/experimental_extendTheme.d.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import { OverridableStringUnion } from '@mui/types';
-import { SxConfig, SxProps, CSSObject } from '@mui/system';
+import { SxConfig, SxProps, CSSObject, ApplyStyles } from '@mui/system';
 import { ThemeOptions, Theme } from './createTheme';
 import { Palette, PaletteOptions } from './createPalette';
 import { Shadows } from './shadows';
@@ -432,6 +432,7 @@ export interface CssVarsTheme extends ColorSystem {
   shouldSkipGeneratingVar: (keys: string[], value: string | number) => boolean;
   unstable_sxConfig: SxConfig;
   unstable_sx: (props: SxProps<CssVarsTheme>) => CSSObject;
+  applyStyles: ApplyStyles<SupportedColorScheme>;
 }
 
 /**
@@ -443,4 +444,4 @@ export interface CssVarsTheme extends ColorSystem {
 export default function experimental_extendTheme(
   options?: CssVarsThemeOptions,
   ...args: object[]
-): Omit<Theme, 'palette'> & CssVarsTheme;
+): Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme;