@mui/material 5.13.4 → 5.13.6

package/modern/ButtonBase/TouchRipple.js

@@ -149,14 +149,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/modern/Modal/Modal.js

@@ -280,6 +280,14 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes /* remove-proptypes */ =
    * @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.
    */

package/modern/Popover/Popover.js

@@ -351,7 +351,8 @@ process.env.NODE_ENV !== "production" ? Popover.propTypes /* remove-proptypes */
    */
   action: refType,
   /**
-   * An HTML element, or a function that returns one.
+   * An HTML element, [PopoverVirtualElement](/material-ui/react-popover/#virtual-element),
+   * or a function that returns either.
    * It's used to set the position of the popover.
    */
   anchorEl: chainPropTypes(PropTypes.oneOfType([HTMLElementType, PropTypes.func]), props => {
@@ -363,7 +364,7 @@ process.env.NODE_ENV !== "production" ? Popover.propTypes /* remove-proptypes */
           return new Error(['MUI: The `anchorEl` prop provided to the component is invalid.', 'The anchor element should be part of the document layout.', "Make sure the element is present in the document or that it's not display none."].join('\n'));
         }
       } else {
-        return new Error(['MUI: The `anchorEl` prop provided to the component is invalid.', `It should be an Element instance but it's \`${resolvedAnchorEl}\` instead.`].join('\n'));
+        return new Error(['MUI: The `anchorEl` prop provided to the component is invalid.', `It should be an Element or PopoverVirtualElement instance but it's \`${resolvedAnchorEl}\` instead.`].join('\n'));
       }
     }
     return null;

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.4
+ * @mui/material v5.13.6
  *
  * @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/Popover/Popover.js

@@ -365,7 +365,8 @@ process.env.NODE_ENV !== "production" ? Popover.propTypes /* remove-proptypes */
    */
   action: _utils.refType,
   /**
-   * An HTML element, or a function that returns one.
+   * An HTML element, [PopoverVirtualElement](/material-ui/react-popover/#virtual-element),
+   * or a function that returns either.
    * It's used to set the position of the popover.
    */
   anchorEl: (0, _utils.chainPropTypes)(_propTypes.default.oneOfType([_utils.HTMLElementType, _propTypes.default.func]), props => {
@@ -377,7 +378,7 @@ process.env.NODE_ENV !== "production" ? Popover.propTypes /* remove-proptypes */
           return new Error(['MUI: The `anchorEl` prop provided to the component is invalid.', 'The anchor element should be part of the document layout.', "Make sure the element is present in the document or that it's not display none."].join('\n'));
         }
       } else {
-        return new Error(['MUI: The `anchorEl` prop provided to the component is invalid.', `It should be an Element instance but it's \`${resolvedAnchorEl}\` instead.`].join('\n'));
+        return new Error(['MUI: The `anchorEl` prop provided to the component is invalid.', `It should be an Element or PopoverVirtualElement instance but it's \`${resolvedAnchorEl}\` instead.`].join('\n'));
       }
     }
     return null;

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.4
+ * @mui/material v5.13.6
  *
  * @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.4",
+  "version": "5.13.6",
   "private": false,
   "author": "MUI Team",
   "description": "React components that implement Google's Material Design.",
@@ -45,12 +45,12 @@
     }
   },
   "dependencies": {
-    "@babel/runtime": "^7.21.0",
-    "@mui/base": "5.0.0-beta.4",
+    "@babel/runtime": "^7.22.5",
+    "@mui/base": "5.0.0-beta.5",
     "@mui/core-downloads-tracker": "^5.13.4",
-    "@mui/system": "^5.13.2",
+    "@mui/system": "^5.13.6",
     "@mui/types": "^7.2.4",
-    "@mui/utils": "^5.13.1",
+    "@mui/utils": "^5.13.6",
     "@types/react-transition-group": "^4.4.6",
     "clsx": "^1.2.1",
     "csstype": "^3.1.2",

package/styles/CssVarsProvider.d.ts

@@ -1,20 +1,20 @@
-/// <reference types="react" />
-import { SupportedColorScheme } from './experimental_extendTheme';
-declare const CssVarsProvider: (props: import("react").PropsWithChildren<Partial<import("@mui/system").CssVarsProviderConfig<SupportedColorScheme>> & {
-    theme?: {
-        cssVarPrefix?: string | undefined;
-        colorSchemes: Record<SupportedColorScheme, Record<string, any>>;
-    } | {
-        $$material: {
-            cssVarPrefix?: string | undefined;
-            colorSchemes: Record<SupportedColorScheme, Record<string, any>>;
-        };
-    } | undefined;
-    documentNode?: Document | null | undefined;
-    colorSchemeNode?: Element | null | undefined;
-    colorSchemeSelector?: string | undefined;
-    storageWindow?: Window | null | undefined;
-    disableNestedContext?: boolean | undefined;
-    disableStyleSheetGeneration?: boolean | undefined;
-}>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, useColorScheme: () => import("@mui/system").ColorSchemeContextValue<SupportedColorScheme>, getInitColorSchemeScript: typeof import("@mui/system").getInitColorSchemeScript;
-export { useColorScheme, getInitColorSchemeScript, CssVarsProvider as Experimental_CssVarsProvider, };
+/// <reference types="react" />
+import { SupportedColorScheme } from './experimental_extendTheme';
+declare const CssVarsProvider: (props: import("react").PropsWithChildren<Partial<import("@mui/system").CssVarsProviderConfig<SupportedColorScheme>> & {
+    theme?: {
+        cssVarPrefix?: string | undefined;
+        colorSchemes: Record<SupportedColorScheme, Record<string, any>>;
+    } | {
+        $$material: {
+            cssVarPrefix?: string | undefined;
+            colorSchemes: Record<SupportedColorScheme, Record<string, any>>;
+        };
+    } | undefined;
+    documentNode?: Document | null | undefined;
+    colorSchemeNode?: Element | null | undefined;
+    colorSchemeSelector?: string | undefined;
+    storageWindow?: Window | null | undefined;
+    disableNestedContext?: boolean | undefined;
+    disableStyleSheetGeneration?: boolean | undefined;
+}>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, useColorScheme: () => import("@mui/system").ColorSchemeContextValue<SupportedColorScheme>, getInitColorSchemeScript: typeof import("@mui/system").getInitColorSchemeScript;
+export { useColorScheme, getInitColorSchemeScript, CssVarsProvider as Experimental_CssVarsProvider, };

package/styles/excludeVariablesFromRoot.d.ts

@@ -1,5 +1,5 @@
-/**
- * @internal These variables should not appear in the :root stylesheet when the `defaultMode="dark"`
- */
-declare const excludeVariablesFromRoot: (cssVarPrefix: string) => string[];
-export default excludeVariablesFromRoot;
+/**
+ * @internal These variables should not appear in the :root stylesheet when the `defaultMode="dark"`
+ */
+declare const excludeVariablesFromRoot: (cssVarPrefix: string) => string[];
+export default excludeVariablesFromRoot;

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/styles/getOverlayAlpha.d.ts

@@ -1,2 +1,2 @@
-declare const getOverlayAlpha: (elevation: number) => string;
-export default getOverlayAlpha;
+declare const getOverlayAlpha: (elevation: number) => string;
+export default getOverlayAlpha;

package/styles/identifier.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "$$material";
-export default _default;
+declare const _default: "$$material";
+export default _default;

package/styles/shouldSkipGeneratingVar.d.ts

@@ -1 +1 @@
-export default function shouldSkipGeneratingVar(keys: string[]): boolean;
+export default function shouldSkipGeneratingVar(keys: string[]): boolean;

package/transitions/index.d.ts

@@ -1 +1 @@
-export * from './transition';
+export * from './transition';

package/transitions/transition.d.ts

@@ -1,13 +1,13 @@
-import { TransitionProps as _TransitionProps, TransitionActions } from 'react-transition-group/Transition';
-import * as React from 'react';
-export type TransitionHandlerKeys = 'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited';
-export type TransitionHandlerProps = Pick<_TransitionProps, TransitionHandlerKeys>;
-export interface EasingProps {
-    easing: string | {
-        enter?: string;
-        exit?: string;
-    };
-}
-export type TransitionKeys = 'in' | 'mountOnEnter' | 'unmountOnExit' | 'timeout' | 'easing' | 'addEndListener' | TransitionHandlerKeys;
-export interface TransitionProps extends TransitionActions, Partial<Pick<_TransitionProps & EasingProps, TransitionKeys>>, React.HTMLAttributes<HTMLElement> {
-}
+import { TransitionProps as _TransitionProps, TransitionActions } from 'react-transition-group/Transition';
+import * as React from 'react';
+export type TransitionHandlerKeys = 'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited';
+export type TransitionHandlerProps = Pick<_TransitionProps, TransitionHandlerKeys>;
+export interface EasingProps {
+    easing: string | {
+        enter?: string;
+        exit?: string;
+    };
+}
+export type TransitionKeys = 'in' | 'mountOnEnter' | 'unmountOnExit' | 'timeout' | 'easing' | 'addEndListener' | TransitionHandlerKeys;
+export interface TransitionProps extends TransitionActions, Partial<Pick<_TransitionProps & EasingProps, TransitionKeys>>, React.HTMLAttributes<HTMLElement> {
+}

package/transitions/utils.d.ts

@@ -1,23 +1,23 @@
-import * as React from 'react';
-export declare const reflow: (node: Element) => number;
-interface ComponentProps {
-    easing: string | {
-        enter?: string;
-        exit?: string;
-    } | undefined;
-    style: React.CSSProperties | undefined;
-    timeout: number | {
-        enter?: number;
-        exit?: number;
-    };
-}
-interface Options {
-    mode: 'enter' | 'exit';
-}
-interface TransitionProps {
-    duration: string | number;
-    easing: string | undefined;
-    delay: string | undefined;
-}
-export declare function getTransitionProps(props: ComponentProps, options: Options): TransitionProps;
-export {};
+import * as React from 'react';
+export declare const reflow: (node: Element) => number;
+interface ComponentProps {
+    easing: string | {
+        enter?: string;
+        exit?: string;
+    } | undefined;
+    style: React.CSSProperties | undefined;
+    timeout: number | {
+        enter?: number;
+        exit?: number;
+    };
+}
+interface Options {
+    mode: 'enter' | 'exit';
+}
+interface TransitionProps {
+    duration: string | number;
+    easing: string | undefined;
+    delay: string | undefined;
+}
+export declare function getTransitionProps(props: ComponentProps, options: Options): TransitionProps;
+export {};

package/types/OverridableComponentAugmentation.d.ts

@@ -1,31 +1,31 @@
-import * as React from 'react';
-import { DistributiveOmit } from '@mui/types';
-declare module '@mui/material/OverridableComponent' {
-    /**
-     * A component whose root component can be controlled via a `component` prop.
-     *
-     * Adjusts valid props based on the type of `component`.
-     */
-    interface OverridableComponent<M extends OverridableTypeMap> {
-        <C extends React.ElementType>(props: {
-            /**
-             * The component used for the root node.
-             * Either a string to use a HTML element or a component.
-             */
-            component: C;
-        } & OverridePropsVer2<M, C>): JSX.Element;
-        (props: DefaultComponentPropsVer2<M>): JSX.Element;
-    }
-    /**
-     * Props of the component if `component={Component}` is used.
-     */
-    type OverridePropsVer2<M extends OverridableTypeMap, C extends React.ElementType> = (BaseProps<M> & DistributiveOmit<React.ComponentPropsWithoutRef<C>, keyof BaseProps<M>> & {
-        ref?: React.Ref<Element>;
-    });
-    /**
-     * Props if `component={Component}` is NOT used.
-     */
-    type DefaultComponentPropsVer2<M extends OverridableTypeMap> = BaseProps<M> & DistributiveOmit<React.ComponentPropsWithoutRef<M['defaultComponent']>, keyof BaseProps<M>> & {
-        ref?: React.Ref<Element>;
-    };
-}
+import * as React from 'react';
+import { DistributiveOmit } from '@mui/types';
+declare module '@mui/material/OverridableComponent' {
+    /**
+     * A component whose root component can be controlled via a `component` prop.
+     *
+     * Adjusts valid props based on the type of `component`.
+     */
+    interface OverridableComponent<M extends OverridableTypeMap> {
+        <C extends React.ElementType>(props: {
+            /**
+             * The component used for the root node.
+             * Either a string to use a HTML element or a component.
+             */
+            component: C;
+        } & OverridePropsVer2<M, C>): JSX.Element;
+        (props: DefaultComponentPropsVer2<M>): JSX.Element;
+    }
+    /**
+     * Props of the component if `component={Component}` is used.
+     */
+    type OverridePropsVer2<M extends OverridableTypeMap, C extends React.ElementType> = (BaseProps<M> & DistributiveOmit<React.ComponentPropsWithoutRef<C>, keyof BaseProps<M>> & {
+        ref?: React.Ref<Element>;
+    });
+    /**
+     * Props if `component={Component}` is NOT used.
+     */
+    type DefaultComponentPropsVer2<M extends OverridableTypeMap> = BaseProps<M> & DistributiveOmit<React.ComponentPropsWithoutRef<M['defaultComponent']>, keyof BaseProps<M>> & {
+        ref?: React.Ref<Element>;
+    };
+}