@mui/material 7.0.0 → 7.0.2

package/modern/Fab/Fab.js

@@ -1,271 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import composeClasses from '@mui/utils/composeClasses';
-import ButtonBase from "../ButtonBase/index.js";
-import capitalize from "../utils/capitalize.js";
-import fabClasses, { getFabUtilityClass } from "./fabClasses.js";
-import rootShouldForwardProp from "../styles/rootShouldForwardProp.js";
-import { styled } from "../zero-styled/index.js";
-import memoTheme from "../utils/memoTheme.js";
-import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.js";
-import { useDefaultProps } from "../DefaultPropsProvider/index.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    color,
-    variant,
-    classes,
-    size
-  } = ownerState;
-  const slots = {
-    root: ['root', variant, `size${capitalize(size)}`, color === 'inherit' ? 'colorInherit' : color]
-  };
-  const composedClasses = composeClasses(slots, getFabUtilityClass, classes);
-  return {
-    ...classes,
-    // forward the focused, disabled, etc. classes to the ButtonBase
-    ...composedClasses
-  };
-};
-const FabRoot = styled(ButtonBase, {
-  name: 'MuiFab',
-  slot: 'Root',
-  shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
-  overridesResolver: (props, styles) => {
-    const {
-      ownerState
-    } = props;
-    return [styles.root, styles[ownerState.variant], styles[`size${capitalize(ownerState.size)}`], ownerState.color === 'inherit' && styles.colorInherit, styles[capitalize(ownerState.size)], styles[ownerState.color]];
-  }
-})(memoTheme(({
-  theme
-}) => ({
-  ...theme.typography.button,
-  minHeight: 36,
-  transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
-    duration: theme.transitions.duration.short
-  }),
-  borderRadius: '50%',
-  padding: 0,
-  minWidth: 0,
-  width: 56,
-  height: 56,
-  zIndex: (theme.vars || theme).zIndex.fab,
-  boxShadow: (theme.vars || theme).shadows[6],
-  '&:active': {
-    boxShadow: (theme.vars || theme).shadows[12]
-  },
-  color: theme.vars ? theme.vars.palette.text.primary : theme.palette.getContrastText?.(theme.palette.grey[300]),
-  backgroundColor: (theme.vars || theme).palette.grey[300],
-  '&:hover': {
-    backgroundColor: (theme.vars || theme).palette.grey.A100,
-    // Reset on touch devices, it doesn't add specificity
-    '@media (hover: none)': {
-      backgroundColor: (theme.vars || theme).palette.grey[300]
-    },
-    textDecoration: 'none'
-  },
-  [`&.${fabClasses.focusVisible}`]: {
-    boxShadow: (theme.vars || theme).shadows[6]
-  },
-  variants: [{
-    props: {
-      size: 'small'
-    },
-    style: {
-      width: 40,
-      height: 40
-    }
-  }, {
-    props: {
-      size: 'medium'
-    },
-    style: {
-      width: 48,
-      height: 48
-    }
-  }, {
-    props: {
-      variant: 'extended'
-    },
-    style: {
-      borderRadius: 48 / 2,
-      padding: '0 16px',
-      width: 'auto',
-      minHeight: 'auto',
-      minWidth: 48,
-      height: 48
-    }
-  }, {
-    props: {
-      variant: 'extended',
-      size: 'small'
-    },
-    style: {
-      width: 'auto',
-      padding: '0 8px',
-      borderRadius: 34 / 2,
-      minWidth: 34,
-      height: 34
-    }
-  }, {
-    props: {
-      variant: 'extended',
-      size: 'medium'
-    },
-    style: {
-      width: 'auto',
-      padding: '0 16px',
-      borderRadius: 40 / 2,
-      minWidth: 40,
-      height: 40
-    }
-  }, {
-    props: {
-      color: 'inherit'
-    },
-    style: {
-      color: 'inherit'
-    }
-  }]
-})), memoTheme(({
-  theme
-}) => ({
-  variants: [...Object.entries(theme.palette).filter(createSimplePaletteValueFilter(['dark', 'contrastText'])) // check all the used fields in the style below
-  .map(([color]) => ({
-    props: {
-      color
-    },
-    style: {
-      color: (theme.vars || theme).palette[color].contrastText,
-      backgroundColor: (theme.vars || theme).palette[color].main,
-      '&:hover': {
-        backgroundColor: (theme.vars || theme).palette[color].dark,
-        // Reset on touch devices, it doesn't add specificity
-        '@media (hover: none)': {
-          backgroundColor: (theme.vars || theme).palette[color].main
-        }
-      }
-    }
-  }))]
-})), memoTheme(({
-  theme
-}) => ({
-  [`&.${fabClasses.disabled}`]: {
-    color: (theme.vars || theme).palette.action.disabled,
-    boxShadow: (theme.vars || theme).shadows[0],
-    backgroundColor: (theme.vars || theme).palette.action.disabledBackground
-  }
-})));
-const Fab = /*#__PURE__*/React.forwardRef(function Fab(inProps, ref) {
-  const props = useDefaultProps({
-    props: inProps,
-    name: 'MuiFab'
-  });
-  const {
-    children,
-    className,
-    color = 'default',
-    component = 'button',
-    disabled = false,
-    disableFocusRipple = false,
-    focusVisibleClassName,
-    size = 'large',
-    variant = 'circular',
-    ...other
-  } = props;
-  const ownerState = {
-    ...props,
-    color,
-    component,
-    disabled,
-    disableFocusRipple,
-    size,
-    variant
-  };
-  const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(FabRoot, {
-    className: clsx(classes.root, className),
-    component: component,
-    disabled: disabled,
-    focusRipple: !disableFocusRipple,
-    focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
-    ownerState: ownerState,
-    ref: ref,
-    ...other,
-    classes: classes,
-    children: children
-  });
-});
-process.env.NODE_ENV !== "production" ? Fab.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 content of the component.
-   */
-  children: PropTypes.node,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * The color of the component.
-   * It supports both default and custom theme colors, which can be added as shown in the
-   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
-   * @default 'default'
-   */
-  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['default', 'error', 'info', 'inherit', 'primary', 'secondary', 'success', 'warning']), PropTypes.string]),
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
-   * If `true`, the component is disabled.
-   * @default false
-   */
-  disabled: PropTypes.bool,
-  /**
-   * If `true`, the  keyboard focus ripple is disabled.
-   * @default false
-   */
-  disableFocusRipple: PropTypes.bool,
-  /**
-   * If `true`, the ripple effect is disabled.
-   */
-  disableRipple: PropTypes.bool,
-  /**
-   * @ignore
-   */
-  focusVisibleClassName: PropTypes.string,
-  /**
-   * The URL to link to when the button is clicked.
-   * If defined, an `a` element will be used as the root node.
-   */
-  href: PropTypes.string,
-  /**
-   * The size of the component.
-   * `small` is equivalent to the dense button styling.
-   * @default 'large'
-   */
-  size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['small', 'medium', 'large']), PropTypes.string]),
-  /**
-   * 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 variant to use.
-   * @default 'circular'
-   */
-  variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['circular', 'extended']), PropTypes.string])
-} : void 0;
-export default Fab;

package/modern/Fab/fabClasses.js

@@ -1,7 +0,0 @@
-import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-import generateUtilityClass from '@mui/utils/generateUtilityClass';
-export function getFabUtilityClass(slot) {
-  return generateUtilityClass('MuiFab', slot);
-}
-const fabClasses = generateUtilityClasses('MuiFab', ['root', 'primary', 'secondary', 'extended', 'circular', 'focusVisible', 'disabled', 'colorInherit', 'sizeSmall', 'sizeMedium', 'sizeLarge', 'info', 'error', 'warning', 'success']);
-export default fabClasses;

package/modern/Fab/index.js

@@ -1,3 +0,0 @@
-export { default } from "./Fab.js";
-export { default as fabClasses } from "./fabClasses.js";
-export * from "./fabClasses.js";

package/modern/Fade/Fade.js

@@ -1,210 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { Transition } from 'react-transition-group';
-import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
-import getReactElementRef from '@mui/utils/getReactElementRef';
-import { useTheme } from "../zero-styled/index.js";
-import { reflow, getTransitionProps } from "../transitions/utils.js";
-import useForkRef from "../utils/useForkRef.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const styles = {
-  entering: {
-    opacity: 1
-  },
-  entered: {
-    opacity: 1
-  }
-};
-
-/**
- * The Fade transition is used by the [Modal](/material-ui/react-modal/) component.
- * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
- */
-const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
-  const theme = useTheme();
-  const defaultTimeout = {
-    enter: theme.transitions.duration.enteringScreen,
-    exit: theme.transitions.duration.leavingScreen
-  };
-  const {
-    addEndListener,
-    appear = true,
-    children,
-    easing,
-    in: inProp,
-    onEnter,
-    onEntered,
-    onEntering,
-    onExit,
-    onExited,
-    onExiting,
-    style,
-    timeout = defaultTimeout,
-    // eslint-disable-next-line react/prop-types
-    TransitionComponent = Transition,
-    ...other
-  } = props;
-  const enableStrictModeCompat = true;
-  const nodeRef = React.useRef(null);
-  const handleRef = useForkRef(nodeRef, getReactElementRef(children), ref);
-  const normalizedTransitionCallback = callback => maybeIsAppearing => {
-    if (callback) {
-      const node = nodeRef.current;
-
-      // onEnterXxx and onExitXxx callbacks have a different arguments.length value.
-      if (maybeIsAppearing === undefined) {
-        callback(node);
-      } else {
-        callback(node, maybeIsAppearing);
-      }
-    }
-  };
-  const handleEntering = normalizedTransitionCallback(onEntering);
-  const handleEnter = normalizedTransitionCallback((node, isAppearing) => {
-    reflow(node); // So the animation always start from the start.
-
-    const transitionProps = getTransitionProps({
-      style,
-      timeout,
-      easing
-    }, {
-      mode: 'enter'
-    });
-    node.style.webkitTransition = theme.transitions.create('opacity', transitionProps);
-    node.style.transition = theme.transitions.create('opacity', transitionProps);
-    if (onEnter) {
-      onEnter(node, isAppearing);
-    }
-  });
-  const handleEntered = normalizedTransitionCallback(onEntered);
-  const handleExiting = normalizedTransitionCallback(onExiting);
-  const handleExit = normalizedTransitionCallback(node => {
-    const transitionProps = getTransitionProps({
-      style,
-      timeout,
-      easing
-    }, {
-      mode: 'exit'
-    });
-    node.style.webkitTransition = theme.transitions.create('opacity', transitionProps);
-    node.style.transition = theme.transitions.create('opacity', transitionProps);
-    if (onExit) {
-      onExit(node);
-    }
-  });
-  const handleExited = normalizedTransitionCallback(onExited);
-  const handleAddEndListener = next => {
-    if (addEndListener) {
-      // Old call signature before `react-transition-group` implemented `nodeRef`
-      addEndListener(nodeRef.current, next);
-    }
-  };
-  return /*#__PURE__*/_jsx(TransitionComponent, {
-    appear: appear,
-    in: inProp,
-    nodeRef: enableStrictModeCompat ? nodeRef : undefined,
-    onEnter: handleEnter,
-    onEntered: handleEntered,
-    onEntering: handleEntering,
-    onExit: handleExit,
-    onExited: handleExited,
-    onExiting: handleExiting,
-    addEndListener: handleAddEndListener,
-    timeout: timeout,
-    ...other,
-    children: (state, {
-      ownerState,
-      ...restChildProps
-    }) => {
-      return /*#__PURE__*/React.cloneElement(children, {
-        style: {
-          opacity: 0,
-          visibility: state === 'exited' && !inProp ? 'hidden' : undefined,
-          ...styles[state],
-          ...style,
-          ...children.props.style
-        },
-        ref: handleRef,
-        ...restChildProps
-      });
-    }
-  });
-});
-process.env.NODE_ENV !== "production" ? Fade.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,
-  /**
-   * The transition timing function.
-   * You may specify a single easing or a object containing enter and exit values.
-   */
-  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 Fade;

package/modern/Fade/index.js

@@ -1 +0,0 @@
-export { default } from "./Fade.js";