@ukpc-lib/react 0.5.5 → 0.5.6

package/dist/components/index.cjs

@@ -29,7 +29,7 @@
       .tab-content {
           padding: 16px 0;
       }
-      `}),s.jsxs("div",{className:"tab-container",children:[s.jsx("div",{style:{display:"flex",width:"100%",height:"50px",borderBottom:`1px solid ${p.color.grey200}`},className:"tab-container__title",children:t.map((i,a)=>s.jsx("button",{id:i.id,disabled:e.currentTab===`${i.id}`,onClick:n,className:`tab-title ${e.currentTab===`${i.id}`?"is-active":""}`,children:i.tabTitle},a))}),s.jsx("div",{className:"tab-content",children:t.map((i,a)=>s.jsx("div",{children:e.currentTab===`${i.id}`&&s.jsx("div",{children:i.children})},a))})]})]})},Kt=({baseUrl:e,notiPath:t,setNotiData:n})=>async()=>{var d;const i=e+(t||"/notification-management/api/v1/notifications"),l=(d=(await p.axiosInstance.get(i,{params:{filter:{notificationFilterType:"all"}}})).data)==null?void 0:d.rows,u=l==null?void 0:l.filter(f=>f.isRead===!1);n({all:{rows:l??[],total:(l==null?void 0:l.length)??0},unread:{rows:u??[],total:(u==null?void 0:u.length)??0}})},no=({notification:e,baseUrl:t,notiPath:n,markAllAsReadState:r,brandColors:o})=>{var b;const[i,a]=C.useState(!1),[l,u]=C.useState({id:e.id,isRead:e.isRead}),d=l.isRead===!1?"unread":"read",f={borderColor:l.isRead?"#c5c5c5":(o==null?void 0:o.primary500)||p.color.primary500,backgroundColor:l.isRead?"#c5c5c5":(o==null?void 0:o.primary500)||p.color.primary500},{setNotiData:h}=C.useContext(p.CustomOpenList),y=Kt({baseUrl:t,notiPath:n,setNotiData:h}),x=async(w,_)=>{try{const E=n||`/notification-management/api/v1/notifications/${w}`,g=t+E;await p.axiosInstance.put(g,{isRead:_})}catch(E){console.log(E),u({id:e.id,isRead:e.isRead})}await y()},v=(w,_)=>{console.log("specificNotificationID",w);const E=!_;u(g=>({...g,isRead:E})),console.log("newIsReadState",E),x(w,E)};C.useEffect(()=>{u(r?w=>({...w,isRead:!0}):{id:e.id,isRead:e.isRead})},[r,e.id,e.isRead]);const c=()=>{a(!i)},m=w=>{const _=Z(),E=Z(w),g=_.diff(E,"days"),S=_.diff(E,"minutes"),j=_.diff(E,"months"),I=_.diff(E,"years");if(console.log("diffInMonths",j),S<1)return"Just now";if(g===0){if(S<=60)return`${S} minute${S>1?"s":""} ago`;const O=Math.floor(S/60);return console.log("diffIhours",O),`${O} hour${O>1?"s":""} ago`}if(g===1)return"Yesterday";if(g>=2&&g<7)return`${g} days ago`;if(g<30){const O=Math.floor(g/7);return`${O} week${O>1?"s":""} ago`}return j===0||j===1?"1 month ago":j<12?`${j} months ago`:I===0||I===1?"1 year ago":"Over 1 year ago"};return s.jsx(s.Fragment,{children:s.jsxs("div",{className:"notitification-item__container",children:[s.jsx("div",{className:"notification-item__image-container",children:s.jsx("img",{src:!e.actorAvatarUrl||e.actorName==="System"?"https://ukpcsaprod.blob.core.windows.net/account/logo.png":e.actorAvatarUrl,onError:({currentTarget:w})=>{console.log("img on error",w),w.onerror=null,w.src="https://ukpcsaprod.blob.core.windows.net/account/logo.png"},alt:e.actorName})}),s.jsxs("div",{style:{width:"100%"},children:[s.jsxs("div",{className:"notification-item__content-wrapper",children:[s.jsxs("div",{className:"notification-item__content",children:[s.jsx("p",{className:"notification-item__user-name",children:e.actorName}),s.jsxs("a",{href:e==null?void 0:e.contextUrl,style:{cursor:"pointer"},children:[`${e.message} `,s.jsx("span",{className:"notification-item__context-link",children:e==null?void 0:e.context})]}),(e==null?void 0:e.notificationType)==="deleteMultiple"&&s.jsxs("button",{style:{color:p.color.primary400,textDecoration:"underline"},onClick:c,children:[i?"Hide":"Show  "," details"]})]}),s.jsx("div",{className:"notification-item__time",children:s.jsx("p",{children:m(e.createdAt)})}),s.jsx("button",{className:`${d} notification-item__read-at`,"aria-label":"Mark as read",style:f,onClick:()=>v(e.id,e.isRead)})]}),i&&s.jsx("div",{style:{background:"#fff",width:"100%",padding:"8px",fontSize:"12px",marginTop:"8px"},children:s.jsx("ul",{children:(b=e==null?void 0:e.data)==null?void 0:b.map((w,_)=>s.jsxs("li",{style:{display:"flex",alignItems:"center",marginBottom:"4px"},children:[s.jsx("span",{style:{backgroundColor:p.color.primary400},className:"list-dot"}),s.jsx("span",{style:{width:"calc(100% - 12px)"},children:w.name})]},_))})})]})]})})},gn=({notidata:e,baseUrl:t,notiPath:n,brandColors:r,notiUnreadNumber:o})=>{const[i,a]=C.useState(!1);console.log(i);const{setNotiData:l}=C.useContext(p.CustomOpenList),u=Kt({baseUrl:t,notiPath:n,setNotiData:l}),d=async()=>{try{const y=t+(n||"/notification-management/api/v1/notifications");await p.axiosInstance.put(y)}catch(h){console.log(h)}await u(),a(!1)},f=()=>{a(!0),d()};return console.log("notiUnreadNumber",o),s.jsxs("div",{children:[s.jsx("div",{className:"mark-all-read",children:s.jsx("button",{onClick:f,style:{visibility:o===0?"hidden":"visible"},children:"Mark all as read"})}),s.jsx("div",{className:"notification-items__wrapper",children:s.jsx("div",{className:"notification-items__content",children:Object.values(e).map((h,y)=>s.jsx(no,{notification:h,baseUrl:t,notiPath:n,markAllAsReadState:i,brandColors:r},y))})})]})},ro=({baseUrl:e,notiPath:t,brandColors:n})=>{var u,d,f,h;const{setShowModalFalse:r}=C.useContext(p.CustomOpenList),{notidata:o}=C.useContext(p.CustomOpenList);console.log(o);const[i,a]=C.useState("all"),l=[{id:"all",tabTitle:`All (${((u=o==null?void 0:o.all)==null?void 0:u.total)||0})`,children:s.jsx(gn,{notidata:((d=o==null?void 0:o.all)==null?void 0:d.rows)||[],baseUrl:e,notiPath:t,brandColors:n,notiUnreadNumber:o.unread.total})},{id:"unread",tabTitle:`Unread (${((f=o==null?void 0:o.unread)==null?void 0:f.total)||0})`,children:s.jsx(gn,{notidata:((h=o==null?void 0:o.unread)==null?void 0:h.rows)||[],baseUrl:e,notiPath:t,brandColors:n,notiUnreadNumber:o.unread.total})}];return s.jsx(s.Fragment,{children:s.jsx("div",{style:{position:"absolute",backgroundColor:"#fff",width:"550px",height:"90vh",right:"100px",top:"100%",padding:"32px",boxShadow:"10px 0px 20px #999",borderRadius:"0 0 8px 8px",overflow:"hidden",zIndex:"10"},children:s.jsxs("div",{className:"list-content",children:[s.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center"},children:[s.jsx("h3",{style:{fontSize:"24px",fontWeight:"500",color:p.color.textPrimary},className:"list-title",children:"Notifications"}),s.jsx("button",{onClick:r,children:s.jsx("svg",{width:"24",height:"25",viewBox:"0 0 24 25",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:s.jsx("path",{d:"M7.05086 6.13616C6.66033 5.74563 6.02717 5.74563 5.63664 6.13616C5.24612 6.52668 5.24612 7.15984 5.63664 7.55037L10.5864 12.5001L5.63664 17.4499C5.24612 17.8404 5.24612 18.4736 5.63664 18.8641C6.02717 19.2546 6.66033 19.2546 7.05086 18.8641L12.0006 13.9143L16.9504 18.8641C17.3409 19.2546 17.974 19.2546 18.3646 18.8641C18.7551 18.4736 18.7551 17.8404 18.3646 17.4499L13.4148 12.5001L18.3646 7.55037C18.7551 7.15984 18.7551 6.52668 18.3646 6.13616C17.974 5.74563 17.3409 5.74563 16.9504 6.13616L12.0006 11.0859L7.05086 6.13616Z",fill:"#85858A"})})})]}),s.jsx(to,{tabs:l,setCurrentTab:a,currentTab:i,brandColors:n})]})})})};function Zt({childrenClass:e,action:t,childrenOpenClass:n}){const r=document.querySelector("#topbar-wrapper"),o=r==null?void 0:r.shadowRoot,i=o==null?void 0:o.querySelector(`.${e}`),a=o==null?void 0:o.querySelector(`.${n}`),l=o==null?void 0:o.querySelector("nav"),u=d=>{l==null||l.addEventListener("click",function(f){if(n&&a&&a.contains(f.target)){if(i&&!i.contains(f.target))return}else i&&!i.contains(f.target)&&t()}),r&&!r.contains(d.target)&&t()};document.addEventListener("click",u,!0)}function oo({iconColor:e="#fff",baseUrl:t,notiPath:n,brandColors:r}){var h,y;const{isOpen:o,toggleOpen:i,setShowModalFalse:a}=C.useContext(p.CustomOpenList),{notidata:l,setNotiData:u}=C.useContext(p.CustomOpenList),d=Kt({baseUrl:t,notiPath:n,setNotiData:u}),f=async()=>{var x,v;try{await d()}catch(c){p.pushError(((v=(x=c.response)==null?void 0:x.data)==null?void 0:v.errorMessage)||"Have error when get notification list")}};return C.useEffect(()=>{f()},[o]),C.useEffect(()=>{Zt({childrenClass:"noti-container",childrenOpenClass:"noti-list-container",action(){a()}})}),s.jsxs("div",{children:[s.jsxs("div",{className:"noti-container",style:{position:"relative"},children:[s.jsxs("svg",{width:"24",height:"25",viewBox:"0 0 24 25",fill:"none",xmlns:"http://www.w3.org/2000/svg",onClick:i,style:{cursor:"pointer",color:e},children:[s.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M11.7968 17.4705C16.5901 17.4705 18.8076 16.8556 19.0218 14.3874C19.0218 11.921 17.4757 12.0796 17.4757 9.05334C17.4757 6.68952 15.2352 4 11.7968 4C8.35833 4 6.1178 6.68952 6.1178 9.05334C6.1178 12.0796 4.57178 11.921 4.57178 14.3874C4.78679 16.8649 7.00428 17.4705 11.7968 17.4705Z",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),s.jsx("path",{d:"M13.8274 20.0286C12.6679 21.3161 10.8591 21.3313 9.68848 20.0286",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]}),(l==null?void 0:l.unread)&&(l==null?void 0:l.unread.total)!=0&&s.jsx("span",{style:{position:"absolute",top:"-9px",right:"-6px",width:"20px",height:"20px",border:"1px solid #fff",borderRadius:"50%",color:"#fff",fontSize:"12px",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:p.color.danger},className:"notification-badge",children:((h=l==null?void 0:l.unread)==null?void 0:h.total)>9?"9+":`${(y=l==null?void 0:l.unread)==null?void 0:y.total}`})]}),s.jsx("div",{className:"noti-list-container",children:!o&&s.jsx(ro,{baseUrl:t,notiPath:n,brandColors:r})})]})}const io="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTciIHZpZXdCb3g9IjAgMCAxNiAxNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iNy44OTIyMiIgY3k9IjguMzQ5MDEiIHI9IjUuNTk5MDEiIHN0cm9rZT0iIzg1ODU4QSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTIuNjQyOCAxMy4xODU1TDE0LjQ1NjggMTQuOTk5NSIgc3Ryb2tlPSIjODU4NThBIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=",ao=`.avatar-dropdown-item{padding:.5rem;font-size:.875rem;line-height:1.25rem;cursor:pointer;border-radius:.25rem}.avartarDropdownMenu{background-color:#fff;padding:.5rem;width:13rem;--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);position:absolute;left:-10rem;top:3.2rem}.avartarDropdownMenu ul{list-style:none;padding-inline-start:0;margin-block-end:0}.navbar{display:flex;background:#292929;top:0;width:100%;padding-left:2.5rem;height:64px}.navbar-container{display:flex;flex-direction:row;align-items:center;width:100%;justify-content:space-between;position:relative}.logo-container{height:100%;display:flex;align-items:center}.right-side-container{display:flex;flex-direction:row;align-items:center;text-align:center;margin-right:2.5rem;gap:1rem}.userContainer{display:flex;align-items:center;gap:.5rem}.languageDropdown{height:100%;padding:0 8px;display:flex;flex-direction:row;gap:8px;border-radius:3px;align-items:center;justify-content:center;height:41px;background-color:#ffffff1a;cursor:pointer;transition:background-color .2s ease-in-out}.languageDropdown:hover{background-color:#fff3}.userFullName{color:#fff;font-weight:400;font-size:.875rem;line-height:1.25rem;transition:width .3s}.userAvatar{width:2.5rem;height:2.5rem;-o-object-fit:cover;object-fit:cover;border-radius:9999px;border:2px solid #FFFFFF}#userAvatarNull{width:2.5rem;height:2.5rem;background:#DDDDDD;border-radius:100%;color:#fff;font-size:20px;font-weight:400;display:flex;align-items:center;justify-content:center}.relative{position:relative}.cursor-pointer{cursor:pointer}.topbar-search-label{display:flex;position:relative}.topbar-search-input{color:#292929;border-radius:3px;height:40px;outline:none;width:223px;padding:5px 10px 5px 33px;font-size:14px;text-overflow:ellipsis}#icon{position:absolute;left:9px;top:8px;width:16px;height:24px}
+      `}),s.jsxs("div",{className:"tab-container",children:[s.jsx("div",{style:{display:"flex",width:"100%",height:"50px",borderBottom:`1px solid ${p.color.grey200}`},className:"tab-container__title",children:t.map((i,a)=>s.jsx("button",{id:i.id,disabled:e.currentTab===`${i.id}`,onClick:n,className:`tab-title ${e.currentTab===`${i.id}`?"is-active":""}`,children:i.tabTitle},a))}),s.jsx("div",{className:"tab-content",children:t.map((i,a)=>s.jsx("div",{children:e.currentTab===`${i.id}`&&s.jsx("div",{children:i.children})},a))})]})]})},Kt=({baseUrl:e,notiPath:t,setNotiData:n})=>async()=>{var d;const i=e+(t||"/notification-management/api/v1/notifications"),l=(d=(await p.axiosInstance.get(i,{params:{filter:{notificationFilterType:"all"}}})).data)==null?void 0:d.rows,u=l==null?void 0:l.filter(f=>f.isRead===!1);n({all:{rows:l??[],total:(l==null?void 0:l.length)??0},unread:{rows:u??[],total:(u==null?void 0:u.length)??0}})},no=({notification:e,baseUrl:t,notiPath:n,markAllAsReadState:r,brandColors:o})=>{var b;const[i,a]=C.useState(!1),[l,u]=C.useState({id:e.id,isRead:e.isRead}),d=l.isRead===!1?"unread":"read",f={borderColor:l.isRead?"#c5c5c5":(o==null?void 0:o.primary500)||p.color.primary500,backgroundColor:l.isRead?"#c5c5c5":(o==null?void 0:o.primary500)||p.color.primary500},{setNotiData:h}=C.useContext(p.CustomOpenList),y=Kt({baseUrl:t,notiPath:n,setNotiData:h}),x=async(w,_)=>{try{const E=n||`/notification-management/api/v1/notifications/${w}`,g=t+E;await p.axiosInstance.put(g,{isRead:_})}catch(E){console.log(E),u({id:e.id,isRead:e.isRead})}await y()},v=(w,_)=>{console.log("specificNotificationID",w);const E=!_;u(g=>({...g,isRead:E})),console.log("newIsReadState",E),x(w,E)};C.useEffect(()=>{u(r?w=>({...w,isRead:!0}):{id:e.id,isRead:e.isRead})},[r,e.id,e.isRead]);const c=()=>{a(!i)},m=w=>{const _=Z(),E=Z(w),g=_.diff(E,"days"),S=_.diff(E,"minutes"),j=_.diff(E,"months"),I=_.diff(E,"years");if(console.log("diffInMonths",j),S<1)return"Just now";if(g===0){if(S<=60)return`${S} minute${S>1?"s":""} ago`;const O=Math.floor(S/60);return console.log("diffIhours",O),`${O} hour${O>1?"s":""} ago`}if(g===1)return"Yesterday";if(g>=2&&g<7)return`${g} days ago`;if(g<30){const O=Math.floor(g/7);return`${O} week${O>1?"s":""} ago`}return j===0||j===1?"1 month ago":j<12?`${j} months ago`:I===0||I===1?"1 year ago":"Over 1 year ago"};return s.jsx(s.Fragment,{children:s.jsxs("div",{className:"notitification-item__container",children:[s.jsx("div",{className:"notification-item__image-container",children:s.jsx("img",{src:!e.actorAvatarUrl||e.actorName==="System"?"https://ukpcsaprod.blob.core.windows.net/account/logo.png":e.actorAvatarUrl,onError:({currentTarget:w})=>{console.log("img on error",w),w.onerror=null,w.src="https://ukpcsaprod.blob.core.windows.net/account/logo.png"},alt:e.actorName})}),s.jsxs("div",{style:{width:"100%"},children:[s.jsxs("div",{className:"notification-item__content-wrapper",children:[s.jsxs("div",{className:"notification-item__content",children:[s.jsx("p",{className:"notification-item__user-name",children:e.actorName}),s.jsxs("a",{href:e==null?void 0:e.contextUrl,style:{cursor:"pointer"},children:[`${e.message} `,s.jsx("span",{className:"notification-item__context-link",children:e==null?void 0:e.context})]}),(e==null?void 0:e.notificationType)==="deleteMultiple"&&s.jsxs("button",{style:{color:p.color.primary400,textDecoration:"underline"},onClick:c,children:[i?"Hide":"Show  "," details"]})]}),s.jsx("div",{className:"notification-item__time",children:s.jsx("p",{children:m(e.createdAt)})}),s.jsx("button",{className:`${d} notification-item__read-at`,"aria-label":"Mark as read",style:f,onClick:()=>v(e.id,e.isRead)})]}),i&&s.jsx("div",{style:{background:"#fff",width:"100%",padding:"8px",fontSize:"12px",marginTop:"8px"},children:s.jsx("ul",{children:(b=e==null?void 0:e.data)==null?void 0:b.map((w,_)=>s.jsxs("li",{style:{display:"flex",alignItems:"center",marginBottom:"4px"},children:[s.jsx("span",{style:{backgroundColor:p.color.primary400},className:"list-dot"}),s.jsx("span",{style:{width:"calc(100% - 12px)"},children:w.name})]},_))})})]})]})})},gn=({notidata:e,baseUrl:t,notiPath:n,brandColors:r,notiUnreadNumber:o})=>{const[i,a]=C.useState(!1);console.log(i);const{setNotiData:l}=C.useContext(p.CustomOpenList),u=Kt({baseUrl:t,notiPath:n,setNotiData:l}),d=async()=>{try{const y=t+(n||"/notification-management/api/v1/notifications");await p.axiosInstance.put(y)}catch(h){console.log(h)}await u(),a(!1)},f=()=>{a(!0),d()};return console.log("notiUnreadNumber",o),s.jsxs("div",{children:[s.jsx("div",{className:"mark-all-read",children:s.jsx("button",{onClick:f,style:{visibility:o===0?"hidden":"visible"},children:"Mark all as read"})}),s.jsx("div",{className:"notification-items__wrapper",children:s.jsx("div",{className:"notification-items__content",children:Object.values(e).map((h,y)=>s.jsx(no,{notification:h,baseUrl:t,notiPath:n,markAllAsReadState:i,brandColors:r},y))})})]})},ro=({baseUrl:e,notiPath:t,brandColors:n})=>{var u,d,f,h;const{setShowModalFalse:r}=C.useContext(p.CustomOpenList),{notidata:o}=C.useContext(p.CustomOpenList);console.log(o);const[i,a]=C.useState("all"),l=[{id:"all",tabTitle:`All (${((u=o==null?void 0:o.all)==null?void 0:u.total)||0})`,children:s.jsx(gn,{notidata:((d=o==null?void 0:o.all)==null?void 0:d.rows)||[],baseUrl:e,notiPath:t,brandColors:n,notiUnreadNumber:o.unread.total})},{id:"unread",tabTitle:`Unread (${((f=o==null?void 0:o.unread)==null?void 0:f.total)||0})`,children:s.jsx(gn,{notidata:((h=o==null?void 0:o.unread)==null?void 0:h.rows)||[],baseUrl:e,notiPath:t,brandColors:n,notiUnreadNumber:o.unread.total})}];return s.jsx(s.Fragment,{children:s.jsx("div",{style:{position:"absolute",backgroundColor:"#fff",width:"550px",height:"90vh",right:"100px",top:"100%",padding:"32px",boxShadow:"10px 0px 20px #999",borderRadius:"0 0 8px 8px",overflow:"hidden",zIndex:"100"},children:s.jsxs("div",{className:"list-content",children:[s.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center"},children:[s.jsx("h3",{style:{fontSize:"24px",fontWeight:"500",color:p.color.textPrimary},className:"list-title",children:"Notifications"}),s.jsx("button",{onClick:r,children:s.jsx("svg",{width:"24",height:"25",viewBox:"0 0 24 25",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:s.jsx("path",{d:"M7.05086 6.13616C6.66033 5.74563 6.02717 5.74563 5.63664 6.13616C5.24612 6.52668 5.24612 7.15984 5.63664 7.55037L10.5864 12.5001L5.63664 17.4499C5.24612 17.8404 5.24612 18.4736 5.63664 18.8641C6.02717 19.2546 6.66033 19.2546 7.05086 18.8641L12.0006 13.9143L16.9504 18.8641C17.3409 19.2546 17.974 19.2546 18.3646 18.8641C18.7551 18.4736 18.7551 17.8404 18.3646 17.4499L13.4148 12.5001L18.3646 7.55037C18.7551 7.15984 18.7551 6.52668 18.3646 6.13616C17.974 5.74563 17.3409 5.74563 16.9504 6.13616L12.0006 11.0859L7.05086 6.13616Z",fill:"#85858A"})})})]}),s.jsx(to,{tabs:l,setCurrentTab:a,currentTab:i,brandColors:n})]})})})};function Zt({childrenClass:e,action:t,childrenOpenClass:n}){const r=document.querySelector("#topbar-wrapper"),o=r==null?void 0:r.shadowRoot,i=o==null?void 0:o.querySelector(`.${e}`),a=o==null?void 0:o.querySelector(`.${n}`),l=o==null?void 0:o.querySelector("nav"),u=d=>{l==null||l.addEventListener("click",function(f){if(n&&a&&a.contains(f.target)){if(i&&!i.contains(f.target))return}else i&&!i.contains(f.target)&&t()}),r&&!r.contains(d.target)&&t()};document.addEventListener("click",u,!0)}function oo({iconColor:e="#fff",baseUrl:t,notiPath:n,brandColors:r}){var h,y;const{isOpen:o,toggleOpen:i,setShowModalFalse:a}=C.useContext(p.CustomOpenList),{notidata:l,setNotiData:u}=C.useContext(p.CustomOpenList),d=Kt({baseUrl:t,notiPath:n,setNotiData:u}),f=async()=>{var x,v;try{await d()}catch(c){p.pushError(((v=(x=c.response)==null?void 0:x.data)==null?void 0:v.errorMessage)||"Have error when get notification list")}};return C.useEffect(()=>{f()},[o]),C.useEffect(()=>{Zt({childrenClass:"noti-container",childrenOpenClass:"noti-list-container",action(){a()}})}),s.jsxs("div",{children:[s.jsxs("div",{className:"noti-container",style:{position:"relative"},children:[s.jsxs("svg",{width:"24",height:"25",viewBox:"0 0 24 25",fill:"none",xmlns:"http://www.w3.org/2000/svg",onClick:i,style:{cursor:"pointer",color:e},children:[s.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M11.7968 17.4705C16.5901 17.4705 18.8076 16.8556 19.0218 14.3874C19.0218 11.921 17.4757 12.0796 17.4757 9.05334C17.4757 6.68952 15.2352 4 11.7968 4C8.35833 4 6.1178 6.68952 6.1178 9.05334C6.1178 12.0796 4.57178 11.921 4.57178 14.3874C4.78679 16.8649 7.00428 17.4705 11.7968 17.4705Z",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),s.jsx("path",{d:"M13.8274 20.0286C12.6679 21.3161 10.8591 21.3313 9.68848 20.0286",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]}),(l==null?void 0:l.unread)&&(l==null?void 0:l.unread.total)!=0&&s.jsx("span",{style:{position:"absolute",top:"-9px",right:"-6px",width:"20px",height:"20px",border:"1px solid #fff",borderRadius:"50%",color:"#fff",fontSize:"12px",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:p.color.danger},className:"notification-badge",children:((h=l==null?void 0:l.unread)==null?void 0:h.total)>9?"9+":`${(y=l==null?void 0:l.unread)==null?void 0:y.total}`})]}),s.jsx("div",{className:"noti-list-container",children:!o&&s.jsx(ro,{baseUrl:t,notiPath:n,brandColors:r})})]})}const io="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTciIHZpZXdCb3g9IjAgMCAxNiAxNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iNy44OTIyMiIgY3k9IjguMzQ5MDEiIHI9IjUuNTk5MDEiIHN0cm9rZT0iIzg1ODU4QSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTIuNjQyOCAxMy4xODU1TDE0LjQ1NjggMTQuOTk5NSIgc3Ryb2tlPSIjODU4NThBIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=",ao=`.avatar-dropdown-item{padding:.5rem;font-size:.875rem;line-height:1.25rem;cursor:pointer;border-radius:.25rem}.avartarDropdownMenu{background-color:#fff;padding:.5rem;width:13rem;--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);position:absolute;left:-10rem;top:3.2rem}.avartarDropdownMenu ul{list-style:none;padding-inline-start:0;margin-block-end:0}.navbar{display:flex;background:#292929;top:0;width:100%;padding-left:2.5rem;height:64px}.navbar-container{display:flex;flex-direction:row;align-items:center;width:100%;justify-content:space-between;position:relative}.logo-container{height:100%;display:flex;align-items:center}.right-side-container{display:flex;flex-direction:row;align-items:center;text-align:center;margin-right:2.5rem;gap:1rem}.userContainer{display:flex;align-items:center;gap:.5rem}.languageDropdown{height:100%;padding:0 8px;display:flex;flex-direction:row;gap:8px;border-radius:3px;align-items:center;justify-content:center;height:41px;background-color:#ffffff1a;cursor:pointer;transition:background-color .2s ease-in-out}.languageDropdown:hover{background-color:#fff3}.userFullName{color:#fff;font-weight:400;font-size:.875rem;line-height:1.25rem;transition:width .3s}.userAvatar{width:2.5rem;height:2.5rem;-o-object-fit:cover;object-fit:cover;border-radius:9999px;border:2px solid #FFFFFF}#userAvatarNull{width:2.5rem;height:2.5rem;background:#DDDDDD;border-radius:100%;color:#fff;font-size:20px;font-weight:400;display:flex;align-items:center;justify-content:center}.relative{position:relative}.cursor-pointer{cursor:pointer}.topbar-search-label{display:flex;position:relative}.topbar-search-input{color:#292929;border-radius:3px;height:40px;outline:none;width:223px;padding:5px 10px 5px 33px;font-size:14px;text-overflow:ellipsis}#icon{position:absolute;left:9px;top:8px;width:16px;height:24px}
 `,so=`:root{--textPrimary: #292929;--textWhite: #fff;--primary500: #2E7D32;--grey100: #FAFAFA;--gray200: #EEEEEE;--gray600: #85858A;--link: #007BFF }.list-content{overflow-y:auto;overflow-x:hidden}.mark-all-read{text-align:right;color:#007bff;margin-bottom:12px;font-size:12px}.notification-items__wrapper{overflow:hidden}.notification-items__content{height:calc(100vh - 275px);overflow-x:hidden;overflow-y:auto;color:#292929}.notitification-item__container{display:flex;justify-content:space-between;padding:16px;border-bottom:#FAFAFA 1px solid;text-align:left;font-size:12px;position:relative;z-index:10;border-radius:4px;margin-bottom:8px}.notitification-item__container:hover{background-color:#fafafa}.notification-item__image-container{width:46px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;overflow:hidden;margin-right:16px}.notification-item__image-container img{width:100%;height:100%;text-align:center;-o-object-fit:cover;object-fit:cover;color:transparent;text-indent:10000px}.notification-item__content-wrapper{width:100%;display:flex;align-items:center;justify-content:space-between}.notification-item__context-link{color:#007bff}.notification-item__content{width:68%;padding-right:16px}.notification-item__user-name{margin-bottom:2px;font-size:14px}.notification-item__time{margin-right:15px;text-align:right}.notification-item__read-at{border-width:2px;border-style:solid;border-radius:50%;width:10px;height:10px;display:block;position:relative}.notification-item__read-at:before{position:absolute;top:-30px;right:0;width:91px;background-color:#85858a;color:#fff;border-radius:4px;font-size:10px;text-align:center;padding:4px;opacity:0;visibility:hidden;transition:all .3s cubic-bezier(.39,.575,.565,1)}.notification-item__read-at:hover:before{opacity:1;visibility:visible}.notification-item__read-at.read:before{content:"Mark as unread"}.notification-item__read-at.unread:before{content:"Mark as read"}.notification-item__read-at.read{border-color:#eee}.notification-item__read-at.unread{border-color:#2e7d32;background-color:#2e7d32}.list-dot{border-radius:50%;width:8px;height:8px;margin-right:4px;display:block}
 `,lo=`._subscription-diaglog_1bysb_2{position:fixed;width:100vw;height:100vh;top:0;left:0;background-color:#0006;z-index:10000;display:flex;align-items:center;justify-content:center}._subscription-container_1bysb_15{width:610px;height:222px;border-radius:8px;padding:32px 24px 40px;background:#fff;color:#292929}._subscription-title_1bysb_25{font-size:20px;font-weight:500;text-align:center;color:#292929}._subscription-title_1bysb_25,._subscription-text_1bysb_34{margin-bottom:24px}._subscription-btn__container_1bysb_38{display:flex;justify-content:space-between;align-items:center}._btn-success_1bysb_44,._btn-cancel_1bysb_45{width:150px;height:40px;display:flex;align-items:center;justify-content:center;padding:8px;color:#292929;border-radius:1px;transition:background-color .25s cubic-bezier(.4,0,.2,1) 0ms,box-shadow .25s cubic-bezier(.4,0,.2,1) 0ms,border-color .25s cubic-bezier(.4,0,.2,1) 0ms,color .25s cubic-bezier(.4,0,.2,1) 0ms}._btn-cancel_1bysb_45{background-color:#ddd}._btn-cancel_1bysb_45:hover{background-color:#c5c5c5}._btn-success_1bysb_44{background-color:#93d500}._btn-success_1bysb_44:hover{background-color:#2e7d32}
 `,co=`._notification-massage_container_ql4az_1{background:#fff;padding:0 64px 0 84px;border-radius:8px;font-family:TT Firs Neue Trl,sans-serif}._notification-massage_container_ql4az_1:before{position:absolute;content:"";width:48px;height:48px;background:url(https://ukpcsaprod.blob.core.windows.net/saas/notification-icon.svg) no-repeat center/100%;top:12px;left:24px}._notification-name_ql4az_18{font-weight:500;font-size:14px}._notification-message_service_ql4az_23{font-size:12px}._notification-message_button-close_ql4az_27{position:absolute;top:12px;right:24px;width:24px;height:24px}

package/dist/components/index.js

@@ -334,7 +334,7 @@ const hi = (e) => {
         boxShadow: "10px 0px 20px #999",
         borderRadius: "0 0 8px 8px",
         overflow: "hidden",
-        zIndex: "10"
+        zIndex: "100"
       },
       children: /* @__PURE__ */ O("div", { className: "list-content", children: [
         /* @__PURE__ */ O(

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ukpc-lib/react",
   "private": false,
-  "version": "0.5.5",
+  "version": "0.5.6",
   "type": "module",
   "main": "./dist/",
   "module": "./dist/",

package/web-components-bundle/global-menu/index.js

@@ -1,5 +1,5 @@
 import "../index-425dac48.js";
-import { G as e } from "../index-627bf80a.js";
+import { G as e } from "../index-c65ddbd8.js";
 export {
   e as GlobalMenu
 };

package/web-components-bundle/global-topbar/index.js

@@ -1,5 +1,5 @@
 import "../index-425dac48.js";
-import { T as a } from "../index-627bf80a.js";
+import { T as a } from "../index-c65ddbd8.js";
 export {
   a as TopBar
 };

package/web-components-bundle/has-permission/index.js

@@ -1,5 +1,5 @@
 import "../index-425dac48.js";
-import { H as o, g as r } from "../index-627bf80a.js";
+import { H as o, g as r } from "../index-c65ddbd8.js";
 export {
   o as HasPermission,
   r as getUseHasPermission

package/web-components-bundle/{index-627bf80a.js → index-c65ddbd8.js}

@@ -12684,7 +12684,7 @@ const YX = ({
         boxShadow: "10px 0px 20px #999",
         borderRadius: "0 0 8px 8px",
         overflow: "hidden",
-        zIndex: "10"
+        zIndex: "100"
       },
       children: /* @__PURE__ */ V.jsxs("div", { className: "list-content", children: [
         /* @__PURE__ */ V.jsxs(