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

package/modern/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/modern/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/modern/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/modern/Input/Input.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 = ["disableUnderline", "components", "componentsProps", "fullWidth", "inputComponent", "multiline", "slotProps", "slots", "type"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
@@ -25,7 +22,11 @@ const useUtilityClasses = ownerState => {
     input: ['input']
   };
   const composedClasses = composeClasses(slots, getInputUtilityClass, classes);
-  return _extends({}, classes, composedClasses);
+  return {
+    ...classes,
+    // forward classes to the InputBase
+    ...composedClasses
+  };
 };
 const InputRoot = styled(InputBaseRoot, {
   shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
@@ -109,7 +110,7 @@ const InputRoot = styled(InputBaseRoot, {
           borderBottomStyle: 'dotted'
         }
       }
-    }, ...Object.entries(theme.palette).filter(([, value]) => value.main).map(([color]) => ({
+    }, ...Object.entries(theme.palette).filter(([, value]) => value && value.main).map(([color]) => ({
       props: {
         color,
         disableUnderline: false
@@ -133,17 +134,17 @@ const Input = /*#__PURE__*/React.forwardRef(function Input(inProps, ref) {
     name: 'MuiInput'
   });
   const {
-      disableUnderline = false,
-      components = {},
-      componentsProps: componentsPropsProp,
-      fullWidth = false,
-      inputComponent = 'input',
-      multiline = false,
-      slotProps,
-      slots = {},
-      type = 'text'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    disableUnderline = false,
+    components = {},
+    componentsProps: componentsPropsProp,
+    fullWidth = false,
+    inputComponent = 'input',
+    multiline = false,
+    slotProps,
+    slots = {},
+    type = 'text',
+    ...other
+  } = props;
   const classes = useUtilityClasses(props);
   const ownerState = {
     disableUnderline
@@ -156,7 +157,7 @@ const Input = /*#__PURE__*/React.forwardRef(function Input(inProps, ref) {
   const componentsProps = slotProps ?? componentsPropsProp ? deepmerge(slotProps ?? componentsPropsProp, inputComponentsProps) : inputComponentsProps;
   const RootSlot = slots.root ?? components.Root ?? InputRoot;
   const InputSlot = slots.input ?? components.Input ?? InputInput;
-  return /*#__PURE__*/_jsx(InputBase, _extends({
+  return /*#__PURE__*/_jsx(InputBase, {
     slots: {
       root: RootSlot,
       input: InputSlot
@@ -166,10 +167,10 @@ const Input = /*#__PURE__*/React.forwardRef(function Input(inProps, ref) {
     inputComponent: inputComponent,
     multiline: multiline,
     ref: ref,
-    type: type
-  }, other, {
+    type: type,
+    ...other,
     classes: classes
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? Input.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/modern/Input/inputClasses.js

@@ -1,9 +1,11 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import { inputBaseClasses } from '../InputBase';
 export function getInputUtilityClass(slot) {
   return generateUtilityClass('MuiInput', slot);
 }
-const inputClasses = _extends({}, inputBaseClasses, generateUtilityClasses('MuiInput', ['root', 'underline', 'input']));
+const inputClasses = {
+  ...inputBaseClasses,
+  ...generateUtilityClasses('MuiInput', ['root', 'underline', 'input'])
+};
 export default inputClasses;

package/modern/InputAdornment/InputAdornment.js

@@ -1,9 +1,6 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 var _span;
-const _excluded = ["children", "className", "component", "disablePointerEvents", "disableTypography", "position", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -88,15 +85,15 @@ const InputAdornment = /*#__PURE__*/React.forwardRef(function InputAdornment(inP
     name: 'MuiInputAdornment'
   });
   const {
-      children,
-      className,
-      component = 'div',
-      disablePointerEvents = false,
-      disableTypography = false,
-      position,
-      variant: variantProp
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    children,
+    className,
+    component = 'div',
+    disablePointerEvents = false,
+    disableTypography = false,
+    position,
+    variant: variantProp,
+    ...other
+  } = props;
   const muiFormControl = useFormControl() || {};
   let variant = variantProp;
   if (variantProp && muiFormControl.variant) {
@@ -109,22 +106,23 @@ const InputAdornment = /*#__PURE__*/React.forwardRef(function InputAdornment(inP
   if (muiFormControl && !variant) {
     variant = muiFormControl.variant;
   }
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     hiddenLabel: muiFormControl.hiddenLabel,
     size: muiFormControl.size,
     disablePointerEvents,
     position,
     variant
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(FormControlContext.Provider, {
     value: null,
-    children: /*#__PURE__*/_jsx(InputAdornmentRoot, _extends({
+    children: /*#__PURE__*/_jsx(InputAdornmentRoot, {
       as: component,
       ownerState: ownerState,
       className: clsx(classes.root, className),
-      ref: ref
-    }, other, {
+      ref: ref,
+      ...other,
       children: typeof children === 'string' && !disableTypography ? /*#__PURE__*/_jsx(Typography, {
         color: "text.secondary",
         children: children
@@ -134,7 +132,7 @@ const InputAdornment = /*#__PURE__*/React.forwardRef(function InputAdornment(inP
           children: "\u200B"
         }))) : null, children]
       })
-    }))
+    })
   });
 });
 process.env.NODE_ENV !== "production" ? InputAdornment.propTypes /* remove-proptypes */ = {

package/modern/InputBase/InputBase.js

@@ -1,9 +1,6 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
-const _excluded = ["aria-describedby", "autoComplete", "autoFocus", "className", "color", "components", "componentsProps", "defaultValue", "disabled", "disableInjectingGlobalStyles", "endAdornment", "error", "fullWidth", "id", "inputComponent", "inputProps", "inputRef", "margin", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "renderSuffix", "rows", "size", "slotProps", "slots", "startAdornment", "type", "value"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -65,7 +62,8 @@ export const InputBaseRoot = styled('div', {
   overridesResolver: rootOverridesResolver
 })(({
   theme
-}) => _extends({}, theme.typography.body1, {
+}) => ({
+  ...theme.typography.body1,
   color: (theme.vars || theme).palette.text.primary,
   lineHeight: '1.4375em',
   // 23px
@@ -111,17 +109,17 @@ export const InputBaseInput = styled('input', {
   theme
 }) => {
   const light = theme.palette.mode === 'light';
-  const placeholder = _extends({
-    color: 'currentColor'
-  }, theme.vars ? {
-    opacity: theme.vars.opacity.inputPlaceholder
-  } : {
-    opacity: light ? 0.42 : 0.5
-  }, {
+  const placeholder = {
+    color: 'currentColor',
+    ...(theme.vars ? {
+      opacity: theme.vars.opacity.inputPlaceholder
+    } : {
+      opacity: light ? 0.42 : 0.5
+    }),
     transition: theme.transitions.create('opacity', {
       duration: theme.transitions.duration.shorter
     })
-  });
+  };
   const placeholderHidden = {
     opacity: '0 !important'
   };
@@ -246,42 +244,46 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
     name: 'MuiInputBase'
   });
   const {
-      'aria-describedby': ariaDescribedby,
-      autoComplete,
-      autoFocus,
-      className,
-      components = {},
-      componentsProps = {},
-      defaultValue,
-      disabled,
-      disableInjectingGlobalStyles,
-      endAdornment,
-      fullWidth = false,
-      id,
-      inputComponent = 'input',
-      inputProps: inputPropsProp = {},
-      inputRef: inputRefProp,
-      maxRows,
-      minRows,
-      multiline = false,
-      name,
-      onBlur,
-      onChange,
-      onClick,
-      onFocus,
-      onKeyDown,
-      onKeyUp,
-      placeholder,
-      readOnly,
-      renderSuffix,
-      rows,
-      slotProps = {},
-      slots = {},
-      startAdornment,
-      type = 'text',
-      value: valueProp
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    'aria-describedby': ariaDescribedby,
+    autoComplete,
+    autoFocus,
+    className,
+    color,
+    components = {},
+    componentsProps = {},
+    defaultValue,
+    disabled,
+    disableInjectingGlobalStyles,
+    endAdornment,
+    error,
+    fullWidth = false,
+    id,
+    inputComponent = 'input',
+    inputProps: inputPropsProp = {},
+    inputRef: inputRefProp,
+    margin,
+    maxRows,
+    minRows,
+    multiline = false,
+    name,
+    onBlur,
+    onChange,
+    onClick,
+    onFocus,
+    onKeyDown,
+    onKeyUp,
+    placeholder,
+    readOnly,
+    renderSuffix,
+    rows,
+    size,
+    slotProps = {},
+    slots = {},
+    startAdornment,
+    type = 'text',
+    value: valueProp,
+    ...other
+  } = props;
   const value = inputPropsProp.value != null ? inputPropsProp.value : valueProp;
   const {
     current: isControlled
@@ -416,17 +418,19 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
           console.warn('MUI: You can not use the `minRows` or `maxRows` props when the input `rows` prop is set.');
         }
       }
-      inputProps = _extends({
+      inputProps = {
         type: undefined,
         minRows: rows,
-        maxRows: rows
-      }, inputProps);
+        maxRows: rows,
+        ...inputProps
+      };
     } else {
-      inputProps = _extends({
+      inputProps = {
         type: undefined,
         maxRows,
-        minRows
-      }, inputProps);
+        minRows,
+        ...inputProps
+      };
     }
     InputComponent = TextareaAutosize;
   }
@@ -441,7 +445,8 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
       muiFormControl.setAdornedStart(Boolean(startAdornment));
     }
   }, [muiFormControl, startAdornment]);
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     color: fcs.color || 'primary',
     disabled: fcs.disabled,
     endAdornment,
@@ -454,24 +459,31 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
     size: fcs.size,
     startAdornment,
     type
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const Root = slots.root || components.Root || InputBaseRoot;
   const rootProps = slotProps.root || componentsProps.root || {};
   const Input = slots.input || components.Input || InputBaseInput;
-  inputProps = _extends({}, inputProps, slotProps.input ?? componentsProps.input);
+  inputProps = {
+    ...inputProps,
+    ...(slotProps.input ?? componentsProps.input)
+  };
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [!disableInjectingGlobalStyles && inputGlobalStyles, /*#__PURE__*/_jsxs(Root, _extends({}, rootProps, !isHostComponent(Root) && {
-      ownerState: _extends({}, ownerState, rootProps.ownerState)
-    }, {
+    children: [!disableInjectingGlobalStyles && inputGlobalStyles, /*#__PURE__*/_jsxs(Root, {
+      ...rootProps,
       ref: ref,
-      onClick: handleClick
-    }, other, {
+      onClick: handleClick,
+      ...other,
+      ...(!isHostComponent(Root) && {
+        ownerState: {
+          ...ownerState,
+          ...rootProps.ownerState
+        }
+      }),
       className: clsx(classes.root, rootProps.className, className, readOnly && 'MuiInputBase-readOnly'),
       children: [startAdornment, /*#__PURE__*/_jsx(FormControlContext.Provider, {
         value: null,
-        children: /*#__PURE__*/_jsx(Input, _extends({
-          ownerState: ownerState,
+        children: /*#__PURE__*/_jsx(Input, {
           "aria-invalid": fcs.error,
           "aria-describedby": ariaDescribedby,
           autoComplete: autoComplete,
@@ -488,21 +500,26 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
           value: value,
           onKeyDown: onKeyDown,
           onKeyUp: onKeyUp,
-          type: type
-        }, inputProps, !isHostComponent(Input) && {
-          as: InputComponent,
-          ownerState: _extends({}, ownerState, inputProps.ownerState)
-        }, {
+          type: type,
+          ...inputProps,
+          ...(!isHostComponent(Input) && {
+            as: InputComponent,
+            ownerState: {
+              ...ownerState,
+              ...inputProps.ownerState
+            }
+          }),
           ref: handleInputRef,
           className: clsx(classes.input, inputProps.className, readOnly && 'MuiInputBase-readOnly'),
           onBlur: handleBlur,
           onChange: handleChange,
           onFocus: handleFocus
-        }))
-      }), endAdornment, renderSuffix ? renderSuffix(_extends({}, fcs, {
+        })
+      }), endAdornment, renderSuffix ? renderSuffix({
+        ...fcs,
         startAdornment
-      })) : null]
-    }))]
+      }) : null]
+    })]
   });
 });
 process.env.NODE_ENV !== "production" ? InputBase.propTypes /* remove-proptypes */ = {