@mui/material 6.0.0-alpha.7 → 6.0.0-alpha.9

package/Hidden/Hidden.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["implementation", "lgDown", "lgUp", "mdDown", "mdUp", "smDown", "smUp", "xlDown", "xlUp", "xsDown", "xsUp"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import HiddenJs from './HiddenJs';
@@ -10,25 +7,27 @@ import HiddenCss from './HiddenCss';
 
 /**
  * Responsively hides children based on the selected implementation.
+ *
+ * @deprecated The Hidden component was deprecated in Material UI v5. To learn more, see [the Hidden section](/material-ui/migration/v5-component-changes/#hidden) of the migration docs.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 function Hidden(props) {
   const {
-      implementation = 'js',
-      lgDown = false,
-      lgUp = false,
-      mdDown = false,
-      mdUp = false,
-      smDown = false,
-      smUp = false,
-      xlDown = false,
-      xlUp = false,
-      xsDown = false,
-      xsUp = false
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    implementation = 'js',
+    lgDown = false,
+    lgUp = false,
+    mdDown = false,
+    mdUp = false,
+    smDown = false,
+    smUp = false,
+    xlDown = false,
+    xlUp = false,
+    xsDown = false,
+    xsUp = false,
+    ...other
+  } = props;
   if (implementation === 'js') {
-    return /*#__PURE__*/_jsx(HiddenJs, _extends({
+    return /*#__PURE__*/_jsx(HiddenJs, {
       lgDown: lgDown,
       lgUp: lgUp,
       mdDown: mdDown,
@@ -38,10 +37,11 @@ function Hidden(props) {
       xlDown: xlDown,
       xlUp: xlUp,
       xsDown: xsDown,
-      xsUp: xsUp
-    }, other));
+      xsUp: xsUp,
+      ...other
+    });
   }
-  return /*#__PURE__*/_jsx(HiddenCss, _extends({
+  return /*#__PURE__*/_jsx(HiddenCss, {
     lgDown: lgDown,
     lgUp: lgUp,
     mdDown: mdDown,
@@ -51,8 +51,9 @@ function Hidden(props) {
     xlDown: xlDown,
     xlUp: xlUp,
     xsDown: xsDown,
-    xsUp: xsUp
-  }, other));
+    xsUp: xsUp,
+    ...other
+  });
 }
 process.env.NODE_ENV !== "production" ? Hidden.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/Hidden/HiddenCss.js

@@ -1,8 +1,5 @@
 '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';
@@ -37,26 +34,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 +63,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 +107,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/Hidden/withWidth.js

@@ -1,6 +1,3 @@
-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';
@@ -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/Icon/Icon.js

@@ -1,8 +1,5 @@
 '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';
@@ -95,7 +92,7 @@ const IconRoot = styled('span', {
     style: {
       color: undefined
     }
-  }, ...Object.entries(theme.palette).filter(([, palette]) => palette.main).map(([color]) => ({
+  }, ...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main).map(([color]) => ({
     props: {
       color
     },
@@ -110,21 +107,22 @@ const Icon = /*#__PURE__*/React.forwardRef(function Icon(inProps, ref) {
     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.
@@ -132,8 +130,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 ──────────────────────────────┐

package/IconButton/IconButton.js

@@ -1,8 +1,5 @@
 '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';
@@ -106,7 +103,7 @@ const IconButtonRoot = styled(ButtonBase, {
       style: {
         color: 'inherit'
       }
-    }, ...Object.entries(theme.palette).filter(([, value]) => value.main) // check all the used fields in the style below
+    }, ...Object.entries(theme.palette).filter(([, value]) => value && value.main) // check all the used fields in the style below
     .map(([color]) => ({
       props: {
         color
@@ -114,7 +111,7 @@ const IconButtonRoot = styled(ButtonBase, {
       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
+    })), ...Object.entries(theme.palette).filter(([, value]) => value && value.main) // check all the used fields in the style below
     .map(([color]) => ({
       props: {
         color,
@@ -163,33 +160,34 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
     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,
+    size = 'medium',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     edge,
     color,
     disabled,
     disableFocusRipple,
     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, {
+    ref: ref,
+    ...other,
     ownerState: ownerState,
     children: children
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? IconButton.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/ImageList/ImageList.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "className", "cols", "component", "rowHeight", "gap", "style", "variant"];
 import composeClasses from '@mui/utils/composeClasses';
 import integerPropType from '@mui/utils/integerPropType';
 import clsx from 'clsx';
@@ -54,16 +51,16 @@ const ImageList = /*#__PURE__*/React.forwardRef(function ImageList(inProps, ref)
     name: 'MuiImageList'
   });
   const {
-      children,
-      className,
-      cols = 2,
-      component = 'ul',
-      rowHeight = 'auto',
-      gap = 4,
-      style: styleProp,
-      variant = 'standard'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    children,
+    className,
+    cols = 2,
+    component = 'ul',
+    rowHeight = 'auto',
+    gap = 4,
+    style: styleProp,
+    variant = 'standard',
+    ...other
+  } = props;
   const contextValue = React.useMemo(() => ({
     rowHeight,
     gap,
@@ -77,32 +74,35 @@ const ImageList = /*#__PURE__*/React.forwardRef(function ImageList(inProps, ref)
       }
     }
   }, []);
-  const style = variant === 'masonry' ? _extends({
+  const style = variant === 'masonry' ? {
     columnCount: cols,
-    columnGap: gap
-  }, styleProp) : _extends({
+    columnGap: gap,
+    ...styleProp
+  } : {
     gridTemplateColumns: `repeat(${cols}, 1fr)`,
-    gap
-  }, styleProp);
-  const ownerState = _extends({}, props, {
+    gap,
+    ...styleProp
+  };
+  const ownerState = {
+    ...props,
     component,
     gap,
     rowHeight,
     variant
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(ImageListRoot, _extends({
+  return /*#__PURE__*/_jsx(ImageListRoot, {
     as: component,
     className: clsx(classes.root, classes[variant], className),
     ref: ref,
     style: style,
-    ownerState: ownerState
-  }, other, {
+    ownerState: ownerState,
+    ...other,
     children: /*#__PURE__*/_jsx(ImageListContext.Provider, {
       value: contextValue,
       children: children
     })
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? ImageList.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/ImageListItem/ImageListItem.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "className", "cols", "component", "rows", "style"];
 import composeClasses from '@mui/utils/composeClasses';
 import integerPropType from '@mui/utils/integerPropType';
 import clsx from 'clsx';
@@ -86,14 +83,14 @@ const ImageListItem = /*#__PURE__*/React.forwardRef(function ImageListItem(inPro
 
   // TODO: - Use jsdoc @default?: "cols rows default values are for docs only"
   const {
-      children,
-      className,
-      cols = 1,
-      component = 'li',
-      rows = 1,
-      style
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    children,
+    className,
+    cols = 1,
+    component = 'li',
+    rows = 1,
+    style,
+    ...other
+  } = props;
   const {
     rowHeight = 'auto',
     gap,
@@ -105,28 +102,30 @@ const ImageListItem = /*#__PURE__*/React.forwardRef(function ImageListItem(inPro
   } else if (rowHeight !== 'auto') {
     height = rowHeight * rows + gap * (rows - 1);
   }
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     cols,
     component,
     gap,
     rowHeight,
     rows,
     variant
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(ImageListItemRoot, _extends({
+  return /*#__PURE__*/_jsx(ImageListItemRoot, {
     as: component,
     className: clsx(classes.root, classes[variant], className),
     ref: ref,
-    style: _extends({
+    style: {
       height,
       gridColumnEnd: variant !== 'masonry' ? `span ${cols}` : undefined,
       gridRowEnd: variant !== 'masonry' ? `span ${rows}` : undefined,
       marginBottom: variant === 'masonry' ? gap : undefined,
-      breakInside: variant === 'masonry' ? 'avoid' : undefined
-    }, style),
-    ownerState: ownerState
-  }, other, {
+      breakInside: variant === 'masonry' ? 'avoid' : undefined,
+      ...style
+    },
+    ownerState: ownerState,
+    ...other,
     children: React.Children.map(children, child => {
       if (! /*#__PURE__*/React.isValidElement(child)) {
         return null;
@@ -143,7 +142,7 @@ const ImageListItem = /*#__PURE__*/React.forwardRef(function ImageListItem(inPro
       }
       return child;
     })
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? ImageListItem.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/ImageListItemBar/ImageListItemBar.d.ts

@@ -48,4 +48,4 @@ export interface ImageListItemBarProps
  *
  * - [ImageListItemBar API](https://mui.com/material-ui/api/image-list-item-bar/)
  */
-export default function ImageListItemBar(props: ImageListItemBarProps): JSX.Element;
+export default function ImageListItemBar(props: ImageListItemBarProps): React.JSX.Element;

package/ImageListItemBar/ImageListItemBar.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["actionIcon", "actionPosition", "className", "subtitle", "title", "position"];
 import composeClasses from '@mui/utils/composeClasses';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
@@ -171,24 +168,25 @@ const ImageListItemBar = /*#__PURE__*/React.forwardRef(function ImageListItemBar
     name: 'MuiImageListItemBar'
   });
   const {
-      actionIcon,
-      actionPosition = 'right',
-      className,
-      subtitle,
-      title,
-      position = 'bottom'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    actionIcon,
+    actionPosition = 'right',
+    className,
+    subtitle,
+    title,
+    position = 'bottom',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     position,
     actionPosition
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsxs(ImageListItemBarRoot, _extends({
+  return /*#__PURE__*/_jsxs(ImageListItemBarRoot, {
     ownerState: ownerState,
     className: clsx(classes.root, className),
-    ref: ref
-  }, other, {
+    ref: ref,
+    ...other,
     children: [/*#__PURE__*/_jsxs(ImageListItemBarTitleWrap, {
       ownerState: ownerState,
       className: classes.titleWrap,
@@ -204,7 +202,7 @@ const ImageListItemBar = /*#__PURE__*/React.forwardRef(function ImageListItemBar
       className: classes.actionIcon,
       children: actionIcon
     }) : null]
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? ImageListItemBar.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/Input/Input.d.ts

@@ -30,6 +30,6 @@ export interface InputProps extends StandardProps<InputBaseProps> {
  * - [Input API](https://mui.com/material-ui/api/input/)
  * - inherits [InputBase API](https://mui.com/material-ui/api/input-base/)
  */
-declare const Input: ((props: InputProps) => JSX.Element) & { muiName: string };
+declare const Input: ((props: InputProps) => React.JSX.Element) & { muiName: string };
 
 export default Input;