@mui/material 5.13.5 → 5.13.7

package/modern/SvgIcon/SvgIcon.js

@@ -39,7 +39,9 @@ const SvgIconRoot = styled('svg', {
   width: '1em',
   height: '1em',
   display: 'inline-block',
-  fill: 'currentColor',
+  // the <svg> will define the property that has `currentColor`
+  // e.g. heroicons uses fill="none" and stroke="currentColor"
+  fill: ownerState.hasSvgAsChild ? undefined : 'currentColor',
   flexShrink: 0,
   transition: theme.transitions?.create?.('fill', {
     duration: theme.transitions?.duration?.shorter
@@ -74,13 +76,15 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
       viewBox = '0 0 24 24'
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const hasSvgAsChild = /*#__PURE__*/React.isValidElement(children) && children.type === 'svg';
   const ownerState = _extends({}, props, {
     color,
     component,
     fontSize,
     instanceFontSize: inProps.fontSize,
     inheritViewBox,
-    viewBox
+    viewBox,
+    hasSvgAsChild
   });
   const more = {};
   if (!inheritViewBox) {
@@ -95,9 +99,9 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
     "aria-hidden": titleAccess ? undefined : true,
     role: titleAccess ? 'img' : undefined,
     ref: ref
-  }, more, other, {
+  }, more, other, hasSvgAsChild && children.props, {
     ownerState: ownerState,
-    children: [children, titleAccess ? /*#__PURE__*/_jsx("title", {
+    children: [hasSvgAsChild ? children.props.children : children, titleAccess ? /*#__PURE__*/_jsx("title", {
       children: titleAccess
     }) : null]
   }));

package/modern/Tooltip/Tooltip.js

@@ -218,7 +218,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   });
   const {
       arrow = false,
-      children,
+      children: childrenProp,
       components = {},
       componentsProps = {},
       describeChild = false,
@@ -246,6 +246,11 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       TransitionProps
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  // to prevent runtime errors, developers will need to provide a child as a React element anyway.
+  const children = /*#__PURE__*/React.isValidElement(childrenProp) ? childrenProp : /*#__PURE__*/_jsx("span", {
+    children: childrenProp
+  });
   const theme = useTheme();
   const isRtl = theme.direction === 'rtl';
   const [childNode, setChildNode] = React.useState();

package/modern/index.js

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

package/node/ButtonBase/TouchRipple.js

@@ -161,14 +161,16 @@ 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(null);
+  const startTimer = React.useRef(0);
 
   // This is the hook called once the previous timeout is ready.
   const startTimerCommit = React.useRef(null);
   const container = React.useRef(null);
   React.useEffect(() => {
     return () => {
-      clearTimeout(startTimer.current);
+      if (startTimer.current) {
+        clearTimeout(startTimer.current);
+      }
     };
   }, []);
   const startCommit = React.useCallback(params => {

package/node/Modal/Modal.js

@@ -291,6 +291,14 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes /* remove-proptypes */ =
    * @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`.
    */
   onClose: _propTypes.default.func,
+  /**
+   * A function called when a transition enters.
+   */
+  onTransitionEnter: _propTypes.default.func,
+  /**
+   * A function called when a transition has exited.
+   */
+  onTransitionExited: _propTypes.default.func,
   /**
    * If `true`, the component is shown.
    */

package/node/OutlinedInput/OutlinedInput.js

@@ -146,7 +146,7 @@ const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inPro
   const fcs = (0, _formControlState.default)({
     props,
     muiFormControl,
-    states: ['required']
+    states: ['color', 'disabled', 'error', 'focused', 'hiddenLabel', 'size', 'required']
   });
   const ownerState = (0, _extends2.default)({}, props, {
     color: fcs.color || 'primary',

package/node/Slider/Slider.js

@@ -515,7 +515,8 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     marks,
     values,
     trackOffset,
-    trackLeap
+    trackLeap,
+    getThumbStyle
   } = (0, _useSlider.default)((0, _extends2.default)({}, ownerState, {
     rootRef: ref
   }));
@@ -646,9 +647,7 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
             "data-index": index
           }, thumbProps, {
             className: (0, _clsx.default)(classes.thumb, thumbProps.className, active === index && classes.active, focusedThumbIndex === index && classes.focusVisible),
-            style: (0, _extends2.default)({}, style, {
-              pointerEvents: disableSwap && active !== index ? 'none' : undefined
-            }, thumbProps.style),
+            style: (0, _extends2.default)({}, style, getThumbStyle(index), thumbProps.style),
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(InputSlot, (0, _extends2.default)({
               "data-index": index,
               "aria-label": getAriaLabel ? getAriaLabel(index) : ariaLabel,

package/node/SvgIcon/SvgIcon.js

@@ -49,7 +49,9 @@ const SvgIconRoot = (0, _styled.default)('svg', {
     width: '1em',
     height: '1em',
     display: 'inline-block',
-    fill: 'currentColor',
+    // the <svg> will define the property that has `currentColor`
+    // e.g. heroicons uses fill="none" and stroke="currentColor"
+    fill: ownerState.hasSvgAsChild ? undefined : 'currentColor',
     flexShrink: 0,
     transition: (_theme$transitions = theme.transitions) == null ? void 0 : (_theme$transitions$cr = _theme$transitions.create) == null ? void 0 : _theme$transitions$cr.call(_theme$transitions, 'fill', {
       duration: (_theme$transitions2 = theme.transitions) == null ? void 0 : (_theme$transitions2$d = _theme$transitions2.duration) == null ? void 0 : _theme$transitions2$d.shorter
@@ -85,13 +87,15 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
       viewBox = '0 0 24 24'
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const hasSvgAsChild = /*#__PURE__*/React.isValidElement(children) && children.type === 'svg';
   const ownerState = (0, _extends2.default)({}, props, {
     color,
     component,
     fontSize,
     instanceFontSize: inProps.fontSize,
     inheritViewBox,
-    viewBox
+    viewBox,
+    hasSvgAsChild
   });
   const more = {};
   if (!inheritViewBox) {
@@ -106,9 +110,9 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
     "aria-hidden": titleAccess ? undefined : true,
     role: titleAccess ? 'img' : undefined,
     ref: ref
-  }, more, other, {
+  }, more, other, hasSvgAsChild && children.props, {
     ownerState: ownerState,
-    children: [children, titleAccess ? /*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
+    children: [hasSvgAsChild ? children.props.children : children, titleAccess ? /*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
       children: titleAccess
     }) : null]
   }));

package/node/Tooltip/Tooltip.js

@@ -228,7 +228,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   });
   const {
       arrow = false,
-      children,
+      children: childrenProp,
       components = {},
       componentsProps = {},
       describeChild = false,
@@ -256,6 +256,11 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       TransitionProps
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+
+  // to prevent runtime errors, developers will need to provide a child as a React element anyway.
+  const children = /*#__PURE__*/React.isValidElement(childrenProp) ? childrenProp : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    children: childrenProp
+  });
   const theme = (0, _useTheme.default)();
   const isRtl = theme.direction === 'rtl';
   const [childNode, setChildNode] = React.useState();

package/node/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.13.5",
+  "version": "5.13.7",
   "private": false,
   "author": "MUI Team",
   "description": "React components that implement Google's Material Design.",
@@ -21,7 +21,7 @@
   "bugs": {
     "url": "https://github.com/mui/material-ui/issues"
   },
-  "homepage": "https://mui.com/material-ui/getting-started/overview/",
+  "homepage": "https://mui.com/material-ui/getting-started/",
   "funding": {
     "type": "opencollective",
     "url": "https://opencollective.com/mui"
@@ -45,12 +45,12 @@
     }
   },
   "dependencies": {
-    "@babel/runtime": "^7.21.0",
-    "@mui/base": "5.0.0-beta.4",
-    "@mui/core-downloads-tracker": "^5.13.4",
-    "@mui/system": "^5.13.5",
+    "@babel/runtime": "^7.22.5",
+    "@mui/base": "5.0.0-beta.6",
+    "@mui/core-downloads-tracker": "^5.13.7",
+    "@mui/system": "^5.13.7",
     "@mui/types": "^7.2.4",
-    "@mui/utils": "^5.13.1",
+    "@mui/utils": "^5.13.7",
     "@types/react-transition-group": "^4.4.6",
     "clsx": "^1.2.1",
     "csstype": "^3.1.2",

package/styles/experimental_extendTheme.d.ts

@@ -421,6 +421,7 @@ export interface CssVarsTheme extends ColorSystem {
   shadows: Theme['shadows'];
   mixins: Theme['mixins'];
   zIndex: Theme['zIndex'];
+  direction: Theme['direction'];
   /**
    * A function to determine if the key, value should be attached as CSS Variable
    * `keys` is an array that represents the object path keys.

package/umd/material-ui.development.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.13.5
+ * @mui/material v5.13.7
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -1968,6 +1968,7 @@
     let timeout;
     function debounced(...args) {
       const later = () => {
+        // @ts-ignore
         func.apply(this, args);
       };
       clearTimeout(timeout);
@@ -4270,7 +4271,7 @@
 
   var pkg = {
   	name: "@emotion/react",
-  	version: "11.11.0",
+  	version: "11.11.1",
   	main: "dist/emotion-react.cjs.js",
   	module: "dist/emotion-react.esm.js",
   	browser: {
@@ -9738,7 +9739,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           };
         }
         return {
-          '& > :not(style) + :not(style)': {
+          '& > :not(style) ~ :not(style)': {
             margin: 0,
             [`margin${getSideFromDirection(breakpoint ? directionValues[breakpoint] : ownerState.direction)}`]: getValue(transformer, propValue)
           }
@@ -11170,9 +11171,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
    * If `componentProps` is a function, calls it with the provided `ownerState`.
    * Otherwise, just returns `componentProps`.
    */
-  function resolveComponentProps(componentProps, ownerState) {
+  function resolveComponentProps(componentProps, ownerState, slotState) {
     if (typeof componentProps === 'function') {
-      return componentProps(ownerState);
+      return componentProps(ownerState, slotState);
     }
     return componentProps;
   }
@@ -11261,7 +11262,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     };
   }
 
-  const _excluded$27 = ["elementType", "externalSlotProps", "ownerState"];
+  const _excluded$27 = ["elementType", "externalSlotProps", "ownerState", "skipResolvingSlotProps"];
   /**
    * @ignore - do not document.
    * Builds the props to be passed into the slot of an unstyled component.
@@ -11275,10 +11276,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const {
         elementType,
         externalSlotProps,
-        ownerState
+        ownerState,
+        skipResolvingSlotProps = false
       } = parameters,
       rest = _objectWithoutPropertiesLoose(parameters, _excluded$27);
-    const resolvedComponentsProps = resolveComponentProps(externalSlotProps, ownerState);
+    const resolvedComponentsProps = skipResolvingSlotProps ? {} : resolveComponentProps(externalSlotProps, ownerState);
     const {
       props: mergedProps,
       internalRef
@@ -14616,6 +14618,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`.
      */
     onClose: PropTypes.func,
+    /**
+     * A function called when a transition enters.
+     */
+    onTransitionEnter: PropTypes.func,
+    /**
+     * A function called when a transition has exited.
+     */
+    onTransitionExited: PropTypes.func,
     /**
      * If `true`, the component is shown.
      */
@@ -14980,13 +14990,16 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       // @ts-ignore
       let newValue = event.target.valueAsNumber;
       if (marks && step == null) {
-        newValue = newValue < value ? marksValues[marksIndex - 1] : marksValues[marksIndex + 1];
+        const maxMarksValue = marksValues[marksValues.length - 1];
+        if (newValue > maxMarksValue) {
+          newValue = maxMarksValue;
+        } else if (newValue < marksValues[0]) {
+          newValue = marksValues[0];
+        } else {
+          newValue = newValue < value ? marksValues[marksIndex - 1] : marksValues[marksIndex + 1];
+        }
       }
       newValue = clamp$2(newValue, min, max);
-      if (marks && step == null) {
-        const currentMarkIndex = marksValues.indexOf(values[index]);
-        newValue = newValue < values[index] ? marksValues[currentMarkIndex - 1] : marksValues[currentMarkIndex + 1];
-      }
       if (range) {
         // Bound the new value to the thumb's neighbours.
         if (disableSwap) {
@@ -15274,6 +15287,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       };
       return _extends({}, otherHandlers, ownEventHandlers);
     };
+    const getThumbStyle = index => {
+      return {
+        // So the non active thumb doesn't show its label on hover.
+        pointerEvents: active !== -1 && active !== index ? 'none' : undefined
+      };
+    };
     const getHiddenInputProps = (otherHandlers = {}) => {
       var _parameters$step;
       const ownEventHandlers = {
@@ -15292,7 +15311,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         type: 'range',
         min: parameters.min,
         max: parameters.max,
-        step: (_parameters$step = parameters.step) != null ? _parameters$step : undefined,
+        step: parameters.step === null && parameters.marks ? 'any' : (_parameters$step = parameters.step) != null ? _parameters$step : undefined,
         disabled
       }, mergedEventHandlers, {
         style: _extends({}, visuallyHidden$1, {
@@ -15318,7 +15337,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       rootRef: handleRef,
       trackLeap,
       trackOffset,
-      values
+      values,
+      getThumbStyle
     };
   }
 
@@ -15664,7 +15684,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         ref: shadowRef,
         tabIndex: -1,
         style: _extends({}, styles$5.shadow, style, {
-          padding: 0
+          paddingTop: 0,
+          paddingBottom: 0
         })
       })]
     });
@@ -15888,7 +15909,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }) : [];
     const previousProps = usePreviousProps$1({
       filteredOptions,
-      value
+      value,
+      inputValue
     });
     React__namespace.useEffect(() => {
       const valueChange = value !== previousProps.value;
@@ -16081,7 +16103,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         const label2 = value2 ? getOptionLabel(value2) : '';
         return label1 === label2;
       };
-      if (highlightedIndexRef.current !== -1 && previousProps.filteredOptions && previousProps.filteredOptions.length !== filteredOptions.length && (multiple ? value.length === previousProps.value.length && previousProps.value.every((val, i) => getOptionLabel(value[i]) === getOptionLabel(val)) : isSameValue(previousProps.value, value))) {
+      if (highlightedIndexRef.current !== -1 && previousProps.filteredOptions && previousProps.filteredOptions.length !== filteredOptions.length && previousProps.inputValue === inputValue && (multiple ? value.length === previousProps.value.length && previousProps.value.every((val, i) => getOptionLabel(value[i]) === getOptionLabel(val)) : isSameValue(previousProps.value, value))) {
         const previousHighlightedOption = previousProps.filteredOptions[highlightedIndexRef.current];
         if (previousHighlightedOption) {
           const previousHighlightedOptionExists = filteredOptions.some(option => {
@@ -16099,8 +16121,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         return;
       }
 
-      // Check if the previously highlighted option still exists in the updated filtered options list and if the value hasn't changed
-      // If it exists and the value hasn't changed, return, otherwise continue execution
+      // Check if the previously highlighted option still exists in the updated filtered options list and if the value and inputValue haven't changed
+      // If it exists and the value and the inputValue haven't changed, return, otherwise continue execution
       if (checkHighlightedOptionExists()) {
         return;
       }
@@ -16717,7 +16739,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       width: '1em',
       height: '1em',
       display: 'inline-block',
-      fill: 'currentColor',
+      // the <svg> will define the property that has `currentColor`
+      // e.g. heroicons uses fill="none" and stroke="currentColor"
+      fill: ownerState.hasSvgAsChild ? undefined : 'currentColor',
       flexShrink: 0,
       transition: (_theme$transitions = theme.transitions) == null ? void 0 : (_theme$transitions$cr = _theme$transitions.create) == null ? void 0 : _theme$transitions$cr.call(_theme$transitions, 'fill', {
         duration: (_theme$transitions2 = theme.transitions) == null ? void 0 : (_theme$transitions2$d = _theme$transitions2.duration) == null ? void 0 : _theme$transitions2$d.shorter
@@ -16753,13 +16777,15 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         viewBox = '0 0 24 24'
       } = props,
       other = _objectWithoutPropertiesLoose(props, _excluded$23);
+    const hasSvgAsChild = /*#__PURE__*/React__namespace.isValidElement(children) && children.type === 'svg';
     const ownerState = _extends({}, props, {
       color,
       component,
       fontSize,
       instanceFontSize: inProps.fontSize,
       inheritViewBox,
-      viewBox
+      viewBox,
+      hasSvgAsChild
     });
     const more = {};
     if (!inheritViewBox) {
@@ -16774,9 +16800,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       "aria-hidden": titleAccess ? undefined : true,
       role: titleAccess ? 'img' : undefined,
       ref: ref
-    }, more, other, {
+    }, more, other, hasSvgAsChild && children.props, {
       ownerState: ownerState,
-      children: [children, titleAccess ? /*#__PURE__*/jsxRuntime_1("title", {
+      children: [hasSvgAsChild ? children.props.children : children, titleAccess ? /*#__PURE__*/jsxRuntime_1("title", {
         children: titleAccess
       }) : null]
     }));
@@ -19029,14 +19055,16 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const ignoringMouseDown = React__namespace.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__namespace.useRef(null);
+    const startTimer = React__namespace.useRef(0);
 
     // This is the hook called once the previous timeout is ready.
     const startTimerCommit = React__namespace.useRef(null);
     const container = React__namespace.useRef(null);
     React__namespace.useEffect(() => {
       return () => {
-        clearTimeout(startTimer.current);
+        if (startTimer.current) {
+          clearTimeout(startTimer.current);
+        }
       };
     }, []);
     const startCommit = React__namespace.useCallback(params => {
@@ -27759,6 +27787,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`.
      */
     onClose: PropTypes.func,
+    /**
+     * A function called when a transition enters.
+     */
+    onTransitionEnter: PropTypes.func,
+    /**
+     * A function called when a transition has exited.
+     */
+    onTransitionExited: PropTypes.func,
     /**
      * If `true`, the component is shown.
      */
@@ -37584,7 +37620,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const fcs = formControlState({
       props,
       muiFormControl,
-      states: ['required']
+      states: ['color', 'disabled', 'error', 'focused', 'hiddenLabel', 'size', 'required']
     });
     const ownerState = _extends({}, props, {
       color: fcs.color || 'primary',
@@ -41277,7 +41313,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       marks,
       values,
       trackOffset,
-      trackLeap
+      trackLeap,
+      getThumbStyle
     } = useSlider(_extends({}, ownerState, {
       rootRef: ref
     }));
@@ -41408,9 +41445,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
               "data-index": index
             }, thumbProps, {
               className: clsx(classes.thumb, thumbProps.className, active === index && classes.active, focusedThumbIndex === index && classes.focusVisible),
-              style: _extends({}, style, {
-                pointerEvents: disableSwap && active !== index ? 'none' : undefined
-              }, thumbProps.style),
+              style: _extends({}, style, getThumbStyle(index), thumbProps.style),
               children: /*#__PURE__*/jsxRuntime_1(InputSlot, _extends({
                 "data-index": index,
                 "aria-label": getAriaLabel ? getAriaLabel(index) : ariaLabel,
@@ -43012,7 +43047,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
     const {
         arrow = false,
-        children,
+        children: childrenProp,
         components = {},
         componentsProps = {},
         describeChild = false,
@@ -43040,6 +43075,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         TransitionProps
       } = props,
       other = _objectWithoutPropertiesLoose(props, _excluded$v);
+
+    // to prevent runtime errors, developers will need to provide a child as a React element anyway.
+    const children = /*#__PURE__*/React__namespace.isValidElement(childrenProp) ? childrenProp : /*#__PURE__*/jsxRuntime_1("span", {
+      children: childrenProp
+    });
     const theme = useTheme();
     const isRtl = theme.direction === 'rtl';
     const [childNode, setChildNode] = React__namespace.useState();