@carton-org/react-neumorphism/dist/components/Popover/Popover.js

A React component library implementing the neumorphism design style

import { jsx as m } from "@emotion/react/jsx-runtime";
import { withTheme as P } from "@emotion/react";
import { useState as S, useRef as b, useCallback as p, useLayoutEffect as v } from "react";
import { createPortal as y } from "react-dom";
import { AnimatePresence as h } from "motion/react";
import { getPositionStyle as x, StyledPopover as $ } from "./popover.styles.js";
import { useClickOutside as j } from "../../hooks/useClickOutside.js";
import { useScroll as w } from "../../hooks/useScroll.js";
const A = ({
  anchorRef: n,
  display: r = !1,
  children: a,
  alignment: e = "bottom-center",
  onClickOutside: t,
  popoverContainerStyle: c
}) => {
  const [f, u] = S(), o = b(null), i = p(() => {
    t == null || t();
  }, [t]);
  j(o, () => {
    r && (t == null || t());
  });
  const s = p(() => {
    if (n.current === null || o.current === null || !r)
      return;
    const l = x(n.current, o.current, e);
    u(l);
  }, [e, r]);
  return v(s, [e, r]), w({
    enable: r,
    callback: i
  }), r ? y(/* @__PURE__ */ m(h, { children: /* @__PURE__ */ m($, { ref: o, style: f, initial: {
    opacity: 0
  }, animate: {
    opacity: 1
  }, exit: {
    opacity: 0
  }, transition: {
    duration: 0.2
  }, $popoverContainerStyle: c, children: a }) }), document.body) : null;
}, F = P(A);
export {
  F as default
};