@transferwise/components 46.140.1 → 46.142.0

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, useCallback } 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 getIsDismissed = useCallback(\n    () => (persistDismissal && id ? !!getLocalStorage()?.find((item) => item === id) : false),\n    [persistDismissal, id],\n  );\n\n  const [nudgeState, setNudgeState] = useState(() => ({\n    isDismissed: getIsDismissed(),\n    isMounted: false,\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  useEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- Syncing dismissed state from localStorage on prop change\n    setNudgeState((prev) => ({ ...prev, isDismissed: getIsDismissed() }));\n  }, [getIsDismissed, id, persistDismissal]);\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","getIsDismissed","useCallback","find","nudgeState","setNudgeState","useState","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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcO,MAAMA,YAAY,GAAG;AAE5B,MAAMC,eAAe,GAAGA,MAAe;EACrC,IAAI;AACF,IAAA,MAAMC,WAAW,GAAGC,YAAY,CAACC,OAAO,CAACJ,YAAY,CAAC;AAEtD,IAAA,IAAIE,WAAW,EAAE;AACf,MAAA,MAAMG,OAAO,GAAYC,IAAI,CAACC,KAAK,CAACL,WAAW,CAAC;AAEhD,MAAA,IAAIM,KAAK,CAACC,OAAO,CAACJ,OAAO,CAAC,EAAE;QAC1B,OAAOA,OAAO,CAACK,GAAG,CAAEC,IAAI,IAAKC,MAAM,CAACD,IAAI,CAAC,CAAC;AAC5C,MAAA;AACF,IAAA;AACF,EAAA,CAAC,CAAC,OAAOE,KAAK,EAAE,CAAC;AAEjB,EAAA,OAAO,EAAE;AACX,CAAC;AAsDD,MAAMC,KAAK,GAAGA,CAAC;EACbC,SAAS;EACTC,KAAK;EACLC,IAAI;EACJC,IAAI;EACJC,OAAO;EACPC,SAAS;EACTC,gBAAgB;EAChBC,qBAAqB;EACrBC,EAAE;EACFC,SAAS;AACTC,EAAAA;AAAM,CACA,KAAI;AACV,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE;AACtB,EAAA,MAAMC,cAAc,GAAGC,iBAAW,CAChC,MAAOR,gBAAgB,IAAIE,EAAE,GAAG,CAAC,CAACtB,eAAe,EAAE,EAAE6B,IAAI,CAAEnB,IAAI,IAAKA,IAAI,KAAKY,EAAE,CAAC,GAAG,KAAM,EACzF,CAACF,gBAAgB,EAAEE,EAAE,CAAC,CACvB;EAED,MAAM,CAACQ,UAAU,EAAEC,aAAa,CAAC,GAAGC,cAAQ,CAAC,OAAO;IAClDC,WAAW,EAAEN,cAAc,EAAE;AAC7BO,IAAAA,SAAS,EAAE;AACZ,GAAA,CAAC,CAAC;AAEHC,EAAAA,eAAS,CAAC,MAAK;AACb;IACAJ,aAAa,CAAEK,IAAI,KAAM;AAAE,MAAA,GAAGA,IAAI;AAAEF,MAAAA,SAAS,EAAE;AAAI,KAAE,CAAC,CAAC;EACzD,CAAC,EAAE,EAAE,CAAC;AAENC,EAAAA,eAAS,CAAC,MAAK;AACb;IACAJ,aAAa,CAAEK,IAAI,KAAM;AAAE,MAAA,GAAGA,IAAI;MAAEH,WAAW,EAAEN,cAAc;AAAE,KAAE,CAAC,CAAC;EACvE,CAAC,EAAE,CAACA,cAAc,EAAEL,EAAE,EAAEF,gBAAgB,CAAC,CAAC;EAE1C,MAAM;AAAEa,IAAAA;AAAW,GAAE,GAAGH,UAAU;EAElC,MAAMO,eAAe,GAAGA,MAAK;AAC3B,IAAA,MAAMC,sBAAsB,GAAGtC,eAAe,EAAE;IAEhD,IAAIoB,gBAAgB,IAAIE,EAAE,EAAE;MAC1B,IAAI;AACFpB,QAAAA,YAAY,CAACqC,OAAO,CAACxC,YAAY,EAAEM,IAAI,CAACmC,SAAS,CAAC,CAAC,GAAGF,sBAAsB,EAAEhB,EAAE,CAAC,CAAC,CAAC;MACrF,CAAC,CAAC,MAAM,CAAC;MAETS,aAAa,CAAEK,IAAI,KAAM;AAAE,QAAA,GAAGA,IAAI;AAAEH,QAAAA,WAAW,EAAE;AAAI,OAAE,CAAC,CAAC;AAC3D,IAAA;AAEA,IAAA,IAAId,SAAS,EAAE;AACbA,MAAAA,SAAS,EAAE;AACb,IAAA;EACF,CAAC;AAEDgB,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,IAAIf,gBAAgB,IAAIE,EAAE,IAAID,qBAAqB,EAAE;AACnD,MAAA,MAAMiB,sBAAsB,GAAGtC,eAAe,EAAE;AAChD,MAAA,MAAMyC,YAAY,GAAG,CAAC,CAACH,sBAAsB,EAAET,IAAI,CAAEnB,IAAI,IAAKA,IAAI,KAAKY,EAAE,CAAC;MAC1ED,qBAAqB,CAACoB,YAAY,CAAC;AACrC,IAAA;AACA;AACF,EAAA,CAAC,EAAE,CAACnB,EAAE,EAAEF,gBAAgB,CAAC,CAAC;EAE1B,IAAIA,gBAAgB,KAAKa,WAAW,IAAI,CAACH,UAAU,CAACI,SAAS,CAAC,EAAE;AAC9D,IAAA,OAAO,IAAI;AACb,EAAA;AAEA,EAAA,oBACEQ,eAAA,CAAA,KAAA,EAAA;AAAKnB,IAAAA,SAAS,EAAEoB,SAAI,CAAC,WAAW,EAAEpB,SAAS,CAAE;AAACD,IAAAA,EAAE,EAAEA,EAAG;AAAAsB,IAAAA,QAAA,EAAA,CAClD,CAAC,CAAC9B,SAAS,iBACV+B,cAAA,CAAA,KAAA,EAAA;AAAKtB,MAAAA,SAAS,EAAC,iBAAiB;MAAAqB,QAAA,eAC9BC,cAAA,CAACC,gBAAY,EAAA;AACXC,QAAAA,IAAI,EAAEjC,SAAU;AAChBS,QAAAA,SAAS,EAAEoB,SAAI,CAAC,CAAA,gBAAA,EAAmB7B,SAAS,EAAE,CAAE;AAChDkC,QAAAA,IAAI,EAAC,OAAO;QACZC,cAAc,EAAA,IAAA;AACdC,QAAAA,GAAG,EAAC;OAAE;KAEL,CACN,eACDR,eAAA,CAAA,KAAA,EAAA;AAAKnB,MAAAA,SAAS,EAAC,qBAAqB;AAAAqB,MAAAA,QAAA,gBAClCF,eAAA,CAAA,KAAA,EAAA;AAAKnB,QAAAA,SAAS,EAAC,mBAAmB;QAAAqB,QAAA,EAAA,cAChCC,cAAA,CAACM,YAAI,EAAA;UAACC,IAAI,EAAEC,qBAAU,CAACC,UAAW;AAAC/B,UAAAA,SAAS,EAAEoB,SAAI,CAAC,gBAAgB,CAAE;AAAAC,UAAAA,QAAA,EAClE7B;AAAK,SACF,CACN,EACCC,IAAI,iBACH6B,cAAA,CAACU,YAAI,EAAA;AACHtC,UAAAA,IAAI,EAAEA,IAAK;UACXmC,IAAI,EAAEC,qBAAU,CAACG,UAAW;AAC5BjC,UAAAA,SAAS,EAAC,gBAAgB;AAC1BL,UAAAA,OAAO,EAAEA,OAAQ;AAAA0B,UAAAA,QAAA,EAEhB5B;AAAI,SACD,CACP,EACAQ,MAAM,iBACLqB,cAAA,CAACU,YAAI,EAAA;UACHtC,IAAI,EAAEO,MAAM,CAACP,IAAK;UAClBwC,MAAM,EAAEjC,MAAM,CAACiC,MAAO;AACtBlC,UAAAA,SAAS,EAAC,OAAO;UACjB,YAAA,EAAYC,MAAM,CAAC,YAAY,CAAE;UACjC4B,IAAI,EAAEC,qBAAU,CAACG,UAAW;UAC5BtC,OAAO,EAAEM,MAAM,CAACN,OAAQ;UAAA0B,QAAA,EAEvBpB,MAAM,CAACkC;AAAI,SACR,CACP;OACE,CACL,EAACvC,SAAS,IAAIC,gBAAgB,gBAC5ByB,cAAA,CAACc,kBAAU,EAAA;AACTX,QAAAA,IAAI,EAAE,EAAG;AACTY,QAAAA,QAAQ,EAAC,UAAU;AACnB,QAAA,YAAA,EAAYnC,IAAI,CAACoC,aAAa,CAACC,4BAAgB,CAACC,SAAS,CAAE;AAC3D7C,QAAAA,OAAO,EAAEmB,eAAgB;AAAAO,QAAAA,QAAA,eAEzBC,cAAA,CAACmB,WAAK,EAAA,EAAA;OACI,CAAC,GACX,IAAI;AAAA,KACL,CACP;AAAA,GAAK,CAAC;AAEV;;;;;"}

package/build/nudge/Nudge.mjs

@@ -1,6 +1,6 @@
 import { Illustration } from '@wise/art';
 import { clsx } from 'clsx';
-import { useState, useEffect } from 'react';
+import { useCallback, useState, useEffect } from 'react';
 import Body from '../body/Body.mjs';
 import '../common/theme.mjs';
 import '../common/direction.mjs';
@@ -56,36 +56,52 @@ const Nudge = ({
   action
 }) => {
   const intl = useIntl();
-  const [isDismissed, setIsDismissed] = useState(false);
-  const [isMounted, setIsMounted] = useState(false);
+  const getIsDismissed = useCallback(() => persistDismissal && id ? !!getLocalStorage()?.find(item => item === id) : false, [persistDismissal, id]);
+  const [nudgeState, setNudgeState] = useState(() => ({
+    isDismissed: getIsDismissed(),
+    isMounted: false
+  }));
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- Setting mount state in mount effect
+    setNudgeState(prev => ({
+      ...prev,
+      isMounted: true
+    }));
+  }, []);
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- Syncing dismissed state from localStorage on prop change
+    setNudgeState(prev => ({
+      ...prev,
+      isDismissed: getIsDismissed()
+    }));
+  }, [getIsDismissed, id, persistDismissal]);
+  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, useCallback } 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 getIsDismissed = useCallback(\n    () => (persistDismissal && id ? !!getLocalStorage()?.find((item) => item === id) : false),\n    [persistDismissal, id],\n  );\n\n  const [nudgeState, setNudgeState] = useState(() => ({\n    isDismissed: getIsDismissed(),\n    isMounted: false,\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  useEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- Syncing dismissed state from localStorage on prop change\n    setNudgeState((prev) => ({ ...prev, isDismissed: getIsDismissed() }));\n  }, [getIsDismissed, id, persistDismissal]);\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","getIsDismissed","useCallback","find","nudgeState","setNudgeState","useState","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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcO,MAAMA,YAAY,GAAG;AAE5B,MAAMC,eAAe,GAAGA,MAAe;EACrC,IAAI;AACF,IAAA,MAAMC,WAAW,GAAGC,YAAY,CAACC,OAAO,CAACJ,YAAY,CAAC;AAEtD,IAAA,IAAIE,WAAW,EAAE;AACf,MAAA,MAAMG,OAAO,GAAYC,IAAI,CAACC,KAAK,CAACL,WAAW,CAAC;AAEhD,MAAA,IAAIM,KAAK,CAACC,OAAO,CAACJ,OAAO,CAAC,EAAE;QAC1B,OAAOA,OAAO,CAACK,GAAG,CAAEC,IAAI,IAAKC,MAAM,CAACD,IAAI,CAAC,CAAC;AAC5C,MAAA;AACF,IAAA;AACF,EAAA,CAAC,CAAC,OAAOE,KAAK,EAAE,CAAC;AAEjB,EAAA,OAAO,EAAE;AACX,CAAC;AAsDD,MAAMC,KAAK,GAAGA,CAAC;EACbC,SAAS;EACTC,KAAK;EACLC,IAAI;EACJC,IAAI;EACJC,OAAO;EACPC,SAAS;EACTC,gBAAgB;EAChBC,qBAAqB;EACrBC,EAAE;EACFC,SAAS;AACTC,EAAAA;AAAM,CACA,KAAI;AACV,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE;AACtB,EAAA,MAAMC,cAAc,GAAGC,WAAW,CAChC,MAAOR,gBAAgB,IAAIE,EAAE,GAAG,CAAC,CAACtB,eAAe,EAAE,EAAE6B,IAAI,CAAEnB,IAAI,IAAKA,IAAI,KAAKY,EAAE,CAAC,GAAG,KAAM,EACzF,CAACF,gBAAgB,EAAEE,EAAE,CAAC,CACvB;EAED,MAAM,CAACQ,UAAU,EAAEC,aAAa,CAAC,GAAGC,QAAQ,CAAC,OAAO;IAClDC,WAAW,EAAEN,cAAc,EAAE;AAC7BO,IAAAA,SAAS,EAAE;AACZ,GAAA,CAAC,CAAC;AAEHC,EAAAA,SAAS,CAAC,MAAK;AACb;IACAJ,aAAa,CAAEK,IAAI,KAAM;AAAE,MAAA,GAAGA,IAAI;AAAEF,MAAAA,SAAS,EAAE;AAAI,KAAE,CAAC,CAAC;EACzD,CAAC,EAAE,EAAE,CAAC;AAENC,EAAAA,SAAS,CAAC,MAAK;AACb;IACAJ,aAAa,CAAEK,IAAI,KAAM;AAAE,MAAA,GAAGA,IAAI;MAAEH,WAAW,EAAEN,cAAc;AAAE,KAAE,CAAC,CAAC;EACvE,CAAC,EAAE,CAACA,cAAc,EAAEL,EAAE,EAAEF,gBAAgB,CAAC,CAAC;EAE1C,MAAM;AAAEa,IAAAA;AAAW,GAAE,GAAGH,UAAU;EAElC,MAAMO,eAAe,GAAGA,MAAK;AAC3B,IAAA,MAAMC,sBAAsB,GAAGtC,eAAe,EAAE;IAEhD,IAAIoB,gBAAgB,IAAIE,EAAE,EAAE;MAC1B,IAAI;AACFpB,QAAAA,YAAY,CAACqC,OAAO,CAACxC,YAAY,EAAEM,IAAI,CAACmC,SAAS,CAAC,CAAC,GAAGF,sBAAsB,EAAEhB,EAAE,CAAC,CAAC,CAAC;MACrF,CAAC,CAAC,MAAM,CAAC;MAETS,aAAa,CAAEK,IAAI,KAAM;AAAE,QAAA,GAAGA,IAAI;AAAEH,QAAAA,WAAW,EAAE;AAAI,OAAE,CAAC,CAAC;AAC3D,IAAA;AAEA,IAAA,IAAId,SAAS,EAAE;AACbA,MAAAA,SAAS,EAAE;AACb,IAAA;EACF,CAAC;AAEDgB,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAIf,gBAAgB,IAAIE,EAAE,IAAID,qBAAqB,EAAE;AACnD,MAAA,MAAMiB,sBAAsB,GAAGtC,eAAe,EAAE;AAChD,MAAA,MAAMyC,YAAY,GAAG,CAAC,CAACH,sBAAsB,EAAET,IAAI,CAAEnB,IAAI,IAAKA,IAAI,KAAKY,EAAE,CAAC;MAC1ED,qBAAqB,CAACoB,YAAY,CAAC;AACrC,IAAA;AACA;AACF,EAAA,CAAC,EAAE,CAACnB,EAAE,EAAEF,gBAAgB,CAAC,CAAC;EAE1B,IAAIA,gBAAgB,KAAKa,WAAW,IAAI,CAACH,UAAU,CAACI,SAAS,CAAC,EAAE;AAC9D,IAAA,OAAO,IAAI;AACb,EAAA;AAEA,EAAA,oBACEQ,IAAA,CAAA,KAAA,EAAA;AAAKnB,IAAAA,SAAS,EAAEoB,IAAI,CAAC,WAAW,EAAEpB,SAAS,CAAE;AAACD,IAAAA,EAAE,EAAEA,EAAG;AAAAsB,IAAAA,QAAA,EAAA,CAClD,CAAC,CAAC9B,SAAS,iBACV+B,GAAA,CAAA,KAAA,EAAA;AAAKtB,MAAAA,SAAS,EAAC,iBAAiB;MAAAqB,QAAA,eAC9BC,GAAA,CAACC,YAAY,EAAA;AACXC,QAAAA,IAAI,EAAEjC,SAAU;AAChBS,QAAAA,SAAS,EAAEoB,IAAI,CAAC,CAAA,gBAAA,EAAmB7B,SAAS,EAAE,CAAE;AAChDkC,QAAAA,IAAI,EAAC,OAAO;QACZC,cAAc,EAAA,IAAA;AACdC,QAAAA,GAAG,EAAC;OAAE;KAEL,CACN,eACDR,IAAA,CAAA,KAAA,EAAA;AAAKnB,MAAAA,SAAS,EAAC,qBAAqB;AAAAqB,MAAAA,QAAA,gBAClCF,IAAA,CAAA,KAAA,EAAA;AAAKnB,QAAAA,SAAS,EAAC,mBAAmB;QAAAqB,QAAA,EAAA,cAChCC,GAAA,CAACM,IAAI,EAAA;UAACC,IAAI,EAAEC,UAAU,CAACC,UAAW;AAAC/B,UAAAA,SAAS,EAAEoB,IAAI,CAAC,gBAAgB,CAAE;AAAAC,UAAAA,QAAA,EAClE7B;AAAK,SACF,CACN,EACCC,IAAI,iBACH6B,GAAA,CAACU,IAAI,EAAA;AACHtC,UAAAA,IAAI,EAAEA,IAAK;UACXmC,IAAI,EAAEC,UAAU,CAACG,UAAW;AAC5BjC,UAAAA,SAAS,EAAC,gBAAgB;AAC1BL,UAAAA,OAAO,EAAEA,OAAQ;AAAA0B,UAAAA,QAAA,EAEhB5B;AAAI,SACD,CACP,EACAQ,MAAM,iBACLqB,GAAA,CAACU,IAAI,EAAA;UACHtC,IAAI,EAAEO,MAAM,CAACP,IAAK;UAClBwC,MAAM,EAAEjC,MAAM,CAACiC,MAAO;AACtBlC,UAAAA,SAAS,EAAC,OAAO;UACjB,YAAA,EAAYC,MAAM,CAAC,YAAY,CAAE;UACjC4B,IAAI,EAAEC,UAAU,CAACG,UAAW;UAC5BtC,OAAO,EAAEM,MAAM,CAACN,OAAQ;UAAA0B,QAAA,EAEvBpB,MAAM,CAACkC;AAAI,SACR,CACP;OACE,CACL,EAACvC,SAAS,IAAIC,gBAAgB,gBAC5ByB,GAAA,CAACc,UAAU,EAAA;AACTX,QAAAA,IAAI,EAAE,EAAG;AACTY,QAAAA,QAAQ,EAAC,UAAU;AACnB,QAAA,YAAA,EAAYnC,IAAI,CAACoC,aAAa,CAACC,gBAAgB,CAACC,SAAS,CAAE;AAC3D7C,QAAAA,OAAO,EAAEmB,eAAgB;AAAAO,QAAAA,QAAA,eAEzBC,GAAA,CAACmB,KAAK,EAAA,EAAA;OACI,CAAC,GACX,IAAI;AAAA,KACL,CACP;AAAA,GAAK,CAAC;AAEV;;;;"}

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) {

package/build/phoneNumberInput/PhoneNumberInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneNumberInput.mjs","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.mjs","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/promoCard/PromoCardGroup.js

@@ -20,8 +20,40 @@ const PromoCardGroup = ({
   onChange = () => {},
   testId
 }) => {
-  const [state, setState] = React.useState(defaultChecked);
-  const [containerRole, setContainerRole] = React.useState(null);
+  const [promoCardState, setPromoCardState] = React.useState({
+    defaultChecked,
+    state: defaultChecked
+  });
+  React.useEffect(() => {
+    if (promoCardState.defaultChecked !== defaultChecked) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect -- Syncing defaultChecked prop to internal state
+      setPromoCardState({
+        defaultChecked,
+        state: defaultChecked
+      });
+    }
+  }, [defaultChecked, promoCardState.defaultChecked]);
+  const {
+    state
+  } = promoCardState;
+  const setState = newState => setPromoCardState(prev => ({
+    ...prev,
+    state: newState
+  }));
+  // Derive container role from children
+  const containerRole = React.useMemo(() => {
+    // Collect an array of types from the children PromoCard components
+    const types = React__default.default.Children.map(children, child => {
+      if (/*#__PURE__*/React__default.default.isValidElement(child) && child.props.type) {
+        return child.props.type;
+      }
+      return null;
+    })?.filter(type => type !== null && type !== undefined) ?? [];
+    // Check if all types are the same
+    const allTypesAreTheSame = types.every(type => type === types[0]);
+    // If all types are the same and the type is 'radio', return 'radiogroup'
+    return allTypesAreTheSame && types[0] === 'radio' ? 'radiogroup' : null;
+  }, [children]);
   /**
    * The context value for the PromoCardGroup.
    *
@@ -52,20 +84,6 @@ const PromoCardGroup = ({
     'data-testid': testId,
     role: containerRole // Add the role attribute here
   };
-  React.useEffect(() => {
-    setState(defaultChecked);
-    // Collect an array of types from the children PromoCard components
-    const types = React__default.default.Children.map(children, child => {
-      if (/*#__PURE__*/React__default.default.isValidElement(child) && child.props.type) {
-        return child.props.type;
-      }
-      return null;
-    })?.filter(type => type !== null && type !== undefined) ?? [];
-    // Check if all types are the same
-    const allTypesAreTheSame = types.every(type => type === types[0]);
-    // If all types are the same and the type is 'radio', set the container role
-    setContainerRole(allTypesAreTheSame && types[0] === 'radio' ? 'radiogroup' : null);
-  }, [defaultChecked, children]);
   return /*#__PURE__*/jsxRuntime.jsx(PromoCardContext.PromoCardContext.Provider, {
     value: contextValue,
     children: /*#__PURE__*/jsxRuntime.jsx("div", {

package/build/promoCard/PromoCardGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"PromoCardGroup.js","sources":["../../src/promoCard/PromoCardGroup.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { FunctionComponent, ReactNode, useState, useEffect, useMemo } from 'react';\n\nimport { PromoCardProps } from './PromoCard';\nimport PromoCardContext from './PromoCardContext';\n\nexport type AriaRoleRadioGroup = 'radiogroup';\n\nexport interface PromoCardGroupProps {\n  /**\n   * Optional class name(s) to add to the group container.\n   */\n  className?: string;\n  /**\n   * The PromoCard components to display inside the group.\n   */\n  children: ReactNode;\n  /**\n   * The default checked for the group.\n   */\n  defaultChecked?: string;\n  /**\n   * Optional ID to add to the group container.\n   */\n  id?: string;\n  /**\n   * Whether the group is disabled or not.\n   */\n  isDisabled?: boolean;\n  /**\n   * Optional label to display above the group.\n   */\n  label?: string;\n  /**\n   * Optional function to call when the group value changes.\n   */\n  onChange?: (value: string) => void;\n  /**\n   * Optional ID to add to the group container for testing purposes.\n   */\n  testId?: string;\n}\n\n/**\n * PromoCardGroup component.\n *\n * A PromoCardGroup is a container for PromoCard components that allows the user to select one or more\n * cards from a group. It can be used to display a set of related options, and can be customized with\n * various props to suit different use cases.\n *\n * @param {ReactNode} children - The PromoCard components to display inside the group.\n * @param {string} className - Optional class name(s) to add to the group container.\n * @param {string} defaultChecked - The default value for the group.\n * @param {string} id - Optional ID to add to the group container.\n * @param {boolean} isDisabled=false - Whether the group is disabled or not.\n * @param {string} label - Optional label to display above the group.\n * @param {Function} onChange - Optional function to call when the group value changes.\n * @param {string} testId - Optional ID to add to the group container for testing purposes.\n * @returns {React.JSX.Element} - The PromoCardGroup component.\n */\nconst PromoCardGroup: FunctionComponent<PromoCardGroupProps> = ({\n  children,\n  className,\n  defaultChecked = '',\n  id,\n  isDisabled = false,\n  onChange = () => {},\n  testId,\n}) => {\n  const [state, setState] = useState<string>(defaultChecked);\n  const [containerRole, setContainerRole] = useState<string | null>(null);\n\n  /**\n   * The context value for the PromoCardGroup.\n   *\n   * The context value is an object that contains the current state of the\n   * group, whether the group is disabled or not, and a function to call when\n   * the group value changes. This value is used to provide context to child\n   * PromoCard components, allowing them to interact with the group and update\n   * its state.\n   */\n  const contextValue = useMemo(() => {\n    const handleOnChange = (value: string) => {\n      setState(value);\n      onChange(value);\n    };\n\n    return { state, isDisabled, onChange: handleOnChange };\n  }, [state, isDisabled, onChange]);\n\n  const commonClasses = clsx(\n    {\n      'np-CardGroup': true,\n      'is-disabled': isDisabled,\n    },\n    className,\n  );\n\n  const commonProps = {\n    className: commonClasses,\n    id,\n    'data-testid': testId,\n    role: containerRole as AriaRoleRadioGroup | undefined, // Add the role attribute here\n  };\n\n  useEffect(() => {\n    setState(defaultChecked);\n\n    // Collect an array of types from the children PromoCard components\n    const types =\n      React.Children.map(children, (child) => {\n        if (React.isValidElement<PromoCardProps>(child) && child.props.type) {\n          return child.props.type;\n        }\n        return null;\n      })?.filter((type): type is 'radio' | 'checkbox' => type !== null && type !== undefined) ?? [];\n\n    // Check if all types are the same\n    const allTypesAreTheSame = types.every((type) => type === types[0]);\n\n    // If all types are the same and the type is 'radio', set the container role\n    setContainerRole(allTypesAreTheSame && types[0] === 'radio' ? 'radiogroup' : null);\n  }, [defaultChecked, children]);\n\n  return (\n    <PromoCardContext.Provider value={contextValue}>\n      <div {...commonProps}>{children}</div>\n    </PromoCardContext.Provider>\n  );\n};\n\nexport default React.memo(PromoCardGroup);\n"],"names":["PromoCardGroup","children","className","defaultChecked","id","isDisabled","onChange","testId","state","setState","useState","containerRole","setContainerRole","contextValue","useMemo","handleOnChange","value","commonClasses","clsx","commonProps","role","useEffect","types","React","Children","map","child","isValidElement","props","type","filter","undefined","allTypesAreTheSame","every","_jsx","PromoCardContext","Provider","memo"],"mappings":";;;;;;;;;;;;;AA4DA,MAAMA,cAAc,GAA2CA,CAAC;EAC9DC,QAAQ;EACRC,SAAS;AACTC,EAAAA,cAAc,GAAG,EAAE;EACnBC,EAAE;AACFC,EAAAA,UAAU,GAAG,KAAK;AAClBC,EAAAA,QAAQ,GAAGA,MAAK,CAAE,CAAC;AACnBC,EAAAA;AAAM,CACP,KAAI;EACH,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGC,cAAQ,CAASP,cAAc,CAAC;EAC1D,MAAM,CAACQ,aAAa,EAAEC,gBAAgB,CAAC,GAAGF,cAAQ,CAAgB,IAAI,CAAC;AAEvE;;;;;;;;AAQG;AACH,EAAA,MAAMG,YAAY,GAAGC,aAAO,CAAC,MAAK;IAChC,MAAMC,cAAc,GAAIC,KAAa,IAAI;MACvCP,QAAQ,CAACO,KAAK,CAAC;MACfV,QAAQ,CAACU,KAAK,CAAC;IACjB,CAAC;IAED,OAAO;MAAER,KAAK;MAAEH,UAAU;AAAEC,MAAAA,QAAQ,EAAES;KAAgB;EACxD,CAAC,EAAE,CAACP,KAAK,EAAEH,UAAU,EAAEC,QAAQ,CAAC,CAAC;EAEjC,MAAMW,aAAa,GAAGC,SAAI,CACxB;AACE,IAAA,cAAc,EAAE,IAAI;AACpB,IAAA,aAAa,EAAEb;GAChB,EACDH,SAAS,CACV;AAED,EAAA,MAAMiB,WAAW,GAAG;AAClBjB,IAAAA,SAAS,EAAEe,aAAa;IACxBb,EAAE;AACF,IAAA,aAAa,EAAEG,MAAM;IACrBa,IAAI,EAAET,aAA+C;GACtD;AAEDU,EAAAA,eAAS,CAAC,MAAK;IACbZ,QAAQ,CAACN,cAAc,CAAC;AAExB;IACA,MAAMmB,KAAK,GACTC,sBAAK,CAACC,QAAQ,CAACC,GAAG,CAACxB,QAAQ,EAAGyB,KAAK,IAAI;AACrC,MAAA,iBAAIH,sBAAK,CAACI,cAAc,CAAiBD,KAAK,CAAC,IAAIA,KAAK,CAACE,KAAK,CAACC,IAAI,EAAE;AACnE,QAAA,OAAOH,KAAK,CAACE,KAAK,CAACC,IAAI;AACzB,MAAA;AACA,MAAA,OAAO,IAAI;AACb,IAAA,CAAC,CAAC,EAAEC,MAAM,CAAED,IAAI,IAAmCA,IAAI,KAAK,IAAI,IAAIA,IAAI,KAAKE,SAAS,CAAC,IAAI,EAAE;AAE/F;AACA,IAAA,MAAMC,kBAAkB,GAAGV,KAAK,CAACW,KAAK,CAAEJ,IAAI,IAAKA,IAAI,KAAKP,KAAK,CAAC,CAAC,CAAC,CAAC;AAEnE;AACAV,IAAAA,gBAAgB,CAACoB,kBAAkB,IAAIV,KAAK,CAAC,CAAC,CAAC,KAAK,OAAO,GAAG,YAAY,GAAG,IAAI,CAAC;AACpF,EAAA,CAAC,EAAE,CAACnB,cAAc,EAAEF,QAAQ,CAAC,CAAC;AAE9B,EAAA,oBACEiC,cAAA,CAACC,iCAAgB,CAACC,QAAQ,EAAA;AAACpB,IAAAA,KAAK,EAAEH,YAAa;AAAAZ,IAAAA,QAAA,eAC7CiC,cAAA,CAAA,KAAA,EAAA;AAAA,MAAA,GAASf,WAAW;AAAAlB,MAAAA,QAAA,EAAGA;KAAc;AACvC,GAA2B,CAAC;AAEhC,CAAC;AAED,6BAAA,aAAesB,sBAAK,CAACc,IAAI,CAACrC,cAAc,CAAC;;;;"}
+{"version":3,"file":"PromoCardGroup.js","sources":["../../src/promoCard/PromoCardGroup.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { FunctionComponent, ReactNode, useState, useEffect, useMemo } from 'react';\n\nimport { PromoCardProps } from './PromoCard';\nimport PromoCardContext from './PromoCardContext';\n\nexport type AriaRoleRadioGroup = 'radiogroup';\n\nexport interface PromoCardGroupProps {\n  /**\n   * Optional class name(s) to add to the group container.\n   */\n  className?: string;\n  /**\n   * The PromoCard components to display inside the group.\n   */\n  children: ReactNode;\n  /**\n   * The default checked for the group.\n   */\n  defaultChecked?: string;\n  /**\n   * Optional ID to add to the group container.\n   */\n  id?: string;\n  /**\n   * Whether the group is disabled or not.\n   */\n  isDisabled?: boolean;\n  /**\n   * Optional label to display above the group.\n   */\n  label?: string;\n  /**\n   * Optional function to call when the group value changes.\n   */\n  onChange?: (value: string) => void;\n  /**\n   * Optional ID to add to the group container for testing purposes.\n   */\n  testId?: string;\n}\n\n/**\n * PromoCardGroup component.\n *\n * A PromoCardGroup is a container for PromoCard components that allows the user to select one or more\n * cards from a group. It can be used to display a set of related options, and can be customized with\n * various props to suit different use cases.\n *\n * @param {ReactNode} children - The PromoCard components to display inside the group.\n * @param {string} className - Optional class name(s) to add to the group container.\n * @param {string} defaultChecked - The default value for the group.\n * @param {string} id - Optional ID to add to the group container.\n * @param {boolean} isDisabled=false - Whether the group is disabled or not.\n * @param {string} label - Optional label to display above the group.\n * @param {Function} onChange - Optional function to call when the group value changes.\n * @param {string} testId - Optional ID to add to the group container for testing purposes.\n * @returns {React.JSX.Element} - The PromoCardGroup component.\n */\nconst PromoCardGroup: FunctionComponent<PromoCardGroupProps> = ({\n  children,\n  className,\n  defaultChecked = '',\n  id,\n  isDisabled = false,\n  onChange = () => {},\n  testId,\n}) => {\n  const [promoCardState, setPromoCardState] = useState<{\n    defaultChecked: string;\n    state: string;\n  }>({\n    defaultChecked,\n    state: defaultChecked,\n  });\n\n  useEffect(() => {\n    if (promoCardState.defaultChecked !== defaultChecked) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect -- Syncing defaultChecked prop to internal state\n      setPromoCardState({\n        defaultChecked,\n        state: defaultChecked,\n      });\n    }\n  }, [defaultChecked, promoCardState.defaultChecked]);\n\n  const { state } = promoCardState;\n  const setState = (newState: string) =>\n    setPromoCardState((prev) => ({ ...prev, state: newState }));\n\n  // Derive container role from children\n  const containerRole = useMemo(() => {\n    // Collect an array of types from the children PromoCard components\n    const types =\n      React.Children.map(children, (child) => {\n        if (React.isValidElement<PromoCardProps>(child) && child.props.type) {\n          return child.props.type;\n        }\n        return null;\n      })?.filter((type): type is 'radio' | 'checkbox' => type !== null && type !== undefined) ?? [];\n\n    // Check if all types are the same\n    const allTypesAreTheSame = types.every((type) => type === types[0]);\n\n    // If all types are the same and the type is 'radio', return 'radiogroup'\n    return allTypesAreTheSame && types[0] === 'radio' ? 'radiogroup' : null;\n  }, [children]);\n\n  /**\n   * The context value for the PromoCardGroup.\n   *\n   * The context value is an object that contains the current state of the\n   * group, whether the group is disabled or not, and a function to call when\n   * the group value changes. This value is used to provide context to child\n   * PromoCard components, allowing them to interact with the group and update\n   * its state.\n   */\n  const contextValue = useMemo(() => {\n    const handleOnChange = (value: string) => {\n      setState(value);\n      onChange(value);\n    };\n\n    return { state, isDisabled, onChange: handleOnChange };\n  }, [state, isDisabled, onChange]);\n\n  const commonClasses = clsx(\n    {\n      'np-CardGroup': true,\n      'is-disabled': isDisabled,\n    },\n    className,\n  );\n\n  const commonProps = {\n    className: commonClasses,\n    id,\n    'data-testid': testId,\n    role: containerRole as AriaRoleRadioGroup | undefined, // Add the role attribute here\n  };\n\n  return (\n    <PromoCardContext.Provider value={contextValue}>\n      <div {...commonProps}>{children}</div>\n    </PromoCardContext.Provider>\n  );\n};\n\nexport default React.memo(PromoCardGroup);\n"],"names":["PromoCardGroup","children","className","defaultChecked","id","isDisabled","onChange","testId","promoCardState","setPromoCardState","useState","state","useEffect","setState","newState","prev","containerRole","useMemo","types","React","Children","map","child","isValidElement","props","type","filter","undefined","allTypesAreTheSame","every","contextValue","handleOnChange","value","commonClasses","clsx","commonProps","role","_jsx","PromoCardContext","Provider","memo"],"mappings":"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"}