@tabnews/ui/dist/Notifications/NotificationList.cjs

TabNews UI

"use client";
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),v=require("@primer/octicons-react"),s=require("@primer/react"),f=require("react"),b=require("./Provider.cjs");function m(){const{notifications:n,isLoading:e,labels:i}=b.useNotifications();return!(n!=null&&n.length)&&!e?t.jsx(s.Box,{sx:{m:3,textAlign:"center"},children:t.jsx("span",{children:i.empty})}):t.jsxs(s.ActionList,{children:[n.map(o=>t.jsx(I,{item:o},o.id)),e&&t.jsx(s.ActionList.Item,{disabled:!0,loading:!0,children:t.jsx(s.Box,{sx:{display:"flex",justifyContent:"center",alignItems:"center",height:"100%"},children:t.jsx("span",{children:i.loading})})})]})}function I({item:n}){var h,j;const{actions:e=[],getItemIcon:i,isItemRead:o,labels:l,onItemSelect:c,selectors:a}=b.useNotifications(),[d,g]=f.useState(!1),x=f.useRef(),L=(o==null?void 0:o(n))?"var(--fgColor-disabled)":"var(--fgColor-default)",r=e[0];return t.jsxs(s.ActionList.Item,{id:`notification-${n.id}`,sx:{color:L},onSelect:u=>{E(u,n.id,a)||c==null||c(n)},children:[i&&t.jsx(s.ActionList.LeadingVisual,{children:i(n)}),n.title,t.jsx(s.ActionList.Description,{variant:"block",children:t.jsx(s.Box,{sx:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:n.body})}),e.length===1&&t.jsx(s.ActionList.TrailingAction,{[a.notificationTrailingAction]:"",label:r.label||((h=r.getLabel)==null?void 0:h.call(r,n)),icon:r.icon||((j=r.getIcon)==null?void 0:j.call(r,n)),onClick:u=>p(u,r,n,g)}),e.length>1&&t.jsxs(s.ActionList.TrailingVisual,{children:[t.jsx(s.IconButton,{ref:x,icon:v.KebabHorizontalIcon,variant:"invisible","aria-label":l.openActionsMenu,onClick:u=>{u.stopPropagation(),g(!d)}}),t.jsx(C,{actions:e,anchorRef:x,notification:n,open:d,setOpen:g})]})]})}function E(n,e,i){const o=n.target;return o instanceof Element?!!o.closest(`#notification-${e}--trailing-visual`)||!!o.closest(`[${i.notificationTrailingAction}]`):!1}function C({actions:n,notification:e,setOpen:i,...o}){return t.jsx(s.ActionMenu,{onOpenChange:i,...o,children:t.jsx(s.ActionMenu.Overlay,{preventOverflow:!1,side:"outside-left",align:"center",children:t.jsx(s.ActionList,{children:n.map((l,c)=>{var a;return t.jsxs(s.ActionList.Item,{onSelect:d=>p(d,l,e,i),children:[l.label||((a=l.getLabel)==null?void 0:a.call(l,e)),t.jsx(s.ActionList.LeadingVisual,{children:S(l,e)})]},c)})})})})}function S(n,e){var o;const i=n.icon||((o=n.getIcon)==null?void 0:o.call(n,e));return i?f.isValidElement(i)?i:f.createElement(i):null}function p(n,e,i,o){var l;n.stopPropagation(),A(`notification-${i.id}`),(l=e.onClick)==null||l.call(e,i),o(!1)}function A(n){const e=document.getElementById(n);if(!e)return;const i=e.nextElementSibling||e.previousElementSibling;i&&requestAnimationFrame(()=>{!document.contains(e)&&document.contains(i)&&i instanceof HTMLElement&&i.focus()})}exports.NotificationList=m;exports.focusSiblingIfRemoved=A;