@mui/material 5.15.14 → 6.0.0-alpha.0

package/Paper/Paper.js

@@ -40,24 +40,21 @@ const PaperRoot = styled('div', {
 })(({
   theme,
   ownerState
-}) => {
-  var _theme$vars$overlays;
-  return _extends({
-    backgroundColor: (theme.vars || theme).palette.background.paper,
-    color: (theme.vars || theme).palette.text.primary,
-    transition: theme.transitions.create('box-shadow')
-  }, !ownerState.square && {
-    borderRadius: theme.shape.borderRadius
-  }, ownerState.variant === 'outlined' && {
-    border: `1px solid ${(theme.vars || theme).palette.divider}`
-  }, ownerState.variant === 'elevation' && _extends({
-    boxShadow: (theme.vars || theme).shadows[ownerState.elevation]
-  }, !theme.vars && theme.palette.mode === 'dark' && {
-    backgroundImage: `linear-gradient(${alpha('#fff', getOverlayAlpha(ownerState.elevation))}, ${alpha('#fff', getOverlayAlpha(ownerState.elevation))})`
-  }, theme.vars && {
-    backgroundImage: (_theme$vars$overlays = theme.vars.overlays) == null ? void 0 : _theme$vars$overlays[ownerState.elevation]
-  }));
-});
+}) => _extends({
+  backgroundColor: (theme.vars || theme).palette.background.paper,
+  color: (theme.vars || theme).palette.text.primary,
+  transition: theme.transitions.create('box-shadow')
+}, !ownerState.square && {
+  borderRadius: theme.shape.borderRadius
+}, ownerState.variant === 'outlined' && {
+  border: `1px solid ${(theme.vars || theme).palette.divider}`
+}, ownerState.variant === 'elevation' && _extends({
+  boxShadow: (theme.vars || theme).shadows[ownerState.elevation]
+}, !theme.vars && theme.palette.mode === 'dark' && {
+  backgroundImage: `linear-gradient(${alpha('#fff', getOverlayAlpha(ownerState.elevation))}, ${alpha('#fff', getOverlayAlpha(ownerState.elevation))})`
+}, theme.vars && {
+  backgroundImage: theme.vars.overlays?.[ownerState.elevation]
+})));
 const Paper = /*#__PURE__*/React.forwardRef(function Paper(inProps, ref) {
   const props = useThemeProps({
     props: inProps,

package/Popover/Popover.js

@@ -15,8 +15,7 @@ import refType from '@mui/utils/refType';
 import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';
 import integerPropType from '@mui/utils/integerPropType';
 import chainPropTypes from '@mui/utils/chainPropTypes';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import debounce from '../utils/debounce';
 import ownerDocument from '../utils/ownerDocument';
 import ownerWindow from '../utils/ownerWindow';
@@ -26,6 +25,7 @@ import Modal from '../Modal';
 import PaperBase from '../Paper';
 import { getPopoverUtilityClass } from './popoverClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiPopover');
 export function getOffsetTop(rect, vertical) {
   let offset = 0;
   if (typeof vertical === 'number') {
@@ -87,7 +87,6 @@ export const PopoverPaper = styled(PaperBase, {
   outline: 0
 });
 const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
-  var _slotProps$paper, _slots$root, _slots$paper;
   const props = useThemeProps({
     props: inProps,
     name: 'MuiPopover'
@@ -123,7 +122,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     } = props,
     TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded),
     other = _objectWithoutPropertiesLoose(props, _excluded2);
-  const externalPaperSlotProps = (_slotProps$paper = slotProps == null ? void 0 : slotProps.paper) != null ? _slotProps$paper : PaperPropsProp;
+  const externalPaperSlotProps = slotProps?.paper ?? PaperPropsProp;
   const paperRef = React.useRef();
   const handlePaperRef = useForkRef(paperRef, externalPaperSlotProps.ref);
   const ownerState = _extends({}, props, {
@@ -302,8 +301,8 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
   // If the anchorEl prop is provided, use its parent body element as the container
   // If neither are provided let the Modal take care of choosing the container
   const container = containerProp || (anchorEl ? ownerDocument(resolveAnchorEl(anchorEl)).body : undefined);
-  const RootSlot = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : PopoverRoot;
-  const PaperSlot = (_slots$paper = slots == null ? void 0 : slots.paper) != null ? _slots$paper : PopoverPaper;
+  const RootSlot = slots?.root ?? PopoverRoot;
+  const PaperSlot = slots?.paper ?? PopoverPaper;
   const paperProps = useSlotProps({
     elementType: PaperSlot,
     externalSlotProps: _extends({}, externalPaperSlotProps, {
@@ -316,11 +315,11 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
       ref: handlePaperRef
     },
     ownerState,
-    className: clsx(classes.paper, externalPaperSlotProps == null ? void 0 : externalPaperSlotProps.className)
+    className: clsx(classes.paper, externalPaperSlotProps?.className)
   });
   const _useSlotProps = useSlotProps({
       elementType: RootSlot,
-      externalSlotProps: (slotProps == null ? void 0 : slotProps.root) || {},
+      externalSlotProps: slotProps?.root || {},
       externalForwardedProps: other,
       additionalProps: {
         ref,

package/Popper/Popper.js

@@ -30,7 +30,6 @@ const PopperRoot = styled(BasePopper, {
  * - [Popper API](https://mui.com/material-ui/api/popper/)
  */
 const Popper = /*#__PURE__*/React.forwardRef(function Popper(inProps, ref) {
-  var _slots$root;
   const theme = useTheme();
   const props = useThemeProps({
     props: inProps,
@@ -54,7 +53,7 @@ const Popper = /*#__PURE__*/React.forwardRef(function Popper(inProps, ref) {
       slotProps
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const RootComponent = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components == null ? void 0 : components.Root;
+  const RootComponent = slots?.root ?? components?.Root;
   const otherProps = _extends({
     anchorEl,
     container,
@@ -69,11 +68,11 @@ const Popper = /*#__PURE__*/React.forwardRef(function Popper(inProps, ref) {
   }, other);
   return /*#__PURE__*/_jsx(PopperRoot, _extends({
     as: component,
-    direction: theme == null ? void 0 : theme.direction,
+    direction: theme?.direction,
     slots: {
       root: RootComponent
     },
-    slotProps: slotProps != null ? slotProps : componentsProps
+    slotProps: slotProps ?? componentsProps
   }, otherProps, {
     ref: ref
   }));

package/README.md

@@ -11,8 +11,10 @@ Material UI is an open-source React component library that implements Google's
 
 Install the package in your project directory with:
 
+<!-- #default-branch-switch -->
+
 ```bash
-npm install @mui/material @emotion/react @emotion/styled
+npm install @mui/material@next @emotion/react @emotion/styled
 ```
 
 ## Documentation

package/Radio/Radio.js

@@ -74,7 +74,6 @@ const defaultCheckedIcon = /*#__PURE__*/_jsx(RadioButtonIcon, {
 });
 const defaultIcon = /*#__PURE__*/_jsx(RadioButtonIcon, {});
 const Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
-  var _defaultIcon$props$fo, _defaultCheckedIcon$p;
   const props = useThemeProps({
     props: inProps,
     name: 'MuiRadio'
@@ -110,10 +109,10 @@ const Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
   return /*#__PURE__*/_jsx(RadioRoot, _extends({
     type: "radio",
     icon: /*#__PURE__*/React.cloneElement(icon, {
-      fontSize: (_defaultIcon$props$fo = defaultIcon.props.fontSize) != null ? _defaultIcon$props$fo : size
+      fontSize: defaultIcon.props.fontSize ?? size
     }),
     checkedIcon: /*#__PURE__*/React.cloneElement(checkedIcon, {
-      fontSize: (_defaultCheckedIcon$p = defaultCheckedIcon.props.fontSize) != null ? _defaultCheckedIcon$p : size
+      fontSize: defaultCheckedIcon.props.fontSize ?? size
     }),
     ownerState: ownerState,
     classes: classes,

package/Radio/RadioButtonIcon.js

@@ -6,8 +6,7 @@ import PropTypes from 'prop-types';
 import RadioButtonUncheckedIcon from '../internal/svg-icons/RadioButtonUnchecked';
 import RadioButtonCheckedIcon from '../internal/svg-icons/RadioButtonChecked';
 import styled, { rootShouldForwardProp } from '../styles/styled';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const RadioButtonIconRoot = styled('span', {
   shouldForwardProp: rootShouldForwardProp
 })({

package/Rating/Rating.js

@@ -18,8 +18,7 @@ import StarBorder from '../internal/svg-icons/StarBorder';
 import useThemeProps from '../styles/useThemeProps';
 import styled, { slotShouldForwardProp } from '../styles/styled';
 import ratingClasses, { getRatingUtilityClass } from './ratingClasses';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function getDecimalPrecision(num) {
   const decimalPart = num.toString().split('.')[1];
   return decimalPart ? decimalPart.length : 0;

package/ScopedCssBaseline/ScopedCssBaseline.js

@@ -32,9 +32,8 @@ const ScopedCssBaselineRoot = styled('div', {
   const colorSchemeStyles = {};
   if (ownerState.enableColorScheme && theme.colorSchemes) {
     Object.entries(theme.colorSchemes).forEach(([key, scheme]) => {
-      var _scheme$palette;
       colorSchemeStyles[`&${theme.getColorSchemeSelector(key).replace(/\s*&/, '')}`] = {
-        colorScheme: (_scheme$palette = scheme.palette) == null ? void 0 : _scheme$palette.mode
+        colorScheme: scheme.palette?.mode
       };
     });
   }

package/Select/SelectInput.js

@@ -21,8 +21,7 @@ import styled, { slotShouldForwardProp } from '../styles/styled';
 import useForkRef from '../utils/useForkRef';
 import useControlled from '../utils/useControlled';
 import selectClasses, { getSelectUtilityClasses } from './selectClasses';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SelectSelect = styled('div', {
   name: 'MuiSelect',
   slot: 'Select',
@@ -110,7 +109,6 @@ const useUtilityClasses = ownerState => {
  * @ignore - internal component.
  */
 const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref) {
-  var _MenuProps$slotProps;
   const {
       'aria-describedby': ariaDescribedby,
       'aria-label': ariaLabel,
@@ -170,7 +168,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       setDisplayNode(node);
     }
   }, []);
-  const anchorElement = displayNode == null ? void 0 : displayNode.parentNode;
+  const anchorElement = displayNode?.parentNode;
   React.useImperativeHandle(handleRef, () => ({
     focus: () => {
       displayRef.current.focus();
@@ -433,7 +431,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     error
   });
   const classes = useUtilityClasses(ownerState);
-  const paperProps = _extends({}, MenuProps.PaperProps, (_MenuProps$slotProps = MenuProps.slotProps) == null ? void 0 : _MenuProps$slotProps.paper);
+  const paperProps = _extends({}, MenuProps.PaperProps, MenuProps.slotProps?.paper);
   const listboxId = useId();
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx(SelectSelect, _extends({

package/Skeleton/Skeleton.js

@@ -3,11 +3,6 @@
 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"];
-let _ = t => t,
-  _t,
-  _t2,
-  _t3,
-  _t4;
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
@@ -32,7 +27,7 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getSkeletonUtilityClass, classes);
 };
-const pulseKeyframe = keyframes(_t || (_t = _`
+const pulseKeyframe = keyframes`
   0% {
     opacity: 1;
   }
@@ -44,8 +39,8 @@ const pulseKeyframe = keyframes(_t || (_t = _`
   100% {
     opacity: 1;
   }
-`));
-const waveKeyframe = keyframes(_t2 || (_t2 = _`
+`;
+const waveKeyframe = keyframes`
   0% {
     transform: translateX(-100%);
   }
@@ -58,7 +53,7 @@ const waveKeyframe = keyframes(_t2 || (_t2 = _`
   100% {
     transform: translateX(100%);
   }
-`));
+`;
 const SkeletonRoot = styled('span', {
   name: 'MuiSkeleton',
   slot: 'Root',
@@ -104,12 +99,12 @@ const SkeletonRoot = styled('span', {
   });
 }, ({
   ownerState
-}) => ownerState.animation === 'pulse' && css(_t3 || (_t3 = _`
-      animation: ${0} 2s ease-in-out 0.5s infinite;
-    `), pulseKeyframe), ({
+}) => ownerState.animation === 'pulse' && css`
+      animation: ${pulseKeyframe} 2s ease-in-out 0.5s infinite;
+    `, ({
   ownerState,
   theme
-}) => ownerState.animation === 'wave' && css(_t4 || (_t4 = _`
+}) => ownerState.animation === 'wave' && css`
       position: relative;
       overflow: hidden;
 
@@ -117,11 +112,11 @@ const SkeletonRoot = styled('span', {
       -webkit-mask-image: -webkit-radial-gradient(white, black);
 
       &::after {
-        animation: ${0} 2s linear 0.5s infinite;
+        animation: ${waveKeyframe} 2s linear 0.5s infinite;
         background: linear-gradient(
           90deg,
           transparent,
-          ${0},
+          ${(theme.vars || theme).palette.action.hover},
           transparent
         );
         content: '';
@@ -132,7 +127,7 @@ const SkeletonRoot = styled('span', {
         right: 0;
         top: 0;
       }
-    `), waveKeyframe, (theme.vars || theme).palette.action.hover));
+    `);
 const Skeleton = /*#__PURE__*/React.forwardRef(function Skeleton(inProps, ref) {
   const props = useThemeProps({
     props: inProps,