"use strict"; 'use client'; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); Object.defineProperty(exports, "__esModule", { value: true }); exports.default = void 0; var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose")); var React = _interopRequireWildcard(require("react")); var _propTypes = _interopRequireDefault(require("prop-types")); var _reactTransitionGroup = require("react-transition-group"); var _elementAcceptingRef = _interopRequireDefault(require("@mui/utils/elementAcceptingRef")); var _useTheme = _interopRequireDefault(require("../styles/useTheme")); var _utils = require("../transitions/utils"); var _useForkRef = _interopRequireDefault(require("../utils/useForkRef")); var _jsxRuntime = require("react/jsx-runtime"); const _excluded = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"]; function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); } function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; } 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 = (0, _useTheme.default)(); 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 = _reactTransitionGroup.Transition } = props, other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded); const enableStrictModeCompat = true; const nodeRef = React.useRef(null); const handleRef = (0, _useForkRef.default)(nodeRef, children.ref, 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) => { (0, _utils.reflow)(node); // So the animation always start from the start. const transitionProps = (0, _utils.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 = (0, _utils.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__*/(0, _jsxRuntime.jsx)(TransitionComponent, (0, _extends2.default)({ 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, childProps) => { return /*#__PURE__*/React.cloneElement(children, (0, _extends2.default)({ style: (0, _extends2.default)({ opacity: 0, visibility: state === 'exited' && !inProp ? 'hidden' : undefined }, styles[state], style, children.props.style), ref: handleRef }, childProps)); } })); }); 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.default.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.default.bool, /** * A single child content element. */ children: _elementAcceptingRef.default.isRequired, /** * The transition timing function. * You may specify a single easing or a object containing enter and exit values. */ easing: _propTypes.default.oneOfType([_propTypes.default.shape({ enter: _propTypes.default.string, exit: _propTypes.default.string }), _propTypes.default.string]), /** * If `true`, the component will transition in. */ in: _propTypes.default.bool, /** * @ignore */ onEnter: _propTypes.default.func, /** * @ignore */ onEntered: _propTypes.default.func, /** * @ignore */ onEntering: _propTypes.default.func, /** * @ignore */ onExit: _propTypes.default.func, /** * @ignore */ onExited: _propTypes.default.func, /** * @ignore */ onExiting: _propTypes.default.func, /** * @ignore */ style: _propTypes.default.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.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({ appear: _propTypes.default.number, enter: _propTypes.default.number, exit: _propTypes.default.number })]) } : void 0; var _default = exports.default = Fade;