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

package/legacy/Skeleton/Skeleton.js

@@ -1,166 +0,0 @@
-'use client';
-
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-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 { getSkeletonUtilityClass } from './skeletonClasses';
-import { jsx as _jsx } from "react/jsx-runtime";
-var useUtilityClasses = function useUtilityClasses(ownerState) {
-  var classes = ownerState.classes,
-    variant = ownerState.variant,
-    animation = ownerState.animation,
-    hasChildren = ownerState.hasChildren,
-    width = ownerState.width,
-    height = ownerState.height;
-  var slots = {
-    root: ['root', variant, animation, hasChildren && 'withChildren', hasChildren && !width && 'fitContent', hasChildren && !height && 'heightAuto']
-  };
-  return composeClasses(slots, getSkeletonUtilityClass, classes);
-};
-var pulseKeyframe = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    opacity: 1;\n  }\n\n  50% {\n    opacity: 0.4;\n  }\n\n  100% {\n    opacity: 1;\n  }\n"])));
-var waveKeyframe = keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  0% {\n    transform: translateX(-100%);\n  }\n\n  50% {\n    /* +0.5s of delay between each loop */\n    transform: translateX(100%);\n  }\n\n  100% {\n    transform: translateX(100%);\n  }\n"])));
-var SkeletonRoot = styled('span', {
-  name: 'MuiSkeleton',
-  slot: 'Root',
-  overridesResolver: function overridesResolver(props, styles) {
-    var ownerState = props.ownerState;
-    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];
-  }
-})(function (_ref) {
-  var theme = _ref.theme,
-    ownerState = _ref.ownerState;
-  var radiusUnit = getUnit(theme.shape.borderRadius) || 'px';
-  var radiusValue = toUnitless(theme.shape.borderRadius);
-  return _extends({
-    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: "".concat(radiusValue).concat(radiusUnit, "/").concat(Math.round(radiusValue / 0.6 * 10) / 10).concat(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'
-  });
-}, function (_ref2) {
-  var ownerState = _ref2.ownerState;
-  return ownerState.animation === 'pulse' && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      animation: ", " 2s ease-in-out 0.5s infinite;\n    "])), pulseKeyframe);
-}, function (_ref3) {
-  var ownerState = _ref3.ownerState,
-    theme = _ref3.theme;
-  return ownerState.animation === 'wave' && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      position: relative;\n      overflow: hidden;\n\n      /* Fix bug in Safari https://bugs.webkit.org/show_bug.cgi?id=68196 */\n      -webkit-mask-image: -webkit-radial-gradient(white, black);\n\n      &::after {\n        animation: ", " 2s linear 0.5s infinite;\n        background: linear-gradient(\n          90deg,\n          transparent,\n          ", ",\n          transparent\n        );\n        content: '';\n        position: absolute;\n        transform: translateX(-100%); /* Avoid flash during server-side hydration */\n        bottom: 0;\n        left: 0;\n        right: 0;\n        top: 0;\n      }\n    "])), waveKeyframe, (theme.vars || theme).palette.action.hover);
-});
-var Skeleton = /*#__PURE__*/React.forwardRef(function Skeleton(inProps, ref) {
-  var props = useThemeProps({
-    props: inProps,
-    name: 'MuiSkeleton'
-  });
-  var _props$animation = props.animation,
-    animation = _props$animation === void 0 ? 'pulse' : _props$animation,
-    className = props.className,
-    _props$component = props.component,
-    component = _props$component === void 0 ? 'span' : _props$component,
-    height = props.height,
-    style = props.style,
-    _props$variant = props.variant,
-    variant = _props$variant === void 0 ? 'text' : _props$variant,
-    width = props.width,
-    other = _objectWithoutProperties(props, ["animation", "className", "component", "height", "style", "variant", "width"]);
-  var ownerState = _extends({}, props, {
-    animation: animation,
-    component: component,
-    variant: variant,
-    hasChildren: Boolean(other.children)
-  });
-  var classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(SkeletonRoot, _extends({
-    as: component,
-    ref: ref,
-    className: clsx(classes.root, className),
-    ownerState: ownerState
-  }, other, {
-    style: _extends({
-      width: width,
-      height: height
-    }, style)
-  }));
-});
-process.env.NODE_ENV !== "production" ? Skeleton.propTypes /* remove-proptypes */ = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
-  /**
-   * The animation.
-   * If `false` the animation effect is disabled.
-   * @default 'pulse'
-   */
-  animation: PropTypes.oneOf(['pulse', 'wave', false]),
-  /**
-   * Optional children to infer width and height from.
-   */
-  children: PropTypes.node,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
-   * Height of the skeleton.
-   * Useful when you don't want to adapt the skeleton to a text element but for instance a card.
-   */
-  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /**
-   * @ignore
-   */
-  style: PropTypes.object,
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-  /**
-   * The type of content that will be rendered.
-   * @default 'text'
-   */
-  variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['circular', 'rectangular', 'rounded', 'text']), PropTypes.string]),
-  /**
-   * Width of the skeleton.
-   * Useful when the skeleton is inside an inline element with no width of its own.
-   */
-  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
-} : void 0;
-export default Skeleton;

package/legacy/Skeleton/index.js

@@ -1,5 +0,0 @@
-'use client';
-
-export { default } from './Skeleton';
-export * from './skeletonClasses';
-export { default as skeletonClasses } from './skeletonClasses';

package/legacy/Skeleton/skeletonClasses.js

@@ -1,7 +0,0 @@
-import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-import generateUtilityClass from '@mui/utils/generateUtilityClass';
-export function getSkeletonUtilityClass(slot) {
-  return generateUtilityClass('MuiSkeleton', slot);
-}
-var skeletonClasses = generateUtilityClasses('MuiSkeleton', ['root', 'text', 'rectangular', 'rounded', 'circular', 'pulse', 'wave', 'withChildren', 'fitContent', 'heightAuto']);
-export default skeletonClasses;

package/legacy/Slide/Slide.js

@@ -1,333 +0,0 @@
-'use client';
-
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { Transition } from 'react-transition-group';
-import chainPropTypes from '@mui/utils/chainPropTypes';
-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 { reflow, getTransitionProps } from '../transitions/utils';
-import { ownerWindow } from '../utils';
-
-// Translate the node so it can't be seen on the screen.
-// Later, we're going to translate the node back to its original location with `none`.
-import { jsx as _jsx } from "react/jsx-runtime";
-function getTranslateValue(direction, node, resolvedContainer) {
-  var rect = node.getBoundingClientRect();
-  var containerRect = resolvedContainer && resolvedContainer.getBoundingClientRect();
-  var containerWindow = ownerWindow(node);
-  var transform;
-  if (node.fakeTransform) {
-    transform = node.fakeTransform;
-  } else {
-    var computedStyle = containerWindow.getComputedStyle(node);
-    transform = computedStyle.getPropertyValue('-webkit-transform') || computedStyle.getPropertyValue('transform');
-  }
-  var offsetX = 0;
-  var offsetY = 0;
-  if (transform && transform !== 'none' && typeof transform === 'string') {
-    var transformValues = transform.split('(')[1].split(')')[0].split(',');
-    offsetX = parseInt(transformValues[4], 10);
-    offsetY = parseInt(transformValues[5], 10);
-  }
-  if (direction === 'left') {
-    if (containerRect) {
-      return "translateX(".concat(containerRect.right + offsetX - rect.left, "px)");
-    }
-    return "translateX(".concat(containerWindow.innerWidth + offsetX - rect.left, "px)");
-  }
-  if (direction === 'right') {
-    if (containerRect) {
-      return "translateX(-".concat(rect.right - containerRect.left - offsetX, "px)");
-    }
-    return "translateX(-".concat(rect.left + rect.width - offsetX, "px)");
-  }
-  if (direction === 'up') {
-    if (containerRect) {
-      return "translateY(".concat(containerRect.bottom + offsetY - rect.top, "px)");
-    }
-    return "translateY(".concat(containerWindow.innerHeight + offsetY - rect.top, "px)");
-  }
-
-  // direction === 'down'
-  if (containerRect) {
-    return "translateY(-".concat(rect.top - containerRect.top + rect.height - offsetY, "px)");
-  }
-  return "translateY(-".concat(rect.top + rect.height - offsetY, "px)");
-}
-function resolveContainer(containerPropProp) {
-  return typeof containerPropProp === 'function' ? containerPropProp() : containerPropProp;
-}
-export function setTranslateValue(direction, node, containerProp) {
-  var resolvedContainer = resolveContainer(containerProp);
-  var transform = getTranslateValue(direction, node, resolvedContainer);
-  if (transform) {
-    node.style.webkitTransform = transform;
-    node.style.transform = transform;
-  }
-}
-
-/**
- * The Slide transition is used by the [Drawer](/material-ui/react-drawer/) component.
- * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
- */
-var Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
-  var theme = useTheme();
-  var defaultEasing = {
-    enter: theme.transitions.easing.easeOut,
-    exit: theme.transitions.easing.sharp
-  };
-  var defaultTimeout = {
-    enter: theme.transitions.duration.enteringScreen,
-    exit: theme.transitions.duration.leavingScreen
-  };
-  var addEndListener = props.addEndListener,
-    _props$appear = props.appear,
-    appear = _props$appear === void 0 ? true : _props$appear,
-    _children = props.children,
-    containerProp = props.container,
-    _props$direction = props.direction,
-    direction = _props$direction === void 0 ? 'down' : _props$direction,
-    _props$easing = props.easing,
-    easingProp = _props$easing === void 0 ? defaultEasing : _props$easing,
-    inProp = props.in,
-    onEnter = props.onEnter,
-    onEntered = props.onEntered,
-    onEntering = props.onEntering,
-    onExit = props.onExit,
-    onExited = props.onExited,
-    onExiting = props.onExiting,
-    style = props.style,
-    _props$timeout = props.timeout,
-    timeout = _props$timeout === void 0 ? defaultTimeout : _props$timeout,
-    _props$TransitionComp = props.TransitionComponent,
-    TransitionComponent = _props$TransitionComp === void 0 ? Transition : _props$TransitionComp,
-    other = _objectWithoutProperties(props, ["addEndListener", "appear", "children", "container", "direction", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"]);
-  var childrenRef = React.useRef(null);
-  var handleRef = useForkRef(_children.ref, childrenRef, ref);
-  var normalizedTransitionCallback = function normalizedTransitionCallback(callback) {
-    return function (isAppearing) {
-      if (callback) {
-        // onEnterXxx and onExitXxx callbacks have a different arguments.length value.
-        if (isAppearing === undefined) {
-          callback(childrenRef.current);
-        } else {
-          callback(childrenRef.current, isAppearing);
-        }
-      }
-    };
-  };
-  var handleEnter = normalizedTransitionCallback(function (node, isAppearing) {
-    setTranslateValue(direction, node, containerProp);
-    reflow(node);
-    if (onEnter) {
-      onEnter(node, isAppearing);
-    }
-  });
-  var handleEntering = normalizedTransitionCallback(function (node, isAppearing) {
-    var transitionProps = getTransitionProps({
-      timeout: timeout,
-      style: style,
-      easing: easingProp
-    }, {
-      mode: 'enter'
-    });
-    node.style.webkitTransition = theme.transitions.create('-webkit-transform', _extends({}, transitionProps));
-    node.style.transition = theme.transitions.create('transform', _extends({}, transitionProps));
-    node.style.webkitTransform = 'none';
-    node.style.transform = 'none';
-    if (onEntering) {
-      onEntering(node, isAppearing);
-    }
-  });
-  var handleEntered = normalizedTransitionCallback(onEntered);
-  var handleExiting = normalizedTransitionCallback(onExiting);
-  var handleExit = normalizedTransitionCallback(function (node) {
-    var transitionProps = getTransitionProps({
-      timeout: timeout,
-      style: style,
-      easing: easingProp
-    }, {
-      mode: 'exit'
-    });
-    node.style.webkitTransition = theme.transitions.create('-webkit-transform', transitionProps);
-    node.style.transition = theme.transitions.create('transform', transitionProps);
-    setTranslateValue(direction, node, containerProp);
-    if (onExit) {
-      onExit(node);
-    }
-  });
-  var handleExited = normalizedTransitionCallback(function (node) {
-    // No need for transitions when the component is hidden
-    node.style.webkitTransition = '';
-    node.style.transition = '';
-    if (onExited) {
-      onExited(node);
-    }
-  });
-  var handleAddEndListener = function handleAddEndListener(next) {
-    if (addEndListener) {
-      // Old call signature before `react-transition-group` implemented `nodeRef`
-      addEndListener(childrenRef.current, next);
-    }
-  };
-  var updatePosition = React.useCallback(function () {
-    if (childrenRef.current) {
-      setTranslateValue(direction, childrenRef.current, containerProp);
-    }
-  }, [direction, containerProp]);
-  React.useEffect(function () {
-    // Skip configuration where the position is screen size invariant.
-    if (inProp || direction === 'down' || direction === 'right') {
-      return undefined;
-    }
-    var handleResize = debounce(function () {
-      if (childrenRef.current) {
-        setTranslateValue(direction, childrenRef.current, containerProp);
-      }
-    });
-    var containerWindow = ownerWindow(childrenRef.current);
-    containerWindow.addEventListener('resize', handleResize);
-    return function () {
-      handleResize.clear();
-      containerWindow.removeEventListener('resize', handleResize);
-    };
-  }, [direction, inProp, containerProp]);
-  React.useEffect(function () {
-    if (!inProp) {
-      // We need to update the position of the drawer when the direction change and
-      // when it's hidden.
-      updatePosition();
-    }
-  }, [inProp, updatePosition]);
-  return /*#__PURE__*/_jsx(TransitionComponent, _extends({
-    nodeRef: childrenRef,
-    onEnter: handleEnter,
-    onEntered: handleEntered,
-    onEntering: handleEntering,
-    onExit: handleExit,
-    onExited: handleExited,
-    onExiting: handleExiting,
-    addEndListener: handleAddEndListener,
-    appear: appear,
-    in: inProp,
-    timeout: timeout
-  }, other, {
-    children: function children(state, childProps) {
-      return /*#__PURE__*/React.cloneElement(_children, _extends({
-        ref: handleRef,
-        style: _extends({
-          visibility: state === 'exited' && !inProp ? 'hidden' : undefined
-        }, style, _children.props.style)
-      }, childProps));
-    }
-  }));
-});
-process.env.NODE_ENV !== "production" ? Slide.propTypes /* remove-proptypes */ = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
-  /**
-   * Add a custom transition end trigger. Called with the transitioning DOM
-   * node and a done callback. Allows for more fine grained transition end
-   * logic. Note: Timeouts are still used as a fallback if provided.
-   */
-  addEndListener: PropTypes.func,
-  /**
-   * Perform the enter transition when it first mounts if `in` is also `true`.
-   * Set this to `false` to disable this behavior.
-   * @default true
-   */
-  appear: PropTypes.bool,
-  /**
-   * A single child content element.
-   */
-  children: elementAcceptingRef.isRequired,
-  /**
-   * An HTML element, or a function that returns one.
-   * It's used to set the container the Slide is transitioning from.
-   */
-  container: chainPropTypes(PropTypes.oneOfType([HTMLElementType, PropTypes.func]), function (props) {
-    if (props.open) {
-      var resolvedContainer = resolveContainer(props.container);
-      if (resolvedContainer && resolvedContainer.nodeType === 1) {
-        var box = resolvedContainer.getBoundingClientRect();
-        if (process.env.NODE_ENV !== 'test' && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
-          return new Error(['MUI: The `container` prop provided to the component is invalid.', 'The anchor element should be part of the document layout.', "Make sure the element is present in the document or that it's not display none."].join('\n'));
-        }
-      } else if (!resolvedContainer || typeof resolvedContainer.getBoundingClientRect !== 'function' || resolvedContainer.contextElement != null && resolvedContainer.contextElement.nodeType !== 1) {
-        return new Error(['MUI: The `container` prop provided to the component is invalid.', 'It should be an HTML element instance.'].join('\n'));
-      }
-    }
-    return null;
-  }),
-  /**
-   * Direction the child node will enter from.
-   * @default 'down'
-   */
-  direction: PropTypes.oneOf(['down', 'left', 'right', 'up']),
-  /**
-   * The transition timing function.
-   * You may specify a single easing or a object containing enter and exit values.
-   * @default {
-   *   enter: theme.transitions.easing.easeOut,
-   *   exit: theme.transitions.easing.sharp,
-   * }
-   */
-  easing: PropTypes.oneOfType([PropTypes.shape({
-    enter: PropTypes.string,
-    exit: PropTypes.string
-  }), PropTypes.string]),
-  /**
-   * If `true`, the component will transition in.
-   */
-  in: PropTypes.bool,
-  /**
-   * @ignore
-   */
-  onEnter: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onEntered: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onEntering: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onExit: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onExited: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onExiting: PropTypes.func,
-  /**
-   * @ignore
-   */
-  style: PropTypes.object,
-  /**
-   * The duration for the transition, in milliseconds.
-   * You may specify a single timeout for all transitions, or individually with an object.
-   * @default {
-   *   enter: theme.transitions.duration.enteringScreen,
-   *   exit: theme.transitions.duration.leavingScreen,
-   * }
-   */
-  timeout: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
-    appear: PropTypes.number,
-    enter: PropTypes.number,
-    exit: PropTypes.number
-  })])
-} : void 0;
-export default Slide;

package/legacy/Slide/index.js

@@ -1,3 +0,0 @@
-'use client';
-
-export { default } from './Slide';