@nex-ui/react/dist/cjs/components/modal/Motion.cjs

🎉 A beautiful, modern, and reliable React component library.

'use strict';

var jsxRuntime = require('react/jsx-runtime');
var react$1 = require('motion/react');
var m = require('motion/react-m');
var react = require('react');
var index = require('../utils/motionFeatures/index.cjs');

function _interopNamespace(e) {
  if (e && e.__esModule) return e;
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(n, k, d.get ? d : {
          enumerable: true,
          get: function () { return e[k]; }
        });
      }
    });
  }
  n.default = e;
  return Object.freeze(n);
}

var m__namespace = /*#__PURE__*/_interopNamespace(m);

const transition = {
    ease: 'easeInOut',
    duration: 0.2
};
const variants = {
    visible: {
        opacity: 1
    },
    hidden: {
        opacity: 0
    }
};
const Motion = ({ children, keepMounted, open })=>{
    const [display, setDisplay] = react.useState('none');
    const [scope, animate] = react$1.useAnimate();
    const opacity = react$1.useMotionValue(0);
    if (keepMounted && open && display === 'none') {
        setDisplay('block');
    }
    react.useEffect(()=>{
        if (!scope.current) {
            return;
        }
        const animation = async ()=>{
            if (open) {
                animate(opacity, 1, transition);
            } else {
                await animate(opacity, 0, transition);
                setDisplay('none');
            }
        };
        animation();
    }, [
        animate,
        opacity,
        open,
        scope
    ]);
    return /*#__PURE__*/ jsxRuntime.jsx(react$1.LazyMotion, {
        features: index.motionFeatures,
        children: keepMounted ? /*#__PURE__*/ jsxRuntime.jsx(m__namespace.div, {
            tabIndex: -1,
            ref: scope,
            style: {
                display,
                opacity
            },
            children: children
        }) : /*#__PURE__*/ jsxRuntime.jsx(react$1.AnimatePresence, {
            children: open ? /*#__PURE__*/ jsxRuntime.jsx(m__namespace.div, {
                tabIndex: -1,
                variants: variants,
                initial: "hidden",
                animate: "visible",
                exit: "hidden",
                transition: transition,
                children: children
            }) : null
        })
    });
};
Motion.displayName = 'ModalMotion';

exports.Motion = Motion;