@mui/material 6.0.0-dev.240424162023-9968b4889d → 6.0.0

package/modern/Hidden/HiddenCss.js

@@ -1,16 +1,13 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children", "className", "only"];
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
-import capitalize from '../utils/capitalize';
-import styled from '../styles/styled';
-import useTheme from '../styles/useTheme';
-import { getHiddenCssUtilityClass } from './hiddenCssClasses';
+import capitalize from "../utils/capitalize.js";
+import styled from "../styles/styled.js";
+import useTheme from "../styles/useTheme.js";
+import { getHiddenCssUtilityClass } from "./hiddenCssClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -27,6 +24,8 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getHiddenCssUtilityClass, classes);
 };
+
+// FIXME(romgrk): Can't use memoTheme here, should we memo also on ownerState?
 const HiddenCssRoot = styled('div', {
   name: 'PrivateHiddenCss',
   slot: 'Root'
@@ -37,26 +36,28 @@ const HiddenCssRoot = styled('div', {
   const hidden = {
     display: 'none'
   };
-  return _extends({}, ownerState.breakpoints.map(({
-    breakpoint,
-    dir
-  }) => {
-    if (dir === 'only') {
-      return {
-        [theme.breakpoints.only(breakpoint)]: hidden
+  return {
+    ...ownerState.breakpoints.map(({
+      breakpoint,
+      dir
+    }) => {
+      if (dir === 'only') {
+        return {
+          [theme.breakpoints.only(breakpoint)]: hidden
+        };
+      }
+      return dir === 'up' ? {
+        [theme.breakpoints.up(breakpoint)]: hidden
+      } : {
+        [theme.breakpoints.down(breakpoint)]: hidden
       };
-    }
-    return dir === 'up' ? {
-      [theme.breakpoints.up(breakpoint)]: hidden
-    } : {
-      [theme.breakpoints.down(breakpoint)]: hidden
-    };
-  }).reduce((r, o) => {
-    Object.keys(o).forEach(k => {
-      r[k] = o[k];
-    });
-    return r;
-  }, {}));
+    }).reduce((r, o) => {
+      Object.keys(o).forEach(k => {
+        r[k] = o[k];
+      });
+      return r;
+    }, {})
+  };
 });
 
 /**
@@ -64,11 +65,11 @@ const HiddenCssRoot = styled('div', {
  */
 function HiddenCss(props) {
   const {
-      children,
-      className,
-      only
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    children,
+    className,
+    only,
+    ...other
+  } = props;
   const theme = useTheme();
   if (process.env.NODE_ENV !== 'production') {
     const unknownProps = Object.keys(other).filter(propName => {
@@ -108,9 +109,10 @@ function HiddenCss(props) {
       });
     });
   }
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     breakpoints
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(HiddenCssRoot, {
     className: clsx(classes.root, className),

package/modern/Hidden/HiddenJs.js

@@ -3,8 +3,8 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import exactProp from '@mui/utils/exactProp';
-import withWidth, { isWidthDown, isWidthUp } from './withWidth';
-import useTheme from '../styles/useTheme';
+import withWidth, { isWidthDown, isWidthUp } from "./withWidth.js";
+import useTheme from "../styles/useTheme.js";
 
 /**
  * @ignore - internal component.

package/modern/Hidden/index.js

@@ -1,3 +1,3 @@
 'use client';
 
-export { default } from './Hidden';
+export { default } from "./Hidden.js";

package/modern/Hidden/withWidth.js

@@ -1,13 +1,10 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["initialWidth", "width"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import getDisplayName from '@mui/utils/getDisplayName';
 import { getThemeProps } from '@mui/system/useThemeProps';
-import useTheme from '../styles/useTheme';
-import useEnhancedEffect from '../utils/useEnhancedEffect';
-import useMediaQuery from '../useMediaQuery';
+import useTheme from "../styles/useTheme.js";
+import useEnhancedEffect from "../utils/useEnhancedEffect.js";
+import useMediaQuery from "../useMediaQuery/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const breakpointKeys = ['xs', 'sm', 'md', 'lg', 'xl'];
 
@@ -35,16 +32,15 @@ const withWidth = (options = {}) => Component => {
   function WithWidth(props) {
     const contextTheme = useTheme();
     const theme = props.theme || contextTheme;
-    const _getThemeProps = getThemeProps({
-        theme,
-        name: 'MuiWithWidth',
-        props
-      }),
-      {
-        initialWidth,
-        width
-      } = _getThemeProps,
-      other = _objectWithoutPropertiesLoose(_getThemeProps, _excluded);
+    const {
+      initialWidth,
+      width,
+      ...other
+    } = getThemeProps({
+      theme,
+      name: 'MuiWithWidth',
+      props
+    });
     const [mountedState, setMountedState] = React.useState(false);
     useEnhancedEffect(() => {
       setMountedState(true);
@@ -61,11 +57,13 @@ const withWidth = (options = {}) => Component => {
       const matches = useMediaQuery(theme.breakpoints.up(key));
       return !output && matches ? key : output;
     }, null);
-    const more = _extends({
-      width: width || (mountedState || noSSR ? widthComputed : undefined) || initialWidth || initialWidthOption
-    }, withThemeOption ? {
-      theme
-    } : {}, other);
+    const more = {
+      width: width || (mountedState || noSSR ? widthComputed : undefined) || initialWidth || initialWidthOption,
+      ...(withThemeOption ? {
+        theme
+      } : {}),
+      ...other
+    };
 
     // When rendering the component on the server,
     // we have no idea about the client browser screen width.
@@ -76,7 +74,9 @@ const withWidth = (options = {}) => Component => {
     if (more.width === undefined) {
       return null;
     }
-    return /*#__PURE__*/_jsx(Component, _extends({}, more));
+    return /*#__PURE__*/_jsx(Component, {
+      ...more
+    });
   }
   process.env.NODE_ENV !== "production" ? WithWidth.propTypes = {
     /**

package/modern/Icon/Icon.js

@@ -1,16 +1,14 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["baseClassName", "className", "color", "component", "fontSize"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
-import capitalize from '../utils/capitalize';
-import { getIconUtilityClass } from './iconClasses';
+import capitalize from "../utils/capitalize.js";
+import { styled } from "../zero-styled/index.js";
+import memoTheme from "../utils/memoTheme.js";
+import { useDefaultProps } from "../DefaultPropsProvider/index.js";
+import { getIconUtilityClass } from "./iconClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -32,9 +30,8 @@ const IconRoot = styled('span', {
     } = props;
     return [styles.root, ownerState.color !== 'inherit' && styles[`color${capitalize(ownerState.color)}`], styles[`fontSize${capitalize(ownerState.fontSize)}`]];
   }
-})(({
-  theme,
-  ownerState
+})(memoTheme(({
+  theme
 }) => ({
   userSelect: 'none',
   width: '1em',
@@ -47,46 +44,86 @@ const IconRoot = styled('span', {
   textAlign: 'center',
   // support non-square icon
   flexShrink: 0,
-  fontSize: {
-    inherit: 'inherit',
-    small: theme.typography.pxToRem(20),
-    medium: theme.typography.pxToRem(24),
-    large: theme.typography.pxToRem(36)
-  }[ownerState.fontSize],
-  // TODO v5 deprecate, v6 remove for sx
-  color: {
-    primary: (theme.vars || theme).palette.primary.main,
-    secondary: (theme.vars || theme).palette.secondary.main,
-    info: (theme.vars || theme).palette.info.main,
-    success: (theme.vars || theme).palette.success.main,
-    warning: (theme.vars || theme).palette.warning.main,
-    action: (theme.vars || theme).palette.action.active,
-    error: (theme.vars || theme).palette.error.main,
-    disabled: (theme.vars || theme).palette.action.disabled,
-    inherit: undefined
-  }[ownerState.color]
-}));
+  variants: [{
+    props: {
+      fontSize: 'inherit'
+    },
+    style: {
+      fontSize: 'inherit'
+    }
+  }, {
+    props: {
+      fontSize: 'small'
+    },
+    style: {
+      fontSize: theme.typography.pxToRem(20)
+    }
+  }, {
+    props: {
+      fontSize: 'medium'
+    },
+    style: {
+      fontSize: theme.typography.pxToRem(24)
+    }
+  }, {
+    props: {
+      fontSize: 'large'
+    },
+    style: {
+      fontSize: theme.typography.pxToRem(36)
+    }
+  }, {
+    props: {
+      color: 'action'
+    },
+    style: {
+      color: (theme.vars || theme).palette.action.active
+    }
+  }, {
+    props: {
+      color: 'disabled'
+    },
+    style: {
+      color: (theme.vars || theme).palette.action.disabled
+    }
+  }, {
+    props: {
+      color: 'inherit'
+    },
+    style: {
+      color: undefined
+    }
+  }, ...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main).map(([color]) => ({
+    props: {
+      color
+    },
+    style: {
+      color: (theme.vars || theme).palette[color].main
+    }
+  }))]
+})));
 const Icon = /*#__PURE__*/React.forwardRef(function Icon(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiIcon'
   });
   const {
-      baseClassName = 'material-icons',
-      className,
-      color = 'inherit',
-      component: Component = 'span',
-      fontSize = 'medium'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    baseClassName = 'material-icons',
+    className,
+    color = 'inherit',
+    component: Component = 'span',
+    fontSize = 'medium',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     baseClassName,
     color,
     component: Component,
     fontSize
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(IconRoot, _extends({
+  return /*#__PURE__*/_jsx(IconRoot, {
     as: Component,
     className: clsx(baseClassName,
     // Prevent the translation of the text content.
@@ -94,8 +131,9 @@ const Icon = /*#__PURE__*/React.forwardRef(function Icon(inProps, ref) {
     'notranslate', classes.root, className),
     ownerState: ownerState,
     "aria-hidden": true,
-    ref: ref
-  }, other));
+    ref: ref,
+    ...other
+  });
 });
 process.env.NODE_ENV !== "production" ? Icon.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
@@ -142,5 +180,7 @@ process.env.NODE_ENV !== "production" ? Icon.propTypes /* remove-proptypes */ =
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
-Icon.muiName = 'Icon';
+if (Icon) {
+  Icon.muiName = 'Icon';
+}
 export default Icon;

package/modern/Icon/index.js

@@ -1,5 +1,5 @@
 'use client';
 
-export { default } from './Icon';
-export { default as iconClasses } from './iconClasses';
-export * from './iconClasses';
+export { default } from "./Icon.js";
+export { default as iconClasses } from "./iconClasses.js";
+export * from "./iconClasses.js";

package/modern/IconButton/IconButton.js

@@ -1,20 +1,18 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["edge", "children", "className", "color", "disabled", "disableFocusRipple", "size"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
-import { styled, createUseThemeProps } from '../zero-styled';
-import ButtonBase from '../ButtonBase';
-import capitalize from '../utils/capitalize';
-import iconButtonClasses, { getIconButtonUtilityClass } from './iconButtonClasses';
+import { styled } from "../zero-styled/index.js";
+import memoTheme from "../utils/memoTheme.js";
+import { useDefaultProps } from "../DefaultPropsProvider/index.js";
+import ButtonBase from "../ButtonBase/index.js";
+import capitalize from "../utils/capitalize.js";
+import iconButtonClasses, { getIconButtonUtilityClass } from "./iconButtonClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiIconButton');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -37,7 +35,7 @@ const IconButtonRoot = styled(ButtonBase, {
     } = props;
     return [styles.root, ownerState.color !== 'default' && styles[`color${capitalize(ownerState.color)}`], ownerState.edge && styles[`edge${capitalize(ownerState.edge)}`], styles[`size${capitalize(ownerState.size)}`]];
   }
-})(({
+})(memoTheme(({
   theme
 }) => ({
   textAlign: 'center',
@@ -45,8 +43,6 @@ const IconButtonRoot = styled(ButtonBase, {
   fontSize: theme.typography.pxToRem(24),
   padding: 8,
   borderRadius: '50%',
-  overflow: 'visible',
-  // Explicitly set the default value to solve a bug on IE11.
   color: (theme.vars || theme).palette.action.active,
   transition: theme.transitions.create('background-color', {
     duration: theme.transitions.duration.shortest
@@ -95,101 +91,103 @@ const IconButtonRoot = styled(ButtonBase, {
       marginRight: -3
     }
   }]
-}), ({
+})), memoTheme(({
   theme
-}) => {
-  return {
-    variants: [{
-      props: {
-        color: 'inherit'
-      },
-      style: {
-        color: 'inherit'
-      }
-    }, ...Object.entries(theme.palette).filter(([, value]) => value.main) // check all the used fields in the style below
-    .map(([color]) => ({
-      props: {
-        color
-      },
-      style: {
-        color: (theme.vars || theme).palette[color].main
-      }
-    })), ...Object.entries(theme.palette).filter(([, value]) => value.main) // check all the used fields in the style below
-    .map(([color]) => ({
-      props: {
-        color,
-        disableRipple: false
-      },
-      style: {
-        '&:hover': {
-          backgroundColor: theme.vars ? `rgba(${(theme.vars || theme).palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha((theme.vars || theme).palette[color].main, theme.palette.action.hoverOpacity),
-          // Reset on touch devices, it doesn't add specificity
-          '@media (hover: none)': {
-            backgroundColor: 'transparent'
-          }
+}) => ({
+  variants: [{
+    props: {
+      color: 'inherit'
+    },
+    style: {
+      color: 'inherit'
+    }
+  }, ...Object.entries(theme.palette).filter(([, value]) => value && value.main) // check all the used fields in the style below
+  .map(([color]) => ({
+    props: {
+      color
+    },
+    style: {
+      color: (theme.vars || theme).palette[color].main
+    }
+  })), ...Object.entries(theme.palette).filter(([, value]) => value && value.main) // check all the used fields in the style below
+  .map(([color]) => ({
+    props: {
+      color,
+      disableRipple: false
+    },
+    style: {
+      '&:hover': {
+        backgroundColor: theme.vars ? `rgba(${(theme.vars || theme).palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha((theme.vars || theme).palette[color].main, theme.palette.action.hoverOpacity),
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          backgroundColor: 'transparent'
         }
       }
-    })), {
-      props: {
-        size: 'small'
-      },
-      style: {
-        padding: 5,
-        fontSize: theme.typography.pxToRem(18)
-      }
-    }, {
-      props: {
-        size: 'large'
-      },
-      style: {
-        padding: 12,
-        fontSize: theme.typography.pxToRem(28)
-      }
-    }],
-    [`&.${iconButtonClasses.disabled}`]: {
-      backgroundColor: 'transparent',
-      color: (theme.vars || theme).palette.action.disabled
     }
-  };
-});
+  })), {
+    props: {
+      size: 'small'
+    },
+    style: {
+      padding: 5,
+      fontSize: theme.typography.pxToRem(18)
+    }
+  }, {
+    props: {
+      size: 'large'
+    },
+    style: {
+      padding: 12,
+      fontSize: theme.typography.pxToRem(28)
+    }
+  }],
+  [`&.${iconButtonClasses.disabled}`]: {
+    backgroundColor: 'transparent',
+    color: (theme.vars || theme).palette.action.disabled
+  }
+})));
 
 /**
  * Refer to the [Icons](/material-ui/icons/) section of the documentation
  * regarding the available icon options.
  */
 const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiIconButton'
   });
   const {
-      edge = false,
-      children,
-      className,
-      color = 'default',
-      disabled = false,
-      disableFocusRipple = false,
-      size = 'medium'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    edge = false,
+    children,
+    className,
+    color = 'default',
+    disabled = false,
+    disableFocusRipple = false,
+    disableRipple = false,
+    size = 'medium',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     edge,
     color,
     disabled,
     disableFocusRipple,
+    disableRipple,
     size
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(IconButtonRoot, _extends({
+  return /*#__PURE__*/_jsx(IconButtonRoot, {
     className: clsx(classes.root, className),
     centerRipple: true,
     focusRipple: !disableFocusRipple,
     disabled: disabled,
-    ref: ref
-  }, other, {
+    disableRipple: disableRipple,
+    ref: ref,
+    ...other,
     ownerState: ownerState,
     children: children
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? IconButton.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/modern/IconButton/index.js

@@ -1,5 +1,5 @@
 'use client';
 
-export { default } from './IconButton';
-export { default as iconButtonClasses } from './iconButtonClasses';
-export * from './iconButtonClasses';
+export { default } from "./IconButton.js";
+export { default as iconButtonClasses } from "./iconButtonClasses.js";
+export * from "./iconButtonClasses.js";