@nex-ui/react/dist/cjs/components/utils/PresenceMotion.cjs

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

"use client";
'use strict';

var jsxRuntime = require('react/jsx-runtime');
var styled = require('@nex-ui/styled');
var react = require('react');
var hooks = require('@nex-ui/hooks');
var react$1 = require('motion/react');
var m = require('motion/react-m');
var index = require('./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 PresenceMotion = ({ keepMounted, children, open, ...props })=>{
    const [display, setDisplay] = react.useState(()=>keepMounted ? 'none' : 'block');
    if (keepMounted && open && display === 'none') {
        setDisplay('block');
    }
    const onAnimationComplete = hooks.useEvent((animation)=>{
        if (animation === 'hidden' && keepMounted) setDisplay('none');
        props.onAnimationComplete?.(animation);
    });
    return /*#__PURE__*/ jsxRuntime.jsx(react$1.LazyMotion, {
        features: index.motionFeatures,
        children: keepMounted ? /*#__PURE__*/ jsxRuntime.jsx(styled.nex.div, {
            as: m__namespace.div,
            initial: "hidden",
            animate: open ? 'visible' : 'hidden',
            transition: transition,
            variants: variants,
            ...props,
            style: {
                ...props.style,
                display
            },
            onAnimationComplete: onAnimationComplete,
            children: children
        }) : /*#__PURE__*/ jsxRuntime.jsx(react$1.AnimatePresence, {
            children: open ? /*#__PURE__*/ jsxRuntime.jsx(styled.nex.div, {
                as: m__namespace.div,
                initial: "hidden",
                animate: "visible",
                exit: "hidden",
                transition: transition,
                variants: variants,
                ...props,
                onAnimationComplete: onAnimationComplete,
                children: children
            }) : null
        })
    });
};
PresenceMotion.displayName = 'PresenceMotion';

exports.PresenceMotion = PresenceMotion;