@transferwise/components 46.130.0 → 46.130.2
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 +5 -2
- package/build/alert/Alert.js.map +1 -1
- package/build/alert/Alert.mjs +5 -2
- 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/criticalBanner/CriticalCommsBanner.js +6 -4
- package/build/criticalBanner/CriticalCommsBanner.js.map +1 -1
- package/build/criticalBanner/CriticalCommsBanner.mjs +6 -4
- package/build/criticalBanner/CriticalCommsBanner.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 +45 -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/criticalBanner/CriticalCommsBanner.css +9 -0
- package/build/styles/main.css +45 -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 +7 -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/criticalBanner/CriticalCommsBanner.d.ts +1 -0
- package/build/types/criticalBanner/CriticalCommsBanner.d.ts.map +1 -1
- 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 +11 -3
- 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/criticalBanner/CriticalCommsBanner.css +9 -0
- package/src/criticalBanner/CriticalCommsBanner.less +13 -0
- package/src/criticalBanner/CriticalCommsBanner.test.story.tsx +15 -0
- package/src/criticalBanner/CriticalCommsBanner.test.tsx +28 -2
- package/src/criticalBanner/CriticalCommsBanner.tsx +10 -1
- 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 +45 -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":"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":"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"}
|
|
@@ -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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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PhoneNumberInput.mjs","sources":["../../src/phoneNumberInput/PhoneNumberInput.tsx"],"sourcesContent":["import { useState, useEffect, useMemo, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, SizeLarge, SizeMedium, SizeSmall } from '../common';\nimport { useFieldLabelRef, useInputAttributes } from '../inputs/contexts';\nimport { 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.mjs","sources":["../../src/phoneNumberInput/PhoneNumberInput.tsx"],"sourcesContent":["import { useState, useEffect, useMemo, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, SizeLarge, SizeMedium, SizeSmall } from '../common';\nimport { useFieldLabelRef, useInputAttributes } from '../inputs/contexts';\nimport { 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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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.js","sources":["../../src/popover/Popover.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useRef, useState, cloneElement, useEffect, isValidElement, useId } from 'react';\n\nimport { Position, Typography } from '../common';\nimport ResponsivePanel from '../common/responsivePanel';\nimport Title from '../title';\nimport { logActionRequired } from '../utilities';\n\n/** @deprecated Use `\"top\" | \"bottom\"` instead. */\ntype PopoverPreferredPlacementDeprecated =\n | `${Position.LEFT_TOP}`\n | `${Position.RIGHT_TOP}`\n | `${Position.BOTTOM_RIGHT}`\n | `${Position.BOTTOM_LEFT}`;\n\nexport type PopoverPreferredPlacement =\n | `${Position.TOP}`\n | `${Position.RIGHT}`\n | `${Position.BOTTOM}`\n | `${Position.LEFT}`\n | PopoverPreferredPlacementDeprecated;\n\nexport interface PopoverProps {\n children?: React.ReactNode;\n title?: React.ReactNode;\n /** Screen-reader-friendly title. Must be provided if `title` prop is not set. */\n 'aria-label'?: string;\n preferredPlacement?: PopoverPreferredPlacement;\n content: React.ReactNode;\n onClose?: () => void;\n className?: string;\n}\n\nfunction resolvePlacement(preferredPlacement: PopoverPreferredPlacement) {\n switch (preferredPlacement) {\n case 'left-top':\n case 'right-top':\n return 'top';\n case 'bottom-left':\n case 'bottom-right':\n return 'bottom';\n default:\n return preferredPlacement;\n }\n}\n\nexport default function Popover({\n children,\n className,\n content,\n preferredPlacement = Position.RIGHT,\n title,\n onClose,\n 'aria-label': ariaLabel,\n}: PopoverProps) {\n const titleId = useId();\n\n const resolvedPlacement = resolvePlacement(preferredPlacement);\n useEffect(() => {\n if (resolvedPlacement !== preferredPlacement) {\n logActionRequired(\n `Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${resolvedPlacement} instead.`,\n );\n }\n }, [preferredPlacement, resolvedPlacement]);\n\n const anchorReference = useRef(null);\n const [open, setOpen] = useState(false);\n\n const handleOnClose = () => {\n setOpen(false);\n onClose?.();\n };\n\n return (\n <span className={clsx('np-popover', className)}>\n <span ref={anchorReference} className=\"d-inline-block\">\n {isValidElement<{ onClick?: () => void }>(children)\n ? cloneElement(children, {\n onClick: () => {\n children.props.onClick?.();\n setOpen((prevOpen) => !prevOpen);\n },\n })\n : children}\n </span>\n <ResponsivePanel\n aria-label={ariaLabel}\n aria-labelledby={title && !ariaLabel ? titleId : undefined}\n open={open}\n anchorRef={anchorReference}\n position={resolvedPlacement}\n arrow\n className=\"np-popover__container\"\n onClose={handleOnClose}\n >\n <div className=\"np-popover__content np-text-default-body\">\n {title && (\n <Title type={Typography.TITLE_BODY} id={titleId} className=\"m-b-1\">\n {title}\n </Title>\n )}\n {content}\n </div>\n </ResponsivePanel>\n </span>\n );\n}\n"],"names":["resolvePlacement","preferredPlacement","Popover","children","className","content","Position","RIGHT","title","onClose","ariaLabel","titleId","useId","resolvedPlacement","useEffect","logActionRequired","anchorReference","useRef","open","setOpen","useState","handleOnClose","_jsxs","clsx","_jsx","ref","isValidElement","cloneElement","onClick","props","prevOpen","ResponsivePanel","undefined","anchorRef","position","arrow","Title","type","Typography","TITLE_BODY","id"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"Popover.js","sources":["../../src/popover/Popover.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useRef, useState, cloneElement, useEffect, isValidElement, useId } from 'react';\n\nimport { Position, Typography } from '../common';\nimport ResponsivePanel from '../common/responsivePanel';\nimport Title from '../title';\nimport { logActionRequired } from '../utilities';\n\n/** @deprecated Use `\"top\" | \"bottom\"` instead. */\ntype PopoverPreferredPlacementDeprecated =\n | `${Position.LEFT_TOP}`\n | `${Position.RIGHT_TOP}`\n | `${Position.BOTTOM_RIGHT}`\n | `${Position.BOTTOM_LEFT}`;\n\nexport type PopoverPreferredPlacement =\n | `${Position.TOP}`\n | `${Position.RIGHT}`\n | `${Position.BOTTOM}`\n | `${Position.LEFT}`\n | PopoverPreferredPlacementDeprecated;\n\nexport interface PopoverProps {\n children?: React.ReactNode;\n title?: React.ReactNode;\n /** Screen-reader-friendly title. Must be provided if `title` prop is not set. */\n 'aria-label'?: string;\n /** @default 'right' */\n preferredPlacement?: PopoverPreferredPlacement;\n content: React.ReactNode;\n onClose?: () => void;\n className?: string;\n}\n\nfunction resolvePlacement(preferredPlacement: PopoverPreferredPlacement) {\n switch (preferredPlacement) {\n case 'left-top':\n case 'right-top':\n return 'top';\n case 'bottom-left':\n case 'bottom-right':\n return 'bottom';\n default:\n return preferredPlacement;\n }\n}\n\nexport default function Popover({\n children,\n className,\n content,\n preferredPlacement = Position.RIGHT,\n title,\n onClose,\n 'aria-label': ariaLabel,\n}: PopoverProps) {\n const titleId = useId();\n\n const resolvedPlacement = resolvePlacement(preferredPlacement);\n useEffect(() => {\n if (resolvedPlacement !== preferredPlacement) {\n logActionRequired(\n `Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${resolvedPlacement} instead.`,\n );\n }\n }, [preferredPlacement, resolvedPlacement]);\n\n const anchorReference = useRef(null);\n const [open, setOpen] = useState(false);\n\n const handleOnClose = () => {\n setOpen(false);\n onClose?.();\n };\n\n return (\n <span className={clsx('np-popover', className)}>\n <span ref={anchorReference} className=\"d-inline-block\">\n {isValidElement<{ onClick?: () => void }>(children)\n ? cloneElement(children, {\n onClick: () => {\n children.props.onClick?.();\n setOpen((prevOpen) => !prevOpen);\n },\n })\n : children}\n </span>\n <ResponsivePanel\n aria-label={ariaLabel}\n aria-labelledby={title && !ariaLabel ? titleId : undefined}\n open={open}\n anchorRef={anchorReference}\n position={resolvedPlacement}\n arrow\n className=\"np-popover__container\"\n onClose={handleOnClose}\n >\n <div className=\"np-popover__content np-text-default-body\">\n {title && (\n <Title type={Typography.TITLE_BODY} id={titleId} className=\"m-b-1\">\n {title}\n </Title>\n )}\n {content}\n </div>\n </ResponsivePanel>\n </span>\n );\n}\n"],"names":["resolvePlacement","preferredPlacement","Popover","children","className","content","Position","RIGHT","title","onClose","ariaLabel","titleId","useId","resolvedPlacement","useEffect","logActionRequired","anchorReference","useRef","open","setOpen","useState","handleOnClose","_jsxs","clsx","_jsx","ref","isValidElement","cloneElement","onClick","props","prevOpen","ResponsivePanel","undefined","anchorRef","position","arrow","Title","type","Typography","TITLE_BODY","id"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,SAASA,gBAAgBA,CAACC,kBAA6C,EAAA;AACrE,EAAA,QAAQA,kBAAkB;AACxB,IAAA,KAAK,UAAU;AACf,IAAA,KAAK,WAAW;AACd,MAAA,OAAO,KAAK;AACd,IAAA,KAAK,aAAa;AAClB,IAAA,KAAK,cAAc;AACjB,MAAA,OAAO,QAAQ;AACjB,IAAA;AACE,MAAA,OAAOA,kBAAkB;AAC7B;AACF;AAEc,SAAUC,OAAOA,CAAC;EAC9BC,QAAQ;EACRC,SAAS;EACTC,OAAO;EACPJ,kBAAkB,GAAGK,iBAAQ,CAACC,KAAK;EACnCC,KAAK;EACLC,OAAO;AACP,EAAA,YAAY,EAAEC;AAAS,CACV,EAAA;AACb,EAAA,MAAMC,OAAO,GAAGC,WAAK,EAAE;AAEvB,EAAA,MAAMC,iBAAiB,GAAGb,gBAAgB,CAACC,kBAAkB,CAAC;AAC9Da,EAAAA,eAAS,CAAC,MAAK;IACb,IAAID,iBAAiB,KAAKZ,kBAAkB,EAAE;AAC5Cc,MAAAA,mCAAiB,CACf,CAAA,uBAAA,EAA0Bd,kBAAkB,CAAA,qDAAA,EAAwDY,iBAAiB,WAAW,CACjI;AACH,IAAA;AACF,EAAA,CAAC,EAAE,CAACZ,kBAAkB,EAAEY,iBAAiB,CAAC,CAAC;AAE3C,EAAA,MAAMG,eAAe,GAAGC,YAAM,CAAC,IAAI,CAAC;EACpC,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC;EAEvC,MAAMC,aAAa,GAAGA,MAAK;IACzBF,OAAO,CAAC,KAAK,CAAC;AACdV,IAAAA,OAAO,IAAI;EACb,CAAC;AAED,EAAA,oBACEa,eAAA,CAAA,MAAA,EAAA;AAAMlB,IAAAA,SAAS,EAAEmB,SAAI,CAAC,YAAY,EAAEnB,SAAS,CAAE;AAAAD,IAAAA,QAAA,gBAC7CqB,cAAA,CAAA,MAAA,EAAA;AAAMC,MAAAA,GAAG,EAAET,eAAgB;AAACZ,MAAAA,SAAS,EAAC,gBAAgB;MAAAD,QAAA,eACnDuB,oBAAc,CAA2BvB,QAAQ,CAAC,gBAC/CwB,kBAAY,CAACxB,QAAQ,EAAE;QACrByB,OAAO,EAAEA,MAAK;AACZzB,UAAAA,QAAQ,CAAC0B,KAAK,CAACD,OAAO,IAAI;AAC1BT,UAAAA,OAAO,CAAEW,QAAQ,IAAK,CAACA,QAAQ,CAAC;AAClC,QAAA;OACD,CAAC,GACF3B;AAAQ,KACR,CACN,eAAAqB,cAAA,CAACO,uBAAe,EAAA;AACd,MAAA,YAAA,EAAYrB,SAAU;AACtB,MAAA,iBAAA,EAAiBF,KAAK,IAAI,CAACE,SAAS,GAAGC,OAAO,GAAGqB,SAAU;AAC3Dd,MAAAA,IAAI,EAAEA,IAAK;AACXe,MAAAA,SAAS,EAAEjB,eAAgB;AAC3BkB,MAAAA,QAAQ,EAAErB,iBAAkB;MAC5BsB,KAAK,EAAA,IAAA;AACL/B,MAAAA,SAAS,EAAC,uBAAuB;AACjCK,MAAAA,OAAO,EAAEY,aAAc;AAAAlB,MAAAA,QAAA,eAEvBmB,eAAA,CAAA,KAAA,EAAA;AAAKlB,QAAAA,SAAS,EAAC,0CAA0C;AAAAD,QAAAA,QAAA,EAAA,CACtDK,KAAK,iBACJgB,cAAA,CAACY,aAAK,EAAA;UAACC,IAAI,EAAEC,qBAAU,CAACC,UAAW;AAACC,UAAAA,EAAE,EAAE7B,OAAQ;AAACP,UAAAA,SAAS,EAAC,OAAO;AAAAD,UAAAA,QAAA,EAC/DK;SACI,CACR,EACAH,OAAO;OACL;AACP,KAAiB,CACnB;AAAA,GAAM,CAAC;AAEX;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.mjs","sources":["../../src/popover/Popover.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useRef, useState, cloneElement, useEffect, isValidElement, useId } from 'react';\n\nimport { Position, Typography } from '../common';\nimport ResponsivePanel from '../common/responsivePanel';\nimport Title from '../title';\nimport { logActionRequired } from '../utilities';\n\n/** @deprecated Use `\"top\" | \"bottom\"` instead. */\ntype PopoverPreferredPlacementDeprecated =\n | `${Position.LEFT_TOP}`\n | `${Position.RIGHT_TOP}`\n | `${Position.BOTTOM_RIGHT}`\n | `${Position.BOTTOM_LEFT}`;\n\nexport type PopoverPreferredPlacement =\n | `${Position.TOP}`\n | `${Position.RIGHT}`\n | `${Position.BOTTOM}`\n | `${Position.LEFT}`\n | PopoverPreferredPlacementDeprecated;\n\nexport interface PopoverProps {\n children?: React.ReactNode;\n title?: React.ReactNode;\n /** Screen-reader-friendly title. Must be provided if `title` prop is not set. */\n 'aria-label'?: string;\n preferredPlacement?: PopoverPreferredPlacement;\n content: React.ReactNode;\n onClose?: () => void;\n className?: string;\n}\n\nfunction resolvePlacement(preferredPlacement: PopoverPreferredPlacement) {\n switch (preferredPlacement) {\n case 'left-top':\n case 'right-top':\n return 'top';\n case 'bottom-left':\n case 'bottom-right':\n return 'bottom';\n default:\n return preferredPlacement;\n }\n}\n\nexport default function Popover({\n children,\n className,\n content,\n preferredPlacement = Position.RIGHT,\n title,\n onClose,\n 'aria-label': ariaLabel,\n}: PopoverProps) {\n const titleId = useId();\n\n const resolvedPlacement = resolvePlacement(preferredPlacement);\n useEffect(() => {\n if (resolvedPlacement !== preferredPlacement) {\n logActionRequired(\n `Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${resolvedPlacement} instead.`,\n );\n }\n }, [preferredPlacement, resolvedPlacement]);\n\n const anchorReference = useRef(null);\n const [open, setOpen] = useState(false);\n\n const handleOnClose = () => {\n setOpen(false);\n onClose?.();\n };\n\n return (\n <span className={clsx('np-popover', className)}>\n <span ref={anchorReference} className=\"d-inline-block\">\n {isValidElement<{ onClick?: () => void }>(children)\n ? cloneElement(children, {\n onClick: () => {\n children.props.onClick?.();\n setOpen((prevOpen) => !prevOpen);\n },\n })\n : children}\n </span>\n <ResponsivePanel\n aria-label={ariaLabel}\n aria-labelledby={title && !ariaLabel ? titleId : undefined}\n open={open}\n anchorRef={anchorReference}\n position={resolvedPlacement}\n arrow\n className=\"np-popover__container\"\n onClose={handleOnClose}\n >\n <div className=\"np-popover__content np-text-default-body\">\n {title && (\n <Title type={Typography.TITLE_BODY} id={titleId} className=\"m-b-1\">\n {title}\n </Title>\n )}\n {content}\n </div>\n </ResponsivePanel>\n </span>\n );\n}\n"],"names":["resolvePlacement","preferredPlacement","Popover","children","className","content","Position","RIGHT","title","onClose","ariaLabel","titleId","useId","resolvedPlacement","useEffect","logActionRequired","anchorReference","useRef","open","setOpen","useState","handleOnClose","_jsxs","clsx","_jsx","ref","isValidElement","cloneElement","onClick","props","prevOpen","ResponsivePanel","undefined","anchorRef","position","arrow","Title","type","Typography","TITLE_BODY","id"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"Popover.mjs","sources":["../../src/popover/Popover.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useRef, useState, cloneElement, useEffect, isValidElement, useId } from 'react';\n\nimport { Position, Typography } from '../common';\nimport ResponsivePanel from '../common/responsivePanel';\nimport Title from '../title';\nimport { logActionRequired } from '../utilities';\n\n/** @deprecated Use `\"top\" | \"bottom\"` instead. */\ntype PopoverPreferredPlacementDeprecated =\n | `${Position.LEFT_TOP}`\n | `${Position.RIGHT_TOP}`\n | `${Position.BOTTOM_RIGHT}`\n | `${Position.BOTTOM_LEFT}`;\n\nexport type PopoverPreferredPlacement =\n | `${Position.TOP}`\n | `${Position.RIGHT}`\n | `${Position.BOTTOM}`\n | `${Position.LEFT}`\n | PopoverPreferredPlacementDeprecated;\n\nexport interface PopoverProps {\n children?: React.ReactNode;\n title?: React.ReactNode;\n /** Screen-reader-friendly title. Must be provided if `title` prop is not set. */\n 'aria-label'?: string;\n /** @default 'right' */\n preferredPlacement?: PopoverPreferredPlacement;\n content: React.ReactNode;\n onClose?: () => void;\n className?: string;\n}\n\nfunction resolvePlacement(preferredPlacement: PopoverPreferredPlacement) {\n switch (preferredPlacement) {\n case 'left-top':\n case 'right-top':\n return 'top';\n case 'bottom-left':\n case 'bottom-right':\n return 'bottom';\n default:\n return preferredPlacement;\n }\n}\n\nexport default function Popover({\n children,\n className,\n content,\n preferredPlacement = Position.RIGHT,\n title,\n onClose,\n 'aria-label': ariaLabel,\n}: PopoverProps) {\n const titleId = useId();\n\n const resolvedPlacement = resolvePlacement(preferredPlacement);\n useEffect(() => {\n if (resolvedPlacement !== preferredPlacement) {\n logActionRequired(\n `Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${resolvedPlacement} instead.`,\n );\n }\n }, [preferredPlacement, resolvedPlacement]);\n\n const anchorReference = useRef(null);\n const [open, setOpen] = useState(false);\n\n const handleOnClose = () => {\n setOpen(false);\n onClose?.();\n };\n\n return (\n <span className={clsx('np-popover', className)}>\n <span ref={anchorReference} className=\"d-inline-block\">\n {isValidElement<{ onClick?: () => void }>(children)\n ? cloneElement(children, {\n onClick: () => {\n children.props.onClick?.();\n setOpen((prevOpen) => !prevOpen);\n },\n })\n : children}\n </span>\n <ResponsivePanel\n aria-label={ariaLabel}\n aria-labelledby={title && !ariaLabel ? titleId : undefined}\n open={open}\n anchorRef={anchorReference}\n position={resolvedPlacement}\n arrow\n className=\"np-popover__container\"\n onClose={handleOnClose}\n >\n <div className=\"np-popover__content np-text-default-body\">\n {title && (\n <Title type={Typography.TITLE_BODY} id={titleId} className=\"m-b-1\">\n {title}\n </Title>\n )}\n {content}\n </div>\n </ResponsivePanel>\n </span>\n );\n}\n"],"names":["resolvePlacement","preferredPlacement","Popover","children","className","content","Position","RIGHT","title","onClose","ariaLabel","titleId","useId","resolvedPlacement","useEffect","logActionRequired","anchorReference","useRef","open","setOpen","useState","handleOnClose","_jsxs","clsx","_jsx","ref","isValidElement","cloneElement","onClick","props","prevOpen","ResponsivePanel","undefined","anchorRef","position","arrow","Title","type","Typography","TITLE_BODY","id"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,SAASA,gBAAgBA,CAACC,kBAA6C,EAAA;AACrE,EAAA,QAAQA,kBAAkB;AACxB,IAAA,KAAK,UAAU;AACf,IAAA,KAAK,WAAW;AACd,MAAA,OAAO,KAAK;AACd,IAAA,KAAK,aAAa;AAClB,IAAA,KAAK,cAAc;AACjB,MAAA,OAAO,QAAQ;AACjB,IAAA;AACE,MAAA,OAAOA,kBAAkB;AAC7B;AACF;AAEc,SAAUC,OAAOA,CAAC;EAC9BC,QAAQ;EACRC,SAAS;EACTC,OAAO;EACPJ,kBAAkB,GAAGK,QAAQ,CAACC,KAAK;EACnCC,KAAK;EACLC,OAAO;AACP,EAAA,YAAY,EAAEC;AAAS,CACV,EAAA;AACb,EAAA,MAAMC,OAAO,GAAGC,KAAK,EAAE;AAEvB,EAAA,MAAMC,iBAAiB,GAAGb,gBAAgB,CAACC,kBAAkB,CAAC;AAC9Da,EAAAA,SAAS,CAAC,MAAK;IACb,IAAID,iBAAiB,KAAKZ,kBAAkB,EAAE;AAC5Cc,MAAAA,iBAAiB,CACf,CAAA,uBAAA,EAA0Bd,kBAAkB,CAAA,qDAAA,EAAwDY,iBAAiB,WAAW,CACjI;AACH,IAAA;AACF,EAAA,CAAC,EAAE,CAACZ,kBAAkB,EAAEY,iBAAiB,CAAC,CAAC;AAE3C,EAAA,MAAMG,eAAe,GAAGC,MAAM,CAAC,IAAI,CAAC;EACpC,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC;EAEvC,MAAMC,aAAa,GAAGA,MAAK;IACzBF,OAAO,CAAC,KAAK,CAAC;AACdV,IAAAA,OAAO,IAAI;EACb,CAAC;AAED,EAAA,oBACEa,IAAA,CAAA,MAAA,EAAA;AAAMlB,IAAAA,SAAS,EAAEmB,IAAI,CAAC,YAAY,EAAEnB,SAAS,CAAE;AAAAD,IAAAA,QAAA,gBAC7CqB,GAAA,CAAA,MAAA,EAAA;AAAMC,MAAAA,GAAG,EAAET,eAAgB;AAACZ,MAAAA,SAAS,EAAC,gBAAgB;MAAAD,QAAA,eACnDuB,cAAc,CAA2BvB,QAAQ,CAAC,gBAC/CwB,YAAY,CAACxB,QAAQ,EAAE;QACrByB,OAAO,EAAEA,MAAK;AACZzB,UAAAA,QAAQ,CAAC0B,KAAK,CAACD,OAAO,IAAI;AAC1BT,UAAAA,OAAO,CAAEW,QAAQ,IAAK,CAACA,QAAQ,CAAC;AAClC,QAAA;OACD,CAAC,GACF3B;AAAQ,KACR,CACN,eAAAqB,GAAA,CAACO,eAAe,EAAA;AACd,MAAA,YAAA,EAAYrB,SAAU;AACtB,MAAA,iBAAA,EAAiBF,KAAK,IAAI,CAACE,SAAS,GAAGC,OAAO,GAAGqB,SAAU;AAC3Dd,MAAAA,IAAI,EAAEA,IAAK;AACXe,MAAAA,SAAS,EAAEjB,eAAgB;AAC3BkB,MAAAA,QAAQ,EAAErB,iBAAkB;MAC5BsB,KAAK,EAAA,IAAA;AACL/B,MAAAA,SAAS,EAAC,uBAAuB;AACjCK,MAAAA,OAAO,EAAEY,aAAc;AAAAlB,MAAAA,QAAA,eAEvBmB,IAAA,CAAA,KAAA,EAAA;AAAKlB,QAAAA,SAAS,EAAC,0CAA0C;AAAAD,QAAAA,QAAA,EAAA,CACtDK,KAAK,iBACJgB,GAAA,CAACY,KAAK,EAAA;UAACC,IAAI,EAAEC,UAAU,CAACC,UAAW;AAACC,UAAAA,EAAE,EAAE7B,OAAQ;AAACP,UAAAA,SAAS,EAAC,OAAO;AAAAD,UAAAA,QAAA,EAC/DK;SACI,CACR,EACAH,OAAO;OACL;AACP,KAAiB,CACnB;AAAA,GAAM,CAAC;AAEX;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProcessIndicator.js","sources":["../../src/processIndicator/ProcessIndicator.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { Component } from 'react';\n\nimport { Status, Size } from '../common';\n\nconst radius = { xxs: 6, xs: 11, sm: 22, xl: 61 };\n\nconst ANIMATION_DURATION_IN_MS = 1500;\n\nexport type ProcessIndicatorStatus =\n `${Status.PROCESSING | Status.FAILED | Status.SUCCEEDED | Status.HIDDEN}`;\n\nexport interface ProcessIndicatorProps {\n status?: ProcessIndicatorStatus;\n size?: 'xxs' | `${Size.EXTRA_SMALL | Size.SMALL | Size.EXTRA_LARGE}`;\n className?: string;\n 'data-testid'?: string;\n onAnimationCompleted?: (status: ProcessIndicatorStatus) => void;\n}\n\ntype ProcessIndicatorState = Required<Pick<ProcessIndicatorProps, 'status' | 'size'>>;\n\nexport default class ProcessIndicator extends Component<\n ProcessIndicatorProps,\n ProcessIndicatorState\n> {\n declare props: ProcessIndicatorProps &\n Required<Pick<ProcessIndicatorProps, keyof typeof ProcessIndicator.defaultProps>>;\n\n static defaultProps = {\n status: 'processing',\n size: 'sm',\n } satisfies Partial<ProcessIndicatorProps>;\n\n interval = 0;\n timeout = 0;\n\n constructor(props: ProcessIndicator['props']) {\n super(props);\n this.state = {\n status: props.status,\n size: props.size,\n };\n }\n\n /**\n * Create interval for animation duration (1500ms)\n * Update state only at the end of every interval\n * (end of animation loop) if props changed before end of animation\n */\n componentDidMount() {\n this.interval = window.setInterval(() => {\n const { status: targetStatus, size: targetSize, onAnimationCompleted } = this.props;\n const { status: currentStatus, size: currentSize } = this.state;\n\n if (currentStatus !== targetStatus) {\n this.setState({ status: targetStatus }, () => {\n if (onAnimationCompleted) {\n this.timeout = window.setTimeout(() => {\n onAnimationCompleted(targetStatus);\n }, ANIMATION_DURATION_IN_MS);\n }\n });\n }\n\n if (currentSize !== targetSize) {\n this.setState({ size: targetSize });\n }\n }, ANIMATION_DURATION_IN_MS);\n }\n\n /**\n * Only trigger render if comopnent's state got\n * updated from interval callback\n */\n shouldComponentUpdate(nextProps: ProcessIndicator['props'], nextState: ProcessIndicatorState) {\n const isSameStatus = nextProps.status === nextState.status;\n const isSameSize = nextProps.size === nextState.size;\n\n return isSameStatus && isSameSize;\n }\n\n // Clear interval before destroying component\n componentWillUnmount() {\n window.clearInterval(this.interval);\n window.clearTimeout(this.timeout);\n }\n\n render() {\n const { className, 'data-testid': dataTestId } = this.props;\n const { size, status } = this.state;\n const classes = clsx(`process process-${size}`, className, {\n [`process-danger`]: status === Status.FAILED,\n [`process-stopped`]: status === Status.HIDDEN,\n [`process-success`]: status === Status.SUCCEEDED,\n });\n\n return (\n <span className={classes} data-testid={dataTestId}>\n <span className=\"process-icon-container\">\n <span className=\"process-icon-horizontal\" />\n <span className=\"process-icon-vertical\" />\n </span>\n <svg xmlns=\"http://www.w3.org/2000/svg\">\n <circle className=\"process-circle\" cx=\"50%\" cy=\"50%\" r={radius[size]} fillOpacity=\"0.0\" />\n </svg>\n </span>\n );\n }\n}\n"],"names":["radius","xxs","xs","sm","xl","ANIMATION_DURATION_IN_MS","ProcessIndicator","Component","defaultProps","status","size","interval","timeout","constructor","props","state","componentDidMount","window","setInterval","targetStatus","targetSize","onAnimationCompleted","currentStatus","currentSize","setState","setTimeout","shouldComponentUpdate","nextProps","nextState","isSameStatus","isSameSize","componentWillUnmount","clearInterval","clearTimeout","render","className","dataTestId","classes","clsx","Status","FAILED","HIDDEN","SUCCEEDED","_jsxs","children","_jsx","xmlns","cx","cy","r","fillOpacity"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,MAAMA,MAAM,GAAG;AAAEC,EAAAA,GAAG,EAAE,CAAC;AAAEC,EAAAA,EAAE,EAAE,EAAE;AAAEC,EAAAA,EAAE,EAAE,EAAE;AAAEC,EAAAA,EAAE,EAAE;CAAI;AAEjD,MAAMC,wBAAwB,GAAG,IAAI;
|
|
1
|
+
{"version":3,"file":"ProcessIndicator.js","sources":["../../src/processIndicator/ProcessIndicator.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { Component } from 'react';\n\nimport { Status, Size } from '../common';\n\nconst radius = { xxs: 6, xs: 11, sm: 22, xl: 61 };\n\nconst ANIMATION_DURATION_IN_MS = 1500;\n\nexport type ProcessIndicatorStatus =\n `${Status.PROCESSING | Status.FAILED | Status.SUCCEEDED | Status.HIDDEN}`;\n\nexport interface ProcessIndicatorProps {\n /** @default 'processing' */\n status?: ProcessIndicatorStatus;\n /** @default 'sm' */\n size?: 'xxs' | `${Size.EXTRA_SMALL | Size.SMALL | Size.EXTRA_LARGE}`;\n className?: string;\n 'data-testid'?: string;\n onAnimationCompleted?: (status: ProcessIndicatorStatus) => void;\n}\n\ntype ProcessIndicatorState = Required<Pick<ProcessIndicatorProps, 'status' | 'size'>>;\n\nexport default class ProcessIndicator extends Component<\n ProcessIndicatorProps,\n ProcessIndicatorState\n> {\n declare props: ProcessIndicatorProps &\n Required<Pick<ProcessIndicatorProps, keyof typeof ProcessIndicator.defaultProps>>;\n\n static defaultProps = {\n status: 'processing',\n size: 'sm',\n } satisfies Partial<ProcessIndicatorProps>;\n\n interval = 0;\n timeout = 0;\n\n constructor(props: ProcessIndicator['props']) {\n super(props);\n this.state = {\n status: props.status,\n size: props.size,\n };\n }\n\n /**\n * Create interval for animation duration (1500ms)\n * Update state only at the end of every interval\n * (end of animation loop) if props changed before end of animation\n */\n componentDidMount() {\n this.interval = window.setInterval(() => {\n const { status: targetStatus, size: targetSize, onAnimationCompleted } = this.props;\n const { status: currentStatus, size: currentSize } = this.state;\n\n if (currentStatus !== targetStatus) {\n this.setState({ status: targetStatus }, () => {\n if (onAnimationCompleted) {\n this.timeout = window.setTimeout(() => {\n onAnimationCompleted(targetStatus);\n }, ANIMATION_DURATION_IN_MS);\n }\n });\n }\n\n if (currentSize !== targetSize) {\n this.setState({ size: targetSize });\n }\n }, ANIMATION_DURATION_IN_MS);\n }\n\n /**\n * Only trigger render if comopnent's state got\n * updated from interval callback\n */\n shouldComponentUpdate(nextProps: ProcessIndicator['props'], nextState: ProcessIndicatorState) {\n const isSameStatus = nextProps.status === nextState.status;\n const isSameSize = nextProps.size === nextState.size;\n\n return isSameStatus && isSameSize;\n }\n\n // Clear interval before destroying component\n componentWillUnmount() {\n window.clearInterval(this.interval);\n window.clearTimeout(this.timeout);\n }\n\n render() {\n const { className, 'data-testid': dataTestId } = this.props;\n const { size, status } = this.state;\n const classes = clsx(`process process-${size}`, className, {\n [`process-danger`]: status === Status.FAILED,\n [`process-stopped`]: status === Status.HIDDEN,\n [`process-success`]: status === Status.SUCCEEDED,\n });\n\n return (\n <span className={classes} data-testid={dataTestId}>\n <span className=\"process-icon-container\">\n <span className=\"process-icon-horizontal\" />\n <span className=\"process-icon-vertical\" />\n </span>\n <svg xmlns=\"http://www.w3.org/2000/svg\">\n <circle className=\"process-circle\" cx=\"50%\" cy=\"50%\" r={radius[size]} fillOpacity=\"0.0\" />\n </svg>\n </span>\n );\n }\n}\n"],"names":["radius","xxs","xs","sm","xl","ANIMATION_DURATION_IN_MS","ProcessIndicator","Component","defaultProps","status","size","interval","timeout","constructor","props","state","componentDidMount","window","setInterval","targetStatus","targetSize","onAnimationCompleted","currentStatus","currentSize","setState","setTimeout","shouldComponentUpdate","nextProps","nextState","isSameStatus","isSameSize","componentWillUnmount","clearInterval","clearTimeout","render","className","dataTestId","classes","clsx","Status","FAILED","HIDDEN","SUCCEEDED","_jsxs","children","_jsx","xmlns","cx","cy","r","fillOpacity"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,MAAMA,MAAM,GAAG;AAAEC,EAAAA,GAAG,EAAE,CAAC;AAAEC,EAAAA,EAAE,EAAE,EAAE;AAAEC,EAAAA,EAAE,EAAE,EAAE;AAAEC,EAAAA,EAAE,EAAE;CAAI;AAEjD,MAAMC,wBAAwB,GAAG,IAAI;AAiBvB,MAAOC,gBAAiB,SAAQC,eAG7C,CAAA;AAIC,EAAA,OAAOC,YAAY,GAAG;AACpBC,IAAAA,MAAM,EAAE,YAAY;AACpBC,IAAAA,IAAI,EAAE;GACkC;AAE1CC,EAAAA,QAAQ,GAAG,CAAC;AACZC,EAAAA,OAAO,GAAG,CAAC;EAEXC,WAAAA,CAAYC,KAAgC,EAAA;IAC1C,KAAK,CAACA,KAAK,CAAC;IACZ,IAAI,CAACC,KAAK,GAAG;MACXN,MAAM,EAAEK,KAAK,CAACL,MAAM;MACpBC,IAAI,EAAEI,KAAK,CAACJ;KACb;AACH,EAAA;AAEA;;;;AAIG;AACHM,EAAAA,iBAAiBA,GAAA;AACf,IAAA,IAAI,CAACL,QAAQ,GAAGM,MAAM,CAACC,WAAW,CAAC,MAAK;MACtC,MAAM;AAAET,QAAAA,MAAM,EAAEU,YAAY;AAAET,QAAAA,IAAI,EAAEU,UAAU;AAAEC,QAAAA;OAAsB,GAAG,IAAI,CAACP,KAAK;MACnF,MAAM;AAAEL,QAAAA,MAAM,EAAEa,aAAa;AAAEZ,QAAAA,IAAI,EAAEa;OAAa,GAAG,IAAI,CAACR,KAAK;MAE/D,IAAIO,aAAa,KAAKH,YAAY,EAAE;QAClC,IAAI,CAACK,QAAQ,CAAC;AAAEf,UAAAA,MAAM,EAAEU;AAAY,SAAE,EAAE,MAAK;AAC3C,UAAA,IAAIE,oBAAoB,EAAE;AACxB,YAAA,IAAI,CAACT,OAAO,GAAGK,MAAM,CAACQ,UAAU,CAAC,MAAK;cACpCJ,oBAAoB,CAACF,YAAY,CAAC;YACpC,CAAC,EAAEd,wBAAwB,CAAC;AAC9B,UAAA;AACF,QAAA,CAAC,CAAC;AACJ,MAAA;MAEA,IAAIkB,WAAW,KAAKH,UAAU,EAAE;QAC9B,IAAI,CAACI,QAAQ,CAAC;AAAEd,UAAAA,IAAI,EAAEU;AAAU,SAAE,CAAC;AACrC,MAAA;IACF,CAAC,EAAEf,wBAAwB,CAAC;AAC9B,EAAA;AAEA;;;AAGG;AACHqB,EAAAA,qBAAqBA,CAACC,SAAoC,EAAEC,SAAgC,EAAA;IAC1F,MAAMC,YAAY,GAAGF,SAAS,CAAClB,MAAM,KAAKmB,SAAS,CAACnB,MAAM;IAC1D,MAAMqB,UAAU,GAAGH,SAAS,CAACjB,IAAI,KAAKkB,SAAS,CAAClB,IAAI;IAEpD,OAAOmB,YAAY,IAAIC,UAAU;AACnC,EAAA;AAEA;AACAC,EAAAA,oBAAoBA,GAAA;AAClBd,IAAAA,MAAM,CAACe,aAAa,CAAC,IAAI,CAACrB,QAAQ,CAAC;AACnCM,IAAAA,MAAM,CAACgB,YAAY,CAAC,IAAI,CAACrB,OAAO,CAAC;AACnC,EAAA;AAEAsB,EAAAA,MAAMA,GAAA;IACJ,MAAM;MAAEC,SAAS;AAAE,MAAA,aAAa,EAAEC;KAAY,GAAG,IAAI,CAACtB,KAAK;IAC3D,MAAM;MAAEJ,IAAI;AAAED,cAAAA;KAAQ,GAAG,IAAI,CAACM,KAAK;IACnC,MAAMsB,OAAO,GAAGC,SAAI,CAAC,mBAAmB5B,IAAI,CAAA,CAAE,EAAEyB,SAAS,EAAE;AACzD,MAAA,CAAC,gBAAgB,GAAG1B,QAAM,KAAK8B,aAAM,CAACC,MAAM;AAC5C,MAAA,CAAC,iBAAiB,GAAG/B,QAAM,KAAK8B,aAAM,CAACE,MAAM;AAC7C,MAAA,CAAC,CAAA,eAAA,CAAiB,GAAGhC,QAAM,KAAK8B,aAAM,CAACG;AACxC,KAAA,CAAC;AAEF,IAAA,oBACEC,eAAA,CAAA,MAAA,EAAA;AAAMR,MAAAA,SAAS,EAAEE,OAAQ;AAAC,MAAA,aAAA,EAAaD,UAAW;AAAAQ,MAAAA,QAAA,gBAChDD,eAAA,CAAA,MAAA,EAAA;AAAMR,QAAAA,SAAS,EAAC,wBAAwB;AAAAS,QAAAA,QAAA,gBACtCC,cAAA,CAAA,MAAA,EAAA;AAAMV,UAAAA,SAAS,EAAC;SAAyB,CACzC,eAAAU,cAAA,CAAA,MAAA,EAAA;AAAMV,UAAAA,SAAS,EAAC;AAAuB,SAAA,CACzC;OAAM,CACN,eAAAU,cAAA,CAAA,KAAA,EAAA;AAAKC,QAAAA,KAAK,EAAC,4BAA4B;AAAAF,QAAAA,QAAA,eACrCC,cAAA,CAAA,QAAA,EAAA;AAAQV,UAAAA,SAAS,EAAC,gBAAgB;AAACY,UAAAA,EAAE,EAAC,KAAK;AAACC,UAAAA,EAAE,EAAC,KAAK;AAACC,UAAAA,CAAC,EAAEjD,MAAM,CAACU,IAAI,CAAE;AAACwC,UAAAA,WAAW,EAAC;SAAK;AACzF,OAAK,CACP;AAAA,KAAM,CAAC;AAEX,EAAA;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProcessIndicator.mjs","sources":["../../src/processIndicator/ProcessIndicator.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { Component } from 'react';\n\nimport { Status, Size } from '../common';\n\nconst radius = { xxs: 6, xs: 11, sm: 22, xl: 61 };\n\nconst ANIMATION_DURATION_IN_MS = 1500;\n\nexport type ProcessIndicatorStatus =\n `${Status.PROCESSING | Status.FAILED | Status.SUCCEEDED | Status.HIDDEN}`;\n\nexport interface ProcessIndicatorProps {\n status?: ProcessIndicatorStatus;\n size?: 'xxs' | `${Size.EXTRA_SMALL | Size.SMALL | Size.EXTRA_LARGE}`;\n className?: string;\n 'data-testid'?: string;\n onAnimationCompleted?: (status: ProcessIndicatorStatus) => void;\n}\n\ntype ProcessIndicatorState = Required<Pick<ProcessIndicatorProps, 'status' | 'size'>>;\n\nexport default class ProcessIndicator extends Component<\n ProcessIndicatorProps,\n ProcessIndicatorState\n> {\n declare props: ProcessIndicatorProps &\n Required<Pick<ProcessIndicatorProps, keyof typeof ProcessIndicator.defaultProps>>;\n\n static defaultProps = {\n status: 'processing',\n size: 'sm',\n } satisfies Partial<ProcessIndicatorProps>;\n\n interval = 0;\n timeout = 0;\n\n constructor(props: ProcessIndicator['props']) {\n super(props);\n this.state = {\n status: props.status,\n size: props.size,\n };\n }\n\n /**\n * Create interval for animation duration (1500ms)\n * Update state only at the end of every interval\n * (end of animation loop) if props changed before end of animation\n */\n componentDidMount() {\n this.interval = window.setInterval(() => {\n const { status: targetStatus, size: targetSize, onAnimationCompleted } = this.props;\n const { status: currentStatus, size: currentSize } = this.state;\n\n if (currentStatus !== targetStatus) {\n this.setState({ status: targetStatus }, () => {\n if (onAnimationCompleted) {\n this.timeout = window.setTimeout(() => {\n onAnimationCompleted(targetStatus);\n }, ANIMATION_DURATION_IN_MS);\n }\n });\n }\n\n if (currentSize !== targetSize) {\n this.setState({ size: targetSize });\n }\n }, ANIMATION_DURATION_IN_MS);\n }\n\n /**\n * Only trigger render if comopnent's state got\n * updated from interval callback\n */\n shouldComponentUpdate(nextProps: ProcessIndicator['props'], nextState: ProcessIndicatorState) {\n const isSameStatus = nextProps.status === nextState.status;\n const isSameSize = nextProps.size === nextState.size;\n\n return isSameStatus && isSameSize;\n }\n\n // Clear interval before destroying component\n componentWillUnmount() {\n window.clearInterval(this.interval);\n window.clearTimeout(this.timeout);\n }\n\n render() {\n const { className, 'data-testid': dataTestId } = this.props;\n const { size, status } = this.state;\n const classes = clsx(`process process-${size}`, className, {\n [`process-danger`]: status === Status.FAILED,\n [`process-stopped`]: status === Status.HIDDEN,\n [`process-success`]: status === Status.SUCCEEDED,\n });\n\n return (\n <span className={classes} data-testid={dataTestId}>\n <span className=\"process-icon-container\">\n <span className=\"process-icon-horizontal\" />\n <span className=\"process-icon-vertical\" />\n </span>\n <svg xmlns=\"http://www.w3.org/2000/svg\">\n <circle className=\"process-circle\" cx=\"50%\" cy=\"50%\" r={radius[size]} fillOpacity=\"0.0\" />\n </svg>\n </span>\n );\n }\n}\n"],"names":["radius","xxs","xs","sm","xl","ANIMATION_DURATION_IN_MS","ProcessIndicator","Component","defaultProps","status","size","interval","timeout","constructor","props","state","componentDidMount","window","setInterval","targetStatus","targetSize","onAnimationCompleted","currentStatus","currentSize","setState","setTimeout","shouldComponentUpdate","nextProps","nextState","isSameStatus","isSameSize","componentWillUnmount","clearInterval","clearTimeout","render","className","dataTestId","classes","clsx","Status","FAILED","HIDDEN","SUCCEEDED","_jsxs","children","_jsx","xmlns","cx","cy","r","fillOpacity"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,MAAMA,MAAM,GAAG;AAAEC,EAAAA,GAAG,EAAE,CAAC;AAAEC,EAAAA,EAAE,EAAE,EAAE;AAAEC,EAAAA,EAAE,EAAE,EAAE;AAAEC,EAAAA,EAAE,EAAE;CAAI;AAEjD,MAAMC,wBAAwB,GAAG,IAAI;
|
|
1
|
+
{"version":3,"file":"ProcessIndicator.mjs","sources":["../../src/processIndicator/ProcessIndicator.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { Component } from 'react';\n\nimport { Status, Size } from '../common';\n\nconst radius = { xxs: 6, xs: 11, sm: 22, xl: 61 };\n\nconst ANIMATION_DURATION_IN_MS = 1500;\n\nexport type ProcessIndicatorStatus =\n `${Status.PROCESSING | Status.FAILED | Status.SUCCEEDED | Status.HIDDEN}`;\n\nexport interface ProcessIndicatorProps {\n /** @default 'processing' */\n status?: ProcessIndicatorStatus;\n /** @default 'sm' */\n size?: 'xxs' | `${Size.EXTRA_SMALL | Size.SMALL | Size.EXTRA_LARGE}`;\n className?: string;\n 'data-testid'?: string;\n onAnimationCompleted?: (status: ProcessIndicatorStatus) => void;\n}\n\ntype ProcessIndicatorState = Required<Pick<ProcessIndicatorProps, 'status' | 'size'>>;\n\nexport default class ProcessIndicator extends Component<\n ProcessIndicatorProps,\n ProcessIndicatorState\n> {\n declare props: ProcessIndicatorProps &\n Required<Pick<ProcessIndicatorProps, keyof typeof ProcessIndicator.defaultProps>>;\n\n static defaultProps = {\n status: 'processing',\n size: 'sm',\n } satisfies Partial<ProcessIndicatorProps>;\n\n interval = 0;\n timeout = 0;\n\n constructor(props: ProcessIndicator['props']) {\n super(props);\n this.state = {\n status: props.status,\n size: props.size,\n };\n }\n\n /**\n * Create interval for animation duration (1500ms)\n * Update state only at the end of every interval\n * (end of animation loop) if props changed before end of animation\n */\n componentDidMount() {\n this.interval = window.setInterval(() => {\n const { status: targetStatus, size: targetSize, onAnimationCompleted } = this.props;\n const { status: currentStatus, size: currentSize } = this.state;\n\n if (currentStatus !== targetStatus) {\n this.setState({ status: targetStatus }, () => {\n if (onAnimationCompleted) {\n this.timeout = window.setTimeout(() => {\n onAnimationCompleted(targetStatus);\n }, ANIMATION_DURATION_IN_MS);\n }\n });\n }\n\n if (currentSize !== targetSize) {\n this.setState({ size: targetSize });\n }\n }, ANIMATION_DURATION_IN_MS);\n }\n\n /**\n * Only trigger render if comopnent's state got\n * updated from interval callback\n */\n shouldComponentUpdate(nextProps: ProcessIndicator['props'], nextState: ProcessIndicatorState) {\n const isSameStatus = nextProps.status === nextState.status;\n const isSameSize = nextProps.size === nextState.size;\n\n return isSameStatus && isSameSize;\n }\n\n // Clear interval before destroying component\n componentWillUnmount() {\n window.clearInterval(this.interval);\n window.clearTimeout(this.timeout);\n }\n\n render() {\n const { className, 'data-testid': dataTestId } = this.props;\n const { size, status } = this.state;\n const classes = clsx(`process process-${size}`, className, {\n [`process-danger`]: status === Status.FAILED,\n [`process-stopped`]: status === Status.HIDDEN,\n [`process-success`]: status === Status.SUCCEEDED,\n });\n\n return (\n <span className={classes} data-testid={dataTestId}>\n <span className=\"process-icon-container\">\n <span className=\"process-icon-horizontal\" />\n <span className=\"process-icon-vertical\" />\n </span>\n <svg xmlns=\"http://www.w3.org/2000/svg\">\n <circle className=\"process-circle\" cx=\"50%\" cy=\"50%\" r={radius[size]} fillOpacity=\"0.0\" />\n </svg>\n </span>\n );\n }\n}\n"],"names":["radius","xxs","xs","sm","xl","ANIMATION_DURATION_IN_MS","ProcessIndicator","Component","defaultProps","status","size","interval","timeout","constructor","props","state","componentDidMount","window","setInterval","targetStatus","targetSize","onAnimationCompleted","currentStatus","currentSize","setState","setTimeout","shouldComponentUpdate","nextProps","nextState","isSameStatus","isSameSize","componentWillUnmount","clearInterval","clearTimeout","render","className","dataTestId","classes","clsx","Status","FAILED","HIDDEN","SUCCEEDED","_jsxs","children","_jsx","xmlns","cx","cy","r","fillOpacity"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionPrompt.js","sources":["../../../src/prompt/ActionPrompt/ActionPrompt.tsx"],"sourcesContent":["import { AriaAttributes, ReactNode, useId } from 'react';\nimport { clsx } from 'clsx';\n\nimport StatusIcon from '../../statusIcon';\nimport Body from '../../body';\nimport Button from '../../button';\nimport { Breakpoint, Typography } from '../../common';\nimport AvatarView, { AvatarViewProps } from '../../avatarView';\nimport Image from '../../image';\nimport { ButtonProps } from '../../button/Button.types';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\nimport { BadgeAssetsProps } from '../../badge';\nimport { GiftBox } from '@transferwise/icons';\nimport { useScreenSize } from '../../common/hooks/useScreenSize';\n\nexport type ActionPromptProps = {\n title: ReactNode;\n description?: ReactNode;\n media?: {\n imgSrc?: string;\n avatar?: Pick<AvatarViewProps, 'imgSrc' | 'profileName' | 'profileType'> & {\n asset?: AvatarViewProps['children'];\n badge?: Pick<BadgeAssetsProps, 'flagCode'>;\n };\n 'aria-label'?: string;\n 'aria-hidden'?: boolean;\n };\n action: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n label: ButtonProps['children'];\n };\n actionSecondary?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n label: ButtonProps['children'];\n };\n 'aria-label'?: AriaAttributes['aria-label'];\n} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid' | '
|
|
1
|
+
{"version":3,"file":"ActionPrompt.js","sources":["../../../src/prompt/ActionPrompt/ActionPrompt.tsx"],"sourcesContent":["import { AriaAttributes, ReactNode, useId } from 'react';\nimport { clsx } from 'clsx';\n\nimport StatusIcon from '../../statusIcon';\nimport Body from '../../body';\nimport Button from '../../button';\nimport { Breakpoint, Typography } from '../../common';\nimport AvatarView, { AvatarViewProps } from '../../avatarView';\nimport Image from '../../image';\nimport { ButtonProps } from '../../button/Button.types';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\nimport { BadgeAssetsProps } from '../../badge';\nimport { GiftBox } from '@transferwise/icons';\nimport { useScreenSize } from '../../common/hooks/useScreenSize';\n\nexport type ActionPromptProps = {\n title: ReactNode;\n description?: ReactNode;\n /** @default {} */\n media?: {\n imgSrc?: string;\n avatar?: Pick<AvatarViewProps, 'imgSrc' | 'profileName' | 'profileType'> & {\n asset?: AvatarViewProps['children'];\n badge?: Pick<BadgeAssetsProps, 'flagCode'>;\n };\n 'aria-label'?: string;\n 'aria-hidden'?: boolean;\n };\n action: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n label: ButtonProps['children'];\n };\n actionSecondary?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n label: ButtonProps['children'];\n };\n 'aria-label'?: AriaAttributes['aria-label'];\n} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid' | 'onDismiss'> & {\n /**\n * The sentiment determines the colour scheme\n * @default 'neutral'\n */\n sentiment?: PrimitivePromptProps['sentiment'];\n };\n\n/**\n * Use an action prompt for optional feedback that doesn't require immediate action, such as feature upsells, warnings, or suggestions. These prompts are typically used outside of core product flows (e.g., Launchpad, Recipient, or Transaction screens) and can be addressed at the user's convenience.\n *\n * If your message is about immediate user feedback (e.g., form submission errors, download failures, missing data warnings), use an [info prompt](https://storybook.wise.design/?path=/docs/prompts-infoprompt--docs) instead.\n *\n * Guidance can be found in the [design system](https://wise.design/components/action-prompt).\n */\nexport const ActionPrompt = ({\n sentiment = 'neutral',\n title,\n description,\n onDismiss,\n media = {},\n action,\n actionSecondary,\n id,\n className,\n 'data-testid': testId,\n 'aria-label': ariaLabel,\n}: ActionPromptProps) => {\n const isMobile = !useScreenSize(Breakpoint.MEDIUM);\n\n const mediaId = useId();\n const titleId = useId();\n const descId = useId();\n\n const ariaLabelledByIds = [\n media['aria-hidden'] ? undefined : mediaId,\n ariaLabel ? undefined : titleId,\n ]\n .filter(Boolean)\n .join(' ');\n\n const renderMedia = () => {\n if (media?.imgSrc) {\n return (\n <Image\n id={mediaId}\n src={media.imgSrc}\n className=\"wds-action-prompt--media-image\"\n alt={media['aria-label'] ?? ''}\n />\n );\n }\n if (media?.avatar) {\n const badge = media.avatar.badge\n ? media.avatar.badge\n : sentiment === 'proposition'\n ? {}\n : { status: sentiment };\n return (\n <AvatarView\n {...media.avatar}\n badge={badge}\n aria-label={media['aria-label']}\n aria-hidden={media['aria-hidden']}\n id={mediaId}\n size={48}\n >\n {media.avatar.asset}\n </AvatarView>\n );\n }\n return sentiment === 'proposition' ? (\n <AvatarView\n id={mediaId}\n size={48}\n aria-label={media['aria-label']}\n aria-hidden={media['aria-hidden']}\n >\n <GiftBox />\n </AvatarView>\n ) : (\n <StatusIcon\n id={mediaId}\n size={48}\n sentiment={sentiment}\n iconLabel={media['aria-hidden'] ? null : media['aria-label']}\n />\n );\n };\n\n return (\n <PrimitivePrompt\n id={id}\n sentiment={sentiment}\n data-testid={testId}\n className={clsx(\n 'wds-action-prompt',\n { 'wds-action-prompt--with-two-actions': !!actionSecondary },\n className,\n )}\n media={renderMedia()}\n actions={\n <>\n {actionSecondary && (\n // @ts-expect-error onClick type mismatch\n <Button\n v2\n size=\"md\"\n priority=\"secondary\"\n href={actionSecondary.href}\n block={isMobile}\n onClick={actionSecondary?.onClick}\n >\n {actionSecondary.label}\n </Button>\n )}\n {/* @ts-expect-error onClick type mismatch */}\n <Button\n v2\n size=\"md\"\n priority=\"primary\"\n href={action.href}\n block={isMobile}\n onClick={action.onClick}\n >\n {action.label}\n </Button>\n </>\n }\n role=\"region\"\n onDismiss={onDismiss}\n {...(ariaLabel\n ? { 'aria-label': ariaLabel }\n : {\n 'aria-labelledby': ariaLabelledByIds,\n 'aria-describedby': descId,\n })}\n >\n <div className={clsx('d-flex', 'flex-column', 'justify-content-center')}>\n <Body id={titleId} type={Typography.BODY_LARGE_BOLD} className=\"wds-action-prompt__content\">\n {title}\n </Body>\n {description && (\n <Body id={descId} className=\"wds-action-prompt__content\">\n {description}\n </Body>\n )}\n </div>\n </PrimitivePrompt>\n );\n};\n\nexport default ActionPrompt;\n"],"names":["ActionPrompt","sentiment","title","description","onDismiss","media","action","actionSecondary","id","className","testId","ariaLabel","isMobile","useScreenSize","Breakpoint","MEDIUM","mediaId","useId","titleId","descId","ariaLabelledByIds","undefined","filter","Boolean","join","renderMedia","imgSrc","_jsx","Image","src","alt","avatar","badge","status","AvatarView","size","children","asset","GiftBox","StatusIcon","iconLabel","PrimitivePrompt","clsx","actions","_jsxs","_Fragment","Button","v2","priority","href","block","onClick","label","role","Body","type","Typography","BODY_LARGE_BOLD"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionPrompt.mjs","sources":["../../../src/prompt/ActionPrompt/ActionPrompt.tsx"],"sourcesContent":["import { AriaAttributes, ReactNode, useId } from 'react';\nimport { clsx } from 'clsx';\n\nimport StatusIcon from '../../statusIcon';\nimport Body from '../../body';\nimport Button from '../../button';\nimport { Breakpoint, Typography } from '../../common';\nimport AvatarView, { AvatarViewProps } from '../../avatarView';\nimport Image from '../../image';\nimport { ButtonProps } from '../../button/Button.types';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\nimport { BadgeAssetsProps } from '../../badge';\nimport { GiftBox } from '@transferwise/icons';\nimport { useScreenSize } from '../../common/hooks/useScreenSize';\n\nexport type ActionPromptProps = {\n title: ReactNode;\n description?: ReactNode;\n media?: {\n imgSrc?: string;\n avatar?: Pick<AvatarViewProps, 'imgSrc' | 'profileName' | 'profileType'> & {\n asset?: AvatarViewProps['children'];\n badge?: Pick<BadgeAssetsProps, 'flagCode'>;\n };\n 'aria-label'?: string;\n 'aria-hidden'?: boolean;\n };\n action: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n label: ButtonProps['children'];\n };\n actionSecondary?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n label: ButtonProps['children'];\n };\n 'aria-label'?: AriaAttributes['aria-label'];\n} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid' | '
|
|
1
|
+
{"version":3,"file":"ActionPrompt.mjs","sources":["../../../src/prompt/ActionPrompt/ActionPrompt.tsx"],"sourcesContent":["import { AriaAttributes, ReactNode, useId } from 'react';\nimport { clsx } from 'clsx';\n\nimport StatusIcon from '../../statusIcon';\nimport Body from '../../body';\nimport Button from '../../button';\nimport { Breakpoint, Typography } from '../../common';\nimport AvatarView, { AvatarViewProps } from '../../avatarView';\nimport Image from '../../image';\nimport { ButtonProps } from '../../button/Button.types';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\nimport { BadgeAssetsProps } from '../../badge';\nimport { GiftBox } from '@transferwise/icons';\nimport { useScreenSize } from '../../common/hooks/useScreenSize';\n\nexport type ActionPromptProps = {\n title: ReactNode;\n description?: ReactNode;\n /** @default {} */\n media?: {\n imgSrc?: string;\n avatar?: Pick<AvatarViewProps, 'imgSrc' | 'profileName' | 'profileType'> & {\n asset?: AvatarViewProps['children'];\n badge?: Pick<BadgeAssetsProps, 'flagCode'>;\n };\n 'aria-label'?: string;\n 'aria-hidden'?: boolean;\n };\n action: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n label: ButtonProps['children'];\n };\n actionSecondary?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n label: ButtonProps['children'];\n };\n 'aria-label'?: AriaAttributes['aria-label'];\n} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid' | 'onDismiss'> & {\n /**\n * The sentiment determines the colour scheme\n * @default 'neutral'\n */\n sentiment?: PrimitivePromptProps['sentiment'];\n };\n\n/**\n * Use an action prompt for optional feedback that doesn't require immediate action, such as feature upsells, warnings, or suggestions. These prompts are typically used outside of core product flows (e.g., Launchpad, Recipient, or Transaction screens) and can be addressed at the user's convenience.\n *\n * If your message is about immediate user feedback (e.g., form submission errors, download failures, missing data warnings), use an [info prompt](https://storybook.wise.design/?path=/docs/prompts-infoprompt--docs) instead.\n *\n * Guidance can be found in the [design system](https://wise.design/components/action-prompt).\n */\nexport const ActionPrompt = ({\n sentiment = 'neutral',\n title,\n description,\n onDismiss,\n media = {},\n action,\n actionSecondary,\n id,\n className,\n 'data-testid': testId,\n 'aria-label': ariaLabel,\n}: ActionPromptProps) => {\n const isMobile = !useScreenSize(Breakpoint.MEDIUM);\n\n const mediaId = useId();\n const titleId = useId();\n const descId = useId();\n\n const ariaLabelledByIds = [\n media['aria-hidden'] ? undefined : mediaId,\n ariaLabel ? undefined : titleId,\n ]\n .filter(Boolean)\n .join(' ');\n\n const renderMedia = () => {\n if (media?.imgSrc) {\n return (\n <Image\n id={mediaId}\n src={media.imgSrc}\n className=\"wds-action-prompt--media-image\"\n alt={media['aria-label'] ?? ''}\n />\n );\n }\n if (media?.avatar) {\n const badge = media.avatar.badge\n ? media.avatar.badge\n : sentiment === 'proposition'\n ? {}\n : { status: sentiment };\n return (\n <AvatarView\n {...media.avatar}\n badge={badge}\n aria-label={media['aria-label']}\n aria-hidden={media['aria-hidden']}\n id={mediaId}\n size={48}\n >\n {media.avatar.asset}\n </AvatarView>\n );\n }\n return sentiment === 'proposition' ? (\n <AvatarView\n id={mediaId}\n size={48}\n aria-label={media['aria-label']}\n aria-hidden={media['aria-hidden']}\n >\n <GiftBox />\n </AvatarView>\n ) : (\n <StatusIcon\n id={mediaId}\n size={48}\n sentiment={sentiment}\n iconLabel={media['aria-hidden'] ? null : media['aria-label']}\n />\n );\n };\n\n return (\n <PrimitivePrompt\n id={id}\n sentiment={sentiment}\n data-testid={testId}\n className={clsx(\n 'wds-action-prompt',\n { 'wds-action-prompt--with-two-actions': !!actionSecondary },\n className,\n )}\n media={renderMedia()}\n actions={\n <>\n {actionSecondary && (\n // @ts-expect-error onClick type mismatch\n <Button\n v2\n size=\"md\"\n priority=\"secondary\"\n href={actionSecondary.href}\n block={isMobile}\n onClick={actionSecondary?.onClick}\n >\n {actionSecondary.label}\n </Button>\n )}\n {/* @ts-expect-error onClick type mismatch */}\n <Button\n v2\n size=\"md\"\n priority=\"primary\"\n href={action.href}\n block={isMobile}\n onClick={action.onClick}\n >\n {action.label}\n </Button>\n </>\n }\n role=\"region\"\n onDismiss={onDismiss}\n {...(ariaLabel\n ? { 'aria-label': ariaLabel }\n : {\n 'aria-labelledby': ariaLabelledByIds,\n 'aria-describedby': descId,\n })}\n >\n <div className={clsx('d-flex', 'flex-column', 'justify-content-center')}>\n <Body id={titleId} type={Typography.BODY_LARGE_BOLD} className=\"wds-action-prompt__content\">\n {title}\n </Body>\n {description && (\n <Body id={descId} className=\"wds-action-prompt__content\">\n {description}\n </Body>\n )}\n </div>\n </PrimitivePrompt>\n );\n};\n\nexport default ActionPrompt;\n"],"names":["ActionPrompt","sentiment","title","description","onDismiss","media","action","actionSecondary","id","className","testId","ariaLabel","isMobile","useScreenSize","Breakpoint","MEDIUM","mediaId","useId","titleId","descId","ariaLabelledByIds","undefined","filter","Boolean","join","renderMedia","imgSrc","_jsx","Image","src","alt","avatar","badge","status","AvatarView","size","children","asset","GiftBox","StatusIcon","iconLabel","PrimitivePrompt","clsx","actions","_jsxs","_Fragment","Button","v2","priority","href","block","onClick","label","role","Body","type","Typography","BODY_LARGE_BOLD"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InlinePrompt.js","sources":["../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"sourcesContent":["import { Sentiment } from '../../common';\nimport { BackslashCircle, GiftBox } from '@transferwise/icons';\nimport ProcessIndicator from '../../processIndicator';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\nimport { PrimitivePrompt } from '../PrimitivePrompt';\n\nexport type InlinePromptProps = {\n /**\n * The sentiment determines the colour scheme\n */\n sentiment?:\n | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`\n | 'proposition';\n /**\n * Replaces the icon with a spinner while waiting for the short-lived action to finish.\n * @default false\n */\n loading?: boolean;\n /**\n * While prompts cannot be fully (visually and functionally) disabled, this prop should be enabled\n * they are associated with actually disabled component (e.g. a disabled list item or input).\n * @default false\n */\n muted?: boolean;\n /**\n * Icon override for all sentiments. If the sentiment uses StatusIcon by default, it will be\n * replaced by a plain icon.\n */\n media?: React.ReactNode;\n /**\n * Override for the sentiment's-derived, default, accessible name announced by the screen readers.\n */\n mediaLabel?: string;\n /**\n * Defines the sizing strategy of the prompt component - either hugging the content or taking full width of the container.\n * @default auto\n */\n width?: 'auto' | 'full';\n id?: string;\n className?: string;\n 'data-testid'?: string;\n children: React.ReactNode;\n};\n\n/**\n * Inline prompts appear alongside a specific component on the screen. They help the user stay\n * informed, fix something, or get more out of what they're doing. <br />\n *\n * **NB:** It should be used in favour of `InlineAlert` which will be soon deprecated.\n */\nexport const InlinePrompt = ({\n sentiment = Sentiment.POSITIVE,\n muted = false,\n loading = false,\n className,\n children,\n media = null,\n mediaLabel,\n width = 'auto',\n 'data-testid': dataTestId,\n ...restProps\n}: InlinePromptProps) => {\n const surfaceSentiment = sentiment === Sentiment.POSITIVE ? 'success' : sentiment;\n\n const renderMedia = () => {\n if (muted) {\n return <BackslashCircle size={16} data-testid=\"InlinePrompt_Muted\" title={mediaLabel} />;\n }\n\n if (loading) {\n return (\n <ProcessIndicator\n data-testid=\"InlinePrompt_ProcessIndicator\"\n size=\"xxs\"\n className=\"wds-inline-prompt-process-indicator\"\n />\n );\n }\n\n if (sentiment === 'proposition') {\n return media || <GiftBox title={mediaLabel} />;\n }\n\n return media || <StatusIcon size={16} sentiment={sentiment} iconLabel={mediaLabel} />;\n };\n\n return (\n <PrimitivePrompt\n sentiment={surfaceSentiment}\n media={renderMedia()}\n data-testid={dataTestId}\n className={clsx(\n 'wds-inline-prompt',\n {\n 'wds-inline-prompt--auto-width': width !== 'full',\n 'wds-inline-prompt--muted': muted,\n 'wds-inline-prompt--loading': loading,\n },\n className,\n )}\n {...restProps}\n >\n <Body>{children}</Body>\n </PrimitivePrompt>\n );\n};\n"],"names":["InlinePrompt","sentiment","Sentiment","POSITIVE","muted","loading","className","children","media","mediaLabel","width","dataTestId","restProps","surfaceSentiment","renderMedia","_jsx","BackslashCircle","size","title","ProcessIndicator","GiftBox","StatusIcon","iconLabel","PrimitivePrompt","clsx","Body"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"InlinePrompt.js","sources":["../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"sourcesContent":["import { Sentiment } from '../../common';\nimport { BackslashCircle, GiftBox } from '@transferwise/icons';\nimport ProcessIndicator from '../../processIndicator';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\nimport { PrimitivePrompt } from '../PrimitivePrompt';\n\nexport type InlinePromptProps = {\n /**\n * The sentiment determines the colour scheme\n * @default Sentiment.POSITIVE\n */\n sentiment?:\n | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`\n | 'proposition';\n /**\n * Replaces the icon with a spinner while waiting for the short-lived action to finish.\n * @default false\n */\n loading?: boolean;\n /**\n * While prompts cannot be fully (visually and functionally) disabled, this prop should be enabled\n * they are associated with actually disabled component (e.g. a disabled list item or input).\n * @default false\n */\n muted?: boolean;\n /**\n * Icon override for all sentiments. If the sentiment uses StatusIcon by default, it will be\n * replaced by a plain icon.\n */\n media?: React.ReactNode;\n /**\n * Override for the sentiment's-derived, default, accessible name announced by the screen readers.\n */\n mediaLabel?: string;\n /**\n * Defines the sizing strategy of the prompt component - either hugging the content or taking full width of the container.\n * @default auto\n */\n width?: 'auto' | 'full';\n id?: string;\n className?: string;\n 'data-testid'?: string;\n children: React.ReactNode;\n};\n\n/**\n * Inline prompts appear alongside a specific component on the screen. They help the user stay\n * informed, fix something, or get more out of what they're doing. <br />\n *\n * **NB:** It should be used in favour of `InlineAlert` which will be soon deprecated.\n */\nexport const InlinePrompt = ({\n sentiment = Sentiment.POSITIVE,\n muted = false,\n loading = false,\n className,\n children,\n media = null,\n mediaLabel,\n width = 'auto',\n 'data-testid': dataTestId,\n ...restProps\n}: InlinePromptProps) => {\n const surfaceSentiment = sentiment === Sentiment.POSITIVE ? 'success' : sentiment;\n\n const renderMedia = () => {\n if (muted) {\n return <BackslashCircle size={16} data-testid=\"InlinePrompt_Muted\" title={mediaLabel} />;\n }\n\n if (loading) {\n return (\n <ProcessIndicator\n data-testid=\"InlinePrompt_ProcessIndicator\"\n size=\"xxs\"\n className=\"wds-inline-prompt-process-indicator\"\n />\n );\n }\n\n if (sentiment === 'proposition') {\n return media || <GiftBox title={mediaLabel} />;\n }\n\n return media || <StatusIcon size={16} sentiment={sentiment} iconLabel={mediaLabel} />;\n };\n\n return (\n <PrimitivePrompt\n sentiment={surfaceSentiment}\n media={renderMedia()}\n data-testid={dataTestId}\n className={clsx(\n 'wds-inline-prompt',\n {\n 'wds-inline-prompt--auto-width': width !== 'full',\n 'wds-inline-prompt--muted': muted,\n 'wds-inline-prompt--loading': loading,\n },\n className,\n )}\n {...restProps}\n >\n <Body>{children}</Body>\n </PrimitivePrompt>\n );\n};\n"],"names":["InlinePrompt","sentiment","Sentiment","POSITIVE","muted","loading","className","children","media","mediaLabel","width","dataTestId","restProps","surfaceSentiment","renderMedia","_jsx","BackslashCircle","size","title","ProcessIndicator","GiftBox","StatusIcon","iconLabel","PrimitivePrompt","clsx","Body"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDO,MAAMA,YAAY,GAAGA,CAAC;aAC3BC,WAAS,GAAGC,mBAAS,CAACC,QAAQ;AAC9BC,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,QAAQ;AACRC,EAAAA,KAAK,GAAG,IAAI;EACZC,UAAU;AACVC,EAAAA,KAAK,GAAG,MAAM;AACd,EAAA,aAAa,EAAEC,UAAU;EACzB,GAAGC;AAAS,CACM,KAAI;EACtB,MAAMC,gBAAgB,GAAGZ,WAAS,KAAKC,mBAAS,CAACC,QAAQ,GAAG,SAAS,GAAGF,WAAS;EAEjF,MAAMa,WAAW,GAAGA,MAAK;AACvB,IAAA,IAAIV,KAAK,EAAE;MACT,oBAAOW,cAAA,CAACC,qBAAe,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;AAAC,QAAA,aAAA,EAAY,oBAAoB;AAACC,QAAAA,KAAK,EAAET;AAAW,QAAG;AAC1F,IAAA;AAEA,IAAA,IAAIJ,OAAO,EAAE;MACX,oBACEU,cAAA,CAACI,wBAAgB,EAAA;AACf,QAAA,aAAA,EAAY,+BAA+B;AAC3CF,QAAAA,IAAI,EAAC,KAAK;AACVX,QAAAA,SAAS,EAAC;AAAqC,OAAA,CAC/C;AAEN,IAAA;IAEA,IAAIL,WAAS,KAAK,aAAa,EAAE;AAC/B,MAAA,OAAOO,KAAK,iBAAIO,cAAA,CAACK,aAAO,EAAA;AAACF,QAAAA,KAAK,EAAET;AAAW,OAAA,CAAG;AAChD,IAAA;AAEA,IAAA,OAAOD,KAAK,iBAAIO,cAAA,CAACM,kBAAU,EAAA;AAACJ,MAAAA,IAAI,EAAE,EAAG;AAAChB,MAAAA,SAAS,EAAEA,WAAU;AAACqB,MAAAA,SAAS,EAAEb;AAAW,KAAA,CAAG;EACvF,CAAC;EAED,oBACEM,cAAA,CAACQ,+BAAe,EAAA;AACdtB,IAAAA,SAAS,EAAEY,gBAAiB;IAC5BL,KAAK,EAAEM,WAAW,EAAG;AACrB,IAAA,aAAA,EAAaH,UAAW;AACxBL,IAAAA,SAAS,EAAEkB,SAAI,CACb,mBAAmB,EACnB;MACE,+BAA+B,EAAEd,KAAK,KAAK,MAAM;AACjD,MAAA,0BAA0B,EAAEN,KAAK;AACjC,MAAA,4BAA4B,EAAEC;KAC/B,EACDC,SAAS,CACT;AAAA,IAAA,GACEM,SAAS;IAAAL,QAAA,eAEbQ,cAAA,CAACU,YAAI,EAAA;AAAAlB,MAAAA,QAAA,EAAEA;KAAe;AACxB,GAAiB,CAAC;AAEtB;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InlinePrompt.mjs","sources":["../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"sourcesContent":["import { Sentiment } from '../../common';\nimport { BackslashCircle, GiftBox } from '@transferwise/icons';\nimport ProcessIndicator from '../../processIndicator';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\nimport { PrimitivePrompt } from '../PrimitivePrompt';\n\nexport type InlinePromptProps = {\n /**\n * The sentiment determines the colour scheme\n */\n sentiment?:\n | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`\n | 'proposition';\n /**\n * Replaces the icon with a spinner while waiting for the short-lived action to finish.\n * @default false\n */\n loading?: boolean;\n /**\n * While prompts cannot be fully (visually and functionally) disabled, this prop should be enabled\n * they are associated with actually disabled component (e.g. a disabled list item or input).\n * @default false\n */\n muted?: boolean;\n /**\n * Icon override for all sentiments. If the sentiment uses StatusIcon by default, it will be\n * replaced by a plain icon.\n */\n media?: React.ReactNode;\n /**\n * Override for the sentiment's-derived, default, accessible name announced by the screen readers.\n */\n mediaLabel?: string;\n /**\n * Defines the sizing strategy of the prompt component - either hugging the content or taking full width of the container.\n * @default auto\n */\n width?: 'auto' | 'full';\n id?: string;\n className?: string;\n 'data-testid'?: string;\n children: React.ReactNode;\n};\n\n/**\n * Inline prompts appear alongside a specific component on the screen. They help the user stay\n * informed, fix something, or get more out of what they're doing. <br />\n *\n * **NB:** It should be used in favour of `InlineAlert` which will be soon deprecated.\n */\nexport const InlinePrompt = ({\n sentiment = Sentiment.POSITIVE,\n muted = false,\n loading = false,\n className,\n children,\n media = null,\n mediaLabel,\n width = 'auto',\n 'data-testid': dataTestId,\n ...restProps\n}: InlinePromptProps) => {\n const surfaceSentiment = sentiment === Sentiment.POSITIVE ? 'success' : sentiment;\n\n const renderMedia = () => {\n if (muted) {\n return <BackslashCircle size={16} data-testid=\"InlinePrompt_Muted\" title={mediaLabel} />;\n }\n\n if (loading) {\n return (\n <ProcessIndicator\n data-testid=\"InlinePrompt_ProcessIndicator\"\n size=\"xxs\"\n className=\"wds-inline-prompt-process-indicator\"\n />\n );\n }\n\n if (sentiment === 'proposition') {\n return media || <GiftBox title={mediaLabel} />;\n }\n\n return media || <StatusIcon size={16} sentiment={sentiment} iconLabel={mediaLabel} />;\n };\n\n return (\n <PrimitivePrompt\n sentiment={surfaceSentiment}\n media={renderMedia()}\n data-testid={dataTestId}\n className={clsx(\n 'wds-inline-prompt',\n {\n 'wds-inline-prompt--auto-width': width !== 'full',\n 'wds-inline-prompt--muted': muted,\n 'wds-inline-prompt--loading': loading,\n },\n className,\n )}\n {...restProps}\n >\n <Body>{children}</Body>\n </PrimitivePrompt>\n );\n};\n"],"names":["InlinePrompt","sentiment","Sentiment","POSITIVE","muted","loading","className","children","media","mediaLabel","width","dataTestId","restProps","surfaceSentiment","renderMedia","_jsx","BackslashCircle","size","title","ProcessIndicator","GiftBox","StatusIcon","iconLabel","PrimitivePrompt","clsx","Body"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"InlinePrompt.mjs","sources":["../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"sourcesContent":["import { Sentiment } from '../../common';\nimport { BackslashCircle, GiftBox } from '@transferwise/icons';\nimport ProcessIndicator from '../../processIndicator';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\nimport { PrimitivePrompt } from '../PrimitivePrompt';\n\nexport type InlinePromptProps = {\n /**\n * The sentiment determines the colour scheme\n * @default Sentiment.POSITIVE\n */\n sentiment?:\n | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`\n | 'proposition';\n /**\n * Replaces the icon with a spinner while waiting for the short-lived action to finish.\n * @default false\n */\n loading?: boolean;\n /**\n * While prompts cannot be fully (visually and functionally) disabled, this prop should be enabled\n * they are associated with actually disabled component (e.g. a disabled list item or input).\n * @default false\n */\n muted?: boolean;\n /**\n * Icon override for all sentiments. If the sentiment uses StatusIcon by default, it will be\n * replaced by a plain icon.\n */\n media?: React.ReactNode;\n /**\n * Override for the sentiment's-derived, default, accessible name announced by the screen readers.\n */\n mediaLabel?: string;\n /**\n * Defines the sizing strategy of the prompt component - either hugging the content or taking full width of the container.\n * @default auto\n */\n width?: 'auto' | 'full';\n id?: string;\n className?: string;\n 'data-testid'?: string;\n children: React.ReactNode;\n};\n\n/**\n * Inline prompts appear alongside a specific component on the screen. They help the user stay\n * informed, fix something, or get more out of what they're doing. <br />\n *\n * **NB:** It should be used in favour of `InlineAlert` which will be soon deprecated.\n */\nexport const InlinePrompt = ({\n sentiment = Sentiment.POSITIVE,\n muted = false,\n loading = false,\n className,\n children,\n media = null,\n mediaLabel,\n width = 'auto',\n 'data-testid': dataTestId,\n ...restProps\n}: InlinePromptProps) => {\n const surfaceSentiment = sentiment === Sentiment.POSITIVE ? 'success' : sentiment;\n\n const renderMedia = () => {\n if (muted) {\n return <BackslashCircle size={16} data-testid=\"InlinePrompt_Muted\" title={mediaLabel} />;\n }\n\n if (loading) {\n return (\n <ProcessIndicator\n data-testid=\"InlinePrompt_ProcessIndicator\"\n size=\"xxs\"\n className=\"wds-inline-prompt-process-indicator\"\n />\n );\n }\n\n if (sentiment === 'proposition') {\n return media || <GiftBox title={mediaLabel} />;\n }\n\n return media || <StatusIcon size={16} sentiment={sentiment} iconLabel={mediaLabel} />;\n };\n\n return (\n <PrimitivePrompt\n sentiment={surfaceSentiment}\n media={renderMedia()}\n data-testid={dataTestId}\n className={clsx(\n 'wds-inline-prompt',\n {\n 'wds-inline-prompt--auto-width': width !== 'full',\n 'wds-inline-prompt--muted': muted,\n 'wds-inline-prompt--loading': loading,\n },\n className,\n )}\n {...restProps}\n >\n <Body>{children}</Body>\n </PrimitivePrompt>\n );\n};\n"],"names":["InlinePrompt","sentiment","Sentiment","POSITIVE","muted","loading","className","children","media","mediaLabel","width","dataTestId","restProps","surfaceSentiment","renderMedia","_jsx","BackslashCircle","size","title","ProcessIndicator","GiftBox","StatusIcon","iconLabel","PrimitivePrompt","clsx","Body"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDO,MAAMA,YAAY,GAAGA,CAAC;EAC3BC,SAAS,GAAGC,SAAS,CAACC,QAAQ;AAC9BC,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,QAAQ;AACRC,EAAAA,KAAK,GAAG,IAAI;EACZC,UAAU;AACVC,EAAAA,KAAK,GAAG,MAAM;AACd,EAAA,aAAa,EAAEC,UAAU;EACzB,GAAGC;AAAS,CACM,KAAI;EACtB,MAAMC,gBAAgB,GAAGZ,SAAS,KAAKC,SAAS,CAACC,QAAQ,GAAG,SAAS,GAAGF,SAAS;EAEjF,MAAMa,WAAW,GAAGA,MAAK;AACvB,IAAA,IAAIV,KAAK,EAAE;MACT,oBAAOW,GAAA,CAACC,eAAe,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;AAAC,QAAA,aAAA,EAAY,oBAAoB;AAACC,QAAAA,KAAK,EAAET;AAAW,QAAG;AAC1F,IAAA;AAEA,IAAA,IAAIJ,OAAO,EAAE;MACX,oBACEU,GAAA,CAACI,gBAAgB,EAAA;AACf,QAAA,aAAA,EAAY,+BAA+B;AAC3CF,QAAAA,IAAI,EAAC,KAAK;AACVX,QAAAA,SAAS,EAAC;AAAqC,OAAA,CAC/C;AAEN,IAAA;IAEA,IAAIL,SAAS,KAAK,aAAa,EAAE;AAC/B,MAAA,OAAOO,KAAK,iBAAIO,GAAA,CAACK,OAAO,EAAA;AAACF,QAAAA,KAAK,EAAET;AAAW,OAAA,CAAG;AAChD,IAAA;AAEA,IAAA,OAAOD,KAAK,iBAAIO,GAAA,CAACM,UAAU,EAAA;AAACJ,MAAAA,IAAI,EAAE,EAAG;AAAChB,MAAAA,SAAS,EAAEA,SAAU;AAACqB,MAAAA,SAAS,EAAEb;AAAW,KAAA,CAAG;EACvF,CAAC;EAED,oBACEM,GAAA,CAACQ,eAAe,EAAA;AACdtB,IAAAA,SAAS,EAAEY,gBAAiB;IAC5BL,KAAK,EAAEM,WAAW,EAAG;AACrB,IAAA,aAAA,EAAaH,UAAW;AACxBL,IAAAA,SAAS,EAAEkB,IAAI,CACb,mBAAmB,EACnB;MACE,+BAA+B,EAAEd,KAAK,KAAK,MAAM;AACjD,MAAA,0BAA0B,EAAEN,KAAK;AACjC,MAAA,4BAA4B,EAAEC;KAC/B,EACDC,SAAS,CACT;AAAA,IAAA,GACEM,SAAS;IAAAL,QAAA,eAEbQ,GAAA,CAACU,IAAI,EAAA;AAAAlB,MAAAA,QAAA,EAAEA;KAAe;AACxB,GAAiB,CAAC;AAEtB;;;;"}
|