@tw1934/mui-material 7.3.7

package/esm/Skeleton/Skeleton.js

@@ -0,0 +1,216 @@
+'use client';
+
+import * as React from 'react';
+import clsx from 'clsx';
+import composeClasses from '@mui/utils/composeClasses';
+import { unstable_getUnit as getUnit, unstable_toUnitless as toUnitless } from "../styles/index.js";
+import { keyframes, css, styled } from "../zero-styled/index.js";
+import memoTheme from "../utils/memoTheme.js";
+import { useDefaultProps } from "../DefaultPropsProvider/index.js";
+import { getSkeletonUtilityClass } from "./skeletonClasses.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    variant,
+    animation,
+    hasChildren,
+    width,
+    height
+  } = ownerState;
+  const slots = {
+    root: ['root', variant, animation, hasChildren && 'withChildren', hasChildren && !width && 'fitContent', hasChildren && !height && 'heightAuto']
+  };
+  return composeClasses(slots, getSkeletonUtilityClass, classes);
+};
+const pulseKeyframe = keyframes`
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.4;
+  }
+
+  100% {
+    opacity: 1;
+  }
+`;
+const waveKeyframe = keyframes`
+  0% {
+    transform: translateX(-100%);
+  }
+
+  50% {
+    /* +0.5s of delay between each loop */
+    transform: translateX(100%);
+  }
+
+  100% {
+    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`
+        &::after {
+          animation: ${waveKeyframe} 2s linear 0.5s infinite;
+        }
+      ` : null;
+const SkeletonRoot = styled('span', {
+  name: 'MuiSkeleton',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    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];
+  }
+})(memoTheme(({
+  theme
+}) => {
+  const radiusUnit = getUnit(theme.shape.borderRadius) || 'px';
+  const radiusValue = toUnitless(theme.shape.borderRadius);
+  return {
+    display: 'block',
+    // Create a "on paper" color with sufficient contrast retaining the color
+    backgroundColor: theme.vars ? theme.vars.palette.Skeleton.bg : theme.alpha(theme.palette.text.primary, theme.palette.mode === 'light' ? 0.11 : 0.13),
+    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 || {
+        '&::after': {
+          animation: `${waveKeyframe} 2s linear 0.5s infinite`
+        }
+      }
+    }]
+  };
+}));
+const Skeleton = /*#__PURE__*/React.forwardRef(function Skeleton(inProps, ref) {
+  const props = useDefaultProps({
+    props: inProps,
+    name: 'MuiSkeleton'
+  });
+  const {
+    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, {
+    as: component,
+    ref: ref,
+    className: clsx(classes.root, className),
+    ownerState: ownerState,
+    ...other,
+    style: {
+      width,
+      height,
+      ...style
+    }
+  });
+});
+export default Skeleton;

package/esm/Skeleton/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./Skeleton.js";
+export { default } from "./Skeleton.js";
+export * from "./skeletonClasses.js";
+export { default as skeletonClasses } from "./skeletonClasses.js";

package/esm/Skeleton/index.js

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

package/esm/Skeleton/skeletonClasses.d.ts

@@ -0,0 +1,26 @@
+export interface SkeletonClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if `variant="text"`. */
+  text: string;
+  /** Styles applied to the root element if `variant="rectangular"`. */
+  rectangular: string;
+  /** Styles applied to the root element if `variant="rounded"`. */
+  rounded: string;
+  /** Styles applied to the root element if `variant="circular"`. */
+  circular: string;
+  /** Styles applied to the root element if `animation="pulse"`. */
+  pulse: string;
+  /** Styles applied to the root element if `animation="wave"`. */
+  wave: string;
+  /** Styles applied when the component is passed children. */
+  withChildren: string;
+  /** Styles applied when the component is passed children and no width. */
+  fitContent: string;
+  /** Styles applied when the component is passed children and no height. */
+  heightAuto: string;
+}
+export type SkeletonClassKey = keyof SkeletonClasses;
+export declare function getSkeletonUtilityClass(slot: string): string;
+declare const skeletonClasses: SkeletonClasses;
+export default skeletonClasses;

package/esm/Skeleton/skeletonClasses.js

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

package/esm/Slide/Slide.d.ts

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { TransitionProps } from "../transitions/transition.js";
+export interface SlideProps extends TransitionProps {
+  /**
+   * Perform the enter transition when it first mounts if `in` is also `true`.
+   * Set this to `false` to disable this behavior.
+   * @default true
+   */
+  appear?: boolean;
+  /**
+   * A single child content element.
+   */
+  children: React.ReactElement<unknown, any>;
+  /**
+   * An HTML element, or a function that returns one.
+   * It's used to set the container the Slide is transitioning from.
+   */
+  container?: null | Element | ((element: Element) => Element);
+  /**
+   * Direction the child node will enter from.
+   * @default 'down'
+   */
+  direction?: 'left' | 'right' | 'up' | 'down';
+  /**
+   * 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?: TransitionProps['easing'];
+  /**
+   * If `true`, the component will transition in.
+   */
+  in?: TransitionProps['in'];
+  ref?: React.Ref<unknown>;
+  /**
+   * 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?: TransitionProps['timeout'];
+}
+
+/**
+ * The Slide transition is used by the [Drawer](https://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/)
+ *
+ * API:
+ *
+ * - [Slide API](https://mui.com/material-ui/api/slide/)
+ * - inherits [Transition API](https://reactcommunity.org/react-transition-group/transition/#Transition-props)
+ */
+export default function Slide(props: SlideProps): React.JSX.Element;

package/esm/Slide/Slide.js

@@ -0,0 +1,235 @@
+'use client';
+
+import * as React from 'react';
+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 getReactElementRef from '@mui/utils/getReactElementRef';
+import debounce from "../utils/debounce.js";
+import useForkRef from "../utils/useForkRef.js";
+import { useTheme } from "../zero-styled/index.js";
+import { reflow, getTransitionProps } from "../transitions/utils.js";
+import { ownerWindow } from "../utils/index.js";
+
+// 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) {
+  const rect = node.getBoundingClientRect();
+  const containerRect = resolvedContainer && resolvedContainer.getBoundingClientRect();
+  const containerWindow = ownerWindow(node);
+  let transform;
+  if (node.fakeTransform) {
+    transform = node.fakeTransform;
+  } else {
+    const computedStyle = containerWindow.getComputedStyle(node);
+    transform = computedStyle.getPropertyValue('-webkit-transform') || computedStyle.getPropertyValue('transform');
+  }
+  let offsetX = 0;
+  let offsetY = 0;
+  if (transform && transform !== 'none' && typeof transform === 'string') {
+    const transformValues = transform.split('(')[1].split(')')[0].split(',');
+    offsetX = parseInt(transformValues[4], 10);
+    offsetY = parseInt(transformValues[5], 10);
+  }
+  if (direction === 'left') {
+    if (containerRect) {
+      return `translateX(${containerRect.right + offsetX - rect.left}px)`;
+    }
+    return `translateX(${containerWindow.innerWidth + offsetX - rect.left}px)`;
+  }
+  if (direction === 'right') {
+    if (containerRect) {
+      return `translateX(-${rect.right - containerRect.left - offsetX}px)`;
+    }
+    return `translateX(-${rect.left + rect.width - offsetX}px)`;
+  }
+  if (direction === 'up') {
+    if (containerRect) {
+      return `translateY(${containerRect.bottom + offsetY - rect.top}px)`;
+    }
+    return `translateY(${containerWindow.innerHeight + offsetY - rect.top}px)`;
+  }
+
+  // direction === 'down'
+  if (containerRect) {
+    return `translateY(-${rect.top - containerRect.top + rect.height - offsetY}px)`;
+  }
+  return `translateY(-${rect.top + rect.height - offsetY}px)`;
+}
+function resolveContainer(containerPropProp) {
+  return typeof containerPropProp === 'function' ? containerPropProp() : containerPropProp;
+}
+export function setTranslateValue(direction, node, containerProp) {
+  const resolvedContainer = resolveContainer(containerProp);
+  const 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.
+ */
+const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
+  const theme = useTheme();
+  const defaultEasing = {
+    enter: theme.transitions.easing.easeOut,
+    exit: theme.transitions.easing.sharp
+  };
+  const defaultTimeout = {
+    enter: theme.transitions.duration.enteringScreen,
+    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,
+    ...other
+  } = props;
+  const childrenRef = React.useRef(null);
+  const handleRef = useForkRef(getReactElementRef(children), childrenRef, ref);
+  const normalizedTransitionCallback = callback => isAppearing => {
+    if (callback) {
+      // onEnterXxx and onExitXxx callbacks have a different arguments.length value.
+      if (isAppearing === undefined) {
+        callback(childrenRef.current);
+      } else {
+        callback(childrenRef.current, isAppearing);
+      }
+    }
+  };
+  const handleEnter = normalizedTransitionCallback((node, isAppearing) => {
+    setTranslateValue(direction, node, containerProp);
+    reflow(node);
+    if (onEnter) {
+      onEnter(node, isAppearing);
+    }
+  });
+  const handleEntering = normalizedTransitionCallback((node, isAppearing) => {
+    const transitionProps = getTransitionProps({
+      timeout,
+      style,
+      easing: easingProp
+    }, {
+      mode: 'enter'
+    });
+    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) {
+      onEntering(node, isAppearing);
+    }
+  });
+  const handleEntered = normalizedTransitionCallback(onEntered);
+  const handleExiting = normalizedTransitionCallback(onExiting);
+  const handleExit = normalizedTransitionCallback(node => {
+    const transitionProps = getTransitionProps({
+      timeout,
+      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);
+    }
+  });
+  const handleExited = normalizedTransitionCallback(node => {
+    // No need for transitions when the component is hidden
+    node.style.webkitTransition = '';
+    node.style.transition = '';
+    if (onExited) {
+      onExited(node);
+    }
+  });
+  const handleAddEndListener = next => {
+    if (addEndListener) {
+      // Old call signature before `react-transition-group` implemented `nodeRef`
+      addEndListener(childrenRef.current, next);
+    }
+  };
+  const updatePosition = React.useCallback(() => {
+    if (childrenRef.current) {
+      setTranslateValue(direction, childrenRef.current, containerProp);
+    }
+  }, [direction, containerProp]);
+  React.useEffect(() => {
+    // Skip configuration where the position is screen size invariant.
+    if (inProp || direction === 'down' || direction === 'right') {
+      return undefined;
+    }
+    const handleResize = debounce(() => {
+      if (childrenRef.current) {
+        setTranslateValue(direction, childrenRef.current, containerProp);
+      }
+    });
+    const containerWindow = ownerWindow(childrenRef.current);
+    containerWindow.addEventListener('resize', handleResize);
+    return () => {
+      handleResize.clear();
+      containerWindow.removeEventListener('resize', handleResize);
+    };
+  }, [direction, inProp, containerProp]);
+  React.useEffect(() => {
+    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, {
+    nodeRef: childrenRef,
+    onEnter: handleEnter,
+    onEntered: handleEntered,
+    onEntering: handleEntering,
+    onExit: handleExit,
+    onExited: handleExited,
+    onExiting: handleExiting,
+    addEndListener: handleAddEndListener,
+    appear: appear,
+    in: inProp,
+    timeout: timeout,
+    ...other,
+    children: (state, {
+      ownerState,
+      ...restChildProps
+    }) => {
+      return /*#__PURE__*/React.cloneElement(children, {
+        ref: handleRef,
+        style: {
+          visibility: state === 'exited' && !inProp ? 'hidden' : undefined,
+          ...style,
+          ...children.props.style
+        },
+        ...restChildProps
+      });
+    }
+  });
+});
+export default Slide;

package/esm/Slide/index.d.ts

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

package/esm/Slide/index.js

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