@anoki/fse-ui/dist/index.es118.js

FSE UI components library

import { j as c } from "./index.es244.js";
import { useRef as l, useState as x, useEffect as E } from "react";
import { clsx as g } from "./index.es246.js";
import './components/ui/ActionsPopup/ActionsPopup.css';/* empty css            */
const N = ({
  isOpen: o = !1,
  onClickCloseBtn: i,
  className: f = "",
  actions: p = [],
  children: v,
  parentRef: u
}) => {
  const n = l(null), a = l(null), [d, w] = x({
    top: "0.4rem",
    left: "-17rem",
    right: "auto"
  }), m = () => {
    if (!n.current) return;
    const t = n.current.getBoundingClientRect(), r = window.innerWidth, s = window.innerHeight;
    let e = { ...d };
    if (u != null && u.current) {
      const h = u.current.getBoundingClientRect();
      e = {
        top: "1rem",
        left: "-2rem",
        right: "auto"
      }, h.right + t.width - 30 > r && (e = {
        top: "1rem",
        left: "auto",
        right: "0"
      }), h.bottom + t.height > s && (e.top = `-${t.height}px`);
    } else
      t.right > r && (e.left = "auto", e.right = "0"), t.bottom > s && (e.top = `-${t.height}px`);
    w(e);
  };
  return E(() => {
    var s;
    const t = (e) => {
      e.key === "Escape" && o && (i == null || i());
    }, r = (e) => {
      n.current && !n.current.contains(e.target) && o && (i == null || i());
    };
    return o ? (a.current = document.activeElement, (s = n.current) == null || s.focus(), document.addEventListener("keydown", t), document.addEventListener("mousedown", r), m(), window.addEventListener("resize", m)) : a.current && a.current.focus(), () => {
      document.removeEventListener("keydown", t), document.removeEventListener("mousedown", r), window.removeEventListener("resize", m);
    };
  }, [o, i]), o ? /* @__PURE__ */ c.jsx(
    "div",
    {
      className: g(
        "popupContainerActions",
        o ? "open" : "close",
        f
      ),
      onClick: (t) => {
        t.stopPropagation();
      },
      style: { position: "absolute", right: 0 },
      children: /* @__PURE__ */ c.jsx(
        "div",
        {
          ref: n,
          role: "dialog",
          "aria-modal": "true",
          className: g("dialogActions"),
          tabIndex: -1,
          style: {
            top: d.top,
            left: d.left,
            right: d.right
          },
          children: /* @__PURE__ */ c.jsxs("div", { className: "contentActions", children: [
            /* @__PURE__ */ c.jsx("ul", { className: "actionsList", children: p.map((t, r) => /* @__PURE__ */ c.jsx("li", { className: "actionsListItem", children: t }, r)) }),
            v
          ] })
        }
      )
    }
  ) : null;
};
export {
  N as ActionsPopup
};
//# sourceMappingURL=index.es118.js.map