@transferwise/components 46.130.0 → 46.130.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/accordion/Accordion.js.map +1 -1
- package/build/accordion/Accordion.mjs.map +1 -1
- package/build/actionButton/ActionButton.js.map +1 -1
- package/build/actionButton/ActionButton.mjs.map +1 -1
- package/build/actionOption/ActionOption.js.map +1 -1
- package/build/actionOption/ActionOption.mjs.map +1 -1
- package/build/alert/Alert.js +1 -1
- package/build/alert/Alert.js.map +1 -1
- package/build/alert/Alert.mjs +1 -1
- package/build/alert/Alert.mjs.map +1 -1
- package/build/avatar/Avatar.js.map +1 -1
- package/build/avatar/Avatar.mjs.map +1 -1
- package/build/avatarLayout/AvatarLayout.js.map +1 -1
- package/build/avatarLayout/AvatarLayout.mjs.map +1 -1
- package/build/badge/Badge.js.map +1 -1
- package/build/badge/Badge.mjs.map +1 -1
- package/build/body/Body.js.map +1 -1
- package/build/body/Body.mjs.map +1 -1
- package/build/button/LegacyButton.js.map +1 -1
- package/build/button/LegacyButton.mjs.map +1 -1
- package/build/card/Card.js.map +1 -1
- package/build/card/Card.mjs.map +1 -1
- package/build/checkboxButton/CheckboxButton.js.map +1 -1
- package/build/checkboxButton/CheckboxButton.mjs.map +1 -1
- package/build/checkboxOption/CheckboxOption.js.map +1 -1
- package/build/checkboxOption/CheckboxOption.mjs.map +1 -1
- package/build/circularButton/CircularButton.js.map +1 -1
- package/build/circularButton/CircularButton.mjs.map +1 -1
- package/build/common/propsValues/type.js +1 -1
- package/build/common/propsValues/type.js.map +1 -1
- package/build/common/propsValues/type.mjs +1 -1
- package/build/common/propsValues/type.mjs.map +1 -1
- package/build/common/propsValues/typography.js +1 -1
- package/build/common/propsValues/typography.js.map +1 -1
- package/build/common/propsValues/typography.mjs +1 -1
- package/build/common/propsValues/typography.mjs.map +1 -1
- package/build/dateInput/DateInput.js.map +1 -1
- package/build/dateInput/DateInput.mjs.map +1 -1
- package/build/dimmer/Dimmer.js.map +1 -1
- package/build/dimmer/Dimmer.mjs.map +1 -1
- package/build/drawer/Drawer.js.map +1 -1
- package/build/drawer/Drawer.mjs.map +1 -1
- package/build/field/Field.js.map +1 -1
- package/build/field/Field.mjs.map +1 -1
- package/build/flowNavigation/FlowNavigation.js.map +1 -1
- package/build/flowNavigation/FlowNavigation.mjs.map +1 -1
- package/build/header/Header.js.map +1 -1
- package/build/header/Header.mjs.map +1 -1
- package/build/iconButton/IconButton.js.map +1 -1
- package/build/iconButton/IconButton.mjs.map +1 -1
- package/build/legacylistItem/LegacyListItem.js.map +1 -1
- package/build/legacylistItem/LegacyListItem.mjs.map +1 -1
- package/build/list/List.js.map +1 -1
- package/build/list/List.mjs.map +1 -1
- package/build/listItem/Button/ListItemButton.js.map +1 -1
- package/build/listItem/Button/ListItemButton.mjs.map +1 -1
- package/build/listItem/IconButton/ListItemIconButton.js.map +1 -1
- package/build/listItem/IconButton/ListItemIconButton.mjs.map +1 -1
- package/build/listItem/Image/ListItemImage.js.map +1 -1
- package/build/listItem/Image/ListItemImage.mjs.map +1 -1
- package/build/listItem/ListItem.js.map +1 -1
- package/build/listItem/ListItem.mjs.map +1 -1
- package/build/loader/Loader.js.map +1 -1
- package/build/loader/Loader.mjs.map +1 -1
- package/build/logo/Logo.js.map +1 -1
- package/build/logo/Logo.mjs.map +1 -1
- package/build/main.css +36 -36
- package/build/modal/Modal.js.map +1 -1
- package/build/modal/Modal.mjs.map +1 -1
- package/build/navigationOption/NavigationOption.js.map +1 -1
- package/build/navigationOption/NavigationOption.mjs.map +1 -1
- package/build/navigationOptionsList/NavigationOptionsList.js.map +1 -1
- package/build/navigationOptionsList/NavigationOptionsList.mjs.map +1 -1
- package/build/nudge/Nudge.js.map +1 -1
- package/build/nudge/Nudge.mjs.map +1 -1
- package/build/phoneNumberInput/PhoneNumberInput.js.map +1 -1
- package/build/phoneNumberInput/PhoneNumberInput.mjs.map +1 -1
- package/build/popover/Popover.js.map +1 -1
- package/build/popover/Popover.mjs.map +1 -1
- package/build/processIndicator/ProcessIndicator.js.map +1 -1
- package/build/processIndicator/ProcessIndicator.mjs.map +1 -1
- package/build/prompt/ActionPrompt/ActionPrompt.js.map +1 -1
- package/build/prompt/ActionPrompt/ActionPrompt.mjs.map +1 -1
- package/build/prompt/InlinePrompt/InlinePrompt.js.map +1 -1
- package/build/prompt/InlinePrompt/InlinePrompt.mjs.map +1 -1
- package/build/radioOption/RadioOption.js.map +1 -1
- package/build/radioOption/RadioOption.mjs.map +1 -1
- package/build/select/Select.js.map +1 -1
- package/build/select/Select.mjs.map +1 -1
- package/build/statusIcon/StatusIcon.js.map +1 -1
- package/build/statusIcon/StatusIcon.mjs.map +1 -1
- package/build/styles/main.css +36 -36
- package/build/styles/sentimentSurface/SentimentSurface.css +36 -36
- package/build/summary/Summary.js +1 -1
- package/build/summary/Summary.js.map +1 -1
- package/build/summary/Summary.mjs +1 -1
- package/build/summary/Summary.mjs.map +1 -1
- package/build/switchOption/SwitchOption.js +1 -1
- package/build/switchOption/SwitchOption.js.map +1 -1
- package/build/switchOption/SwitchOption.mjs +1 -1
- package/build/switchOption/SwitchOption.mjs.map +1 -1
- package/build/tabs/Tabs.js.map +1 -1
- package/build/tabs/Tabs.mjs.map +1 -1
- package/build/typeahead/Typeahead.js.map +1 -1
- package/build/typeahead/Typeahead.mjs.map +1 -1
- package/build/types/accordion/Accordion.d.ts +8 -2
- package/build/types/accordion/Accordion.d.ts.map +1 -1
- package/build/types/actionButton/ActionButton.d.ts +6 -4
- package/build/types/actionButton/ActionButton.d.ts.map +1 -1
- package/build/types/actionOption/ActionOption.d.ts +1 -1
- package/build/types/alert/Alert.d.ts +5 -2
- package/build/types/alert/Alert.d.ts.map +1 -1
- package/build/types/avatar/Avatar.d.ts +4 -0
- package/build/types/avatar/Avatar.d.ts.map +1 -1
- package/build/types/avatarLayout/AvatarLayout.d.ts +5 -1
- package/build/types/avatarLayout/AvatarLayout.d.ts.map +1 -1
- package/build/types/badge/Badge.d.ts +2 -0
- package/build/types/badge/Badge.d.ts.map +1 -1
- package/build/types/body/Body.d.ts +2 -6
- package/build/types/body/Body.d.ts.map +1 -1
- package/build/types/button/Button.types.d.ts +4 -1
- package/build/types/button/Button.types.d.ts.map +1 -1
- package/build/types/button/LegacyButton.d.ts +4 -4
- package/build/types/card/Card.d.ts +1 -0
- package/build/types/card/Card.d.ts.map +1 -1
- package/build/types/checkboxButton/CheckboxButton.d.ts +2 -0
- package/build/types/checkboxButton/CheckboxButton.d.ts.map +1 -1
- package/build/types/checkboxOption/CheckboxOption.d.ts +1 -1
- package/build/types/circularButton/CircularButton.d.ts +1 -1
- package/build/types/circularButton/CircularButton.d.ts.map +1 -1
- package/build/types/common/propsValues/type.d.ts +1 -1
- package/build/types/common/propsValues/typography.d.ts +2 -2
- package/build/types/dateInput/DateInput.d.ts +5 -0
- package/build/types/dateInput/DateInput.d.ts.map +1 -1
- package/build/types/dimmer/Dimmer.d.ts +6 -0
- package/build/types/dimmer/Dimmer.d.ts.map +1 -1
- package/build/types/drawer/Drawer.d.ts +8 -2
- package/build/types/drawer/Drawer.d.ts.map +1 -1
- package/build/types/field/Field.d.ts +5 -2
- package/build/types/field/Field.d.ts.map +1 -1
- package/build/types/flowNavigation/FlowNavigation.d.ts +3 -0
- package/build/types/flowNavigation/FlowNavigation.d.ts.map +1 -1
- package/build/types/header/Header.d.ts +5 -1
- package/build/types/header/Header.d.ts.map +1 -1
- package/build/types/iconButton/IconButton.d.ts +6 -0
- package/build/types/iconButton/IconButton.d.ts.map +1 -1
- package/build/types/legacylistItem/LegacyListItem.d.ts +1 -1
- package/build/types/list/List.d.ts +1 -0
- package/build/types/list/List.d.ts.map +1 -1
- package/build/types/listItem/Button/ListItemButton.d.ts +4 -0
- package/build/types/listItem/Button/ListItemButton.d.ts.map +1 -1
- package/build/types/listItem/IconButton/ListItemIconButton.d.ts +3 -1
- package/build/types/listItem/IconButton/ListItemIconButton.d.ts.map +1 -1
- package/build/types/listItem/Image/ListItemImage.d.ts +2 -0
- package/build/types/listItem/Image/ListItemImage.d.ts.map +1 -1
- package/build/types/listItem/ListItem.d.ts +3 -0
- package/build/types/listItem/ListItem.d.ts.map +1 -1
- package/build/types/loader/Loader.d.ts +5 -1
- package/build/types/loader/Loader.d.ts.map +1 -1
- package/build/types/logo/Logo.d.ts +4 -1
- package/build/types/logo/Logo.d.ts.map +1 -1
- package/build/types/modal/Modal.d.ts +6 -0
- package/build/types/modal/Modal.d.ts.map +1 -1
- package/build/types/navigationOption/NavigationOption.d.ts +1 -1
- package/build/types/navigationOptionsList/NavigationOptionsList.d.ts +1 -1
- package/build/types/nudge/Nudge.d.ts +1 -1
- package/build/types/nudge/Nudge.d.ts.map +1 -1
- package/build/types/phoneNumberInput/PhoneNumberInput.d.ts +7 -1
- package/build/types/phoneNumberInput/PhoneNumberInput.d.ts.map +1 -1
- package/build/types/popover/Popover.d.ts +1 -0
- package/build/types/popover/Popover.d.ts.map +1 -1
- package/build/types/processIndicator/ProcessIndicator.d.ts +2 -0
- package/build/types/processIndicator/ProcessIndicator.d.ts.map +1 -1
- package/build/types/prompt/ActionPrompt/ActionPrompt.d.ts +8 -1
- package/build/types/prompt/ActionPrompt/ActionPrompt.d.ts.map +1 -1
- package/build/types/prompt/InlinePrompt/InlinePrompt.d.ts +1 -0
- package/build/types/prompt/InlinePrompt/InlinePrompt.d.ts.map +1 -1
- package/build/types/radioOption/RadioOption.d.ts +1 -1
- package/build/types/select/Select.d.ts +4 -0
- package/build/types/select/Select.d.ts.map +1 -1
- package/build/types/statusIcon/StatusIcon.d.ts +3 -1
- package/build/types/statusIcon/StatusIcon.d.ts.map +1 -1
- package/build/types/summary/Summary.d.ts +7 -4
- package/build/types/summary/Summary.d.ts.map +1 -1
- package/build/types/switchOption/SwitchOption.d.ts +1 -1
- package/build/types/tabs/Tabs.d.ts +2 -0
- package/build/types/tabs/Tabs.d.ts.map +1 -1
- package/build/types/typeahead/Typeahead.d.ts +14 -1
- package/build/types/typeahead/Typeahead.d.ts.map +1 -1
- package/build/types/upload/Upload.d.ts +6 -0
- package/build/types/upload/Upload.d.ts.map +1 -1
- package/build/types/uploadInput/UploadInput.d.ts +10 -1
- package/build/types/uploadInput/UploadInput.d.ts.map +1 -1
- package/build/types/withDisplayFormat/WithDisplayFormat.d.ts +3 -0
- package/build/types/withDisplayFormat/WithDisplayFormat.d.ts.map +1 -1
- package/build/upload/Upload.js.map +1 -1
- package/build/upload/Upload.mjs.map +1 -1
- package/build/uploadInput/UploadInput.js.map +1 -1
- package/build/uploadInput/UploadInput.mjs.map +1 -1
- package/build/withDisplayFormat/WithDisplayFormat.js.map +1 -1
- package/build/withDisplayFormat/WithDisplayFormat.mjs.map +1 -1
- package/package.json +1 -1
- package/src/accordion/Accordion.tsx +8 -2
- package/src/actionButton/ActionButton.tsx +4 -3
- package/src/actionOption/ActionOption.tsx +1 -1
- package/src/alert/Alert.tsx +5 -2
- package/src/avatar/Avatar.tsx +4 -0
- package/src/avatarLayout/AvatarLayout.tsx +5 -1
- package/src/badge/Badge.tsx +2 -0
- package/src/body/Body.tsx +2 -6
- package/src/button/Button.types.ts +4 -1
- package/src/button/LegacyButton.tsx +4 -4
- package/src/card/Card.tsx +1 -0
- package/src/checkboxButton/CheckboxButton.tsx +1 -0
- package/src/checkboxOption/CheckboxOption.tsx +1 -1
- package/src/circularButton/CircularButton.tsx +1 -2
- package/src/common/propsValues/type.ts +1 -1
- package/src/common/propsValues/typography.ts +2 -2
- package/src/dateInput/DateInput.tsx +5 -0
- package/src/dimmer/Dimmer.tsx +6 -0
- package/src/drawer/Drawer.tsx +8 -2
- package/src/field/Field.tsx +5 -2
- package/src/flowNavigation/FlowNavigation.tsx +3 -0
- package/src/header/Header.tsx +5 -1
- package/src/iconButton/IconButton.tsx +3 -0
- package/src/legacylistItem/LegacyListItem.tsx +1 -1
- package/src/list/List.tsx +1 -0
- package/src/listItem/Button/ListItemButton.tsx +2 -0
- package/src/listItem/IconButton/ListItemIconButton.tsx +3 -1
- package/src/listItem/Image/ListItemImage.tsx +2 -0
- package/src/listItem/ListItem.tsx +2 -0
- package/src/loader/Loader.tsx +6 -2
- package/src/logo/Logo.tsx +4 -1
- package/src/main.css +36 -36
- package/src/modal/Modal.tsx +6 -0
- package/src/navigationOption/NavigationOption.tsx +1 -1
- package/src/navigationOptionsList/NavigationOptionsList.tsx +1 -1
- package/src/nudge/Nudge.tsx +1 -1
- package/src/phoneNumberInput/PhoneNumberInput.tsx +7 -1
- package/src/popover/Popover.tsx +1 -0
- package/src/processIndicator/ProcessIndicator.tsx +2 -0
- package/src/prompt/ActionPrompt/ActionPrompt.tsx +8 -1
- package/src/prompt/InlinePrompt/InlinePrompt.tsx +1 -0
- package/src/radioOption/RadioOption.tsx +1 -1
- package/src/select/Select.tsx +4 -0
- package/src/sentimentSurface/SentimentSurface.css +36 -36
- package/src/sentimentSurface/SentimentSurface.less +12 -12
- package/src/statusIcon/StatusIcon.tsx +3 -1
- package/src/summary/Summary.tsx +7 -4
- package/src/switchOption/SwitchOption.tsx +1 -1
- package/src/tabs/Tabs.tsx +2 -0
- package/src/typeahead/Typeahead.tsx +14 -2
- package/src/upload/Upload.tsx +6 -0
- package/src/uploadInput/UploadInput.tsx +12 -4
- package/src/withDisplayFormat/WithDisplayFormat.tsx +3 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Loader.mjs","sources":["../../src/loader/Loader.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useEffect, useState } from 'react';\n\nimport { Size, SizeExtraSmall, SizeSmall, SizeMedium, SizeLarge, SizeExtraLarge } from '../common';\n\n// TODO: We gracefully
|
|
1
|
+
{"version":3,"file":"Loader.mjs","sources":["../../src/loader/Loader.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useEffect, useState } from 'react';\n\nimport { Size, SizeExtraSmall, SizeSmall, SizeMedium, SizeLarge, SizeExtraLarge } from '../common';\n\n// TODO: We gracefully deprecated xs, lg and xl -- remove these as part of a future breaking change to this component\ntype DeprecatedSize = SizeExtraSmall | SizeLarge | SizeExtraLarge;\n\ntype SizeType = SizeSmall | SizeMedium;\n\nexport type LoaderProps = {\n /**\n * @deprecated Use `size` instead.\n * @default false\n */\n small?: boolean;\n /** @default 'md' */\n size?: SizeType | DeprecatedSize;\n /** @default false */\n displayInstantly?: boolean;\n // TODO: refactor in favor of prop from `CommonProps` type\n /** @default {} */\n classNames?: Record<string, string>;\n 'data-testid'?: string;\n};\n\n/**\n * Loader component\n *\n * Docs link: https://transferwise.github.io/neptune-web/components/progress/Loader\n *\n * @param root0\n * @param root0.small\n * @param root0.size\n * @param root0.classNames\n */\nconst Loader = ({\n small = false,\n size = Size.MEDIUM,\n displayInstantly = false,\n classNames = {},\n ...restProps\n}: LoaderProps) => {\n const { theme } = useTheme();\n const [hasDebounced, setHasDebounced] = useState(displayInstantly);\n\n useEffect(() => {\n let cancelled: boolean;\n let timeout: ReturnType<typeof setTimeout> | undefined;\n\n if (!displayInstantly) {\n timeout = setTimeout(() => {\n if (!cancelled) {\n setHasDebounced(true);\n }\n }, 1000);\n }\n\n return () => {\n cancelled = true;\n\n clearTimeout(timeout);\n };\n }, []);\n\n const style = (className: string): string => classNames[className] || className;\n const legacySize: SizeType | DeprecatedSize = small ? Size.SMALL : size;\n const supportedSize = getSupportedSize(legacySize);\n\n if (theme === 'forest-green') {\n // eslint-disable-next-line no-console\n console.warn(\n 'Loader is forbidden to use with Forest Green theme. Check the https://wise.design/components/screen-loader for more info.',\n );\n return <></>;\n }\n\n return (\n <div\n className={clsx(style('tw-loader'), style(`tw-loader--${supportedSize}`), {\n 'tw-loader--visible': hasDebounced,\n })}\n data-testid={restProps['data-testid']}\n />\n );\n};\n\nconst getSupportedSize = (size: SizeType | DeprecatedSize): SizeType => {\n switch (size) {\n case Size.SMALL:\n case Size.EXTRA_SMALL:\n return Size.SMALL;\n\n case Size.EXTRA_LARGE:\n case Size.LARGE:\n case Size.MEDIUM:\n default:\n return Size.MEDIUM;\n }\n};\n\nexport default Loader;\n"],"names":["Loader","small","size","Size","MEDIUM","displayInstantly","classNames","restProps","theme","useTheme","hasDebounced","setHasDebounced","useState","useEffect","cancelled","timeout","setTimeout","clearTimeout","style","className","legacySize","SMALL","supportedSize","getSupportedSize","console","warn","_jsx","_Fragment","clsx","EXTRA_SMALL","EXTRA_LARGE","LARGE"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCA,MAAMA,MAAM,GAAGA,CAAC;AACdC,EAAAA,KAAK,GAAG,KAAK;EACbC,IAAI,GAAGC,IAAI,CAACC,MAAM;AAClBC,EAAAA,gBAAgB,GAAG,KAAK;EACxBC,UAAU,GAAG,EAAE;EACf,GAAGC;AAAS,CACA,KAAI;EAChB,MAAM;AAAEC,IAAAA;GAAO,GAAGC,QAAQ,EAAE;EAC5B,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAGC,QAAQ,CAACP,gBAAgB,CAAC;AAElEQ,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAIC,SAAkB;AACtB,IAAA,IAAIC,OAAkD;IAEtD,IAAI,CAACV,gBAAgB,EAAE;MACrBU,OAAO,GAAGC,UAAU,CAAC,MAAK;QACxB,IAAI,CAACF,SAAS,EAAE;UACdH,eAAe,CAAC,IAAI,CAAC;AACvB,QAAA;MACF,CAAC,EAAE,IAAI,CAAC;AACV,IAAA;AAEA,IAAA,OAAO,MAAK;AACVG,MAAAA,SAAS,GAAG,IAAI;MAEhBG,YAAY,CAACF,OAAO,CAAC;IACvB,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMG,KAAK,GAAIC,SAAiB,IAAab,UAAU,CAACa,SAAS,CAAC,IAAIA,SAAS;EAC/E,MAAMC,UAAU,GAA8BnB,KAAK,GAAGE,IAAI,CAACkB,KAAK,GAAGnB,IAAI;AACvE,EAAA,MAAMoB,aAAa,GAAGC,gBAAgB,CAACH,UAAU,CAAC;EAElD,IAAIZ,KAAK,KAAK,cAAc,EAAE;AAC5B;AACAgB,IAAAA,OAAO,CAACC,IAAI,CACV,2HAA2H,CAC5H;AACD,IAAA,oBAAOC,GAAA,CAAAC,QAAA,EAAA,GAAK;AACd,EAAA;AAEA,EAAA,oBACED,GAAA,CAAA,KAAA,EAAA;AACEP,IAAAA,SAAS,EAAES,IAAI,CAACV,KAAK,CAAC,WAAW,CAAC,EAAEA,KAAK,CAAC,CAAA,WAAA,EAAcI,aAAa,CAAA,CAAE,CAAC,EAAE;AACxE,MAAA,oBAAoB,EAAEZ;AACvB,KAAA,CAAE;IACH,aAAA,EAAaH,SAAS,CAAC,aAAa;AAAE,GAAA,CACtC;AAEN;AAEA,MAAMgB,gBAAgB,GAAIrB,IAA+B,IAAc;AACrE,EAAA,QAAQA,IAAI;IACV,KAAKC,IAAI,CAACkB,KAAK;IACf,KAAKlB,IAAI,CAAC0B,WAAW;MACnB,OAAO1B,IAAI,CAACkB,KAAK;IAEnB,KAAKlB,IAAI,CAAC2B,WAAW;IACrB,KAAK3B,IAAI,CAAC4B,KAAK;IACf,KAAK5B,IAAI,CAACC,MAAM;AAChB,IAAA;MACE,OAAOD,IAAI,CAACC,MAAM;AACtB;AACF,CAAC;;;;"}
|
package/build/logo/Logo.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Logo.js","sources":["../../src/logo/Logo.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport {\n LogoWise,\n LogoWiseInverse,\n LogoWisePlatform,\n LogoWisePlatformInverse,\n LogoFlag,\n LogoFlagInverse,\n LogoFlagPlatform,\n LogoFlagPlatformInverse,\n} from './logo-assets';\n\nconst svgPaths = {\n WISE: LogoWise,\n WISE_BUSINESS: LogoWise,\n WISE_INVERSE: LogoWiseInverse,\n WISE_BUSINESS_INVERSE: LogoWiseInverse,\n WISE_PLATFORM: LogoWisePlatform,\n WISE_PLATFORM_INVERSE: LogoWisePlatformInverse,\n WISE_FLAG: LogoFlag,\n WISE_FLAG_INVERSE: LogoFlagInverse,\n WISE_FLAG_PLATFORM: LogoFlagPlatform,\n WISE_FLAG_PLATFORM_INVERSE: LogoFlagPlatformInverse,\n};\n\nexport enum LogoType {\n WISE = 'WISE',\n WISE_BUSINESS = 'WISE_BUSINESS',\n WISE_PLATFORM = 'WISE_PLATFORM',\n}\n\nexport interface LogoProps {\n /** Extra classes applied to Logo */\n className?: string;\n /** If true, will use dark colours for dark on light theme */\n inverse?: boolean;\n
|
|
1
|
+
{"version":3,"file":"Logo.js","sources":["../../src/logo/Logo.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport {\n LogoWise,\n LogoWiseInverse,\n LogoWisePlatform,\n LogoWisePlatformInverse,\n LogoFlag,\n LogoFlagInverse,\n LogoFlagPlatform,\n LogoFlagPlatformInverse,\n} from './logo-assets';\n\nconst svgPaths = {\n WISE: LogoWise,\n WISE_BUSINESS: LogoWise,\n WISE_INVERSE: LogoWiseInverse,\n WISE_BUSINESS_INVERSE: LogoWiseInverse,\n WISE_PLATFORM: LogoWisePlatform,\n WISE_PLATFORM_INVERSE: LogoWisePlatformInverse,\n WISE_FLAG: LogoFlag,\n WISE_FLAG_INVERSE: LogoFlagInverse,\n WISE_FLAG_PLATFORM: LogoFlagPlatform,\n WISE_FLAG_PLATFORM_INVERSE: LogoFlagPlatformInverse,\n};\n\nexport enum LogoType {\n WISE = 'WISE',\n WISE_BUSINESS = 'WISE_BUSINESS',\n WISE_PLATFORM = 'WISE_PLATFORM',\n}\n\nexport interface LogoProps {\n /** Extra classes applied to Logo */\n className?: string;\n /** If true, will use dark colours for dark on light theme */\n inverse?: boolean;\n /**\n * What type of logo to display\n * @default 'WISE'\n */\n type?: `${LogoType}`;\n}\n\nconst labelByType = {\n WISE: 'Wise',\n WISE_BUSINESS: 'Wise Business',\n WISE_PLATFORM: 'Wise Platform',\n} satisfies Record<`${LogoType}`, string>;\n\nexport default function Logo({ className, inverse, type = 'WISE' }: LogoProps) {\n const LogoSm =\n svgPaths[`WISE_FLAG${type === 'WISE_PLATFORM' ? '_PLATFORM' : ''}${inverse ? '_INVERSE' : ''}`];\n const LogoMd = svgPaths[`${type}${inverse ? '_INVERSE' : ''}`];\n\n return (\n <span aria-label={labelByType[type]} role=\"img\" className={clsx(className, 'np-logo')}>\n <LogoSm className=\"np-logo-svg np-logo-svg--size-sm\" />\n <LogoMd className=\"np-logo-svg np-logo-svg--size-md\" />\n </span>\n );\n}\n"],"names":["svgPaths","WISE","LogoWise","WISE_BUSINESS","WISE_INVERSE","LogoWiseInverse","WISE_BUSINESS_INVERSE","WISE_PLATFORM","LogoWisePlatform","WISE_PLATFORM_INVERSE","LogoWisePlatformInverse","WISE_FLAG","LogoFlag","WISE_FLAG_INVERSE","LogoFlagInverse","WISE_FLAG_PLATFORM","LogoFlagPlatform","WISE_FLAG_PLATFORM_INVERSE","LogoFlagPlatformInverse","LogoType","labelByType","Logo","className","inverse","type","LogoSm","LogoMd","_jsxs","role","clsx","children","_jsx"],"mappings":";;;;;;;;AAaA,MAAMA,QAAQ,GAAG;AACfC,EAAAA,IAAI,EAAEC,mBAAQ;AACdC,EAAAA,aAAa,EAAED,mBAAQ;AACvBE,EAAAA,YAAY,EAAEC,0BAAe;AAC7BC,EAAAA,qBAAqB,EAAED,0BAAe;AACtCE,EAAAA,aAAa,EAAEC,2BAAgB;AAC/BC,EAAAA,qBAAqB,EAAEC,kCAAuB;AAC9CC,EAAAA,SAAS,EAAEC,mBAAQ;AACnBC,EAAAA,iBAAiB,EAAEC,0BAAe;AAClCC,EAAAA,kBAAkB,EAAEC,2BAAgB;AACpCC,EAAAA,0BAA0B,EAAEC;CAC7B;AAEWC;AAAZ,CAAA,UAAYA,QAAQ,EAAA;AAClBA,EAAAA,QAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACbA,EAAAA,QAAA,CAAA,eAAA,CAAA,GAAA,eAA+B;AAC/BA,EAAAA,QAAA,CAAA,eAAA,CAAA,GAAA,eAA+B;AACjC,CAAC,EAJWA,gBAAQ,KAARA,gBAAQ,GAAA,EAAA,CAAA,CAAA;AAkBpB,MAAMC,WAAW,GAAG;AAClBnB,EAAAA,IAAI,EAAE,MAAM;AACZE,EAAAA,aAAa,EAAE,eAAe;AAC9BI,EAAAA,aAAa,EAAE;CACwB;AAE3B,SAAUc,IAAIA,CAAC;EAAEC,SAAS;EAAEC,OAAO;AAAEC,EAAAA,IAAI,GAAG;AAAM,CAAa,EAAA;AAC3E,EAAA,MAAMC,MAAM,GACVzB,QAAQ,CAAC,CAAA,SAAA,EAAYwB,IAAI,KAAK,eAAe,GAAG,WAAW,GAAG,EAAE,GAAGD,OAAO,GAAG,UAAU,GAAG,EAAE,EAAE,CAAC;AACjG,EAAA,MAAMG,MAAM,GAAG1B,QAAQ,CAAC,CAAA,EAAGwB,IAAI,CAAA,EAAGD,OAAO,GAAG,UAAU,GAAG,EAAE,EAAE,CAAC;AAE9D,EAAA,oBACEI,eAAA,CAAA,MAAA,EAAA;IAAM,YAAA,EAAYP,WAAW,CAACI,IAAI,CAAE;AAACI,IAAAA,IAAI,EAAC,KAAK;AAACN,IAAAA,SAAS,EAAEO,SAAI,CAACP,SAAS,EAAE,SAAS,CAAE;IAAAQ,QAAA,EAAA,cACpFC,cAAA,CAACN,MAAM,EAAA;AAACH,MAAAA,SAAS,EAAC;AAAkC,KAAA,CACpD,eAAAS,cAAA,CAACL,MAAM,EAAA;AAACJ,MAAAA,SAAS,EAAC;AAAkC,KAAA,CACtD;AAAA,GAAM,CAAC;AAEX;;;;"}
|
package/build/logo/Logo.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Logo.mjs","sources":["../../src/logo/Logo.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport {\n LogoWise,\n LogoWiseInverse,\n LogoWisePlatform,\n LogoWisePlatformInverse,\n LogoFlag,\n LogoFlagInverse,\n LogoFlagPlatform,\n LogoFlagPlatformInverse,\n} from './logo-assets';\n\nconst svgPaths = {\n WISE: LogoWise,\n WISE_BUSINESS: LogoWise,\n WISE_INVERSE: LogoWiseInverse,\n WISE_BUSINESS_INVERSE: LogoWiseInverse,\n WISE_PLATFORM: LogoWisePlatform,\n WISE_PLATFORM_INVERSE: LogoWisePlatformInverse,\n WISE_FLAG: LogoFlag,\n WISE_FLAG_INVERSE: LogoFlagInverse,\n WISE_FLAG_PLATFORM: LogoFlagPlatform,\n WISE_FLAG_PLATFORM_INVERSE: LogoFlagPlatformInverse,\n};\n\nexport enum LogoType {\n WISE = 'WISE',\n WISE_BUSINESS = 'WISE_BUSINESS',\n WISE_PLATFORM = 'WISE_PLATFORM',\n}\n\nexport interface LogoProps {\n /** Extra classes applied to Logo */\n className?: string;\n /** If true, will use dark colours for dark on light theme */\n inverse?: boolean;\n
|
|
1
|
+
{"version":3,"file":"Logo.mjs","sources":["../../src/logo/Logo.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport {\n LogoWise,\n LogoWiseInverse,\n LogoWisePlatform,\n LogoWisePlatformInverse,\n LogoFlag,\n LogoFlagInverse,\n LogoFlagPlatform,\n LogoFlagPlatformInverse,\n} from './logo-assets';\n\nconst svgPaths = {\n WISE: LogoWise,\n WISE_BUSINESS: LogoWise,\n WISE_INVERSE: LogoWiseInverse,\n WISE_BUSINESS_INVERSE: LogoWiseInverse,\n WISE_PLATFORM: LogoWisePlatform,\n WISE_PLATFORM_INVERSE: LogoWisePlatformInverse,\n WISE_FLAG: LogoFlag,\n WISE_FLAG_INVERSE: LogoFlagInverse,\n WISE_FLAG_PLATFORM: LogoFlagPlatform,\n WISE_FLAG_PLATFORM_INVERSE: LogoFlagPlatformInverse,\n};\n\nexport enum LogoType {\n WISE = 'WISE',\n WISE_BUSINESS = 'WISE_BUSINESS',\n WISE_PLATFORM = 'WISE_PLATFORM',\n}\n\nexport interface LogoProps {\n /** Extra classes applied to Logo */\n className?: string;\n /** If true, will use dark colours for dark on light theme */\n inverse?: boolean;\n /**\n * What type of logo to display\n * @default 'WISE'\n */\n type?: `${LogoType}`;\n}\n\nconst labelByType = {\n WISE: 'Wise',\n WISE_BUSINESS: 'Wise Business',\n WISE_PLATFORM: 'Wise Platform',\n} satisfies Record<`${LogoType}`, string>;\n\nexport default function Logo({ className, inverse, type = 'WISE' }: LogoProps) {\n const LogoSm =\n svgPaths[`WISE_FLAG${type === 'WISE_PLATFORM' ? '_PLATFORM' : ''}${inverse ? '_INVERSE' : ''}`];\n const LogoMd = svgPaths[`${type}${inverse ? '_INVERSE' : ''}`];\n\n return (\n <span aria-label={labelByType[type]} role=\"img\" className={clsx(className, 'np-logo')}>\n <LogoSm className=\"np-logo-svg np-logo-svg--size-sm\" />\n <LogoMd className=\"np-logo-svg np-logo-svg--size-md\" />\n </span>\n );\n}\n"],"names":["svgPaths","WISE","LogoWise","WISE_BUSINESS","WISE_INVERSE","LogoWiseInverse","WISE_BUSINESS_INVERSE","WISE_PLATFORM","LogoWisePlatform","WISE_PLATFORM_INVERSE","LogoWisePlatformInverse","WISE_FLAG","LogoFlag","WISE_FLAG_INVERSE","LogoFlagInverse","WISE_FLAG_PLATFORM","LogoFlagPlatform","WISE_FLAG_PLATFORM_INVERSE","LogoFlagPlatformInverse","LogoType","labelByType","Logo","className","inverse","type","LogoSm","LogoMd","_jsxs","role","clsx","children","_jsx"],"mappings":";;;;AAaA,MAAMA,QAAQ,GAAG;AACfC,EAAAA,IAAI,EAAEC,QAAQ;AACdC,EAAAA,aAAa,EAAED,QAAQ;AACvBE,EAAAA,YAAY,EAAEC,eAAe;AAC7BC,EAAAA,qBAAqB,EAAED,eAAe;AACtCE,EAAAA,aAAa,EAAEC,gBAAgB;AAC/BC,EAAAA,qBAAqB,EAAEC,uBAAuB;AAC9CC,EAAAA,SAAS,EAAEC,QAAQ;AACnBC,EAAAA,iBAAiB,EAAEC,eAAe;AAClCC,EAAAA,kBAAkB,EAAEC,gBAAgB;AACpCC,EAAAA,0BAA0B,EAAEC;CAC7B;IAEWC;AAAZ,CAAA,UAAYA,QAAQ,EAAA;AAClBA,EAAAA,QAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACbA,EAAAA,QAAA,CAAA,eAAA,CAAA,GAAA,eAA+B;AAC/BA,EAAAA,QAAA,CAAA,eAAA,CAAA,GAAA,eAA+B;AACjC,CAAC,EAJWA,QAAQ,KAARA,QAAQ,GAAA,EAAA,CAAA,CAAA;AAkBpB,MAAMC,WAAW,GAAG;AAClBnB,EAAAA,IAAI,EAAE,MAAM;AACZE,EAAAA,aAAa,EAAE,eAAe;AAC9BI,EAAAA,aAAa,EAAE;CACwB;AAE3B,SAAUc,IAAIA,CAAC;EAAEC,SAAS;EAAEC,OAAO;AAAEC,EAAAA,IAAI,GAAG;AAAM,CAAa,EAAA;AAC3E,EAAA,MAAMC,MAAM,GACVzB,QAAQ,CAAC,CAAA,SAAA,EAAYwB,IAAI,KAAK,eAAe,GAAG,WAAW,GAAG,EAAE,GAAGD,OAAO,GAAG,UAAU,GAAG,EAAE,EAAE,CAAC;AACjG,EAAA,MAAMG,MAAM,GAAG1B,QAAQ,CAAC,CAAA,EAAGwB,IAAI,CAAA,EAAGD,OAAO,GAAG,UAAU,GAAG,EAAE,EAAE,CAAC;AAE9D,EAAA,oBACEI,IAAA,CAAA,MAAA,EAAA;IAAM,YAAA,EAAYP,WAAW,CAACI,IAAI,CAAE;AAACI,IAAAA,IAAI,EAAC,KAAK;AAACN,IAAAA,SAAS,EAAEO,IAAI,CAACP,SAAS,EAAE,SAAS,CAAE;IAAAQ,QAAA,EAAA,cACpFC,GAAA,CAACN,MAAM,EAAA;AAACH,MAAAA,SAAS,EAAC;AAAkC,KAAA,CACpD,eAAAS,GAAA,CAACL,MAAM,EAAA;AAACJ,MAAAA,SAAS,EAAC;AAAkC,KAAA,CACtD;AAAA,GAAM,CAAC;AAEX;;;;"}
|
package/build/main.css
CHANGED
|
@@ -226,12 +226,12 @@
|
|
|
226
226
|
.np-theme-platform.wds-sentiment-surface-success-elevated,
|
|
227
227
|
.np-theme-personal--bright-green.wds-sentiment-surface-success-elevated,
|
|
228
228
|
.np-theme-business--bright-green.wds-sentiment-surface-success-elevated {
|
|
229
|
-
--color-sentiment-content-primary: #
|
|
230
|
-
--color-sentiment-content-primary-hover: #
|
|
231
|
-
--color-sentiment-content-primary-active: #
|
|
232
|
-
--color-sentiment-interactive-primary: #
|
|
233
|
-
--color-sentiment-interactive-primary-hover: #
|
|
234
|
-
--color-sentiment-interactive-primary-active: #
|
|
229
|
+
--color-sentiment-content-primary: #CEF1B8;
|
|
230
|
+
--color-sentiment-content-primary-hover: #E0FFCC;
|
|
231
|
+
--color-sentiment-content-primary-active: #E1F4D4;
|
|
232
|
+
--color-sentiment-interactive-primary: #CEF1B8;
|
|
233
|
+
--color-sentiment-interactive-primary-hover: #E0FFCC;
|
|
234
|
+
--color-sentiment-interactive-primary-active: #E1F4D4;
|
|
235
235
|
--color-sentiment-interactive-secondary: #054D28;
|
|
236
236
|
--color-sentiment-interactive-secondary-hover: #043A1E;
|
|
237
237
|
--color-sentiment-interactive-secondary-active: #022614;
|
|
@@ -250,24 +250,24 @@
|
|
|
250
250
|
.np-theme-personal--forest-green.wds-sentiment-surface-success-base,
|
|
251
251
|
.np-theme-business--forest-green.wds-sentiment-surface-success-base,
|
|
252
252
|
.np-theme-platform--forest-green.wds-sentiment-surface-success-base {
|
|
253
|
-
--color-sentiment-content-primary: #
|
|
254
|
-
--color-sentiment-content-primary-hover: #
|
|
255
|
-
--color-sentiment-content-primary-active: #
|
|
256
|
-
--color-sentiment-interactive-primary: #
|
|
257
|
-
--color-sentiment-interactive-primary-hover: #
|
|
258
|
-
--color-sentiment-interactive-primary-active: #
|
|
259
|
-
--color-sentiment-interactive-secondary: #
|
|
260
|
-
--color-sentiment-interactive-secondary-hover: #
|
|
261
|
-
--color-sentiment-interactive-secondary-active: #
|
|
262
|
-
--color-sentiment-interactive-secondary-neutral: #
|
|
263
|
-
--color-sentiment-interactive-secondary-neutral-hover: #
|
|
264
|
-
--color-sentiment-interactive-secondary-neutral-active: #
|
|
265
|
-
--color-sentiment-interactive-control: #
|
|
266
|
-
--color-sentiment-interactive-control-hover: #
|
|
267
|
-
--color-sentiment-interactive-control-active: #
|
|
268
|
-
--color-sentiment-background-surface: #
|
|
269
|
-
--color-sentiment-background-surface-hover: #
|
|
270
|
-
--color-sentiment-background-surface-active: #
|
|
253
|
+
--color-sentiment-content-primary: #CEF1B8;
|
|
254
|
+
--color-sentiment-content-primary-hover: #E0FFCC;
|
|
255
|
+
--color-sentiment-content-primary-active: #E1F4D4;
|
|
256
|
+
--color-sentiment-interactive-primary: #CEF1B8;
|
|
257
|
+
--color-sentiment-interactive-primary-hover: #E0FFCC;
|
|
258
|
+
--color-sentiment-interactive-primary-active: #E1F4D4;
|
|
259
|
+
--color-sentiment-interactive-secondary: #054D28;
|
|
260
|
+
--color-sentiment-interactive-secondary-hover: #043A1E;
|
|
261
|
+
--color-sentiment-interactive-secondary-active: #022614;
|
|
262
|
+
--color-sentiment-interactive-secondary-neutral: #256A43;
|
|
263
|
+
--color-sentiment-interactive-secondary-neutral-hover: #2A794C;
|
|
264
|
+
--color-sentiment-interactive-secondary-neutral-active: #329057;
|
|
265
|
+
--color-sentiment-interactive-control: #054D28;
|
|
266
|
+
--color-sentiment-interactive-control-hover: #043A1E;
|
|
267
|
+
--color-sentiment-interactive-control-active: #022614;
|
|
268
|
+
--color-sentiment-background-surface: #054D28;
|
|
269
|
+
--color-sentiment-background-surface-hover: #043A1E;
|
|
270
|
+
--color-sentiment-background-surface-active: #022614;
|
|
271
271
|
}
|
|
272
272
|
.np-theme-personal--dark.wds-sentiment-surface-success-elevated,
|
|
273
273
|
.np-theme-business--dark.wds-sentiment-surface-success-elevated,
|
|
@@ -448,18 +448,18 @@
|
|
|
448
448
|
--color-sentiment-interactive-primary: #E0F7F7;
|
|
449
449
|
--color-sentiment-interactive-primary-hover: #CAF1F1;
|
|
450
450
|
--color-sentiment-interactive-primary-active: #B6ECEC;
|
|
451
|
-
--color-sentiment-interactive-secondary: #
|
|
452
|
-
--color-sentiment-interactive-secondary-hover: #
|
|
453
|
-
--color-sentiment-interactive-secondary-active: #
|
|
454
|
-
--color-sentiment-interactive-secondary-neutral: #
|
|
455
|
-
--color-sentiment-interactive-secondary-neutral-hover: #
|
|
456
|
-
--color-sentiment-interactive-secondary-neutral-active: #
|
|
457
|
-
--color-sentiment-interactive-control: #
|
|
458
|
-
--color-sentiment-interactive-control-hover: #
|
|
459
|
-
--color-sentiment-interactive-control-active: #
|
|
460
|
-
--color-sentiment-background-surface: #
|
|
461
|
-
--color-sentiment-background-surface-hover: #
|
|
462
|
-
--color-sentiment-background-surface-active: #
|
|
451
|
+
--color-sentiment-interactive-secondary: #054D4D;
|
|
452
|
+
--color-sentiment-interactive-secondary-hover: #043A3A;
|
|
453
|
+
--color-sentiment-interactive-secondary-active: #022626;
|
|
454
|
+
--color-sentiment-interactive-secondary-neutral: #1F6161;
|
|
455
|
+
--color-sentiment-interactive-secondary-neutral-hover: #247070;
|
|
456
|
+
--color-sentiment-interactive-secondary-neutral-active: #298080;
|
|
457
|
+
--color-sentiment-interactive-control: #054D4D;
|
|
458
|
+
--color-sentiment-interactive-control-hover: #043A3A;
|
|
459
|
+
--color-sentiment-interactive-control-active: #022626;
|
|
460
|
+
--color-sentiment-background-surface: #054D4D;
|
|
461
|
+
--color-sentiment-background-surface-hover: #043A3A;
|
|
462
|
+
--color-sentiment-background-surface-active: #022626;
|
|
463
463
|
}
|
|
464
464
|
.np-theme-personal--dark.wds-sentiment-surface-proposition-elevated,
|
|
465
465
|
.np-theme-business--dark.wds-sentiment-surface-proposition-elevated,
|
package/build/modal/Modal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sources":["../../src/modal/Modal.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode, useContext, useId, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport { useIntl } from 'react-intl';\n\nimport {\n Size,\n Position,\n PositionTop,\n PositionCenter,\n Scroll,\n CommonProps,\n SizeSmall,\n SizeMedium,\n SizeLarge,\n SizeExtraLarge,\n ScrollContent,\n ScrollViewport,\n Typography,\n} from '../common';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport Drawer from '../drawer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport Title from '../title/Title';\nimport { Cross } from '@transferwise/icons';\nimport IconButton from '../iconButton';\nimport closeBtnMessages from '../common/closeButton/CloseButton.messages';\n\nconst TRANSITION_DURATION_IN_MILLISECONDS = 150;\n\nexport type ModalProps = CommonProps & {\n title?: ReactNode;\n body: ReactNode;\n footer?: ReactNode;\n size?: SizeSmall | SizeMedium | SizeLarge | SizeExtraLarge;\n onClose: () => void;\n onUnmount?: () => void;\n open: boolean;\n scroll?: ScrollContent | ScrollViewport;\n position?: PositionTop | PositionCenter;\n disableDimmerClickToClose?: boolean;\n};\n\nconst Modal = ({\n title = null,\n body,\n footer = null,\n onClose,\n onUnmount,\n className,\n open,\n size = Size.MEDIUM,\n scroll = Scroll.VIEWPORT,\n position = Position.CENTER,\n disableDimmerClickToClose = false,\n ...otherProps\n}: ModalProps) => {\n const intl = useIntl();\n const { isMedium } = useLayout();\n\n const contentReference = useRef<HTMLDivElement>(null);\n const titleId = useId();\n\n const overlayId = useContext(OverlayIdContext);\n\n return !isMedium ? (\n <Drawer\n open={open}\n className={className}\n headerTitle={title}\n footerContent={footer}\n position={Position.BOTTOM}\n onClose={onClose}\n onUnmount={onUnmount}\n >\n {body}\n </Drawer>\n ) : (\n <Dimmer\n open={open}\n scrollable={scroll === Scroll.VIEWPORT}\n contentPosition={position}\n disableClickToClose={disableDimmerClickToClose}\n onClose={onClose}\n onExited={onUnmount}\n >\n <CSSTransition\n nodeRef={contentReference}\n appear\n in={open}\n classNames={{ enterDone: 'in' }}\n timeout={TRANSITION_DURATION_IN_MILLISECONDS}\n unmountOnExit\n >\n <div\n ref={contentReference}\n className={clsx(\n 'tw-modal',\n 'd-flex',\n 'fade',\n 'outline-none',\n scroll === Scroll.CONTENT && 'tw-modal--scrollable',\n className,\n )}\n {...otherProps}\n >\n <div\n id={overlayId}\n role=\"dialog\"\n aria-modal\n aria-labelledby={titleId}\n className={clsx('tw-modal-dialog', 'd-flex', {\n [`tw-modal-${size}`]: size,\n })}\n >\n <div\n className={clsx(\n 'tw-modal-content',\n 'd-flex',\n 'flex-column',\n 'justify-content-between',\n )}\n >\n <div\n className={clsx(\n 'tw-modal-header',\n 'd-flex',\n 'align-items-center',\n title ? 'justify-content-between' : 'justify-content-end',\n 'flex-wrap',\n )}\n >\n {title && (\n <Title id={titleId} type={Typography.TITLE_SUBSECTION} className=\"tw-modal-title\">\n {title}\n </Title>\n )}\n <IconButton\n size={40}\n priority=\"tertiary\"\n aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}\n onClick={onClose}\n >\n <Cross />\n </IconButton>\n </div>\n <div\n className={clsx('tw-modal-body', {\n 'tw-modal-body--scrollable': scroll === Scroll.CONTENT,\n })}\n >\n {body}\n </div>\n {footer ? (\n <div\n className={clsx('tw-modal-footer', 'd-flex', 'align-items-center', 'flex-wrap')}\n >\n {footer}\n </div>\n ) : (\n <div className=\"m-t-3\" />\n )}\n </div>\n </div>\n </div>\n </CSSTransition>\n </Dimmer>\n );\n};\n\nexport default Modal;\n"],"names":["TRANSITION_DURATION_IN_MILLISECONDS","Modal","title","body","footer","onClose","onUnmount","className","open","size","Size","MEDIUM","scroll","Scroll","VIEWPORT","position","Position","CENTER","disableDimmerClickToClose","otherProps","intl","useIntl","isMedium","useLayout","contentReference","useRef","titleId","useId","overlayId","useContext","OverlayIdContext","_jsx","Drawer","headerTitle","footerContent","BOTTOM","children","Dimmer","scrollable","contentPosition","disableClickToClose","onExited","CSSTransition","nodeRef","appear","in","classNames","enterDone","timeout","unmountOnExit","ref","clsx","CONTENT","id","role","_jsxs","Title","type","Typography","TITLE_SUBSECTION","IconButton","priority","formatMessage","closeBtnMessages","ariaLabel","onClick","Cross"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,MAAMA,mCAAmC,GAAG,GAAG;
|
|
1
|
+
{"version":3,"file":"Modal.js","sources":["../../src/modal/Modal.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode, useContext, useId, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport { useIntl } from 'react-intl';\n\nimport {\n Size,\n Position,\n PositionTop,\n PositionCenter,\n Scroll,\n CommonProps,\n SizeSmall,\n SizeMedium,\n SizeLarge,\n SizeExtraLarge,\n ScrollContent,\n ScrollViewport,\n Typography,\n} from '../common';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport Drawer from '../drawer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport Title from '../title/Title';\nimport { Cross } from '@transferwise/icons';\nimport IconButton from '../iconButton';\nimport closeBtnMessages from '../common/closeButton/CloseButton.messages';\n\nconst TRANSITION_DURATION_IN_MILLISECONDS = 150;\n\nexport type ModalProps = CommonProps & {\n /** @default null */\n title?: ReactNode;\n body: ReactNode;\n /** @default null */\n footer?: ReactNode;\n /** @default 'md' */\n size?: SizeSmall | SizeMedium | SizeLarge | SizeExtraLarge;\n onClose: () => void;\n onUnmount?: () => void;\n open: boolean;\n /** @default 'viewport' */\n scroll?: ScrollContent | ScrollViewport;\n /** @default 'center' */\n position?: PositionTop | PositionCenter;\n /** @default false */\n disableDimmerClickToClose?: boolean;\n};\n\nconst Modal = ({\n title = null,\n body,\n footer = null,\n onClose,\n onUnmount,\n className,\n open,\n size = Size.MEDIUM,\n scroll = Scroll.VIEWPORT,\n position = Position.CENTER,\n disableDimmerClickToClose = false,\n ...otherProps\n}: ModalProps) => {\n const intl = useIntl();\n const { isMedium } = useLayout();\n\n const contentReference = useRef<HTMLDivElement>(null);\n const titleId = useId();\n\n const overlayId = useContext(OverlayIdContext);\n\n return !isMedium ? (\n <Drawer\n open={open}\n className={className}\n headerTitle={title}\n footerContent={footer}\n position={Position.BOTTOM}\n onClose={onClose}\n onUnmount={onUnmount}\n >\n {body}\n </Drawer>\n ) : (\n <Dimmer\n open={open}\n scrollable={scroll === Scroll.VIEWPORT}\n contentPosition={position}\n disableClickToClose={disableDimmerClickToClose}\n onClose={onClose}\n onExited={onUnmount}\n >\n <CSSTransition\n nodeRef={contentReference}\n appear\n in={open}\n classNames={{ enterDone: 'in' }}\n timeout={TRANSITION_DURATION_IN_MILLISECONDS}\n unmountOnExit\n >\n <div\n ref={contentReference}\n className={clsx(\n 'tw-modal',\n 'd-flex',\n 'fade',\n 'outline-none',\n scroll === Scroll.CONTENT && 'tw-modal--scrollable',\n className,\n )}\n {...otherProps}\n >\n <div\n id={overlayId}\n role=\"dialog\"\n aria-modal\n aria-labelledby={titleId}\n className={clsx('tw-modal-dialog', 'd-flex', {\n [`tw-modal-${size}`]: size,\n })}\n >\n <div\n className={clsx(\n 'tw-modal-content',\n 'd-flex',\n 'flex-column',\n 'justify-content-between',\n )}\n >\n <div\n className={clsx(\n 'tw-modal-header',\n 'd-flex',\n 'align-items-center',\n title ? 'justify-content-between' : 'justify-content-end',\n 'flex-wrap',\n )}\n >\n {title && (\n <Title id={titleId} type={Typography.TITLE_SUBSECTION} className=\"tw-modal-title\">\n {title}\n </Title>\n )}\n <IconButton\n size={40}\n priority=\"tertiary\"\n aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}\n onClick={onClose}\n >\n <Cross />\n </IconButton>\n </div>\n <div\n className={clsx('tw-modal-body', {\n 'tw-modal-body--scrollable': scroll === Scroll.CONTENT,\n })}\n >\n {body}\n </div>\n {footer ? (\n <div\n className={clsx('tw-modal-footer', 'd-flex', 'align-items-center', 'flex-wrap')}\n >\n {footer}\n </div>\n ) : (\n <div className=\"m-t-3\" />\n )}\n </div>\n </div>\n </div>\n </CSSTransition>\n </Dimmer>\n );\n};\n\nexport default Modal;\n"],"names":["TRANSITION_DURATION_IN_MILLISECONDS","Modal","title","body","footer","onClose","onUnmount","className","open","size","Size","MEDIUM","scroll","Scroll","VIEWPORT","position","Position","CENTER","disableDimmerClickToClose","otherProps","intl","useIntl","isMedium","useLayout","contentReference","useRef","titleId","useId","overlayId","useContext","OverlayIdContext","_jsx","Drawer","headerTitle","footerContent","BOTTOM","children","Dimmer","scrollable","contentPosition","disableClickToClose","onExited","CSSTransition","nodeRef","appear","in","classNames","enterDone","timeout","unmountOnExit","ref","clsx","CONTENT","id","role","_jsxs","Title","type","Typography","TITLE_SUBSECTION","IconButton","priority","formatMessage","closeBtnMessages","ariaLabel","onClick","Cross"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.mjs","sources":["../../src/modal/Modal.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode, useContext, useId, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport { useIntl } from 'react-intl';\n\nimport {\n Size,\n Position,\n PositionTop,\n PositionCenter,\n Scroll,\n CommonProps,\n SizeSmall,\n SizeMedium,\n SizeLarge,\n SizeExtraLarge,\n ScrollContent,\n ScrollViewport,\n Typography,\n} from '../common';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport Drawer from '../drawer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport Title from '../title/Title';\nimport { Cross } from '@transferwise/icons';\nimport IconButton from '../iconButton';\nimport closeBtnMessages from '../common/closeButton/CloseButton.messages';\n\nconst TRANSITION_DURATION_IN_MILLISECONDS = 150;\n\nexport type ModalProps = CommonProps & {\n title?: ReactNode;\n body: ReactNode;\n footer?: ReactNode;\n size?: SizeSmall | SizeMedium | SizeLarge | SizeExtraLarge;\n onClose: () => void;\n onUnmount?: () => void;\n open: boolean;\n scroll?: ScrollContent | ScrollViewport;\n position?: PositionTop | PositionCenter;\n disableDimmerClickToClose?: boolean;\n};\n\nconst Modal = ({\n title = null,\n body,\n footer = null,\n onClose,\n onUnmount,\n className,\n open,\n size = Size.MEDIUM,\n scroll = Scroll.VIEWPORT,\n position = Position.CENTER,\n disableDimmerClickToClose = false,\n ...otherProps\n}: ModalProps) => {\n const intl = useIntl();\n const { isMedium } = useLayout();\n\n const contentReference = useRef<HTMLDivElement>(null);\n const titleId = useId();\n\n const overlayId = useContext(OverlayIdContext);\n\n return !isMedium ? (\n <Drawer\n open={open}\n className={className}\n headerTitle={title}\n footerContent={footer}\n position={Position.BOTTOM}\n onClose={onClose}\n onUnmount={onUnmount}\n >\n {body}\n </Drawer>\n ) : (\n <Dimmer\n open={open}\n scrollable={scroll === Scroll.VIEWPORT}\n contentPosition={position}\n disableClickToClose={disableDimmerClickToClose}\n onClose={onClose}\n onExited={onUnmount}\n >\n <CSSTransition\n nodeRef={contentReference}\n appear\n in={open}\n classNames={{ enterDone: 'in' }}\n timeout={TRANSITION_DURATION_IN_MILLISECONDS}\n unmountOnExit\n >\n <div\n ref={contentReference}\n className={clsx(\n 'tw-modal',\n 'd-flex',\n 'fade',\n 'outline-none',\n scroll === Scroll.CONTENT && 'tw-modal--scrollable',\n className,\n )}\n {...otherProps}\n >\n <div\n id={overlayId}\n role=\"dialog\"\n aria-modal\n aria-labelledby={titleId}\n className={clsx('tw-modal-dialog', 'd-flex', {\n [`tw-modal-${size}`]: size,\n })}\n >\n <div\n className={clsx(\n 'tw-modal-content',\n 'd-flex',\n 'flex-column',\n 'justify-content-between',\n )}\n >\n <div\n className={clsx(\n 'tw-modal-header',\n 'd-flex',\n 'align-items-center',\n title ? 'justify-content-between' : 'justify-content-end',\n 'flex-wrap',\n )}\n >\n {title && (\n <Title id={titleId} type={Typography.TITLE_SUBSECTION} className=\"tw-modal-title\">\n {title}\n </Title>\n )}\n <IconButton\n size={40}\n priority=\"tertiary\"\n aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}\n onClick={onClose}\n >\n <Cross />\n </IconButton>\n </div>\n <div\n className={clsx('tw-modal-body', {\n 'tw-modal-body--scrollable': scroll === Scroll.CONTENT,\n })}\n >\n {body}\n </div>\n {footer ? (\n <div\n className={clsx('tw-modal-footer', 'd-flex', 'align-items-center', 'flex-wrap')}\n >\n {footer}\n </div>\n ) : (\n <div className=\"m-t-3\" />\n )}\n </div>\n </div>\n </div>\n </CSSTransition>\n </Dimmer>\n );\n};\n\nexport default Modal;\n"],"names":["TRANSITION_DURATION_IN_MILLISECONDS","Modal","title","body","footer","onClose","onUnmount","className","open","size","Size","MEDIUM","scroll","Scroll","VIEWPORT","position","Position","CENTER","disableDimmerClickToClose","otherProps","intl","useIntl","isMedium","useLayout","contentReference","useRef","titleId","useId","overlayId","useContext","OverlayIdContext","_jsx","Drawer","headerTitle","footerContent","BOTTOM","children","Dimmer","scrollable","contentPosition","disableClickToClose","onExited","CSSTransition","nodeRef","appear","in","classNames","enterDone","timeout","unmountOnExit","ref","clsx","CONTENT","id","role","_jsxs","Title","type","Typography","TITLE_SUBSECTION","IconButton","priority","formatMessage","closeBtnMessages","ariaLabel","onClick","Cross"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,MAAMA,mCAAmC,GAAG,GAAG;
|
|
1
|
+
{"version":3,"file":"Modal.mjs","sources":["../../src/modal/Modal.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode, useContext, useId, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport { useIntl } from 'react-intl';\n\nimport {\n Size,\n Position,\n PositionTop,\n PositionCenter,\n Scroll,\n CommonProps,\n SizeSmall,\n SizeMedium,\n SizeLarge,\n SizeExtraLarge,\n ScrollContent,\n ScrollViewport,\n Typography,\n} from '../common';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport Drawer from '../drawer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport Title from '../title/Title';\nimport { Cross } from '@transferwise/icons';\nimport IconButton from '../iconButton';\nimport closeBtnMessages from '../common/closeButton/CloseButton.messages';\n\nconst TRANSITION_DURATION_IN_MILLISECONDS = 150;\n\nexport type ModalProps = CommonProps & {\n /** @default null */\n title?: ReactNode;\n body: ReactNode;\n /** @default null */\n footer?: ReactNode;\n /** @default 'md' */\n size?: SizeSmall | SizeMedium | SizeLarge | SizeExtraLarge;\n onClose: () => void;\n onUnmount?: () => void;\n open: boolean;\n /** @default 'viewport' */\n scroll?: ScrollContent | ScrollViewport;\n /** @default 'center' */\n position?: PositionTop | PositionCenter;\n /** @default false */\n disableDimmerClickToClose?: boolean;\n};\n\nconst Modal = ({\n title = null,\n body,\n footer = null,\n onClose,\n onUnmount,\n className,\n open,\n size = Size.MEDIUM,\n scroll = Scroll.VIEWPORT,\n position = Position.CENTER,\n disableDimmerClickToClose = false,\n ...otherProps\n}: ModalProps) => {\n const intl = useIntl();\n const { isMedium } = useLayout();\n\n const contentReference = useRef<HTMLDivElement>(null);\n const titleId = useId();\n\n const overlayId = useContext(OverlayIdContext);\n\n return !isMedium ? (\n <Drawer\n open={open}\n className={className}\n headerTitle={title}\n footerContent={footer}\n position={Position.BOTTOM}\n onClose={onClose}\n onUnmount={onUnmount}\n >\n {body}\n </Drawer>\n ) : (\n <Dimmer\n open={open}\n scrollable={scroll === Scroll.VIEWPORT}\n contentPosition={position}\n disableClickToClose={disableDimmerClickToClose}\n onClose={onClose}\n onExited={onUnmount}\n >\n <CSSTransition\n nodeRef={contentReference}\n appear\n in={open}\n classNames={{ enterDone: 'in' }}\n timeout={TRANSITION_DURATION_IN_MILLISECONDS}\n unmountOnExit\n >\n <div\n ref={contentReference}\n className={clsx(\n 'tw-modal',\n 'd-flex',\n 'fade',\n 'outline-none',\n scroll === Scroll.CONTENT && 'tw-modal--scrollable',\n className,\n )}\n {...otherProps}\n >\n <div\n id={overlayId}\n role=\"dialog\"\n aria-modal\n aria-labelledby={titleId}\n className={clsx('tw-modal-dialog', 'd-flex', {\n [`tw-modal-${size}`]: size,\n })}\n >\n <div\n className={clsx(\n 'tw-modal-content',\n 'd-flex',\n 'flex-column',\n 'justify-content-between',\n )}\n >\n <div\n className={clsx(\n 'tw-modal-header',\n 'd-flex',\n 'align-items-center',\n title ? 'justify-content-between' : 'justify-content-end',\n 'flex-wrap',\n )}\n >\n {title && (\n <Title id={titleId} type={Typography.TITLE_SUBSECTION} className=\"tw-modal-title\">\n {title}\n </Title>\n )}\n <IconButton\n size={40}\n priority=\"tertiary\"\n aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}\n onClick={onClose}\n >\n <Cross />\n </IconButton>\n </div>\n <div\n className={clsx('tw-modal-body', {\n 'tw-modal-body--scrollable': scroll === Scroll.CONTENT,\n })}\n >\n {body}\n </div>\n {footer ? (\n <div\n className={clsx('tw-modal-footer', 'd-flex', 'align-items-center', 'flex-wrap')}\n >\n {footer}\n </div>\n ) : (\n <div className=\"m-t-3\" />\n )}\n </div>\n </div>\n </div>\n </CSSTransition>\n </Dimmer>\n );\n};\n\nexport default Modal;\n"],"names":["TRANSITION_DURATION_IN_MILLISECONDS","Modal","title","body","footer","onClose","onUnmount","className","open","size","Size","MEDIUM","scroll","Scroll","VIEWPORT","position","Position","CENTER","disableDimmerClickToClose","otherProps","intl","useIntl","isMedium","useLayout","contentReference","useRef","titleId","useId","overlayId","useContext","OverlayIdContext","_jsx","Drawer","headerTitle","footerContent","BOTTOM","children","Dimmer","scrollable","contentPosition","disableClickToClose","onExited","CSSTransition","nodeRef","appear","in","classNames","enterDone","timeout","unmountOnExit","ref","clsx","CONTENT","id","role","_jsxs","Title","type","Typography","TITLE_SUBSECTION","IconButton","priority","formatMessage","closeBtnMessages","ariaLabel","onClick","Cross"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationOption.js","sources":["../../src/navigationOption/NavigationOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport Chevron from '../chevron';\nimport { Position } from '../common';\nimport Option from '../common/Option';\nimport { OptionProps, ReferenceType } from '../common/Option/Option';\n\nexport type NavigationOptionProps = OptionProps;\n\n/**\n * @deprecated
|
|
1
|
+
{"version":3,"file":"NavigationOption.js","sources":["../../src/navigationOption/NavigationOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport Chevron from '../chevron';\nimport { Position } from '../common';\nimport Option from '../common/Option';\nimport { OptionProps, ReferenceType } from '../common/Option/Option';\n\nexport type NavigationOptionProps = OptionProps;\n\n/**\n * @deprecated Use `<ListItem />` instead.\n * @deprecatedSince 46.104.0\n * @see [Source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nconst NavigationOption = forwardRef<ReferenceType, NavigationOptionProps>(\n ({ as: component = 'button', disabled = false, onClick, className, ...rest }, reference) => {\n if ('href' in rest && rest.href) {\n component = 'a';\n }\n\n return (\n <Option\n {...rest}\n ref={reference}\n as={component}\n className={clsx('np-navigation-option', className)}\n button={<Chevron orientation={Position.RIGHT} disabled={disabled} className=\"d-block\" />}\n disabled={disabled}\n onClick={(event) => {\n if (disabled) {\n event.preventDefault();\n return;\n }\n\n if (onClick) {\n onClick(event);\n }\n }}\n />\n );\n },\n);\n\nexport default NavigationOption;\n"],"names":["NavigationOption","forwardRef","as","component","disabled","onClick","className","rest","reference","href","_jsx","Option","ref","clsx","button","Chevron","orientation","Position","RIGHT","event","preventDefault"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAMA,gBAAgB,gBAAGC,gBAAU,CACjC,CAAC;EAAEC,EAAE,EAAEC,SAAS,GAAG,QAAQ;AAAEC,EAAAA,QAAQ,GAAG,KAAK;EAAEC,OAAO;EAAEC,SAAS;EAAE,GAAGC;AAAI,CAAE,EAAEC,SAAS,KAAI;AACzF,EAAA,IAAI,MAAM,IAAID,IAAI,IAAIA,IAAI,CAACE,IAAI,EAAE;AAC/BN,IAAAA,SAAS,GAAG,GAAG;AACjB,EAAA;EAEA,oBACEO,cAAA,CAACC,cAAM,EAAA;AAAA,IAAA,GACDJ,IAAI;AACRK,IAAAA,GAAG,EAAEJ,SAAU;AACfN,IAAAA,EAAE,EAAEC,SAAU;AACdG,IAAAA,SAAS,EAAEO,SAAI,CAAC,sBAAsB,EAAEP,SAAS,CAAE;IACnDQ,MAAM,eAAEJ,cAAA,CAACK,eAAO,EAAA;MAACC,WAAW,EAAEC,iBAAQ,CAACC,KAAM;AAACd,MAAAA,QAAQ,EAAEA,QAAS;AAACE,MAAAA,SAAS,EAAC;AAAS,KAAA,CAAI;AACzFF,IAAAA,QAAQ,EAAEA,QAAS;IACnBC,OAAO,EAAGc,KAAK,IAAI;AACjB,MAAA,IAAIf,QAAQ,EAAE;QACZe,KAAK,CAACC,cAAc,EAAE;AACtB,QAAA;AACF,MAAA;AAEA,MAAA,IAAIf,OAAO,EAAE;QACXA,OAAO,CAACc,KAAK,CAAC;AAChB,MAAA;AACF,IAAA;AAAE,GAAA,CACF;AAEN,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationOption.mjs","sources":["../../src/navigationOption/NavigationOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport Chevron from '../chevron';\nimport { Position } from '../common';\nimport Option from '../common/Option';\nimport { OptionProps, ReferenceType } from '../common/Option/Option';\n\nexport type NavigationOptionProps = OptionProps;\n\n/**\n * @deprecated
|
|
1
|
+
{"version":3,"file":"NavigationOption.mjs","sources":["../../src/navigationOption/NavigationOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport Chevron from '../chevron';\nimport { Position } from '../common';\nimport Option from '../common/Option';\nimport { OptionProps, ReferenceType } from '../common/Option/Option';\n\nexport type NavigationOptionProps = OptionProps;\n\n/**\n * @deprecated Use `<ListItem />` instead.\n * @deprecatedSince 46.104.0\n * @see [Source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nconst NavigationOption = forwardRef<ReferenceType, NavigationOptionProps>(\n ({ as: component = 'button', disabled = false, onClick, className, ...rest }, reference) => {\n if ('href' in rest && rest.href) {\n component = 'a';\n }\n\n return (\n <Option\n {...rest}\n ref={reference}\n as={component}\n className={clsx('np-navigation-option', className)}\n button={<Chevron orientation={Position.RIGHT} disabled={disabled} className=\"d-block\" />}\n disabled={disabled}\n onClick={(event) => {\n if (disabled) {\n event.preventDefault();\n return;\n }\n\n if (onClick) {\n onClick(event);\n }\n }}\n />\n );\n },\n);\n\nexport default NavigationOption;\n"],"names":["NavigationOption","forwardRef","as","component","disabled","onClick","className","rest","reference","href","_jsx","Option","ref","clsx","button","Chevron","orientation","Position","RIGHT","event","preventDefault"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAMA,gBAAgB,gBAAGC,UAAU,CACjC,CAAC;EAAEC,EAAE,EAAEC,SAAS,GAAG,QAAQ;AAAEC,EAAAA,QAAQ,GAAG,KAAK;EAAEC,OAAO;EAAEC,SAAS;EAAE,GAAGC;AAAI,CAAE,EAAEC,SAAS,KAAI;AACzF,EAAA,IAAI,MAAM,IAAID,IAAI,IAAIA,IAAI,CAACE,IAAI,EAAE;AAC/BN,IAAAA,SAAS,GAAG,GAAG;AACjB,EAAA;EAEA,oBACEO,GAAA,CAACC,MAAM,EAAA;AAAA,IAAA,GACDJ,IAAI;AACRK,IAAAA,GAAG,EAAEJ,SAAU;AACfN,IAAAA,EAAE,EAAEC,SAAU;AACdG,IAAAA,SAAS,EAAEO,IAAI,CAAC,sBAAsB,EAAEP,SAAS,CAAE;IACnDQ,MAAM,eAAEJ,GAAA,CAACK,OAAO,EAAA;MAACC,WAAW,EAAEC,QAAQ,CAACC,KAAM;AAACd,MAAAA,QAAQ,EAAEA,QAAS;AAACE,MAAAA,SAAS,EAAC;AAAS,KAAA,CAAI;AACzFF,IAAAA,QAAQ,EAAEA,QAAS;IACnBC,OAAO,EAAGc,KAAK,IAAI;AACjB,MAAA,IAAIf,QAAQ,EAAE;QACZe,KAAK,CAACC,cAAc,EAAE;AACtB,QAAA;AACF,MAAA;AAEA,MAAA,IAAIf,OAAO,EAAE;QACXA,OAAO,CAACc,KAAK,CAAC;AAChB,MAAA;AACF,IAAA;AAAE,GAAA,CACF;AAEN,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationOptionsList.js","sources":["../../src/navigationOptionsList/NavigationOptionsList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Children } from 'react';\n\nexport interface NavigationOptionListProps {\n children: React.ReactNode;\n}\n\n/**\n * @deprecated
|
|
1
|
+
{"version":3,"file":"NavigationOptionsList.js","sources":["../../src/navigationOptionsList/NavigationOptionsList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Children } from 'react';\n\nexport interface NavigationOptionListProps {\n children: React.ReactNode;\n}\n\n/**\n * @deprecated Use `<List />` and `<ListItem />` instead.\n * @deprecatedSince 46.104.0\n * @see [List source](../list/List.tsx)\n * @see [ListItem source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nconst NavigationOptionList = ({ children }: NavigationOptionListProps) => {\n return (\n <ul className=\"np-navigation-options-list\">\n {Children.map(children, (child) => (\n <li key={child?.toString()} className=\"np-navigation-options-list__item\">\n {child}\n </li>\n ))}\n </ul>\n );\n};\n\nexport default NavigationOptionList;\n"],"names":["NavigationOptionList","children","_jsx","className","Children","map","child","toString"],"mappings":";;;;;;;AAgBA,MAAMA,oBAAoB,GAAGA,CAAC;AAAEC,EAAAA;AAAQ,CAA6B,KAAI;AACvE,EAAA,oBACEC,cAAA,CAAA,IAAA,EAAA;AAAIC,IAAAA,SAAS,EAAC,4BAA4B;IAAAF,QAAA,EACvCG,cAAQ,CAACC,GAAG,CAACJ,QAAQ,EAAGK,KAAK,iBAC5BJ,cAAA,CAAA,IAAA,EAAA;AAA4BC,MAAAA,SAAS,EAAC,kCAAkC;AAAAF,MAAAA,QAAA,EACrEK;AAAK,KAAA,EADCA,KAAK,EAAEC,QAAQ,EAEpB,CACL;AAAC,GACA,CAAC;AAET;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationOptionsList.mjs","sources":["../../src/navigationOptionsList/NavigationOptionsList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Children } from 'react';\n\nexport interface NavigationOptionListProps {\n children: React.ReactNode;\n}\n\n/**\n * @deprecated
|
|
1
|
+
{"version":3,"file":"NavigationOptionsList.mjs","sources":["../../src/navigationOptionsList/NavigationOptionsList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Children } from 'react';\n\nexport interface NavigationOptionListProps {\n children: React.ReactNode;\n}\n\n/**\n * @deprecated Use `<List />` and `<ListItem />` instead.\n * @deprecatedSince 46.104.0\n * @see [List source](../list/List.tsx)\n * @see [ListItem source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nconst NavigationOptionList = ({ children }: NavigationOptionListProps) => {\n return (\n <ul className=\"np-navigation-options-list\">\n {Children.map(children, (child) => (\n <li key={child?.toString()} className=\"np-navigation-options-list__item\">\n {child}\n </li>\n ))}\n </ul>\n );\n};\n\nexport default NavigationOptionList;\n"],"names":["NavigationOptionList","children","_jsx","className","Children","map","child","toString"],"mappings":";;;AAgBA,MAAMA,oBAAoB,GAAGA,CAAC;AAAEC,EAAAA;AAAQ,CAA6B,KAAI;AACvE,EAAA,oBACEC,GAAA,CAAA,IAAA,EAAA;AAAIC,IAAAA,SAAS,EAAC,4BAA4B;IAAAF,QAAA,EACvCG,QAAQ,CAACC,GAAG,CAACJ,QAAQ,EAAGK,KAAK,iBAC5BJ,GAAA,CAAA,IAAA,EAAA;AAA4BC,MAAAA,SAAS,EAAC,kCAAkC;AAAAF,MAAAA,QAAA,EACrEK;AAAK,KAAA,EADCA,KAAK,EAAEC,QAAQ,EAEpB,CACL;AAAC,GACA,CAAC;AAET;;;;"}
|
package/build/nudge/Nudge.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Nudge.js","sources":["../../src/nudge/Nudge.tsx"],"sourcesContent":["import { Illustration, Assets, type IllustrationNames } from '@wise/art';\nimport { clsx } from 'clsx';\nimport { ReactNode, useEffect, useState, MouseEvent } from 'react';\n\nimport Body from '../body';\nimport { Typography } from '../common';\nimport Link from '../link';\nimport type { AlertAction } from '../alert';\nimport IconButton from '../iconButton';\nimport { Cross } from '@transferwise/icons';\nimport { useIntl } from 'react-intl';\nimport closeBtnMessages from '../common/closeButton/CloseButton.messages';\n\n// WARNING: Changing this will cause nudges to reappear wherever persist nudge is used and privacy team will need to be updated too\nexport const STORAGE_NAME = 'dismissedNudges';\n\nconst getLocalStorage = (): string[] => {\n try {\n const storageItem = localStorage.getItem(STORAGE_NAME);\n\n if (storageItem) {\n const storage: unknown = JSON.parse(storageItem);\n\n if (Array.isArray(storage)) {\n return storage.map((item) => String(item));\n }\n }\n } catch (error) {}\n\n return [];\n};\n\ntype MediaNameType =\n | `${Assets.GLOBE}`\n | `${Assets.LOCK}`\n | `${Assets.WALLET}`\n | `${Assets.GEAR}`\n | `${Assets.INVITE_LETTER}`\n | `${Assets.PERSONAL_CARD}`\n | `${Assets.BUSINESS_CARD}`\n | `${Assets.HEART}`\n | `${Assets.MULTI_CURRENCY}`\n | `${Assets.SHOPPING_BAG}`\n | `${Assets.FLOWER}`\n | `${Assets.GIFT_BOX}`\n | `${Assets.BACKPACK}`;\n\ntype BaseProps = {\n /** @deprecated
|
|
1
|
+
{"version":3,"file":"Nudge.js","sources":["../../src/nudge/Nudge.tsx"],"sourcesContent":["import { Illustration, Assets, type IllustrationNames } from '@wise/art';\nimport { clsx } from 'clsx';\nimport { ReactNode, useEffect, useState, MouseEvent } from 'react';\n\nimport Body from '../body';\nimport { Typography } from '../common';\nimport Link from '../link';\nimport type { AlertAction } from '../alert';\nimport IconButton from '../iconButton';\nimport { Cross } from '@transferwise/icons';\nimport { useIntl } from 'react-intl';\nimport closeBtnMessages from '../common/closeButton/CloseButton.messages';\n\n// WARNING: Changing this will cause nudges to reappear wherever persist nudge is used and privacy team will need to be updated too\nexport const STORAGE_NAME = 'dismissedNudges';\n\nconst getLocalStorage = (): string[] => {\n try {\n const storageItem = localStorage.getItem(STORAGE_NAME);\n\n if (storageItem) {\n const storage: unknown = JSON.parse(storageItem);\n\n if (Array.isArray(storage)) {\n return storage.map((item) => String(item));\n }\n }\n } catch (error) {}\n\n return [];\n};\n\ntype MediaNameType =\n | `${Assets.GLOBE}`\n | `${Assets.LOCK}`\n | `${Assets.WALLET}`\n | `${Assets.GEAR}`\n | `${Assets.INVITE_LETTER}`\n | `${Assets.PERSONAL_CARD}`\n | `${Assets.BUSINESS_CARD}`\n | `${Assets.HEART}`\n | `${Assets.MULTI_CURRENCY}`\n | `${Assets.SHOPPING_BAG}`\n | `${Assets.FLOWER}`\n | `${Assets.GIFT_BOX}`\n | `${Assets.BACKPACK}`;\n\ntype BaseProps = {\n /** @deprecated Use `mediaName` property instead. */\n media?: ReactNode;\n /** Media name */\n mediaName?: MediaNameType;\n title: ReactNode;\n link?: ReactNode;\n href?: string;\n onClick?: (event?: MouseEvent<HTMLSpanElement>) => void;\n /** Fired when the user clicks on close button */\n onDismiss?: () => void;\n /** An optional call to action to sit under the main body of the nudge. If your label is short, use aria-label to provide more context */\n action?: AlertAction;\n className?: string;\n};\n\nexport interface OptionalId extends BaseProps {\n id?: string;\n persistDismissal?: false;\n isPreviouslyDismissed?: undefined;\n}\n\nexport interface RequiredPersistProps extends BaseProps {\n /** This ID should be completely unique to the page and feature as it uses a shared array which could conflict with other nudges in Wise */\n id: string;\n /** Use persist dismissal to keep the nudge dismissed using the browser's localStorage */\n persistDismissal: true;\n /**\n * Fired on mount for determining if nudge has been dismissed before\n *\n * @param {boolean} value - set to true if dismissed previously\n */\n isPreviouslyDismissed?: (value: boolean) => void;\n}\n\nexport type Props = OptionalId | RequiredPersistProps;\n\nconst Nudge = ({\n mediaName,\n title,\n link,\n href,\n onClick,\n onDismiss,\n persistDismissal,\n isPreviouslyDismissed,\n id,\n className,\n action,\n}: Props) => {\n const intl = useIntl();\n const [isDismissed, setIsDismissed] = useState(false);\n const [isMounted, setIsMounted] = useState(false);\n\n const handleOnDismiss = () => {\n const dismissedNudgesStorage = getLocalStorage();\n\n if (persistDismissal && id) {\n try {\n localStorage.setItem(STORAGE_NAME, JSON.stringify([...dismissedNudgesStorage, id]));\n } catch (error) {}\n\n setIsDismissed(true);\n }\n\n if (onDismiss) {\n onDismiss();\n }\n };\n\n useEffect(() => {\n if (persistDismissal && id) {\n const dismissedNudgesStorage = getLocalStorage();\n let isDismissed = false;\n\n if (dismissedNudgesStorage?.find((item) => item === id)) {\n setIsDismissed(true);\n isDismissed = true;\n }\n\n if (isPreviouslyDismissed) {\n isPreviouslyDismissed(isDismissed);\n }\n }\n\n setIsMounted(true);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [id, persistDismissal]);\n\n if (persistDismissal && (isDismissed || !isMounted)) {\n return null;\n }\n\n return (\n <div className={clsx('wds-nudge', className)} id={id}>\n {!!mediaName && (\n <div className=\"wds-nudge-media\">\n <Illustration\n name={mediaName as IllustrationNames}\n className={clsx(`wds-nudge-media-${mediaName}`)}\n size=\"small\"\n disablePadding\n alt=\"\"\n />\n </div>\n )}\n <div className=\"wds-nudge-container\">\n <div className=\"wds-nudge-content\">\n <Body type={Typography.BODY_LARGE} className={clsx('wds-nudge-body')}>\n {title}\n </Body>\n {/* Merge these two Link instances into one */}\n {link && (\n <Link\n href={href}\n type={Typography.LINK_LARGE}\n className=\"wds-nudge-link\"\n onClick={onClick}\n >\n {link}\n </Link>\n )}\n {action && (\n <Link\n href={action.href}\n target={action.target}\n className=\"m-t-1\"\n aria-label={action['aria-label']}\n type={Typography.LINK_LARGE}\n onClick={action.onClick}\n >\n {action.text}\n </Link>\n )}\n </div>\n {onDismiss || persistDismissal ? (\n <IconButton\n size={24}\n priority=\"tertiary\"\n aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}\n onClick={handleOnDismiss}\n >\n <Cross />\n </IconButton>\n ) : null}\n </div>\n </div>\n );\n};\n\nexport default Nudge;\n"],"names":["STORAGE_NAME","getLocalStorage","storageItem","localStorage","getItem","storage","JSON","parse","Array","isArray","map","item","String","error","Nudge","mediaName","title","link","href","onClick","onDismiss","persistDismissal","isPreviouslyDismissed","id","className","action","intl","useIntl","isDismissed","setIsDismissed","useState","isMounted","setIsMounted","handleOnDismiss","dismissedNudgesStorage","setItem","stringify","useEffect","find","_jsxs","clsx","children","_jsx","Illustration","name","size","disablePadding","alt","Body","type","Typography","BODY_LARGE","Link","LINK_LARGE","target","text","IconButton","priority","formatMessage","closeBtnMessages","ariaLabel","Cross"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Nudge.mjs","sources":["../../src/nudge/Nudge.tsx"],"sourcesContent":["import { Illustration, Assets, type IllustrationNames } from '@wise/art';\nimport { clsx } from 'clsx';\nimport { ReactNode, useEffect, useState, MouseEvent } from 'react';\n\nimport Body from '../body';\nimport { Typography } from '../common';\nimport Link from '../link';\nimport type { AlertAction } from '../alert';\nimport IconButton from '../iconButton';\nimport { Cross } from '@transferwise/icons';\nimport { useIntl } from 'react-intl';\nimport closeBtnMessages from '../common/closeButton/CloseButton.messages';\n\n// WARNING: Changing this will cause nudges to reappear wherever persist nudge is used and privacy team will need to be updated too\nexport const STORAGE_NAME = 'dismissedNudges';\n\nconst getLocalStorage = (): string[] => {\n try {\n const storageItem = localStorage.getItem(STORAGE_NAME);\n\n if (storageItem) {\n const storage: unknown = JSON.parse(storageItem);\n\n if (Array.isArray(storage)) {\n return storage.map((item) => String(item));\n }\n }\n } catch (error) {}\n\n return [];\n};\n\ntype MediaNameType =\n | `${Assets.GLOBE}`\n | `${Assets.LOCK}`\n | `${Assets.WALLET}`\n | `${Assets.GEAR}`\n | `${Assets.INVITE_LETTER}`\n | `${Assets.PERSONAL_CARD}`\n | `${Assets.BUSINESS_CARD}`\n | `${Assets.HEART}`\n | `${Assets.MULTI_CURRENCY}`\n | `${Assets.SHOPPING_BAG}`\n | `${Assets.FLOWER}`\n | `${Assets.GIFT_BOX}`\n | `${Assets.BACKPACK}`;\n\ntype BaseProps = {\n /** @deprecated
|
|
1
|
+
{"version":3,"file":"Nudge.mjs","sources":["../../src/nudge/Nudge.tsx"],"sourcesContent":["import { Illustration, Assets, type IllustrationNames } from '@wise/art';\nimport { clsx } from 'clsx';\nimport { ReactNode, useEffect, useState, MouseEvent } from 'react';\n\nimport Body from '../body';\nimport { Typography } from '../common';\nimport Link from '../link';\nimport type { AlertAction } from '../alert';\nimport IconButton from '../iconButton';\nimport { Cross } from '@transferwise/icons';\nimport { useIntl } from 'react-intl';\nimport closeBtnMessages from '../common/closeButton/CloseButton.messages';\n\n// WARNING: Changing this will cause nudges to reappear wherever persist nudge is used and privacy team will need to be updated too\nexport const STORAGE_NAME = 'dismissedNudges';\n\nconst getLocalStorage = (): string[] => {\n try {\n const storageItem = localStorage.getItem(STORAGE_NAME);\n\n if (storageItem) {\n const storage: unknown = JSON.parse(storageItem);\n\n if (Array.isArray(storage)) {\n return storage.map((item) => String(item));\n }\n }\n } catch (error) {}\n\n return [];\n};\n\ntype MediaNameType =\n | `${Assets.GLOBE}`\n | `${Assets.LOCK}`\n | `${Assets.WALLET}`\n | `${Assets.GEAR}`\n | `${Assets.INVITE_LETTER}`\n | `${Assets.PERSONAL_CARD}`\n | `${Assets.BUSINESS_CARD}`\n | `${Assets.HEART}`\n | `${Assets.MULTI_CURRENCY}`\n | `${Assets.SHOPPING_BAG}`\n | `${Assets.FLOWER}`\n | `${Assets.GIFT_BOX}`\n | `${Assets.BACKPACK}`;\n\ntype BaseProps = {\n /** @deprecated Use `mediaName` property instead. */\n media?: ReactNode;\n /** Media name */\n mediaName?: MediaNameType;\n title: ReactNode;\n link?: ReactNode;\n href?: string;\n onClick?: (event?: MouseEvent<HTMLSpanElement>) => void;\n /** Fired when the user clicks on close button */\n onDismiss?: () => void;\n /** An optional call to action to sit under the main body of the nudge. If your label is short, use aria-label to provide more context */\n action?: AlertAction;\n className?: string;\n};\n\nexport interface OptionalId extends BaseProps {\n id?: string;\n persistDismissal?: false;\n isPreviouslyDismissed?: undefined;\n}\n\nexport interface RequiredPersistProps extends BaseProps {\n /** This ID should be completely unique to the page and feature as it uses a shared array which could conflict with other nudges in Wise */\n id: string;\n /** Use persist dismissal to keep the nudge dismissed using the browser's localStorage */\n persistDismissal: true;\n /**\n * Fired on mount for determining if nudge has been dismissed before\n *\n * @param {boolean} value - set to true if dismissed previously\n */\n isPreviouslyDismissed?: (value: boolean) => void;\n}\n\nexport type Props = OptionalId | RequiredPersistProps;\n\nconst Nudge = ({\n mediaName,\n title,\n link,\n href,\n onClick,\n onDismiss,\n persistDismissal,\n isPreviouslyDismissed,\n id,\n className,\n action,\n}: Props) => {\n const intl = useIntl();\n const [isDismissed, setIsDismissed] = useState(false);\n const [isMounted, setIsMounted] = useState(false);\n\n const handleOnDismiss = () => {\n const dismissedNudgesStorage = getLocalStorage();\n\n if (persistDismissal && id) {\n try {\n localStorage.setItem(STORAGE_NAME, JSON.stringify([...dismissedNudgesStorage, id]));\n } catch (error) {}\n\n setIsDismissed(true);\n }\n\n if (onDismiss) {\n onDismiss();\n }\n };\n\n useEffect(() => {\n if (persistDismissal && id) {\n const dismissedNudgesStorage = getLocalStorage();\n let isDismissed = false;\n\n if (dismissedNudgesStorage?.find((item) => item === id)) {\n setIsDismissed(true);\n isDismissed = true;\n }\n\n if (isPreviouslyDismissed) {\n isPreviouslyDismissed(isDismissed);\n }\n }\n\n setIsMounted(true);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [id, persistDismissal]);\n\n if (persistDismissal && (isDismissed || !isMounted)) {\n return null;\n }\n\n return (\n <div className={clsx('wds-nudge', className)} id={id}>\n {!!mediaName && (\n <div className=\"wds-nudge-media\">\n <Illustration\n name={mediaName as IllustrationNames}\n className={clsx(`wds-nudge-media-${mediaName}`)}\n size=\"small\"\n disablePadding\n alt=\"\"\n />\n </div>\n )}\n <div className=\"wds-nudge-container\">\n <div className=\"wds-nudge-content\">\n <Body type={Typography.BODY_LARGE} className={clsx('wds-nudge-body')}>\n {title}\n </Body>\n {/* Merge these two Link instances into one */}\n {link && (\n <Link\n href={href}\n type={Typography.LINK_LARGE}\n className=\"wds-nudge-link\"\n onClick={onClick}\n >\n {link}\n </Link>\n )}\n {action && (\n <Link\n href={action.href}\n target={action.target}\n className=\"m-t-1\"\n aria-label={action['aria-label']}\n type={Typography.LINK_LARGE}\n onClick={action.onClick}\n >\n {action.text}\n </Link>\n )}\n </div>\n {onDismiss || persistDismissal ? (\n <IconButton\n size={24}\n priority=\"tertiary\"\n aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}\n onClick={handleOnDismiss}\n >\n <Cross />\n </IconButton>\n ) : null}\n </div>\n </div>\n );\n};\n\nexport default Nudge;\n"],"names":["STORAGE_NAME","getLocalStorage","storageItem","localStorage","getItem","storage","JSON","parse","Array","isArray","map","item","String","error","Nudge","mediaName","title","link","href","onClick","onDismiss","persistDismissal","isPreviouslyDismissed","id","className","action","intl","useIntl","isDismissed","setIsDismissed","useState","isMounted","setIsMounted","handleOnDismiss","dismissedNudgesStorage","setItem","stringify","useEffect","find","_jsxs","clsx","children","_jsx","Illustration","name","size","disablePadding","alt","Body","type","Typography","BODY_LARGE","Link","LINK_LARGE","target","text","IconButton","priority","formatMessage","closeBtnMessages","ariaLabel","Cross"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcO,MAAMA,YAAY,GAAG;AAE5B,MAAMC,eAAe,GAAGA,MAAe;EACrC,IAAI;AACF,IAAA,MAAMC,WAAW,GAAGC,YAAY,CAACC,OAAO,CAACJ,YAAY,CAAC;AAEtD,IAAA,IAAIE,WAAW,EAAE;AACf,MAAA,MAAMG,OAAO,GAAYC,IAAI,CAACC,KAAK,CAACL,WAAW,CAAC;AAEhD,MAAA,IAAIM,KAAK,CAACC,OAAO,CAACJ,OAAO,CAAC,EAAE;QAC1B,OAAOA,OAAO,CAACK,GAAG,CAAEC,IAAI,IAAKC,MAAM,CAACD,IAAI,CAAC,CAAC;AAC5C,MAAA;AACF,IAAA;AACF,EAAA,CAAC,CAAC,OAAOE,KAAK,EAAE,CAAC;AAEjB,EAAA,OAAO,EAAE;AACX,CAAC;AAsDD,MAAMC,KAAK,GAAGA,CAAC;EACbC,SAAS;EACTC,KAAK;EACLC,IAAI;EACJC,IAAI;EACJC,OAAO;EACPC,SAAS;EACTC,gBAAgB;EAChBC,qBAAqB;EACrBC,EAAE;EACFC,SAAS;AACTC,EAAAA;AAAM,CACA,KAAI;AACV,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE;EACtB,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC;EACrD,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGF,QAAQ,CAAC,KAAK,CAAC;EAEjD,MAAMG,eAAe,GAAGA,MAAK;AAC3B,IAAA,MAAMC,sBAAsB,GAAGjC,eAAe,EAAE;IAEhD,IAAIoB,gBAAgB,IAAIE,EAAE,EAAE;MAC1B,IAAI;AACFpB,QAAAA,YAAY,CAACgC,OAAO,CAACnC,YAAY,EAAEM,IAAI,CAAC8B,SAAS,CAAC,CAAC,GAAGF,sBAAsB,EAAEX,EAAE,CAAC,CAAC,CAAC;AACrF,MAAA,CAAC,CAAC,OAAOV,KAAK,EAAE,CAAC;MAEjBgB,cAAc,CAAC,IAAI,CAAC;AACtB,IAAA;AAEA,IAAA,IAAIT,SAAS,EAAE;AACbA,MAAAA,SAAS,EAAE;AACb,IAAA;EACF,CAAC;AAEDiB,EAAAA,SAAS,CAAC,MAAK;IACb,IAAIhB,gBAAgB,IAAIE,EAAE,EAAE;AAC1B,MAAA,MAAMW,sBAAsB,GAAGjC,eAAe,EAAE;MAChD,IAAI2B,WAAW,GAAG,KAAK;MAEvB,IAAIM,sBAAsB,EAAEI,IAAI,CAAE3B,IAAI,IAAKA,IAAI,KAAKY,EAAE,CAAC,EAAE;QACvDM,cAAc,CAAC,IAAI,CAAC;AACpBD,QAAAA,WAAW,GAAG,IAAI;AACpB,MAAA;AAEA,MAAA,IAAIN,qBAAqB,EAAE;QACzBA,qBAAqB,CAACM,WAAW,CAAC;AACpC,MAAA;AACF,IAAA;IAEAI,YAAY,CAAC,IAAI,CAAC;AAClB;AACF,EAAA,CAAC,EAAE,CAACT,EAAE,EAAEF,gBAAgB,CAAC,CAAC;AAE1B,EAAA,IAAIA,gBAAgB,KAAKO,WAAW,IAAI,CAACG,SAAS,CAAC,EAAE;AACnD,IAAA,OAAO,IAAI;AACb,EAAA;AAEA,EAAA,oBACEQ,IAAA,CAAA,KAAA,EAAA;AAAKf,IAAAA,SAAS,EAAEgB,IAAI,CAAC,WAAW,EAAEhB,SAAS,CAAE;AAACD,IAAAA,EAAE,EAAEA,EAAG;AAAAkB,IAAAA,QAAA,EAAA,CAClD,CAAC,CAAC1B,SAAS,iBACV2B,GAAA,CAAA,KAAA,EAAA;AAAKlB,MAAAA,SAAS,EAAC,iBAAiB;MAAAiB,QAAA,eAC9BC,GAAA,CAACC,YAAY,EAAA;AACXC,QAAAA,IAAI,EAAE7B,SAA+B;AACrCS,QAAAA,SAAS,EAAEgB,IAAI,CAAC,CAAA,gBAAA,EAAmBzB,SAAS,EAAE,CAAE;AAChD8B,QAAAA,IAAI,EAAC,OAAO;QACZC,cAAc,EAAA,IAAA;AACdC,QAAAA,GAAG,EAAC;OAAE;KAEL,CACN,eACDR,IAAA,CAAA,KAAA,EAAA;AAAKf,MAAAA,SAAS,EAAC,qBAAqB;AAAAiB,MAAAA,QAAA,gBAClCF,IAAA,CAAA,KAAA,EAAA;AAAKf,QAAAA,SAAS,EAAC,mBAAmB;QAAAiB,QAAA,EAAA,cAChCC,GAAA,CAACM,IAAI,EAAA;UAACC,IAAI,EAAEC,UAAU,CAACC,UAAW;AAAC3B,UAAAA,SAAS,EAAEgB,IAAI,CAAC,gBAAgB,CAAE;AAAAC,UAAAA,QAAA,EAClEzB;AAAK,SACF,CACN,EACCC,IAAI,iBACHyB,GAAA,CAACU,IAAI,EAAA;AACHlC,UAAAA,IAAI,EAAEA,IAAK;UACX+B,IAAI,EAAEC,UAAU,CAACG,UAAW;AAC5B7B,UAAAA,SAAS,EAAC,gBAAgB;AAC1BL,UAAAA,OAAO,EAAEA,OAAQ;AAAAsB,UAAAA,QAAA,EAEhBxB;AAAI,SACD,CACP,EACAQ,MAAM,iBACLiB,GAAA,CAACU,IAAI,EAAA;UACHlC,IAAI,EAAEO,MAAM,CAACP,IAAK;UAClBoC,MAAM,EAAE7B,MAAM,CAAC6B,MAAO;AACtB9B,UAAAA,SAAS,EAAC,OAAO;UACjB,YAAA,EAAYC,MAAM,CAAC,YAAY,CAAE;UACjCwB,IAAI,EAAEC,UAAU,CAACG,UAAW;UAC5BlC,OAAO,EAAEM,MAAM,CAACN,OAAQ;UAAAsB,QAAA,EAEvBhB,MAAM,CAAC8B;AAAI,SACR,CACP;OACE,CACL,EAACnC,SAAS,IAAIC,gBAAgB,gBAC5BqB,GAAA,CAACc,UAAU,EAAA;AACTX,QAAAA,IAAI,EAAE,EAAG;AACTY,QAAAA,QAAQ,EAAC,UAAU;AACnB,QAAA,YAAA,EAAY/B,IAAI,CAACgC,aAAa,CAACC,gBAAgB,CAACC,SAAS,CAAE;AAC3DzC,QAAAA,OAAO,EAAEc,eAAgB;AAAAQ,QAAAA,QAAA,eAEzBC,GAAA,CAACmB,KAAK,EAAA,EAAA;OACI,CAAC,GACX,IAAI;AAAA,KACL,CACP;AAAA,GAAK,CAAC;AAEV;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PhoneNumberInput.js","sources":["../../src/phoneNumberInput/PhoneNumberInput.tsx"],"sourcesContent":["import { useState, useEffect, useMemo, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, SizeLarge, SizeMedium, SizeSmall } from '../common';\nimport { useFieldLabelRef, useInputAttributes } from '../inputs/contexts';\nimport { SelectInput, SelectInputOptionContent, SelectInputProps } from '../inputs/SelectInput';\nimport messages from './PhoneNumberInput.messages';\nimport countries from './data/countries';\nimport {\n explodeNumberModel,\n isValidPhoneNumber,\n cleanNumber,\n setDefaultPrefix,\n sortArrayByProperty,\n groupCountriesByPrefix,\n excludeCountries,\n findCountryByPrefix,\n} from './utils';\nimport { PhoneNumber } from './utils/explodeNumberModel';\nimport { Input } from '../inputs/Input';\n\nconst ALLOWED_PHONE_CHARS = /^$|^[\\d-\\s]+$/;\n\nexport interface PhoneNumberInputProps {\n id?: string;\n 'aria-labelledby'?: string;\n required?: boolean;\n disabled?: boolean;\n initialValue?: string;\n onChange: (value: string | null, prefix: string) => void;\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n onBlur?: () => void;\n countryCode?: string;\n searchPlaceholder?: string;\n size?: SizeSmall | SizeMedium | SizeLarge;\n placeholder?: string;\n selectProps?: Partial<SelectInputProps<string | null>>;\n /** List of iso3 codes of countries to remove from the list */\n disabledCountries?: readonly string[];\n}\n\nconst defaultSelectProps = {} satisfies PhoneNumberInputProps['selectProps'];\nconst defaultDisabledCountries = [] satisfies PhoneNumberInputProps['disabledCountries'];\n\nconst PhoneNumberInput = ({\n id,\n 'aria-labelledby': ariaLabelledByProp,\n required,\n disabled,\n initialValue,\n onChange,\n onFocus,\n onBlur,\n countryCode,\n searchPlaceholder = 'Prefix',\n size = Size.MEDIUM,\n placeholder,\n selectProps = defaultSelectProps,\n disabledCountries = defaultDisabledCountries,\n}: PhoneNumberInputProps) => {\n const countryCodeSelectRef = useRef<HTMLButtonElement>(null);\n const phoneNumberInputRef = useRef<HTMLInputElement>(null);\n const inputAttributes = useInputAttributes({ nonLabelable: true });\n const fieldLabelRef = useFieldLabelRef();\n const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes['aria-labelledby'];\n\n const { locale, formatMessage } = useIntl();\n\n const createId = (customID: string | undefined, backup: string): string => {\n if (customID) {\n return customID + (backup ? `-${backup}` : '');\n }\n const random = Math.random().toString(36).slice(2, 8);\n return `${backup}-${random}`;\n };\n\n // Link the first non-disabled input to the the Field label, if present\n const ids = {\n countryCode: {\n label: createId(id, 'country-code-label'),\n select: createId(id, 'country-code-select'),\n },\n phoneNumber: {\n label: createId(id, 'phone-number-label'),\n input: createId(id, id ? '' : 'phone-number-input'),\n },\n };\n\n const [internalValue, setInternalValue] = useState<PhoneNumber>(() => {\n const cleanValue = initialValue ? cleanNumber(initialValue) : null;\n\n if (!cleanValue || !isValidPhoneNumber(cleanValue, 1)) {\n return {\n prefix: setDefaultPrefix(locale, countryCode),\n suffix: '',\n };\n }\n\n return explodeNumberModel(cleanValue);\n });\n const [broadcastedValue, setBroadcastedValue] = useState<PhoneNumber | null>(null);\n\n const [suffixDirty, setSuffixDirty] = useState(false);\n useEffect(() => {\n if (internalValue.suffix) {\n setSuffixDirty(true);\n }\n }, [internalValue.suffix]);\n\n const countriesByPrefix = useMemo(\n () =>\n groupCountriesByPrefix(\n sortArrayByProperty(excludeCountries(countries, disabledCountries), 'iso3'),\n ),\n [disabledCountries],\n );\n\n const onSuffixChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {\n const suffix = event.target.value;\n if (ALLOWED_PHONE_CHARS.test(suffix)) {\n setInternalValue((prev) => ({ ...prev, suffix }));\n }\n };\n\n const onPaste: React.ClipboardEventHandler<HTMLInputElement> = (event) => {\n if (!event.nativeEvent.clipboardData) {\n return;\n }\n\n const pastedValue = (event.nativeEvent.clipboardData.getData('text/plain') || '').replace(\n /(\\s|-)+/g,\n '',\n );\n const pastedNumber = explodeNumberModel(pastedValue);\n\n if (\n pastedNumber.prefix != null &&\n countriesByPrefix.has(pastedNumber.prefix) &&\n ALLOWED_PHONE_CHARS.test(pastedNumber.suffix)\n ) {\n setInternalValue(pastedNumber);\n }\n };\n\n useEffect(() => {\n if (broadcastedValue === null) {\n setBroadcastedValue(internalValue);\n return;\n }\n\n const internalPhoneNumber = `${internalValue.prefix ?? ''}${internalValue.suffix}`;\n const broadcastedPhoneNumber = `${broadcastedValue.prefix ?? ''}${broadcastedValue.suffix}`;\n\n if (internalPhoneNumber === broadcastedPhoneNumber) {\n return;\n }\n\n const newValue = isValidPhoneNumber(internalPhoneNumber)\n ? cleanNumber(internalPhoneNumber)\n : null;\n\n onChange(\n newValue,\n internalValue.prefix ?? '', // TODO: Allow `null` in public API\n );\n setBroadcastedValue(internalValue);\n }, [onChange, broadcastedValue, internalValue]);\n\n useEffect(() => {\n const labelRef = fieldLabelRef?.current;\n\n if (labelRef) {\n const handleLabelClick = () => {\n if (!selectProps.disabled) {\n countryCodeSelectRef.current?.click();\n } else {\n phoneNumberInputRef.current?.focus();\n }\n };\n\n labelRef.addEventListener('click', handleLabelClick);\n\n return () => {\n labelRef?.removeEventListener('click', handleLabelClick);\n };\n }\n }, [fieldLabelRef, selectProps.disabled]);\n\n return (\n <fieldset {...inputAttributes} aria-labelledby={ariaLabelledBy} className=\"tw-telephone\">\n <label className=\"sr-only\" id={ids.countryCode.label} htmlFor={ids.countryCode.select}>\n {formatMessage(messages.countryCodeLabel)}\n </label>\n <div className=\"tw-telephone__country-select\">\n <SelectInput\n triggerRef={countryCodeSelectRef}\n placeholder={formatMessage(messages.selectInputPlaceholder)}\n items={[...countriesByPrefix].map(([prefix, countries]) => ({\n type: 'option',\n value: prefix,\n filterMatchers: [\n prefix,\n ...countries.map((country) => country.name),\n ...countries.map((country) => country.iso3),\n ],\n }))}\n value={internalValue.prefix}\n renderValue={(prefix, withinTrigger) => (\n <SelectInputOptionContent\n title={prefix}\n note={\n withinTrigger\n ? undefined\n : countriesByPrefix\n .get(prefix)\n ?.map((country) => country.iso3)\n .join(', ')\n }\n />\n )}\n filterable\n filterPlaceholder={searchPlaceholder}\n disabled={disabled}\n size={size}\n id={ids.countryCode.select}\n UNSAFE_triggerButtonProps={{\n id: ids.countryCode.select,\n 'aria-labelledby': ids.countryCode.label,\n 'aria-describedby': undefined,\n 'aria-invalid': undefined,\n }}\n onChange={(prefix) => {\n const country = prefix != null ? findCountryByPrefix(prefix) : null;\n setInternalValue((prev) => ({ ...prev, prefix, format: country?.phoneFormat }));\n }}\n onClose={() => {\n if (suffixDirty) {\n onBlur?.();\n }\n }}\n {...selectProps}\n />\n </div>\n <label className=\"sr-only\" id={ids.phoneNumber.label} htmlFor={ids.phoneNumber.input}>\n {formatMessage(messages.phoneNumberLabel)}\n </label>\n <div className=\"tw-telephone__number-input\">\n <div className={`input-group input-group-${size} ${disabled ? 'disabled' : ''}`}>\n <Input\n ref={phoneNumberInputRef}\n id={ids.phoneNumber.input}\n autoComplete=\"tel-national\"\n name=\"phoneNumber\"\n inputMode=\"numeric\"\n value={internalValue.suffix}\n disabled={disabled}\n required={required}\n placeholder={placeholder}\n aria-labelledby={ids.phoneNumber.label}\n onChange={onSuffixChange}\n onPaste={onPaste}\n onFocus={onFocus}\n onBlur={() => onBlur?.()}\n />\n </div>\n </div>\n </fieldset>\n );\n};\n\nexport default PhoneNumberInput;\n"],"names":["ALLOWED_PHONE_CHARS","defaultSelectProps","defaultDisabledCountries","PhoneNumberInput","id","ariaLabelledByProp","required","disabled","initialValue","onChange","onFocus","onBlur","countryCode","searchPlaceholder","size","Size","MEDIUM","placeholder","selectProps","disabledCountries","countryCodeSelectRef","useRef","phoneNumberInputRef","inputAttributes","useInputAttributes","nonLabelable","fieldLabelRef","useFieldLabelRef","ariaLabelledBy","locale","formatMessage","useIntl","createId","customID","backup","random","Math","toString","slice","ids","label","select","phoneNumber","input","internalValue","setInternalValue","useState","cleanValue","cleanNumber","isValidPhoneNumber","prefix","setDefaultPrefix","suffix","explodeNumberModel","broadcastedValue","setBroadcastedValue","suffixDirty","setSuffixDirty","useEffect","countriesByPrefix","useMemo","groupCountriesByPrefix","sortArrayByProperty","excludeCountries","countries","onSuffixChange","event","target","value","test","prev","onPaste","nativeEvent","clipboardData","pastedValue","getData","replace","pastedNumber","has","internalPhoneNumber","broadcastedPhoneNumber","newValue","labelRef","current","handleLabelClick","click","focus","addEventListener","removeEventListener","_jsxs","className","children","_jsx","htmlFor","messages","countryCodeLabel","SelectInput","triggerRef","selectInputPlaceholder","items","map","type","filterMatchers","country","name","iso3","renderValue","withinTrigger","SelectInputOptionContent","title","note","undefined","get","join","filterable","filterPlaceholder","UNSAFE_triggerButtonProps","findCountryByPrefix","format","phoneFormat","onClose","phoneNumberLabel","Input","ref","autoComplete","inputMode"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"PhoneNumberInput.js","sources":["../../src/phoneNumberInput/PhoneNumberInput.tsx"],"sourcesContent":["import { useState, useEffect, useMemo, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, SizeLarge, SizeMedium, SizeSmall } from '../common';\nimport { useFieldLabelRef, useInputAttributes } from '../inputs/contexts';\nimport { SelectInput, SelectInputOptionContent, SelectInputProps } from '../inputs/SelectInput';\nimport messages from './PhoneNumberInput.messages';\nimport countries from './data/countries';\nimport {\n explodeNumberModel,\n isValidPhoneNumber,\n cleanNumber,\n setDefaultPrefix,\n sortArrayByProperty,\n groupCountriesByPrefix,\n excludeCountries,\n findCountryByPrefix,\n} from './utils';\nimport { PhoneNumber } from './utils/explodeNumberModel';\nimport { Input } from '../inputs/Input';\n\nconst ALLOWED_PHONE_CHARS = /^$|^[\\d-\\s]+$/;\n\nexport interface PhoneNumberInputProps {\n id?: string;\n 'aria-labelledby'?: string;\n required?: boolean;\n disabled?: boolean;\n initialValue?: string;\n onChange: (value: string | null, prefix: string) => void;\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n onBlur?: () => void;\n countryCode?: string;\n /** @default 'Prefix' */\n searchPlaceholder?: string;\n /** @default 'md' */\n size?: SizeSmall | SizeMedium | SizeLarge;\n placeholder?: string;\n /** @default {} */\n selectProps?: Partial<SelectInputProps<string | null>>;\n /**\n * List of iso3 codes of countries to remove from the list\n * @default []\n */\n disabledCountries?: readonly string[];\n}\n\nconst defaultSelectProps = {} satisfies PhoneNumberInputProps['selectProps'];\nconst defaultDisabledCountries = [] satisfies PhoneNumberInputProps['disabledCountries'];\n\nconst PhoneNumberInput = ({\n id,\n 'aria-labelledby': ariaLabelledByProp,\n required,\n disabled,\n initialValue,\n onChange,\n onFocus,\n onBlur,\n countryCode,\n searchPlaceholder = 'Prefix',\n size = Size.MEDIUM,\n placeholder,\n selectProps = defaultSelectProps,\n disabledCountries = defaultDisabledCountries,\n}: PhoneNumberInputProps) => {\n const countryCodeSelectRef = useRef<HTMLButtonElement>(null);\n const phoneNumberInputRef = useRef<HTMLInputElement>(null);\n const inputAttributes = useInputAttributes({ nonLabelable: true });\n const fieldLabelRef = useFieldLabelRef();\n const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes['aria-labelledby'];\n\n const { locale, formatMessage } = useIntl();\n\n const createId = (customID: string | undefined, backup: string): string => {\n if (customID) {\n return customID + (backup ? `-${backup}` : '');\n }\n const random = Math.random().toString(36).slice(2, 8);\n return `${backup}-${random}`;\n };\n\n // Link the first non-disabled input to the the Field label, if present\n const ids = {\n countryCode: {\n label: createId(id, 'country-code-label'),\n select: createId(id, 'country-code-select'),\n },\n phoneNumber: {\n label: createId(id, 'phone-number-label'),\n input: createId(id, id ? '' : 'phone-number-input'),\n },\n };\n\n const [internalValue, setInternalValue] = useState<PhoneNumber>(() => {\n const cleanValue = initialValue ? cleanNumber(initialValue) : null;\n\n if (!cleanValue || !isValidPhoneNumber(cleanValue, 1)) {\n return {\n prefix: setDefaultPrefix(locale, countryCode),\n suffix: '',\n };\n }\n\n return explodeNumberModel(cleanValue);\n });\n const [broadcastedValue, setBroadcastedValue] = useState<PhoneNumber | null>(null);\n\n const [suffixDirty, setSuffixDirty] = useState(false);\n useEffect(() => {\n if (internalValue.suffix) {\n setSuffixDirty(true);\n }\n }, [internalValue.suffix]);\n\n const countriesByPrefix = useMemo(\n () =>\n groupCountriesByPrefix(\n sortArrayByProperty(excludeCountries(countries, disabledCountries), 'iso3'),\n ),\n [disabledCountries],\n );\n\n const onSuffixChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {\n const suffix = event.target.value;\n if (ALLOWED_PHONE_CHARS.test(suffix)) {\n setInternalValue((prev) => ({ ...prev, suffix }));\n }\n };\n\n const onPaste: React.ClipboardEventHandler<HTMLInputElement> = (event) => {\n if (!event.nativeEvent.clipboardData) {\n return;\n }\n\n const pastedValue = (event.nativeEvent.clipboardData.getData('text/plain') || '').replace(\n /(\\s|-)+/g,\n '',\n );\n const pastedNumber = explodeNumberModel(pastedValue);\n\n if (\n pastedNumber.prefix != null &&\n countriesByPrefix.has(pastedNumber.prefix) &&\n ALLOWED_PHONE_CHARS.test(pastedNumber.suffix)\n ) {\n setInternalValue(pastedNumber);\n }\n };\n\n useEffect(() => {\n if (broadcastedValue === null) {\n setBroadcastedValue(internalValue);\n return;\n }\n\n const internalPhoneNumber = `${internalValue.prefix ?? ''}${internalValue.suffix}`;\n const broadcastedPhoneNumber = `${broadcastedValue.prefix ?? ''}${broadcastedValue.suffix}`;\n\n if (internalPhoneNumber === broadcastedPhoneNumber) {\n return;\n }\n\n const newValue = isValidPhoneNumber(internalPhoneNumber)\n ? cleanNumber(internalPhoneNumber)\n : null;\n\n onChange(\n newValue,\n internalValue.prefix ?? '', // TODO: Allow `null` in public API\n );\n setBroadcastedValue(internalValue);\n }, [onChange, broadcastedValue, internalValue]);\n\n useEffect(() => {\n const labelRef = fieldLabelRef?.current;\n\n if (labelRef) {\n const handleLabelClick = () => {\n if (!selectProps.disabled) {\n countryCodeSelectRef.current?.click();\n } else {\n phoneNumberInputRef.current?.focus();\n }\n };\n\n labelRef.addEventListener('click', handleLabelClick);\n\n return () => {\n labelRef?.removeEventListener('click', handleLabelClick);\n };\n }\n }, [fieldLabelRef, selectProps.disabled]);\n\n return (\n <fieldset {...inputAttributes} aria-labelledby={ariaLabelledBy} className=\"tw-telephone\">\n <label className=\"sr-only\" id={ids.countryCode.label} htmlFor={ids.countryCode.select}>\n {formatMessage(messages.countryCodeLabel)}\n </label>\n <div className=\"tw-telephone__country-select\">\n <SelectInput\n triggerRef={countryCodeSelectRef}\n placeholder={formatMessage(messages.selectInputPlaceholder)}\n items={[...countriesByPrefix].map(([prefix, countries]) => ({\n type: 'option',\n value: prefix,\n filterMatchers: [\n prefix,\n ...countries.map((country) => country.name),\n ...countries.map((country) => country.iso3),\n ],\n }))}\n value={internalValue.prefix}\n renderValue={(prefix, withinTrigger) => (\n <SelectInputOptionContent\n title={prefix}\n note={\n withinTrigger\n ? undefined\n : countriesByPrefix\n .get(prefix)\n ?.map((country) => country.iso3)\n .join(', ')\n }\n />\n )}\n filterable\n filterPlaceholder={searchPlaceholder}\n disabled={disabled}\n size={size}\n id={ids.countryCode.select}\n UNSAFE_triggerButtonProps={{\n id: ids.countryCode.select,\n 'aria-labelledby': ids.countryCode.label,\n 'aria-describedby': undefined,\n 'aria-invalid': undefined,\n }}\n onChange={(prefix) => {\n const country = prefix != null ? findCountryByPrefix(prefix) : null;\n setInternalValue((prev) => ({ ...prev, prefix, format: country?.phoneFormat }));\n }}\n onClose={() => {\n if (suffixDirty) {\n onBlur?.();\n }\n }}\n {...selectProps}\n />\n </div>\n <label className=\"sr-only\" id={ids.phoneNumber.label} htmlFor={ids.phoneNumber.input}>\n {formatMessage(messages.phoneNumberLabel)}\n </label>\n <div className=\"tw-telephone__number-input\">\n <div className={`input-group input-group-${size} ${disabled ? 'disabled' : ''}`}>\n <Input\n ref={phoneNumberInputRef}\n id={ids.phoneNumber.input}\n autoComplete=\"tel-national\"\n name=\"phoneNumber\"\n inputMode=\"numeric\"\n value={internalValue.suffix}\n disabled={disabled}\n required={required}\n placeholder={placeholder}\n aria-labelledby={ids.phoneNumber.label}\n onChange={onSuffixChange}\n onPaste={onPaste}\n onFocus={onFocus}\n onBlur={() => onBlur?.()}\n />\n </div>\n </div>\n </fieldset>\n );\n};\n\nexport default PhoneNumberInput;\n"],"names":["ALLOWED_PHONE_CHARS","defaultSelectProps","defaultDisabledCountries","PhoneNumberInput","id","ariaLabelledByProp","required","disabled","initialValue","onChange","onFocus","onBlur","countryCode","searchPlaceholder","size","Size","MEDIUM","placeholder","selectProps","disabledCountries","countryCodeSelectRef","useRef","phoneNumberInputRef","inputAttributes","useInputAttributes","nonLabelable","fieldLabelRef","useFieldLabelRef","ariaLabelledBy","locale","formatMessage","useIntl","createId","customID","backup","random","Math","toString","slice","ids","label","select","phoneNumber","input","internalValue","setInternalValue","useState","cleanValue","cleanNumber","isValidPhoneNumber","prefix","setDefaultPrefix","suffix","explodeNumberModel","broadcastedValue","setBroadcastedValue","suffixDirty","setSuffixDirty","useEffect","countriesByPrefix","useMemo","groupCountriesByPrefix","sortArrayByProperty","excludeCountries","countries","onSuffixChange","event","target","value","test","prev","onPaste","nativeEvent","clipboardData","pastedValue","getData","replace","pastedNumber","has","internalPhoneNumber","broadcastedPhoneNumber","newValue","labelRef","current","handleLabelClick","click","focus","addEventListener","removeEventListener","_jsxs","className","children","_jsx","htmlFor","messages","countryCodeLabel","SelectInput","triggerRef","selectInputPlaceholder","items","map","type","filterMatchers","country","name","iso3","renderValue","withinTrigger","SelectInputOptionContent","title","note","undefined","get","join","filterable","filterPlaceholder","UNSAFE_triggerButtonProps","findCountryByPrefix","format","phoneFormat","onClose","phoneNumberLabel","Input","ref","autoComplete","inputMode"],"mappings":"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"}
|