@undp/design-system-react/dist/toaster-CdjkCMtd.cjs

React based design system for UNDP

const e=require("./rolldown-runtime-mLOUI7ql.cjs"),t=require("./utils-Dd9-5CFr.cjs"),n=require("./dist-BZMXZCSu.cjs"),r=require("./createLucideIcon-FKMTNncQ.cjs"),i=require("./x-bed1YSbv.cjs"),a=require("./dist--OhUIyHO.cjs"),o=require("./dist-VI-VV5wq.cjs"),s=require("./dist-B4Xu9oo7.cjs"),c=require("./dist-DluBSGxD.cjs"),l=require("./dist-C4aT9Auh.cjs"),u=require("./dist-CTSEb5uk.cjs"),d=require("./dist-odcXV7N3.cjs"),f=require("./dist-Cepu74FS.cjs"),p=require("./dist-B7GyuuzQ.cjs"),m=require("./dist-DkrZhx1H.cjs"),h=require("./ToasterHooks.cjs");let g=require("react");g=e.r(g,1);let _=require("react/jsx-runtime"),v=require("react-dom");v=e.r(v,1);var y=r.t(`circle-check-big`,[[`path`,{d:`M21.801 10A10 10 0 1 1 17 3.335`,key:`yps3ct`}],[`path`,{d:`m9 11 3 3L22 4`,key:`1pflzl`}]]),b=r.t(`circle-x`,[[`circle`,{cx:`12`,cy:`12`,r:`10`,key:`1mglay`}],[`path`,{d:`m15 9-6 6`,key:`1uzhvr`}],[`path`,{d:`m9 9 6 6`,key:`z0biqf`}]]),x=r.t(`info`,[[`circle`,{cx:`12`,cy:`12`,r:`10`,key:`1mglay`}],[`path`,{d:`M12 16v-4`,key:`1dtifu`}],[`path`,{d:`M12 8h.01`,key:`e9boi3`}]]),S=r.t(`triangle-alert`,[[`path`,{d:`m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3`,key:`wmoenq`}],[`path`,{d:`M12 9v4`,key:`juzpu7`}],[`path`,{d:`M12 17h.01`,key:`p32p05`}]]),C=Object.defineProperty,w=(e,t)=>C(e,`name`,{value:t,configurable:!0}),T=`ToastProvider`,[E,D,O]=l.t(`Toast`),[k,ee]=c.n(`Toast`,[O]),[A,j]=k(T),M=w(e=>{let{__scopeToast:t,label:n=`Notification`,duration:r=5e3,swipeDirection:i=`right`,swipeThreshold:a=50,announcerContainer:o,children:s}=e,[c,l]=g.useState(null),[u,d]=g.useState(0),f=g.useRef(!1);return n.trim()||console.error(`Invalid prop \`label\` supplied to \`${T}\`. Expected non-empty \`string\`.`),(0,_.jsx)(E.Provider,{scope:t,children:(0,_.jsx)(A,{scope:t,label:n,duration:r,swipeDirection:i,swipeThreshold:a,toastCount:u,viewport:c,onViewportChange:l,onToastAdd:g.useCallback(()=>d(e=>e+1),[]),onToastRemove:g.useCallback(()=>d(e=>e-1),[]),isClosePausedRef:f,announcerContainer:o,children:s})})},`ToastProvider`),N=`ToastViewport`,P=[`F8`],F=`toast.viewportPause`,I=`toast.viewportResume`,L=g.forwardRef(w(function(e,t){let{__scopeToast:n,hotkey:r=P,label:i=`Notifications ({hotkey})`,...s}=e,c=j(N,n),l=D(n),u=g.useRef(null),d=g.useRef(null),f=g.useRef(null),m=g.useRef(null),h=a.i(t,m,c.onViewportChange),v=r.join(`+`).replace(/Key/g,``).replace(/Digit/g,``),y=c.toastCount>0;g.useEffect(()=>{let e=w(e=>{r.length!==0&&r.every(t=>e[t]||e.code===t)&&m.current?.focus()},`handleKeyDown`);return document.addEventListener(`keydown`,e),()=>document.removeEventListener(`keydown`,e)},[r]),g.useEffect(()=>{let e=u.current,t=m.current;if(y&&e&&t){let n=w(()=>{if(!c.isClosePausedRef.current){let e=new CustomEvent(F);t.dispatchEvent(e),c.isClosePausedRef.current=!0}},`handlePause`),r=w(()=>{if(c.isClosePausedRef.current){let e=new CustomEvent(I);t.dispatchEvent(e),c.isClosePausedRef.current=!1}},`handleResume`),i=w(t=>{e.contains(t.relatedTarget)||r()},`handleFocusOutResume`),a=w(()=>{e.contains(document.activeElement)||r()},`handlePointerLeaveResume`);return e.addEventListener(`focusin`,n),e.addEventListener(`focusout`,i),e.addEventListener(`pointermove`,n),e.addEventListener(`pointerleave`,a),window.addEventListener(`blur`,n),window.addEventListener(`focus`,r),()=>{e.removeEventListener(`focusin`,n),e.removeEventListener(`focusout`,i),e.removeEventListener(`pointermove`,n),e.removeEventListener(`pointerleave`,a),window.removeEventListener(`blur`,n),window.removeEventListener(`focus`,r)}}},[y,c.isClosePausedRef]);let b=g.useCallback(({tabbingDirection:e})=>{let t=l().map(t=>{let n=t.ref.current,r=[n,...Z(n)];return e===`forwards`?r:r.reverse()});return(e===`forwards`?t.reverse():t).flat()},[l]);return g.useEffect(()=>{let e=m.current;if(e){let t=w(t=>{let n=t.altKey||t.ctrlKey||t.metaKey;if(t.key===`Tab`&&!n){let n=document.activeElement,r=t.shiftKey;if(t.target===e&&r){d.current?.focus();return}let i=b({tabbingDirection:r?`backwards`:`forwards`}),a=i.findIndex(e=>e===n);Q(i.slice(a+1))?t.preventDefault():r?d.current?.focus():f.current?.focus()}},`handleKeyDown`);return e.addEventListener(`keydown`,t),()=>e.removeEventListener(`keydown`,t)}},[l,b]),(0,_.jsxs)(p.t,{ref:u,role:`region`,"aria-label":i.replace(`{hotkey}`,v),tabIndex:-1,style:{pointerEvents:y?void 0:`none`},children:[y&&(0,_.jsx)(z,{ref:d,onFocusFromOutsideViewport:()=>{Q(b({tabbingDirection:`forwards`}))}}),(0,_.jsx)(E.Slot,{scope:n,children:(0,_.jsx)(o.t.ol,{tabIndex:-1,...s,ref:h})}),y&&(0,_.jsx)(z,{ref:f,onFocusFromOutsideViewport:()=>{Q(b({tabbingDirection:`backwards`}))}})]})},`ToastViewport`)),R=`ToastFocusProxy`,z=g.forwardRef(w(function(e,t){let{__scopeToast:n,onFocusFromOutsideViewport:r,...i}=e,a=j(R,n);return(0,_.jsx)(s.r,{tabIndex:0,...i,ref:t,style:{position:`fixed`},onFocus:e=>{let t=e.relatedTarget;a.viewport?.contains(t)||r()}})},`ToastFocusProxy`)),B=`Toast`,te=`toast.swipeStart`,ne=`toast.swipeMove`,re=`toast.swipeCancel`,ie=`toast.swipeEnd`,V=g.forwardRef(w(function(e,t){let{forceMount:n,open:r,defaultOpen:i,onOpenChange:a,...o}=e,[s,c]=u.t({prop:r,defaultProp:i??!0,onChange:a,caller:B});return(0,_.jsx)(d.t,{present:n||s,children:(0,_.jsx)(U,{open:s,...o,ref:t,onClose:()=>c(!1),onPause:f.t(e.onPause),onResume:f.t(e.onResume),onSwipeStart:u.n(e.onSwipeStart,e=>{e.currentTarget.setAttribute(`data-swipe`,`start`)}),onSwipeMove:u.n(e.onSwipeMove,e=>{let{x:t,y:n}=e.detail.delta;e.currentTarget.setAttribute(`data-swipe`,`move`),e.currentTarget.style.setProperty(`--radix-toast-swipe-move-x`,`${t}px`),e.currentTarget.style.setProperty(`--radix-toast-swipe-move-y`,`${n}px`)}),onSwipeCancel:u.n(e.onSwipeCancel,e=>{e.currentTarget.setAttribute(`data-swipe`,`cancel`),e.currentTarget.style.removeProperty(`--radix-toast-swipe-move-x`),e.currentTarget.style.removeProperty(`--radix-toast-swipe-move-y`),e.currentTarget.style.removeProperty(`--radix-toast-swipe-end-x`),e.currentTarget.style.removeProperty(`--radix-toast-swipe-end-y`)}),onSwipeEnd:u.n(e.onSwipeEnd,e=>{let{x:t,y:n}=e.detail.delta;e.currentTarget.setAttribute(`data-swipe`,`end`),e.currentTarget.style.removeProperty(`--radix-toast-swipe-move-x`),e.currentTarget.style.removeProperty(`--radix-toast-swipe-move-y`),e.currentTarget.style.setProperty(`--radix-toast-swipe-end-x`,`${t}px`),e.currentTarget.style.setProperty(`--radix-toast-swipe-end-y`,`${n}px`),c(!1)})})})},`Toast`)),[ae,H]=k(B,{onClose(){}}),U=g.forwardRef(w(function(e,t){let{__scopeToast:n,type:r=`foreground`,duration:i,open:s,onClose:c,onEscapeKeyDown:l,onPause:d,onResume:m,onSwipeStart:h,onSwipeMove:y,onSwipeCancel:b,onSwipeEnd:x,...S}=e,C=j(B,n),T=D(n),[O,k]=g.useState(null),ee=a.i(t,k),A=g.useRef(null),M=g.useRef(null),N=i||C.duration,P=g.useRef(0),L=g.useRef(N),R=g.useRef(0),{onToastAdd:z,onToastRemove:V}=C,H=f.t(()=>{O?.contains(document.activeElement)&&C.viewport?.focus(),c()}),U=g.useCallback(e=>{!e||e===1/0||(window.clearTimeout(R.current),P.current=new Date().getTime(),R.current=window.setTimeout(H,e))},[H]);g.useEffect(()=>{let e=C.viewport;if(e){let t=w(()=>{U(L.current),m?.()},`handleResume`),n=w(()=>{let e=new Date().getTime()-P.current;L.current-=e,window.clearTimeout(R.current),d?.()},`handlePause`);return e.addEventListener(F,n),e.addEventListener(I,t),()=>{e.removeEventListener(F,n),e.removeEventListener(I,t)}}},[C.viewport,N,d,m,U]),g.useEffect(()=>{s&&!C.isClosePausedRef.current&&U(N)},[s,N,C.isClosePausedRef,U]),g.useEffect(()=>()=>{window.clearTimeout(R.current)},[]),g.useEffect(()=>(z(),()=>V()),[z,V]);let W=g.useMemo(()=>O?q(O):null,[O]);return C.viewport?(0,_.jsxs)(_.Fragment,{children:[W&&(0,_.jsx)(oe,{__scopeToast:n,role:`status`,"aria-live":r===`foreground`?`assertive`:`polite`,children:W}),(0,_.jsx)(ae,{scope:n,onClose:H,children:v.createPortal((0,_.jsx)(E.ItemSlot,{scope:n,children:(0,_.jsx)(p.r,{asChild:!0,onEscapeKeyDown:u.n(l,e=>{T().some(t=>t.ref.current?.contains(e.target))||H()}),children:(0,_.jsx)(o.t.li,{tabIndex:0,"data-state":s?`open`:`closed`,"data-swipe-direction":C.swipeDirection,...S,ref:ee,style:{userSelect:`none`,touchAction:`none`,...e.style},onKeyDown:u.n(e.onKeyDown,e=>{e.key===`Escape`&&(l?.(e.nativeEvent),e.nativeEvent.defaultPrevented||H())}),onPointerDown:u.n(e.onPointerDown,e=>{e.button===0&&(A.current={x:e.clientX,y:e.clientY})}),onPointerMove:u.n(e.onPointerMove,e=>{if(!A.current)return;let t=e.clientX-A.current.x,n=e.clientY-A.current.y,r=!!M.current,i=[`left`,`right`].includes(C.swipeDirection),a=[`left`,`up`].includes(C.swipeDirection)?Math.min:Math.max,o=i?a(0,t):0,s=i?0:a(0,n),c=e.pointerType===`touch`?10:2,l={x:o,y:s},u={originalEvent:e,delta:l};r?(M.current=l,J(ne,y,u,{discrete:!1})):Y(l,C.swipeDirection,c)?(M.current=l,J(te,h,u,{discrete:!1}),e.target.setPointerCapture(e.pointerId)):(Math.abs(t)>c||Math.abs(n)>c)&&(A.current=null)}),onPointerUp:u.n(e.onPointerUp,e=>{let t=M.current,n=e.target;if(n.hasPointerCapture(e.pointerId)&&n.releasePointerCapture(e.pointerId),M.current=null,A.current=null,t){let n=e.currentTarget,r={originalEvent:e,delta:t};Y(t,C.swipeDirection,C.swipeThreshold)?J(ie,x,r,{discrete:!0}):J(re,b,r,{discrete:!0}),n.addEventListener(`click`,e=>e.preventDefault(),{once:!0})}})})})}),C.viewport)})]}):null},`ToastImpl`)),oe=w(e=>{let{__scopeToast:t,children:n,...r}=e,i=j(B,t),[a,o]=g.useState(!1),[c,l]=g.useState(!1);return de(()=>o(!0)),g.useEffect(()=>{let e=window.setTimeout(()=>l(!0),1e3);return()=>window.clearTimeout(e)},[]),c?null:(0,_.jsx)(m.t,{asChild:!0,container:i.announcerContainer||void 0,children:(0,_.jsx)(s.r,{...r,children:a&&(0,_.jsxs)(_.Fragment,{children:[i.label,` `,n]})})})},`ToastAnnounce`),W=g.forwardRef(w(function(e,t){let{__scopeToast:n,...r}=e;return(0,_.jsx)(o.t.div,{...r,ref:t})},`ToastTitle`)),se=g.forwardRef(w(function(e,t){let{__scopeToast:n,...r}=e;return(0,_.jsx)(o.t.div,{...r,ref:t})},`ToastDescription`)),ce=`ToastAction`,le=g.forwardRef(w(function(e,t){let{altText:n,...r}=e;return n.trim()?(0,_.jsx)(K,{altText:n,asChild:!0,children:(0,_.jsx)(G,{...r,ref:t})}):(console.error(`Invalid prop \`altText\` supplied to \`${ce}\`. Expected non-empty \`string\`.`),null)},`ToastAction`)),ue=`ToastClose`,G=g.forwardRef(w(function(e,t){let{__scopeToast:n,...r}=e,i=H(ue,n);return(0,_.jsx)(K,{asChild:!0,children:(0,_.jsx)(o.t.button,{type:`button`,...r,ref:t,onClick:u.n(e.onClick,i.onClose)})})},`ToastClose`)),K=g.forwardRef(w(function(e,t){let{__scopeToast:n,altText:r,...i}=e;return(0,_.jsx)(o.t.div,{"data-radix-toast-announce-exclude":``,"data-radix-toast-announce-alt":r||void 0,...i,ref:t})},`ToastAnnounceExclude`));function q(e){let t=[];return Array.from(e.childNodes).forEach(e=>{if(e.nodeType===e.TEXT_NODE&&e.textContent&&t.push(e.textContent),X(e)){let n=e.ariaHidden||e.hidden||e.style.display===`none`,r=e.dataset.radixToastAnnounceExclude===``;if(!n)if(r){let n=e.dataset.radixToastAnnounceAlt;n&&t.push(n)}else t.push(...q(e))}}),t}w(q,`getAnnounceTextContent`);function J(e,t,n,{discrete:r}){let i=n.originalEvent.currentTarget,a=new CustomEvent(e,{bubbles:!0,cancelable:!0,detail:n});t&&i.addEventListener(e,t,{once:!0}),r?o.n(i,a):i.dispatchEvent(a)}w(J,`handleAndDispatchCustomEvent`);var Y=w((e,t,n=0)=>{let r=Math.abs(e.x),i=Math.abs(e.y),a=r>i;return t===`left`||t===`right`?a&&r>n:!a&&i>n},`isDeltaInDirection`);function de(e=()=>{}){let t=f.t(e);c.t(()=>{let e=0,n=0;return e=window.requestAnimationFrame(()=>n=window.requestAnimationFrame(t)),()=>{window.cancelAnimationFrame(e),window.cancelAnimationFrame(n)}},[t])}w(de,`useNextFrame`);function X(e){return e.nodeType===e.ELEMENT_NODE}w(X,`isHTMLElement`);function Z(e){let t=[],n=document.createTreeWalker(e,NodeFilter.SHOW_ELEMENT,{acceptNode:w(e=>{let t=e.tagName===`INPUT`&&e.type===`hidden`;return e.disabled||e.hidden||t?NodeFilter.FILTER_SKIP:e.tabIndex>=0?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP},`acceptNode`)});for(;n.nextNode();)t.push(n.currentNode);return t}w(Z,`getTabbableCandidates`);function Q(e){let t=document.activeElement;return e.some(e=>e===t?!0:(e.focus(),document.activeElement!==t))}w(Q,`focusFirst`);var fe=M,pe=L,me=V,he=W,ge=se,_e=le,ve=G,ye=fe,be=g.default.createContext(null),$=g.default.forwardRef(({className:e,...n},r)=>(0,_.jsx)(pe,{...n,ref:r,className:t.t(`fixed top-0 z-100 flex max-h-screen w-full flex-col-reverse p-4 sm:top-auto sm:right-0 sm:bottom-0 sm:flex-col md:max-w-105`,e)}));$.displayName=pe.displayName;var xe=n.t(`group pointer-events-auto relative shadow-xs bg-primary-white flex w-full text-content-primary items-center justify-between flex gap-2 overflow-hidden rounded-sm border border-stroke p-2 pr-6 transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full sm:data-[state=open]:slide-in-from-bottom-full`,{variants:{variant:{default:`border border-stroke`,success:`border-t-4 border-success`,warning:`border-t-4 border-warning`,info:`border-t-4 border-info`,destructive:`border-t-4 border-error`}},defaultVariants:{variant:`default`}}),Se=n.t(``,{variants:{variant:{default:`text-content-primary`,success:`text-success`,warning:`text-warning`,info:`text-info`,destructive:`text-error`}},defaultVariants:{variant:`default`}}),Ce=g.default.forwardRef(({className:e,variant:n,...r},i)=>(0,_.jsx)(be.Provider,{value:{variant:n},children:(0,_.jsx)(me,{...r,ref:i,className:t.t(xe({variant:n}),e)})}));Ce.displayName=me.displayName;var we=g.default.forwardRef(({className:e,...n},r)=>(0,_.jsx)(_e,{...n,ref:r,className:t.t(`inline-flex h-8 shrink-0 items-center justify-center rounded-none bg-transparent px-3 font-medium text-content-primary text-sm transition-colors hover:bg-surface focus:outline-hidden focus:ring-1 disabled:pointer-events-none disabled:opacity-disabled`,e)}));we.displayName=_e.displayName;var Te=g.default.forwardRef(({className:e,...n},r)=>(0,_.jsx)(ve,{...n,ref:r,className:t.t(`absolute top-1 right-1 rounded-md p-1 text-content-primary/50 opacity-0 transition-opacity hover:text-content-primary focus:opacity-100 focus:outline-hidden focus:ring-1 group-hover:opacity-100`,e),"toast-close":``,children:(0,_.jsx)(i.t,{className:`h-4 w-4`})}));Te.displayName=ve.displayName;var Ee=g.default.forwardRef(({className:e,...n},r)=>{let i=g.default.useContext(be),a=t.t(Se({variant:i?.variant}),`text-lg font-bold [&+div]:text-xs`,e),o=null;switch(i?.variant){case`destructive`:o=(0,_.jsx)(b,{className:`h-4 w-4 stroke-error`,strokeWidth:2});break;case`success`:o=(0,_.jsx)(y,{className:`h-4 w-4 stroke-success`,strokeWidth:2});break;case`warning`:o=(0,_.jsx)(S,{className:`h-4 w-4 stroke-warning`,strokeWidth:2});break;case`info`:o=(0,_.jsx)(x,{className:`h-4 w-4 stroke-info`,strokeWidth:2});break;default:o=null;break}return(0,_.jsxs)(`div`,{className:`flex items-center gap-x-1`,children:[o,(0,_.jsx)(he,{...n,ref:r,className:a})]})});Ee.displayName=he.displayName;var De=g.default.forwardRef(({className:e,...n},r)=>(0,_.jsx)(ge,{...n,ref:r,className:t.t(`text-base text-content-secondary opacity-90`,e)}));De.displayName=ge.displayName;function Oe(){let{toasts:e}=h.useToast();return(0,_.jsxs)(ye,{children:[e.map(({id:e,title:t,description:n,action:r,...i})=>(0,g.createElement)(Ce,{...i,key:e},(0,_.jsxs)(`div`,{className:`grid gap-1`,children:[t&&(0,_.jsx)(Ee,{children:t}),n&&(0,_.jsx)(De,{children:n})]}),r,(0,_.jsx)(Te,{}))),(0,_.jsx)($,{})]})}Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return Oe}});
//# sourceMappingURL=toaster-CdjkCMtd.cjs.map