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

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

@@ -48,17 +48,17 @@ export interface SlideProps extends TransitionProps {
 }
 
 /**
- * The Slide transition is used by the [Drawer](https://mui.com/material-ui/react-drawer/) component.
+ * The Slide transition is used by the [Drawer](https://next.mui.com/material-ui/react-drawer/) component.
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  *
  * Demos:
  *
- * - [Dialog](https://mui.com/material-ui/react-dialog/)
- * - [Transitions](https://mui.com/material-ui/transitions/)
+ * - [Dialog](https://next.mui.com/material-ui/react-dialog/)
+ * - [Transitions](https://next.mui.com/material-ui/transitions/)
  *
  * API:
  *
- * - [Slide API](https://mui.com/material-ui/api/slide/)
+ * - [Slide API](https://next.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;

package/Slide/Slide.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 = ["addEndListener", "appear", "children", "container", "direction", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Transition } from 'react-transition-group';
@@ -11,7 +8,7 @@ import HTMLElementType from '@mui/utils/HTMLElementType';
 import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
 import debounce from '../utils/debounce';
 import useForkRef from '../utils/useForkRef';
-import useTheme from '../styles/useTheme';
+import { useTheme } from '../zero-styled';
 import { reflow, getTransitionProps } from '../transitions/utils';
 import { ownerWindow } from '../utils';
 
@@ -88,25 +85,25 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     exit: theme.transitions.duration.leavingScreen
   };
   const {
-      addEndListener,
-      appear = true,
-      children,
-      container: containerProp,
-      direction = 'down',
-      easing: easingProp = defaultEasing,
-      in: inProp,
-      onEnter,
-      onEntered,
-      onEntering,
-      onExit,
-      onExited,
-      onExiting,
-      style,
-      timeout = defaultTimeout,
-      // eslint-disable-next-line react/prop-types
-      TransitionComponent = Transition
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    addEndListener,
+    appear = true,
+    children,
+    container: containerProp,
+    direction = 'down',
+    easing: easingProp = defaultEasing,
+    in: inProp,
+    onEnter,
+    onEntered,
+    onEntering,
+    onExit,
+    onExited,
+    onExiting,
+    style,
+    timeout = defaultTimeout,
+    // eslint-disable-next-line react/prop-types
+    TransitionComponent = Transition,
+    ...other
+  } = props;
   const childrenRef = React.useRef(null);
   const handleRef = useForkRef(children.ref, childrenRef, ref);
   const normalizedTransitionCallback = callback => isAppearing => {
@@ -134,8 +131,12 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     }, {
       mode: 'enter'
     });
-    node.style.webkitTransition = theme.transitions.create('-webkit-transform', _extends({}, transitionProps));
-    node.style.transition = theme.transitions.create('transform', _extends({}, transitionProps));
+    node.style.webkitTransition = theme.transitions.create('-webkit-transform', {
+      ...transitionProps
+    });
+    node.style.transition = theme.transitions.create('transform', {
+      ...transitionProps
+    });
     node.style.webkitTransform = 'none';
     node.style.transform = 'none';
     if (onEntering) {
@@ -202,7 +203,7 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
       updatePosition();
     }
   }, [inProp, updatePosition]);
-  return /*#__PURE__*/_jsx(TransitionComponent, _extends({
+  return /*#__PURE__*/_jsx(TransitionComponent, {
     nodeRef: childrenRef,
     onEnter: handleEnter,
     onEntered: handleEntered,
@@ -213,17 +214,20 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     addEndListener: handleAddEndListener,
     appear: appear,
     in: inProp,
-    timeout: timeout
-  }, other, {
+    timeout: timeout,
+    ...other,
     children: (state, childProps) => {
-      return /*#__PURE__*/React.cloneElement(children, _extends({
+      return /*#__PURE__*/React.cloneElement(children, {
         ref: handleRef,
-        style: _extends({
-          visibility: state === 'exited' && !inProp ? 'hidden' : undefined
-        }, style, children.props.style)
-      }, childProps));
+        style: {
+          visibility: state === 'exited' && !inProp ? 'hidden' : undefined,
+          ...style,
+          ...children.props.style
+        },
+        ...childProps
+      });
     }
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? Slide.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/Slider/Slider.d.ts

@@ -46,7 +46,7 @@ export interface SliderOwnProps {
   /**
    * The components used for each slot inside.
    *
-   * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated use the `slots` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    *
    * @default {}
    */
@@ -64,7 +64,7 @@ export interface SliderOwnProps {
    * The extra props for the slot components.
    * You can override the existing props or add new ones.
    *
-   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    *
    * @default {}
    */
@@ -281,7 +281,7 @@ export interface SliderTypeMap<
 }
 
 export interface SliderValueLabelProps extends React.HTMLAttributes<HTMLSpanElement> {
-  children: React.ReactElement;
+  children: React.ReactElement<unknown>;
   index: number;
   open: boolean;
   value: number;
@@ -306,11 +306,11 @@ export declare const SliderValueLabel: React.FC<SliderValueLabelProps>;
  *
  * Demos:
  *
- * - [Slider](https://mui.com/material-ui/react-slider/)
+ * - [Slider](https://next.mui.com/material-ui/react-slider/)
  *
  * API:
  *
- * - [Slider API](https://mui.com/material-ui/api/slider/)
+ * - [Slider API](https://next.mui.com/material-ui/api/slider/)
  */
 declare const Slider: OverridableComponent<SliderTypeMap>;