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

FSE UI components library

import { j as r } from "./index.es180.js";
import { useRef as c, useEffect as p } from "react";
import { clsx as l } from "./index.es182.js";
import './components/ui/InfoPopup/InfoPopup.css';/* empty css            */
import { Close as x } from "./index.es116.js";
const b = ({
  title: n = "Info",
  description: i,
  isOpen: t = !1,
  onClickCloseBtn: e,
  className: m = "",
  positionPopUp: u = "right"
}) => {
  const s = c(null), o = c(null);
  return p(() => {
    var d;
    const a = (f) => {
      f.key === "Escape" && t && (e == null || e());
    };
    return t ? (o.current = document.activeElement, (d = s.current) == null || d.focus(), document.addEventListener("keydown", a)) : o.current && o.current.focus(), () => {
      document.removeEventListener("keydown", a);
    };
  }, [t, e]), t ? /* @__PURE__ */ r.jsx(
    "div",
    {
      className: l("popupContainer", t ? "open" : "close", m),
      onClick: (a) => {
        a.stopPropagation();
      },
      children: /* @__PURE__ */ r.jsxs(
        "div",
        {
          ref: s,
          role: "dialog",
          "aria-modal": "true",
          "aria-labelledby": "dialog-title",
          "aria-describedby": "dialog-description",
          className: l("dialog", `position-${u}`),
          tabIndex: -1,
          children: [
            /* @__PURE__ */ r.jsxs("div", { className: "header", children: [
              /* @__PURE__ */ r.jsx("h3", { id: "dialog-title", className: "title", children: n }),
              /* @__PURE__ */ r.jsx(
                "button",
                {
                  onClick: (a) => {
                    a.stopPropagation(), e == null || e();
                  },
                  className: "closeButton",
                  "aria-label": "Close dialog",
                  children: /* @__PURE__ */ r.jsx(x, { className: "closeIcon" })
                }
              )
            ] }),
            i && /* @__PURE__ */ r.jsx("div", { id: "dialog-description", className: "content", children: i })
          ]
        }
      )
    }
  ) : null;
};
export {
  b as InfoPopup
};
//# sourceMappingURL=index.es66.js.map