@transferwise/components 46.75.0 → 46.77.0

package/build/alert/Alert.js

@@ -39,21 +39,27 @@ function resolveType(type) {
   }
 }
 function Alert({
-  arrow,
   action,
-  children,
   className,
-  dismissible,
   icon,
   statusIconLabel,
   onDismiss,
   message,
-  size: size$1,
   title,
   type = 'neutral',
   variant = 'desktop',
-  active = true
+  arrow,
+  children,
+  size: size$1,
+  dismissible,
+  active = true,
+  dynamicRender
 }) {
+  React.useEffect(() => {
+    if (active !== undefined || dynamicRender !== undefined) {
+      logActionRequired.logActionRequired("Alert component doesn't support `active` or `dynamicRender` anymore, please remove that prop.");
+    }
+  }, [active, dynamicRender]);
   React.useEffect(() => {
     if (arrow !== undefined) {
       logActionRequired.logActionRequired("Alert component doesn't support 'arrow' anymore, use 'InlineAlert' instead.");
@@ -81,18 +87,18 @@ function Alert({
     }
   }, [resolvedType, type]);
   const [shouldFire, setShouldFire] = React.useState();
-  const [shouldShow, setShouldShow] = React.useState();
+  const [shouldAnnounce, setShouldAnnounce] = React.useState(false);
   React.useEffect(() => {
-    if (shouldShow === undefined || !active) {
-      setShouldShow(active);
-    } else {
-      setTimeout(() => setShouldShow(active), constants.WDS_LIVE_REGION_DELAY_MS);
-    }
-  }, [active, shouldShow]);
+    setTimeout(() => {
+      setShouldAnnounce(true);
+    }, constants.WDS_LIVE_REGION_DELAY_MS);
+  }, []);
   const closeButtonReference = React.useRef(null);
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     role: resolvedType === sentiment.Sentiment.NEGATIVE ? 'alert' : 'status',
-    children: shouldShow && /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "wds-alert__liveRegion",
+    children: active && /*#__PURE__*/jsxRuntime.jsxs("div", {
+      "aria-hidden": shouldAnnounce ? undefined : 'true',
       className: clsx.clsx('alert d-flex', `alert-${resolvedType}`, arrow != null && alertArrowClassNames(arrow), className),
       "data-testid": "alert",
       onTouchStart: () => setShouldFire(true),

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 {\n  CloseButton,\n  Sentiment,\n  Size,\n  Typography,\n  Variant,\n  WDS_LIVE_REGION_DELAY_MS,\n} from '../common';\n\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  /**\n   * Override for [StatusIcon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n   * announced by the screen readers\n   * */\n  statusIconLabel?: string;\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  statusIconLabel,\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<boolean>();\n\n  const [shouldShow, setShouldShow] = useState<boolean>();\n  useEffect(() => {\n    if (shouldShow === undefined || !active) {\n      setShouldShow(active);\n    } else {\n      setTimeout(() => setShouldShow(active), WDS_LIVE_REGION_DELAY_MS);\n    }\n  }, [active, shouldShow]);\n\n  const closeButtonReference = useRef<HTMLButtonElement>(null);\n\n  return (\n    <div role={resolvedType === Sentiment.NEGATIVE ? 'alert' : 'status'}>\n      {shouldShow && (\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} iconLabel={statusIconLabel} />\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} variant=\"action-button\" 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","statusIconLabel","onDismiss","message","size","title","variant","active","useEffect","undefined","logActionRequired","resolvedType","shouldFire","setShouldFire","useState","shouldShow","setShouldShow","setTimeout","WDS_LIVE_REGION_DELAY_MS","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","iconLabel","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 {\n  CloseButton,\n  Sentiment,\n  Size,\n  Typography,\n  Variant,\n  WDS_LIVE_REGION_DELAY_MS,\n} from '../common';\n\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  /**\n   * Override for [StatusIcon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n   * announced by the screen readers\n   * */\n  statusIconLabel?: string;\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 Safe to remove */\n  active?: boolean;\n  /** @deprecated Safe to remove */\n  dynamicRender?: 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  action,\n  className,\n  icon,\n  statusIconLabel,\n  onDismiss,\n  message,\n  title,\n  type = 'neutral',\n  variant = 'desktop',\n  arrow,\n  children,\n  size,\n  dismissible,\n  active = true,\n  dynamicRender,\n}: AlertProps) {\n  useEffect(() => {\n    if (active !== undefined || dynamicRender !== undefined) {\n      logActionRequired(\n        \"Alert component doesn't support `active` or `dynamicRender` anymore, please remove that prop.\",\n      );\n    }\n  }, [active, dynamicRender]);\n\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<boolean>();\n\n  const [shouldAnnounce, setShouldAnnounce] = useState<boolean>(false);\n  useEffect(() => {\n    setTimeout(() => {\n      setShouldAnnounce(true);\n    }, WDS_LIVE_REGION_DELAY_MS);\n  }, []);\n\n  const closeButtonReference = useRef<HTMLButtonElement>(null);\n\n  return (\n    <div\n      role={resolvedType === Sentiment.NEGATIVE ? 'alert' : 'status'}\n      className=\"wds-alert__liveRegion\"\n    >\n      {active && (\n        <div\n          aria-hidden={shouldAnnounce ? undefined : 'true'}\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} iconLabel={statusIconLabel} />\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} variant=\"action-button\" 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","action","className","icon","statusIconLabel","onDismiss","message","title","variant","arrow","children","size","dismissible","active","dynamicRender","useEffect","undefined","logActionRequired","resolvedType","shouldFire","setShouldFire","useState","shouldAnnounce","setShouldAnnounce","setTimeout","WDS_LIVE_REGION_DELAY_MS","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","iconLabel","Title","Typography","TITLE_BODY","Body","as","BODY_LARGE","InlineMarkdown","Action","CloseButton","ref","onClick"],"mappings":"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"}

package/build/alert/Alert.mjs

@@ -35,21 +35,27 @@ function resolveType(type) {
   }
 }
 function Alert({
-  arrow,
   action,
-  children,
   className,
-  dismissible,
   icon,
   statusIconLabel,
   onDismiss,
   message,
-  size,
   title,
   type = 'neutral',
   variant = 'desktop',
-  active = true
+  arrow,
+  children,
+  size,
+  dismissible,
+  active = true,
+  dynamicRender
 }) {
+  useEffect(() => {
+    if (active !== undefined || dynamicRender !== undefined) {
+      logActionRequired("Alert component doesn't support `active` or `dynamicRender` anymore, please remove that prop.");
+    }
+  }, [active, dynamicRender]);
   useEffect(() => {
     if (arrow !== undefined) {
       logActionRequired("Alert component doesn't support 'arrow' anymore, use 'InlineAlert' instead.");
@@ -77,18 +83,18 @@ function Alert({
     }
   }, [resolvedType, type]);
   const [shouldFire, setShouldFire] = useState();
-  const [shouldShow, setShouldShow] = useState();
+  const [shouldAnnounce, setShouldAnnounce] = useState(false);
   useEffect(() => {
-    if (shouldShow === undefined || !active) {
-      setShouldShow(active);
-    } else {
-      setTimeout(() => setShouldShow(active), WDS_LIVE_REGION_DELAY_MS);
-    }
-  }, [active, shouldShow]);
+    setTimeout(() => {
+      setShouldAnnounce(true);
+    }, WDS_LIVE_REGION_DELAY_MS);
+  }, []);
   const closeButtonReference = useRef(null);
   return /*#__PURE__*/jsx("div", {
     role: resolvedType === Sentiment.NEGATIVE ? 'alert' : 'status',
-    children: shouldShow && /*#__PURE__*/jsxs("div", {
+    className: "wds-alert__liveRegion",
+    children: active && /*#__PURE__*/jsxs("div", {
+      "aria-hidden": shouldAnnounce ? undefined : 'true',
       className: clsx('alert d-flex', `alert-${resolvedType}`, arrow != null && alertArrowClassNames(arrow), className),
       "data-testid": "alert",
       onTouchStart: () => setShouldFire(true),

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 {\n  CloseButton,\n  Sentiment,\n  Size,\n  Typography,\n  Variant,\n  WDS_LIVE_REGION_DELAY_MS,\n} from '../common';\n\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  /**\n   * Override for [StatusIcon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n   * announced by the screen readers\n   * */\n  statusIconLabel?: string;\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  statusIconLabel,\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<boolean>();\n\n  const [shouldShow, setShouldShow] = useState<boolean>();\n  useEffect(() => {\n    if (shouldShow === undefined || !active) {\n      setShouldShow(active);\n    } else {\n      setTimeout(() => setShouldShow(active), WDS_LIVE_REGION_DELAY_MS);\n    }\n  }, [active, shouldShow]);\n\n  const closeButtonReference = useRef<HTMLButtonElement>(null);\n\n  return (\n    <div role={resolvedType === Sentiment.NEGATIVE ? 'alert' : 'status'}>\n      {shouldShow && (\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} iconLabel={statusIconLabel} />\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} variant=\"action-button\" 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","statusIconLabel","onDismiss","message","size","title","variant","active","useEffect","undefined","logActionRequired","resolvedType","shouldFire","setShouldFire","useState","shouldShow","setShouldShow","setTimeout","WDS_LIVE_REGION_DELAY_MS","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","iconLabel","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 {\n  CloseButton,\n  Sentiment,\n  Size,\n  Typography,\n  Variant,\n  WDS_LIVE_REGION_DELAY_MS,\n} from '../common';\n\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  /**\n   * Override for [StatusIcon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n   * announced by the screen readers\n   * */\n  statusIconLabel?: string;\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 Safe to remove */\n  active?: boolean;\n  /** @deprecated Safe to remove */\n  dynamicRender?: 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  action,\n  className,\n  icon,\n  statusIconLabel,\n  onDismiss,\n  message,\n  title,\n  type = 'neutral',\n  variant = 'desktop',\n  arrow,\n  children,\n  size,\n  dismissible,\n  active = true,\n  dynamicRender,\n}: AlertProps) {\n  useEffect(() => {\n    if (active !== undefined || dynamicRender !== undefined) {\n      logActionRequired(\n        \"Alert component doesn't support `active` or `dynamicRender` anymore, please remove that prop.\",\n      );\n    }\n  }, [active, dynamicRender]);\n\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<boolean>();\n\n  const [shouldAnnounce, setShouldAnnounce] = useState<boolean>(false);\n  useEffect(() => {\n    setTimeout(() => {\n      setShouldAnnounce(true);\n    }, WDS_LIVE_REGION_DELAY_MS);\n  }, []);\n\n  const closeButtonReference = useRef<HTMLButtonElement>(null);\n\n  return (\n    <div\n      role={resolvedType === Sentiment.NEGATIVE ? 'alert' : 'status'}\n      className=\"wds-alert__liveRegion\"\n    >\n      {active && (\n        <div\n          aria-hidden={shouldAnnounce ? undefined : 'true'}\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} iconLabel={statusIconLabel} />\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} variant=\"action-button\" 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","action","className","icon","statusIconLabel","onDismiss","message","title","variant","arrow","children","size","dismissible","active","dynamicRender","useEffect","undefined","logActionRequired","resolvedType","shouldFire","setShouldFire","useState","shouldAnnounce","setShouldAnnounce","setTimeout","WDS_LIVE_REGION_DELAY_MS","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","iconLabel","Title","Typography","TITLE_BODY","Body","as","BODY_LARGE","InlineMarkdown","Action","CloseButton","ref","onClick"],"mappings":"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"}

package/build/main.css

@@ -216,6 +216,9 @@ div.critical-comms .critical-comms-body {
 .np-action-btn:not(:disabled):focus {
   box-shadow: none;
 }
+.wds-alert__liveRegion {
+  display: contents;
+}
 .tw-avatar {
   position: relative;
   -webkit-user-select: none;

package/build/styles/alert/Alert.css

@@ -0,0 +1,3 @@
+.wds-alert__liveRegion {
+  display: contents;
+}

package/build/styles/main.css

@@ -216,6 +216,9 @@ div.critical-comms .critical-comms-body {
 .np-action-btn:not(:disabled):focus {
   box-shadow: none;
 }
+.wds-alert__liveRegion {
+  display: contents;
+}
 .tw-avatar {
   position: relative;
   -webkit-user-select: none;

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

@@ -38,8 +38,10 @@ 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. */
+    /** @deprecated Safe to remove */
     active?: boolean;
+    /** @deprecated Safe to remove */
+    dynamicRender?: boolean;
     /** @deprecated Use `InlineAlert` instead. */
     arrow?: `${AlertArrowPosition}`;
     /** @deprecated Use `message` instead. Be aware `message` only accepts plain text or text with **bold** markdown. */
@@ -49,6 +51,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, statusIconLabel, onDismiss, message, size, title, type, variant, active, }: AlertProps): import("react").JSX.Element;
+export default function Alert({ action, className, icon, statusIconLabel, onDismiss, message, title, type, variant, arrow, children, size, dismissible, active, dynamicRender, }: 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,EAEL,SAAS,EACT,IAAI,EAEJ,OAAO,EAER,MAAM,WAAW,CAAC;AASnB,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;;;SAGK;IACL,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,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,eAAe,EACf,SAAS,EACT,OAAO,EACP,IAAI,EACJ,KAAK,EACL,IAAgB,EAChB,OAAmB,EACnB,MAAa,GACd,EAAE,UAAU,+BAkHZ"}
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/alert/Alert.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,SAAS,EACT,IAAI,EAEJ,OAAO,EAER,MAAM,WAAW,CAAC;AASnB,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;;;SAGK;IACL,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,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,iCAAiC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,iCAAiC;IACjC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,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,MAAM,EACN,SAAS,EACT,IAAI,EACJ,eAAe,EACf,SAAS,EACT,OAAO,EACP,KAAK,EACL,IAAgB,EAChB,OAAmB,EACnB,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,WAAW,EACX,MAAa,EACb,aAAa,GACd,EAAE,UAAU,+BA4HZ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.75.0",
+  "version": "46.77.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"
+    "@wise/components-theming": "1.6.1",
+    "@transferwise/less-config": "3.1.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.13.1",

package/src/alert/Alert.css

@@ -0,0 +1,3 @@
+.wds-alert__liveRegion {
+  display: contents;
+}

package/src/alert/Alert.less

@@ -0,0 +1,3 @@
+.wds-alert__liveRegion {
+  display: contents;
+}

package/src/alert/Alert.spec.story.tsx

@@ -1,9 +1,8 @@
 import { useState } from 'react';
+import { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within, expect, waitFor } from '@storybook/test';
 import { Button, Field, SelectInput, Sentiment } from '..';
-import Alert from './Alert';
-
-import { Meta, StoryObj } from '@storybook/react';
+import Alert, { type AlertProps } from './Alert';
 
 const meta = {
   title: 'Feedback/Alert/tests',
@@ -43,7 +42,7 @@ export const SimpleTrigger: Story = {
           Trigger Alert
         </Button>
 
-        <Alert {...args} active={isActive} className="m-t-4" />
+        {isActive && <Alert {...args} className="m-t-4" />}
       </>
     );
   },
@@ -80,6 +79,134 @@ export const ComplexTrigger: Story = {
           />
         </Field>
 
+        {isActive && <Alert {...args} className="m-t-2" />}
+      </>
+    );
+  },
+};
+
+export const MultipleDynamicAlerts: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.queryAllByRole('status')).toHaveLength(0);
+    await expect(canvas.queryAllByRole('alert')).toHaveLength(0);
+    await wait();
+    await userEvent.tab();
+    await userEvent.keyboard('{Enter}');
+    await waitFor(async () => expect(canvas.getAllByRole('graphics-symbol')).toHaveLength(3));
+    await expect(canvas.getAllByRole('status')).toHaveLength(2);
+    await expect(canvas.getAllByRole('alert')).toHaveLength(1);
+  },
+  render: function Render() {
+    const [alerts, setAlerts] = useState<AlertProps[]>([]);
+
+    const getAlerts: () => AlertProps[] = () => [
+      {
+        type: Sentiment.POSITIVE,
+        title: `Title 1`,
+        children: `This is a ${Sentiment.POSITIVE} content`,
+      },
+      {
+        type: Sentiment.WARNING,
+        title: `Title 2`,
+        children: `This is a ${Sentiment.WARNING} content`,
+      },
+      {
+        type: Sentiment.NEGATIVE,
+        title: `Title 3`,
+        children: `This is a ${Sentiment.NEGATIVE} content`,
+      },
+    ];
+
+    return (
+      <>
+        <Button htmlType="button" onClick={() => setAlerts(getAlerts())}>
+          Generate dynamic alerts
+        </Button>
+
+        {alerts.map((props) => (
+          <Alert {...props} key={props.title} className="m-t-3" />
+        ))}
+      </>
+    );
+  },
+};
+
+/** Making sure using `active` is non-breaking **/
+export const SimpleTriggerDeprecated: Story = {
+  name: 'Deprecated: Simple Trigger',
+  play: async ({ args, canvasElement }) => {
+    const canvas = within(canvasElement);
+    await wait();
+    await userEvent.tab();
+    await wait();
+    await userEvent.keyboard('{Enter}');
+
+    await waitFor(async () => expect(canvas.getByText(args.message || '')).toBeInTheDocument());
+    await wait(1000);
+    await userEvent.keyboard('{Enter}');
+    await wait();
+    await waitFor(async () =>
+      expect(canvas.queryByText(args.message || '')).not.toBeInTheDocument(),
+    );
+  },
+  render: function Render(args) {
+    const [isActive, setIsActive] = useState(false);
+
+    return (
+      <>
+        <Button htmlType="button" onClick={() => setIsActive((current) => !current)}>
+          Trigger Alert
+        </Button>
+
+        <Alert {...args} active={isActive} className="m-t-4" />
+      </>
+    );
+  },
+};
+
+/** Making sure using `active` is non-breaking **/
+export const ComplexTriggerDeprecated: Story = {
+  name: 'Deprecated: Complex Trigger',
+  play: async ({ args, canvasElement }) => {
+    const canvas = within(canvasElement);
+    await wait();
+    await userEvent.tab();
+    await wait();
+    await userEvent.keyboard('{ArrowDown}');
+    await wait();
+    await userEvent.keyboard('{ArrowDown}');
+    await wait();
+    await userEvent.keyboard('{ArrowDown}');
+    await wait();
+    await userEvent.keyboard('{Enter}');
+
+    await waitFor(async () => expect(canvas.getByText(args.message || '')).toBeInTheDocument());
+    await wait(1000);
+    await userEvent.keyboard('{Enter}');
+    await wait();
+    await userEvent.keyboard('{ArrowUp}');
+    await wait();
+    await userEvent.keyboard('{Enter}');
+    // await waitFor(async () => expect(canvas.queryByText(args.message || '')).not.toBeInTheDocument());
+  },
+  render: function Render(args) {
+    const [isActive, setIsActive] = useState(false);
+    const [value, setValue] = useState<string>();
+
+    return (
+      <>
+        <Field label="Select option to triger Alert">
+          <SelectInput
+            items={[
+              { type: 'option', value: 'one' },
+              { type: 'option', value: 'two' },
+            ]}
+            onChange={setValue}
+            onClose={() => setIsActive(Boolean(value === 'two'))}
+          />
+        </Field>
+
         <Alert {...args} active={isActive} className="m-t-2" />
       </>
     );

package/src/alert/Alert.spec.tsx

@@ -4,7 +4,14 @@ import { ThemeProvider } from '@wise/components-theming';
 import React from 'react';
 
 import { Sentiment, Size, Theme, Variant } from '../common';
-import { render, cleanup, screen, userEvent, fireEvent, mockMatchMedia } from '../test-utils';
+import {
+  render,
+  cleanup,
+  screen,
+  userEvent as user,
+  fireEvent,
+  mockMatchMedia,
+} from '../test-utils';
 
 import Alert, { AlertAction, AlertArrowPosition, AlertType } from './Alert';
 
@@ -25,6 +32,9 @@ describe('Alert', () => {
   let alert: HTMLElement;
   let closeButton: HTMLElement;
   let action: AlertAction;
+  const userEvent = user.setup({
+    advanceTimers: jest.advanceTimersByTimeAsync,
+  });
 
   const classForType = (type: AlertType) => `alert-${type}`;
 
@@ -39,7 +49,6 @@ describe('Alert', () => {
   });
 
   afterEach(() => {
-    cleanup();
     jest.clearAllMocks();
   });
 
@@ -100,6 +109,24 @@ describe('Alert', () => {
       );
     });
 
+    it('active is ignored and a warning is logged', () => {
+      render(<Alert active message={message} />);
+
+      expect(screen.getByText(message)).toBeInTheDocument();
+      expect(mockedWarn).toHaveBeenCalledWith(
+        expect.stringMatching(/Alert component doesn't support `active`/),
+      );
+    });
+
+    it('dynamicRender is ignored and a warning is logged', () => {
+      render(<Alert dynamicRender message={message} />);
+
+      expect(screen.getByText(message)).toBeInTheDocument();
+      expect(mockedWarn).toHaveBeenCalledWith(
+        expect.stringMatching(/Alert component doesn't support.*?`dynamicRender`/),
+      );
+    });
+
     it('dismissible is ignored and a warning is logged', () => {
       ({ container } = render(<Alert dismissible message={message} />));
 
@@ -252,18 +279,17 @@ describe('Alert', () => {
   });
 
   describe('onDismiss', () => {
-    it('renders the close button if onDismiss is provided', () => {
+    it('renders the close button if onDismiss is provided', async () => {
       render(<Alert message={message} onDismiss={jest.fn()} />);
-
-      expect(screen.getByRole('button')).toBeInTheDocument();
+      const button = await screen.findByRole('button', { name: 'Close' });
+      expect(button).toBeEnabled();
     });
 
     it('calls onDismiss when the close button is clicked', async () => {
       const onDismiss = jest.fn();
-
       render(<Alert message={message} onDismiss={onDismiss} />);
-
-      await userEvent.click(screen.getByRole('button'));
+      const button = await screen.findByRole('button', { name: 'Close' });
+      await userEvent.click(button);
 
       expect(onDismiss).toHaveBeenCalledTimes(1);
     });
@@ -478,7 +504,7 @@ describe('Alert', () => {
     });
   });
 
-  describe('`active` prop', () => {
+  describe('`active` prop backward compatibility', () => {
     it('should render wrapper and alert if `active` is unset', () => {
       render(<Alert message={message} />);
       expect(screen.getByRole('status')).toBeInTheDocument();
@@ -492,7 +518,7 @@ describe('Alert', () => {
     });
 
     it('should render wrapper and alert if `active` is set', () => {
-      render(<Alert message={message} />);
+      render(<Alert message={message} active />);
       expect(screen.getByRole('status')).toBeInTheDocument();
       expect(screen.getByText(message)).toBeInTheDocument();
     });

package/src/alert/Alert.story.tsx

@@ -5,14 +5,13 @@ import { ClockBorderless } from '@transferwise/icons';
 
 import { Sentiment } from '../common';
 import { Button, Field, SelectInput } from '..';
-import Alert, { AlertArrowPosition } from './Alert';
+import Alert, { AlertArrowPosition, type AlertProps as FullAlertProps } from './Alert';
 
 export default {
   component: Alert,
   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.',
   },
@@ -106,30 +105,43 @@ export const WithTitle: Story = {
 };
 
 /**
- * For ARIA live region to function correctly with screen readers,
+ * For ARIA live region to function correctly with screen readers (SR),
  * 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 (AT), 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.
+ * It's not a problem if your page includes an Alert that is initially
+ * visible at the very first render, but if it appears as a result of
+ * user interaction or is async, e.g. BE-driven, then the screen reader
+ * might not announce it correctly. It becomes even more tricky if an
+ * Alert is triggerred by a component that causes refocusing or introduces
+ * many modifications to the AT, such as MoneyInput, for example, as that
+ * entirely hijacks screen-reader's attention and prevents it from
+ * announcing live region changes.
  *
- * We're additionally adding a small delay (175ms) between toggling
- * the `active` prop and actual DOM injection to compensate for some
- * common triggers like e.g. `SelectInput`. Those components affect
- * the AT and have programmatic focus control, which prevents the
- * screen readers from announcing simultaneous changes on the page.
+ * In order for this to work, we've introduced a simple mechanism which
+ * overcomes all of the above:
+ * 1. On the component mount, we render the live region wrapper.
+ * 2. We also render the actual Alert but set `aria-hidden` on it.
+ * 3. After 175ms, which has been confirmed as sufficient delay for
+ * the SRs to become responsive after trigger's activity, we remove the
+ * `aria-hidden` attribute,  which, in turn, initiates the announcements.
+ *
+ * **NB:** While this approach has no visual side-effects (e.g. layout
+ * shift), it makes the Alert hidden from the assistive tech for 175ms.
+ * It's our belief that such short pause between announcements is
+ * negligible for the user.
  */
-export const ConditionallyRendered: Story = {
+export const DynamicRender: Story = {
   render: function Render(args) {
-    const [isActive, setIsActive] = useState(false);
+    const [isOneActive, setIsOneActive] = useState(false);
+    const [isTwoActive, setIsTwoActive] = useState(false);
     const [value, setValue] = useState<string>();
 
     return (
       <>
-        <Button htmlType="button" onClick={() => setIsActive((current) => !current)}>
+        <Button htmlType="button" onClick={() => setIsOneActive(true)}>
           Trigger Alert
         </Button>
 
@@ -140,11 +152,16 @@ export const ConditionallyRendered: Story = {
               { type: 'option', value: 'two' },
             ]}
             onChange={setValue}
-            onClose={() => setIsActive(value === 'two')}
+            onClose={() => setIsTwoActive(value === 'two')}
           />
         </Field>
 
-        <Alert {...args} active={isActive} className="m-t-5" />
+        {isOneActive && <Alert {...args}>This Alert has a simple trigger.</Alert>}
+        {isTwoActive && (
+          <Alert {...args} type={Sentiment.WARNING}>
+            This Alert has a complex trigger.
+          </Alert>
+        )}
       </>
     );
   },
@@ -153,27 +170,33 @@ export const ConditionallyRendered: Story = {
       source: {
         code: `
 function Render(args) {
-  const [isActive, setIsActive] = useState(false);
-  const [value, setValue] = useState<string>();
+    const [isOneActive, setIsOneActive] = useState(false);
+    const [isTwoActive, setIsTwoActive] = useState(false);
+    const [value, setValue] = useState<string>();
 
   return (
     <>
-      <Button htmlType="button" onClick={() => setIsActive((current) => !current)}>
+      <Button htmlType="button" onClick={() => setIsOneActive(true)}>
         Trigger Alert
       </Button>
 
-      <Field label="Select 'two' to triger Alert" className="m-t-3">
+      <Field label="Select \`two\` to triger Alert" className="m-t-3">
         <SelectInput
           items={[
             { type: 'option', value: 'one' },
             { type: 'option', value: 'two' },
           ]}
           onChange={setValue}
-          onClose={() => setIsActive(value === 'two')}
+          onClose={() => setIsTwoActive(value === 'two')}
         />
       </Field>
-
-      <Alert {...args} active={isActive} className="m-t-5" />
+      
+      {isOneActive && <Alert {...args}>This Alert has a simple trigger.</Alert>}
+      {isTwoActive && (
+        <Alert {...args} type={Sentiment.WARNING}>
+          This Alert has a complex trigger.
+        </Alert>
+      )}
     </>
   );
 }`,
@@ -181,3 +204,91 @@ function Render(args) {
     },
   },
 };
+
+const SENTIMENT = [
+  Sentiment.POSITIVE,
+  Sentiment.NEGATIVE,
+  Sentiment.NEUTRAL,
+  Sentiment.WARNING,
+] as const;
+type AlertProps = Omit<FullAlertProps, 'type'> & { type: (typeof SENTIMENT)[number] };
+const getAlerts = () => {
+  const length = Math.ceil(2 + Math.random() * 3);
+
+  return Array.from({ length }, (_, index) => {
+    const type = SENTIMENT[Math.floor(Math.random() * SENTIMENT.length)];
+
+    return {
+      type,
+      title: `Title ${index + 1}`,
+      children: `This is a ${type} content`,
+    };
+  });
+};
+
+/**
+ * Sometimes, especially when dealing with Backend for Frontend (BFF),
+ * it's not just about conditional rendering but also the fact that
+ * you don't know how many `Alert`s you'll need to render.
+ *
+ * If you have to inject multiple Alerts simultaneously into the page,
+ * please note that we currently have no means of guaranteeing the order
+ * in  which they screen reader will read them out.
+ */
+export const MultipleDynamicAlerts: Story = {
+  render: function Render() {
+    const [isActive, setIsActive] = useState(false);
+    const [alerts, setAlerts] = useState<AlertProps[]>([]);
+
+    return (
+      <>
+        <Button
+          htmlType="button"
+          onClick={() => {
+            setAlerts(isActive ? [] : getAlerts());
+            setIsActive((current) => !current);
+          }}
+        >
+          Generate dynamic alerts
+        </Button>
+
+        {alerts.map((props) => (
+          <Alert {...props} key={props.title} className="m-t-3" />
+        ))}
+      </>
+    );
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+function Render() {
+  const [isActive, setIsActive] = useState(false);
+  const [alerts, setAlerts] = useState<AlertProps[]>([]);
+
+  return (
+    <>
+      <Button
+        htmlType="button"
+        onClick={() => {
+          setAlerts(isActive ? [] : getAlerts());
+          setIsActive((current) => !current);
+        }}
+      >
+        Generate dynamic alerts
+      </Button>
+
+      {alerts.map(props => (
+        <Alert 
+          {...props} 
+          key={props.title} 
+          className="m-t-3" 
+        />
+      ))}
+    </>
+  );
+},`,
+      },
+    },
+  },
+};

package/src/alert/Alert.tsx

@@ -64,8 +64,10 @@ 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. */
+  /** @deprecated Safe to remove */
   active?: boolean;
+  /** @deprecated Safe to remove */
+  dynamicRender?: boolean;
   /** @deprecated Use `InlineAlert` instead. */
   arrow?: `${AlertArrowPosition}`;
   /** @deprecated Use `message` instead. Be aware `message` only accepts plain text or text with **bold** markdown. */
@@ -90,21 +92,30 @@ function resolveType(type: AlertType): AlertTypeResolved {
 }
 
 export default function Alert({
-  arrow,
   action,
-  children,
   className,
-  dismissible,
   icon,
   statusIconLabel,
   onDismiss,
   message,
-  size,
   title,
   type = 'neutral',
   variant = 'desktop',
+  arrow,
+  children,
+  size,
+  dismissible,
   active = true,
+  dynamicRender,
 }: AlertProps) {
+  useEffect(() => {
+    if (active !== undefined || dynamicRender !== undefined) {
+      logActionRequired(
+        "Alert component doesn't support `active` or `dynamicRender` anymore, please remove that prop.",
+      );
+    }
+  }, [active, dynamicRender]);
+
   useEffect(() => {
     if (arrow !== undefined) {
       logActionRequired(
@@ -146,21 +157,23 @@ export default function Alert({
 
   const [shouldFire, setShouldFire] = useState<boolean>();
 
-  const [shouldShow, setShouldShow] = useState<boolean>();
+  const [shouldAnnounce, setShouldAnnounce] = useState<boolean>(false);
   useEffect(() => {
-    if (shouldShow === undefined || !active) {
-      setShouldShow(active);
-    } else {
-      setTimeout(() => setShouldShow(active), WDS_LIVE_REGION_DELAY_MS);
-    }
-  }, [active, shouldShow]);
+    setTimeout(() => {
+      setShouldAnnounce(true);
+    }, WDS_LIVE_REGION_DELAY_MS);
+  }, []);
 
   const closeButtonReference = useRef<HTMLButtonElement>(null);
 
   return (
-    <div role={resolvedType === Sentiment.NEGATIVE ? 'alert' : 'status'}>
-      {shouldShow && (
+    <div
+      role={resolvedType === Sentiment.NEGATIVE ? 'alert' : 'status'}
+      className="wds-alert__liveRegion"
+    >
+      {active && (
         <div
+          aria-hidden={shouldAnnounce ? undefined : 'true'}
           className={clsx(
             'alert d-flex',
             `alert-${resolvedType}`,

package/src/main.css

@@ -216,6 +216,9 @@ div.critical-comms .critical-comms-body {
 .np-action-btn:not(:disabled):focus {
   box-shadow: none;
 }
+.wds-alert__liveRegion {
+  display: contents;
+}
 .tw-avatar {
   position: relative;
   -webkit-user-select: none;

package/src/main.less

@@ -1,6 +1,7 @@
 @import "./criticalBanner/CriticalCommsBanner.less";
 @import "./accordion/Accordion.less";
 @import "./actionButton/ActionButton.less";
+@import "./alert/Alert.less";
 @import "./avatar/Avatar.less";
 @import "./badge/Badge.less";
 @import "./button/Button.less";