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

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

import{jsxs as e,jsx as t,Fragment as r}from"react/jsx-runtime";import n,{useRef as o}from"react";import{Typography as i}from"../typography/typography.component.js";import{MessageStyle as s,MessageWrapper as a,MessageContent as l,MessageContentWrapper as c,TypeIconStyle as p}from"./message.style.js";import u from"../../__internal__/utils/helpers/tags/tags.js";import d from"../icon/icon.component.js";import m from"../icon-button/icon-button.component.js";import{AiIcon as f,AiIconInverse as b}from"../../__internal__/ai-icon/ai-icon.component.js";import"../../style/utils/filter-styled-system-padding-props.js";import y from"../../style/utils/filter-styled-system-margin-props.js";import g from"../../hooks/__internal__/useLocale/useLocale.js";import h from"../../__internal__/utils/logger/index.js";function O(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function j(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){O(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}let v=!1,_=!1,P=!1;const S=n.forwardRef(((n,O)=>{var{open:S=!0,transparent:x=!1,title:D,variant:k="info",children:z,onDismiss:I,id:L,closeButtonAriaLabel:M,showCloseIcon:C=!0,width:T,size:A="medium"}=n,B=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}(n,["open","transparent","title","variant","children","onDismiss","id","closeButtonAriaLabel","showCloseIcon","width","size"]);x&&!v&&(h.deprecate("The 'transparent' prop in `Message` is deprecated and will soon be removed."),v=!0),"neutral"!==k||_||(h.deprecate("The 'neutral' variant in `Message` is deprecated and will soon be removed."),_=!0),!1!==C||P||(h.deprecate("The 'showCloseIcon' prop in `Message` is deprecated and will soon be removed. To prevent the close button from being rendered, don't pass the `onDismiss` prop."),P=!0);const E=o(null),R=O||E,W=g(),N=y(B),q={neutral:"info",success:"tick_circle",error:"error",warning:"warning",info:"info",callout:"tag"},F=k.endsWith("-subtle"),G=k.replace("-subtle",""),H=()=>{var n,o;return e(r,{children:[t(p,{"aria-hidden":"true",variant:G,isSubtle:F,transparent:x,children:"ai"===k?t(f,{"data-role":"ai-icon"}):"ai-subtle"===k?t(b,{"data-role":"ai-icon-subtle"}):t(d,{type:q[G]})}),t(i,{screenReaderOnly:!0,children:null===(n=(o=W.message)[G])||void 0===n?void 0:n.call(o)})]})};return S?e(s,w(j(w(j({},u("Message",B)),{transparent:x,variant:G,isSubtle:F,id:L,width:T,ref:R}),N),{tabIndex:-1,children:[!F&&H(),e(a,{children:[e(l,{"data-role":"message-content",size:A,isSubtle:F,children:[F&&H(),e(c,{size:A,children:[D?"string"==typeof D?t(i,{m:0,fontWeight:"500",fontSize:"large"===A?"16px":"14px",children:D}):D:null,z]})]}),C&&I&&t(m,{my:"large"===A?2:1,mr:"large"===A?2:1,p:"4px","data-element":"close","aria-label":M||W.message.closeButtonAriaLabel(),onClick:I,children:t(d,{type:"cross"})})]})]})):null}));S.displayName="Message";export{S as Message,S as default};