@tabnews/ui/dist/Notifications/NotificationMenu.js

TabNews UI

"use client";
import { jsxs as l, jsx as e } from "react/jsx-runtime";
import { XIcon as v, BellIcon as B } from "@primer/octicons-react";
import { AnchoredOverlay as C, Box as o, IconButton as h, Heading as I, Text as O } from "@primer/react";
import { NotificationList as w } from "./NotificationList.js";
import { useNotifications as j } from "./Provider.js";
function E({ topBar: i, sectionIntro: r, footer: a, buttonProps: n, overlayProps: t }) {
  const { getCount: c, isMenuOpen: g, setMenuOpen: f, labels: x, notifications: p, onCloseMenu: s } = j(), d = c == null ? void 0 : c(p), u = () => f(!0), m = () => {
    s == null || s(), f(!1);
  };
  return /* @__PURE__ */ l(
    C,
    {
      open: g,
      onOpen: u,
      onClose: m,
      width: "large",
      preventOverflow: !1,
      renderAnchor: (b) => /* @__PURE__ */ e(
        h,
        {
          "aria-label": x.getBellLabel(d),
          icon: () => /* @__PURE__ */ e(k, { count: d }),
          variant: "invisible",
          ...b,
          ...n,
          sx: {
            color: d === 0 ? "bg.disabled" : "fg.onEmphasis",
            "&:hover": {
              color: "header.text",
              backgroundColor: "transparent"
            },
            ...n == null ? void 0 : n.sx
          }
        }
      ),
      overlayProps: {
        role: "dialog",
        ...t,
        sx: { display: "flex", flexDirection: "column", maxHeight: "90vh", ...t == null ? void 0 : t.sx }
      },
      children: [
        /* @__PURE__ */ e(y, { labels: x, onClose: m, topBar: i }),
        /* @__PURE__ */ l(o, { sx: { display: "flex", flexDirection: "column", overflowY: "auto" }, children: [
          r,
          /* @__PURE__ */ e(w, {}),
          a
        ] })
      ]
    }
  );
}
function k({ count: i }) {
  return /* @__PURE__ */ l(o, { sx: { position: "relative" }, children: [
    /* @__PURE__ */ e(B, {}),
    i > 0 && /* @__PURE__ */ e(
      o,
      {
        "data-testid": "notification-badge",
        sx: {
          display: "flex",
          position: "absolute",
          left: "47%",
          bottom: "50%",
          borderRadius: "3px",
          backgroundColor: "danger.emphasis",
          padding: "0 0.2em"
        },
        children: /* @__PURE__ */ e(O, { fontSize: "0.8em", color: "fg.onEmphasis", children: i > 99 ? "99+" : i })
      }
    )
  ] });
}
function y({ labels: i, onClose: r, topBar: a }) {
  return /* @__PURE__ */ l(o, { sx: { display: "flex", borderBottom: "1px solid", borderColor: "border.default" }, children: [
    /* @__PURE__ */ e(
      o,
      {
        sx: {
          display: "flex",
          flexDirection: "column",
          flexGrow: 1,
          textAlign: "center",
          alignItems: "center",
          justifyContent: "center"
        },
        children: a || /* @__PURE__ */ e(I, { as: "h2", sx: { fontSize: 4 }, children: i.notifications })
      }
    ),
    /* @__PURE__ */ e(
      h,
      {
        variant: "invisible",
        icon: v,
        onClick: r,
        "aria-label": i.close,
        sx: { color: "fg.subtle", m: 2 }
      }
    )
  ] });
}
export {
  E as NotificationMenu
};