carbon-react/esm/components/toast/toast.component.js

A library of reusable React components for easily building user interfaces.

import{jsx as e,jsxs as t}from"react/jsx-runtime";import r,{useRef as n,useState as o,useCallback as i,useEffect as a}from"react";import{TransitionGroup as c,CSSTransition as l}from"react-transition-group";import s from"../icon/icon.component.js";import u from"../../__internal__/utils/helpers/tags/tags.js";import{StyledPortal as p,ToastWrapper as f,StyledToast as m,StyledToastContent as d}from"./toast.style.js";import{TypeIconStyle as b}from"../message/message.style.js";import g from"../icon-button/icon-button.component.js";import y from"../../__internal__/utils/helpers/events/events.js";import O from"../../hooks/__internal__/useLocale/useLocale.js";import j from"../../hooks/__internal__/useModalManager/useModalManager.js";import h from"../../__internal__/utils/helpers/guid/index.js";import{Typography as v}from"../typography/typography.component.js";function _(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function P(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){_(e,t,r[t])}))}return e}function w(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const x=r.forwardRef(((r,_)=>{var{align:x="center",alignY:D,children:k,id:N,maxWidth:M,onDismiss:S,open:E=!0,targetPortalId:I,timeout:R,variant:T="success",disableAutoFocus:Y,closeButtonDataProps:B}=r,L=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(r,["align","alignY","children","id","maxWidth","onDismiss","open","targetPortalId","timeout","variant","disableAutoFocus","closeButtonDataProps"]);const W="notice"===T,A="notification"===T,F=O(),$=n(h()),C=n(h()),K=n(null),q=n(null),z=n(null),G=n(null),H=n(null),[J,Q]=o(0),U=`${!W&&$.current} ${C.current}`;let V=K;_&&"object"==typeof _&&"current"in _&&(V=_);const X=i((e=>{S&&y.isEscKey(e)&&(e.stopImmediatePropagation(),S(e))}),[S]);j({open:E,closeModal:X,modalRef:V,topModalOverride:!0}),a((()=>{q.current&&clearTimeout(q.current),R&&E&&S&&(q.current=setTimeout((()=>S()),+R))}),[S,E,R]),a((()=>{Y||(E?setTimeout((()=>{var e;H.current=document.activeElement,null===(e=z.current)||void 0===e||e.focus()}),0):H.current&&(H.current.focus(),H.current=null,Q(0)))}),[E,S,Y]),a((()=>()=>{H.current&&H.current.focus()}),[]);const Z={notification:"alert",neutral:"info",success:"tick_circle",error:"error",info:"info",warning:"warning"}[T]||"none";return e(p,{id:I,align:x,alignY:D,isNotice:W,children:e(f,{align:x,ref:V,isNotice:W,"data-role":"toast-wrapper",role:"region","aria-hidden":!E,"aria-labelledby":E?U:void 0,children:e(c,{children:function(){if(!E)return null;let r="success";return W||A||(r=T),e(l,{enter:!0,classNames:W?"toast-alternative":"toast",timeout:{appear:1600,enter:1500,exit:500},nodeRef:z,children:t(m,w(P(w(P({align:x,alignY:D,isNotice:W,isNotification:A},u("toast",L)),{variant:r,id:N,maxWidth:M,ref:z}),!Y&&{tabIndex:J,onBlur:()=>Q(void 0)}),{children:[!W&&t(b,{variant:A?"info":T,"data-role":"toast-type-icon",children:[e(s,{type:Z}),e(v,{screenReaderOnly:!0,id:$.current,children:F.toast[T]()})]}),e(d,{isNotice:W,isDismiss:!!S,"data-role":"toast-content",id:C.current,children:k}),S&&e(g,w(P({"aria-label":F.toast.ariaLabels.close(),onClick:S,ref:G},u("close",P({"data-element":"close"},B))),{children:e(s,{type:"close"})}))]}))})}()})})})}));x.displayName="Toast";export{x as Toast,x as default};