@transferwise/components 46.71.8 → 46.72.0

package/build/alert/Alert.js

@@ -49,7 +49,8 @@ function Alert({
   size: size$1,
   title,
   type = 'neutral',
-  variant = 'desktop'
+  variant = 'desktop',
+  active = true
 }) {
   React.useEffect(() => {
     if (arrow !== undefined) {
@@ -79,58 +80,60 @@ function Alert({
   }, [resolvedType, type]);
   const [shouldFire, setShouldFire] = React.useState(false);
   const closeButtonReference = React.useRef(null);
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: clsx.clsx('alert d-flex', `alert-${resolvedType}`, arrow != null && alertArrowClassNames(arrow), className),
-    "data-testid": "alert",
-    onTouchStart: () => setShouldFire(true),
-    onTouchEnd: event => {
-      if (shouldFire && action?.href &&
-      // Check if current event is triggered from closeButton
-      event.target instanceof Node && closeButtonReference.current && !closeButtonReference.current.contains(event.target)) {
-        if (action.target === '_blank') {
-          window.top?.open(action.href);
-        } else {
-          window.top?.location.assign(action.href);
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    role: resolvedType === sentiment.Sentiment.NEGATIVE ? 'alert' : 'status',
+    children: active && /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: clsx.clsx('alert d-flex', `alert-${resolvedType}`, arrow != null && alertArrowClassNames(arrow), className),
+      "data-testid": "alert",
+      onTouchStart: () => setShouldFire(true),
+      onTouchEnd: event => {
+        if (shouldFire && action?.href &&
+        // Check if current event is triggered from closeButton
+        event.target instanceof Node && closeButtonReference.current && !closeButtonReference.current.contains(event.target)) {
+          if (action.target === '_blank') {
+            window.top?.open(action.href);
+          } else {
+            window.top?.location.assign(action.href);
+          }
         }
-      }
-      setShouldFire(false);
-    },
-    onTouchMove: () => setShouldFire(false),
-    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: clsx.clsx('alert__content', 'd-flex', 'flex-grow-1', variant),
-      "data-testid": variant,
-      children: [icon ? /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "alert__icon",
-        children: icon
-      }) : /*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
-        size: size.Size.LARGE,
-        sentiment: resolvedType
-      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "alert__message",
-        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-          role: sentiment.Sentiment.NEGATIVE === resolvedType ? 'alert' : 'status',
-          children: [title && /*#__PURE__*/jsxRuntime.jsx(Title, {
-            className: "m-b-1",
-            type: typography.Typography.TITLE_BODY,
-            children: title
-          }), /*#__PURE__*/jsxRuntime.jsx(Body, {
-            as: "span",
-            className: "d-block",
-            type: typography.Typography.BODY_LARGE,
-            children: children || /*#__PURE__*/jsxRuntime.jsx(InlineMarkdown, {
-              children: message
-            })
+        setShouldFire(false);
+      },
+      onTouchMove: () => setShouldFire(false),
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: clsx.clsx('alert__content', 'd-flex', 'flex-grow-1', variant),
+        "data-testid": variant,
+        children: [icon ? /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "alert__icon",
+          children: icon
+        }) : /*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
+          size: size.Size.LARGE,
+          sentiment: resolvedType
+        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "alert__message",
+          children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+            children: [title && /*#__PURE__*/jsxRuntime.jsx(Title, {
+              className: "m-b-1",
+              type: typography.Typography.TITLE_BODY,
+              children: title
+            }), /*#__PURE__*/jsxRuntime.jsx(Body, {
+              as: "span",
+              className: "d-block",
+              type: typography.Typography.BODY_LARGE,
+              children: children || /*#__PURE__*/jsxRuntime.jsx(InlineMarkdown, {
+                children: message
+              })
+            })]
+          }), action && /*#__PURE__*/jsxRuntime.jsx(Action.Action, {
+            action: action,
+            className: "m-t-1"
           })]
-        }), action && /*#__PURE__*/jsxRuntime.jsx(Action.Action, {
-          action: action,
-          className: "m-t-1"
         })]
+      }), onDismiss && /*#__PURE__*/jsxRuntime.jsx(CloseButton.CloseButton, {
+        ref: closeButtonReference,
+        className: "m-l-2",
+        onClick: onDismiss
       })]
-    }), onDismiss && /*#__PURE__*/jsxRuntime.jsx(CloseButton.CloseButton, {
-      ref: closeButtonReference,
-      className: "m-l-2",
-      onClick: onDismiss
-    })]
+    })
   });
 }
 function alertArrowClassNames(arrow) {

package/build/alert/Alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sources":["../../src/alert/Alert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useState, useRef, useEffect } from 'react';\n\nimport Body from '../body/Body';\nimport { Sentiment, Size, Typography, Variant } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport StatusIcon from '../statusIcon';\nimport Title from '../title/Title';\nimport { logActionRequired } from '../utilities';\n\nimport InlineMarkdown from './inlineMarkdown';\nimport { Action } from '../common/action/Action';\n\nexport type AlertAction = {\n  'aria-label'?: string;\n  href?: string;\n  target?: string;\n  text: React.ReactNode;\n  onClick?: () => void;\n};\n\n/** @deprecated Use `\"top\" | \"bottom\"` instead. */\ntype AlertTypeDeprecated = `${Sentiment.SUCCESS | Sentiment.INFO | Sentiment.ERROR}`;\ntype AlertTypeResolved = `${\n  | Sentiment.POSITIVE\n  | Sentiment.NEUTRAL\n  | Sentiment.WARNING\n  | Sentiment.NEGATIVE}`;\nexport type AlertType = AlertTypeResolved | AlertTypeDeprecated;\n\nexport enum AlertArrowPosition {\n  TOP_LEFT = 'up-left',\n  TOP = 'up-center',\n  TOP_RIGHT = 'up-right',\n  BOTTOM_LEFT = 'down-left',\n  BOTTOM = 'down-center',\n  BOTTOM_RIGHT = 'down-right',\n}\n\nexport interface AlertProps {\n  /** An optional call to action to sit under the main body of the alert. If your label is short, use aria-label to provide more context */\n  action?: AlertAction;\n  className?: string;\n  /** An optional icon. If not provided, we will default the icon to something appropriate for the type */\n  icon?: React.ReactNode;\n  /** Title for the alert component */\n  title?: string;\n  /** The main body of the alert. Accepts plain text and bold words specified with **double stars */\n  message?: string;\n  /** The presence of the onDismiss handler will trigger the visibility of the close button */\n  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n  /** The type dictates which icon and colour will be used */\n  type?: AlertType;\n  variant?: `${Variant}`;\n  /** @deprecated Use `InlineAlert` instead. */\n  arrow?: `${AlertArrowPosition}`;\n  /** @deprecated Use `message` instead. Be aware `message` only accepts plain text or text with **bold** markdown. */\n  children?: React.ReactNode;\n  /** @deprecated Use `onDismiss` instead. */\n  dismissible?: boolean;\n  /** @deprecated Alert component doesn't support `size` anymore, please remove this prop. */\n  size?: `${Size}`;\n}\n\nfunction resolveType(type: AlertType): AlertTypeResolved {\n  switch (type) {\n    case 'success':\n      return 'positive';\n    case 'info':\n      return 'neutral';\n    case 'error':\n      return 'negative';\n    default:\n      return type;\n  }\n}\n\nexport default function Alert({\n  arrow,\n  action,\n  children,\n  className,\n  dismissible,\n  icon,\n  onDismiss,\n  message,\n  size,\n  title,\n  type = 'neutral',\n  variant = 'desktop',\n}: AlertProps) {\n  useEffect(() => {\n    if (arrow !== undefined) {\n      logActionRequired(\n        \"Alert component doesn't support 'arrow' anymore, use 'InlineAlert' instead.\",\n      );\n    }\n  }, [arrow]);\n\n  useEffect(() => {\n    if (children !== undefined) {\n      logActionRequired(\n        \"Alert component doesn't support 'children' anymore, use 'message' instead.\",\n      );\n    }\n  }, [children]);\n\n  useEffect(() => {\n    if (dismissible !== undefined) {\n      logActionRequired(\n        \"Alert component doesn't support 'dismissible' anymore, use 'onDismiss' instead.\",\n      );\n    }\n  }, [dismissible]);\n\n  useEffect(() => {\n    if (size !== undefined) {\n      logActionRequired(\"Alert component doesn't support 'size' anymore, please remove that prop.\");\n    }\n  }, [size]);\n\n  const resolvedType = resolveType(type);\n  useEffect(() => {\n    if (resolvedType !== type) {\n      logActionRequired(\n        `Alert component has deprecated '${type}' value for the 'type' prop. Please use '${resolvedType}' instead.`,\n      );\n    }\n  }, [resolvedType, type]);\n\n  const [shouldFire, setShouldFire] = useState(false);\n\n  const closeButtonReference = useRef<HTMLButtonElement>(null);\n\n  return (\n    <div\n      className={clsx(\n        'alert d-flex',\n        `alert-${resolvedType}`,\n        arrow != null && alertArrowClassNames(arrow),\n        className,\n      )}\n      data-testid=\"alert\"\n      onTouchStart={() => setShouldFire(true)}\n      onTouchEnd={(event) => {\n        if (\n          shouldFire &&\n          action?.href &&\n          // Check if current event is triggered from closeButton\n          event.target instanceof Node &&\n          closeButtonReference.current &&\n          !closeButtonReference.current.contains(event.target)\n        ) {\n          if (action.target === '_blank') {\n            window.top?.open(action.href);\n          } else {\n            window.top?.location.assign(action.href);\n          }\n        }\n        setShouldFire(false);\n      }}\n      onTouchMove={() => setShouldFire(false)}\n    >\n      <div\n        className={clsx('alert__content', 'd-flex', 'flex-grow-1', variant)}\n        data-testid={variant}\n      >\n        {icon ? (\n          <div className=\"alert__icon\">{icon}</div>\n        ) : (\n          <StatusIcon size={Size.LARGE} sentiment={resolvedType} />\n        )}\n        <div className=\"alert__message\">\n          <div role={Sentiment.NEGATIVE === resolvedType ? 'alert' : 'status'}>\n            {title && (\n              <Title className=\"m-b-1\" type={Typography.TITLE_BODY}>\n                {title}\n              </Title>\n            )}\n            <Body as=\"span\" className=\"d-block\" type={Typography.BODY_LARGE}>\n              {children || <InlineMarkdown>{message}</InlineMarkdown>}\n            </Body>\n          </div>\n          {action && <Action action={action} className=\"m-t-1\" />}\n        </div>\n      </div>\n      {onDismiss && (\n        <CloseButton ref={closeButtonReference} className=\"m-l-2\" onClick={onDismiss} />\n      )}\n    </div>\n  );\n}\n\nfunction alertArrowClassNames(arrow: `${AlertArrowPosition}`) {\n  switch (arrow) {\n    case 'down-center':\n      return 'arrow arrow-bottom arrow-center';\n    case 'down-left':\n      return 'arrow arrow-bottom arrow-left';\n    case 'down-right':\n      return 'arrow arrow-bottom arrow-right';\n    case 'up-center':\n      return 'arrow arrow-center';\n    case 'up-right':\n      return 'arrow arrow-right';\n    case 'up-left':\n    default:\n      return 'arrow';\n  }\n}\n"],"names":["AlertArrowPosition","resolveType","type","Alert","arrow","action","children","className","dismissible","icon","onDismiss","message","size","title","variant","useEffect","undefined","logActionRequired","resolvedType","shouldFire","setShouldFire","useState","closeButtonReference","useRef","_jsxs","clsx","alertArrowClassNames","onTouchStart","onTouchEnd","event","href","target","Node","current","contains","window","top","open","location","assign","onTouchMove","_jsx","StatusIcon","Size","LARGE","sentiment","role","Sentiment","NEGATIVE","Title","Typography","TITLE_BODY","Body","as","BODY_LARGE","InlineMarkdown","Action","CloseButton","ref","onClick"],"mappings":"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"}
+{"version":3,"file":"Alert.js","sources":["../../src/alert/Alert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useState, useRef, useEffect } from 'react';\n\nimport Body from '../body/Body';\nimport { Sentiment, Size, Typography, Variant } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport StatusIcon from '../statusIcon';\nimport Title from '../title/Title';\nimport { logActionRequired } from '../utilities';\n\nimport InlineMarkdown from './inlineMarkdown';\nimport { Action } from '../common/action/Action';\n\nexport type AlertAction = {\n  'aria-label'?: string;\n  href?: string;\n  target?: string;\n  text: React.ReactNode;\n  onClick?: () => void;\n};\n\n/** @deprecated Use `\"top\" | \"bottom\"` instead. */\ntype AlertTypeDeprecated = `${Sentiment.SUCCESS | Sentiment.INFO | Sentiment.ERROR}`;\ntype AlertTypeResolved = `${\n  | Sentiment.POSITIVE\n  | Sentiment.NEUTRAL\n  | Sentiment.WARNING\n  | Sentiment.NEGATIVE}`;\nexport type AlertType = AlertTypeResolved | AlertTypeDeprecated;\n\nexport enum AlertArrowPosition {\n  TOP_LEFT = 'up-left',\n  TOP = 'up-center',\n  TOP_RIGHT = 'up-right',\n  BOTTOM_LEFT = 'down-left',\n  BOTTOM = 'down-center',\n  BOTTOM_RIGHT = 'down-right',\n}\n\nexport interface AlertProps {\n  /** An optional call to action to sit under the main body of the alert. If your label is short, use aria-label to provide more context */\n  action?: AlertAction;\n  className?: string;\n  /** An optional icon. If not provided, we will default the icon to something appropriate for the type */\n  icon?: React.ReactNode;\n  /** Title for the alert component */\n  title?: string;\n  /** The main body of the alert. Accepts plain text and bold words specified with **double stars */\n  message?: string;\n  /** The presence of the onDismiss handler will trigger the visibility of the close button */\n  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n  /** The type dictates which icon and colour will be used */\n  type?: AlertType;\n  variant?: `${Variant}`;\n  /** Controls rendering of the Alert component. <br /> Toggle this prop instead using conditional rendering and logical AND (&&) operator, to make the component work with screen readers. */\n  active?: boolean;\n  /** @deprecated Use `InlineAlert` instead. */\n  arrow?: `${AlertArrowPosition}`;\n  /** @deprecated Use `message` instead. Be aware `message` only accepts plain text or text with **bold** markdown. */\n  children?: React.ReactNode;\n  /** @deprecated Use `onDismiss` instead. */\n  dismissible?: boolean;\n  /** @deprecated Alert component doesn't support `size` anymore, please remove this prop. */\n  size?: `${Size}`;\n}\n\nfunction resolveType(type: AlertType): AlertTypeResolved {\n  switch (type) {\n    case 'success':\n      return 'positive';\n    case 'info':\n      return 'neutral';\n    case 'error':\n      return 'negative';\n    default:\n      return type;\n  }\n}\n\nexport default function Alert({\n  arrow,\n  action,\n  children,\n  className,\n  dismissible,\n  icon,\n  onDismiss,\n  message,\n  size,\n  title,\n  type = 'neutral',\n  variant = 'desktop',\n  active = true,\n}: AlertProps) {\n  useEffect(() => {\n    if (arrow !== undefined) {\n      logActionRequired(\n        \"Alert component doesn't support 'arrow' anymore, use 'InlineAlert' instead.\",\n      );\n    }\n  }, [arrow]);\n\n  useEffect(() => {\n    if (children !== undefined) {\n      logActionRequired(\n        \"Alert component doesn't support 'children' anymore, use 'message' instead.\",\n      );\n    }\n  }, [children]);\n\n  useEffect(() => {\n    if (dismissible !== undefined) {\n      logActionRequired(\n        \"Alert component doesn't support 'dismissible' anymore, use 'onDismiss' instead.\",\n      );\n    }\n  }, [dismissible]);\n\n  useEffect(() => {\n    if (size !== undefined) {\n      logActionRequired(\"Alert component doesn't support 'size' anymore, please remove that prop.\");\n    }\n  }, [size]);\n\n  const resolvedType = resolveType(type);\n  useEffect(() => {\n    if (resolvedType !== type) {\n      logActionRequired(\n        `Alert component has deprecated '${type}' value for the 'type' prop. Please use '${resolvedType}' instead.`,\n      );\n    }\n  }, [resolvedType, type]);\n\n  const [shouldFire, setShouldFire] = useState(false);\n\n  const closeButtonReference = useRef<HTMLButtonElement>(null);\n\n  return (\n    <div role={resolvedType === Sentiment.NEGATIVE ? 'alert' : 'status'}>\n      {active && (\n        <div\n          className={clsx(\n            'alert d-flex',\n            `alert-${resolvedType}`,\n            arrow != null && alertArrowClassNames(arrow),\n            className,\n          )}\n          data-testid=\"alert\"\n          onTouchStart={() => setShouldFire(true)}\n          onTouchEnd={(event) => {\n            if (\n              shouldFire &&\n              action?.href &&\n              // Check if current event is triggered from closeButton\n              event.target instanceof Node &&\n              closeButtonReference.current &&\n              !closeButtonReference.current.contains(event.target)\n            ) {\n              if (action.target === '_blank') {\n                window.top?.open(action.href);\n              } else {\n                window.top?.location.assign(action.href);\n              }\n            }\n            setShouldFire(false);\n          }}\n          onTouchMove={() => setShouldFire(false)}\n        >\n          <div\n            className={clsx('alert__content', 'd-flex', 'flex-grow-1', variant)}\n            data-testid={variant}\n          >\n            {icon ? (\n              <div className=\"alert__icon\">{icon}</div>\n            ) : (\n              <StatusIcon size={Size.LARGE} sentiment={resolvedType} />\n            )}\n            <div className=\"alert__message\">\n              <div>\n                {title && (\n                  <Title className=\"m-b-1\" type={Typography.TITLE_BODY}>\n                    {title}\n                  </Title>\n                )}\n                <Body as=\"span\" className=\"d-block\" type={Typography.BODY_LARGE}>\n                  {children || <InlineMarkdown>{message}</InlineMarkdown>}\n                </Body>\n              </div>\n              {action && <Action action={action} className=\"m-t-1\" />}\n            </div>\n          </div>\n          {onDismiss && (\n            <CloseButton ref={closeButtonReference} className=\"m-l-2\" onClick={onDismiss} />\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction alertArrowClassNames(arrow: `${AlertArrowPosition}`) {\n  switch (arrow) {\n    case 'down-center':\n      return 'arrow arrow-bottom arrow-center';\n    case 'down-left':\n      return 'arrow arrow-bottom arrow-left';\n    case 'down-right':\n      return 'arrow arrow-bottom arrow-right';\n    case 'up-center':\n      return 'arrow arrow-center';\n    case 'up-right':\n      return 'arrow arrow-right';\n    case 'up-left':\n    default:\n      return 'arrow';\n  }\n}\n"],"names":["AlertArrowPosition","resolveType","type","Alert","arrow","action","children","className","dismissible","icon","onDismiss","message","size","title","variant","active","useEffect","undefined","logActionRequired","resolvedType","shouldFire","setShouldFire","useState","closeButtonReference","useRef","_jsx","role","Sentiment","NEGATIVE","_jsxs","clsx","alertArrowClassNames","onTouchStart","onTouchEnd","event","href","target","Node","current","contains","window","top","open","location","assign","onTouchMove","StatusIcon","Size","LARGE","sentiment","Title","Typography","TITLE_BODY","Body","as","BODY_LARGE","InlineMarkdown","Action","CloseButton","ref","onClick"],"mappings":"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"}

package/build/alert/Alert.mjs

@@ -6,7 +6,7 @@ import StatusIcon from '../statusIcon/StatusIcon.mjs';
 import Title from '../title/Title.mjs';
 import InlineMarkdown from './inlineMarkdown/InlineMarkdown.mjs';
 import { Action } from '../common/action/Action.mjs';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { logActionRequired } from '../utilities/logActionRequired.mjs';
 import { Sentiment } from '../common/propsValues/sentiment.mjs';
 import { Size } from '../common/propsValues/size.mjs';
@@ -45,7 +45,8 @@ function Alert({
   size,
   title,
   type = 'neutral',
-  variant = 'desktop'
+  variant = 'desktop',
+  active = true
 }) {
   useEffect(() => {
     if (arrow !== undefined) {
@@ -75,58 +76,60 @@ function Alert({
   }, [resolvedType, type]);
   const [shouldFire, setShouldFire] = useState(false);
   const closeButtonReference = useRef(null);
-  return /*#__PURE__*/jsxs("div", {
-    className: clsx('alert d-flex', `alert-${resolvedType}`, arrow != null && alertArrowClassNames(arrow), className),
-    "data-testid": "alert",
-    onTouchStart: () => setShouldFire(true),
-    onTouchEnd: event => {
-      if (shouldFire && action?.href &&
-      // Check if current event is triggered from closeButton
-      event.target instanceof Node && closeButtonReference.current && !closeButtonReference.current.contains(event.target)) {
-        if (action.target === '_blank') {
-          window.top?.open(action.href);
-        } else {
-          window.top?.location.assign(action.href);
+  return /*#__PURE__*/jsx("div", {
+    role: resolvedType === Sentiment.NEGATIVE ? 'alert' : 'status',
+    children: active && /*#__PURE__*/jsxs("div", {
+      className: clsx('alert d-flex', `alert-${resolvedType}`, arrow != null && alertArrowClassNames(arrow), className),
+      "data-testid": "alert",
+      onTouchStart: () => setShouldFire(true),
+      onTouchEnd: event => {
+        if (shouldFire && action?.href &&
+        // Check if current event is triggered from closeButton
+        event.target instanceof Node && closeButtonReference.current && !closeButtonReference.current.contains(event.target)) {
+          if (action.target === '_blank') {
+            window.top?.open(action.href);
+          } else {
+            window.top?.location.assign(action.href);
+          }
         }
-      }
-      setShouldFire(false);
-    },
-    onTouchMove: () => setShouldFire(false),
-    children: [/*#__PURE__*/jsxs("div", {
-      className: clsx('alert__content', 'd-flex', 'flex-grow-1', variant),
-      "data-testid": variant,
-      children: [icon ? /*#__PURE__*/jsx("div", {
-        className: "alert__icon",
-        children: icon
-      }) : /*#__PURE__*/jsx(StatusIcon, {
-        size: Size.LARGE,
-        sentiment: resolvedType
-      }), /*#__PURE__*/jsxs("div", {
-        className: "alert__message",
-        children: [/*#__PURE__*/jsxs("div", {
-          role: Sentiment.NEGATIVE === resolvedType ? 'alert' : 'status',
-          children: [title && /*#__PURE__*/jsx(Title, {
-            className: "m-b-1",
-            type: Typography.TITLE_BODY,
-            children: title
-          }), /*#__PURE__*/jsx(Body, {
-            as: "span",
-            className: "d-block",
-            type: Typography.BODY_LARGE,
-            children: children || /*#__PURE__*/jsx(InlineMarkdown, {
-              children: message
-            })
+        setShouldFire(false);
+      },
+      onTouchMove: () => setShouldFire(false),
+      children: [/*#__PURE__*/jsxs("div", {
+        className: clsx('alert__content', 'd-flex', 'flex-grow-1', variant),
+        "data-testid": variant,
+        children: [icon ? /*#__PURE__*/jsx("div", {
+          className: "alert__icon",
+          children: icon
+        }) : /*#__PURE__*/jsx(StatusIcon, {
+          size: Size.LARGE,
+          sentiment: resolvedType
+        }), /*#__PURE__*/jsxs("div", {
+          className: "alert__message",
+          children: [/*#__PURE__*/jsxs("div", {
+            children: [title && /*#__PURE__*/jsx(Title, {
+              className: "m-b-1",
+              type: Typography.TITLE_BODY,
+              children: title
+            }), /*#__PURE__*/jsx(Body, {
+              as: "span",
+              className: "d-block",
+              type: Typography.BODY_LARGE,
+              children: children || /*#__PURE__*/jsx(InlineMarkdown, {
+                children: message
+              })
+            })]
+          }), action && /*#__PURE__*/jsx(Action, {
+            action: action,
+            className: "m-t-1"
           })]
-        }), action && /*#__PURE__*/jsx(Action, {
-          action: action,
-          className: "m-t-1"
         })]
+      }), onDismiss && /*#__PURE__*/jsx(CloseButton, {
+        ref: closeButtonReference,
+        className: "m-l-2",
+        onClick: onDismiss
       })]
-    }), onDismiss && /*#__PURE__*/jsx(CloseButton, {
-      ref: closeButtonReference,
-      className: "m-l-2",
-      onClick: onDismiss
-    })]
+    })
   });
 }
 function alertArrowClassNames(arrow) {

package/build/alert/Alert.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.mjs","sources":["../../src/alert/Alert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useState, useRef, useEffect } from 'react';\n\nimport Body from '../body/Body';\nimport { Sentiment, Size, Typography, Variant } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport StatusIcon from '../statusIcon';\nimport Title from '../title/Title';\nimport { logActionRequired } from '../utilities';\n\nimport InlineMarkdown from './inlineMarkdown';\nimport { Action } from '../common/action/Action';\n\nexport type AlertAction = {\n  'aria-label'?: string;\n  href?: string;\n  target?: string;\n  text: React.ReactNode;\n  onClick?: () => void;\n};\n\n/** @deprecated Use `\"top\" | \"bottom\"` instead. */\ntype AlertTypeDeprecated = `${Sentiment.SUCCESS | Sentiment.INFO | Sentiment.ERROR}`;\ntype AlertTypeResolved = `${\n  | Sentiment.POSITIVE\n  | Sentiment.NEUTRAL\n  | Sentiment.WARNING\n  | Sentiment.NEGATIVE}`;\nexport type AlertType = AlertTypeResolved | AlertTypeDeprecated;\n\nexport enum AlertArrowPosition {\n  TOP_LEFT = 'up-left',\n  TOP = 'up-center',\n  TOP_RIGHT = 'up-right',\n  BOTTOM_LEFT = 'down-left',\n  BOTTOM = 'down-center',\n  BOTTOM_RIGHT = 'down-right',\n}\n\nexport interface AlertProps {\n  /** An optional call to action to sit under the main body of the alert. If your label is short, use aria-label to provide more context */\n  action?: AlertAction;\n  className?: string;\n  /** An optional icon. If not provided, we will default the icon to something appropriate for the type */\n  icon?: React.ReactNode;\n  /** Title for the alert component */\n  title?: string;\n  /** The main body of the alert. Accepts plain text and bold words specified with **double stars */\n  message?: string;\n  /** The presence of the onDismiss handler will trigger the visibility of the close button */\n  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n  /** The type dictates which icon and colour will be used */\n  type?: AlertType;\n  variant?: `${Variant}`;\n  /** @deprecated Use `InlineAlert` instead. */\n  arrow?: `${AlertArrowPosition}`;\n  /** @deprecated Use `message` instead. Be aware `message` only accepts plain text or text with **bold** markdown. */\n  children?: React.ReactNode;\n  /** @deprecated Use `onDismiss` instead. */\n  dismissible?: boolean;\n  /** @deprecated Alert component doesn't support `size` anymore, please remove this prop. */\n  size?: `${Size}`;\n}\n\nfunction resolveType(type: AlertType): AlertTypeResolved {\n  switch (type) {\n    case 'success':\n      return 'positive';\n    case 'info':\n      return 'neutral';\n    case 'error':\n      return 'negative';\n    default:\n      return type;\n  }\n}\n\nexport default function Alert({\n  arrow,\n  action,\n  children,\n  className,\n  dismissible,\n  icon,\n  onDismiss,\n  message,\n  size,\n  title,\n  type = 'neutral',\n  variant = 'desktop',\n}: AlertProps) {\n  useEffect(() => {\n    if (arrow !== undefined) {\n      logActionRequired(\n        \"Alert component doesn't support 'arrow' anymore, use 'InlineAlert' instead.\",\n      );\n    }\n  }, [arrow]);\n\n  useEffect(() => {\n    if (children !== undefined) {\n      logActionRequired(\n        \"Alert component doesn't support 'children' anymore, use 'message' instead.\",\n      );\n    }\n  }, [children]);\n\n  useEffect(() => {\n    if (dismissible !== undefined) {\n      logActionRequired(\n        \"Alert component doesn't support 'dismissible' anymore, use 'onDismiss' instead.\",\n      );\n    }\n  }, [dismissible]);\n\n  useEffect(() => {\n    if (size !== undefined) {\n      logActionRequired(\"Alert component doesn't support 'size' anymore, please remove that prop.\");\n    }\n  }, [size]);\n\n  const resolvedType = resolveType(type);\n  useEffect(() => {\n    if (resolvedType !== type) {\n      logActionRequired(\n        `Alert component has deprecated '${type}' value for the 'type' prop. Please use '${resolvedType}' instead.`,\n      );\n    }\n  }, [resolvedType, type]);\n\n  const [shouldFire, setShouldFire] = useState(false);\n\n  const closeButtonReference = useRef<HTMLButtonElement>(null);\n\n  return (\n    <div\n      className={clsx(\n        'alert d-flex',\n        `alert-${resolvedType}`,\n        arrow != null && alertArrowClassNames(arrow),\n        className,\n      )}\n      data-testid=\"alert\"\n      onTouchStart={() => setShouldFire(true)}\n      onTouchEnd={(event) => {\n        if (\n          shouldFire &&\n          action?.href &&\n          // Check if current event is triggered from closeButton\n          event.target instanceof Node &&\n          closeButtonReference.current &&\n          !closeButtonReference.current.contains(event.target)\n        ) {\n          if (action.target === '_blank') {\n            window.top?.open(action.href);\n          } else {\n            window.top?.location.assign(action.href);\n          }\n        }\n        setShouldFire(false);\n      }}\n      onTouchMove={() => setShouldFire(false)}\n    >\n      <div\n        className={clsx('alert__content', 'd-flex', 'flex-grow-1', variant)}\n        data-testid={variant}\n      >\n        {icon ? (\n          <div className=\"alert__icon\">{icon}</div>\n        ) : (\n          <StatusIcon size={Size.LARGE} sentiment={resolvedType} />\n        )}\n        <div className=\"alert__message\">\n          <div role={Sentiment.NEGATIVE === resolvedType ? 'alert' : 'status'}>\n            {title && (\n              <Title className=\"m-b-1\" type={Typography.TITLE_BODY}>\n                {title}\n              </Title>\n            )}\n            <Body as=\"span\" className=\"d-block\" type={Typography.BODY_LARGE}>\n              {children || <InlineMarkdown>{message}</InlineMarkdown>}\n            </Body>\n          </div>\n          {action && <Action action={action} className=\"m-t-1\" />}\n        </div>\n      </div>\n      {onDismiss && (\n        <CloseButton ref={closeButtonReference} className=\"m-l-2\" onClick={onDismiss} />\n      )}\n    </div>\n  );\n}\n\nfunction alertArrowClassNames(arrow: `${AlertArrowPosition}`) {\n  switch (arrow) {\n    case 'down-center':\n      return 'arrow arrow-bottom arrow-center';\n    case 'down-left':\n      return 'arrow arrow-bottom arrow-left';\n    case 'down-right':\n      return 'arrow arrow-bottom arrow-right';\n    case 'up-center':\n      return 'arrow arrow-center';\n    case 'up-right':\n      return 'arrow arrow-right';\n    case 'up-left':\n    default:\n      return 'arrow';\n  }\n}\n"],"names":["AlertArrowPosition","resolveType","type","Alert","arrow","action","children","className","dismissible","icon","onDismiss","message","size","title","variant","useEffect","undefined","logActionRequired","resolvedType","shouldFire","setShouldFire","useState","closeButtonReference","useRef","_jsxs","clsx","alertArrowClassNames","onTouchStart","onTouchEnd","event","href","target","Node","current","contains","window","top","open","location","assign","onTouchMove","_jsx","StatusIcon","Size","LARGE","sentiment","role","Sentiment","NEGATIVE","Title","Typography","TITLE_BODY","Body","as","BODY_LARGE","InlineMarkdown","Action","CloseButton","ref","onClick"],"mappings":"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"}
+{"version":3,"file":"Alert.mjs","sources":["../../src/alert/Alert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useState, useRef, useEffect } from 'react';\n\nimport Body from '../body/Body';\nimport { Sentiment, Size, Typography, Variant } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport StatusIcon from '../statusIcon';\nimport Title from '../title/Title';\nimport { logActionRequired } from '../utilities';\n\nimport InlineMarkdown from './inlineMarkdown';\nimport { Action } from '../common/action/Action';\n\nexport type AlertAction = {\n  'aria-label'?: string;\n  href?: string;\n  target?: string;\n  text: React.ReactNode;\n  onClick?: () => void;\n};\n\n/** @deprecated Use `\"top\" | \"bottom\"` instead. */\ntype AlertTypeDeprecated = `${Sentiment.SUCCESS | Sentiment.INFO | Sentiment.ERROR}`;\ntype AlertTypeResolved = `${\n  | Sentiment.POSITIVE\n  | Sentiment.NEUTRAL\n  | Sentiment.WARNING\n  | Sentiment.NEGATIVE}`;\nexport type AlertType = AlertTypeResolved | AlertTypeDeprecated;\n\nexport enum AlertArrowPosition {\n  TOP_LEFT = 'up-left',\n  TOP = 'up-center',\n  TOP_RIGHT = 'up-right',\n  BOTTOM_LEFT = 'down-left',\n  BOTTOM = 'down-center',\n  BOTTOM_RIGHT = 'down-right',\n}\n\nexport interface AlertProps {\n  /** An optional call to action to sit under the main body of the alert. If your label is short, use aria-label to provide more context */\n  action?: AlertAction;\n  className?: string;\n  /** An optional icon. If not provided, we will default the icon to something appropriate for the type */\n  icon?: React.ReactNode;\n  /** Title for the alert component */\n  title?: string;\n  /** The main body of the alert. Accepts plain text and bold words specified with **double stars */\n  message?: string;\n  /** The presence of the onDismiss handler will trigger the visibility of the close button */\n  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n  /** The type dictates which icon and colour will be used */\n  type?: AlertType;\n  variant?: `${Variant}`;\n  /** Controls rendering of the Alert component. <br /> Toggle this prop instead using conditional rendering and logical AND (&&) operator, to make the component work with screen readers. */\n  active?: boolean;\n  /** @deprecated Use `InlineAlert` instead. */\n  arrow?: `${AlertArrowPosition}`;\n  /** @deprecated Use `message` instead. Be aware `message` only accepts plain text or text with **bold** markdown. */\n  children?: React.ReactNode;\n  /** @deprecated Use `onDismiss` instead. */\n  dismissible?: boolean;\n  /** @deprecated Alert component doesn't support `size` anymore, please remove this prop. */\n  size?: `${Size}`;\n}\n\nfunction resolveType(type: AlertType): AlertTypeResolved {\n  switch (type) {\n    case 'success':\n      return 'positive';\n    case 'info':\n      return 'neutral';\n    case 'error':\n      return 'negative';\n    default:\n      return type;\n  }\n}\n\nexport default function Alert({\n  arrow,\n  action,\n  children,\n  className,\n  dismissible,\n  icon,\n  onDismiss,\n  message,\n  size,\n  title,\n  type = 'neutral',\n  variant = 'desktop',\n  active = true,\n}: AlertProps) {\n  useEffect(() => {\n    if (arrow !== undefined) {\n      logActionRequired(\n        \"Alert component doesn't support 'arrow' anymore, use 'InlineAlert' instead.\",\n      );\n    }\n  }, [arrow]);\n\n  useEffect(() => {\n    if (children !== undefined) {\n      logActionRequired(\n        \"Alert component doesn't support 'children' anymore, use 'message' instead.\",\n      );\n    }\n  }, [children]);\n\n  useEffect(() => {\n    if (dismissible !== undefined) {\n      logActionRequired(\n        \"Alert component doesn't support 'dismissible' anymore, use 'onDismiss' instead.\",\n      );\n    }\n  }, [dismissible]);\n\n  useEffect(() => {\n    if (size !== undefined) {\n      logActionRequired(\"Alert component doesn't support 'size' anymore, please remove that prop.\");\n    }\n  }, [size]);\n\n  const resolvedType = resolveType(type);\n  useEffect(() => {\n    if (resolvedType !== type) {\n      logActionRequired(\n        `Alert component has deprecated '${type}' value for the 'type' prop. Please use '${resolvedType}' instead.`,\n      );\n    }\n  }, [resolvedType, type]);\n\n  const [shouldFire, setShouldFire] = useState(false);\n\n  const closeButtonReference = useRef<HTMLButtonElement>(null);\n\n  return (\n    <div role={resolvedType === Sentiment.NEGATIVE ? 'alert' : 'status'}>\n      {active && (\n        <div\n          className={clsx(\n            'alert d-flex',\n            `alert-${resolvedType}`,\n            arrow != null && alertArrowClassNames(arrow),\n            className,\n          )}\n          data-testid=\"alert\"\n          onTouchStart={() => setShouldFire(true)}\n          onTouchEnd={(event) => {\n            if (\n              shouldFire &&\n              action?.href &&\n              // Check if current event is triggered from closeButton\n              event.target instanceof Node &&\n              closeButtonReference.current &&\n              !closeButtonReference.current.contains(event.target)\n            ) {\n              if (action.target === '_blank') {\n                window.top?.open(action.href);\n              } else {\n                window.top?.location.assign(action.href);\n              }\n            }\n            setShouldFire(false);\n          }}\n          onTouchMove={() => setShouldFire(false)}\n        >\n          <div\n            className={clsx('alert__content', 'd-flex', 'flex-grow-1', variant)}\n            data-testid={variant}\n          >\n            {icon ? (\n              <div className=\"alert__icon\">{icon}</div>\n            ) : (\n              <StatusIcon size={Size.LARGE} sentiment={resolvedType} />\n            )}\n            <div className=\"alert__message\">\n              <div>\n                {title && (\n                  <Title className=\"m-b-1\" type={Typography.TITLE_BODY}>\n                    {title}\n                  </Title>\n                )}\n                <Body as=\"span\" className=\"d-block\" type={Typography.BODY_LARGE}>\n                  {children || <InlineMarkdown>{message}</InlineMarkdown>}\n                </Body>\n              </div>\n              {action && <Action action={action} className=\"m-t-1\" />}\n            </div>\n          </div>\n          {onDismiss && (\n            <CloseButton ref={closeButtonReference} className=\"m-l-2\" onClick={onDismiss} />\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction alertArrowClassNames(arrow: `${AlertArrowPosition}`) {\n  switch (arrow) {\n    case 'down-center':\n      return 'arrow arrow-bottom arrow-center';\n    case 'down-left':\n      return 'arrow arrow-bottom arrow-left';\n    case 'down-right':\n      return 'arrow arrow-bottom arrow-right';\n    case 'up-center':\n      return 'arrow arrow-center';\n    case 'up-right':\n      return 'arrow arrow-right';\n    case 'up-left':\n    default:\n      return 'arrow';\n  }\n}\n"],"names":["AlertArrowPosition","resolveType","type","Alert","arrow","action","children","className","dismissible","icon","onDismiss","message","size","title","variant","active","useEffect","undefined","logActionRequired","resolvedType","shouldFire","setShouldFire","useState","closeButtonReference","useRef","_jsx","role","Sentiment","NEGATIVE","_jsxs","clsx","alertArrowClassNames","onTouchStart","onTouchEnd","event","href","target","Node","current","contains","window","top","open","location","assign","onTouchMove","StatusIcon","Size","LARGE","sentiment","Title","Typography","TITLE_BODY","Body","as","BODY_LARGE","InlineMarkdown","Action","CloseButton","ref","onClick"],"mappings":"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"}

package/build/types/alert/Alert.d.ts

@@ -33,6 +33,8 @@ export interface AlertProps {
     /** The type dictates which icon and colour will be used */
     type?: AlertType;
     variant?: `${Variant}`;
+    /** Controls rendering of the Alert component. <br /> Toggle this prop instead using conditional rendering and logical AND (&&) operator, to make the component work with screen readers. */
+    active?: boolean;
     /** @deprecated Use `InlineAlert` instead. */
     arrow?: `${AlertArrowPosition}`;
     /** @deprecated Use `message` instead. Be aware `message` only accepts plain text or text with **bold** markdown. */
@@ -42,6 +44,6 @@ export interface AlertProps {
     /** @deprecated Alert component doesn't support `size` anymore, please remove this prop. */
     size?: `${Size}`;
 }
-export default function Alert({ arrow, action, children, className, dismissible, icon, onDismiss, message, size, title, type, variant, }: AlertProps): import("react").JSX.Element;
+export default function Alert({ arrow, action, children, className, dismissible, icon, onDismiss, message, size, title, type, variant, active, }: AlertProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=Alert.d.ts.map

package/build/types/alert/Alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/alert/Alert.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAc,OAAO,EAAE,MAAM,WAAW,CAAC;AASjE,MAAM,MAAM,WAAW,GAAG;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,kDAAkD;AAClD,KAAK,mBAAmB,GAAG,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,IAAI,GAAG,SAAS,CAAC,KAAK,EAAE,CAAC;AACrF,KAAK,iBAAiB,GAAG,GACrB,SAAS,CAAC,QAAQ,GAClB,SAAS,CAAC,OAAO,GACjB,SAAS,CAAC,OAAO,GACjB,SAAS,CAAC,QAAQ,EAAE,CAAC;AACzB,MAAM,MAAM,SAAS,GAAG,iBAAiB,GAAG,mBAAmB,CAAC;AAEhE,oBAAY,kBAAkB;IAC5B,QAAQ,YAAY;IACpB,GAAG,cAAc;IACjB,SAAS,aAAa;IACtB,WAAW,cAAc;IACzB,MAAM,gBAAgB;IACtB,YAAY,eAAe;CAC5B;AAED,MAAM,WAAW,UAAU;IACzB,yIAAyI;IACzI,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wGAAwG;IACxG,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kGAAkG;IAClG,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACvD,2DAA2D;IAC3D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC;IACvB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAChC,oHAAoH;IACpH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,2CAA2C;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC;CAClB;AAeD,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,WAAW,EACX,IAAI,EACJ,SAAS,EACT,OAAO,EACP,IAAI,EACJ,KAAK,EACL,IAAgB,EAChB,OAAmB,GACpB,EAAE,UAAU,+BAqGZ"}
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/alert/Alert.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAc,OAAO,EAAE,MAAM,WAAW,CAAC;AASjE,MAAM,MAAM,WAAW,GAAG;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,kDAAkD;AAClD,KAAK,mBAAmB,GAAG,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,IAAI,GAAG,SAAS,CAAC,KAAK,EAAE,CAAC;AACrF,KAAK,iBAAiB,GAAG,GACrB,SAAS,CAAC,QAAQ,GAClB,SAAS,CAAC,OAAO,GACjB,SAAS,CAAC,OAAO,GACjB,SAAS,CAAC,QAAQ,EAAE,CAAC;AACzB,MAAM,MAAM,SAAS,GAAG,iBAAiB,GAAG,mBAAmB,CAAC;AAEhE,oBAAY,kBAAkB;IAC5B,QAAQ,YAAY;IACpB,GAAG,cAAc;IACjB,SAAS,aAAa;IACtB,WAAW,cAAc;IACzB,MAAM,gBAAgB;IACtB,YAAY,eAAe;CAC5B;AAED,MAAM,WAAW,UAAU;IACzB,yIAAyI;IACzI,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wGAAwG;IACxG,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kGAAkG;IAClG,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACvD,2DAA2D;IAC3D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC;IACvB,4LAA4L;IAC5L,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAChC,oHAAoH;IACpH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,2CAA2C;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC;CAClB;AAeD,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,WAAW,EACX,IAAI,EACJ,SAAS,EACT,OAAO,EACP,IAAI,EACJ,KAAK,EACL,IAAgB,EAChB,OAAmB,EACnB,MAAa,GACd,EAAE,UAAU,+BAyGZ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.71.8",
+  "version": "46.72.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -91,9 +91,9 @@
     "rollup": "^4.18.1",
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
+    "@transferwise/less-config": "3.1.0",
     "@transferwise/neptune-css": "14.19.1",
-    "@wise/components-theming": "1.6.1",
-    "@transferwise/less-config": "3.1.0"
+    "@wise/components-theming": "1.6.1"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.13.1",

package/src/alert/Alert.spec.tsx

@@ -467,4 +467,24 @@ describe('Alert', () => {
       expect(screen.getByTestId('status-icon')).toBeInTheDocument();
     });
   });
+
+  describe('`active` prop', () => {
+    it('should render wrapper and alert if `active` is unset', () => {
+      render(<Alert message={message} />);
+      expect(screen.getByRole('status')).toBeInTheDocument();
+      expect(screen.getByText(message)).toBeInTheDocument();
+    });
+
+    it('should render wrapper and alert if `active={false}', () => {
+      render(<Alert message={message} active={false} />);
+      expect(screen.getByRole('status')).toBeInTheDocument();
+      expect(screen.queryByText(message)).not.toBeInTheDocument();
+    });
+
+    it('should render wrapper and alert if `active` is set', () => {
+      render(<Alert message={message} />);
+      expect(screen.getByRole('status')).toBeInTheDocument();
+      expect(screen.getByText(message)).toBeInTheDocument();
+    });
+  });
 });

package/src/alert/Alert.story.tsx

@@ -1,10 +1,10 @@
-/* eslint-disable no-alert */
+import { useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { ClockBorderless } from '@transferwise/icons';
 
 import { Sentiment } from '../common';
-
+import { Button } from '..';
 import Alert, { AlertArrowPosition } from './Alert';
 
 export default {
@@ -12,6 +12,7 @@ export default {
   title: 'Feedback/Alert',
   args: {
     type: Sentiment.POSITIVE,
+    active: true,
     message:
       'Payments sent to your bank details **today** might not arrive in time for the holidays.',
   },
@@ -103,3 +104,50 @@ export const WithTitle: Story = {
     onDismiss: () => {},
   },
 };
+
+/**
+ * For ARIA live region to function correctly with screen readers,
+ * the container with an appropriate ARIA role (in the case of this
+ * component, it's `status` or `alert`) must be rendered first.
+ * Once present in the accessibility tree, its dynamic contents
+ * will be announced correctly.
+ *
+ * Because of that, using logical AND (&&) operator is discouraged
+ * and, instead, engineers should toggle the `active` prop which
+ * provides that logic internally.
+ */
+export const ConditionallyRendered: Story = {
+  render: function Render(args) {
+    const [isActive, setIsActive] = useState(false);
+
+    return (
+      <>
+        <Button htmlType="button" onClick={() => setIsActive((value) => !value)}>
+          Trigger Alert
+        </Button>
+
+        <Alert {...args} active={isActive} className="m-t-5" />
+      </>
+    );
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+function Render (args) {
+  const [isActive, setIsActive] = useState(false);
+
+  return (
+    <>
+      <Button htmlType="button" onClick={() => setIsActive(value => !value)}>
+        Trigger Alert
+      </Button>
+
+      <Alert {...args} active={isActive} className="m-t-5" />
+    </>
+  )
+}`,
+      },
+    },
+  },
+};

package/src/alert/Alert.tsx

@@ -52,6 +52,8 @@ export interface AlertProps {
   /** The type dictates which icon and colour will be used */
   type?: AlertType;
   variant?: `${Variant}`;
+  /** Controls rendering of the Alert component. <br /> Toggle this prop instead using conditional rendering and logical AND (&&) operator, to make the component work with screen readers. */
+  active?: boolean;
   /** @deprecated Use `InlineAlert` instead. */
   arrow?: `${AlertArrowPosition}`;
   /** @deprecated Use `message` instead. Be aware `message` only accepts plain text or text with **bold** markdown. */
@@ -88,6 +90,7 @@ export default function Alert({
   title,
   type = 'neutral',
   variant = 'desktop',
+  active = true,
 }: AlertProps) {
   useEffect(() => {
     if (arrow !== undefined) {
@@ -133,59 +136,63 @@ export default function Alert({
   const closeButtonReference = useRef<HTMLButtonElement>(null);
 
   return (
-    <div
-      className={clsx(
-        'alert d-flex',
-        `alert-${resolvedType}`,
-        arrow != null && alertArrowClassNames(arrow),
-        className,
-      )}
-      data-testid="alert"
-      onTouchStart={() => setShouldFire(true)}
-      onTouchEnd={(event) => {
-        if (
-          shouldFire &&
-          action?.href &&
-          // Check if current event is triggered from closeButton
-          event.target instanceof Node &&
-          closeButtonReference.current &&
-          !closeButtonReference.current.contains(event.target)
-        ) {
-          if (action.target === '_blank') {
-            window.top?.open(action.href);
-          } else {
-            window.top?.location.assign(action.href);
-          }
-        }
-        setShouldFire(false);
-      }}
-      onTouchMove={() => setShouldFire(false)}
-    >
-      <div
-        className={clsx('alert__content', 'd-flex', 'flex-grow-1', variant)}
-        data-testid={variant}
-      >
-        {icon ? (
-          <div className="alert__icon">{icon}</div>
-        ) : (
-          <StatusIcon size={Size.LARGE} sentiment={resolvedType} />
-        )}
-        <div className="alert__message">
-          <div role={Sentiment.NEGATIVE === resolvedType ? 'alert' : 'status'}>
-            {title && (
-              <Title className="m-b-1" type={Typography.TITLE_BODY}>
-                {title}
-              </Title>
+    <div role={resolvedType === Sentiment.NEGATIVE ? 'alert' : 'status'}>
+      {active && (
+        <div
+          className={clsx(
+            'alert d-flex',
+            `alert-${resolvedType}`,
+            arrow != null && alertArrowClassNames(arrow),
+            className,
+          )}
+          data-testid="alert"
+          onTouchStart={() => setShouldFire(true)}
+          onTouchEnd={(event) => {
+            if (
+              shouldFire &&
+              action?.href &&
+              // Check if current event is triggered from closeButton
+              event.target instanceof Node &&
+              closeButtonReference.current &&
+              !closeButtonReference.current.contains(event.target)
+            ) {
+              if (action.target === '_blank') {
+                window.top?.open(action.href);
+              } else {
+                window.top?.location.assign(action.href);
+              }
+            }
+            setShouldFire(false);
+          }}
+          onTouchMove={() => setShouldFire(false)}
+        >
+          <div
+            className={clsx('alert__content', 'd-flex', 'flex-grow-1', variant)}
+            data-testid={variant}
+          >
+            {icon ? (
+              <div className="alert__icon">{icon}</div>
+            ) : (
+              <StatusIcon size={Size.LARGE} sentiment={resolvedType} />
             )}
-            <Body as="span" className="d-block" type={Typography.BODY_LARGE}>
-              {children || <InlineMarkdown>{message}</InlineMarkdown>}
-            </Body>
+            <div className="alert__message">
+              <div>
+                {title && (
+                  <Title className="m-b-1" type={Typography.TITLE_BODY}>
+                    {title}
+                  </Title>
+                )}
+                <Body as="span" className="d-block" type={Typography.BODY_LARGE}>
+                  {children || <InlineMarkdown>{message}</InlineMarkdown>}
+                </Body>
+              </div>
+              {action && <Action action={action} className="m-t-1" />}
+            </div>
           </div>
-          {action && <Action action={action} className="m-t-1" />}
+          {onDismiss && (
+            <CloseButton ref={closeButtonReference} className="m-l-2" onClick={onDismiss} />
+          )}
         </div>
-      </div>
-      {onDismiss && (
-        <CloseButton ref={closeButtonReference} className="m-l-2" onClick={onDismiss} />
       )}
     </div>
   );