@mui/material 7.0.0 → 7.0.2

package/modern/Collapse/Collapse.js

@@ -1,411 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import clsx from 'clsx';
-import PropTypes from 'prop-types';
-import { Transition } from 'react-transition-group';
-import useTimeout from '@mui/utils/useTimeout';
-import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';
-import composeClasses from '@mui/utils/composeClasses';
-import { styled, useTheme } from "../zero-styled/index.js";
-import memoTheme from "../utils/memoTheme.js";
-import { useDefaultProps } from "../DefaultPropsProvider/index.js";
-import { duration } from "../styles/createTransitions.js";
-import { getTransitionProps } from "../transitions/utils.js";
-import { useForkRef } from "../utils/index.js";
-import { getCollapseUtilityClass } from "./collapseClasses.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    orientation,
-    classes
-  } = ownerState;
-  const slots = {
-    root: ['root', `${orientation}`],
-    entered: ['entered'],
-    hidden: ['hidden'],
-    wrapper: ['wrapper', `${orientation}`],
-    wrapperInner: ['wrapperInner', `${orientation}`]
-  };
-  return composeClasses(slots, getCollapseUtilityClass, classes);
-};
-const CollapseRoot = styled('div', {
-  name: 'MuiCollapse',
-  slot: 'Root',
-  overridesResolver: (props, styles) => {
-    const {
-      ownerState
-    } = props;
-    return [styles.root, styles[ownerState.orientation], ownerState.state === 'entered' && styles.entered, ownerState.state === 'exited' && !ownerState.in && ownerState.collapsedSize === '0px' && styles.hidden];
-  }
-})(memoTheme(({
-  theme
-}) => ({
-  height: 0,
-  overflow: 'hidden',
-  transition: theme.transitions.create('height'),
-  variants: [{
-    props: {
-      orientation: 'horizontal'
-    },
-    style: {
-      height: 'auto',
-      width: 0,
-      transition: theme.transitions.create('width')
-    }
-  }, {
-    props: {
-      state: 'entered'
-    },
-    style: {
-      height: 'auto',
-      overflow: 'visible'
-    }
-  }, {
-    props: {
-      state: 'entered',
-      orientation: 'horizontal'
-    },
-    style: {
-      width: 'auto'
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.state === 'exited' && !ownerState.in && ownerState.collapsedSize === '0px',
-    style: {
-      visibility: 'hidden'
-    }
-  }]
-})));
-const CollapseWrapper = styled('div', {
-  name: 'MuiCollapse',
-  slot: 'Wrapper',
-  overridesResolver: (props, styles) => styles.wrapper
-})({
-  // Hack to get children with a negative margin to not falsify the height computation.
-  display: 'flex',
-  width: '100%',
-  variants: [{
-    props: {
-      orientation: 'horizontal'
-    },
-    style: {
-      width: 'auto',
-      height: '100%'
-    }
-  }]
-});
-const CollapseWrapperInner = styled('div', {
-  name: 'MuiCollapse',
-  slot: 'WrapperInner',
-  overridesResolver: (props, styles) => styles.wrapperInner
-})({
-  width: '100%',
-  variants: [{
-    props: {
-      orientation: 'horizontal'
-    },
-    style: {
-      width: 'auto',
-      height: '100%'
-    }
-  }]
-});
-
-/**
- * The Collapse transition is used by the
- * [Vertical Stepper](/material-ui/react-stepper/#vertical-stepper) StepContent component.
- * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
- */
-const Collapse = /*#__PURE__*/React.forwardRef(function Collapse(inProps, ref) {
-  const props = useDefaultProps({
-    props: inProps,
-    name: 'MuiCollapse'
-  });
-  const {
-    addEndListener,
-    children,
-    className,
-    collapsedSize: collapsedSizeProp = '0px',
-    component,
-    easing,
-    in: inProp,
-    onEnter,
-    onEntered,
-    onEntering,
-    onExit,
-    onExited,
-    onExiting,
-    orientation = 'vertical',
-    style,
-    timeout = duration.standard,
-    // eslint-disable-next-line react/prop-types
-    TransitionComponent = Transition,
-    ...other
-  } = props;
-  const ownerState = {
-    ...props,
-    orientation,
-    collapsedSize: collapsedSizeProp
-  };
-  const classes = useUtilityClasses(ownerState);
-  const theme = useTheme();
-  const timer = useTimeout();
-  const wrapperRef = React.useRef(null);
-  const autoTransitionDuration = React.useRef();
-  const collapsedSize = typeof collapsedSizeProp === 'number' ? `${collapsedSizeProp}px` : collapsedSizeProp;
-  const isHorizontal = orientation === 'horizontal';
-  const size = isHorizontal ? 'width' : 'height';
-  const nodeRef = React.useRef(null);
-  const handleRef = useForkRef(ref, nodeRef);
-  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 getWrapperSize = () => wrapperRef.current ? wrapperRef.current[isHorizontal ? 'clientWidth' : 'clientHeight'] : 0;
-  const handleEnter = normalizedTransitionCallback((node, isAppearing) => {
-    if (wrapperRef.current && isHorizontal) {
-      // Set absolute position to get the size of collapsed content
-      wrapperRef.current.style.position = 'absolute';
-    }
-    node.style[size] = collapsedSize;
-    if (onEnter) {
-      onEnter(node, isAppearing);
-    }
-  });
-  const handleEntering = normalizedTransitionCallback((node, isAppearing) => {
-    const wrapperSize = getWrapperSize();
-    if (wrapperRef.current && isHorizontal) {
-      // After the size is read reset the position back to default
-      wrapperRef.current.style.position = '';
-    }
-    const {
-      duration: transitionDuration,
-      easing: transitionTimingFunction
-    } = getTransitionProps({
-      style,
-      timeout,
-      easing
-    }, {
-      mode: 'enter'
-    });
-    if (timeout === 'auto') {
-      const duration2 = theme.transitions.getAutoHeightDuration(wrapperSize);
-      node.style.transitionDuration = `${duration2}ms`;
-      autoTransitionDuration.current = duration2;
-    } else {
-      node.style.transitionDuration = typeof transitionDuration === 'string' ? transitionDuration : `${transitionDuration}ms`;
-    }
-    node.style[size] = `${wrapperSize}px`;
-    node.style.transitionTimingFunction = transitionTimingFunction;
-    if (onEntering) {
-      onEntering(node, isAppearing);
-    }
-  });
-  const handleEntered = normalizedTransitionCallback((node, isAppearing) => {
-    node.style[size] = 'auto';
-    if (onEntered) {
-      onEntered(node, isAppearing);
-    }
-  });
-  const handleExit = normalizedTransitionCallback(node => {
-    node.style[size] = `${getWrapperSize()}px`;
-    if (onExit) {
-      onExit(node);
-    }
-  });
-  const handleExited = normalizedTransitionCallback(onExited);
-  const handleExiting = normalizedTransitionCallback(node => {
-    const wrapperSize = getWrapperSize();
-    const {
-      duration: transitionDuration,
-      easing: transitionTimingFunction
-    } = getTransitionProps({
-      style,
-      timeout,
-      easing
-    }, {
-      mode: 'exit'
-    });
-    if (timeout === 'auto') {
-      // TODO: rename getAutoHeightDuration to something more generic (width support)
-      // Actually it just calculates animation duration based on size
-      const duration2 = theme.transitions.getAutoHeightDuration(wrapperSize);
-      node.style.transitionDuration = `${duration2}ms`;
-      autoTransitionDuration.current = duration2;
-    } else {
-      node.style.transitionDuration = typeof transitionDuration === 'string' ? transitionDuration : `${transitionDuration}ms`;
-    }
-    node.style[size] = collapsedSize;
-    node.style.transitionTimingFunction = transitionTimingFunction;
-    if (onExiting) {
-      onExiting(node);
-    }
-  });
-  const handleAddEndListener = next => {
-    if (timeout === 'auto') {
-      timer.start(autoTransitionDuration.current || 0, next);
-    }
-    if (addEndListener) {
-      // Old call signature before `react-transition-group` implemented `nodeRef`
-      addEndListener(nodeRef.current, next);
-    }
-  };
-  return /*#__PURE__*/_jsx(TransitionComponent, {
-    in: inProp,
-    onEnter: handleEnter,
-    onEntered: handleEntered,
-    onEntering: handleEntering,
-    onExit: handleExit,
-    onExited: handleExited,
-    onExiting: handleExiting,
-    addEndListener: handleAddEndListener,
-    nodeRef: nodeRef,
-    timeout: timeout === 'auto' ? null : timeout,
-    ...other,
-    children: (state, {
-      ownerState: incomingOwnerState,
-      ...restChildProps
-    }) => /*#__PURE__*/_jsx(CollapseRoot, {
-      as: component,
-      className: clsx(classes.root, className, {
-        'entered': classes.entered,
-        'exited': !inProp && collapsedSize === '0px' && classes.hidden
-      }[state]),
-      style: {
-        [isHorizontal ? 'minWidth' : 'minHeight']: collapsedSize,
-        ...style
-      },
-      ref: handleRef,
-      ownerState: {
-        ...ownerState,
-        state
-      },
-      ...restChildProps,
-      children: /*#__PURE__*/_jsx(CollapseWrapper, {
-        ownerState: {
-          ...ownerState,
-          state
-        },
-        className: classes.wrapper,
-        ref: wrapperRef,
-        children: /*#__PURE__*/_jsx(CollapseWrapperInner, {
-          ownerState: {
-            ...ownerState,
-            state
-          },
-          className: classes.wrapperInner,
-          children: children
-        })
-      })
-    })
-  });
-});
-process.env.NODE_ENV !== "production" ? Collapse.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,
-  /**
-   * The content node to be collapsed.
-   */
-  children: PropTypes.node,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * The width (horizontal) or height (vertical) of the container when collapsed.
-   * @default '0px'
-   */
-  collapsedSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: elementTypeAcceptingRef,
-  /**
-   * 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,
-  /**
-   * The transition orientation.
-   * @default 'vertical'
-   */
-  orientation: PropTypes.oneOf(['horizontal', 'vertical']),
-  /**
-   * @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 duration for the transition, in milliseconds.
-   * You may specify a single timeout for all transitions, or individually with an object.
-   *
-   * Set to 'auto' to automatically calculate transition time based on height.
-   * @default duration.standard
-   */
-  timeout: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.shape({
-    appear: PropTypes.number,
-    enter: PropTypes.number,
-    exit: PropTypes.number
-  })])
-} : void 0;
-if (Collapse) {
-  Collapse.muiSupportAuto = true;
-}
-export default Collapse;

package/modern/Collapse/collapseClasses.js

@@ -1,7 +0,0 @@
-import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-import generateUtilityClass from '@mui/utils/generateUtilityClass';
-export function getCollapseUtilityClass(slot) {
-  return generateUtilityClass('MuiCollapse', slot);
-}
-const collapseClasses = generateUtilityClasses('MuiCollapse', ['root', 'horizontal', 'vertical', 'entered', 'hidden', 'wrapper', 'wrapperInner']);
-export default collapseClasses;

package/modern/Collapse/index.js

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

package/modern/Container/Container.js

@@ -1,67 +0,0 @@
-'use client';
-
-import PropTypes from 'prop-types';
-import { createContainer } from '@mui/system';
-import capitalize from "../utils/capitalize.js";
-import styled from "../styles/styled.js";
-import { useDefaultProps } from "../DefaultPropsProvider/index.js";
-const Container = createContainer({
-  createStyledComponent: styled('div', {
-    name: 'MuiContainer',
-    slot: 'Root',
-    overridesResolver: (props, styles) => {
-      const {
-        ownerState
-      } = props;
-      return [styles.root, styles[`maxWidth${capitalize(String(ownerState.maxWidth))}`], ownerState.fixed && styles.fixed, ownerState.disableGutters && styles.disableGutters];
-    }
-  }),
-  useThemeProps: inProps => useDefaultProps({
-    props: inProps,
-    name: 'MuiContainer'
-  })
-});
-process.env.NODE_ENV !== "production" ? Container.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`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
-  /**
-   * @ignore
-   */
-  children: PropTypes.node,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
-   * If `true`, the left and right padding is removed.
-   * @default false
-   */
-  disableGutters: PropTypes.bool,
-  /**
-   * Set the max-width to match the min-width of the current breakpoint.
-   * This is useful if you'd prefer to design for a fixed set of sizes
-   * instead of trying to accommodate a fully fluid viewport.
-   * It's fluid by default.
-   * @default false
-   */
-  fixed: PropTypes.bool,
-  /**
-   * Determine the max-width of the container.
-   * The container width grows with the size of the screen.
-   * Set to `false` to disable `maxWidth`.
-   * @default 'lg'
-   */
-  maxWidth: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false]), 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])
-} : void 0;
-export default Container;

package/modern/Container/containerClasses.js

@@ -1,7 +0,0 @@
-import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-import generateUtilityClass from '@mui/utils/generateUtilityClass';
-export function getContainerUtilityClass(slot) {
-  return generateUtilityClass('MuiContainer', slot);
-}
-const containerClasses = generateUtilityClasses('MuiContainer', ['root', 'disableGutters', 'fixed', 'maxWidthXs', 'maxWidthSm', 'maxWidthMd', 'maxWidthLg', 'maxWidthXl']);
-export default containerClasses;

package/modern/Container/index.js

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

package/modern/CssBaseline/CssBaseline.js

@@ -1,161 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { globalCss } from "../zero-styled/index.js";
-import { useDefaultProps } from "../DefaultPropsProvider/index.js";
-
-// to determine if the global styles are static or dynamic
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const isDynamicSupport = typeof globalCss({}) === 'function';
-export const html = (theme, enableColorScheme) => ({
-  WebkitFontSmoothing: 'antialiased',
-  // Antialiasing.
-  MozOsxFontSmoothing: 'grayscale',
-  // Antialiasing.
-  // Change from `box-sizing: content-box` so that `width`
-  // is not affected by `padding` or `border`.
-  boxSizing: 'border-box',
-  // Fix font resize problem in iOS
-  WebkitTextSizeAdjust: '100%',
-  // When used under CssVarsProvider, colorScheme should not be applied dynamically because it will generate the stylesheet twice for server-rendered applications.
-  ...(enableColorScheme && !theme.vars && {
-    colorScheme: theme.palette.mode
-  })
-});
-export const body = theme => ({
-  color: (theme.vars || theme).palette.text.primary,
-  ...theme.typography.body1,
-  backgroundColor: (theme.vars || theme).palette.background.default,
-  '@media print': {
-    // Save printer ink.
-    backgroundColor: (theme.vars || theme).palette.common.white
-  }
-});
-export const styles = (theme, enableColorScheme = false) => {
-  const colorSchemeStyles = {};
-  if (enableColorScheme && theme.colorSchemes && typeof theme.getColorSchemeSelector === 'function') {
-    Object.entries(theme.colorSchemes).forEach(([key, scheme]) => {
-      const selector = theme.getColorSchemeSelector(key);
-      if (selector.startsWith('@')) {
-        // for @media (prefers-color-scheme), we need to target :root
-        colorSchemeStyles[selector] = {
-          ':root': {
-            colorScheme: scheme.palette?.mode
-          }
-        };
-      } else {
-        // else, it's likely that the selector already target an element with a class or data attribute
-        colorSchemeStyles[selector.replace(/\s*&/, '')] = {
-          colorScheme: scheme.palette?.mode
-        };
-      }
-    });
-  }
-  let defaultStyles = {
-    html: html(theme, enableColorScheme),
-    '*, *::before, *::after': {
-      boxSizing: 'inherit'
-    },
-    'strong, b': {
-      fontWeight: theme.typography.fontWeightBold
-    },
-    body: {
-      margin: 0,
-      // Remove the margin in all browsers.
-      ...body(theme),
-      // Add support for document.body.requestFullScreen().
-      // Other elements, if background transparent, are not supported.
-      '&::backdrop': {
-        backgroundColor: (theme.vars || theme).palette.background.default
-      }
-    },
-    ...colorSchemeStyles
-  };
-  const themeOverrides = theme.components?.MuiCssBaseline?.styleOverrides;
-  if (themeOverrides) {
-    defaultStyles = [defaultStyles, themeOverrides];
-  }
-  return defaultStyles;
-};
-
-// `ecs` stands for enableColorScheme. This is internal logic to make it work with Pigment CSS, so shorter is better.
-const SELECTOR = 'mui-ecs';
-const staticStyles = theme => {
-  const result = styles(theme, false);
-  const baseStyles = Array.isArray(result) ? result[0] : result;
-  if (!theme.vars && baseStyles) {
-    baseStyles.html[`:root:has(${SELECTOR})`] = {
-      colorScheme: theme.palette.mode
-    };
-  }
-  if (theme.colorSchemes) {
-    Object.entries(theme.colorSchemes).forEach(([key, scheme]) => {
-      const selector = theme.getColorSchemeSelector(key);
-      if (selector.startsWith('@')) {
-        // for @media (prefers-color-scheme), we need to target :root
-        baseStyles[selector] = {
-          [`:root:not(:has(.${SELECTOR}))`]: {
-            colorScheme: scheme.palette?.mode
-          }
-        };
-      } else {
-        // else, it's likely that the selector already target an element with a class or data attribute
-        baseStyles[selector.replace(/\s*&/, '')] = {
-          [`&:not(:has(.${SELECTOR}))`]: {
-            colorScheme: scheme.palette?.mode
-          }
-        };
-      }
-    });
-  }
-  return result;
-};
-const GlobalStyles = globalCss(isDynamicSupport ? ({
-  theme,
-  enableColorScheme
-}) => styles(theme, enableColorScheme) : ({
-  theme
-}) => staticStyles(theme));
-
-/**
- * Kickstart an elegant, consistent, and simple baseline to build upon.
- */
-function CssBaseline(inProps) {
-  const props = useDefaultProps({
-    props: inProps,
-    name: 'MuiCssBaseline'
-  });
-  const {
-    children,
-    enableColorScheme = false
-  } = props;
-  return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [isDynamicSupport && /*#__PURE__*/_jsx(GlobalStyles, {
-      enableColorScheme: enableColorScheme
-    }), !isDynamicSupport && !enableColorScheme && /*#__PURE__*/_jsx("span", {
-      className: SELECTOR,
-      style: {
-        display: 'none'
-      }
-    }), children]
-  });
-}
-process.env.NODE_ENV !== "production" ? CssBaseline.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`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
-  /**
-   * You can wrap a node.
-   */
-  children: PropTypes.node,
-  /**
-   * Enable `color-scheme` CSS property to use `theme.palette.mode`.
-   * For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
-   * For browser support, check out https://caniuse.com/?search=color-scheme
-   * @default false
-   */
-  enableColorScheme: PropTypes.bool
-} : void 0;
-export default CssBaseline;

package/modern/CssBaseline/index.js

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