@transferwise/components 46.154.0 → 46.155.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/AvatarLayout/AvatarLayout.js.map +1 -1
- package/build/AvatarLayout/AvatarLayout.mjs.map +1 -1
- package/build/AvatarView/AvatarView.js.map +1 -1
- package/build/AvatarView/AvatarView.mjs.map +1 -1
- package/build/AvatarView/Dot/Dot.js.map +1 -1
- package/build/AvatarView/Dot/Dot.mjs.map +1 -1
- package/build/Body/Body.js.map +1 -1
- package/build/Body/Body.mjs.map +1 -1
- package/build/Chips/Chip/Chip.js.map +1 -1
- package/build/Chips/Chip/Chip.mjs.map +1 -1
- package/build/DefinitionList/DefinitionList.js +2 -1
- package/build/DefinitionList/DefinitionList.js.map +1 -1
- package/build/DefinitionList/DefinitionList.mjs +2 -1
- package/build/DefinitionList/DefinitionList.mjs.map +1 -1
- package/build/Display/Display.js.map +1 -1
- package/build/Display/Display.mjs.map +1 -1
- package/build/ExpressiveMoneyInput/AmountInput/AmountInput.js +2 -2
- package/build/ExpressiveMoneyInput/AmountInput/AmountInput.js.map +1 -1
- package/build/ExpressiveMoneyInput/AmountInput/AmountInput.mjs +1 -1
- package/build/ExpressiveMoneyInput/AmountInput/AmountInput.mjs.map +1 -1
- package/build/ExpressiveMoneyInput/AnimatedNumber/AnimatedNumber.js +4 -4
- package/build/ExpressiveMoneyInput/AnimatedNumber/AnimatedNumber.js.map +1 -1
- package/build/ExpressiveMoneyInput/AnimatedNumber/AnimatedNumber.mjs +1 -1
- package/build/ExpressiveMoneyInput/AnimatedNumber/AnimatedNumber.mjs.map +1 -1
- package/build/ExpressiveMoneyInput/Chevron/Chevron.js +2 -2
- package/build/ExpressiveMoneyInput/Chevron/Chevron.js.map +1 -1
- package/build/ExpressiveMoneyInput/Chevron/Chevron.mjs +1 -1
- package/build/ExpressiveMoneyInput/Chevron/Chevron.mjs.map +1 -1
- package/build/ExpressiveMoneyInput/CurrencySelector/CurrencySelector.js.map +1 -1
- package/build/ExpressiveMoneyInput/CurrencySelector/CurrencySelector.mjs.map +1 -1
- package/build/ExpressiveMoneyInput/ExpressiveMoneyInput.js +3 -3
- package/build/ExpressiveMoneyInput/ExpressiveMoneyInput.js.map +1 -1
- package/build/ExpressiveMoneyInput/ExpressiveMoneyInput.mjs +1 -1
- package/build/ExpressiveMoneyInput/ExpressiveMoneyInput.mjs.map +1 -1
- package/build/ExpressiveMoneyInput/hooks/useInputStyle.js.map +1 -1
- package/build/ExpressiveMoneyInput/hooks/useInputStyle.mjs.map +1 -1
- package/build/IconButton/IconButton.js.map +1 -1
- package/build/IconButton/IconButton.mjs.map +1 -1
- package/build/Link/Link.js.map +1 -1
- package/build/Link/Link.mjs.map +1 -1
- package/build/ListItem/Navigation/ListItemNavigation.js +4 -2
- package/build/ListItem/Navigation/ListItemNavigation.js.map +1 -1
- package/build/ListItem/Navigation/ListItemNavigation.mjs +4 -2
- package/build/ListItem/Navigation/ListItemNavigation.mjs.map +1 -1
- package/build/Nudge/Nudge.js +11 -2
- package/build/Nudge/Nudge.js.map +1 -1
- package/build/Nudge/Nudge.mjs +12 -3
- package/build/Nudge/Nudge.mjs.map +1 -1
- package/build/Sticky/Sticky.js +1 -0
- package/build/Sticky/Sticky.js.map +1 -1
- package/build/Sticky/Sticky.mjs +1 -0
- package/build/Sticky/Sticky.mjs.map +1 -1
- package/build/Title/Title.js +1 -0
- package/build/Title/Title.js.map +1 -1
- package/build/Title/Title.mjs +1 -0
- package/build/Title/Title.mjs.map +1 -1
- package/build/_deprecated/Select/Option/Option.js.map +1 -1
- package/build/_deprecated/Select/Option/Option.mjs.map +1 -1
- package/build/_deprecated/Select/SearchBox/SearchBox.js.map +1 -1
- package/build/_deprecated/Select/SearchBox/SearchBox.mjs.map +1 -1
- package/build/common/Circle/Circle.js.map +1 -1
- package/build/common/Circle/Circle.mjs.map +1 -1
- package/build/main.css +36 -1
- package/build/styles/DefinitionList/DefinitionList.css +30 -0
- package/build/styles/Nudge/Nudge.css +1 -1
- package/build/styles/Sticky/Sticky.css +4 -0
- package/build/styles/main.css +36 -1
- package/build/types/AvatarLayout/AvatarLayout.d.ts +2 -2
- package/build/types/AvatarLayout/AvatarLayout.d.ts.map +1 -1
- package/build/types/AvatarLayout/index.d.ts +1 -1
- package/build/types/AvatarLayout/index.d.ts.map +1 -1
- package/build/types/AvatarView/AvatarView.d.ts +2 -2
- package/build/types/AvatarView/AvatarView.d.ts.map +1 -1
- package/build/types/AvatarView/Dot/Dot.d.ts +1 -1
- package/build/types/AvatarView/Dot/Dot.d.ts.map +1 -1
- package/build/types/AvatarView/index.d.ts +1 -1
- package/build/types/AvatarView/index.d.ts.map +1 -1
- package/build/types/Body/Body.d.ts +11 -0
- package/build/types/Body/Body.d.ts.map +1 -1
- package/build/types/Body/index.d.ts +1 -0
- package/build/types/Body/index.d.ts.map +1 -1
- package/build/types/Chips/Chip/Chip.d.ts +2 -2
- package/build/types/Chips/Chip/Chip.d.ts.map +1 -1
- package/build/types/Chips/index.d.ts +1 -1
- package/build/types/Chips/index.d.ts.map +1 -1
- package/build/types/DefinitionList/DefinitionList.d.ts.map +1 -1
- package/build/types/Display/Display.d.ts +2 -2
- package/build/types/Display/Display.d.ts.map +1 -1
- package/build/types/Display/index.d.ts +1 -0
- package/build/types/Display/index.d.ts.map +1 -1
- package/build/types/ExpressiveMoneyInput/AmountInput/AmountInput.d.ts +3 -3
- package/build/types/ExpressiveMoneyInput/AmountInput/AmountInput.d.ts.map +1 -1
- package/build/types/ExpressiveMoneyInput/CurrencySelector/CurrencySelector.d.ts +3 -3
- package/build/types/ExpressiveMoneyInput/CurrencySelector/CurrencySelector.d.ts.map +1 -1
- package/build/types/ExpressiveMoneyInput/ExpressiveMoneyInput.d.ts +4 -4
- package/build/types/ExpressiveMoneyInput/ExpressiveMoneyInput.d.ts.map +1 -1
- package/build/types/ExpressiveMoneyInput/hooks/useInputStyle.d.ts +1 -1
- package/build/types/ExpressiveMoneyInput/hooks/useInputStyle.d.ts.map +1 -1
- package/build/types/ExpressiveMoneyInput/index.d.ts +1 -1
- package/build/types/ExpressiveMoneyInput/index.d.ts.map +1 -1
- package/build/types/IconButton/IconButton.d.ts +1 -1
- package/build/types/IconButton/IconButton.d.ts.map +1 -1
- package/build/types/IconButton/index.d.ts +1 -1
- package/build/types/IconButton/index.d.ts.map +1 -1
- package/build/types/Link/Link.d.ts +2 -2
- package/build/types/Link/Link.d.ts.map +1 -1
- package/build/types/Link/index.d.ts +1 -1
- package/build/types/Link/index.d.ts.map +1 -1
- package/build/types/ListItem/ListItem.d.ts +1 -1
- package/build/types/ListItem/Navigation/ListItemNavigation.d.ts +12 -2
- package/build/types/ListItem/Navigation/ListItemNavigation.d.ts.map +1 -1
- package/build/types/Nudge/Nudge.d.ts +28 -5
- package/build/types/Nudge/Nudge.d.ts.map +1 -1
- package/build/types/Nudge/index.d.ts +1 -1
- package/build/types/Nudge/index.d.ts.map +1 -1
- package/build/types/Sticky/Sticky.d.ts.map +1 -1
- package/build/types/Title/Title.d.ts +12 -2
- package/build/types/Title/Title.d.ts.map +1 -1
- package/build/types/Title/index.d.ts +1 -0
- package/build/types/Title/index.d.ts.map +1 -1
- package/build/types/_deprecated/Select/Option/Option.d.ts +2 -2
- package/build/types/_deprecated/Select/Option/Option.d.ts.map +1 -1
- package/build/types/common/Circle/Circle.d.ts +1 -1
- package/build/types/common/Circle/Circle.d.ts.map +1 -1
- package/build/types/common/Circle/index.d.ts +1 -1
- package/build/types/common/Circle/index.d.ts.map +1 -1
- package/build/types/index.d.ts +4 -0
- package/build/types/index.d.ts.map +1 -1
- package/package.json +5 -5
- package/src/AvatarLayout/AvatarLayout.tsx +3 -3
- package/src/AvatarLayout/index.ts +1 -1
- package/src/AvatarView/AvatarView.tsx +4 -4
- package/src/AvatarView/Dot/Dot.tsx +1 -1
- package/src/AvatarView/index.ts +1 -1
- package/src/Body/Body.tsx +2 -2
- package/src/Body/index.ts +1 -0
- package/src/Chips/Chip/Chip.tsx +2 -2
- package/src/Chips/index.ts +1 -1
- package/src/DefinitionList/DefinitionList.css +30 -0
- package/src/DefinitionList/DefinitionList.less +24 -0
- package/src/DefinitionList/DefinitionList.tsx +1 -0
- package/src/DefinitionList/_stories/DefinitionList.test.story.tsx +168 -0
- package/src/Display/Display.tsx +2 -2
- package/src/Display/index.ts +1 -0
- package/src/Drawer/Drawer.test.tsx +2 -3
- package/src/ExpressiveMoneyInput/AmountInput/AmountInput.tsx +4 -4
- package/src/ExpressiveMoneyInput/AnimatedNumber/AnimatedNumber.tsx +1 -1
- package/src/ExpressiveMoneyInput/Chevron/Chevron.tsx +1 -1
- package/src/ExpressiveMoneyInput/CurrencySelector/CurrencySelector.tsx +3 -3
- package/src/ExpressiveMoneyInput/ExpressiveMoneyInput.test.tsx +1 -1
- package/src/ExpressiveMoneyInput/ExpressiveMoneyInput.tsx +5 -8
- package/src/ExpressiveMoneyInput/_stories/ExpressiveMoneyInput.story.tsx +1 -1
- package/src/ExpressiveMoneyInput/_stories/ExpressiveMoneyInput.test.story.tsx +1 -1
- package/src/ExpressiveMoneyInput/hooks/useInputStyle.ts +1 -1
- package/src/ExpressiveMoneyInput/index.ts +1 -1
- package/src/IconButton/IconButton.tsx +2 -2
- package/src/IconButton/_stories/IconButton.story.tsx +8 -8
- package/src/IconButton/index.ts +1 -1
- package/src/Link/Link.tsx +2 -2
- package/src/Link/index.ts +1 -1
- package/src/ListItem/Navigation/ListItemNavigation.test.tsx +23 -0
- package/src/ListItem/Navigation/ListItemNavigation.tsx +17 -3
- package/src/ListItem/Navigation/_stories/ListItemNavigation.story.tsx +33 -0
- package/src/Nudge/Nudge.css +1 -1
- package/src/Nudge/Nudge.less +1 -1
- package/src/Nudge/Nudge.test.tsx +43 -0
- package/src/Nudge/Nudge.tsx +43 -8
- package/src/Nudge/index.ts +1 -1
- package/src/Sticky/Sticky.css +4 -0
- package/src/Sticky/Sticky.less +6 -0
- package/src/Sticky/Sticky.test.tsx +1 -0
- package/src/Sticky/Sticky.tsx +1 -0
- package/src/Sticky/_stories/Sticky.test.story.tsx +177 -0
- package/src/Title/Title.tsx +25 -20
- package/src/Title/index.ts +1 -0
- package/src/_deprecated/LegacyListItem/_stories/LegacyListItem.story.tsx +2 -3
- package/src/_deprecated/Select/Option/Option.test.tsx +1 -1
- package/src/_deprecated/Select/Option/Option.tsx +2 -2
- package/src/_deprecated/Select/SearchBox/SearchBox.tsx +2 -2
- package/src/common/Circle/Circle.tsx +2 -2
- package/src/common/Circle/index.ts +1 -1
- package/src/index.ts +4 -0
- package/src/main.css +36 -1
- package/src/main.less +1 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.js","sources":["../../src/IconButton/IconButton.tsx"],"sourcesContent":["import { AnchorHTMLAttributes, ButtonHTMLAttributes, forwardRef, HTMLAttributes } from 'react';\nimport { PrimitiveAnchor, PrimitiveButton } from '../Primitives';\nimport Circle from '../common/Circle';\nimport { clsx } from 'clsx';\n\nexport type
|
|
1
|
+
{"version":3,"file":"IconButton.js","sources":["../../src/IconButton/IconButton.tsx"],"sourcesContent":["import { AnchorHTMLAttributes, ButtonHTMLAttributes, forwardRef, HTMLAttributes } from 'react';\nimport { PrimitiveAnchor, PrimitiveButton } from '../Primitives';\nimport Circle from '../common/Circle';\nimport { clsx } from 'clsx';\n\nexport type IconButtonProps = {\n /** @default 48 */\n size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;\n /** @default 'primary' */\n priority?: 'primary' | 'secondary' | 'tertiary' | 'minimal';\n /** @default 'default' */\n type?: 'default' | 'negative';\n 'data-testid'?: string;\n} & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'onClick'> &\n Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'disabled'> &\n Pick<\n HTMLAttributes<HTMLDivElement>,\n 'id' | 'className' | 'role' | 'children' | 'aria-label' | 'tabIndex'\n >;\n\nconst IconButton = forwardRef(function IconButton(\n {\n size = 48,\n href = '#',\n children,\n className,\n priority = 'primary',\n type = 'default',\n ...props\n }: IconButtonProps,\n ref,\n) {\n const isLink = href !== '#';\n return (\n // @ts-expect-error it's either link or `button` element so it has `onClick` / `href`\n <Circle\n ref={ref}\n as={isLink ? PrimitiveAnchor : PrimitiveButton}\n size={size}\n fixedSize\n className={clsx(\n 'np-icon-button',\n `np-icon-button-${priority}-${type}`,\n {\n disabled: props.disabled,\n },\n className,\n )}\n {...(isLink ? { href } : {})}\n {...props}\n >\n {children}\n </Circle>\n );\n});\n\nexport default IconButton;\n"],"names":["IconButton","forwardRef","size","href","children","className","priority","type","props","ref","isLink","_jsx","Circle","as","PrimitiveAnchor","PrimitiveButton","fixedSize","clsx","disabled"],"mappings":";;;;;;;;;;;AAoBA,MAAMA,UAAU,gBAAGC,gBAAU,CAAC,SAASD,UAAUA,CAC/C;AACEE,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,IAAI,GAAG,GAAG;EACVC,QAAQ;EACRC,SAAS;AACTC,EAAAA,QAAQ,GAAG,SAAS;AACpBC,EAAAA,IAAI,GAAG,SAAS;EAChB,GAAGC;AAAK,CACQ,EAClBC,GAAG,EAAA;AAEH,EAAA,MAAMC,MAAM,GAAGP,IAAI,KAAK,GAAG;AAC3B,EAAA;AAAA;AACE;AACAQ,IAAAA,cAAA,CAACC,cAAM,EAAA;AACLH,MAAAA,GAAG,EAAEA,GAAI;AACTI,MAAAA,EAAE,EAAEH,MAAM,GAAGI,uBAAe,GAAGC,uBAAgB;AAC/Cb,MAAAA,IAAI,EAAEA,IAAK;MACXc,SAAS,EAAA,IAAA;MACTX,SAAS,EAAEY,SAAI,CACb,gBAAgB,EAChB,kBAAkBX,QAAQ,CAAA,CAAA,EAAIC,IAAI,CAAA,CAAE,EACpC;QACEW,QAAQ,EAAEV,KAAK,CAACU;OACjB,EACDb,SAAS,CACT;AAAA,MAAA,IACGK,MAAM,GAAG;AAAEP,QAAAA;OAAM,GAAG,EAAE,CAAA;AAAA,MAAA,GACvBK,KAAK;AAAAJ,MAAAA,QAAA,EAERA;KACK;AAAC;AAEb,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.mjs","sources":["../../src/IconButton/IconButton.tsx"],"sourcesContent":["import { AnchorHTMLAttributes, ButtonHTMLAttributes, forwardRef, HTMLAttributes } from 'react';\nimport { PrimitiveAnchor, PrimitiveButton } from '../Primitives';\nimport Circle from '../common/Circle';\nimport { clsx } from 'clsx';\n\nexport type
|
|
1
|
+
{"version":3,"file":"IconButton.mjs","sources":["../../src/IconButton/IconButton.tsx"],"sourcesContent":["import { AnchorHTMLAttributes, ButtonHTMLAttributes, forwardRef, HTMLAttributes } from 'react';\nimport { PrimitiveAnchor, PrimitiveButton } from '../Primitives';\nimport Circle from '../common/Circle';\nimport { clsx } from 'clsx';\n\nexport type IconButtonProps = {\n /** @default 48 */\n size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;\n /** @default 'primary' */\n priority?: 'primary' | 'secondary' | 'tertiary' | 'minimal';\n /** @default 'default' */\n type?: 'default' | 'negative';\n 'data-testid'?: string;\n} & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'onClick'> &\n Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'disabled'> &\n Pick<\n HTMLAttributes<HTMLDivElement>,\n 'id' | 'className' | 'role' | 'children' | 'aria-label' | 'tabIndex'\n >;\n\nconst IconButton = forwardRef(function IconButton(\n {\n size = 48,\n href = '#',\n children,\n className,\n priority = 'primary',\n type = 'default',\n ...props\n }: IconButtonProps,\n ref,\n) {\n const isLink = href !== '#';\n return (\n // @ts-expect-error it's either link or `button` element so it has `onClick` / `href`\n <Circle\n ref={ref}\n as={isLink ? PrimitiveAnchor : PrimitiveButton}\n size={size}\n fixedSize\n className={clsx(\n 'np-icon-button',\n `np-icon-button-${priority}-${type}`,\n {\n disabled: props.disabled,\n },\n className,\n )}\n {...(isLink ? { href } : {})}\n {...props}\n >\n {children}\n </Circle>\n );\n});\n\nexport default IconButton;\n"],"names":["IconButton","forwardRef","size","href","children","className","priority","type","props","ref","isLink","_jsx","Circle","as","PrimitiveAnchor","PrimitiveButton","fixedSize","clsx","disabled"],"mappings":";;;;;;;AAoBA,MAAMA,UAAU,gBAAGC,UAAU,CAAC,SAASD,UAAUA,CAC/C;AACEE,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,IAAI,GAAG,GAAG;EACVC,QAAQ;EACRC,SAAS;AACTC,EAAAA,QAAQ,GAAG,SAAS;AACpBC,EAAAA,IAAI,GAAG,SAAS;EAChB,GAAGC;AAAK,CACQ,EAClBC,GAAG,EAAA;AAEH,EAAA,MAAMC,MAAM,GAAGP,IAAI,KAAK,GAAG;AAC3B,EAAA;AAAA;AACE;AACAQ,IAAAA,GAAA,CAACC,MAAM,EAAA;AACLH,MAAAA,GAAG,EAAEA,GAAI;AACTI,MAAAA,EAAE,EAAEH,MAAM,GAAGI,eAAe,GAAGC,eAAgB;AAC/Cb,MAAAA,IAAI,EAAEA,IAAK;MACXc,SAAS,EAAA,IAAA;MACTX,SAAS,EAAEY,IAAI,CACb,gBAAgB,EAChB,kBAAkBX,QAAQ,CAAA,CAAA,EAAIC,IAAI,CAAA,CAAE,EACpC;QACEW,QAAQ,EAAEV,KAAK,CAACU;OACjB,EACDb,SAAS,CACT;AAAA,MAAA,IACGK,MAAM,GAAG;AAAEP,QAAAA;OAAM,GAAG,EAAE,CAAA;AAAA,MAAA,GACvBK,KAAK;AAAAJ,MAAAA,QAAA,EAERA;KACK;AAAC;AAEb,CAAC;;;;"}
|
package/build/Link/Link.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.js","sources":["../../src/Link/Link.tsx"],"sourcesContent":["import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { PrimitiveAnchor, PrimitiveButton } from '../Primitives';\nimport type { PrimitiveAnchorProps, PrimitiveButtonProps } from '../Primitives';\n\nimport { LinkLarge, LinkDefault, Typography } from '../common';\n\nimport messages from './Link.messages';\n\nexport type
|
|
1
|
+
{"version":3,"file":"Link.js","sources":["../../src/Link/Link.tsx"],"sourcesContent":["import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { PrimitiveAnchor, PrimitiveButton } from '../Primitives';\nimport type { PrimitiveAnchorProps, PrimitiveButtonProps } from '../Primitives';\n\nimport { LinkLarge, LinkDefault, Typography } from '../common';\n\nimport messages from './Link.messages';\n\nexport type LinkProps = PrimitiveAnchorProps &\n Pick<PrimitiveButtonProps, 'onClick'> & { type?: LinkLarge | LinkDefault };\n\n/**\n * Standard Link component with navigate away icon\n *\n * Documentation: https://transferwise.github.io/neptune-web/components/content/Link\n */\nconst Link = ({\n className,\n children,\n href,\n target,\n type = Typography.LINK_DEFAULT,\n 'aria-label': ariaLabel,\n onClick,\n disabled,\n ...props\n}: LinkProps) => {\n const { formatMessage } = useIntl();\n const isButton = Boolean(onClick) && href === undefined;\n const isBlank = target === '_blank';\n\n const classNames = clsx(\n 'np-link',\n 'd-inline-flex',\n {\n [`np-text-${type}`]: type,\n 'np-link--disabled': disabled,\n },\n className,\n );\n\n return isButton ? (\n <PrimitiveButton\n type=\"button\"\n aria-label={ariaLabel}\n className={clsx(classNames, 'btn-unstyled')}\n disabled={disabled}\n onClick={onClick}\n >\n {children}\n </PrimitiveButton>\n ) : (\n <PrimitiveAnchor\n href={href}\n target={target}\n className={classNames}\n aria-label={ariaLabel}\n rel={isBlank ? 'noreferrer' : undefined}\n disabled={disabled}\n onClick={onClick}\n {...props}\n >\n {children} {isBlank && <NavigateAwayIcon title={formatMessage(messages.opensInNewTab)} />}\n </PrimitiveAnchor>\n );\n};\n\nexport default Link;\n"],"names":["Link","className","children","href","target","type","Typography","LINK_DEFAULT","ariaLabel","onClick","disabled","props","formatMessage","useIntl","isButton","Boolean","undefined","isBlank","classNames","clsx","_jsx","PrimitiveButton","_jsxs","PrimitiveAnchor","rel","NavigateAwayIcon","title","messages","opensInNewTab"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAMA,IAAI,GAAGA,CAAC;EACZC,SAAS;EACTC,QAAQ;EACRC,IAAI;EACJC,MAAM;EACNC,IAAI,GAAGC,qBAAU,CAACC,YAAY;AAC9B,EAAA,YAAY,EAAEC,SAAS;EACvBC,OAAO;EACPC,QAAQ;EACR,GAAGC;AAAK,CACE,KAAI;EACd,MAAM;AAAEC,IAAAA;GAAe,GAAGC,iBAAO,EAAE;EACnC,MAAMC,QAAQ,GAAGC,OAAO,CAACN,OAAO,CAAC,IAAIN,IAAI,KAAKa,SAAS;AACvD,EAAA,MAAMC,OAAO,GAAGb,MAAM,KAAK,QAAQ;AAEnC,EAAA,MAAMc,UAAU,GAAGC,SAAI,CACrB,SAAS,EACT,eAAe,EACf;AACE,IAAA,CAAC,CAAA,QAAA,EAAWd,IAAI,CAAA,CAAE,GAAGA,IAAI;AACzB,IAAA,mBAAmB,EAAEK;GACtB,EACDT,SAAS,CACV;AAED,EAAA,OAAOa,QAAQ,gBACbM,cAAA,CAACC,uBAAe,EAAA;AACdhB,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,YAAA,EAAYG,SAAU;AACtBP,IAAAA,SAAS,EAAEkB,SAAI,CAACD,UAAU,EAAE,cAAc,CAAE;AAC5CR,IAAAA,QAAQ,EAAEA,QAAS;AACnBD,IAAAA,OAAO,EAAEA,OAAQ;AAAAP,IAAAA,QAAA,EAEhBA;AAAQ,GACM,CAAC,gBAElBoB,eAAA,CAACC,uBAAe,EAAA;AACdpB,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,MAAM,EAAEA,MAAO;AACfH,IAAAA,SAAS,EAAEiB,UAAW;AACtB,IAAA,YAAA,EAAYV,SAAU;AACtBgB,IAAAA,GAAG,EAAEP,OAAO,GAAG,YAAY,GAAGD,SAAU;AACxCN,IAAAA,QAAQ,EAAEA,QAAS;AACnBD,IAAAA,OAAO,EAAEA,OAAQ;AAAA,IAAA,GACbE,KAAK;IAAAT,QAAA,EAAA,CAERA,QAAQ,EAAE,GAAA,EAACe,OAAO,iBAAIG,cAAA,CAACK,kBAAgB,EAAA;AAACC,MAAAA,KAAK,EAAEd,aAAa,CAACe,qBAAQ,CAACC,aAAa;AAAE,MAAG;AAAA,GAC1E,CAClB;AACH;;;;"}
|
package/build/Link/Link.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.mjs","sources":["../../src/Link/Link.tsx"],"sourcesContent":["import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { PrimitiveAnchor, PrimitiveButton } from '../Primitives';\nimport type { PrimitiveAnchorProps, PrimitiveButtonProps } from '../Primitives';\n\nimport { LinkLarge, LinkDefault, Typography } from '../common';\n\nimport messages from './Link.messages';\n\nexport type
|
|
1
|
+
{"version":3,"file":"Link.mjs","sources":["../../src/Link/Link.tsx"],"sourcesContent":["import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { PrimitiveAnchor, PrimitiveButton } from '../Primitives';\nimport type { PrimitiveAnchorProps, PrimitiveButtonProps } from '../Primitives';\n\nimport { LinkLarge, LinkDefault, Typography } from '../common';\n\nimport messages from './Link.messages';\n\nexport type LinkProps = PrimitiveAnchorProps &\n Pick<PrimitiveButtonProps, 'onClick'> & { type?: LinkLarge | LinkDefault };\n\n/**\n * Standard Link component with navigate away icon\n *\n * Documentation: https://transferwise.github.io/neptune-web/components/content/Link\n */\nconst Link = ({\n className,\n children,\n href,\n target,\n type = Typography.LINK_DEFAULT,\n 'aria-label': ariaLabel,\n onClick,\n disabled,\n ...props\n}: LinkProps) => {\n const { formatMessage } = useIntl();\n const isButton = Boolean(onClick) && href === undefined;\n const isBlank = target === '_blank';\n\n const classNames = clsx(\n 'np-link',\n 'd-inline-flex',\n {\n [`np-text-${type}`]: type,\n 'np-link--disabled': disabled,\n },\n className,\n );\n\n return isButton ? (\n <PrimitiveButton\n type=\"button\"\n aria-label={ariaLabel}\n className={clsx(classNames, 'btn-unstyled')}\n disabled={disabled}\n onClick={onClick}\n >\n {children}\n </PrimitiveButton>\n ) : (\n <PrimitiveAnchor\n href={href}\n target={target}\n className={classNames}\n aria-label={ariaLabel}\n rel={isBlank ? 'noreferrer' : undefined}\n disabled={disabled}\n onClick={onClick}\n {...props}\n >\n {children} {isBlank && <NavigateAwayIcon title={formatMessage(messages.opensInNewTab)} />}\n </PrimitiveAnchor>\n );\n};\n\nexport default Link;\n"],"names":["Link","className","children","href","target","type","Typography","LINK_DEFAULT","ariaLabel","onClick","disabled","props","formatMessage","useIntl","isButton","Boolean","undefined","isBlank","classNames","clsx","_jsx","PrimitiveButton","_jsxs","PrimitiveAnchor","rel","NavigateAwayIcon","title","messages","opensInNewTab"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAMA,IAAI,GAAGA,CAAC;EACZC,SAAS;EACTC,QAAQ;EACRC,IAAI;EACJC,MAAM;EACNC,IAAI,GAAGC,UAAU,CAACC,YAAY;AAC9B,EAAA,YAAY,EAAEC,SAAS;EACvBC,OAAO;EACPC,QAAQ;EACR,GAAGC;AAAK,CACE,KAAI;EACd,MAAM;AAAEC,IAAAA;GAAe,GAAGC,OAAO,EAAE;EACnC,MAAMC,QAAQ,GAAGC,OAAO,CAACN,OAAO,CAAC,IAAIN,IAAI,KAAKa,SAAS;AACvD,EAAA,MAAMC,OAAO,GAAGb,MAAM,KAAK,QAAQ;AAEnC,EAAA,MAAMc,UAAU,GAAGC,IAAI,CACrB,SAAS,EACT,eAAe,EACf;AACE,IAAA,CAAC,CAAA,QAAA,EAAWd,IAAI,CAAA,CAAE,GAAGA,IAAI;AACzB,IAAA,mBAAmB,EAAEK;GACtB,EACDT,SAAS,CACV;AAED,EAAA,OAAOa,QAAQ,gBACbM,GAAA,CAACC,eAAe,EAAA;AACdhB,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,YAAA,EAAYG,SAAU;AACtBP,IAAAA,SAAS,EAAEkB,IAAI,CAACD,UAAU,EAAE,cAAc,CAAE;AAC5CR,IAAAA,QAAQ,EAAEA,QAAS;AACnBD,IAAAA,OAAO,EAAEA,OAAQ;AAAAP,IAAAA,QAAA,EAEhBA;AAAQ,GACM,CAAC,gBAElBoB,IAAA,CAACC,eAAe,EAAA;AACdpB,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,MAAM,EAAEA,MAAO;AACfH,IAAAA,SAAS,EAAEiB,UAAW;AACtB,IAAA,YAAA,EAAYV,SAAU;AACtBgB,IAAAA,GAAG,EAAEP,OAAO,GAAG,YAAY,GAAGD,SAAU;AACxCN,IAAAA,QAAQ,EAAEA,QAAS;AACnBD,IAAAA,OAAO,EAAEA,OAAQ;AAAA,IAAA,GACbE,KAAK;IAAAT,QAAA,EAAA,CAERA,QAAQ,EAAE,GAAA,EAACe,OAAO,iBAAIG,GAAA,CAACK,YAAgB,EAAA;AAACC,MAAAA,KAAK,EAAEd,aAAa,CAACe,QAAQ,CAACC,aAAa;AAAE,MAAG;AAAA,GAC1E,CAClB;AACH;;;;"}
|
|
@@ -10,6 +10,7 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
10
10
|
|
|
11
11
|
const Navigation = function Navigation({
|
|
12
12
|
href,
|
|
13
|
+
hideIndicator,
|
|
13
14
|
...props
|
|
14
15
|
}) {
|
|
15
16
|
const {
|
|
@@ -22,8 +23,9 @@ const Navigation = function Navigation({
|
|
|
22
23
|
ids,
|
|
23
24
|
describedByIds
|
|
24
25
|
} = React.useContext(ListItemContext.ListItemContext);
|
|
25
|
-
const icon = /*#__PURE__*/jsxRuntime.jsx(icons.ChevronRight, {
|
|
26
|
-
size: 16
|
|
26
|
+
const icon = hideIndicator ? null : /*#__PURE__*/jsxRuntime.jsx(icons.ChevronRight, {
|
|
27
|
+
size: 16,
|
|
28
|
+
"data-testid": "NavigationIndicator"
|
|
27
29
|
});
|
|
28
30
|
return href ? /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
|
|
29
31
|
children: icon
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemNavigation.js","sources":["../../../src/ListItem/Navigation/ListItemNavigation.tsx"],"sourcesContent":["import { ChevronRight } from '@transferwise/icons';\nimport type { ButtonProps } from '../../Button/Button.types';\nimport { useListItemControl } from '../useListItemControl';\nimport { PrimitiveButton } from '../../Primitives';\nimport { useContext } from 'react';\nimport { ListItemContext } from '../ListItemContext';\n\nexport type ListItemNavigationProps = Pick<ButtonProps, 'onClick' | 'href' | 'target'
|
|
1
|
+
{"version":3,"file":"ListItemNavigation.js","sources":["../../../src/ListItem/Navigation/ListItemNavigation.tsx"],"sourcesContent":["import { ChevronRight } from '@transferwise/icons';\nimport type { ButtonProps } from '../../Button/Button.types';\nimport { useListItemControl } from '../useListItemControl';\nimport { PrimitiveButton } from '../../Primitives';\nimport { useContext } from 'react';\nimport { ListItemContext } from '../ListItemContext';\n\nexport type ListItemNavigationProps = Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n /**\n * When `true`, the chevron indicator is hidden. Use when surrounding context makes the\n * interactive affordance clear without a directional cue (e.g. a widget row with trailing\n * value content).<br />\n * **NB:** This feature should be used with great care as it can result in the item looking\n * as non-interactive, significantly degrading accessibility, UX, and conversion,\n * especially if used on busy screens with multiple Lists.\n */\n hideIndicator?: boolean;\n};\n\n/**\n * This component allows for rendering a control functionally synonymous with HTML `anchor` or a\n * `button`, giving users a rich way to choose between options and navigate to another screen or\n * step in a flow. It offers only a subset of features of the HTML element in line with the\n * ListItem's constraints.<br />\n * <br />\n * Please refer to the [Design documentation](https://docs.wise.design/components/list-item---navigation) for details.\n */\nexport const Navigation = function Navigation({\n href,\n hideIndicator,\n ...props\n}: ListItemNavigationProps) {\n const { baseItemProps } = useListItemControl('navigation', { href, ...props });\n const { ids, describedByIds } = useContext(ListItemContext);\n const icon = hideIndicator ? null : <ChevronRight size={16} data-testid=\"NavigationIndicator\" />;\n\n return href ? (\n <>{icon}</>\n ) : (\n <PrimitiveButton\n disabled={baseItemProps.disabled}\n aria-describedby={describedByIds}\n id={ids.control}\n className=\"btn-unstyled wds-list-item-control\"\n onClick={props.onClick as React.MouseEventHandler<HTMLButtonElement> | undefined}\n >\n {icon}\n </PrimitiveButton>\n );\n};\n\nNavigation.displayName = 'ListItem.Navigation';\n"],"names":["Navigation","href","hideIndicator","props","baseItemProps","useListItemControl","ids","describedByIds","useContext","ListItemContext","icon","_jsx","ChevronRight","size","_Fragment","children","PrimitiveButton","disabled","id","control","className","onClick","displayName"],"mappings":";;;;;;;;;;AA2BO,MAAMA,UAAU,GAAG,SAASA,UAAUA,CAAC;EAC5CC,IAAI;EACJC,aAAa;EACb,GAAGC;AAAK,CACgB,EAAA;EACxB,MAAM;AAAEC,IAAAA;AAAa,GAAE,GAAGC,qCAAkB,CAAC,YAAY,EAAE;IAAEJ,IAAI;IAAE,GAAGE;AAAK,GAAE,CAAC;EAC9E,MAAM;IAAEG,GAAG;AAAEC,IAAAA;AAAc,GAAE,GAAGC,gBAAU,CAACC,+BAAe,CAAC;EAC3D,MAAMC,IAAI,GAAGR,aAAa,GAAG,IAAI,gBAAGS,cAAA,CAACC,kBAAY,EAAA;AAACC,IAAAA,IAAI,EAAE,EAAG;IAAC,aAAA,EAAY;AAAqB,GAAA,CAAG;AAEhG,EAAA,OAAOZ,IAAI,gBACTU,cAAA,CAAAG,mBAAA,EAAA;AAAAC,IAAAA,QAAA,EAAGL;AAAI,GAAC,CAAG,gBAEXC,cAAA,CAACK,uBAAe,EAAA;IACdC,QAAQ,EAAEb,aAAa,CAACa,QAAS;AACjC,IAAA,kBAAA,EAAkBV,cAAe;IACjCW,EAAE,EAAEZ,GAAG,CAACa,OAAQ;AAChBC,IAAAA,SAAS,EAAC,oCAAoC;IAC9CC,OAAO,EAAElB,KAAK,CAACkB,OAAkE;AAAAN,IAAAA,QAAA,EAEhFL;AAAI,GACU,CAClB;AACH;AAEAV,UAAU,CAACsB,WAAW,GAAG,qBAAqB;;;;"}
|
|
@@ -8,6 +8,7 @@ import { jsx, Fragment } from 'react/jsx-runtime';
|
|
|
8
8
|
|
|
9
9
|
const Navigation = function Navigation({
|
|
10
10
|
href,
|
|
11
|
+
hideIndicator,
|
|
11
12
|
...props
|
|
12
13
|
}) {
|
|
13
14
|
const {
|
|
@@ -20,8 +21,9 @@ const Navigation = function Navigation({
|
|
|
20
21
|
ids,
|
|
21
22
|
describedByIds
|
|
22
23
|
} = useContext(ListItemContext);
|
|
23
|
-
const icon = /*#__PURE__*/jsx(ChevronRight, {
|
|
24
|
-
size: 16
|
|
24
|
+
const icon = hideIndicator ? null : /*#__PURE__*/jsx(ChevronRight, {
|
|
25
|
+
size: 16,
|
|
26
|
+
"data-testid": "NavigationIndicator"
|
|
25
27
|
});
|
|
26
28
|
return href ? /*#__PURE__*/jsx(Fragment, {
|
|
27
29
|
children: icon
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemNavigation.mjs","sources":["../../../src/ListItem/Navigation/ListItemNavigation.tsx"],"sourcesContent":["import { ChevronRight } from '@transferwise/icons';\nimport type { ButtonProps } from '../../Button/Button.types';\nimport { useListItemControl } from '../useListItemControl';\nimport { PrimitiveButton } from '../../Primitives';\nimport { useContext } from 'react';\nimport { ListItemContext } from '../ListItemContext';\n\nexport type ListItemNavigationProps = Pick<ButtonProps, 'onClick' | 'href' | 'target'
|
|
1
|
+
{"version":3,"file":"ListItemNavigation.mjs","sources":["../../../src/ListItem/Navigation/ListItemNavigation.tsx"],"sourcesContent":["import { ChevronRight } from '@transferwise/icons';\nimport type { ButtonProps } from '../../Button/Button.types';\nimport { useListItemControl } from '../useListItemControl';\nimport { PrimitiveButton } from '../../Primitives';\nimport { useContext } from 'react';\nimport { ListItemContext } from '../ListItemContext';\n\nexport type ListItemNavigationProps = Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n /**\n * When `true`, the chevron indicator is hidden. Use when surrounding context makes the\n * interactive affordance clear without a directional cue (e.g. a widget row with trailing\n * value content).<br />\n * **NB:** This feature should be used with great care as it can result in the item looking\n * as non-interactive, significantly degrading accessibility, UX, and conversion,\n * especially if used on busy screens with multiple Lists.\n */\n hideIndicator?: boolean;\n};\n\n/**\n * This component allows for rendering a control functionally synonymous with HTML `anchor` or a\n * `button`, giving users a rich way to choose between options and navigate to another screen or\n * step in a flow. It offers only a subset of features of the HTML element in line with the\n * ListItem's constraints.<br />\n * <br />\n * Please refer to the [Design documentation](https://docs.wise.design/components/list-item---navigation) for details.\n */\nexport const Navigation = function Navigation({\n href,\n hideIndicator,\n ...props\n}: ListItemNavigationProps) {\n const { baseItemProps } = useListItemControl('navigation', { href, ...props });\n const { ids, describedByIds } = useContext(ListItemContext);\n const icon = hideIndicator ? null : <ChevronRight size={16} data-testid=\"NavigationIndicator\" />;\n\n return href ? (\n <>{icon}</>\n ) : (\n <PrimitiveButton\n disabled={baseItemProps.disabled}\n aria-describedby={describedByIds}\n id={ids.control}\n className=\"btn-unstyled wds-list-item-control\"\n onClick={props.onClick as React.MouseEventHandler<HTMLButtonElement> | undefined}\n >\n {icon}\n </PrimitiveButton>\n );\n};\n\nNavigation.displayName = 'ListItem.Navigation';\n"],"names":["Navigation","href","hideIndicator","props","baseItemProps","useListItemControl","ids","describedByIds","useContext","ListItemContext","icon","_jsx","ChevronRight","size","_Fragment","children","PrimitiveButton","disabled","id","control","className","onClick","displayName"],"mappings":";;;;;;;;AA2BO,MAAMA,UAAU,GAAG,SAASA,UAAUA,CAAC;EAC5CC,IAAI;EACJC,aAAa;EACb,GAAGC;AAAK,CACgB,EAAA;EACxB,MAAM;AAAEC,IAAAA;AAAa,GAAE,GAAGC,kBAAkB,CAAC,YAAY,EAAE;IAAEJ,IAAI;IAAE,GAAGE;AAAK,GAAE,CAAC;EAC9E,MAAM;IAAEG,GAAG;AAAEC,IAAAA;AAAc,GAAE,GAAGC,UAAU,CAACC,eAAe,CAAC;EAC3D,MAAMC,IAAI,GAAGR,aAAa,GAAG,IAAI,gBAAGS,GAAA,CAACC,YAAY,EAAA;AAACC,IAAAA,IAAI,EAAE,EAAG;IAAC,aAAA,EAAY;AAAqB,GAAA,CAAG;AAEhG,EAAA,OAAOZ,IAAI,gBACTU,GAAA,CAAAG,QAAA,EAAA;AAAAC,IAAAA,QAAA,EAAGL;AAAI,GAAC,CAAG,gBAEXC,GAAA,CAACK,eAAe,EAAA;IACdC,QAAQ,EAAEb,aAAa,CAACa,QAAS;AACjC,IAAA,kBAAA,EAAkBV,cAAe;IACjCW,EAAE,EAAEZ,GAAG,CAACa,OAAQ;AAChBC,IAAAA,SAAS,EAAC,oCAAoC;IAC9CC,OAAO,EAAElB,KAAK,CAACkB,OAAkE;AAAAN,IAAAA,QAAA,EAEhFL;AAAI,GACU,CAClB;AACH;AAEAV,UAAU,CAACsB,WAAW,GAAG,qBAAqB;;;;"}
|
package/build/Nudge/Nudge.js
CHANGED
|
@@ -43,7 +43,7 @@ const getLocalStorage = () => {
|
|
|
43
43
|
return storage.map(item => String(item));
|
|
44
44
|
}
|
|
45
45
|
}
|
|
46
|
-
} catch
|
|
46
|
+
} catch {}
|
|
47
47
|
return [];
|
|
48
48
|
};
|
|
49
49
|
const Nudge = ({
|
|
@@ -60,6 +60,15 @@ const Nudge = ({
|
|
|
60
60
|
action
|
|
61
61
|
}) => {
|
|
62
62
|
const intl = reactIntl.useIntl();
|
|
63
|
+
const hasLegacyLink = Boolean(link);
|
|
64
|
+
const hasAction = action != null;
|
|
65
|
+
const shouldRenderLegacyLink = hasLegacyLink && !hasAction;
|
|
66
|
+
React.useEffect(() => {
|
|
67
|
+
if (process.env.NODE_ENV !== 'production' && hasAction && (hasLegacyLink || href != null)) {
|
|
68
|
+
// eslint-disable-next-line no-console -- Intentional developer warning for conflicting API usage.
|
|
69
|
+
console.warn('Nudge received both action and link/href props. Rendering action only. Remove link/href to silence this warning.');
|
|
70
|
+
}
|
|
71
|
+
}, [hasAction, hasLegacyLink, href]);
|
|
63
72
|
const getIsDismissed = React.useCallback(() => persistDismissal && id ? !!getLocalStorage()?.find(item => item === id) : false, [persistDismissal, id]);
|
|
64
73
|
const [nudgeState, setNudgeState] = React.useState(() => ({
|
|
65
74
|
isDismissed: getIsDismissed(),
|
|
@@ -128,7 +137,7 @@ const Nudge = ({
|
|
|
128
137
|
type: typography.Typography.BODY_LARGE,
|
|
129
138
|
className: clsx.clsx('wds-nudge-body'),
|
|
130
139
|
children: title
|
|
131
|
-
}),
|
|
140
|
+
}), shouldRenderLegacyLink && /*#__PURE__*/jsxRuntime.jsx(Link.default, {
|
|
132
141
|
href: href,
|
|
133
142
|
type: typography.Typography.LINK_LARGE,
|
|
134
143
|
className: "wds-nudge-link",
|
package/build/Nudge/Nudge.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Nudge.js","sources":["../../src/Nudge/Nudge.tsx"],"sourcesContent":["import { Illustration, Assets } 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 '../_deprecated/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 | `${Assets.DOCUMENTS}`;\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":"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"}
|
|
1
|
+
{"version":3,"file":"Nudge.js","sources":["../../src/Nudge/Nudge.tsx"],"sourcesContent":["import { Illustration, Assets } 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 '../_deprecated/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 {}\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 | `${Assets.DOCUMENTS}`;\n\ntype BaseProps = {\n /**\n * @deprecated Use `mediaName` instead.\n * Legacy custom media content is no longer used by `Nudge`.\n */\n media?: ReactNode;\n /**\n * Illustration asset name shown at the start of the nudge.\n */\n mediaName?: MediaNameType;\n /** Main nudge message content. */\n title: ReactNode;\n /**\n * Legacy CTA label content.\n * Rendered only when `action` is not provided.\n */\n link?: ReactNode;\n /**\n * Legacy CTA destination for `link`.\n * Ignored when `action` is provided.\n */\n href?: string;\n /**\n * Legacy click handler for `link`.\n * Ignored when `action` is provided.\n */\n onClick?: (event?: MouseEvent<HTMLSpanElement>) => void;\n /** Fired when the user clicks on close button */\n onDismiss?: () => void;\n /**\n * Preferred CTA configuration rendered under the nudge body.\n * Single CTA rule: when `action` is provided, legacy `link`/`href` is not rendered.\n * If your label is short, use `aria-label` to provide more context.\n */\n action?: AlertAction;\n /** Optional class name applied to the root nudge container. */\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 NudgeProps = 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}: NudgeProps) => {\n const intl = useIntl();\n const hasLegacyLink = Boolean(link);\n const hasAction = action != null;\n const shouldRenderLegacyLink = hasLegacyLink && !hasAction;\n\n useEffect(() => {\n if (process.env.NODE_ENV !== 'production' && hasAction && (hasLegacyLink || href != null)) {\n // eslint-disable-next-line no-console -- Intentional developer warning for conflicting API usage.\n console.warn(\n 'Nudge received both action and link/href props. Rendering action only. Remove link/href to silence this warning.',\n );\n }\n }, [hasAction, hasLegacyLink, href]);\n\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 {shouldRenderLegacyLink && (\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","Nudge","mediaName","title","link","href","onClick","onDismiss","persistDismissal","isPreviouslyDismissed","id","className","action","intl","useIntl","hasLegacyLink","Boolean","hasAction","shouldRenderLegacyLink","useEffect","process","env","NODE_ENV","console","warn","getIsDismissed","useCallback","find","nudgeState","setNudgeState","useState","isDismissed","isMounted","prev","handleOnDismiss","dismissedNudgesStorage","setItem","stringify","wasDismissed","_jsxs","clsx","children","_jsx","Illustration","name","size","disablePadding","alt","Body","type","Typography","BODY_LARGE","Link","LINK_LARGE","target","text","IconButton","priority","formatMessage","closeBtnMessages","ariaLabel","Cross"],"mappings":"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"}
|
package/build/Nudge/Nudge.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Illustration } from '@wise/art';
|
|
2
2
|
import { clsx } from 'clsx';
|
|
3
|
-
import { useCallback, useState
|
|
3
|
+
import { useEffect, useCallback, useState } from 'react';
|
|
4
4
|
import Body from '../Body/Body.mjs';
|
|
5
5
|
import '../common/theme.mjs';
|
|
6
6
|
import '../common/direction.mjs';
|
|
@@ -39,7 +39,7 @@ const getLocalStorage = () => {
|
|
|
39
39
|
return storage.map(item => String(item));
|
|
40
40
|
}
|
|
41
41
|
}
|
|
42
|
-
} catch
|
|
42
|
+
} catch {}
|
|
43
43
|
return [];
|
|
44
44
|
};
|
|
45
45
|
const Nudge = ({
|
|
@@ -56,6 +56,15 @@ const Nudge = ({
|
|
|
56
56
|
action
|
|
57
57
|
}) => {
|
|
58
58
|
const intl = useIntl();
|
|
59
|
+
const hasLegacyLink = Boolean(link);
|
|
60
|
+
const hasAction = action != null;
|
|
61
|
+
const shouldRenderLegacyLink = hasLegacyLink && !hasAction;
|
|
62
|
+
useEffect(() => {
|
|
63
|
+
if (process.env.NODE_ENV !== 'production' && hasAction && (hasLegacyLink || href != null)) {
|
|
64
|
+
// eslint-disable-next-line no-console -- Intentional developer warning for conflicting API usage.
|
|
65
|
+
console.warn('Nudge received both action and link/href props. Rendering action only. Remove link/href to silence this warning.');
|
|
66
|
+
}
|
|
67
|
+
}, [hasAction, hasLegacyLink, href]);
|
|
59
68
|
const getIsDismissed = useCallback(() => persistDismissal && id ? !!getLocalStorage()?.find(item => item === id) : false, [persistDismissal, id]);
|
|
60
69
|
const [nudgeState, setNudgeState] = useState(() => ({
|
|
61
70
|
isDismissed: getIsDismissed(),
|
|
@@ -124,7 +133,7 @@ const Nudge = ({
|
|
|
124
133
|
type: Typography.BODY_LARGE,
|
|
125
134
|
className: clsx('wds-nudge-body'),
|
|
126
135
|
children: title
|
|
127
|
-
}),
|
|
136
|
+
}), shouldRenderLegacyLink && /*#__PURE__*/jsx(Link, {
|
|
128
137
|
href: href,
|
|
129
138
|
type: Typography.LINK_LARGE,
|
|
130
139
|
className: "wds-nudge-link",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Nudge.mjs","sources":["../../src/Nudge/Nudge.tsx"],"sourcesContent":["import { Illustration, Assets } 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 '../_deprecated/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 | `${Assets.DOCUMENTS}`;\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":"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"}
|
|
1
|
+
{"version":3,"file":"Nudge.mjs","sources":["../../src/Nudge/Nudge.tsx"],"sourcesContent":["import { Illustration, Assets } 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 '../_deprecated/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 {}\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 | `${Assets.DOCUMENTS}`;\n\ntype BaseProps = {\n /**\n * @deprecated Use `mediaName` instead.\n * Legacy custom media content is no longer used by `Nudge`.\n */\n media?: ReactNode;\n /**\n * Illustration asset name shown at the start of the nudge.\n */\n mediaName?: MediaNameType;\n /** Main nudge message content. */\n title: ReactNode;\n /**\n * Legacy CTA label content.\n * Rendered only when `action` is not provided.\n */\n link?: ReactNode;\n /**\n * Legacy CTA destination for `link`.\n * Ignored when `action` is provided.\n */\n href?: string;\n /**\n * Legacy click handler for `link`.\n * Ignored when `action` is provided.\n */\n onClick?: (event?: MouseEvent<HTMLSpanElement>) => void;\n /** Fired when the user clicks on close button */\n onDismiss?: () => void;\n /**\n * Preferred CTA configuration rendered under the nudge body.\n * Single CTA rule: when `action` is provided, legacy `link`/`href` is not rendered.\n * If your label is short, use `aria-label` to provide more context.\n */\n action?: AlertAction;\n /** Optional class name applied to the root nudge container. */\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 NudgeProps = 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}: NudgeProps) => {\n const intl = useIntl();\n const hasLegacyLink = Boolean(link);\n const hasAction = action != null;\n const shouldRenderLegacyLink = hasLegacyLink && !hasAction;\n\n useEffect(() => {\n if (process.env.NODE_ENV !== 'production' && hasAction && (hasLegacyLink || href != null)) {\n // eslint-disable-next-line no-console -- Intentional developer warning for conflicting API usage.\n console.warn(\n 'Nudge received both action and link/href props. Rendering action only. Remove link/href to silence this warning.',\n );\n }\n }, [hasAction, hasLegacyLink, href]);\n\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 {shouldRenderLegacyLink && (\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","Nudge","mediaName","title","link","href","onClick","onDismiss","persistDismissal","isPreviouslyDismissed","id","className","action","intl","useIntl","hasLegacyLink","Boolean","hasAction","shouldRenderLegacyLink","useEffect","process","env","NODE_ENV","console","warn","getIsDismissed","useCallback","find","nudgeState","setNudgeState","useState","isDismissed","isMounted","prev","handleOnDismiss","dismissedNudgesStorage","setItem","stringify","wasDismissed","_jsxs","clsx","children","_jsx","Illustration","name","size","disablePadding","alt","Body","type","Typography","BODY_LARGE","Link","LINK_LARGE","target","text","IconButton","priority","formatMessage","closeBtnMessages","ariaLabel","Cross"],"mappings":"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"}
|
package/build/Sticky/Sticky.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sticky.js","sources":["../../src/Sticky/Sticky.tsx"],"sourcesContent":["import { Position } from '../common';\nimport SlidingPanel from '../SlidingPanel';\nimport { FunctionComponent } from 'react';\n\nexport interface StickyProps {\n /** Optional prop for children components to be rendered inside the Sticky component. */\n children?: React.ReactNode;\n\n /** Optional props that determines if the Sticky component is open or closed. Default value is `true`. */\n open?: boolean;\n\n /** Optional props that specifies the position of the Sticky component on the screen. Can be either `top` or `bottom`. */\n position?: `${Position.TOP}` | `${Position.BOTTOM}`;\n\n /** Optional prop to specify the ID used for testing */\n testId?: string;\n}\n\n/**\n * ### Sticky Component\n *\n * `<Sticky />` is a component that renders a `<SlidingPanel />` with specified props.\n * It uses the `<SlidingPanel />` component to create a panel that can slide in and out of view,\n * based on the `open` prop. It can be positioned at the top or bottom of the container,\n * as specified by the `position` prop.\n *\n * @component\n * @param {ReactNode} children - Children content.\n * @param {boolean} open - Determines if the Sticky component is open or closed.\n * @param {('top'|'bottom')} position - Specifies the position.\n * @param {string} testId - ID used for testing.\n * @returns {React.JSX.Element} The `SlidingPanel` component with applied props.\n * @example\n * <Button onClick={() => setOpen(!open)}>Open Sticky</Button>\n * <Sticky open={open} position={'bottom'}>\n * <div>\n * <Button onClick={() => setOpen(!open)}>Close Sticky</Button>\n * </div>\n * </Sticky>\n */\nconst Sticky: FunctionComponent<StickyProps> = ({\n children,\n open = true,\n position = Position.BOTTOM,\n testId,\n}: StickyProps) => {\n return (\n <SlidingPanel\n testId={testId}\n open={open}\n position={position}\n slidingPanelPositionFixed\n showSlidingPanelBorder\n >\n {children}\n </SlidingPanel>\n );\n};\n\nexport default Sticky;\n"],"names":["Sticky","children","open","position","Position","BOTTOM","testId","_jsx","SlidingPanel","slidingPanelPositionFixed","showSlidingPanelBorder"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA,MAAMA,MAAM,GAAmCA,CAAC;EAC9CC,QAAQ;AACRC,EAAAA,IAAI,GAAG,IAAI;YACXC,UAAQ,GAAGC,iBAAQ,CAACC,MAAM;AAC1BC,EAAAA;AAAM,CACM,KAAI;EAChB,oBACEC,cAAA,CAACC,oBAAY,EAAA;
|
|
1
|
+
{"version":3,"file":"Sticky.js","sources":["../../src/Sticky/Sticky.tsx"],"sourcesContent":["import { Position } from '../common';\nimport SlidingPanel from '../SlidingPanel';\nimport { FunctionComponent } from 'react';\n\nexport interface StickyProps {\n /** Optional prop for children components to be rendered inside the Sticky component. */\n children?: React.ReactNode;\n\n /** Optional props that determines if the Sticky component is open or closed. Default value is `true`. */\n open?: boolean;\n\n /** Optional props that specifies the position of the Sticky component on the screen. Can be either `top` or `bottom`. */\n position?: `${Position.TOP}` | `${Position.BOTTOM}`;\n\n /** Optional prop to specify the ID used for testing */\n testId?: string;\n}\n\n/**\n * ### Sticky Component\n *\n * `<Sticky />` is a component that renders a `<SlidingPanel />` with specified props.\n * It uses the `<SlidingPanel />` component to create a panel that can slide in and out of view,\n * based on the `open` prop. It can be positioned at the top or bottom of the container,\n * as specified by the `position` prop.\n *\n * @component\n * @param {ReactNode} children - Children content.\n * @param {boolean} open - Determines if the Sticky component is open or closed.\n * @param {('top'|'bottom')} position - Specifies the position.\n * @param {string} testId - ID used for testing.\n * @returns {React.JSX.Element} The `SlidingPanel` component with applied props.\n * @example\n * <Button onClick={() => setOpen(!open)}>Open Sticky</Button>\n * <Sticky open={open} position={'bottom'}>\n * <div>\n * <Button onClick={() => setOpen(!open)}>Close Sticky</Button>\n * </div>\n * </Sticky>\n */\nconst Sticky: FunctionComponent<StickyProps> = ({\n children,\n open = true,\n position = Position.BOTTOM,\n testId,\n}: StickyProps) => {\n return (\n <SlidingPanel\n className=\"wds-sticky\"\n testId={testId}\n open={open}\n position={position}\n slidingPanelPositionFixed\n showSlidingPanelBorder\n >\n {children}\n </SlidingPanel>\n );\n};\n\nexport default Sticky;\n"],"names":["Sticky","children","open","position","Position","BOTTOM","testId","_jsx","SlidingPanel","className","slidingPanelPositionFixed","showSlidingPanelBorder"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA,MAAMA,MAAM,GAAmCA,CAAC;EAC9CC,QAAQ;AACRC,EAAAA,IAAI,GAAG,IAAI;YACXC,UAAQ,GAAGC,iBAAQ,CAACC,MAAM;AAC1BC,EAAAA;AAAM,CACM,KAAI;EAChB,oBACEC,cAAA,CAACC,oBAAY,EAAA;AACXC,IAAAA,SAAS,EAAC,YAAY;AACtBH,IAAAA,MAAM,EAAEA,MAAO;AACfJ,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,QAAQ,EAAEA,UAAS;IACnBO,yBAAyB,EAAA,IAAA;IACzBC,sBAAsB,EAAA,IAAA;AAAAV,IAAAA,QAAA,EAErBA;AAAQ,GACG,CAAC;AAEnB;;;;"}
|
package/build/Sticky/Sticky.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sticky.mjs","sources":["../../src/Sticky/Sticky.tsx"],"sourcesContent":["import { Position } from '../common';\nimport SlidingPanel from '../SlidingPanel';\nimport { FunctionComponent } from 'react';\n\nexport interface StickyProps {\n /** Optional prop for children components to be rendered inside the Sticky component. */\n children?: React.ReactNode;\n\n /** Optional props that determines if the Sticky component is open or closed. Default value is `true`. */\n open?: boolean;\n\n /** Optional props that specifies the position of the Sticky component on the screen. Can be either `top` or `bottom`. */\n position?: `${Position.TOP}` | `${Position.BOTTOM}`;\n\n /** Optional prop to specify the ID used for testing */\n testId?: string;\n}\n\n/**\n * ### Sticky Component\n *\n * `<Sticky />` is a component that renders a `<SlidingPanel />` with specified props.\n * It uses the `<SlidingPanel />` component to create a panel that can slide in and out of view,\n * based on the `open` prop. It can be positioned at the top or bottom of the container,\n * as specified by the `position` prop.\n *\n * @component\n * @param {ReactNode} children - Children content.\n * @param {boolean} open - Determines if the Sticky component is open or closed.\n * @param {('top'|'bottom')} position - Specifies the position.\n * @param {string} testId - ID used for testing.\n * @returns {React.JSX.Element} The `SlidingPanel` component with applied props.\n * @example\n * <Button onClick={() => setOpen(!open)}>Open Sticky</Button>\n * <Sticky open={open} position={'bottom'}>\n * <div>\n * <Button onClick={() => setOpen(!open)}>Close Sticky</Button>\n * </div>\n * </Sticky>\n */\nconst Sticky: FunctionComponent<StickyProps> = ({\n children,\n open = true,\n position = Position.BOTTOM,\n testId,\n}: StickyProps) => {\n return (\n <SlidingPanel\n testId={testId}\n open={open}\n position={position}\n slidingPanelPositionFixed\n showSlidingPanelBorder\n >\n {children}\n </SlidingPanel>\n );\n};\n\nexport default Sticky;\n"],"names":["Sticky","children","open","position","Position","BOTTOM","testId","_jsx","SlidingPanel","slidingPanelPositionFixed","showSlidingPanelBorder"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA,MAAMA,MAAM,GAAmCA,CAAC;EAC9CC,QAAQ;AACRC,EAAAA,IAAI,GAAG,IAAI;EACXC,QAAQ,GAAGC,QAAQ,CAACC,MAAM;AAC1BC,EAAAA;AAAM,CACM,KAAI;EAChB,oBACEC,GAAA,CAACC,YAAY,EAAA;
|
|
1
|
+
{"version":3,"file":"Sticky.mjs","sources":["../../src/Sticky/Sticky.tsx"],"sourcesContent":["import { Position } from '../common';\nimport SlidingPanel from '../SlidingPanel';\nimport { FunctionComponent } from 'react';\n\nexport interface StickyProps {\n /** Optional prop for children components to be rendered inside the Sticky component. */\n children?: React.ReactNode;\n\n /** Optional props that determines if the Sticky component is open or closed. Default value is `true`. */\n open?: boolean;\n\n /** Optional props that specifies the position of the Sticky component on the screen. Can be either `top` or `bottom`. */\n position?: `${Position.TOP}` | `${Position.BOTTOM}`;\n\n /** Optional prop to specify the ID used for testing */\n testId?: string;\n}\n\n/**\n * ### Sticky Component\n *\n * `<Sticky />` is a component that renders a `<SlidingPanel />` with specified props.\n * It uses the `<SlidingPanel />` component to create a panel that can slide in and out of view,\n * based on the `open` prop. It can be positioned at the top or bottom of the container,\n * as specified by the `position` prop.\n *\n * @component\n * @param {ReactNode} children - Children content.\n * @param {boolean} open - Determines if the Sticky component is open or closed.\n * @param {('top'|'bottom')} position - Specifies the position.\n * @param {string} testId - ID used for testing.\n * @returns {React.JSX.Element} The `SlidingPanel` component with applied props.\n * @example\n * <Button onClick={() => setOpen(!open)}>Open Sticky</Button>\n * <Sticky open={open} position={'bottom'}>\n * <div>\n * <Button onClick={() => setOpen(!open)}>Close Sticky</Button>\n * </div>\n * </Sticky>\n */\nconst Sticky: FunctionComponent<StickyProps> = ({\n children,\n open = true,\n position = Position.BOTTOM,\n testId,\n}: StickyProps) => {\n return (\n <SlidingPanel\n className=\"wds-sticky\"\n testId={testId}\n open={open}\n position={position}\n slidingPanelPositionFixed\n showSlidingPanelBorder\n >\n {children}\n </SlidingPanel>\n );\n};\n\nexport default Sticky;\n"],"names":["Sticky","children","open","position","Position","BOTTOM","testId","_jsx","SlidingPanel","className","slidingPanelPositionFixed","showSlidingPanelBorder"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA,MAAMA,MAAM,GAAmCA,CAAC;EAC9CC,QAAQ;AACRC,EAAAA,IAAI,GAAG,IAAI;EACXC,QAAQ,GAAGC,QAAQ,CAACC,MAAM;AAC1BC,EAAAA;AAAM,CACM,KAAI;EAChB,oBACEC,GAAA,CAACC,YAAY,EAAA;AACXC,IAAAA,SAAS,EAAC,YAAY;AACtBH,IAAAA,MAAM,EAAEA,MAAO;AACfJ,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,QAAQ,EAAEA,QAAS;IACnBO,yBAAyB,EAAA,IAAA;IACzBC,sBAAsB,EAAA,IAAA;AAAAV,IAAAA,QAAA,EAErBA;AAAQ,GACG,CAAC;AAEnB;;;;"}
|
package/build/Title/Title.js
CHANGED
package/build/Title/Title.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Title.js","sources":["../../src/Title/Title.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, {
|
|
1
|
+
{"version":3,"file":"Title.js","sources":["../../src/Title/Title.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { LabelHTMLAttributes, LiHTMLAttributes } from 'react';\n\nimport { TitleTypes, Typography, Heading } from '../common';\n\nconst DEFAULT_TYPE = Typography.TITLE_GROUP;\n\nconst titleTypeMapping = {\n [Typography.TITLE_SCREEN]: 'h1',\n [Typography.TITLE_SECTION]: 'h2',\n [Typography.TITLE_SUBSECTION]: 'h3',\n [Typography.TITLE_BODY]: 'h4',\n [Typography.TITLE_GROUP]: 'h5',\n} as const;\n\nexport type TitleProps = LabelHTMLAttributes<\n HTMLHeadingElement | HTMLSpanElement | HTMLLabelElement\n> &\n LiHTMLAttributes<HTMLLIElement> & {\n /**\n * Default value will based one `type` prop\n */\n as?: 'span' | 'label' | 'li' | 'legend' | 'header' | Heading;\n /**\n * Default value: {@link DEFAULT_TYPE}\n */\n type?: TitleTypes;\n };\n\nconst Title = React.forwardRef<\n HTMLHeadingElement | HTMLSpanElement | HTMLLabelElement | HTMLLIElement | HTMLLegendElement,\n TitleProps\n>(({ as, type = DEFAULT_TYPE, className, ...props }, ref) => {\n const mapping = titleTypeMapping[type as keyof typeof titleTypeMapping];\n const isTypeSupported = mapping !== undefined;\n if (isTypeSupported) {\n const HeaderTag = as ?? mapping;\n return (\n <HeaderTag\n ref={ref as React.Ref<any>}\n {...props}\n className={clsx(`np-text-${type}`, className)}\n />\n );\n }\n const HeaderTag = as ?? titleTypeMapping[DEFAULT_TYPE];\n return (\n <HeaderTag\n ref={ref as React.Ref<any>}\n {...props}\n className={clsx(`np-text-${DEFAULT_TYPE}`, className)}\n />\n );\n});\n\nTitle.displayName = 'Title';\n\nexport default Title;\n"],"names":["DEFAULT_TYPE","Typography","TITLE_GROUP","titleTypeMapping","TITLE_SCREEN","TITLE_SECTION","TITLE_SUBSECTION","TITLE_BODY","Title","React","forwardRef","as","type","className","props","ref","mapping","isTypeSupported","undefined","HeaderTag","_jsx","clsx","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,MAAMA,YAAY,GAAGC,qBAAU,CAACC,WAAW;AAE3C,MAAMC,gBAAgB,GAAG;AACvB,EAAA,CAACF,qBAAU,CAACG,YAAY,GAAG,IAAI;AAC/B,EAAA,CAACH,qBAAU,CAACI,aAAa,GAAG,IAAI;AAChC,EAAA,CAACJ,qBAAU,CAACK,gBAAgB,GAAG,IAAI;AACnC,EAAA,CAACL,qBAAU,CAACM,UAAU,GAAG,IAAI;EAC7B,CAACN,qBAAU,CAACC,WAAW,GAAG;CAClB;AAgBV,MAAMM,KAAK,gBAAGC,sBAAK,CAACC,UAAU,CAG5B,CAAC;EAAEC,EAAE;AAAEC,EAAAA,IAAI,GAAGZ,YAAY;EAAEa,SAAS;EAAE,GAAGC;AAAK,CAAE,EAAEC,GAAG,KAAI;AAC1D,EAAA,MAAMC,OAAO,GAAGb,gBAAgB,CAACS,IAAqC,CAAC;AACvE,EAAA,MAAMK,eAAe,GAAGD,OAAO,KAAKE,SAAS;AAC7C,EAAA,IAAID,eAAe,EAAE;AACnB,IAAA,MAAME,SAAS,GAAGR,EAAE,IAAIK,OAAO;IAC/B,oBACEI,cAAA,CAACD,SAAS,EAAA;AACRJ,MAAAA,GAAG,EAAEA,GAAsB;AAAA,MAAA,GACvBD,KAAK;AACTD,MAAAA,SAAS,EAAEQ,SAAI,CAAC,WAAWT,IAAI,CAAA,CAAE,EAAEC,SAAS;AAAE,KAAA,CAC9C;AAEN,EAAA;AACA,EAAA,MAAMM,SAAS,GAAGR,EAAE,IAAIR,gBAAgB,CAACH,YAAY,CAAC;EACtD,oBACEoB,cAAA,CAACD,SAAS,EAAA;AACRJ,IAAAA,GAAG,EAAEA,GAAsB;AAAA,IAAA,GACvBD,KAAK;AACTD,IAAAA,SAAS,EAAEQ,SAAI,CAAC,WAAWrB,YAAY,CAAA,CAAE,EAAEa,SAAS;AAAE,GAAA,CACtD;AAEN,CAAC;AAEDL,KAAK,CAACc,WAAW,GAAG,OAAO;;;;"}
|
package/build/Title/Title.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Title.mjs","sources":["../../src/Title/Title.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, {
|
|
1
|
+
{"version":3,"file":"Title.mjs","sources":["../../src/Title/Title.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { LabelHTMLAttributes, LiHTMLAttributes } from 'react';\n\nimport { TitleTypes, Typography, Heading } from '../common';\n\nconst DEFAULT_TYPE = Typography.TITLE_GROUP;\n\nconst titleTypeMapping = {\n [Typography.TITLE_SCREEN]: 'h1',\n [Typography.TITLE_SECTION]: 'h2',\n [Typography.TITLE_SUBSECTION]: 'h3',\n [Typography.TITLE_BODY]: 'h4',\n [Typography.TITLE_GROUP]: 'h5',\n} as const;\n\nexport type TitleProps = LabelHTMLAttributes<\n HTMLHeadingElement | HTMLSpanElement | HTMLLabelElement\n> &\n LiHTMLAttributes<HTMLLIElement> & {\n /**\n * Default value will based one `type` prop\n */\n as?: 'span' | 'label' | 'li' | 'legend' | 'header' | Heading;\n /**\n * Default value: {@link DEFAULT_TYPE}\n */\n type?: TitleTypes;\n };\n\nconst Title = React.forwardRef<\n HTMLHeadingElement | HTMLSpanElement | HTMLLabelElement | HTMLLIElement | HTMLLegendElement,\n TitleProps\n>(({ as, type = DEFAULT_TYPE, className, ...props }, ref) => {\n const mapping = titleTypeMapping[type as keyof typeof titleTypeMapping];\n const isTypeSupported = mapping !== undefined;\n if (isTypeSupported) {\n const HeaderTag = as ?? mapping;\n return (\n <HeaderTag\n ref={ref as React.Ref<any>}\n {...props}\n className={clsx(`np-text-${type}`, className)}\n />\n );\n }\n const HeaderTag = as ?? titleTypeMapping[DEFAULT_TYPE];\n return (\n <HeaderTag\n ref={ref as React.Ref<any>}\n {...props}\n className={clsx(`np-text-${DEFAULT_TYPE}`, className)}\n />\n );\n});\n\nTitle.displayName = 'Title';\n\nexport default Title;\n"],"names":["DEFAULT_TYPE","Typography","TITLE_GROUP","titleTypeMapping","TITLE_SCREEN","TITLE_SECTION","TITLE_SUBSECTION","TITLE_BODY","Title","React","forwardRef","as","type","className","props","ref","mapping","isTypeSupported","undefined","HeaderTag","_jsx","clsx","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,MAAMA,YAAY,GAAGC,UAAU,CAACC,WAAW;AAE3C,MAAMC,gBAAgB,GAAG;AACvB,EAAA,CAACF,UAAU,CAACG,YAAY,GAAG,IAAI;AAC/B,EAAA,CAACH,UAAU,CAACI,aAAa,GAAG,IAAI;AAChC,EAAA,CAACJ,UAAU,CAACK,gBAAgB,GAAG,IAAI;AACnC,EAAA,CAACL,UAAU,CAACM,UAAU,GAAG,IAAI;EAC7B,CAACN,UAAU,CAACC,WAAW,GAAG;CAClB;AAgBV,MAAMM,KAAK,gBAAGC,cAAK,CAACC,UAAU,CAG5B,CAAC;EAAEC,EAAE;AAAEC,EAAAA,IAAI,GAAGZ,YAAY;EAAEa,SAAS;EAAE,GAAGC;AAAK,CAAE,EAAEC,GAAG,KAAI;AAC1D,EAAA,MAAMC,OAAO,GAAGb,gBAAgB,CAACS,IAAqC,CAAC;AACvE,EAAA,MAAMK,eAAe,GAAGD,OAAO,KAAKE,SAAS;AAC7C,EAAA,IAAID,eAAe,EAAE;AACnB,IAAA,MAAME,SAAS,GAAGR,EAAE,IAAIK,OAAO;IAC/B,oBACEI,GAAA,CAACD,SAAS,EAAA;AACRJ,MAAAA,GAAG,EAAEA,GAAsB;AAAA,MAAA,GACvBD,KAAK;AACTD,MAAAA,SAAS,EAAEQ,IAAI,CAAC,WAAWT,IAAI,CAAA,CAAE,EAAEC,SAAS;AAAE,KAAA,CAC9C;AAEN,EAAA;AACA,EAAA,MAAMM,SAAS,GAAGR,EAAE,IAAIR,gBAAgB,CAACH,YAAY,CAAC;EACtD,oBACEoB,GAAA,CAACD,SAAS,EAAA;AACRJ,IAAAA,GAAG,EAAEA,GAAsB;AAAA,IAAA,GACvBD,KAAK;AACTD,IAAAA,SAAS,EAAEQ,IAAI,CAAC,WAAWrB,YAAY,CAAA,CAAE,EAAEa,SAAS;AAAE,GAAA,CACtD;AAEN,CAAC;AAEDL,KAAK,CAACc,WAAW,GAAG,OAAO;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Option.js","sources":["../../../../src/_deprecated/Select/Option/Option.tsx"],"sourcesContent":["import { IdIconProps } from '@transferwise/icons';\nimport { Flag } from '@wise/art';\nimport { clsx } from 'clsx';\nimport { cloneElement, ReactElement, ReactNode } from 'react';\n\nimport Body from '../../../Body';\nimport { Typography } from '../../../common';\n\nexport type
|
|
1
|
+
{"version":3,"file":"Option.js","sources":["../../../../src/_deprecated/Select/Option/Option.tsx"],"sourcesContent":["import { IdIconProps } from '@transferwise/icons';\nimport { Flag } from '@wise/art';\nimport { clsx } from 'clsx';\nimport { cloneElement, ReactElement, ReactNode } from 'react';\n\nimport Body from '../../../Body';\nimport { Typography } from '../../../common';\n\nexport type OptionProps<T> = {\n label: ReactNode;\n value: T;\n currency?: string;\n note?: ReactNode;\n secondary?: ReactNode;\n icon?: ReactNode;\n /** @deprecated */\n classNames?: Record<string, string>;\n selected?: boolean;\n testId?: string;\n};\n\nfunction Option<T>({\n label,\n currency = '',\n note = '',\n secondary = '',\n icon,\n selected = false,\n testId,\n}: OptionProps<T>) {\n const iconElement = icon\n ? cloneElement(icon as ReactElement<IdIconProps>, {\n size: 24,\n className: 'tw-icon',\n })\n : currency && <Flag code={currency.toLowerCase()} intrinsicSize={24} />;\n\n const titleAndNoteElement = (\n <Body as=\"span\" type={Typography.BODY_LARGE} className={selected ? 'text-ellipsis' : undefined}>\n {label}\n {note && (\n <Body as=\"span\" className=\"m-l-1\">\n {note}\n </Body>\n )}\n </Body>\n );\n\n const secondaryElement = secondary && (\n <Body className={clsx(selected && 'text-ellipsis')}>{secondary}</Body>\n );\n\n return iconElement ? (\n <div className=\"d-flex np-option-content\" data-testid={testId}>\n <div className={`d-flex flex-column${selected ? ' justify-content-center' : ''}`}>\n {iconElement}\n </div>\n <div className=\"d-flex flex-column justify-content-center\">\n {titleAndNoteElement}\n {secondaryElement}\n </div>\n </div>\n ) : (\n <>\n {iconElement}\n {titleAndNoteElement}\n {secondaryElement}\n </>\n );\n}\n\nexport default Option;\n"],"names":["Option","label","currency","note","secondary","icon","selected","testId","iconElement","cloneElement","size","className","_jsx","Flag","code","toLowerCase","intrinsicSize","titleAndNoteElement","_jsxs","Body","as","type","Typography","BODY_LARGE","undefined","children","secondaryElement","clsx","_Fragment"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,SAASA,MAAMA,CAAI;EACjBC,KAAK;AACLC,EAAAA,QAAQ,GAAG,EAAE;AACbC,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,SAAS,GAAG,EAAE;EACdC,IAAI;AACJC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA;AAAM,CACS,EAAA;AACf,EAAA,MAAMC,WAAW,GAAGH,IAAI,gBACpBI,kBAAY,CAACJ,IAAiC,EAAE;AAC9CK,IAAAA,IAAI,EAAE,EAAE;AACRC,IAAAA,SAAS,EAAE;GACZ,CAAC,GACFT,QAAQ,iBAAIU,cAAA,CAACC,QAAI,EAAA;AAACC,IAAAA,IAAI,EAAEZ,QAAQ,CAACa,WAAW,EAAG;AAACC,IAAAA,aAAa,EAAE;AAAG,GAAA,CAAG;AAEzE,EAAA,MAAMC,mBAAmB,gBACvBC,eAAA,CAACC,YAAI,EAAA;AAACC,IAAAA,EAAE,EAAC,MAAM;IAACC,IAAI,EAAEC,qBAAU,CAACC,UAAW;AAACZ,IAAAA,SAAS,EAAEL,QAAQ,GAAG,eAAe,GAAGkB,SAAU;AAAAC,IAAAA,QAAA,GAC5FxB,KAAK,EACLE,IAAI,iBACHS,cAAA,CAACO,YAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;AAACT,MAAAA,SAAS,EAAC,OAAO;AAAAc,MAAAA,QAAA,EAC9BtB;AAAI,KACD,CACP;AAAA,GACG,CACP;AAED,EAAA,MAAMuB,gBAAgB,GAAGtB,SAAS,iBAChCQ,cAAA,CAACO,YAAI,EAAA;AAACR,IAAAA,SAAS,EAAEgB,SAAI,CAACrB,QAAQ,IAAI,eAAe,CAAE;AAAAmB,IAAAA,QAAA,EAAErB;AAAS,GAAO,CACtE;EAED,OAAOI,WAAW,gBAChBU,eAAA,CAAA,KAAA,EAAA;AAAKP,IAAAA,SAAS,EAAC,0BAA0B;AAAC,IAAA,aAAA,EAAaJ,MAAO;AAAAkB,IAAAA,QAAA,gBAC5Db,cAAA,CAAA,KAAA,EAAA;AAAKD,MAAAA,SAAS,EAAE,CAAA,kBAAA,EAAqBL,QAAQ,GAAG,yBAAyB,GAAG,EAAE,CAAA,CAAG;AAAAmB,MAAAA,QAAA,EAC9EjB;KACE,CACL,eAAAU,eAAA,CAAA,KAAA,EAAA;AAAKP,MAAAA,SAAS,EAAC,2CAA2C;MAAAc,QAAA,EAAA,CACvDR,mBAAmB,EACnBS,gBAAgB;AAAA,KACd,CACP;AAAA,GAAK,CAAC,gBAENR,eAAA,CAAAU,mBAAA,EAAA;AAAAH,IAAAA,QAAA,EAAA,CACGjB,WAAW,EACXS,mBAAmB,EACnBS,gBAAgB;AAAA,GACnB,CACD;AACH;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Option.mjs","sources":["../../../../src/_deprecated/Select/Option/Option.tsx"],"sourcesContent":["import { IdIconProps } from '@transferwise/icons';\nimport { Flag } from '@wise/art';\nimport { clsx } from 'clsx';\nimport { cloneElement, ReactElement, ReactNode } from 'react';\n\nimport Body from '../../../Body';\nimport { Typography } from '../../../common';\n\nexport type
|
|
1
|
+
{"version":3,"file":"Option.mjs","sources":["../../../../src/_deprecated/Select/Option/Option.tsx"],"sourcesContent":["import { IdIconProps } from '@transferwise/icons';\nimport { Flag } from '@wise/art';\nimport { clsx } from 'clsx';\nimport { cloneElement, ReactElement, ReactNode } from 'react';\n\nimport Body from '../../../Body';\nimport { Typography } from '../../../common';\n\nexport type OptionProps<T> = {\n label: ReactNode;\n value: T;\n currency?: string;\n note?: ReactNode;\n secondary?: ReactNode;\n icon?: ReactNode;\n /** @deprecated */\n classNames?: Record<string, string>;\n selected?: boolean;\n testId?: string;\n};\n\nfunction Option<T>({\n label,\n currency = '',\n note = '',\n secondary = '',\n icon,\n selected = false,\n testId,\n}: OptionProps<T>) {\n const iconElement = icon\n ? cloneElement(icon as ReactElement<IdIconProps>, {\n size: 24,\n className: 'tw-icon',\n })\n : currency && <Flag code={currency.toLowerCase()} intrinsicSize={24} />;\n\n const titleAndNoteElement = (\n <Body as=\"span\" type={Typography.BODY_LARGE} className={selected ? 'text-ellipsis' : undefined}>\n {label}\n {note && (\n <Body as=\"span\" className=\"m-l-1\">\n {note}\n </Body>\n )}\n </Body>\n );\n\n const secondaryElement = secondary && (\n <Body className={clsx(selected && 'text-ellipsis')}>{secondary}</Body>\n );\n\n return iconElement ? (\n <div className=\"d-flex np-option-content\" data-testid={testId}>\n <div className={`d-flex flex-column${selected ? ' justify-content-center' : ''}`}>\n {iconElement}\n </div>\n <div className=\"d-flex flex-column justify-content-center\">\n {titleAndNoteElement}\n {secondaryElement}\n </div>\n </div>\n ) : (\n <>\n {iconElement}\n {titleAndNoteElement}\n {secondaryElement}\n </>\n );\n}\n\nexport default Option;\n"],"names":["Option","label","currency","note","secondary","icon","selected","testId","iconElement","cloneElement","size","className","_jsx","Flag","code","toLowerCase","intrinsicSize","titleAndNoteElement","_jsxs","Body","as","type","Typography","BODY_LARGE","undefined","children","secondaryElement","clsx","_Fragment"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,SAASA,MAAMA,CAAI;EACjBC,KAAK;AACLC,EAAAA,QAAQ,GAAG,EAAE;AACbC,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,SAAS,GAAG,EAAE;EACdC,IAAI;AACJC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA;AAAM,CACS,EAAA;AACf,EAAA,MAAMC,WAAW,GAAGH,IAAI,gBACpBI,YAAY,CAACJ,IAAiC,EAAE;AAC9CK,IAAAA,IAAI,EAAE,EAAE;AACRC,IAAAA,SAAS,EAAE;GACZ,CAAC,GACFT,QAAQ,iBAAIU,GAAA,CAACC,IAAI,EAAA;AAACC,IAAAA,IAAI,EAAEZ,QAAQ,CAACa,WAAW,EAAG;AAACC,IAAAA,aAAa,EAAE;AAAG,GAAA,CAAG;AAEzE,EAAA,MAAMC,mBAAmB,gBACvBC,IAAA,CAACC,IAAI,EAAA;AAACC,IAAAA,EAAE,EAAC,MAAM;IAACC,IAAI,EAAEC,UAAU,CAACC,UAAW;AAACZ,IAAAA,SAAS,EAAEL,QAAQ,GAAG,eAAe,GAAGkB,SAAU;AAAAC,IAAAA,QAAA,GAC5FxB,KAAK,EACLE,IAAI,iBACHS,GAAA,CAACO,IAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;AAACT,MAAAA,SAAS,EAAC,OAAO;AAAAc,MAAAA,QAAA,EAC9BtB;AAAI,KACD,CACP;AAAA,GACG,CACP;AAED,EAAA,MAAMuB,gBAAgB,GAAGtB,SAAS,iBAChCQ,GAAA,CAACO,IAAI,EAAA;AAACR,IAAAA,SAAS,EAAEgB,IAAI,CAACrB,QAAQ,IAAI,eAAe,CAAE;AAAAmB,IAAAA,QAAA,EAAErB;AAAS,GAAO,CACtE;EAED,OAAOI,WAAW,gBAChBU,IAAA,CAAA,KAAA,EAAA;AAAKP,IAAAA,SAAS,EAAC,0BAA0B;AAAC,IAAA,aAAA,EAAaJ,MAAO;AAAAkB,IAAAA,QAAA,gBAC5Db,GAAA,CAAA,KAAA,EAAA;AAAKD,MAAAA,SAAS,EAAE,CAAA,kBAAA,EAAqBL,QAAQ,GAAG,yBAAyB,GAAG,EAAE,CAAA,CAAG;AAAAmB,MAAAA,QAAA,EAC9EjB;KACE,CACL,eAAAU,IAAA,CAAA,KAAA,EAAA;AAAKP,MAAAA,SAAS,EAAC,2CAA2C;MAAAc,QAAA,EAAA,CACvDR,mBAAmB,EACnBS,gBAAgB;AAAA,KACd,CACP;AAAA,GAAK,CAAC,gBAENR,IAAA,CAAAU,QAAA,EAAA;AAAAH,IAAAA,QAAA,EAAA,CACGjB,WAAW,EACXS,mBAAmB,EACnBS,gBAAgB;AAAA,GACnB,CACD;AACH;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchBox.js","sources":["../../../../src/_deprecated/Select/SearchBox/SearchBox.tsx"],"sourcesContent":["import { Search as SearchIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { forwardRef, InputHTMLAttributes } from 'react';\n\nimport { Input } from '../../../Inputs/Input/Input';\n\ntype
|
|
1
|
+
{"version":3,"file":"SearchBox.js","sources":["../../../../src/_deprecated/Select/SearchBox/SearchBox.tsx"],"sourcesContent":["import { Search as SearchIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { forwardRef, InputHTMLAttributes } from 'react';\n\nimport { Input } from '../../../Inputs/Input/Input';\n\ntype SearchBoxProps = {\n id?: string;\n classNames?: Record<string, string>;\n focusedOptionId?: string;\n} & Pick<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onClick' | 'placeholder' | 'value'>;\n\nconst SearchBox = forwardRef<HTMLInputElement, SearchBoxProps>(\n (\n {\n id,\n classNames = {},\n focusedOptionId,\n onChange,\n onClick,\n placeholder = undefined,\n value = '',\n },\n reference,\n ) => {\n const style = (className: string) => classNames[className] || className;\n return (\n <li className={style('border-bottom')}>\n <a className={`${style('np-select-filter-link')} ${style('p-a-0')}`}>\n <div className={style('input-group')}>\n <span className={clsx('input-group-addon', 'input-group-addon--search')}>\n <SearchIcon className={clsx(style('tw-icon'), style('tw-icon-search'))} size={24} />\n </span>\n <Input\n ref={reference}\n id={id}\n role=\"searchbox\"\n inputMode=\"search\"\n className={clsx(style('np-select-filter'))}\n placeholder={placeholder}\n value={value}\n spellCheck=\"false\"\n aria-activedescendant={focusedOptionId}\n onChange={onChange}\n onClick={onClick}\n />\n </div>\n </a>\n </li>\n );\n },\n);\n\nexport default SearchBox;\n"],"names":["SearchBox","forwardRef","id","classNames","focusedOptionId","onChange","onClick","placeholder","undefined","value","reference","style","className","_jsx","children","_jsxs","clsx","SearchIcon","size","Input","ref","role","inputMode","spellCheck"],"mappings":";;;;;;;;;;AAYA,MAAMA,SAAS,gBAAGC,gBAAU,CAC1B,CACE;EACEC,EAAE;EACFC,UAAU,GAAG,EAAE;EACfC,eAAe;EACfC,QAAQ;EACRC,OAAO;AACPC,EAAAA,WAAW,GAAGC,SAAS;AACvBC,EAAAA,KAAK,GAAG;AAAE,CACX,EACDC,SAAS,KACP;EACF,MAAMC,KAAK,GAAIC,SAAiB,IAAKT,UAAU,CAACS,SAAS,CAAC,IAAIA,SAAS;AACvE,EAAA,oBACEC,cAAA,CAAA,IAAA,EAAA;AAAID,IAAAA,SAAS,EAAED,KAAK,CAAC,eAAe,CAAE;AAAAG,IAAAA,QAAA,eACpCD,cAAA,CAAA,GAAA,EAAA;MAAGD,SAAS,EAAE,CAAA,EAAGD,KAAK,CAAC,uBAAuB,CAAC,CAAA,CAAA,EAAIA,KAAK,CAAC,OAAO,CAAC,CAAA,CAAG;AAAAG,MAAAA,QAAA,eAClEC,eAAA,CAAA,KAAA,EAAA;AAAKH,QAAAA,SAAS,EAAED,KAAK,CAAC,aAAa,CAAE;AAAAG,QAAAA,QAAA,gBACnCD,cAAA,CAAA,MAAA,EAAA;AAAMD,UAAAA,SAAS,EAAEI,SAAI,CAAC,mBAAmB,EAAE,2BAA2B,CAAE;UAAAF,QAAA,eACtED,cAAA,CAACI,YAAU,EAAA;AAACL,YAAAA,SAAS,EAAEI,SAAI,CAACL,KAAK,CAAC,SAAS,CAAC,EAAEA,KAAK,CAAC,gBAAgB,CAAC,CAAE;AAACO,YAAAA,IAAI,EAAE;WAAG;AACnF,SAAM,CACN,eAAAL,cAAA,CAACM,WAAK,EAAA;AACJC,UAAAA,GAAG,EAAEV,SAAU;AACfR,UAAAA,EAAE,EAAEA,EAAG;AACPmB,UAAAA,IAAI,EAAC,WAAW;AAChBC,UAAAA,SAAS,EAAC,QAAQ;AAClBV,UAAAA,SAAS,EAAEI,SAAI,CAACL,KAAK,CAAC,kBAAkB,CAAC,CAAE;AAC3CJ,UAAAA,WAAW,EAAEA,WAAY;AACzBE,UAAAA,KAAK,EAAEA,KAAM;AACbc,UAAAA,UAAU,EAAC,OAAO;AAClB,UAAA,uBAAA,EAAuBnB,eAAgB;AACvCC,UAAAA,QAAQ,EAAEA,QAAS;AACnBC,UAAAA,OAAO,EAAEA;AAAQ,SAAA,CAErB;OAAK;KACJ;AACL,GAAI,CAAC;AAET,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchBox.mjs","sources":["../../../../src/_deprecated/Select/SearchBox/SearchBox.tsx"],"sourcesContent":["import { Search as SearchIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { forwardRef, InputHTMLAttributes } from 'react';\n\nimport { Input } from '../../../Inputs/Input/Input';\n\ntype
|
|
1
|
+
{"version":3,"file":"SearchBox.mjs","sources":["../../../../src/_deprecated/Select/SearchBox/SearchBox.tsx"],"sourcesContent":["import { Search as SearchIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { forwardRef, InputHTMLAttributes } from 'react';\n\nimport { Input } from '../../../Inputs/Input/Input';\n\ntype SearchBoxProps = {\n id?: string;\n classNames?: Record<string, string>;\n focusedOptionId?: string;\n} & Pick<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onClick' | 'placeholder' | 'value'>;\n\nconst SearchBox = forwardRef<HTMLInputElement, SearchBoxProps>(\n (\n {\n id,\n classNames = {},\n focusedOptionId,\n onChange,\n onClick,\n placeholder = undefined,\n value = '',\n },\n reference,\n ) => {\n const style = (className: string) => classNames[className] || className;\n return (\n <li className={style('border-bottom')}>\n <a className={`${style('np-select-filter-link')} ${style('p-a-0')}`}>\n <div className={style('input-group')}>\n <span className={clsx('input-group-addon', 'input-group-addon--search')}>\n <SearchIcon className={clsx(style('tw-icon'), style('tw-icon-search'))} size={24} />\n </span>\n <Input\n ref={reference}\n id={id}\n role=\"searchbox\"\n inputMode=\"search\"\n className={clsx(style('np-select-filter'))}\n placeholder={placeholder}\n value={value}\n spellCheck=\"false\"\n aria-activedescendant={focusedOptionId}\n onChange={onChange}\n onClick={onClick}\n />\n </div>\n </a>\n </li>\n );\n },\n);\n\nexport default SearchBox;\n"],"names":["SearchBox","forwardRef","id","classNames","focusedOptionId","onChange","onClick","placeholder","undefined","value","reference","style","className","_jsx","children","_jsxs","clsx","SearchIcon","size","Input","ref","role","inputMode","spellCheck"],"mappings":";;;;;;AAYA,MAAMA,SAAS,gBAAGC,UAAU,CAC1B,CACE;EACEC,EAAE;EACFC,UAAU,GAAG,EAAE;EACfC,eAAe;EACfC,QAAQ;EACRC,OAAO;AACPC,EAAAA,WAAW,GAAGC,SAAS;AACvBC,EAAAA,KAAK,GAAG;AAAE,CACX,EACDC,SAAS,KACP;EACF,MAAMC,KAAK,GAAIC,SAAiB,IAAKT,UAAU,CAACS,SAAS,CAAC,IAAIA,SAAS;AACvE,EAAA,oBACEC,GAAA,CAAA,IAAA,EAAA;AAAID,IAAAA,SAAS,EAAED,KAAK,CAAC,eAAe,CAAE;AAAAG,IAAAA,QAAA,eACpCD,GAAA,CAAA,GAAA,EAAA;MAAGD,SAAS,EAAE,CAAA,EAAGD,KAAK,CAAC,uBAAuB,CAAC,CAAA,CAAA,EAAIA,KAAK,CAAC,OAAO,CAAC,CAAA,CAAG;AAAAG,MAAAA,QAAA,eAClEC,IAAA,CAAA,KAAA,EAAA;AAAKH,QAAAA,SAAS,EAAED,KAAK,CAAC,aAAa,CAAE;AAAAG,QAAAA,QAAA,gBACnCD,GAAA,CAAA,MAAA,EAAA;AAAMD,UAAAA,SAAS,EAAEI,IAAI,CAAC,mBAAmB,EAAE,2BAA2B,CAAE;UAAAF,QAAA,eACtED,GAAA,CAACI,MAAU,EAAA;AAACL,YAAAA,SAAS,EAAEI,IAAI,CAACL,KAAK,CAAC,SAAS,CAAC,EAAEA,KAAK,CAAC,gBAAgB,CAAC,CAAE;AAACO,YAAAA,IAAI,EAAE;WAAG;AACnF,SAAM,CACN,eAAAL,GAAA,CAACM,KAAK,EAAA;AACJC,UAAAA,GAAG,EAAEV,SAAU;AACfR,UAAAA,EAAE,EAAEA,EAAG;AACPmB,UAAAA,IAAI,EAAC,WAAW;AAChBC,UAAAA,SAAS,EAAC,QAAQ;AAClBV,UAAAA,SAAS,EAAEI,IAAI,CAACL,KAAK,CAAC,kBAAkB,CAAC,CAAE;AAC3CJ,UAAAA,WAAW,EAAEA,WAAY;AACzBE,UAAAA,KAAK,EAAEA,KAAM;AACbc,UAAAA,UAAU,EAAC,OAAO;AAClB,UAAA,uBAAA,EAAuBnB,eAAgB;AACvCC,UAAAA,QAAQ,EAAEA,QAAS;AACnBC,UAAAA,OAAO,EAAEA;AAAQ,SAAA,CAErB;OAAK;KACJ;AACL,GAAI,CAAC;AAET,CAAC;;;;"}
|