@transferwise/components 0.0.0-experimental-af6dee0 → 0.0.0-experimental-199a021

package/build/loader/Loader.mjs

@@ -1,13 +1,12 @@
 import { useTheme } from '@wise/components-theming';
 import { clsx } from 'clsx';
 import { useState, useEffect } from 'react';
-import Body from '../body/Body.mjs';
 import '../common/theme.mjs';
 import '../common/direction.mjs';
 import '../common/propsValues/control.mjs';
 import '../common/propsValues/breakpoint.mjs';
 import { Size } from '../common/propsValues/size.mjs';
-import { Typography } from '../common/propsValues/typography.mjs';
+import '../common/propsValues/typography.mjs';
 import '../common/propsValues/width.mjs';
 import '../common/propsValues/type.mjs';
 import '../common/propsValues/dateMode.mjs';
@@ -25,13 +24,12 @@ import '@transferwise/formatting';
 import '@transferwise/icons';
 import 'react-intl';
 import '../common/closeButton/CloseButton.messages.mjs';
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { jsx, Fragment } from 'react/jsx-runtime';
 
 const Loader = ({
   small = false,
   size = Size.MEDIUM,
   displayInstantly = false,
-  label,
   classNames = {},
   ...restProps
 }) => {
@@ -62,19 +60,11 @@ const Loader = ({
     console.warn('Loader is forbidden to use with Forest Green theme. Check the https://wise.design/components/screen-loader for more info.');
     return /*#__PURE__*/jsx(Fragment, {});
   }
-  return /*#__PURE__*/jsxs("div", {
-    className: style('tw-loader'),
-    "data-testid": restProps['data-testid'],
-    children: [/*#__PURE__*/jsx("div", {
-      className: clsx(style('tw-loader-asset'), style(`tw-loader-asset--${supportedSize}`), {
-        'tw-loader-asset--visible': hasDebounced
-      })
-    }), label && hasDebounced && /*#__PURE__*/jsx(Body, {
-      type: Typography.BODY_LARGE_BOLD,
-      as: "span",
-      className: style('text-secondary'),
-      children: label
-    })]
+  return /*#__PURE__*/jsx("div", {
+    className: clsx(style('tw-loader'), style(`tw-loader--${supportedSize}`), {
+      'tw-loader--visible': hasDebounced
+    }),
+    "data-testid": restProps['data-testid']
   });
 };
 const getSupportedSize = size => {

package/build/loader/Loader.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Loader.mjs","sources":["../../src/loader/Loader.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { ReactNode, useEffect, useState } from 'react';\n\nimport Body from '../body';\nimport { Size, SizeExtraSmall, SizeSmall, SizeMedium, SizeLarge, SizeExtraLarge } from '../common';\nimport { Typography } from '../common/propsValues/typography';\n\n// TODO: We gracefully deprecated xs, lg and xl -- remove these as part of a future breaking change to this component\ntype DeprecatedSize = SizeExtraSmall | SizeLarge | SizeExtraLarge;\n\ntype SizeType = SizeSmall | SizeMedium;\n\nexport type LoaderProps = {\n  /**\n   * @deprecated Use `size` instead.\n   * @default false\n   */\n  small?: boolean;\n  /** @default 'md' */\n  size?: SizeType | DeprecatedSize;\n  /** @default false */\n  displayInstantly?: boolean;\n  /** Optional label displayed below the loader */\n  label?: ReactNode;\n  // TODO: refactor in favor of prop from `CommonProps` type\n  /** @default {} */\n  classNames?: Record<string, string>;\n  'data-testid'?: string;\n};\n\n/**\n * Loader component\n *\n * Docs link: https://transferwise.github.io/neptune-web/components/progress/Loader\n *\n * @param root0\n * @param root0.small\n * @param root0.size\n * @param root0.classNames\n */\nconst Loader = ({\n  small = false,\n  size = Size.MEDIUM,\n  displayInstantly = false,\n  label,\n  classNames = {},\n  ...restProps\n}: LoaderProps) => {\n  const { theme } = useTheme();\n  const [hasDebounced, setHasDebounced] = useState(displayInstantly);\n\n  useEffect(() => {\n    let cancelled: boolean;\n    let timeout: ReturnType<typeof setTimeout> | undefined;\n\n    if (!displayInstantly) {\n      timeout = setTimeout(() => {\n        if (!cancelled) {\n          setHasDebounced(true);\n        }\n      }, 1000);\n    }\n\n    return () => {\n      cancelled = true;\n\n      clearTimeout(timeout);\n    };\n  }, []);\n\n  const style = (className: string): string => classNames[className] || className;\n  const legacySize: SizeType | DeprecatedSize = small ? Size.SMALL : size;\n  const supportedSize = getSupportedSize(legacySize);\n\n  if (theme === 'forest-green') {\n    // eslint-disable-next-line no-console\n    console.warn(\n      'Loader is forbidden to use with Forest Green theme. Check the https://wise.design/components/screen-loader for more info.',\n    );\n    return <></>;\n  }\n\n  return (\n    <div className={style('tw-loader')} data-testid={restProps['data-testid']}>\n      <div\n        className={clsx(style('tw-loader-asset'), style(`tw-loader-asset--${supportedSize}`), {\n          'tw-loader-asset--visible': hasDebounced,\n        })}\n      />\n      {label && hasDebounced && (\n        <Body type={Typography.BODY_LARGE_BOLD} as=\"span\" className={style('text-secondary')}>\n          {label}\n        </Body>\n      )}\n    </div>\n  );\n};\n\nconst getSupportedSize = (size: SizeType | DeprecatedSize): SizeType => {\n  switch (size) {\n    case Size.SMALL:\n    case Size.EXTRA_SMALL:\n      return Size.SMALL;\n\n    case Size.EXTRA_LARGE:\n    case Size.LARGE:\n    case Size.MEDIUM:\n    default:\n      return Size.MEDIUM;\n  }\n};\n\nexport default Loader;\n"],"names":["Loader","small","size","Size","MEDIUM","displayInstantly","label","classNames","restProps","theme","useTheme","hasDebounced","setHasDebounced","useState","useEffect","cancelled","timeout","setTimeout","clearTimeout","style","className","legacySize","SMALL","supportedSize","getSupportedSize","console","warn","_jsx","_Fragment","_jsxs","children","clsx","Body","type","Typography","BODY_LARGE_BOLD","as","EXTRA_SMALL","EXTRA_LARGE","LARGE"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,MAAMA,MAAM,GAAGA,CAAC;AACdC,EAAAA,KAAK,GAAG,KAAK;EACbC,IAAI,GAAGC,IAAI,CAACC,MAAM;AAClBC,EAAAA,gBAAgB,GAAG,KAAK;EACxBC,KAAK;EACLC,UAAU,GAAG,EAAE;EACf,GAAGC;AAAS,CACA,KAAI;EAChB,MAAM;AAAEC,IAAAA;GAAO,GAAGC,QAAQ,EAAE;EAC5B,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAGC,QAAQ,CAACR,gBAAgB,CAAC;AAElES,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAIC,SAAkB;AACtB,IAAA,IAAIC,OAAkD;IAEtD,IAAI,CAACX,gBAAgB,EAAE;MACrBW,OAAO,GAAGC,UAAU,CAAC,MAAK;QACxB,IAAI,CAACF,SAAS,EAAE;UACdH,eAAe,CAAC,IAAI,CAAC;AACvB,QAAA;MACF,CAAC,EAAE,IAAI,CAAC;AACV,IAAA;AAEA,IAAA,OAAO,MAAK;AACVG,MAAAA,SAAS,GAAG,IAAI;MAEhBG,YAAY,CAACF,OAAO,CAAC;IACvB,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMG,KAAK,GAAIC,SAAiB,IAAab,UAAU,CAACa,SAAS,CAAC,IAAIA,SAAS;EAC/E,MAAMC,UAAU,GAA8BpB,KAAK,GAAGE,IAAI,CAACmB,KAAK,GAAGpB,IAAI;AACvE,EAAA,MAAMqB,aAAa,GAAGC,gBAAgB,CAACH,UAAU,CAAC;EAElD,IAAIZ,KAAK,KAAK,cAAc,EAAE;AAC5B;AACAgB,IAAAA,OAAO,CAACC,IAAI,CACV,2HAA2H,CAC5H;AACD,IAAA,oBAAOC,GAAA,CAAAC,QAAA,EAAA,GAAK;AACd,EAAA;AAEA,EAAA,oBACEC,IAAA,CAAA,KAAA,EAAA;AAAKT,IAAAA,SAAS,EAAED,KAAK,CAAC,WAAW,CAAE;IAAC,aAAA,EAAaX,SAAS,CAAC,aAAa,CAAE;AAAAsB,IAAAA,QAAA,gBACxEH,GAAA,CAAA,KAAA,EAAA;AACEP,MAAAA,SAAS,EAAEW,IAAI,CAACZ,KAAK,CAAC,iBAAiB,CAAC,EAAEA,KAAK,CAAC,CAAA,iBAAA,EAAoBI,aAAa,CAAA,CAAE,CAAC,EAAE;AACpF,QAAA,0BAA0B,EAAEZ;OAC7B;KAAE,CAEL,EAACL,KAAK,IAAIK,YAAY,iBACpBgB,GAAA,CAACK,IAAI,EAAA;MAACC,IAAI,EAAEC,UAAU,CAACC,eAAgB;AAACC,MAAAA,EAAE,EAAC,MAAM;AAAChB,MAAAA,SAAS,EAAED,KAAK,CAAC,gBAAgB,CAAE;AAAAW,MAAAA,QAAA,EAClFxB;AAAK,KACF,CACP;AAAA,GACE,CAAC;AAEV;AAEA,MAAMkB,gBAAgB,GAAItB,IAA+B,IAAc;AACrE,EAAA,QAAQA,IAAI;IACV,KAAKC,IAAI,CAACmB,KAAK;IACf,KAAKnB,IAAI,CAACkC,WAAW;MACnB,OAAOlC,IAAI,CAACmB,KAAK;IAEnB,KAAKnB,IAAI,CAACmC,WAAW;IACrB,KAAKnC,IAAI,CAACoC,KAAK;IACf,KAAKpC,IAAI,CAACC,MAAM;AAChB,IAAA;MACE,OAAOD,IAAI,CAACC,MAAM;AACtB;AACF,CAAC;;;;"}
+{"version":3,"file":"Loader.mjs","sources":["../../src/loader/Loader.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useEffect, useState } from 'react';\n\nimport { Size, SizeExtraSmall, SizeSmall, SizeMedium, SizeLarge, SizeExtraLarge } from '../common';\n\n// TODO: We gracefully deprecated xs, lg and xl -- remove these as part of a future breaking change to this component\ntype DeprecatedSize = SizeExtraSmall | SizeLarge | SizeExtraLarge;\n\ntype SizeType = SizeSmall | SizeMedium;\n\nexport type LoaderProps = {\n  /**\n   * @deprecated Use `size` instead.\n   * @default false\n   */\n  small?: boolean;\n  /** @default 'md' */\n  size?: SizeType | DeprecatedSize;\n  /** @default false */\n  displayInstantly?: boolean;\n  // TODO: refactor in favor of prop from `CommonProps` type\n  /** @default {} */\n  classNames?: Record<string, string>;\n  'data-testid'?: string;\n};\n\n/**\n * Loader component\n *\n * Docs link: https://transferwise.github.io/neptune-web/components/progress/Loader\n *\n * @param root0\n * @param root0.small\n * @param root0.size\n * @param root0.classNames\n */\nconst Loader = ({\n  small = false,\n  size = Size.MEDIUM,\n  displayInstantly = false,\n  classNames = {},\n  ...restProps\n}: LoaderProps) => {\n  const { theme } = useTheme();\n  const [hasDebounced, setHasDebounced] = useState(displayInstantly);\n\n  useEffect(() => {\n    let cancelled: boolean;\n    let timeout: ReturnType<typeof setTimeout> | undefined;\n\n    if (!displayInstantly) {\n      timeout = setTimeout(() => {\n        if (!cancelled) {\n          setHasDebounced(true);\n        }\n      }, 1000);\n    }\n\n    return () => {\n      cancelled = true;\n\n      clearTimeout(timeout);\n    };\n  }, []);\n\n  const style = (className: string): string => classNames[className] || className;\n  const legacySize: SizeType | DeprecatedSize = small ? Size.SMALL : size;\n  const supportedSize = getSupportedSize(legacySize);\n\n  if (theme === 'forest-green') {\n    // eslint-disable-next-line no-console\n    console.warn(\n      'Loader is forbidden to use with Forest Green theme. Check the https://wise.design/components/screen-loader for more info.',\n    );\n    return <></>;\n  }\n\n  return (\n    <div\n      className={clsx(style('tw-loader'), style(`tw-loader--${supportedSize}`), {\n        'tw-loader--visible': hasDebounced,\n      })}\n      data-testid={restProps['data-testid']}\n    />\n  );\n};\n\nconst getSupportedSize = (size: SizeType | DeprecatedSize): SizeType => {\n  switch (size) {\n    case Size.SMALL:\n    case Size.EXTRA_SMALL:\n      return Size.SMALL;\n\n    case Size.EXTRA_LARGE:\n    case Size.LARGE:\n    case Size.MEDIUM:\n    default:\n      return Size.MEDIUM;\n  }\n};\n\nexport default Loader;\n"],"names":["Loader","small","size","Size","MEDIUM","displayInstantly","classNames","restProps","theme","useTheme","hasDebounced","setHasDebounced","useState","useEffect","cancelled","timeout","setTimeout","clearTimeout","style","className","legacySize","SMALL","supportedSize","getSupportedSize","console","warn","_jsx","_Fragment","clsx","EXTRA_SMALL","EXTRA_LARGE","LARGE"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCA,MAAMA,MAAM,GAAGA,CAAC;AACdC,EAAAA,KAAK,GAAG,KAAK;EACbC,IAAI,GAAGC,IAAI,CAACC,MAAM;AAClBC,EAAAA,gBAAgB,GAAG,KAAK;EACxBC,UAAU,GAAG,EAAE;EACf,GAAGC;AAAS,CACA,KAAI;EAChB,MAAM;AAAEC,IAAAA;GAAO,GAAGC,QAAQ,EAAE;EAC5B,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAGC,QAAQ,CAACP,gBAAgB,CAAC;AAElEQ,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAIC,SAAkB;AACtB,IAAA,IAAIC,OAAkD;IAEtD,IAAI,CAACV,gBAAgB,EAAE;MACrBU,OAAO,GAAGC,UAAU,CAAC,MAAK;QACxB,IAAI,CAACF,SAAS,EAAE;UACdH,eAAe,CAAC,IAAI,CAAC;AACvB,QAAA;MACF,CAAC,EAAE,IAAI,CAAC;AACV,IAAA;AAEA,IAAA,OAAO,MAAK;AACVG,MAAAA,SAAS,GAAG,IAAI;MAEhBG,YAAY,CAACF,OAAO,CAAC;IACvB,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMG,KAAK,GAAIC,SAAiB,IAAab,UAAU,CAACa,SAAS,CAAC,IAAIA,SAAS;EAC/E,MAAMC,UAAU,GAA8BnB,KAAK,GAAGE,IAAI,CAACkB,KAAK,GAAGnB,IAAI;AACvE,EAAA,MAAMoB,aAAa,GAAGC,gBAAgB,CAACH,UAAU,CAAC;EAElD,IAAIZ,KAAK,KAAK,cAAc,EAAE;AAC5B;AACAgB,IAAAA,OAAO,CAACC,IAAI,CACV,2HAA2H,CAC5H;AACD,IAAA,oBAAOC,GAAA,CAAAC,QAAA,EAAA,GAAK;AACd,EAAA;AAEA,EAAA,oBACED,GAAA,CAAA,KAAA,EAAA;AACEP,IAAAA,SAAS,EAAES,IAAI,CAACV,KAAK,CAAC,WAAW,CAAC,EAAEA,KAAK,CAAC,CAAA,WAAA,EAAcI,aAAa,CAAA,CAAE,CAAC,EAAE;AACxE,MAAA,oBAAoB,EAAEZ;AACvB,KAAA,CAAE;IACH,aAAA,EAAaH,SAAS,CAAC,aAAa;AAAE,GAAA,CACtC;AAEN;AAEA,MAAMgB,gBAAgB,GAAIrB,IAA+B,IAAc;AACrE,EAAA,QAAQA,IAAI;IACV,KAAKC,IAAI,CAACkB,KAAK;IACf,KAAKlB,IAAI,CAAC0B,WAAW;MACnB,OAAO1B,IAAI,CAACkB,KAAK;IAEnB,KAAKlB,IAAI,CAAC2B,WAAW;IACrB,KAAK3B,IAAI,CAAC4B,KAAK;IACf,KAAK5B,IAAI,CAACC,MAAM;AAChB,IAAA;MACE,OAAOD,IAAI,CAACC,MAAM;AACtB;AACF,CAAC;;;;"}

package/build/main.css

@@ -30839,17 +30839,6 @@ button.np-link {
 }
 
 .tw-loader {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 16px;
-  gap: var(--size-16);
-  width: 190px;
-  text-align: center;
-  word-break: break-word;
-}
-
-.tw-loader-asset {
   overflow: hidden;
   border-radius: 50%;
   backface-visibility: hidden;
@@ -30866,11 +30855,11 @@ button.np-link {
   transition: opacity 300ms cubic-bezier(0.24, 0, 0.3, 1);
 }
 
-.tw-loader-asset--visible {
+.tw-loader--visible {
   opacity: 1;
 }
 
-.tw-loader-asset::before {
+.tw-loader::before {
   content: "";
   display: block;
   width: 4.5rem;
@@ -30890,7 +30879,7 @@ button.np-link {
   animation-iteration-count: infinite;
 }
 
-.tw-loader-asset--sm {
+.tw-loader--sm {
   --coin-size: 3rem;
   --coin-edge-width-offset: translateX(0.275rem);
   --coin-edge-width-negative-offset: translateX(-0.275rem);
@@ -30898,7 +30887,7 @@ button.np-link {
   --box-shadow-backwards: -0.025rem 0 0 var(--coin-colour), -0.05rem 0 0 var(--coin-colour), -0.075rem 0 0 var(--coin-colour), -0.1rem 0 0 var(--coin-colour), -0.125rem 0 0 var(--coin-colour), -0.15rem 0 0 var(--coin-colour), -0.175rem 0 0 var(--coin-colour), -0.2rem 0 0 var(--coin-colour), -0.225rem 0 0 var(--coin-colour), -0.25rem 0 0 var(--coin-colour), -0.275rem 0 0 var(--coin-colour), -0.3rem 0 0 var(--coin-colour), -0.325rem 0 0 var(--coin-colour), -0.35rem 0 0 var(--coin-colour), -0.375rem 0 0 var(--coin-colour), -0.4rem 0 0 var(--coin-colour), -0.425rem 0 0 var(--coin-colour), -0.45rem 0 0 var(--coin-colour), -0.475rem 0 0 var(--coin-colour);
 }
 
-.tw-loader-asset--md {
+.tw-loader--md {
   --coin-size: 4.5rem;
   --coin-edge-width-offset: translateX(0.375rem);
   --coin-edge-width-negative-offset: translateX(-0.375rem);

package/build/nudge/Nudge.js

@@ -60,36 +60,47 @@ const Nudge = ({
   action
 }) => {
   const intl = reactIntl.useIntl();
-  const [isDismissed, setIsDismissed] = React.useState(false);
-  const [isMounted, setIsMounted] = React.useState(false);
+  const [nudgeState, setNudgeState] = React.useState(() => {
+    const initialDismissed = persistDismissal && id ? !!getLocalStorage()?.find(item => item === id) : false;
+    return {
+      isDismissed: initialDismissed,
+      isMounted: false
+    };
+  });
+  React.useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- Setting mount state in mount effect
+    setNudgeState(prev => ({
+      ...prev,
+      isMounted: true
+    }));
+  }, []);
+  const {
+    isDismissed
+  } = nudgeState;
   const handleOnDismiss = () => {
     const dismissedNudgesStorage = getLocalStorage();
     if (persistDismissal && id) {
       try {
         localStorage.setItem(STORAGE_NAME, JSON.stringify([...dismissedNudgesStorage, id]));
-      } catch (error) {}
-      setIsDismissed(true);
+      } catch {}
+      setNudgeState(prev => ({
+        ...prev,
+        isDismissed: true
+      }));
     }
     if (onDismiss) {
       onDismiss();
     }
   };
   React.useEffect(() => {
-    if (persistDismissal && id) {
+    if (persistDismissal && id && isPreviouslyDismissed) {
       const dismissedNudgesStorage = getLocalStorage();
-      let isDismissed = false;
-      if (dismissedNudgesStorage?.find(item => item === id)) {
-        setIsDismissed(true);
-        isDismissed = true;
-      }
-      if (isPreviouslyDismissed) {
-        isPreviouslyDismissed(isDismissed);
-      }
+      const wasDismissed = !!dismissedNudgesStorage?.find(item => item === id);
+      isPreviouslyDismissed(wasDismissed);
     }
-    setIsMounted(true);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [id, persistDismissal]);
-  if (persistDismissal && (isDismissed || !isMounted)) {
+  if (persistDismissal && (isDismissed || !nudgeState.isMounted)) {
     return null;
   }
   return /*#__PURE__*/jsxRuntime.jsxs("div", {

package/build/nudge/Nudge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Nudge.js","sources":["../../src/nudge/Nudge.tsx"],"sourcesContent":["import { Illustration, Assets, type IllustrationNames } from '@wise/art';\nimport { clsx } from 'clsx';\nimport { ReactNode, useEffect, useState, MouseEvent } from 'react';\n\nimport Body from '../body';\nimport { Typography } from '../common';\nimport Link from '../link';\nimport type { AlertAction } from '../alert';\nimport IconButton from '../iconButton';\nimport { Cross } from '@transferwise/icons';\nimport { useIntl } from 'react-intl';\nimport closeBtnMessages from '../common/closeButton/CloseButton.messages';\n\n// WARNING: Changing this will cause nudges to reappear wherever persist nudge is used and privacy team will need to be updated too\nexport const STORAGE_NAME = 'dismissedNudges';\n\nconst getLocalStorage = (): string[] => {\n  try {\n    const storageItem = localStorage.getItem(STORAGE_NAME);\n\n    if (storageItem) {\n      const storage: unknown = JSON.parse(storageItem);\n\n      if (Array.isArray(storage)) {\n        return storage.map((item) => String(item));\n      }\n    }\n  } catch (error) {}\n\n  return [];\n};\n\ntype MediaNameType =\n  | `${Assets.GLOBE}`\n  | `${Assets.LOCK}`\n  | `${Assets.WALLET}`\n  | `${Assets.GEAR}`\n  | `${Assets.INVITE_LETTER}`\n  | `${Assets.PERSONAL_CARD}`\n  | `${Assets.BUSINESS_CARD}`\n  | `${Assets.HEART}`\n  | `${Assets.MULTI_CURRENCY}`\n  | `${Assets.SHOPPING_BAG}`\n  | `${Assets.FLOWER}`\n  | `${Assets.GIFT_BOX}`\n  | `${Assets.BACKPACK}`;\n\ntype BaseProps = {\n  /** @deprecated Use `mediaName` property instead. */\n  media?: ReactNode;\n  /** Media name  */\n  mediaName?: MediaNameType;\n  title: ReactNode;\n  link?: ReactNode;\n  href?: string;\n  onClick?: (event?: MouseEvent<HTMLSpanElement>) => void;\n  /** Fired when the user clicks on close button */\n  onDismiss?: () => void;\n  /** An optional call to action to sit under the main body of the nudge. If your label is short, use aria-label to provide more context */\n  action?: AlertAction;\n  className?: string;\n};\n\nexport interface OptionalId extends BaseProps {\n  id?: string;\n  persistDismissal?: false;\n  isPreviouslyDismissed?: undefined;\n}\n\nexport interface RequiredPersistProps extends BaseProps {\n  /** This ID should be completely unique to the page and feature as it uses a shared array which could conflict with other nudges in Wise */\n  id: string;\n  /** Use persist dismissal to keep the nudge dismissed using the browser's localStorage */\n  persistDismissal: true;\n  /**\n   * Fired on mount for determining if nudge has been dismissed before\n   *\n   * @param {boolean}  value - set to true if dismissed previously\n   */\n  isPreviouslyDismissed?: (value: boolean) => void;\n}\n\nexport type Props = OptionalId | RequiredPersistProps;\n\nconst Nudge = ({\n  mediaName,\n  title,\n  link,\n  href,\n  onClick,\n  onDismiss,\n  persistDismissal,\n  isPreviouslyDismissed,\n  id,\n  className,\n  action,\n}: Props) => {\n  const intl = useIntl();\n  const [isDismissed, setIsDismissed] = useState(false);\n  const [isMounted, setIsMounted] = useState(false);\n\n  const handleOnDismiss = () => {\n    const dismissedNudgesStorage = getLocalStorage();\n\n    if (persistDismissal && id) {\n      try {\n        localStorage.setItem(STORAGE_NAME, JSON.stringify([...dismissedNudgesStorage, id]));\n      } catch (error) {}\n\n      setIsDismissed(true);\n    }\n\n    if (onDismiss) {\n      onDismiss();\n    }\n  };\n\n  useEffect(() => {\n    if (persistDismissal && id) {\n      const dismissedNudgesStorage = getLocalStorage();\n      let isDismissed = false;\n\n      if (dismissedNudgesStorage?.find((item) => item === id)) {\n        setIsDismissed(true);\n        isDismissed = true;\n      }\n\n      if (isPreviouslyDismissed) {\n        isPreviouslyDismissed(isDismissed);\n      }\n    }\n\n    setIsMounted(true);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [id, persistDismissal]);\n\n  if (persistDismissal && (isDismissed || !isMounted)) {\n    return null;\n  }\n\n  return (\n    <div className={clsx('wds-nudge', className)} id={id}>\n      {!!mediaName && (\n        <div className=\"wds-nudge-media\">\n          <Illustration\n            name={mediaName as IllustrationNames}\n            className={clsx(`wds-nudge-media-${mediaName}`)}\n            size=\"small\"\n            disablePadding\n            alt=\"\"\n          />\n        </div>\n      )}\n      <div className=\"wds-nudge-container\">\n        <div className=\"wds-nudge-content\">\n          <Body type={Typography.BODY_LARGE} className={clsx('wds-nudge-body')}>\n            {title}\n          </Body>\n          {/* Merge these two Link instances into one */}\n          {link && (\n            <Link\n              href={href}\n              type={Typography.LINK_LARGE}\n              className=\"wds-nudge-link\"\n              onClick={onClick}\n            >\n              {link}\n            </Link>\n          )}\n          {action && (\n            <Link\n              href={action.href}\n              target={action.target}\n              className=\"m-t-1\"\n              aria-label={action['aria-label']}\n              type={Typography.LINK_LARGE}\n              onClick={action.onClick}\n            >\n              {action.text}\n            </Link>\n          )}\n        </div>\n        {onDismiss || persistDismissal ? (\n          <IconButton\n            size={24}\n            priority=\"tertiary\"\n            aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}\n            onClick={handleOnDismiss}\n          >\n            <Cross />\n          </IconButton>\n        ) : null}\n      </div>\n    </div>\n  );\n};\n\nexport default Nudge;\n"],"names":["STORAGE_NAME","getLocalStorage","storageItem","localStorage","getItem","storage","JSON","parse","Array","isArray","map","item","String","error","Nudge","mediaName","title","link","href","onClick","onDismiss","persistDismissal","isPreviouslyDismissed","id","className","action","intl","useIntl","isDismissed","setIsDismissed","useState","isMounted","setIsMounted","handleOnDismiss","dismissedNudgesStorage","setItem","stringify","useEffect","find","_jsxs","clsx","children","_jsx","Illustration","name","size","disablePadding","alt","Body","type","Typography","BODY_LARGE","Link","LINK_LARGE","target","text","IconButton","priority","formatMessage","closeBtnMessages","ariaLabel","Cross"],"mappings":"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"}
+{"version":3,"file":"Nudge.js","sources":["../../src/nudge/Nudge.tsx"],"sourcesContent":["import { Illustration, Assets, type IllustrationNames } from '@wise/art';\nimport { clsx } from 'clsx';\nimport { ReactNode, useEffect, useState, MouseEvent } from 'react';\n\nimport Body from '../body';\nimport { Typography } from '../common';\nimport Link from '../link';\nimport type { AlertAction } from '../alert';\nimport IconButton from '../iconButton';\nimport { Cross } from '@transferwise/icons';\nimport { useIntl } from 'react-intl';\nimport closeBtnMessages from '../common/closeButton/CloseButton.messages';\n\n// WARNING: Changing this will cause nudges to reappear wherever persist nudge is used and privacy team will need to be updated too\nexport const STORAGE_NAME = 'dismissedNudges';\n\nconst getLocalStorage = (): string[] => {\n  try {\n    const storageItem = localStorage.getItem(STORAGE_NAME);\n\n    if (storageItem) {\n      const storage: unknown = JSON.parse(storageItem);\n\n      if (Array.isArray(storage)) {\n        return storage.map((item) => String(item));\n      }\n    }\n  } catch (error) {}\n\n  return [];\n};\n\ntype MediaNameType =\n  | `${Assets.GLOBE}`\n  | `${Assets.LOCK}`\n  | `${Assets.WALLET}`\n  | `${Assets.GEAR}`\n  | `${Assets.INVITE_LETTER}`\n  | `${Assets.PERSONAL_CARD}`\n  | `${Assets.BUSINESS_CARD}`\n  | `${Assets.HEART}`\n  | `${Assets.MULTI_CURRENCY}`\n  | `${Assets.SHOPPING_BAG}`\n  | `${Assets.FLOWER}`\n  | `${Assets.GIFT_BOX}`\n  | `${Assets.BACKPACK}`;\n\ntype BaseProps = {\n  /** @deprecated Use `mediaName` property instead. */\n  media?: ReactNode;\n  /** Media name  */\n  mediaName?: MediaNameType;\n  title: ReactNode;\n  link?: ReactNode;\n  href?: string;\n  onClick?: (event?: MouseEvent<HTMLSpanElement>) => void;\n  /** Fired when the user clicks on close button */\n  onDismiss?: () => void;\n  /** An optional call to action to sit under the main body of the nudge. If your label is short, use aria-label to provide more context */\n  action?: AlertAction;\n  className?: string;\n};\n\nexport interface OptionalId extends BaseProps {\n  id?: string;\n  persistDismissal?: false;\n  isPreviouslyDismissed?: undefined;\n}\n\nexport interface RequiredPersistProps extends BaseProps {\n  /** This ID should be completely unique to the page and feature as it uses a shared array which could conflict with other nudges in Wise */\n  id: string;\n  /** Use persist dismissal to keep the nudge dismissed using the browser's localStorage */\n  persistDismissal: true;\n  /**\n   * Fired on mount for determining if nudge has been dismissed before\n   *\n   * @param {boolean}  value - set to true if dismissed previously\n   */\n  isPreviouslyDismissed?: (value: boolean) => void;\n}\n\nexport type Props = OptionalId | RequiredPersistProps;\n\nconst Nudge = ({\n  mediaName,\n  title,\n  link,\n  href,\n  onClick,\n  onDismiss,\n  persistDismissal,\n  isPreviouslyDismissed,\n  id,\n  className,\n  action,\n}: Props) => {\n  const intl = useIntl();\n  const [nudgeState, setNudgeState] = useState(() => {\n    const initialDismissed =\n      persistDismissal && id ? !!getLocalStorage()?.find((item) => item === id) : false;\n    return {\n      isDismissed: initialDismissed,\n      isMounted: false,\n    };\n  });\n\n  useEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- Setting mount state in mount effect\n    setNudgeState((prev) => ({ ...prev, isMounted: true }));\n  }, []);\n\n  const { isDismissed } = nudgeState;\n\n  const handleOnDismiss = () => {\n    const dismissedNudgesStorage = getLocalStorage();\n\n    if (persistDismissal && id) {\n      try {\n        localStorage.setItem(STORAGE_NAME, JSON.stringify([...dismissedNudgesStorage, id]));\n      } catch {}\n\n      setNudgeState((prev) => ({ ...prev, isDismissed: true }));\n    }\n\n    if (onDismiss) {\n      onDismiss();\n    }\n  };\n\n  useEffect(() => {\n    if (persistDismissal && id && isPreviouslyDismissed) {\n      const dismissedNudgesStorage = getLocalStorage();\n      const wasDismissed = !!dismissedNudgesStorage?.find((item) => item === id);\n      isPreviouslyDismissed(wasDismissed);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [id, persistDismissal]);\n\n  if (persistDismissal && (isDismissed || !nudgeState.isMounted)) {\n    return null;\n  }\n\n  return (\n    <div className={clsx('wds-nudge', className)} id={id}>\n      {!!mediaName && (\n        <div className=\"wds-nudge-media\">\n          <Illustration\n            name={mediaName}\n            className={clsx(`wds-nudge-media-${mediaName}`)}\n            size=\"small\"\n            disablePadding\n            alt=\"\"\n          />\n        </div>\n      )}\n      <div className=\"wds-nudge-container\">\n        <div className=\"wds-nudge-content\">\n          <Body type={Typography.BODY_LARGE} className={clsx('wds-nudge-body')}>\n            {title}\n          </Body>\n          {/* Merge these two Link instances into one */}\n          {link && (\n            <Link\n              href={href}\n              type={Typography.LINK_LARGE}\n              className=\"wds-nudge-link\"\n              onClick={onClick}\n            >\n              {link}\n            </Link>\n          )}\n          {action && (\n            <Link\n              href={action.href}\n              target={action.target}\n              className=\"m-t-1\"\n              aria-label={action['aria-label']}\n              type={Typography.LINK_LARGE}\n              onClick={action.onClick}\n            >\n              {action.text}\n            </Link>\n          )}\n        </div>\n        {onDismiss || persistDismissal ? (\n          <IconButton\n            size={24}\n            priority=\"tertiary\"\n            aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}\n            onClick={handleOnDismiss}\n          >\n            <Cross />\n          </IconButton>\n        ) : null}\n      </div>\n    </div>\n  );\n};\n\nexport default Nudge;\n"],"names":["STORAGE_NAME","getLocalStorage","storageItem","localStorage","getItem","storage","JSON","parse","Array","isArray","map","item","String","error","Nudge","mediaName","title","link","href","onClick","onDismiss","persistDismissal","isPreviouslyDismissed","id","className","action","intl","useIntl","nudgeState","setNudgeState","useState","initialDismissed","find","isDismissed","isMounted","useEffect","prev","handleOnDismiss","dismissedNudgesStorage","setItem","stringify","wasDismissed","_jsxs","clsx","children","_jsx","Illustration","name","size","disablePadding","alt","Body","type","Typography","BODY_LARGE","Link","LINK_LARGE","target","text","IconButton","priority","formatMessage","closeBtnMessages","ariaLabel","Cross"],"mappings":"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"}

package/build/nudge/Nudge.mjs

@@ -56,36 +56,47 @@ const Nudge = ({
   action
 }) => {
   const intl = useIntl();
-  const [isDismissed, setIsDismissed] = useState(false);
-  const [isMounted, setIsMounted] = useState(false);
+  const [nudgeState, setNudgeState] = useState(() => {
+    const initialDismissed = persistDismissal && id ? !!getLocalStorage()?.find(item => item === id) : false;
+    return {
+      isDismissed: initialDismissed,
+      isMounted: false
+    };
+  });
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- Setting mount state in mount effect
+    setNudgeState(prev => ({
+      ...prev,
+      isMounted: true
+    }));
+  }, []);
+  const {
+    isDismissed
+  } = nudgeState;
   const handleOnDismiss = () => {
     const dismissedNudgesStorage = getLocalStorage();
     if (persistDismissal && id) {
       try {
         localStorage.setItem(STORAGE_NAME, JSON.stringify([...dismissedNudgesStorage, id]));
-      } catch (error) {}
-      setIsDismissed(true);
+      } catch {}
+      setNudgeState(prev => ({
+        ...prev,
+        isDismissed: true
+      }));
     }
     if (onDismiss) {
       onDismiss();
     }
   };
   useEffect(() => {
-    if (persistDismissal && id) {
+    if (persistDismissal && id && isPreviouslyDismissed) {
       const dismissedNudgesStorage = getLocalStorage();
-      let isDismissed = false;
-      if (dismissedNudgesStorage?.find(item => item === id)) {
-        setIsDismissed(true);
-        isDismissed = true;
-      }
-      if (isPreviouslyDismissed) {
-        isPreviouslyDismissed(isDismissed);
-      }
+      const wasDismissed = !!dismissedNudgesStorage?.find(item => item === id);
+      isPreviouslyDismissed(wasDismissed);
     }
-    setIsMounted(true);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [id, persistDismissal]);
-  if (persistDismissal && (isDismissed || !isMounted)) {
+  if (persistDismissal && (isDismissed || !nudgeState.isMounted)) {
     return null;
   }
   return /*#__PURE__*/jsxs("div", {

package/build/nudge/Nudge.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Nudge.mjs","sources":["../../src/nudge/Nudge.tsx"],"sourcesContent":["import { Illustration, Assets, type IllustrationNames } from '@wise/art';\nimport { clsx } from 'clsx';\nimport { ReactNode, useEffect, useState, MouseEvent } from 'react';\n\nimport Body from '../body';\nimport { Typography } from '../common';\nimport Link from '../link';\nimport type { AlertAction } from '../alert';\nimport IconButton from '../iconButton';\nimport { Cross } from '@transferwise/icons';\nimport { useIntl } from 'react-intl';\nimport closeBtnMessages from '../common/closeButton/CloseButton.messages';\n\n// WARNING: Changing this will cause nudges to reappear wherever persist nudge is used and privacy team will need to be updated too\nexport const STORAGE_NAME = 'dismissedNudges';\n\nconst getLocalStorage = (): string[] => {\n  try {\n    const storageItem = localStorage.getItem(STORAGE_NAME);\n\n    if (storageItem) {\n      const storage: unknown = JSON.parse(storageItem);\n\n      if (Array.isArray(storage)) {\n        return storage.map((item) => String(item));\n      }\n    }\n  } catch (error) {}\n\n  return [];\n};\n\ntype MediaNameType =\n  | `${Assets.GLOBE}`\n  | `${Assets.LOCK}`\n  | `${Assets.WALLET}`\n  | `${Assets.GEAR}`\n  | `${Assets.INVITE_LETTER}`\n  | `${Assets.PERSONAL_CARD}`\n  | `${Assets.BUSINESS_CARD}`\n  | `${Assets.HEART}`\n  | `${Assets.MULTI_CURRENCY}`\n  | `${Assets.SHOPPING_BAG}`\n  | `${Assets.FLOWER}`\n  | `${Assets.GIFT_BOX}`\n  | `${Assets.BACKPACK}`;\n\ntype BaseProps = {\n  /** @deprecated Use `mediaName` property instead. */\n  media?: ReactNode;\n  /** Media name  */\n  mediaName?: MediaNameType;\n  title: ReactNode;\n  link?: ReactNode;\n  href?: string;\n  onClick?: (event?: MouseEvent<HTMLSpanElement>) => void;\n  /** Fired when the user clicks on close button */\n  onDismiss?: () => void;\n  /** An optional call to action to sit under the main body of the nudge. If your label is short, use aria-label to provide more context */\n  action?: AlertAction;\n  className?: string;\n};\n\nexport interface OptionalId extends BaseProps {\n  id?: string;\n  persistDismissal?: false;\n  isPreviouslyDismissed?: undefined;\n}\n\nexport interface RequiredPersistProps extends BaseProps {\n  /** This ID should be completely unique to the page and feature as it uses a shared array which could conflict with other nudges in Wise */\n  id: string;\n  /** Use persist dismissal to keep the nudge dismissed using the browser's localStorage */\n  persistDismissal: true;\n  /**\n   * Fired on mount for determining if nudge has been dismissed before\n   *\n   * @param {boolean}  value - set to true if dismissed previously\n   */\n  isPreviouslyDismissed?: (value: boolean) => void;\n}\n\nexport type Props = OptionalId | RequiredPersistProps;\n\nconst Nudge = ({\n  mediaName,\n  title,\n  link,\n  href,\n  onClick,\n  onDismiss,\n  persistDismissal,\n  isPreviouslyDismissed,\n  id,\n  className,\n  action,\n}: Props) => {\n  const intl = useIntl();\n  const [isDismissed, setIsDismissed] = useState(false);\n  const [isMounted, setIsMounted] = useState(false);\n\n  const handleOnDismiss = () => {\n    const dismissedNudgesStorage = getLocalStorage();\n\n    if (persistDismissal && id) {\n      try {\n        localStorage.setItem(STORAGE_NAME, JSON.stringify([...dismissedNudgesStorage, id]));\n      } catch (error) {}\n\n      setIsDismissed(true);\n    }\n\n    if (onDismiss) {\n      onDismiss();\n    }\n  };\n\n  useEffect(() => {\n    if (persistDismissal && id) {\n      const dismissedNudgesStorage = getLocalStorage();\n      let isDismissed = false;\n\n      if (dismissedNudgesStorage?.find((item) => item === id)) {\n        setIsDismissed(true);\n        isDismissed = true;\n      }\n\n      if (isPreviouslyDismissed) {\n        isPreviouslyDismissed(isDismissed);\n      }\n    }\n\n    setIsMounted(true);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [id, persistDismissal]);\n\n  if (persistDismissal && (isDismissed || !isMounted)) {\n    return null;\n  }\n\n  return (\n    <div className={clsx('wds-nudge', className)} id={id}>\n      {!!mediaName && (\n        <div className=\"wds-nudge-media\">\n          <Illustration\n            name={mediaName as IllustrationNames}\n            className={clsx(`wds-nudge-media-${mediaName}`)}\n            size=\"small\"\n            disablePadding\n            alt=\"\"\n          />\n        </div>\n      )}\n      <div className=\"wds-nudge-container\">\n        <div className=\"wds-nudge-content\">\n          <Body type={Typography.BODY_LARGE} className={clsx('wds-nudge-body')}>\n            {title}\n          </Body>\n          {/* Merge these two Link instances into one */}\n          {link && (\n            <Link\n              href={href}\n              type={Typography.LINK_LARGE}\n              className=\"wds-nudge-link\"\n              onClick={onClick}\n            >\n              {link}\n            </Link>\n          )}\n          {action && (\n            <Link\n              href={action.href}\n              target={action.target}\n              className=\"m-t-1\"\n              aria-label={action['aria-label']}\n              type={Typography.LINK_LARGE}\n              onClick={action.onClick}\n            >\n              {action.text}\n            </Link>\n          )}\n        </div>\n        {onDismiss || persistDismissal ? (\n          <IconButton\n            size={24}\n            priority=\"tertiary\"\n            aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}\n            onClick={handleOnDismiss}\n          >\n            <Cross />\n          </IconButton>\n        ) : null}\n      </div>\n    </div>\n  );\n};\n\nexport default Nudge;\n"],"names":["STORAGE_NAME","getLocalStorage","storageItem","localStorage","getItem","storage","JSON","parse","Array","isArray","map","item","String","error","Nudge","mediaName","title","link","href","onClick","onDismiss","persistDismissal","isPreviouslyDismissed","id","className","action","intl","useIntl","isDismissed","setIsDismissed","useState","isMounted","setIsMounted","handleOnDismiss","dismissedNudgesStorage","setItem","stringify","useEffect","find","_jsxs","clsx","children","_jsx","Illustration","name","size","disablePadding","alt","Body","type","Typography","BODY_LARGE","Link","LINK_LARGE","target","text","IconButton","priority","formatMessage","closeBtnMessages","ariaLabel","Cross"],"mappings":"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"}
+{"version":3,"file":"Nudge.mjs","sources":["../../src/nudge/Nudge.tsx"],"sourcesContent":["import { Illustration, Assets, type IllustrationNames } from '@wise/art';\nimport { clsx } from 'clsx';\nimport { ReactNode, useEffect, useState, MouseEvent } from 'react';\n\nimport Body from '../body';\nimport { Typography } from '../common';\nimport Link from '../link';\nimport type { AlertAction } from '../alert';\nimport IconButton from '../iconButton';\nimport { Cross } from '@transferwise/icons';\nimport { useIntl } from 'react-intl';\nimport closeBtnMessages from '../common/closeButton/CloseButton.messages';\n\n// WARNING: Changing this will cause nudges to reappear wherever persist nudge is used and privacy team will need to be updated too\nexport const STORAGE_NAME = 'dismissedNudges';\n\nconst getLocalStorage = (): string[] => {\n  try {\n    const storageItem = localStorage.getItem(STORAGE_NAME);\n\n    if (storageItem) {\n      const storage: unknown = JSON.parse(storageItem);\n\n      if (Array.isArray(storage)) {\n        return storage.map((item) => String(item));\n      }\n    }\n  } catch (error) {}\n\n  return [];\n};\n\ntype MediaNameType =\n  | `${Assets.GLOBE}`\n  | `${Assets.LOCK}`\n  | `${Assets.WALLET}`\n  | `${Assets.GEAR}`\n  | `${Assets.INVITE_LETTER}`\n  | `${Assets.PERSONAL_CARD}`\n  | `${Assets.BUSINESS_CARD}`\n  | `${Assets.HEART}`\n  | `${Assets.MULTI_CURRENCY}`\n  | `${Assets.SHOPPING_BAG}`\n  | `${Assets.FLOWER}`\n  | `${Assets.GIFT_BOX}`\n  | `${Assets.BACKPACK}`;\n\ntype BaseProps = {\n  /** @deprecated Use `mediaName` property instead. */\n  media?: ReactNode;\n  /** Media name  */\n  mediaName?: MediaNameType;\n  title: ReactNode;\n  link?: ReactNode;\n  href?: string;\n  onClick?: (event?: MouseEvent<HTMLSpanElement>) => void;\n  /** Fired when the user clicks on close button */\n  onDismiss?: () => void;\n  /** An optional call to action to sit under the main body of the nudge. If your label is short, use aria-label to provide more context */\n  action?: AlertAction;\n  className?: string;\n};\n\nexport interface OptionalId extends BaseProps {\n  id?: string;\n  persistDismissal?: false;\n  isPreviouslyDismissed?: undefined;\n}\n\nexport interface RequiredPersistProps extends BaseProps {\n  /** This ID should be completely unique to the page and feature as it uses a shared array which could conflict with other nudges in Wise */\n  id: string;\n  /** Use persist dismissal to keep the nudge dismissed using the browser's localStorage */\n  persistDismissal: true;\n  /**\n   * Fired on mount for determining if nudge has been dismissed before\n   *\n   * @param {boolean}  value - set to true if dismissed previously\n   */\n  isPreviouslyDismissed?: (value: boolean) => void;\n}\n\nexport type Props = OptionalId | RequiredPersistProps;\n\nconst Nudge = ({\n  mediaName,\n  title,\n  link,\n  href,\n  onClick,\n  onDismiss,\n  persistDismissal,\n  isPreviouslyDismissed,\n  id,\n  className,\n  action,\n}: Props) => {\n  const intl = useIntl();\n  const [nudgeState, setNudgeState] = useState(() => {\n    const initialDismissed =\n      persistDismissal && id ? !!getLocalStorage()?.find((item) => item === id) : false;\n    return {\n      isDismissed: initialDismissed,\n      isMounted: false,\n    };\n  });\n\n  useEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- Setting mount state in mount effect\n    setNudgeState((prev) => ({ ...prev, isMounted: true }));\n  }, []);\n\n  const { isDismissed } = nudgeState;\n\n  const handleOnDismiss = () => {\n    const dismissedNudgesStorage = getLocalStorage();\n\n    if (persistDismissal && id) {\n      try {\n        localStorage.setItem(STORAGE_NAME, JSON.stringify([...dismissedNudgesStorage, id]));\n      } catch {}\n\n      setNudgeState((prev) => ({ ...prev, isDismissed: true }));\n    }\n\n    if (onDismiss) {\n      onDismiss();\n    }\n  };\n\n  useEffect(() => {\n    if (persistDismissal && id && isPreviouslyDismissed) {\n      const dismissedNudgesStorage = getLocalStorage();\n      const wasDismissed = !!dismissedNudgesStorage?.find((item) => item === id);\n      isPreviouslyDismissed(wasDismissed);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [id, persistDismissal]);\n\n  if (persistDismissal && (isDismissed || !nudgeState.isMounted)) {\n    return null;\n  }\n\n  return (\n    <div className={clsx('wds-nudge', className)} id={id}>\n      {!!mediaName && (\n        <div className=\"wds-nudge-media\">\n          <Illustration\n            name={mediaName}\n            className={clsx(`wds-nudge-media-${mediaName}`)}\n            size=\"small\"\n            disablePadding\n            alt=\"\"\n          />\n        </div>\n      )}\n      <div className=\"wds-nudge-container\">\n        <div className=\"wds-nudge-content\">\n          <Body type={Typography.BODY_LARGE} className={clsx('wds-nudge-body')}>\n            {title}\n          </Body>\n          {/* Merge these two Link instances into one */}\n          {link && (\n            <Link\n              href={href}\n              type={Typography.LINK_LARGE}\n              className=\"wds-nudge-link\"\n              onClick={onClick}\n            >\n              {link}\n            </Link>\n          )}\n          {action && (\n            <Link\n              href={action.href}\n              target={action.target}\n              className=\"m-t-1\"\n              aria-label={action['aria-label']}\n              type={Typography.LINK_LARGE}\n              onClick={action.onClick}\n            >\n              {action.text}\n            </Link>\n          )}\n        </div>\n        {onDismiss || persistDismissal ? (\n          <IconButton\n            size={24}\n            priority=\"tertiary\"\n            aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}\n            onClick={handleOnDismiss}\n          >\n            <Cross />\n          </IconButton>\n        ) : null}\n      </div>\n    </div>\n  );\n};\n\nexport default Nudge;\n"],"names":["STORAGE_NAME","getLocalStorage","storageItem","localStorage","getItem","storage","JSON","parse","Array","isArray","map","item","String","error","Nudge","mediaName","title","link","href","onClick","onDismiss","persistDismissal","isPreviouslyDismissed","id","className","action","intl","useIntl","nudgeState","setNudgeState","useState","initialDismissed","find","isDismissed","isMounted","useEffect","prev","handleOnDismiss","dismissedNudgesStorage","setItem","stringify","wasDismissed","_jsxs","clsx","children","_jsx","Illustration","name","size","disablePadding","alt","Body","type","Typography","BODY_LARGE","Link","LINK_LARGE","target","text","IconButton","priority","formatMessage","closeBtnMessages","ariaLabel","Cross"],"mappings":"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"}

package/build/phoneNumberInput/PhoneNumberInput.js

@@ -84,12 +84,12 @@ const PhoneNumberInput = ({
     locale,
     formatMessage
   } = reactIntl.useIntl();
+  const [randomId] = React.useState(() => Math.random().toString(36).slice(2, 8));
   const createId = (customID, backup) => {
     if (customID) {
       return customID + (backup ? `-${backup}` : '');
     }
-    const random = Math.random().toString(36).slice(2, 8);
-    return `${backup}-${random}`;
+    return `${backup}-${randomId}`;
   };
   // Link the first non-disabled input to the the Field label, if present
   const ids = {
@@ -112,13 +112,14 @@ const PhoneNumberInput = ({
     }
     return index$1.explodeNumberModel(cleanValue);
   });
-  const [broadcastedValue, setBroadcastedValue] = React.useState(null);
+  const broadcastedValueRef = React.useRef(internalValue);
   const [suffixDirty, setSuffixDirty] = React.useState(false);
   React.useEffect(() => {
-    if (internalValue.suffix) {
+    if (!suffixDirty && internalValue.suffix) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect -- Tracking when suffix becomes dirty
       setSuffixDirty(true);
     }
-  }, [internalValue.suffix]);
+  }, [internalValue.suffix, suffixDirty]);
   const countriesByPrefix = React.useMemo(() => groupCountriesByPrefix.groupCountriesByPrefix(sortArrayByProperty.sortArrayByProperty(excludeCountries.excludeCountries(countries.default, disabledCountries), 'iso3')), [disabledCountries]);
   const onSuffixChange = event => {
     const suffix = event.target.value;
@@ -140,19 +141,15 @@ const PhoneNumberInput = ({
     }
   };
   React.useEffect(() => {
-    if (broadcastedValue === null) {
-      setBroadcastedValue(internalValue);
-      return;
-    }
     const internalPhoneNumber = `${internalValue.prefix ?? ''}${internalValue.suffix}`;
-    const broadcastedPhoneNumber = `${broadcastedValue.prefix ?? ''}${broadcastedValue.suffix}`;
+    const broadcastedPhoneNumber = `${broadcastedValueRef.current.prefix ?? ''}${broadcastedValueRef.current.suffix}`;
     if (internalPhoneNumber === broadcastedPhoneNumber) {
       return;
     }
     const newValue = isValidPhoneNumber.isValidPhoneNumber(internalPhoneNumber) ? cleanNumber.cleanNumber(internalPhoneNumber) : null;
     onChange(newValue, internalValue.prefix ?? '');
-    setBroadcastedValue(internalValue);
-  }, [onChange, broadcastedValue, internalValue]);
+    broadcastedValueRef.current = internalValue;
+  }, [onChange, internalValue]);
   React.useEffect(() => {
     const labelRef = fieldLabelRef?.current;
     if (labelRef) {

package/build/phoneNumberInput/PhoneNumberInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneNumberInput.js","sources":["../../src/phoneNumberInput/PhoneNumberInput.tsx"],"sourcesContent":["import { useState, useEffect, useMemo, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, SizeLarge, SizeMedium, SizeSmall } from '../common';\nimport { useFieldLabelRef, useInputAttributes } from '../inputs/contexts';\nimport { useInputPaddings } from '../inputs/InputGroup';\nimport { SelectInput, SelectInputOptionContent, SelectInputProps } from '../inputs/SelectInput';\nimport messages from './PhoneNumberInput.messages';\nimport countries from './data/countries';\nimport {\n  explodeNumberModel,\n  isValidPhoneNumber,\n  cleanNumber,\n  setDefaultPrefix,\n  sortArrayByProperty,\n  groupCountriesByPrefix,\n  excludeCountries,\n  findCountryByPrefix,\n} from './utils';\nimport { PhoneNumber } from './utils/explodeNumberModel';\nimport { Input } from '../inputs/Input';\n\nconst ALLOWED_PHONE_CHARS = /^$|^[\\d-\\s]+$/;\n\nexport interface PhoneNumberInputProps {\n  id?: string;\n  'aria-labelledby'?: string;\n  required?: boolean;\n  disabled?: boolean;\n  initialValue?: string;\n  onChange: (value: string | null, prefix: string) => void;\n  onFocus?: React.FocusEventHandler<HTMLInputElement>;\n  onBlur?: () => void;\n  countryCode?: string;\n  /** @default 'Prefix' */\n  searchPlaceholder?: string;\n  /** @default 'md' */\n  size?: SizeSmall | SizeMedium | SizeLarge;\n  placeholder?: string;\n  /** @default {} */\n  selectProps?: Partial<SelectInputProps<string | null>>;\n  /**\n   * List of iso3 codes of countries to remove from the list\n   * @default []\n   */\n  disabledCountries?: readonly string[];\n}\n\nconst defaultSelectProps = {} satisfies PhoneNumberInputProps['selectProps'];\nconst defaultDisabledCountries = [] satisfies PhoneNumberInputProps['disabledCountries'];\n\nconst PhoneNumberInput = ({\n  id,\n  'aria-labelledby': ariaLabelledByProp,\n  required,\n  disabled,\n  initialValue,\n  onChange,\n  onFocus,\n  onBlur,\n  countryCode,\n  searchPlaceholder = 'Prefix',\n  size = Size.MEDIUM,\n  placeholder,\n  selectProps = defaultSelectProps,\n  disabledCountries = defaultDisabledCountries,\n}: PhoneNumberInputProps) => {\n  const countryCodeSelectRef = useRef<HTMLButtonElement>(null);\n  const phoneNumberInputRef = useRef<HTMLInputElement>(null);\n  const inputAttributes = useInputAttributes({ nonLabelable: true });\n  const { paddingInlineStart } = useInputPaddings();\n  const hasInputGroupAddonStart = paddingInlineStart != null;\n  const fieldLabelRef = useFieldLabelRef();\n  const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes['aria-labelledby'];\n\n  const { locale, formatMessage } = useIntl();\n\n  const createId = (customID: string | undefined, backup: string): string => {\n    if (customID) {\n      return customID + (backup ? `-${backup}` : '');\n    }\n    const random = Math.random().toString(36).slice(2, 8);\n    return `${backup}-${random}`;\n  };\n\n  // Link the first non-disabled input to the the Field label, if present\n  const ids = {\n    countryCode: {\n      label: createId(id, 'country-code-label'),\n      select: createId(id, 'country-code-select'),\n    },\n    phoneNumber: {\n      label: createId(id, 'phone-number-label'),\n      input: createId(id, id ? '' : 'phone-number-input'),\n    },\n  };\n\n  const [internalValue, setInternalValue] = useState<PhoneNumber>(() => {\n    const cleanValue = initialValue ? cleanNumber(initialValue) : null;\n\n    if (!cleanValue || !isValidPhoneNumber(cleanValue, 1)) {\n      return {\n        prefix: setDefaultPrefix(locale, countryCode),\n        suffix: '',\n      };\n    }\n\n    return explodeNumberModel(cleanValue);\n  });\n  const [broadcastedValue, setBroadcastedValue] = useState<PhoneNumber | null>(null);\n\n  const [suffixDirty, setSuffixDirty] = useState(false);\n  useEffect(() => {\n    if (internalValue.suffix) {\n      setSuffixDirty(true);\n    }\n  }, [internalValue.suffix]);\n\n  const countriesByPrefix = useMemo(\n    () =>\n      groupCountriesByPrefix(\n        sortArrayByProperty(excludeCountries(countries, disabledCountries), 'iso3'),\n      ),\n    [disabledCountries],\n  );\n\n  const onSuffixChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {\n    const suffix = event.target.value;\n    if (ALLOWED_PHONE_CHARS.test(suffix)) {\n      setInternalValue((prev) => ({ ...prev, suffix }));\n    }\n  };\n\n  const onPaste: React.ClipboardEventHandler<HTMLInputElement> = (event) => {\n    if (!event.nativeEvent.clipboardData) {\n      return;\n    }\n\n    const pastedValue = (event.nativeEvent.clipboardData.getData('text/plain') || '').replace(\n      /(\\s|-)+/g,\n      '',\n    );\n    const pastedNumber = explodeNumberModel(pastedValue);\n\n    if (\n      pastedNumber.prefix != null &&\n      countriesByPrefix.has(pastedNumber.prefix) &&\n      ALLOWED_PHONE_CHARS.test(pastedNumber.suffix)\n    ) {\n      setInternalValue(pastedNumber);\n    }\n  };\n\n  useEffect(() => {\n    if (broadcastedValue === null) {\n      setBroadcastedValue(internalValue);\n      return;\n    }\n\n    const internalPhoneNumber = `${internalValue.prefix ?? ''}${internalValue.suffix}`;\n    const broadcastedPhoneNumber = `${broadcastedValue.prefix ?? ''}${broadcastedValue.suffix}`;\n\n    if (internalPhoneNumber === broadcastedPhoneNumber) {\n      return;\n    }\n\n    const newValue = isValidPhoneNumber(internalPhoneNumber)\n      ? cleanNumber(internalPhoneNumber)\n      : null;\n\n    onChange(\n      newValue,\n      internalValue.prefix ?? '', // TODO: Allow `null` in public API\n    );\n    setBroadcastedValue(internalValue);\n  }, [onChange, broadcastedValue, internalValue]);\n\n  useEffect(() => {\n    const labelRef = fieldLabelRef?.current;\n\n    if (labelRef) {\n      const handleLabelClick = () => {\n        if (!selectProps.disabled) {\n          countryCodeSelectRef.current?.click();\n        } else {\n          phoneNumberInputRef.current?.focus();\n        }\n      };\n\n      labelRef.addEventListener('click', handleLabelClick);\n\n      return () => {\n        labelRef?.removeEventListener('click', handleLabelClick);\n      };\n    }\n  }, [fieldLabelRef, selectProps.disabled]);\n\n  return (\n    <fieldset {...inputAttributes} aria-labelledby={ariaLabelledBy} className=\"tw-telephone\">\n      <label className=\"sr-only\" id={ids.countryCode.label} htmlFor={ids.countryCode.select}>\n        {formatMessage(messages.countryCodeLabel)}\n      </label>\n      <div\n        className={`tw-telephone__country-select${\n          hasInputGroupAddonStart\n            ? ' tw-telephone__country-select--with-input-group-addon-start'\n            : ''\n        }`}\n      >\n        <SelectInput\n          triggerRef={countryCodeSelectRef}\n          placeholder={formatMessage(messages.selectInputPlaceholder)}\n          items={[...countriesByPrefix].map(([prefix, countries]) => ({\n            type: 'option',\n            value: prefix,\n            filterMatchers: [\n              prefix,\n              ...countries.map((country) => country.name),\n              ...countries.map((country) => country.iso3),\n            ],\n          }))}\n          value={internalValue.prefix}\n          renderValue={(prefix, withinTrigger) => (\n            <SelectInputOptionContent\n              title={prefix}\n              note={\n                withinTrigger\n                  ? undefined\n                  : countriesByPrefix\n                      .get(prefix)\n                      ?.map((country) => country.iso3)\n                      .join(', ')\n              }\n            />\n          )}\n          filterable\n          filterPlaceholder={searchPlaceholder}\n          disabled={disabled}\n          size={size}\n          id={ids.countryCode.select}\n          UNSAFE_triggerButtonProps={{\n            id: ids.countryCode.select,\n            'aria-labelledby': ids.countryCode.label,\n            'aria-describedby': undefined,\n            'aria-invalid': undefined,\n          }}\n          onChange={(prefix) => {\n            const country = prefix != null ? findCountryByPrefix(prefix) : null;\n            setInternalValue((prev) => ({ ...prev, prefix, format: country?.phoneFormat }));\n          }}\n          onClose={() => {\n            if (suffixDirty) {\n              onBlur?.();\n            }\n          }}\n          {...selectProps}\n        />\n      </div>\n      <label className=\"sr-only\" id={ids.phoneNumber.label} htmlFor={ids.phoneNumber.input}>\n        {formatMessage(messages.phoneNumberLabel)}\n      </label>\n      <div className=\"tw-telephone__number-input\">\n        <div className={`input-group input-group-${size} ${disabled ? 'disabled' : ''}`}>\n          <Input\n            ref={phoneNumberInputRef}\n            id={ids.phoneNumber.input}\n            autoComplete=\"tel-national\"\n            name=\"phoneNumber\"\n            inputMode=\"numeric\"\n            value={internalValue.suffix}\n            disabled={disabled}\n            required={required}\n            placeholder={placeholder}\n            aria-labelledby={ids.phoneNumber.label}\n            onChange={onSuffixChange}\n            onPaste={onPaste}\n            onFocus={onFocus}\n            onBlur={() => onBlur?.()}\n          />\n        </div>\n      </div>\n    </fieldset>\n  );\n};\n\nexport default PhoneNumberInput;\n"],"names":["ALLOWED_PHONE_CHARS","defaultSelectProps","defaultDisabledCountries","PhoneNumberInput","id","ariaLabelledByProp","required","disabled","initialValue","onChange","onFocus","onBlur","countryCode","searchPlaceholder","size","Size","MEDIUM","placeholder","selectProps","disabledCountries","countryCodeSelectRef","useRef","phoneNumberInputRef","inputAttributes","useInputAttributes","nonLabelable","paddingInlineStart","useInputPaddings","hasInputGroupAddonStart","fieldLabelRef","useFieldLabelRef","ariaLabelledBy","locale","formatMessage","useIntl","createId","customID","backup","random","Math","toString","slice","ids","label","select","phoneNumber","input","internalValue","setInternalValue","useState","cleanValue","cleanNumber","isValidPhoneNumber","prefix","setDefaultPrefix","suffix","explodeNumberModel","broadcastedValue","setBroadcastedValue","suffixDirty","setSuffixDirty","useEffect","countriesByPrefix","useMemo","groupCountriesByPrefix","sortArrayByProperty","excludeCountries","countries","onSuffixChange","event","target","value","test","prev","onPaste","nativeEvent","clipboardData","pastedValue","getData","replace","pastedNumber","has","internalPhoneNumber","broadcastedPhoneNumber","newValue","labelRef","current","handleLabelClick","click","focus","addEventListener","removeEventListener","_jsxs","className","children","_jsx","htmlFor","messages","countryCodeLabel","SelectInput","triggerRef","selectInputPlaceholder","items","map","type","filterMatchers","country","name","iso3","renderValue","withinTrigger","SelectInputOptionContent","title","note","undefined","get","join","filterable","filterPlaceholder","UNSAFE_triggerButtonProps","findCountryByPrefix","format","phoneFormat","onClose","phoneNumberLabel","Input","ref","autoComplete","inputMode"],"mappings":"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"}
+{"version":3,"file":"PhoneNumberInput.js","sources":["../../src/phoneNumberInput/PhoneNumberInput.tsx"],"sourcesContent":["import { useState, useEffect, useMemo, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, SizeLarge, SizeMedium, SizeSmall } from '../common';\nimport { useFieldLabelRef, useInputAttributes } from '../inputs/contexts';\nimport { useInputPaddings } from '../inputs/InputGroup';\nimport { SelectInput, SelectInputOptionContent, SelectInputProps } from '../inputs/SelectInput';\nimport messages from './PhoneNumberInput.messages';\nimport countries from './data/countries';\nimport {\n  explodeNumberModel,\n  isValidPhoneNumber,\n  cleanNumber,\n  setDefaultPrefix,\n  sortArrayByProperty,\n  groupCountriesByPrefix,\n  excludeCountries,\n  findCountryByPrefix,\n} from './utils';\nimport { PhoneNumber } from './utils/explodeNumberModel';\nimport { Input } from '../inputs/Input';\n\nconst ALLOWED_PHONE_CHARS = /^$|^[\\d-\\s]+$/;\n\nexport interface PhoneNumberInputProps {\n  id?: string;\n  'aria-labelledby'?: string;\n  required?: boolean;\n  disabled?: boolean;\n  initialValue?: string;\n  onChange: (value: string | null, prefix: string) => void;\n  onFocus?: React.FocusEventHandler<HTMLInputElement>;\n  onBlur?: () => void;\n  countryCode?: string;\n  /** @default 'Prefix' */\n  searchPlaceholder?: string;\n  /** @default 'md' */\n  size?: SizeSmall | SizeMedium | SizeLarge;\n  placeholder?: string;\n  /** @default {} */\n  selectProps?: Partial<SelectInputProps<string | null>>;\n  /**\n   * List of iso3 codes of countries to remove from the list\n   * @default []\n   */\n  disabledCountries?: readonly string[];\n}\n\nconst defaultSelectProps = {} satisfies PhoneNumberInputProps['selectProps'];\nconst defaultDisabledCountries = [] satisfies PhoneNumberInputProps['disabledCountries'];\n\nconst PhoneNumberInput = ({\n  id,\n  'aria-labelledby': ariaLabelledByProp,\n  required,\n  disabled,\n  initialValue,\n  onChange,\n  onFocus,\n  onBlur,\n  countryCode,\n  searchPlaceholder = 'Prefix',\n  size = Size.MEDIUM,\n  placeholder,\n  selectProps = defaultSelectProps,\n  disabledCountries = defaultDisabledCountries,\n}: PhoneNumberInputProps) => {\n  const countryCodeSelectRef = useRef<HTMLButtonElement>(null);\n  const phoneNumberInputRef = useRef<HTMLInputElement>(null);\n  const inputAttributes = useInputAttributes({ nonLabelable: true });\n  const { paddingInlineStart } = useInputPaddings();\n  const hasInputGroupAddonStart = paddingInlineStart != null;\n  const fieldLabelRef = useFieldLabelRef();\n  const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes['aria-labelledby'];\n\n  const { locale, formatMessage } = useIntl();\n\n  const [randomId] = useState(() => Math.random().toString(36).slice(2, 8));\n\n  const createId = (customID: string | undefined, backup: string): string => {\n    if (customID) {\n      return customID + (backup ? `-${backup}` : '');\n    }\n    return `${backup}-${randomId}`;\n  };\n\n  // Link the first non-disabled input to the the Field label, if present\n  const ids = {\n    countryCode: {\n      label: createId(id, 'country-code-label'),\n      select: createId(id, 'country-code-select'),\n    },\n    phoneNumber: {\n      label: createId(id, 'phone-number-label'),\n      input: createId(id, id ? '' : 'phone-number-input'),\n    },\n  };\n\n  const [internalValue, setInternalValue] = useState<PhoneNumber>(() => {\n    const cleanValue = initialValue ? cleanNumber(initialValue) : null;\n\n    if (!cleanValue || !isValidPhoneNumber(cleanValue, 1)) {\n      return {\n        prefix: setDefaultPrefix(locale, countryCode),\n        suffix: '',\n      };\n    }\n\n    return explodeNumberModel(cleanValue);\n  });\n  const broadcastedValueRef = useRef<PhoneNumber>(internalValue);\n\n  const [suffixDirty, setSuffixDirty] = useState(false);\n\n  useEffect(() => {\n    if (!suffixDirty && internalValue.suffix) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect -- Tracking when suffix becomes dirty\n      setSuffixDirty(true);\n    }\n  }, [internalValue.suffix, suffixDirty]);\n\n  const countriesByPrefix = useMemo(\n    () =>\n      groupCountriesByPrefix(\n        sortArrayByProperty(excludeCountries(countries, disabledCountries), 'iso3'),\n      ),\n    [disabledCountries],\n  );\n\n  const onSuffixChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {\n    const suffix = event.target.value;\n    if (ALLOWED_PHONE_CHARS.test(suffix)) {\n      setInternalValue((prev) => ({ ...prev, suffix }));\n    }\n  };\n\n  const onPaste: React.ClipboardEventHandler<HTMLInputElement> = (event) => {\n    if (!event.nativeEvent.clipboardData) {\n      return;\n    }\n\n    const pastedValue = (event.nativeEvent.clipboardData.getData('text/plain') || '').replace(\n      /(\\s|-)+/g,\n      '',\n    );\n    const pastedNumber = explodeNumberModel(pastedValue);\n\n    if (\n      pastedNumber.prefix != null &&\n      countriesByPrefix.has(pastedNumber.prefix) &&\n      ALLOWED_PHONE_CHARS.test(pastedNumber.suffix)\n    ) {\n      setInternalValue(pastedNumber);\n    }\n  };\n\n  useEffect(() => {\n    const internalPhoneNumber = `${internalValue.prefix ?? ''}${internalValue.suffix}`;\n    const broadcastedPhoneNumber = `${broadcastedValueRef.current.prefix ?? ''}${broadcastedValueRef.current.suffix}`;\n\n    if (internalPhoneNumber === broadcastedPhoneNumber) {\n      return;\n    }\n\n    const newValue = isValidPhoneNumber(internalPhoneNumber)\n      ? cleanNumber(internalPhoneNumber)\n      : null;\n\n    onChange(\n      newValue,\n      internalValue.prefix ?? '', // TODO: Allow `null` in public API\n    );\n    broadcastedValueRef.current = internalValue;\n  }, [onChange, internalValue]);\n\n  useEffect(() => {\n    const labelRef = fieldLabelRef?.current;\n\n    if (labelRef) {\n      const handleLabelClick = () => {\n        if (!selectProps.disabled) {\n          countryCodeSelectRef.current?.click();\n        } else {\n          phoneNumberInputRef.current?.focus();\n        }\n      };\n\n      labelRef.addEventListener('click', handleLabelClick);\n\n      return () => {\n        labelRef?.removeEventListener('click', handleLabelClick);\n      };\n    }\n  }, [fieldLabelRef, selectProps.disabled]);\n\n  return (\n    <fieldset {...inputAttributes} aria-labelledby={ariaLabelledBy} className=\"tw-telephone\">\n      <label className=\"sr-only\" id={ids.countryCode.label} htmlFor={ids.countryCode.select}>\n        {formatMessage(messages.countryCodeLabel)}\n      </label>\n      <div\n        className={`tw-telephone__country-select${\n          hasInputGroupAddonStart\n            ? ' tw-telephone__country-select--with-input-group-addon-start'\n            : ''\n        }`}\n      >\n        <SelectInput\n          triggerRef={countryCodeSelectRef}\n          placeholder={formatMessage(messages.selectInputPlaceholder)}\n          items={[...countriesByPrefix].map(([prefix, countries]) => ({\n            type: 'option',\n            value: prefix,\n            filterMatchers: [\n              prefix,\n              ...countries.map((country) => country.name),\n              ...countries.map((country) => country.iso3),\n            ],\n          }))}\n          value={internalValue.prefix}\n          renderValue={(prefix, withinTrigger) => (\n            <SelectInputOptionContent\n              title={prefix}\n              note={\n                withinTrigger\n                  ? undefined\n                  : countriesByPrefix\n                      .get(prefix)\n                      ?.map((country) => country.iso3)\n                      .join(', ')\n              }\n            />\n          )}\n          filterable\n          filterPlaceholder={searchPlaceholder}\n          disabled={disabled}\n          size={size}\n          id={ids.countryCode.select}\n          UNSAFE_triggerButtonProps={{\n            id: ids.countryCode.select,\n            'aria-labelledby': ids.countryCode.label,\n            'aria-describedby': undefined,\n            'aria-invalid': undefined,\n          }}\n          onChange={(prefix) => {\n            const country = prefix != null ? findCountryByPrefix(prefix) : null;\n            setInternalValue((prev) => ({ ...prev, prefix, format: country?.phoneFormat }));\n          }}\n          onClose={() => {\n            if (suffixDirty) {\n              onBlur?.();\n            }\n          }}\n          {...selectProps}\n        />\n      </div>\n      <label className=\"sr-only\" id={ids.phoneNumber.label} htmlFor={ids.phoneNumber.input}>\n        {formatMessage(messages.phoneNumberLabel)}\n      </label>\n      <div className=\"tw-telephone__number-input\">\n        <div className={`input-group input-group-${size} ${disabled ? 'disabled' : ''}`}>\n          <Input\n            ref={phoneNumberInputRef}\n            id={ids.phoneNumber.input}\n            autoComplete=\"tel-national\"\n            name=\"phoneNumber\"\n            inputMode=\"numeric\"\n            value={internalValue.suffix}\n            disabled={disabled}\n            required={required}\n            placeholder={placeholder}\n            aria-labelledby={ids.phoneNumber.label}\n            onChange={onSuffixChange}\n            onPaste={onPaste}\n            onFocus={onFocus}\n            onBlur={() => onBlur?.()}\n          />\n        </div>\n      </div>\n    </fieldset>\n  );\n};\n\nexport default PhoneNumberInput;\n"],"names":["ALLOWED_PHONE_CHARS","defaultSelectProps","defaultDisabledCountries","PhoneNumberInput","id","ariaLabelledByProp","required","disabled","initialValue","onChange","onFocus","onBlur","countryCode","searchPlaceholder","size","Size","MEDIUM","placeholder","selectProps","disabledCountries","countryCodeSelectRef","useRef","phoneNumberInputRef","inputAttributes","useInputAttributes","nonLabelable","paddingInlineStart","useInputPaddings","hasInputGroupAddonStart","fieldLabelRef","useFieldLabelRef","ariaLabelledBy","locale","formatMessage","useIntl","randomId","useState","Math","random","toString","slice","createId","customID","backup","ids","label","select","phoneNumber","input","internalValue","setInternalValue","cleanValue","cleanNumber","isValidPhoneNumber","prefix","setDefaultPrefix","suffix","explodeNumberModel","broadcastedValueRef","suffixDirty","setSuffixDirty","useEffect","countriesByPrefix","useMemo","groupCountriesByPrefix","sortArrayByProperty","excludeCountries","countries","onSuffixChange","event","target","value","test","prev","onPaste","nativeEvent","clipboardData","pastedValue","getData","replace","pastedNumber","has","internalPhoneNumber","broadcastedPhoneNumber","current","newValue","labelRef","handleLabelClick","click","focus","addEventListener","removeEventListener","_jsxs","className","children","_jsx","htmlFor","messages","countryCodeLabel","SelectInput","triggerRef","selectInputPlaceholder","items","map","type","filterMatchers","country","name","iso3","renderValue","withinTrigger","SelectInputOptionContent","title","note","undefined","get","join","filterable","filterPlaceholder","UNSAFE_triggerButtonProps","findCountryByPrefix","format","phoneFormat","onClose","phoneNumberLabel","Input","ref","autoComplete","inputMode"],"mappings":"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"}

package/build/phoneNumberInput/PhoneNumberInput.mjs

@@ -80,12 +80,12 @@ const PhoneNumberInput = ({
     locale,
     formatMessage
   } = useIntl();
+  const [randomId] = useState(() => Math.random().toString(36).slice(2, 8));
   const createId = (customID, backup) => {
     if (customID) {
       return customID + (backup ? `-${backup}` : '');
     }
-    const random = Math.random().toString(36).slice(2, 8);
-    return `${backup}-${random}`;
+    return `${backup}-${randomId}`;
   };
   // Link the first non-disabled input to the the Field label, if present
   const ids = {
@@ -108,13 +108,14 @@ const PhoneNumberInput = ({
     }
     return explodeNumberModel(cleanValue);
   });
-  const [broadcastedValue, setBroadcastedValue] = useState(null);
+  const broadcastedValueRef = useRef(internalValue);
   const [suffixDirty, setSuffixDirty] = useState(false);
   useEffect(() => {
-    if (internalValue.suffix) {
+    if (!suffixDirty && internalValue.suffix) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect -- Tracking when suffix becomes dirty
       setSuffixDirty(true);
     }
-  }, [internalValue.suffix]);
+  }, [internalValue.suffix, suffixDirty]);
   const countriesByPrefix = useMemo(() => groupCountriesByPrefix(sortArrayByProperty(excludeCountries(countries, disabledCountries), 'iso3')), [disabledCountries]);
   const onSuffixChange = event => {
     const suffix = event.target.value;
@@ -136,19 +137,15 @@ const PhoneNumberInput = ({
     }
   };
   useEffect(() => {
-    if (broadcastedValue === null) {
-      setBroadcastedValue(internalValue);
-      return;
-    }
     const internalPhoneNumber = `${internalValue.prefix ?? ''}${internalValue.suffix}`;
-    const broadcastedPhoneNumber = `${broadcastedValue.prefix ?? ''}${broadcastedValue.suffix}`;
+    const broadcastedPhoneNumber = `${broadcastedValueRef.current.prefix ?? ''}${broadcastedValueRef.current.suffix}`;
     if (internalPhoneNumber === broadcastedPhoneNumber) {
       return;
     }
     const newValue = isValidPhoneNumber(internalPhoneNumber) ? cleanNumber(internalPhoneNumber) : null;
     onChange(newValue, internalValue.prefix ?? '');
-    setBroadcastedValue(internalValue);
-  }, [onChange, broadcastedValue, internalValue]);
+    broadcastedValueRef.current = internalValue;
+  }, [onChange, internalValue]);
   useEffect(() => {
     const labelRef = fieldLabelRef?.current;
     if (labelRef) {