@mui/material 6.0.0-alpha.1 → 6.0.0-alpha.10

package/Select/Select.js

@@ -1,9 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["autoWidth", "children", "classes", "className", "defaultOpen", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"],
-  _excluded2 = ["root"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -18,7 +14,8 @@ import FilledInput from '../FilledInput';
 import OutlinedInput from '../OutlinedInput';
 import useThemeProps from '../styles/useThemeProps';
 import useForkRef from '../utils/useForkRef';
-import styled, { rootShouldForwardProp } from '../styles/styled';
+import { styled } from '../zero-styled';
+import rootShouldForwardProp from '../styles/rootShouldForwardProp';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -41,29 +38,29 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
     props: inProps
   });
   const {
-      autoWidth = false,
-      children,
-      classes: classesProp = {},
-      className,
-      defaultOpen = false,
-      displayEmpty = false,
-      IconComponent = ArrowDropDownIcon,
-      id,
-      input,
-      inputProps,
-      label,
-      labelId,
-      MenuProps,
-      multiple = false,
-      native = false,
-      onClose,
-      onOpen,
-      open,
-      renderValue,
-      SelectDisplayProps,
-      variant: variantProp = 'outlined'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    autoWidth = false,
+    children,
+    classes: classesProp = {},
+    className,
+    defaultOpen = false,
+    displayEmpty = false,
+    IconComponent = ArrowDropDownIcon,
+    id,
+    input,
+    inputProps,
+    label,
+    labelId,
+    MenuProps,
+    multiple = false,
+    native = false,
+    onClose,
+    onOpen,
+    open,
+    renderValue,
+    SelectDisplayProps,
+    variant: variantProp = 'outlined',
+    ...other
+  } = props;
   const inputComponent = native ? NativeSelectInput : SelectInput;
   const muiFormControl = useFormControl();
   const fcs = formControlState({
@@ -72,12 +69,16 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
     states: ['variant', 'error']
   });
   const variant = fcs.variant || variantProp;
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     variant,
     classes: classesProp
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  const restOfClasses = _objectWithoutPropertiesLoose(classes, _excluded2);
+  const {
+    root,
+    ...restOfClasses
+  } = classes;
   const InputComponent = input || {
     standard: /*#__PURE__*/_jsx(StyledInput, {
       ownerState: ownerState
@@ -92,44 +93,50 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
   }[variant];
   const inputComponentRef = useForkRef(ref, InputComponent.ref);
   return /*#__PURE__*/_jsx(React.Fragment, {
-    children: /*#__PURE__*/React.cloneElement(InputComponent, _extends({
+    children: /*#__PURE__*/React.cloneElement(InputComponent, {
       // Most of the logic is implemented in `SelectInput`.
       // The `Select` component is a simple API wrapper to expose something better to play with.
       inputComponent,
-      inputProps: _extends({
+      inputProps: {
         children,
         error: fcs.error,
         IconComponent,
         variant,
         type: undefined,
         // We render a select. We can ignore the type provided by the `Input`.
-        multiple
-      }, native ? {
-        id
-      } : {
-        autoWidth,
-        defaultOpen,
-        displayEmpty,
-        labelId,
-        MenuProps,
-        onClose,
-        onOpen,
-        open,
-        renderValue,
-        SelectDisplayProps: _extends({
+        multiple,
+        ...(native ? {
           id
-        }, SelectDisplayProps)
-      }, inputProps, {
-        classes: inputProps ? deepmerge(restOfClasses, inputProps.classes) : restOfClasses
-      }, input ? input.props.inputProps : {})
-    }, (multiple && native || displayEmpty) && variant === 'outlined' ? {
-      notched: true
-    } : {}, {
+        } : {
+          autoWidth,
+          defaultOpen,
+          displayEmpty,
+          labelId,
+          MenuProps,
+          onClose,
+          onOpen,
+          open,
+          renderValue,
+          SelectDisplayProps: {
+            id,
+            ...SelectDisplayProps
+          }
+        }),
+        ...inputProps,
+        classes: inputProps ? deepmerge(restOfClasses, inputProps.classes) : restOfClasses,
+        ...(input ? input.props.inputProps : {})
+      },
+      ...((multiple && native || displayEmpty) && variant === 'outlined' ? {
+        notched: true
+      } : {}),
       ref: inputComponentRef,
-      className: clsx(InputComponent.props.className, className, classes.root)
-    }, !input && {
-      variant
-    }, other))
+      className: clsx(InputComponent.props.className, className, classes.root),
+      // If a custom input is provided via 'input' prop, do not allow 'variant' to be propagated to it's root element. See https://github.com/mui/material-ui/issues/33894.
+      ...(!input && {
+        variant
+      }),
+      ...other
+    })
   });
 });
 process.env.NODE_ENV !== "production" ? Select.propTypes /* remove-proptypes */ = {

package/Select/SelectInput.js

@@ -1,10 +1,7 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
 var _span;
-const _excluded = ["aria-describedby", "aria-label", "autoFocus", "autoWidth", "children", "className", "defaultOpen", "defaultValue", "disabled", "displayEmpty", "error", "IconComponent", "inputRef", "labelId", "MenuProps", "multiple", "name", "onBlur", "onChange", "onClose", "onFocus", "onOpen", "open", "readOnly", "renderValue", "SelectDisplayProps", "tabIndex", "type", "value", "variant"];
 import * as React from 'react';
 import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
@@ -15,14 +12,15 @@ import refType from '@mui/utils/refType';
 import ownerDocument from '../utils/ownerDocument';
 import capitalize from '../utils/capitalize';
 import Menu from '../Menu/Menu';
-import { nativeSelectSelectStyles, nativeSelectIconStyles } from '../NativeSelect/NativeSelectInput';
+import { StyledSelectSelect, StyledSelectIcon } from '../NativeSelect/NativeSelectInput';
 import { isFilled } from '../InputBase/utils';
-import styled, { slotShouldForwardProp } from '../styles/styled';
+import { styled } from '../zero-styled';
+import slotShouldForwardProp from '../styles/slotShouldForwardProp';
 import useForkRef from '../utils/useForkRef';
 import useControlled from '../utils/useControlled';
 import selectClasses, { getSelectUtilityClasses } from './selectClasses';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const SelectSelect = styled('div', {
+const SelectSelect = styled(StyledSelectSelect, {
   name: 'MuiSelect',
   slot: 'Select',
   overridesResolver: (props, styles) => {
@@ -41,7 +39,7 @@ const SelectSelect = styled('div', {
       [`&.${selectClasses.multiple}`]: styles.multiple
     }];
   }
-})(nativeSelectSelectStyles, {
+})({
   // Win specificity over the input base
   [`&.${selectClasses.select}`]: {
     height: 'auto',
@@ -53,7 +51,7 @@ const SelectSelect = styled('div', {
     overflow: 'hidden'
   }
 });
-const SelectIcon = styled('svg', {
+const SelectIcon = styled(StyledSelectIcon, {
   name: 'MuiSelect',
   slot: 'Icon',
   overridesResolver: (props, styles) => {
@@ -62,7 +60,7 @@ const SelectIcon = styled('svg', {
     } = props;
     return [styles.icon, ownerState.variant && styles[`icon${capitalize(ownerState.variant)}`], ownerState.open && styles.iconOpen];
   }
-})(nativeSelectIconStyles);
+})({});
 const SelectNativeInput = styled('input', {
   shouldForwardProp: prop => slotShouldForwardProp(prop) && prop !== 'classes',
   name: 'MuiSelect',
@@ -110,40 +108,39 @@ const useUtilityClasses = ownerState => {
  */
 const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref) {
   const {
-      'aria-describedby': ariaDescribedby,
-      'aria-label': ariaLabel,
-      autoFocus,
-      autoWidth,
-      children,
-      className,
-      defaultOpen,
-      defaultValue,
-      disabled,
-      displayEmpty,
-      error = false,
-      IconComponent,
-      inputRef: inputRefProp,
-      labelId,
-      MenuProps = {},
-      multiple,
-      name,
-      onBlur,
-      onChange,
-      onClose,
-      onFocus,
-      onOpen,
-      open: openProp,
-      readOnly,
-      renderValue,
-      SelectDisplayProps = {},
-      tabIndex: tabIndexProp
-      // catching `type` from Input which makes no sense for SelectInput
-      ,
-
-      value: valueProp,
-      variant = 'standard'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    'aria-describedby': ariaDescribedby,
+    'aria-label': ariaLabel,
+    autoFocus,
+    autoWidth,
+    children,
+    className,
+    defaultOpen,
+    defaultValue,
+    disabled,
+    displayEmpty,
+    error = false,
+    IconComponent,
+    inputRef: inputRefProp,
+    labelId,
+    MenuProps = {},
+    multiple,
+    name,
+    onBlur,
+    onChange,
+    onClose,
+    onFocus,
+    onOpen,
+    open: openProp,
+    readOnly,
+    renderValue,
+    SelectDisplayProps = {},
+    tabIndex: tabIndexProp,
+    // catching `type` from Input which makes no sense for SelectInput
+    type,
+    value: valueProp,
+    variant = 'standard',
+    ...other
+  } = props;
   const [value, setValueState] = useControlled({
     controlled: valueProp,
     default: defaultValue,
@@ -424,17 +421,22 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     tabIndex = disabled ? null : 0;
   }
   const buttonId = SelectDisplayProps.id || (name ? `mui-component-select-${name}` : undefined);
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     variant,
     value,
     open,
     error
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  const paperProps = _extends({}, MenuProps.PaperProps, MenuProps.slotProps?.paper);
+  const paperProps = {
+    ...MenuProps.PaperProps,
+    ...MenuProps.slotProps?.paper
+  };
   const listboxId = useId();
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/_jsx(SelectSelect, _extends({
+    children: [/*#__PURE__*/_jsx(SelectSelect, {
+      as: "div",
       ref: handleDisplayRef,
       tabIndex: tabIndex,
       role: "combobox",
@@ -448,8 +450,8 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       onKeyDown: handleKeyDown,
       onMouseDown: disabled || readOnly ? null : handleMouseDown,
       onBlur: handleBlur,
-      onFocus: onFocus
-    }, SelectDisplayProps, {
+      onFocus: onFocus,
+      ...SelectDisplayProps,
       ownerState: ownerState,
       className: clsx(SelectDisplayProps.className, classes.select, className)
       // The id is required for proper a11y
@@ -460,7 +462,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
         className: "notranslate",
         children: "\u200B"
       })) : display
-    })), /*#__PURE__*/_jsx(SelectNativeInput, _extends({
+    }), /*#__PURE__*/_jsx(SelectNativeInput, {
       "aria-invalid": error,
       value: Array.isArray(value) ? value.join(',') : value,
       name: name,
@@ -471,12 +473,13 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       disabled: disabled,
       className: classes.nativeInput,
       autoFocus: autoFocus,
+      ...other,
       ownerState: ownerState
-    }, other)), /*#__PURE__*/_jsx(SelectIcon, {
+    }), /*#__PURE__*/_jsx(SelectIcon, {
       as: IconComponent,
       className: classes.icon,
       ownerState: ownerState
-    }), /*#__PURE__*/_jsx(Menu, _extends({
+    }), /*#__PURE__*/_jsx(Menu, {
       id: `menu-${name || ''}`,
       anchorEl: anchorElement,
       open: open,
@@ -488,24 +491,28 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       transformOrigin: {
         vertical: 'top',
         horizontal: 'center'
-      }
-    }, MenuProps, {
-      MenuListProps: _extends({
+      },
+      ...MenuProps,
+      MenuListProps: {
         'aria-labelledby': labelId,
         role: 'listbox',
         'aria-multiselectable': multiple ? 'true' : undefined,
         disableListWrap: true,
-        id: listboxId
-      }, MenuProps.MenuListProps),
-      slotProps: _extends({}, MenuProps.slotProps, {
-        paper: _extends({}, paperProps, {
-          style: _extends({
-            minWidth: menuMinWidth
-          }, paperProps != null ? paperProps.style : null)
-        })
-      }),
+        id: listboxId,
+        ...MenuProps.MenuListProps
+      },
+      slotProps: {
+        ...MenuProps.slotProps,
+        paper: {
+          ...paperProps,
+          style: {
+            minWidth: menuMinWidth,
+            ...(paperProps != null ? paperProps.style : null)
+          }
+        }
+      },
       children: items
-    }))]
+    })]
   });
 });
 process.env.NODE_ENV !== "production" ? SelectInput.propTypes = {

package/Skeleton/Skeleton.js

@@ -1,18 +1,14 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["animation", "className", "component", "height", "style", "variant", "width"];
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
-import { keyframes, css } from '@mui/system';
 import composeClasses from '@mui/utils/composeClasses';
 import { alpha, unstable_getUnit as getUnit, unstable_toUnitless as toUnitless } from '../styles';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { keyframes, css, createUseThemeProps, styled } from '../zero-styled';
 import { getSkeletonUtilityClass } from './skeletonClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiSkeleton');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -54,6 +50,16 @@ const waveKeyframe = keyframes`
     transform: translateX(100%);
   }
 `;
+
+// This implementation is for supporting both Styled-components v4+ and Pigment CSS.
+// A global animation has to be created here for Styled-components v4+ (https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/utils/errors.md#12).
+// which can be done by checking typeof indeterminate1Keyframe !== 'string' (at runtime, Pigment CSS transform keyframes`` to a string).
+const pulseAnimation = typeof pulseKeyframe !== 'string' ? css`
+        animation: ${pulseKeyframe} 2s ease-in-out 0.5s infinite;
+      ` : null;
+const waveAnimation = typeof waveKeyframe !== 'string' ? css`
+        animation: ${waveKeyframe} 2s linear 0.5s infinite;
+      ` : null;
 const SkeletonRoot = styled('span', {
   name: 'MuiSkeleton',
   slot: 'Root',
@@ -64,103 +70,144 @@ const SkeletonRoot = styled('span', {
     return [styles.root, styles[ownerState.variant], ownerState.animation !== false && styles[ownerState.animation], ownerState.hasChildren && styles.withChildren, ownerState.hasChildren && !ownerState.width && styles.fitContent, ownerState.hasChildren && !ownerState.height && styles.heightAuto];
   }
 })(({
-  theme,
-  ownerState
+  theme
 }) => {
   const radiusUnit = getUnit(theme.shape.borderRadius) || 'px';
   const radiusValue = toUnitless(theme.shape.borderRadius);
-  return _extends({
+  return {
     display: 'block',
     // Create a "on paper" color with sufficient contrast retaining the color
     backgroundColor: theme.vars ? theme.vars.palette.Skeleton.bg : alpha(theme.palette.text.primary, theme.palette.mode === 'light' ? 0.11 : 0.13),
-    height: '1.2em'
-  }, ownerState.variant === 'text' && {
-    marginTop: 0,
-    marginBottom: 0,
-    height: 'auto',
-    transformOrigin: '0 55%',
-    transform: 'scale(1, 0.60)',
-    borderRadius: `${radiusValue}${radiusUnit}/${Math.round(radiusValue / 0.6 * 10) / 10}${radiusUnit}`,
-    '&:empty:before': {
-      content: '"\\00a0"'
-    }
-  }, ownerState.variant === 'circular' && {
-    borderRadius: '50%'
-  }, ownerState.variant === 'rounded' && {
-    borderRadius: (theme.vars || theme).shape.borderRadius
-  }, ownerState.hasChildren && {
-    '& > *': {
-      visibility: 'hidden'
-    }
-  }, ownerState.hasChildren && !ownerState.width && {
-    maxWidth: 'fit-content'
-  }, ownerState.hasChildren && !ownerState.height && {
-    height: 'auto'
-  });
-}, ({
-  ownerState
-}) => ownerState.animation === 'pulse' && css`
-      animation: ${pulseKeyframe} 2s ease-in-out 0.5s infinite;
-    `, ({
-  ownerState,
-  theme
-}) => ownerState.animation === 'wave' && css`
-      position: relative;
-      overflow: hidden;
-
-      /* Fix bug in Safari https://bugs.webkit.org/show_bug.cgi?id=68196 */
-      -webkit-mask-image: -webkit-radial-gradient(white, black);
-
-      &::after {
-        animation: ${waveKeyframe} 2s linear 0.5s infinite;
-        background: linear-gradient(
-          90deg,
-          transparent,
-          ${(theme.vars || theme).palette.action.hover},
-          transparent
-        );
-        content: '';
-        position: absolute;
-        transform: translateX(-100%); /* Avoid flash during server-side hydration */
-        bottom: 0;
-        left: 0;
-        right: 0;
-        top: 0;
+    height: '1.2em',
+    variants: [{
+      props: {
+        variant: 'text'
+      },
+      style: {
+        marginTop: 0,
+        marginBottom: 0,
+        height: 'auto',
+        transformOrigin: '0 55%',
+        transform: 'scale(1, 0.60)',
+        borderRadius: `${radiusValue}${radiusUnit}/${Math.round(radiusValue / 0.6 * 10) / 10}${radiusUnit}`,
+        '&:empty:before': {
+          content: '"\\00a0"'
+        }
+      }
+    }, {
+      props: {
+        variant: 'circular'
+      },
+      style: {
+        borderRadius: '50%'
+      }
+    }, {
+      props: {
+        variant: 'rounded'
+      },
+      style: {
+        borderRadius: (theme.vars || theme).shape.borderRadius
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.hasChildren,
+      style: {
+        '& > *': {
+          visibility: 'hidden'
+        }
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.hasChildren && !ownerState.width,
+      style: {
+        maxWidth: 'fit-content'
       }
-    `);
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.hasChildren && !ownerState.height,
+      style: {
+        height: 'auto'
+      }
+    }, {
+      props: {
+        animation: 'pulse'
+      },
+      style: pulseAnimation || {
+        animation: `${pulseKeyframe} 2s ease-in-out 0.5s infinite`
+      }
+    }, {
+      props: {
+        animation: 'wave'
+      },
+      style: {
+        position: 'relative',
+        overflow: 'hidden',
+        /* Fix bug in Safari https://bugs.webkit.org/show_bug.cgi?id=68196 */
+        WebkitMaskImage: '-webkit-radial-gradient(white, black)',
+        '&::after': {
+          background: `linear-gradient(
+                90deg,
+                transparent,
+                ${(theme.vars || theme).palette.action.hover},
+                transparent
+              )`,
+          content: '""',
+          position: 'absolute',
+          transform: 'translateX(-100%)' /* Avoid flash during server-side hydration */,
+          bottom: 0,
+          left: 0,
+          right: 0,
+          top: 0
+        }
+      }
+    }, {
+      props: {
+        animation: 'wave'
+      },
+      style: waveAnimation || {
+        animation: `${waveKeyframe} 2s linear 0.5s infinite`
+      }
+    }]
+  };
+});
 const Skeleton = /*#__PURE__*/React.forwardRef(function Skeleton(inProps, ref) {
   const props = useThemeProps({
     props: inProps,
     name: 'MuiSkeleton'
   });
   const {
-      animation = 'pulse',
-      className,
-      component = 'span',
-      height,
-      style,
-      variant = 'text',
-      width
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    animation = 'pulse',
+    className,
+    component = 'span',
+    height,
+    style,
+    variant = 'text',
+    width,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     animation,
     component,
     variant,
     hasChildren: Boolean(other.children)
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(SkeletonRoot, _extends({
+  return /*#__PURE__*/_jsx(SkeletonRoot, {
     as: component,
     ref: ref,
     className: clsx(classes.root, className),
-    ownerState: ownerState
-  }, other, {
-    style: _extends({
+    ownerState: ownerState,
+    ...other,
+    style: {
       width,
-      height
-    }, style)
-  }));
+      height,
+      ...style
+    }
+  });
 });
 process.env.NODE_ENV !== "production" ? Skeleton.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/Slide/Slide.d.ts

@@ -61,4 +61,4 @@ export interface SlideProps extends TransitionProps {
  * - [Slide API](https://mui.com/material-ui/api/slide/)
  * - inherits [Transition API](https://reactcommunity.org/react-transition-group/transition/#Transition-props)
  */
-export default function Slide(props: SlideProps): JSX.Element;
+export default function Slide(props: SlideProps): React.JSX.Element;