@transferwise/components 38.4.1 → 39.0.0

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.
Files changed (189) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/build/es/no-polyfill/accordion/AccordionItem/AccordionItem.js +1 -1
  3. package/build/es/no-polyfill/alert/Alert.js +1 -1
  4. package/build/es/no-polyfill/checkbox/Checkbox.js +1 -1
  5. package/build/es/no-polyfill/common/Option/Option.js +1 -1
  6. package/build/es/no-polyfill/common/bottomSheet/BottomSheet.js +2 -2
  7. package/build/es/no-polyfill/common/direction.js +1 -0
  8. package/build/es/no-polyfill/common/domHelpers/index.js +1 -1
  9. package/build/es/no-polyfill/common/hocs/index.js +1 -0
  10. package/build/es/no-polyfill/common/hocs/theme/index.js +1 -0
  11. package/build/es/no-polyfill/common/hocs/theme/withTheme.js +2 -0
  12. package/build/es/no-polyfill/common/hocs/theme/withTheme.spec.js +1 -0
  13. package/build/es/no-polyfill/common/hooks/index.js +1 -1
  14. package/build/es/no-polyfill/common/hooks/useTheme/index.js +1 -0
  15. package/build/es/no-polyfill/common/hooks/useTheme/useTheme.js +1 -0
  16. package/build/es/no-polyfill/common/hooks/useTheme/useTheme.spec.js +1 -0
  17. package/build/es/no-polyfill/common/index.js +1 -1
  18. package/build/es/no-polyfill/common/locale/index.js +13 -3
  19. package/build/es/no-polyfill/common/theme.js +1 -1
  20. package/build/es/no-polyfill/dateInput/DateInput.js +2 -2
  21. package/build/es/no-polyfill/dateLookup/dateHeader/DateHeader.js +1 -1
  22. package/build/es/no-polyfill/decision/Decision.js +3 -3
  23. package/build/es/no-polyfill/drawer/Drawer.js +1 -1
  24. package/build/es/no-polyfill/dynamicFieldDefinitionList/DynamicFieldDefinitionList.js +1 -1
  25. package/build/es/no-polyfill/dynamicFieldDefinitionList/FormattedValue/FormattedValue.js +1 -1
  26. package/build/es/no-polyfill/index.js +4 -4
  27. package/build/es/no-polyfill/logo/Logo.js +1 -1
  28. package/build/es/no-polyfill/nudge/Nudge.js +1 -1
  29. package/build/es/no-polyfill/phoneNumberInput/PhoneNumberInput.js +1 -1
  30. package/build/es/no-polyfill/provider/Provider.js +1 -1
  31. package/build/es/no-polyfill/provider/Provider.spec.js +2 -0
  32. package/build/es/no-polyfill/provider/Provider.story.js +1 -0
  33. package/build/es/no-polyfill/provider/direction/DirectionProvider.js +1 -1
  34. package/build/es/no-polyfill/provider/direction/DirectionProvider.spec.js +1 -0
  35. package/build/es/no-polyfill/provider/index.js +1 -1
  36. package/build/es/no-polyfill/provider/theme/ThemeProvider.js +2 -0
  37. package/build/es/no-polyfill/provider/theme/ThemeProvider.spec.js +2 -0
  38. package/build/es/no-polyfill/provider/theme/index.js +1 -0
  39. package/build/es/no-polyfill/radio/Radio.js +1 -1
  40. package/build/es/no-polyfill/select/option/Option.js +1 -1
  41. package/build/es/no-polyfill/snackbar/Snackbar.js +1 -1
  42. package/build/es/no-polyfill/stepper/Stepper.js +1 -1
  43. package/build/es/no-polyfill/summary/Summary.js +1 -1
  44. package/build/es/no-polyfill/switch/Switch.js +1 -1
  45. package/build/es/no-polyfill/tabs/Tabs.js +1 -1
  46. package/build/es/no-polyfill/tooltip/Tooltip.js +8 -1
  47. package/build/es/no-polyfill/tooltip/Tooltip.spec.js +1 -0
  48. package/build/es/no-polyfill/tooltip/Tooltip.story.js +1 -0
  49. package/build/es/no-polyfill/upload/Upload.js +1 -1
  50. package/build/es/no-polyfill/upload/steps/completeStep/completeStep.js +1 -1
  51. package/build/es/no-polyfill/upload/steps/processingStep/processingStep.js +1 -1
  52. package/build/es/no-polyfill/uploadInput/uploadButton/UploadButton.js +1 -1
  53. package/build/es/no-polyfill/uploadInput/uploadItem/UploadItem.js +2 -2
  54. package/build/es/polyfill/accordion/AccordionItem/AccordionItem.js +1 -1
  55. package/build/es/polyfill/alert/Alert.js +1 -1
  56. package/build/es/polyfill/checkbox/Checkbox.js +1 -1
  57. package/build/es/polyfill/common/Option/Option.js +1 -1
  58. package/build/es/polyfill/common/bottomSheet/BottomSheet.js +2 -2
  59. package/build/es/polyfill/common/direction.js +1 -0
  60. package/build/es/polyfill/common/domHelpers/index.js +1 -1
  61. package/build/es/polyfill/common/hocs/index.js +1 -0
  62. package/build/es/polyfill/common/hocs/theme/index.js +1 -0
  63. package/build/es/polyfill/common/hocs/theme/withTheme.js +2 -0
  64. package/build/es/polyfill/common/hocs/theme/withTheme.spec.js +1 -0
  65. package/build/es/polyfill/common/hooks/index.js +1 -1
  66. package/build/es/polyfill/common/hooks/useTheme/index.js +1 -0
  67. package/build/es/polyfill/common/hooks/useTheme/useTheme.js +1 -0
  68. package/build/es/polyfill/common/hooks/useTheme/useTheme.spec.js +1 -0
  69. package/build/es/polyfill/common/index.js +1 -1
  70. package/build/es/polyfill/common/locale/index.js +13 -3
  71. package/build/es/polyfill/common/theme.js +1 -1
  72. package/build/es/polyfill/dateInput/DateInput.js +2 -2
  73. package/build/es/polyfill/dateLookup/dateHeader/DateHeader.js +1 -1
  74. package/build/es/polyfill/decision/Decision.js +3 -3
  75. package/build/es/polyfill/drawer/Drawer.js +1 -1
  76. package/build/es/polyfill/dynamicFieldDefinitionList/DynamicFieldDefinitionList.js +1 -1
  77. package/build/es/polyfill/dynamicFieldDefinitionList/FormattedValue/FormattedValue.js +1 -1
  78. package/build/es/polyfill/index.js +4 -4
  79. package/build/es/polyfill/logo/Logo.js +1 -1
  80. package/build/es/polyfill/nudge/Nudge.js +1 -1
  81. package/build/es/polyfill/phoneNumberInput/PhoneNumberInput.js +1 -1
  82. package/build/es/polyfill/provider/Provider.js +1 -1
  83. package/build/es/polyfill/provider/Provider.spec.js +2 -0
  84. package/build/es/polyfill/provider/Provider.story.js +1 -0
  85. package/build/es/polyfill/provider/direction/DirectionProvider.js +1 -1
  86. package/build/es/polyfill/provider/direction/DirectionProvider.spec.js +1 -0
  87. package/build/es/polyfill/provider/index.js +1 -1
  88. package/build/es/polyfill/provider/theme/ThemeProvider.js +2 -0
  89. package/build/es/polyfill/provider/theme/ThemeProvider.spec.js +2 -0
  90. package/build/es/polyfill/provider/theme/index.js +1 -0
  91. package/build/es/polyfill/radio/Radio.js +1 -1
  92. package/build/es/polyfill/select/option/Option.js +1 -1
  93. package/build/es/polyfill/snackbar/Snackbar.js +1 -1
  94. package/build/es/polyfill/stepper/Stepper.js +1 -1
  95. package/build/es/polyfill/summary/Summary.js +1 -1
  96. package/build/es/polyfill/switch/Switch.js +1 -1
  97. package/build/es/polyfill/tabs/Tabs.js +1 -1
  98. package/build/es/polyfill/tooltip/Tooltip.js +8 -1
  99. package/build/es/polyfill/tooltip/Tooltip.spec.js +1 -0
  100. package/build/es/polyfill/tooltip/Tooltip.story.js +1 -0
  101. package/build/es/polyfill/upload/Upload.js +1 -1
  102. package/build/es/polyfill/upload/steps/completeStep/completeStep.js +1 -1
  103. package/build/es/polyfill/upload/steps/processingStep/processingStep.js +1 -1
  104. package/build/es/polyfill/uploadInput/uploadButton/UploadButton.js +1 -1
  105. package/build/es/polyfill/uploadInput/uploadItem/UploadItem.js +2 -2
  106. package/build/main.css +1 -1
  107. package/build/styles/accordion/Accordion.css +1 -1
  108. package/build/styles/avatar/Avatar.css +1 -1
  109. package/build/styles/badge/Badge.css +1 -1
  110. package/build/styles/button/Button.css +1 -1
  111. package/build/styles/card/Card.css +1 -1
  112. package/build/styles/checkboxButton/CheckboxButton.css +1 -1
  113. package/build/styles/chips/Chip.css +1 -1
  114. package/build/styles/circularButton/CircularButton.css +1 -1
  115. package/build/styles/common/Option/Option.css +1 -1
  116. package/build/styles/common/RadioButton/RadioButton.css +1 -1
  117. package/build/styles/common/bottomSheet/BottomSheet.css +1 -1
  118. package/build/styles/common/closeButton/CloseButton.css +1 -1
  119. package/build/styles/dateLookup/DateLookup.css +1 -1
  120. package/build/styles/dateLookup/dateTrigger/DateTrigger.css +1 -1
  121. package/build/styles/decision/Decision.css +1 -1
  122. package/build/styles/definitionList/DefinitionList.css +1 -1
  123. package/build/styles/dimmer/Dimmer.css +1 -1
  124. package/build/styles/drawer/Drawer.css +1 -1
  125. package/build/styles/emphasis/Emphasis.css +1 -1
  126. package/build/styles/flowNavigation/FlowNavigation.css +1 -1
  127. package/build/styles/flowNavigation/animatedLabel/AnimatedLabel.css +1 -1
  128. package/build/styles/flowNavigation/backButton/BackButton.css +1 -1
  129. package/build/styles/header/Header.css +1 -1
  130. package/build/styles/info/Info.css +1 -1
  131. package/build/styles/instructionsList/InstructionsList.css +1 -1
  132. package/build/styles/lab/mobileNav/MobileNav.css +1 -1
  133. package/build/styles/lab/pagination/Pagination.css +1 -1
  134. package/build/styles/link/Link.css +1 -1
  135. package/build/styles/loader/Loader.css +1 -1
  136. package/build/styles/main.css +1 -1
  137. package/build/styles/moneyInput/MoneyInput.css +1 -1
  138. package/build/styles/navigationOption/NavigationOption.css +1 -1
  139. package/build/styles/navigationOptionsList/NavigationOptionsList.css +1 -1
  140. package/build/styles/nudge/Nudge.css +1 -1
  141. package/build/styles/overlayHeader/OverlayHeader.css +1 -1
  142. package/build/styles/phoneNumberInput/PhoneNumberInput.css +1 -1
  143. package/build/styles/popover/Popover.css +1 -1
  144. package/build/styles/section/Section.css +1 -1
  145. package/build/styles/slidingPanel/SlidingPanel.css +1 -1
  146. package/build/styles/snackbar/Snackbar.css +1 -1
  147. package/build/styles/stepper/Stepper.css +1 -1
  148. package/build/styles/summary/Summary.css +1 -1
  149. package/build/styles/switch/Switch.css +1 -1
  150. package/build/styles/tabs/Tabs.css +1 -1
  151. package/build/styles/tile/Tile.css +1 -1
  152. package/build/styles/tooltip/Tooltip.css +1 -1
  153. package/build/styles/typeahead/Typeahead.css +1 -1
  154. package/build/styles/typeahead/typeaheadOption/TypeaheadOption.css +1 -1
  155. package/build/styles/uploadInput/UploadInput.css +1 -1
  156. package/build/styles/uploadInput/uploadButton/UploadButton.css +1 -1
  157. package/build/styles/uploadInput/uploadItem/UploadItem.css +1 -1
  158. package/build/types/common/direction.d.ts +6 -0
  159. package/build/types/common/domHelpers/index.d.ts +2 -1
  160. package/build/types/common/hocs/index.d.ts +1 -0
  161. package/build/types/common/hocs/theme/index.d.ts +1 -0
  162. package/build/types/common/hocs/theme/withTheme.d.ts +10 -0
  163. package/build/types/common/hocs/theme/withTheme.spec.d.ts +1 -0
  164. package/build/types/common/hooks/index.d.ts +3 -2
  165. package/build/types/common/hooks/useDirection/useDirection.d.ts +3 -2
  166. package/build/types/common/hooks/useTheme/index.d.ts +1 -0
  167. package/build/types/common/hooks/useTheme/useTheme.d.ts +1 -0
  168. package/build/types/common/hooks/useTheme/useTheme.spec.d.ts +1 -0
  169. package/build/types/common/index.d.ts +2 -0
  170. package/build/types/common/locale/index.d.ts +23 -2
  171. package/build/types/common/propsValues/position.d.ts +4 -0
  172. package/build/types/common/theme.d.ts +5 -2
  173. package/build/types/index.d.ts +5 -3
  174. package/build/types/provider/Provider.spec.d.ts +1 -0
  175. package/build/types/provider/Provider.story.d.ts +23 -0
  176. package/build/types/provider/direction/DirectionProvider.d.ts +8 -18
  177. package/build/types/provider/direction/DirectionProvider.spec.d.ts +1 -0
  178. package/build/types/provider/index.d.ts +2 -0
  179. package/build/types/provider/theme/ThemeProvider.d.ts +8 -0
  180. package/build/types/provider/theme/ThemeProvider.spec.d.ts +1 -0
  181. package/build/types/provider/theme/index.d.ts +1 -0
  182. package/build/types/test-utils/index.d.ts +0 -8
  183. package/build/types/tooltip/Tooltip.d.ts +9 -18
  184. package/build/types/tooltip/Tooltip.spec.d.ts +1 -0
  185. package/build/types/tooltip/Tooltip.story.d.ts +12 -0
  186. package/build/umd/no-polyfill/main.js +1 -1
  187. package/build/umd/polyfill/main.js +1 -1
  188. package/package.json +10 -10
  189. package/scripts/generate-type-declarations.js +85 -0
@@ -2,12 +2,12 @@
2
2
  * Types
3
3
  */ /**
4
4
  * Components
5
- */export{default as Accordion}from"./accordion";export{default as ActionOption}from"./actionOption";export{default as Alert}from"./alert";export{default as Avatar}from"./avatar";export{default as AvatarWrapper}from"./avatarWrapper";export{default as Badge}from"./badge";export{default as BottomSheet}from"./common/bottomSheet";export{default as Button}from"./button";export{default as Card}from"./card";export{default as Checkbox}from"./checkbox";export{default as CheckboxButton}from"./checkboxButton";export{default as CheckboxOption}from"./checkboxOption";export{default as Chevron}from"./chevron";export{default as Chips,Chip}from"./chips";export{default as CircularButton}from"./circularButton";export{default as DateInput}from"./dateInput";export{default as DateLookup}from"./dateLookup";export{default as Decision}from"./decision";export{default as DefinitionList}from"./definitionList";export{default as Dimmer}from"./dimmer";export{default as Drawer}from"./drawer";export{default as DropFade}from"./dropFade";export{default as DynamicFieldDefinitionList}from"./dynamicFieldDefinitionList";export{default as Emphasis}from"./emphasis";export{default as FlowNavigation}from"./flowNavigation";export{default as Header}from"./header";export{default as Image}from"./image";export{default as Info}from"./info";export{default as InlineAlert}from"./inlineAlert";export{default as InputWithDisplayFormat}from"./inputWithDisplayFormat";export{default as InstructionsList}from"./instructionsList";export{default as Link}from"./link";export{default as Loader}from"./loader";export{default as Logo}from"./logo";export{default as Markdown}from"./markdown";export{default as Modal}from"./modal";export{default as Money}from"./money";export{default as MoneyInput}from"./moneyInput";export{default as NavigationOption}from"./navigationOption";export{default as NavigationOptionsList}from"./navigationOptionsList";export{default as Nudge}from"./nudge";export{default as OverlayHeader}from"./overlayHeader";export{default as PhoneNumberInput}from"./phoneNumberInput";export{default as Popover}from"./popover";export{default as ProcessIndicator}from"./processIndicator";export{default as Provider}from"./provider";export{default as Radio}from"./radio";export{default as RadioGroup}from"./radioGroup";export{default as RadioOption}from"./radioOption";export{default as Section}from"./section";export{default as Select}from"./select";export{default as SlidingPanel}from"./slidingPanel";export{default as SnackbarPortal}from"./snackbar/Snackbar";export{default as SnackbarProvider}from"./snackbar/SnackbarProvider";export{default as Stepper}from"./stepper";export{default as Sticky}from"./sticky";export{default as Summary}from"./summary";export{default as Switch}from"./switch";export{default as SwitchOption}from"./switchOption";export{default as Tabs}from"./tabs";export{default as TextareaWithDisplayFormat}from"./textareaWithDisplayFormat";export{default as Tooltip}from"./tooltip";export{default as Typeahead}from"./typeahead";export{default as Upload}from"./upload";export{default as UploadInput}from"./uploadInput";export{SnackbarConsumer,SnackbarContext}from"./snackbar/SnackbarContext";/**
5
+ */export{default as Accordion}from"./accordion";export{default as ActionOption}from"./actionOption";export{default as Alert}from"./alert";export{default as Avatar}from"./avatar";export{default as AvatarWrapper}from"./avatarWrapper";export{default as Badge}from"./badge";export{default as BottomSheet}from"./common/bottomSheet";export{default as Button}from"./button";export{default as Card}from"./card";export{default as Checkbox}from"./checkbox";export{default as CheckboxButton}from"./checkboxButton";export{default as CheckboxOption}from"./checkboxOption";export{default as Chevron}from"./chevron";export{default as Chips,Chip}from"./chips";export{default as CircularButton}from"./circularButton";export{default as DateInput}from"./dateInput";export{default as DateLookup}from"./dateLookup";export{default as Decision}from"./decision";export{default as DefinitionList}from"./definitionList";export{default as Dimmer}from"./dimmer";export{default as Drawer}from"./drawer";export{default as DropFade}from"./dropFade";export{default as DynamicFieldDefinitionList}from"./dynamicFieldDefinitionList";export{default as Emphasis}from"./emphasis";export{default as FlowNavigation}from"./flowNavigation";export{default as Header}from"./header";export{default as Image}from"./image";export{default as Info}from"./info";export{default as InlineAlert}from"./inlineAlert";export{default as InputWithDisplayFormat}from"./inputWithDisplayFormat";export{default as InstructionsList}from"./instructionsList";export{default as Link}from"./link";export{default as Loader}from"./loader";export{default as Logo}from"./logo";export{default as Markdown}from"./markdown";export{default as Modal}from"./modal";export{default as Money}from"./money";export{default as MoneyInput}from"./moneyInput";export{default as NavigationOption}from"./navigationOption";export{default as NavigationOptionsList}from"./navigationOptionsList";export{default as Nudge}from"./nudge";export{default as OverlayHeader}from"./overlayHeader";export{default as PhoneNumberInput}from"./phoneNumberInput";export{default as Popover}from"./popover";export{default as ProcessIndicator}from"./processIndicator";export{default as Provider,DirectionProvider}from"./provider";export{default as Radio}from"./radio";export{default as RadioGroup}from"./radioGroup";export{default as RadioOption}from"./radioOption";export{default as Section}from"./section";export{default as Select}from"./select";export{default as SlidingPanel}from"./slidingPanel";export{default as SnackbarPortal}from"./snackbar/Snackbar";export{default as SnackbarProvider}from"./snackbar/SnackbarProvider";export{default as Stepper}from"./stepper";export{default as Sticky}from"./sticky";export{default as Summary}from"./summary";export{default as Switch}from"./switch";export{default as SwitchOption}from"./switchOption";export{default as Tabs}from"./tabs";export{default as TextareaWithDisplayFormat}from"./textareaWithDisplayFormat";export{default as Tooltip}from"./tooltip";export{default as Typeahead}from"./typeahead";export{default as Upload}from"./upload";export{default as UploadInput}from"./uploadInput";export{SnackbarConsumer,SnackbarContext}from"./snackbar/SnackbarContext";/**
6
6
  * Hooks
7
- */export{default as useSnackbar}from"./snackbar/useSnackbar";/**
7
+ */export{default as useSnackbar}from"./snackbar/useSnackbar";export{useDirection}from"./common/hooks";/**
8
8
  * Enums
9
- */export{Size,Width,Sentiment,Priority,ControlType,Type,Theme,DateMode,MonthFormat,Position,Scroll,ProfileType,Breakpoint,Layout,Status,MarkdownNodeType}from"./common";export{AvatarType}from"./avatar";export{InfoPresentation}from"./info";export{UploadStep}from"./upload";export{DecisionPresentation,DecisionType}from"./decision";export{AlertArrowPosition}from"./alert/withArrow";export{LogoType}from"./logo";export{FileType}from"./common";/**
9
+ */export{Direction,Size,Width,Sentiment,Priority,ControlType,Type,Theme,DateMode,MonthFormat,Position,Scroll,ProfileType,Breakpoint,Layout,Status,MarkdownNodeType}from"./common";export{AvatarType}from"./avatar";export{InfoPresentation}from"./info";export{UploadStep}from"./upload";export{DecisionPresentation,DecisionType}from"./decision";export{AlertArrowPosition}from"./alert/withArrow";export{LogoType}from"./logo";export{FileType}from"./common";/**
10
10
  * Utils
11
- */export{SUPPORTED_LANGUAGES,DEFAULT_LANG,DEFAULT_LOCALE,adjustLocale,getLangFromLocale,getCountryFromLocale}from"./common";/**
11
+ */export{SUPPORTED_LANGUAGES,RTL_LANGUAGES,DEFAULT_LANG,DEFAULT_LOCALE,adjustLocale,getLangFromLocale,getCountryFromLocale,getDirectionFromLocale,isServerSide,isBrowser}from"./common";/**
12
12
  * Translations
13
13
  */export{default as translations}from"./i18n";
@@ -1 +1 @@
1
- import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import"core-js/modules/es.array.concat.js";import classNames from"classnames";import PropTypes from"prop-types";import{Breakpoint}from"../common";import{isServerSideRendering}from"../common/domHelpers";import{useClientWidth}from"../common/hooks";import{LogoType}from"./logoTypes";import{jsx as _jsx}from"react/jsx-runtime";var baseUrl="https://wise.com/public-resources/assets/logos/wise/",logoPaths={WISE:"brand_logo.svg",WISE_BUSINESS:"brand_logo_business.svg",WISE_INVERSE:"brand_logo_inverse.svg",WISE_BUSINESS_INVERSE:"brand_logo_business_inverse.svg",WISE_FLAG:"brand_flag.svg"},Logo=function(a){var b=a.className,c=a.inverse,d=a.type,e=useClientWidth({ref:isServerSideRendering()?void 0:window}),f=_slicedToArray(e,1),g=f[0],h=g<Breakpoint.SMALL,i=h?logoPaths.WISE_FLAG:logoPaths["".concat(d).concat(c?"_INVERSE":"")];return/*#__PURE__*/_jsx("img",{className:classNames("np-logo",b),alt:d===LogoType.WISE?"Wise":"Wise business",src:"".concat(baseUrl).concat(i)})};Logo.propTypes={/** Extra classes applied to Logo */className:PropTypes.string,/** If true, will use dark colours for dark on light theme */inverse:PropTypes.bool,/** What type of logo to display */type:PropTypes.oneOf(["WISE","WISE_BUSINESS"])},Logo.defaultProps={className:void 0,inverse:!1,type:LogoType.WISE};export default Logo;
1
+ import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import"core-js/modules/es.array.concat.js";import classNames from"classnames";import PropTypes from"prop-types";import{Breakpoint}from"../common";import{isServerSide}from"../common/domHelpers";import{useClientWidth}from"../common/hooks";import{LogoType}from"./logoTypes";import{jsx as _jsx}from"react/jsx-runtime";var baseUrl="https://wise.com/public-resources/assets/logos/wise/",logoPaths={WISE:"brand_logo.svg",WISE_BUSINESS:"brand_logo_business.svg",WISE_INVERSE:"brand_logo_inverse.svg",WISE_BUSINESS_INVERSE:"brand_logo_business_inverse.svg",WISE_FLAG:"brand_flag.svg"},Logo=function(a){var b=a.className,c=a.inverse,d=a.type,e=useClientWidth({ref:isServerSide()?void 0:window}),f=_slicedToArray(e,1),g=f[0],h=g<Breakpoint.SMALL,i=h?logoPaths.WISE_FLAG:logoPaths["".concat(d).concat(c?"_INVERSE":"")];return/*#__PURE__*/_jsx("img",{className:classNames("np-logo",b),alt:d===LogoType.WISE?"Wise":"Wise business",src:"".concat(baseUrl).concat(i)})};Logo.propTypes={/** Extra classes applied to Logo */className:PropTypes.string,/** If true, will use dark colours for dark on light theme */inverse:PropTypes.bool,/** What type of logo to display */type:PropTypes.oneOf(["WISE","WISE_BUSINESS"])},Logo.defaultProps={className:void 0,inverse:!1,type:LogoType.WISE};export default Logo;
@@ -1 +1 @@
1
- import"core-js/modules/es.string.link.js";import{Cross as CrossIcon}from"@transferwise/icons";import classNames from"classnames";import PropTypes from"prop-types";import{useDirection}from"../common/hooks";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var Nudge=function(a){var b=a.media,c=a.title,d=a.link,e=a.href,f=a.onClick,g=a.onDismiss,h=a.id,i=a.className,j=useDirection(),k=j.isRTL;return/*#__PURE__*/_jsxs("div",{className:classNames("tw-nudge media",i),id:h,children:[/*#__PURE__*/_jsx("div",{className:classNames("align-self-start",{"media-left":!k,"media-right":k}),children:b}),/*#__PURE__*/_jsxs("div",{className:"media-body",children:[/*#__PURE__*/_jsx("div",{className:"tw-nudge__title media-heading h5",children:c}),/*#__PURE__*/_jsx("a",{href:e,className:"tw-nudge__link",onClick:f,children:d})]}),/*#__PURE__*/_jsx("div",{className:classNames("align-self-start",{"media-right":!k,"media-left":k}),children:/*#__PURE__*/_jsx("button",{type:"button",className:"close","aria-label":"close",onClick:g,children:/*#__PURE__*/_jsx(CrossIcon,{})})})]})};Nudge.propTypes={media:PropTypes.node.isRequired,title:PropTypes.node.isRequired,link:PropTypes.node.isRequired,href:PropTypes.string.isRequired,onClick:PropTypes.func,onDismiss:PropTypes.func.isRequired,id:PropTypes.string,className:PropTypes.string},Nudge.defaultProps={id:null,className:null,onClick:void 0};export default Nudge;
1
+ import"core-js/modules/es.string.link.js";import classNames from"classnames";import PropTypes from"prop-types";import CloseButton from"../common/closeButton";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var Nudge=function(a){var b=a.media,c=a.title,d=a.link,e=a.href,f=a.onClick,g=a.onDismiss,h=a.id,i=a.className;return/*#__PURE__*/_jsxs("div",{className:classNames("tw-nudge media",i),id:h,children:[/*#__PURE__*/_jsx("div",{className:"align-self-start media-left",children:b}),/*#__PURE__*/_jsxs("div",{className:"media-body",children:[/*#__PURE__*/_jsx("div",{className:"tw-nudge__title media-heading title-4",children:c}),/*#__PURE__*/_jsx("a",{href:e,className:"tw-nudge__link",onClick:f,children:d})]}),/*#__PURE__*/_jsx("div",{className:"align-self-start media-right",children:/*#__PURE__*/_jsx(CloseButton,{size:16,onClick:g})})]})};Nudge.propTypes={media:PropTypes.node.isRequired,title:PropTypes.node.isRequired,link:PropTypes.node.isRequired,href:PropTypes.string.isRequired,onClick:PropTypes.func,onDismiss:PropTypes.func.isRequired,id:PropTypes.string,className:PropTypes.string},Nudge.defaultProps={id:null,className:null,onClick:void 0};export default Nudge;
@@ -1 +1 @@
1
- import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import"core-js/modules/es.array.map.js";import"core-js/modules/es.array.join.js";import"core-js/modules/es.regexp.exec.js";import"core-js/modules/es.string.replace.js";import"core-js/modules/es.array.find.js";import"core-js/modules/es.regexp.constructor.js";import"core-js/modules/es.regexp.to-string.js";import{isArray}from"@transferwise/neptune-validation";import classNames from"classnames";import PropTypes from"prop-types";import{useState,useEffect}from"react";import{useIntl}from"react-intl";import{Size}from"../common";import{useDirection}from"../common/hooks";import Select from"../select";import countries from"./data/countries";import{explodeNumberModel,filterOptionsForQuery,isValidPhoneNumber,cleanNumber,setDefaultPrefix,isStringNumeric,sortArrayByProperty,groupCountriesByPrefix}from"./utils";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var ALLOWED_PHONE_CHARS=/^$|^[\d-\s]+$/,PhoneNumberInput=function(a){var b=a.onChange,c=a.searchPlaceholder,d=a.disabled,e=a.required,f=a.size,g=a.placeholder,h=a.onFocus,i=a.onBlur,j=a.countryCode,k=useIntl(),l=k.locale,m=useDirection(),n=m.isRTL,o=function(){var b=a.initialValue,c=b?cleanNumber(b):null;return c&&isValidPhoneNumber(c)?c:null},p=useState(o()),q=_slicedToArray(p,2),r=q[0],s=q[1],t=useState(o()),u=_slicedToArray(t,2),v=u[0],w=u[1],x=useState(""),y=_slicedToArray(x,2),z=y[0],A=y[1],B=groupCountriesByPrefix(sortArrayByProperty(countries,"iso3")),C=groupCountriesByPrefix(sortArrayByProperty(countries,"phone")),D=function(a){var b=setDefaultPrefix(l,j),c="";if(a){var d=explodeNumberModel(a);b=d.prefix,c=d.suffix}return{prefix:b,suffix:c}},E=function getSelectOptions(){var a=filterOptionsForQuery(isStringNumeric(z)?C:B,z);return a.map(function(a){var b=a.phone,c=a.iso3,d=a.iso2,e="";return c?e=isArray(c)?c.join(", "):c:d&&(e=isArray(d)?d.join(", "):d),{value:b,label:b,note:e}})}();useEffect(function(){var a=isValidPhoneNumber(r)?cleanNumber(r):null;a!==v&&(b(a),w({newbroadcastValue:a}))},[r]);var F=D(r),G=F.prefix,H=F.suffix;return/*#__PURE__*/_jsxs("div",{className:classNames("tw-telephone",{"tw-telephone--rtl":n}),children:[/*#__PURE__*/_jsx("div",{className:"tw-telephone__country-select",children:/*#__PURE__*/_jsx(Select,{options:E,selected:{value:G,label:G},placeholder:"Select an option...",searchPlaceholder:c,searchValue:z,required:e,disabled:d,size:f,onChange:function handleChangeSelect(a){var b=D(r),c=b.suffix,d=a.value;A(""),s(d+c)},onSearchChange:function onSearchChange(a){return A(a)}})}),/*#__PURE__*/_jsx("div",{className:"tw-telephone__number-input",children:/*#__PURE__*/_jsx("div",{className:"input-group input-group-".concat(f),children:/*#__PURE__*/_jsx("input",{name:"phoneNumber",inputMode:"numeric",value:H,type:"text",className:"form-control",disabled:d,required:e,placeholder:g,onChange:function handleInputChange(a){var b=a.target.value;if(ALLOWED_PHONE_CHARS.test(b)){var c=D(r),d=c.prefix;s(d+b)}},onPaste:function handlePaste(a){if(a.nativeEvent.clipboardData){var b=(a.nativeEvent.clipboardData.getData("text/plain")||"").replace(/(\s|-)+/g,""),c=E.find(function(a){var c=a.value;return new RegExp("^\\".concat(c)).test(b)});c&&ALLOWED_PHONE_CHARS.test(b.replace(c.value,""))&&s(b)}},onFocus:h,onBlur:i})})})]})};PhoneNumberInput.propTypes={required:PropTypes.bool,disabled:PropTypes.bool,initialValue:PropTypes.string,onChange:PropTypes.func.isRequired,onFocus:PropTypes.func,onBlur:PropTypes.func,countryCode:PropTypes.string,searchPlaceholder:PropTypes.string,size:PropTypes.oneOf(["sm","md","lg"]),placeholder:PropTypes.string},PhoneNumberInput.defaultProps={required:!1,disabled:!1,initialValue:null,onFocus:function onFocus(){},onBlur:function onBlur(){},countryCode:null,searchPlaceholder:"Prefix",size:Size.MEDIUM,placeholder:""};export default PhoneNumberInput;
1
+ import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import"core-js/modules/es.array.map.js";import"core-js/modules/es.array.join.js";import"core-js/modules/es.regexp.exec.js";import"core-js/modules/es.string.replace.js";import"core-js/modules/es.array.find.js";import"core-js/modules/es.regexp.constructor.js";import"core-js/modules/es.regexp.to-string.js";import{isArray}from"@transferwise/neptune-validation";import PropTypes from"prop-types";import{useState,useEffect}from"react";import{useIntl}from"react-intl";import{Size}from"../common";import Select from"../select";import countries from"./data/countries";import{explodeNumberModel,filterOptionsForQuery,isValidPhoneNumber,cleanNumber,setDefaultPrefix,isStringNumeric,sortArrayByProperty,groupCountriesByPrefix}from"./utils";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var ALLOWED_PHONE_CHARS=/^$|^[\d-\s]+$/,PhoneNumberInput=function(a){var b=a.onChange,c=a.searchPlaceholder,d=a.disabled,e=a.required,f=a.size,g=a.placeholder,h=a.onFocus,i=a.onBlur,j=a.countryCode,k=useIntl(),l=k.locale,m=function(){var b=a.initialValue,c=b?cleanNumber(b):null;return c&&isValidPhoneNumber(c)?c:null},n=useState(m()),o=_slicedToArray(n,2),p=o[0],q=o[1],r=useState(m()),s=_slicedToArray(r,2),t=s[0],u=s[1],v=useState(""),w=_slicedToArray(v,2),x=w[0],y=w[1],z=groupCountriesByPrefix(sortArrayByProperty(countries,"iso3")),A=groupCountriesByPrefix(sortArrayByProperty(countries,"phone")),B=function(a){var b=setDefaultPrefix(l,j),c="";if(a){var d=explodeNumberModel(a);b=d.prefix,c=d.suffix}return{prefix:b,suffix:c}},C=function getSelectOptions(){var a=filterOptionsForQuery(isStringNumeric(x)?A:z,x);return a.map(function(a){var b=a.phone,c=a.iso3,d=a.iso2,e="";return c?e=isArray(c)?c.join(", "):c:d&&(e=isArray(d)?d.join(", "):d),{value:b,label:b,note:e}})}();useEffect(function(){var a=isValidPhoneNumber(p)?cleanNumber(p):null;a!==t&&(b(a),u({newbroadcastValue:a}))},[p]);var D=B(p),E=D.prefix,F=D.suffix;return/*#__PURE__*/_jsxs("div",{className:"tw-telephone",children:[/*#__PURE__*/_jsx("div",{className:"tw-telephone__country-select",children:/*#__PURE__*/_jsx(Select,{options:C,selected:{value:E,label:E},placeholder:"Select an option...",searchPlaceholder:c,searchValue:x,required:e,disabled:d,size:f,onChange:function handleChangeSelect(a){var b=B(p),c=b.suffix,d=a.value;y(""),q(d+c)},onSearchChange:function onSearchChange(a){return y(a)}})}),/*#__PURE__*/_jsx("div",{className:"tw-telephone__number-input",children:/*#__PURE__*/_jsx("div",{className:"input-group input-group-".concat(f),children:/*#__PURE__*/_jsx("input",{name:"phoneNumber",inputMode:"numeric",value:F,type:"text",className:"form-control",disabled:d,required:e,placeholder:g,onChange:function handleInputChange(a){var b=a.target.value;if(ALLOWED_PHONE_CHARS.test(b)){var c=B(p),d=c.prefix;q(d+b)}},onPaste:function handlePaste(a){if(a.nativeEvent.clipboardData){var b=(a.nativeEvent.clipboardData.getData("text/plain")||"").replace(/(\s|-)+/g,""),c=C.find(function(a){var c=a.value;return new RegExp("^\\".concat(c)).test(b)});c&&ALLOWED_PHONE_CHARS.test(b.replace(c.value,""))&&q(b)}},onFocus:h,onBlur:i})})})]})};PhoneNumberInput.propTypes={required:PropTypes.bool,disabled:PropTypes.bool,initialValue:PropTypes.string,onChange:PropTypes.func.isRequired,onFocus:PropTypes.func,onBlur:PropTypes.func,countryCode:PropTypes.string,searchPlaceholder:PropTypes.string,size:PropTypes.oneOf(["sm","md","lg"]),placeholder:PropTypes.string},PhoneNumberInput.defaultProps={required:!1,disabled:!1,initialValue:null,onFocus:function onFocus(){},onBlur:function onBlur(){},countryCode:null,searchPlaceholder:"Prefix",size:Size.MEDIUM,placeholder:""};export default PhoneNumberInput;
@@ -1 +1 @@
1
- import"core-js/modules/es.array.concat.js";import PropTypes from"prop-types";import{IntlProvider}from"react-intl";import{DEFAULT_LOCALE,adjustLocale}from"../common/locale";import en from"../i18n/en.json";import{DirectionProvider}from"./direction";import{jsx as _jsx}from"react/jsx-runtime";var Provider=function(a){var b,c=a.i18n,d=a.children,e=c.locale,f=c.messages,g=c.defaultRichTextElements,h=adjustLocale(e);return null===h?(console.warn("Unsupported locale value was provided: '".concat(e,"', defaulting to '").concat(DEFAULT_LOCALE,"'")),b={locale:DEFAULT_LOCALE,messages:en}):b={locale:h,messages:f},/*#__PURE__*/_jsx(DirectionProvider,{locale:b.locale,children:/*#__PURE__*/_jsx(IntlProvider,{defaultLocale:DEFAULT_LOCALE,locale:b.locale,messages:b.messages,defaultRichTextElements:g,children:d})})};Provider.propTypes={i18n:PropTypes.shape({locale:PropTypes.string.isRequired,messages:PropTypes.shape({}).isRequired,defaultRichTextElements:PropTypes.shape({})}).isRequired,children:PropTypes.node},Provider.defaultProps={children:void 0};export default Provider;
1
+ import"core-js/modules/es.array.concat.js";import PropTypes from"prop-types";import{IntlProvider}from"react-intl";import{adjustLocale,DEFAULT_LOCALE,getDirectionFromLocale}from"../common";import en from"../i18n/en.json";import{DirectionProvider}from"./direction";import{jsx as _jsx}from"react/jsx-runtime";var Provider=function(a){var b,c=a.i18n,d=a.children,e=c.locale,f=c.messages,g=c.defaultRichTextElements,h=adjustLocale(e);return null===h?(console.warn("Unsupported locale value was provided: '".concat(e,"', defaulting to '").concat(DEFAULT_LOCALE,"'")),b={locale:DEFAULT_LOCALE,messages:en}):b={locale:h,messages:f},/*#__PURE__*/_jsx(DirectionProvider,{direction:getDirectionFromLocale(e),children:/*#__PURE__*/_jsx(IntlProvider,{defaultLocale:DEFAULT_LOCALE,locale:b.locale,messages:b.messages,defaultRichTextElements:g,children:d})})};Provider.propTypes={i18n:PropTypes.shape({locale:PropTypes.string.isRequired,messages:PropTypes.shape({}).isRequired,defaultRichTextElements:PropTypes.shape({})}).isRequired,children:PropTypes.node},Provider.defaultProps={children:void 0};export default Provider;
@@ -0,0 +1,2 @@
1
+ import _defineProperty from"@babel/runtime/helpers/defineProperty";import _asyncToGenerator from"@babel/runtime/helpers/asyncToGenerator";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import _regeneratorRuntime from"@babel/runtime/regenerator";import"core-js/modules/es.object.to-string.js";import"core-js/modules/es.promise.js";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";import{render,waitFor,screen}from"@testing-library/react";import{FormattedMessage,useIntl}from"react-intl";import closeButtonMessages from"../common/closeButton/CloseButton.messages";import Provider from".";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";describe("Provider",function(){beforeAll(function(){jest.spyOn(console,"error").mockImplementation(function(){return jest.fn()}),jest.spyOn(console,"error").mockImplementation(function(){return jest.fn()}),jest.spyOn(console,"warn").mockImplementation(function(){return jest.fn()})}),afterAll(function(){jest.restoreAllMocks()}),it("does not add any elements in the DOM",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function a(){var b,c,d,e;return _regeneratorRuntime.wrap(function(a){for(;;)switch(a.prev=a.next){case 0:return b="en",a.next=3,import("../i18n/".concat(b,".json"));case 3:c=a.sent,d=render(/*#__PURE__*/_jsx(Provider,{i18n:{locale:b,messages:c}})),e=d.container,expect(e).toBeEmptyDOMElement();case 6:case"end":return a.stop();}},a)}))),it.each([["zh-HK","zh-HK"],["ru","ru"],["en-GB","en-GB"],["en-US","en-US"],["en_US","en-US"],["en_GB","en-GB"],["ja","ja"],["ja-JP","ja-JP"],["","en-GB"],[" ","en-GB"],[null,"en-GB"],[void 0,"en-GB"]])("check locale value \"%s\"",function(a,b){var c=render(/*#__PURE__*/ // @ts-expect-error 2322
2
+ _jsx(Provider,{i18n:{locale:a,messages:{}},children:/*#__PURE__*/_jsx(function TestComponent(){var a=useIntl();return/*#__PURE__*/_jsxs(_Fragment,{children:["locale: ",a.locale]})},{})})),d=c.container;expect(d).toHaveTextContent("locale: ".concat(b))}),it.each([["ru","\u0417\u0430\u043A\u0440\u044B\u0442\u044C"],["en","Close"]])("switching locale (%s)",/*#__PURE__*/function(){var a=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function a(b,c){var d;return _regeneratorRuntime.wrap(function(a){for(;;)switch(a.prev=a.next){case 0:return expect(document.body).toBeEmptyDOMElement(),a.next=3,import("../i18n/".concat(b,".json"));case 3:return d=a.sent,render(/*#__PURE__*/_jsx(Provider,{i18n:{locale:b,messages:d},children:/*#__PURE__*/_jsx(FormattedMessage,_objectSpread({},closeButtonMessages.ariaLabel))})),a.next=7,waitFor(function(){expect(screen.getByText(c)).toBeInTheDocument()});case 7:case"end":return a.stop();}},a)}));return function(){return a.apply(this,arguments)}}())});
@@ -0,0 +1 @@
1
+ import _defineProperty from"@babel/runtime/helpers/defineProperty";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import{FormattedMessage}from"react-intl";import{Provider,Money}from"..";import closeButtonMessages from"../common/closeButton/CloseButton.messages";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:Provider,title:"Provider"};export var Basic=function(){return/*#__PURE__*/_jsxs(_Fragment,{children:["Translated message: ",/*#__PURE__*/_jsx(FormattedMessage,_objectSpread({},closeButtonMessages.ariaLabel)),/*#__PURE__*/_jsx("br",{}),/*#__PURE__*/_jsx("br",{}),"Formatting example: ",/*#__PURE__*/_jsx(Money,{amount:1234.5678,currency:"GBP"})]})};
@@ -1 +1 @@
1
- import"core-js/modules/es.array.includes.js";import"core-js/modules/es.string.includes.js";import PropTypes from"prop-types";import{createContext}from"react";import{DEFAULT_LOCALE,SUPPORTED_RTL}from"../../common/locale";import{jsx as _jsx}from"react/jsx-runtime";export var DirectionContext=/*#__PURE__*/createContext("ltr");export var DirectionProvider=function(a){var b=a.locale,c=a.children;return/*#__PURE__*/_jsx(DirectionContext.Provider,{value:SUPPORTED_RTL.includes(b)?"rtl":"ltr",children:c})};DirectionProvider.propTypes={children:PropTypes.node,locale:PropTypes.string},DirectionProvider.defaultProps={children:null,locale:DEFAULT_LOCALE};
1
+ import{createContext}from"react";import{Direction}from"../../common/direction";import{jsx as _jsx}from"react/jsx-runtime";export var DirectionContext=/*#__PURE__*/createContext(Direction.LTR);export var DirectionProvider=function(a){var b=a.direction,c=a.children;return/*#__PURE__*/_jsx(DirectionContext.Provider,{value:b,children:c})};
@@ -0,0 +1 @@
1
+ import{Direction}from"../../common";import{useDirection}from"../../common/hooks";import{render}from"../../test-utils";import{DirectionProvider}from".";import{Fragment as _Fragment}from"react/jsx-runtime";import{jsx as _jsx}from"react/jsx-runtime";describe("DirectionProvider",function(){beforeEach(function(){document.documentElement.removeAttribute("dir")}),it.each([[Direction.LTR,!1],[Direction.RTL,!0]])("store direction %s in React Context",function(a,b){var c=null;render(/*#__PURE__*/_jsx(DirectionProvider,{direction:a,children:/*#__PURE__*/_jsx(function TestComponent(){return c=useDirection(),/*#__PURE__*/_jsx(_Fragment,{})},{})})),expect(c).not.toBeNull(),expect(c).toHaveProperty("direction",a),expect(c).toHaveProperty("isRTL",b)})});
@@ -1 +1 @@
1
- export{default}from"./Provider";
1
+ export{DirectionProvider}from"./direction";export{ThemeProvider}from"./theme";export{default}from"./Provider";
@@ -0,0 +1,2 @@
1
+ import"core-js/modules/es.array.map.js";import"core-js/modules/es.array.join.js";import"core-js/modules/es.array.filter.js";import{Children,cloneElement,createContext,isValidElement}from"react";import{Theme}from"../../common/theme";import{jsx as _jsx}from"react/jsx-runtime";export var ThemeContext=/*#__PURE__*/createContext(Theme.LIGHT);export var ThemeProvider=function(a){var b=a.theme,c=a.children,d=Children.map(c,function(a){var c;if(!/*#__PURE__*/isValidElement(a))return"production"!==process.env.NODE_ENV&&console.warn("[ThemeProvider] Trying to inject `className` to an invalid React element, this will be skipped!"),a;// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
2
+ var d=["np-theme-".concat(b),null===a||void 0===a||null===(c=a.props)||void 0===c?void 0:c.className].filter(Boolean).join(" ");return/*#__PURE__*/cloneElement(a,{className:d})});return/*#__PURE__*/_jsx(ThemeContext.Provider,{value:b,children:d})};
@@ -0,0 +1,2 @@
1
+ import{render,screen}from"@testing-library/react";import{DirectionProvider}from"..";import{Button}from"../..";import{Direction}from"../../common/direction";import{Theme}from"../../common/theme";import{ThemeProvider}from"./ThemeProvider";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";describe("ThemeProvider",function(){it("appends theme to children",function(){render(/*#__PURE__*/_jsxs(ThemeProvider,{theme:Theme.LIGHT,children:[/*#__PURE__*/_jsx("div",{children:"children 1"}),/*#__PURE__*/_jsx("div",{children:"children 2"})]})),expect(screen.getByText("children 1")).toHaveClass("np-theme-light"),expect(screen.getByText("children 2")).toHaveClass("np-theme-light")}),it("concatenate className with children",function(){render(/*#__PURE__*/_jsx(ThemeProvider,{theme:Theme.LIGHT,children:/*#__PURE__*/_jsx("div",{className:"other class names",children:"children"})})),expect(screen.getByText("children")).toHaveClass("np-theme-light other class names")}),it("can nest theme providers",function(){render(/*#__PURE__*/_jsxs(ThemeProvider,{theme:Theme.LIGHT,children:[/*#__PURE__*/_jsx("div",{children:"light"}),/*#__PURE__*/_jsxs(ThemeProvider,{theme:Theme.NAVY,children:[/*#__PURE__*/_jsx("div",{children:"navy"}),/*#__PURE__*/_jsx(ThemeProvider,{theme:Theme.DARK,children:/*#__PURE__*/_jsx("div",{children:"dark"})})]})]})),expect(screen.getByText("light")).toHaveClass("np-theme-light"),expect(screen.getByText("navy")).toHaveClass("np-theme-navy"),expect(screen.getByText("dark")).toHaveClass("np-theme-dark")}),it("can append className to a component",function(){render(/*#__PURE__*/_jsx(ThemeProvider,{theme:Theme.NAVY,children:/*#__PURE__*/_jsx(Button,{"data-testid":"button",onClick:function onClick(){/** */},children:"Click me!"})})),expect(screen.getByTestId("button")).toHaveClass("np-theme-navy")}),it("displays console warning when children is not a valid React element",function(){// eslint-disable-next-line no-console
2
+ jest.spyOn(console,"warn").mockImplementation(function(){return jest.fn()}),render(/*#__PURE__*/_jsxs(ThemeProvider,{theme:Theme.NAVY,children:[/*#__PURE__*/_jsx(DirectionProvider,{direction:Direction.LTR,children:/*#__PURE__*/_jsx(Button,{"data-testid":"button",onClick:function onClick(){/** */},children:"Click me!"})}),","]})),expect(screen.getByTestId("button")).not.toHaveClass("np-theme-navy"),expect(console.warn).toHaveBeenCalledWith("[ThemeProvider] Trying to inject `className` to an invalid React element, this will be skipped!")})});
@@ -0,0 +1 @@
1
+ export{ThemeContext,ThemeProvider}from"./ThemeProvider";
@@ -1 +1 @@
1
- import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["label","id","disabled","avatar","secondary"];import"core-js/modules/es.object.keys.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import classNames from"classnames";import PropTypes from"prop-types";import RadioButton from"../common/RadioButton";import{useDirection}from"../common/hooks";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var Radio=function(a){var b=a.label,c=a.id,d=a.disabled,e=a.avatar,f=a.secondary,g=_objectWithoutProperties(a,_excluded),h=useDirection(),i=h.isRTL;return/*#__PURE__*/_jsx("div",{className:classNames("radio np-radio",{"radio-lg":f,disabled:d}),disabled:d,children:/*#__PURE__*/_jsxs("label",{htmlFor:c,children:[/*#__PURE__*/_jsx("span",{className:classNames("np-radio-button",{"p-r-2":!i,"p-l-2":i}),children:/*#__PURE__*/_jsx(RadioButton,_objectSpread({id:c,disabled:d},g))}),/*#__PURE__*/_jsxs("span",{className:"np-radio__text",children:[b,f&&/*#__PURE__*/_jsx("small",{children:f})]}),e&&/*#__PURE__*/_jsx("span",{className:classNames("np-radio__avatar",{"m-l-auto":!i,"m-r-auto":i}),children:e})]})})};Radio.propTypes={avatar:PropTypes.element,checked:PropTypes.bool,disabled:PropTypes.bool,id:PropTypes.string,label:PropTypes.string.isRequired,name:PropTypes.string.isRequired,onChange:PropTypes.func.isRequired,secondary:PropTypes.string,value:PropTypes.oneOfType([PropTypes.number,PropTypes.string])},Radio.defaultProps={avatar:void 0,checked:!1,disabled:!1,id:null,secondary:null,value:""};export default Radio;
1
+ import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["label","id","disabled","avatar","secondary"];import"core-js/modules/es.object.keys.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import classNames from"classnames";import PropTypes from"prop-types";import RadioButton from"../common/RadioButton";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var Radio=function(a){var b=a.label,c=a.id,d=a.disabled,e=a.avatar,f=a.secondary,g=_objectWithoutProperties(a,_excluded);return/*#__PURE__*/_jsx("div",{className:classNames("radio np-radio",{"radio-lg":f,disabled:d}),disabled:d,children:/*#__PURE__*/_jsxs("label",{htmlFor:c,children:[/*#__PURE__*/_jsx("span",{className:"np-radio-button p-r-2",children:/*#__PURE__*/_jsx(RadioButton,_objectSpread({id:c,disabled:d},g))}),/*#__PURE__*/_jsxs("span",{className:"np-radio__text",children:[b,f&&/*#__PURE__*/_jsx("small",{children:f})]}),e&&/*#__PURE__*/_jsx("span",{className:"np-radio__avatar m-l-auto",children:e})]})})};Radio.propTypes={avatar:PropTypes.element,checked:PropTypes.bool,disabled:PropTypes.bool,id:PropTypes.string,label:PropTypes.string.isRequired,name:PropTypes.string.isRequired,onChange:PropTypes.func.isRequired,secondary:PropTypes.string,value:PropTypes.oneOfType([PropTypes.number,PropTypes.string])},Radio.defaultProps={avatar:void 0,checked:!1,disabled:!1,id:null,secondary:null,value:""};export default Radio;
@@ -1 +1 @@
1
- import"core-js/modules/es.array.join.js";import"core-js/modules/es.array.map.js";import PropTypes from"prop-types";import{cloneElement}from"react";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var Option=function(a){var b=a.currency,c=a.label,d=a.note,e=a.secondary,f=a.icon,g=a.classNames,h=a.selected,i=function(a){return a.map(function(a){return g[a]||a}).join(" ")},j=b?"".concat(i(["currency-flag","currency-flag-".concat(b.toLowerCase()),"".concat(h?"hidden-xs":"")])):null;return/*#__PURE__*/_jsxs("span",{children:[b?/*#__PURE__*/_jsx("i",{className:j}):f&&/*#__PURE__*/cloneElement(f,{size:24,className:"".concat(i(["tw-icon"]))}),c,d&&/*#__PURE__*/_jsx("span",{className:"small m-l-1",children:d}),e&&/*#__PURE__*/_jsx("span",{className:"small text-ellipsis",children:e})]})};Option.propTypes={label:PropTypes.node.isRequired,currency:PropTypes.string,note:PropTypes.node,secondary:PropTypes.node,icon:PropTypes.node,classNames:PropTypes.objectOf(PropTypes.string),selected:PropTypes.bool},Option.defaultProps={currency:"",note:"",secondary:"",icon:null,classNames:{},selected:!1};export default Option;
1
+ import"core-js/modules/es.array.join.js";import"core-js/modules/es.array.map.js";import PropTypes from"prop-types";import{cloneElement}from"react";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var Option=function(a){var b=a.currency,c=a.label,d=a.note,e=a.secondary,f=a.icon,g=a.classNames,h=a.selected,i=function(a){return a.map(function(a){return g[a]||a}).join(" ")},j=b?"".concat(i(["currency-flag","currency-flag-".concat(b.toLowerCase()),"".concat(h?"hidden-xs":"")])):null,k=e?"".concat(i(["d-flex align-items-start","".concat(e?"flex-column":"")])):"d-flex align-items-start";return/*#__PURE__*/_jsxs("span",{className:k,children:[b?/*#__PURE__*/_jsx("i",{className:j}):f&&/*#__PURE__*/cloneElement(f,{size:24,className:"".concat(i(["tw-icon"]))}),c,d&&/*#__PURE__*/_jsx("span",{className:"body-2 m-l-1",children:d}),e&&/*#__PURE__*/_jsx("span",{className:"body-2 text-ellipsis",children:e})]})};Option.propTypes={label:PropTypes.node.isRequired,currency:PropTypes.string,note:PropTypes.node,secondary:PropTypes.node,icon:PropTypes.node,classNames:PropTypes.objectOf(PropTypes.string),selected:PropTypes.bool},Option.defaultProps={currency:"",note:"",secondary:"",icon:null,classNames:{},selected:!1};export default Option;
@@ -1 +1 @@
1
- import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";import _assertThisInitialized from"@babel/runtime/helpers/assertThisInitialized";import _inherits from"@babel/runtime/helpers/inherits";import _possibleConstructorReturn from"@babel/runtime/helpers/possibleConstructorReturn";import _getPrototypeOf from"@babel/runtime/helpers/getPrototypeOf";import _defineProperty from"@babel/runtime/helpers/defineProperty";import"core-js/modules/es.reflect.construct.js";function _createSuper(a){var b=_isNativeReflectConstruct();return function(){var c,d=_getPrototypeOf(a);if(b){var e=_getPrototypeOf(this).constructor;c=Reflect.construct(d,arguments,e)}else c=d.apply(this,arguments);return _possibleConstructorReturn(this,c)}}function _isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0}catch(a){return!1}}import classNames from"classnames";import PropTypes from"prop-types";import{Component}from"react";import CSSTransition from"react-transition-group/CSSTransition";import{Theme}from"../common";import{DirectionContext}from"../provider/direction";import withNextPortal from"../withNextPortal/withNextPortal";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export var CSS_TRANSITION_DURATION=400;export var Snackbar=/*#__PURE__*/function(a){function b(){var a;return _classCallCheck(this,b),a=c.call(this),_defineProperty(_assertThisInitialized(a),"setLeaveTimeout",function(){var b=a.props.timeout;a.timeout=setTimeout(function(){a.setState({visible:!1})},b)}),a.state={visible:!1,text:""},a}_inherits(b,a);var c=_createSuper(b);return _createClass(b,[{key:"componentWillUnmount",value:function componentWillUnmount(){clearTimeout(this.timeout),clearTimeout(this.transitionTimeout)}},{key:"shouldComponentUpdate",value:function shouldComponentUpdate(a,b){return!!a.text&&(a.timestamp!==this.props.timestamp||b.visible!==this.state.visible||b.text!==this.state.text)}},{key:"componentDidUpdate",value:function componentDidUpdate(a){var b=this,c=this.props,d=c.action,e=c.text,f=c.theme,g=c.timestamp;a.text?a.timestamp!==g&&(clearTimeout(this.timeout),this.state.visible?this.setState({visible:!1},function(){b.transitionTimeout=setTimeout(function(){b.setState({visible:!0,action:d,text:e,theme:f}),b.setLeaveTimeout()},CSS_TRANSITION_DURATION)}):(this.setState({visible:!0,action:d,text:e,theme:f}),this.setLeaveTimeout())):this.setState({visible:!0,action:d,text:e,theme:f},function(){b.setLeaveTimeout()})}},{key:"render",value:function render(){var a="rtl"===this.context,b=this.state,c=b.action,d=b.text,e=b.theme,f=b.visible,g=this.props.timeout;return/*#__PURE__*/_jsx("div",{className:classNames("snackbar",{"snackbar--rtl":a}),children:/*#__PURE__*/_jsx(CSSTransition,{in:f,classNames:"snackbar__text-container",timeout:{appear:0,enter:g,exit:CSS_TRANSITION_DURATION},unmountOnExit:!0,children:/*#__PURE__*/_jsxs("span",{className:"snackbar__text snackbar__text--".concat(e),children:[d,c?/*#__PURE__*/_jsx("button",{type:"button",className:"snackbar__text__action",onClick:c.onClick,children:c.label}):null]})})})}}]),b}(Component);Snackbar.contextType=DirectionContext,Snackbar.propTypes={action:PropTypes.shape({label:PropTypes.string.isRequired,onClick:PropTypes.func.isRequired}),text:PropTypes.node.isRequired,theme:PropTypes.oneOf(["light","dark"]),timeout:PropTypes.number.isRequired,timestamp:PropTypes.number.isRequired},Snackbar.defaultProps={action:null,theme:Theme.LIGHT};export default withNextPortal(Snackbar);
1
+ import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";import _assertThisInitialized from"@babel/runtime/helpers/assertThisInitialized";import _inherits from"@babel/runtime/helpers/inherits";import _possibleConstructorReturn from"@babel/runtime/helpers/possibleConstructorReturn";import _getPrototypeOf from"@babel/runtime/helpers/getPrototypeOf";import _defineProperty from"@babel/runtime/helpers/defineProperty";import"core-js/modules/es.reflect.construct.js";function _createSuper(a){var b=_isNativeReflectConstruct();return function(){var c,d=_getPrototypeOf(a);if(b){var e=_getPrototypeOf(this).constructor;c=Reflect.construct(d,arguments,e)}else c=d.apply(this,arguments);return _possibleConstructorReturn(this,c)}}function _isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0}catch(a){return!1}}import PropTypes from"prop-types";import{Component}from"react";import CSSTransition from"react-transition-group/CSSTransition";import{Theme}from"../common";import{DirectionContext}from"../provider/direction";import withNextPortal from"../withNextPortal/withNextPortal";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export var CSS_TRANSITION_DURATION=400;export var Snackbar=/*#__PURE__*/function(a){function b(){var a;return _classCallCheck(this,b),a=c.call(this),_defineProperty(_assertThisInitialized(a),"setLeaveTimeout",function(){var b=a.props.timeout;a.timeout=setTimeout(function(){a.setState({visible:!1})},b)}),a.state={visible:!1,text:""},a}_inherits(b,a);var c=_createSuper(b);return _createClass(b,[{key:"componentWillUnmount",value:function componentWillUnmount(){clearTimeout(this.timeout),clearTimeout(this.transitionTimeout)}},{key:"shouldComponentUpdate",value:function shouldComponentUpdate(a,b){return!!a.text&&(a.timestamp!==this.props.timestamp||b.visible!==this.state.visible||b.text!==this.state.text)}},{key:"componentDidUpdate",value:function componentDidUpdate(a){var b=this,c=this.props,d=c.action,e=c.text,f=c.theme,g=c.timestamp;a.text?a.timestamp!==g&&(clearTimeout(this.timeout),this.state.visible?this.setState({visible:!1},function(){b.transitionTimeout=setTimeout(function(){b.setState({visible:!0,action:d,text:e,theme:f}),b.setLeaveTimeout()},CSS_TRANSITION_DURATION)}):(this.setState({visible:!0,action:d,text:e,theme:f}),this.setLeaveTimeout())):this.setState({visible:!0,action:d,text:e,theme:f},function(){b.setLeaveTimeout()})}},{key:"render",value:function render(){var a=this.state,b=a.action,c=a.text,d=a.theme,e=a.visible,f=this.props.timeout;return/*#__PURE__*/_jsx("div",{className:"snackbar",children:/*#__PURE__*/_jsx(CSSTransition,{in:e,classNames:"snackbar__text-container",timeout:{appear:0,enter:f,exit:CSS_TRANSITION_DURATION},unmountOnExit:!0,children:/*#__PURE__*/_jsxs("span",{className:"snackbar__text snackbar__text--".concat(d),children:[c,b?/*#__PURE__*/_jsx("button",{type:"button",className:"snackbar__text__action",onClick:b.onClick,children:b.label}):null]})})})}}]),b}(Component);Snackbar.contextType=DirectionContext,Snackbar.propTypes={action:PropTypes.shape({label:PropTypes.string.isRequired,onClick:PropTypes.func.isRequired}),text:PropTypes.node.isRequired,theme:PropTypes.oneOf(["light","dark"]),timeout:PropTypes.number.isRequired,timestamp:PropTypes.number.isRequired},Snackbar.defaultProps={action:null,theme:Theme.LIGHT};export default withNextPortal(Snackbar);
@@ -1 +1 @@
1
- import"core-js/modules/es.array.concat.js";import"core-js/modules/es.array.map.js";import classNames from"classnames";import PropTypes from"prop-types";import{Position}from"../common";import Tooltip from"../tooltip";import{isTouchDevice}from"./deviceDetection";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";function clamp(a,b,c){return Math.max(Math.min(b,c),a)}/* eslint-disable react/no-array-index-key */var Stepper=function(a){var b=a.steps,c=a.activeStep,d=a.className;if(0===b.length)return null;var e=clamp(0,b.length-1,c),f=1/(b.length-1),g=e/(b.length-1),h=Math.max(g-f,0),i=Math.min(e,1)*f;return/*#__PURE__*/_jsxs("div",{className:classNames("tw-stepper",d),children:[/*#__PURE__*/_jsxs("div",{className:"progress",children:[/*#__PURE__*/_jsx("div",{className:"progress-bar-filler",style:{width:"".concat(100*h,"%")}}),/*#__PURE__*/_jsx("div",{className:"progress-bar-ending",style:{width:"".concat(100*i,"%")}})]}),/*#__PURE__*/_jsx("ul",{className:"tw-stepper-steps p-t-1 m-b-0",children:b.map(function renderStep(a,b){var c=b===e,d=a.onClick&&!c,g=/*#__PURE__*/_jsx("button",{type:"button",className:"btn-unstyled tw-stepper__step-label",disabled:!d,onClick:function onClick(){return d&&a.onClick()},children:/*#__PURE__*/_jsx("small",{children:a.label})});return/*#__PURE__*/_jsx("li",{style:{left:"".concat(100*(b*f),"%")},className:"\n hidden-xs\n tw-stepper__step\n ".concat(c?"tw-stepper__step--active":"","\n ").concat(d?"tw-stepper__step--clickable":"","\n "),children:a.hoverLabel&&!isTouchDevice()?/*#__PURE__*/_jsx(Tooltip,{position:Position.BOTTOM,label:a.hoverLabel,children:g}):g},b)})})]})};/* eslint-enable react/no-array-index-key */Stepper.propTypes={steps:PropTypes.arrayOf(PropTypes.shape({label:PropTypes.node.isRequired,onClick:PropTypes.func,hoverLabel:PropTypes.node})).isRequired,activeStep:PropTypes.number,className:PropTypes.string},Stepper.defaultProps={activeStep:0,className:void 0};export default Stepper;
1
+ import"core-js/modules/es.array.concat.js";import"core-js/modules/es.array.map.js";import classNames from"classnames";import PropTypes from"prop-types";import{Position}from"../common";import Tooltip from"../tooltip";import{isTouchDevice}from"./deviceDetection";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";function clamp(a,b,c){return Math.max(Math.min(b,c),a)}/* eslint-disable react/no-array-index-key */var Stepper=function(a){var b=a.steps,c=a.activeStep,d=a.className;if(0===b.length)return null;var e=clamp(0,b.length-1,c),f=1/(b.length-1),g=e/(b.length-1),h=Math.max(g-f,0),i=Math.min(e,1)*f;return/*#__PURE__*/_jsxs("div",{className:classNames("tw-stepper",d),children:[/*#__PURE__*/_jsxs("div",{className:"progress",children:[/*#__PURE__*/_jsx("div",{className:"progress-bar-filler",style:{width:"".concat(100*h,"%")}}),/*#__PURE__*/_jsx("div",{className:"progress-bar-ending",style:{width:"".concat(100*i,"%")}})]}),/*#__PURE__*/_jsx("ul",{className:"tw-stepper-steps p-t-1 m-b-0",children:b.map(function renderStep(a,b){var c=b===e,d=a.onClick&&!c,f=/*#__PURE__*/_jsx("button",{type:"button",className:"btn-unstyled tw-stepper__step-label",disabled:!d,onClick:function onClick(){return d&&a.onClick()},children:/*#__PURE__*/_jsx("small",{children:a.label})});return/*#__PURE__*/_jsx("li",{className:"\n hidden-xs\n tw-stepper__step\n ".concat(c?"tw-stepper__step--active":"","\n ").concat(d?"tw-stepper__step--clickable":"","\n "),children:a.hoverLabel&&!isTouchDevice()?/*#__PURE__*/_jsx(Tooltip,{position:Position.BOTTOM,label:a.hoverLabel,children:f}):f},b)})})]})};/* eslint-enable react/no-array-index-key */Stepper.propTypes={steps:PropTypes.arrayOf(PropTypes.shape({label:PropTypes.node.isRequired,onClick:PropTypes.func,hoverLabel:PropTypes.node})).isRequired,activeStep:PropTypes.number,className:PropTypes.string},Stepper.defaultProps={activeStep:0,className:void 0};export default Stepper;
@@ -1 +1 @@
1
- import _defineProperty from"@babel/runtime/helpers/defineProperty";var _statusLabels;import"core-js/modules/es.symbol.js";import"core-js/modules/es.symbol.description.js";import{CheckCircle as CheckCircleIcon,PendingCircle as PendingCircleIcon}from"@transferwise/icons";import classNames from"classnames";import PropTypes from"prop-types";import{cloneElement}from"react";import{useIntl}from"react-intl";import requiredIf from"react-required-if";import{Status,Size}from"../common";import{useDirection}from"../common/hooks";import Info from"../info";import{deprecated}from"../utilities";import messages from"./Summary.messages";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var BadgeIcons={done:CheckCircleIcon,pending:PendingCircleIcon},statusLabels=(_statusLabels={},_defineProperty(_statusLabels,Status.NOT_DONE,"statusNotDone"),_defineProperty(_statusLabels,Status.DONE,"statusDone"),_defineProperty(_statusLabels,Status.PENDING,"statusPending"),_statusLabels),expiryDate=new Date("03-01-2021"),Summary=function(a){var b=a.action,c=a.as,d=a.className,e=a.content,f=a.description,g=void 0===f?e:f,h=a.help,i=a.icon,j=a.illustration,k=a.info,l=void 0===k?h:k,m=a.status,n=a.title,o=useIntl(),p=useDirection(),q=p.isRTL,r=j;if(i){var s,t=null===i||void 0===i||null===(s=i.props)||void 0===s?void 0:s.size;r=24===t?i:/*#__PURE__*/cloneElement(i,{size:24})}var u=m&&BadgeIcons[m];return/*#__PURE__*/_jsxs(c,{className:classNames("np-summary d-flex align-items-start",d),"aria-label":m&&o.formatMessage(messages[statusLabels[m]]),children:[/*#__PURE__*/_jsxs("div",{className:"np-summary__icon",children:[r,u&&/*#__PURE__*/_jsx(u,{size:16,filled:!0,className:"np-summary-icon__".concat(m)})]}),/*#__PURE__*/_jsxs("div",{className:classNames("np-summary__body",{"m-l-2":!q,"m-r-2":q}),children:[/*#__PURE__*/_jsxs("div",{className:"np-summary__title d-flex",children:[/*#__PURE__*/_jsx("strong",{children:n}),l&&/*#__PURE__*/_jsx(Info,{"aria-label":l["aria-label"],className:classNames({"m-l-1":!q,"m-r-1":q},"hidden-xs"),content:l.content,presentation:l.presentation,title:l.title,onClick:l.onClick})]}),g&&/*#__PURE__*/_jsx("div",{className:"np-summary__description",children:g}),b&&/*#__PURE__*/_jsx("a",{href:b.href,target:b.target,className:"np-summary__action","aria-label":b["aria-label"],onClick:b.onClick,children:b.text})]}),l&&/*#__PURE__*/_jsx(Info,{"aria-label":l["aria-label"],className:"m-l-2 hidden-sm hidden-md hidden-lg hidden-xl",content:l.content,presentation:l.presentation,size:Size.LARGE,title:l.title,onClick:l.onClick})]})};Summary.propTypes={/** Action displayed at the bottom of the Summary */action:PropTypes.shape({text:PropTypes.node.isRequired,href:PropTypes.string.isRequired,"aria-label":PropTypes.string,target:PropTypes.string,onClick:PropTypes.func}),/** Decides which html element should wrap the Summary */as:PropTypes.string,/** Extra classes applied to Summary */className:PropTypes.string,/** @deprecated please use description instead */content:deprecated(PropTypes.node,{component:"Summary",newProp:"description",expiryDate:expiryDate}),/** Summary description */description:PropTypes.node,/** @deprecated please use info instead */help:deprecated(PropTypes.shape({content:PropTypes.node.isRequired,title:PropTypes.node}),{component:"Summary",newProp:"info",expiryDate:expiryDate}),/** Infos displayed on help Icon click inside Popover or Modal */info:PropTypes.shape({"aria-label":PropTypes.string.isRequired,content:PropTypes.node.isRequired,onClick:PropTypes.func,presentation:PropTypes.oneOf(["POPOVER","MODAL"]),title:PropTypes.node}),/** @deprecated please use icon instead */illustration:deprecated(PropTypes.node,{component:"Summary",newProp:"icon",expiryDate:expiryDate}),/** Main Summary Icon */icon:requiredIf(PropTypes.node,function(a){var b=a.illustration;return!b}),/** Decides the badge applied to Icon */status:PropTypes.oneOf(["notDone","done","pending"]),/** Summary title */title:PropTypes.node.isRequired},Summary.defaultProps={action:null,as:"div",className:null,content:null,help:null,illustration:null,status:null};export default Summary;
1
+ import _defineProperty from"@babel/runtime/helpers/defineProperty";var _statusLabels;import"core-js/modules/es.symbol.js";import"core-js/modules/es.symbol.description.js";import{CheckCircle as CheckCircleIcon,PendingCircle as PendingCircleIcon}from"@transferwise/icons";import classNames from"classnames";import PropTypes from"prop-types";import{cloneElement}from"react";import{useIntl}from"react-intl";import requiredIf from"react-required-if";import{Status,Size}from"../common";import Info from"../info";import{deprecated}from"../utilities";import messages from"./Summary.messages";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var BadgeIcons={done:CheckCircleIcon,pending:PendingCircleIcon},statusLabels=(_statusLabels={},_defineProperty(_statusLabels,Status.NOT_DONE,"statusNotDone"),_defineProperty(_statusLabels,Status.DONE,"statusDone"),_defineProperty(_statusLabels,Status.PENDING,"statusPending"),_statusLabels),expiryDate=new Date("03-01-2021"),Summary=function(a){var b=a.action,c=a.as,d=a.className,e=a.content,f=a.description,g=void 0===f?e:f,h=a.help,i=a.icon,j=a.illustration,k=a.info,l=void 0===k?h:k,m=a.status,n=a.title,o=useIntl(),p=j;if(i){var q,r=null===i||void 0===i||null===(q=i.props)||void 0===q?void 0:q.size;p=24===r?i:/*#__PURE__*/cloneElement(i,{size:24})}var s=m&&BadgeIcons[m];return/*#__PURE__*/_jsxs(c,{className:classNames("np-summary d-flex align-items-start",d),"aria-label":m&&o.formatMessage(messages[statusLabels[m]]),children:[/*#__PURE__*/_jsxs("div",{className:"np-summary__icon",children:[p,s&&/*#__PURE__*/_jsx(s,{size:16,filled:!0,className:"np-summary-icon__".concat(m)})]}),/*#__PURE__*/_jsxs("div",{className:"np-summary__body m-l-2",children:[/*#__PURE__*/_jsxs("div",{className:"np-summary__title d-flex",children:[/*#__PURE__*/_jsx("strong",{children:n}),l&&/*#__PURE__*/_jsx(Info,{"aria-label":l["aria-label"],className:"m-l-1 hidden-xs",content:l.content,presentation:l.presentation,title:l.title,onClick:l.onClick})]}),g&&/*#__PURE__*/_jsx("div",{className:"np-summary__description",children:g}),b&&/*#__PURE__*/_jsx("a",{href:b.href,target:b.target,className:"np-summary__action","aria-label":b["aria-label"],onClick:b.onClick,children:b.text})]}),l&&/*#__PURE__*/_jsx(Info,{"aria-label":l["aria-label"],className:"m-l-2 hidden-sm hidden-md hidden-lg hidden-xl",content:l.content,presentation:l.presentation,size:Size.LARGE,title:l.title,onClick:l.onClick})]})};Summary.propTypes={/** Action displayed at the bottom of the Summary */action:PropTypes.shape({text:PropTypes.node.isRequired,href:PropTypes.string.isRequired,"aria-label":PropTypes.string,target:PropTypes.string,onClick:PropTypes.func}),/** Decides which html element should wrap the Summary */as:PropTypes.string,/** Extra classes applied to Summary */className:PropTypes.string,/** @deprecated please use description instead */content:deprecated(PropTypes.node,{component:"Summary",newProp:"description",expiryDate:expiryDate}),/** Summary description */description:PropTypes.node,/** @deprecated please use info instead */help:deprecated(PropTypes.shape({content:PropTypes.node.isRequired,title:PropTypes.node}),{component:"Summary",newProp:"info",expiryDate:expiryDate}),/** Infos displayed on help Icon click inside Popover or Modal */info:PropTypes.shape({"aria-label":PropTypes.string.isRequired,content:PropTypes.node.isRequired,onClick:PropTypes.func,presentation:PropTypes.oneOf(["POPOVER","MODAL"]),title:PropTypes.node}),/** @deprecated please use icon instead */illustration:deprecated(PropTypes.node,{component:"Summary",newProp:"icon",expiryDate:expiryDate}),/** Main Summary Icon */icon:requiredIf(PropTypes.node,function(a){var b=a.illustration;return!b}),/** Decides the badge applied to Icon */status:PropTypes.oneOf(["notDone","done","pending"]),/** Summary title */title:PropTypes.node.isRequired},Summary.defaultProps={action:null,as:"div",className:null,content:null,help:null,illustration:null,status:null};export default Summary;
@@ -1 +1 @@
1
- import{CheckCircle,CrossCircle}from"@transferwise/icons";import classnames from"classnames";import{useDirection}from"../common/hooks";import KeyCodes from"../common/keyCodes";import{logActionRequiredIf}from"../utilities";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var Switch=function(a){var b=useDirection(),c=b.isRTL,d=a.checked,e=a.className,f=a.id,g=a.onClick,h=a.disabled,i=a["aria-label"],j=i?void 0:a["aria-labelledby"];return logActionRequiredIf("Switch now expects either `aria-label` or `aria-labelledby`, and will soon make these props required. Please update your usage to provide one or the other.",!i&&!j),/*#__PURE__*/_jsxs("span",{className:classnames("np-switch",{"np-switch--rtl":c,"np-switch--unchecked":!d,"np-switch--checked":d,"np-switch--disabled":h},e),tabIndex:0,role:"switch","aria-checked":d,"aria-label":i,"aria-labelledby":j,id:f,"aria-disabled":h,onClick:h?void 0:g,onKeyDown:h?void 0:function handleKeyDown(a){("32"===a.code||a.keyCode===KeyCodes.SPACE)&&(a.preventDefault(),g())},children:[/*#__PURE__*/_jsx("span",{className:"np-switch--thumb",children:d?/*#__PURE__*/_jsx(CheckCircle,{filled:!0,size:24}):/*#__PURE__*/_jsx(CrossCircle,{filled:!0,size:24})}),/*#__PURE__*/_jsx("input",{type:"checkbox",checked:d,readOnly:!0})]})};export default Switch;
1
+ import{CheckCircle,CrossCircle}from"@transferwise/icons";import classnames from"classnames";import KeyCodes from"../common/keyCodes";import{logActionRequiredIf}from"../utilities";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var Switch=function(a){var b=a.checked,c=a.className,d=a.id,e=a.onClick,f=a.disabled,g=a["aria-label"],h=g?void 0:a["aria-labelledby"];return logActionRequiredIf("Switch now expects either `aria-label` or `aria-labelledby`, and will soon make these props required. Please update your usage to provide one or the other.",!g&&!h),/*#__PURE__*/_jsxs("span",{className:classnames("np-switch",{"np-switch--unchecked":!b,"np-switch--checked":b,"np-switch--disabled":f},c),tabIndex:0,role:"switch","aria-checked":b,"aria-label":g,"aria-labelledby":h,id:d,"aria-disabled":f,onClick:f?void 0:e,onKeyDown:f?void 0:function handleKeyDown(a){("32"===a.code||a.keyCode===KeyCodes.SPACE)&&(a.preventDefault(),e())},children:[/*#__PURE__*/_jsx("span",{className:"np-switch--thumb",children:b?/*#__PURE__*/_jsx(CheckCircle,{filled:!0,size:24}):/*#__PURE__*/_jsx(CrossCircle,{filled:!0,size:24})}),/*#__PURE__*/_jsx("input",{type:"checkbox",checked:b,readOnly:!0})]})};export default Switch;
@@ -1 +1 @@
1
- import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";import _assertThisInitialized from"@babel/runtime/helpers/assertThisInitialized";import _inherits from"@babel/runtime/helpers/inherits";import _possibleConstructorReturn from"@babel/runtime/helpers/possibleConstructorReturn";import _getPrototypeOf from"@babel/runtime/helpers/getPrototypeOf";import _defineProperty from"@babel/runtime/helpers/defineProperty";import"core-js/modules/es.reflect.construct.js";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import"core-js/modules/es.array.reduce.js";import"core-js/modules/es.array.map.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.array.concat.js";import"core-js/modules/es.array.slice.js";import"core-js/modules/es.function.name.js";import"core-js/modules/es.number.is-nan.js";import"core-js/modules/es.number.constructor.js";function _createSuper(a){var b=_isNativeReflectConstruct();return function(){var c,d=_getPrototypeOf(a);if(b){var e=_getPrototypeOf(this).constructor;c=Reflect.construct(d,arguments,e)}else c=d.apply(this,arguments);return _possibleConstructorReturn(this,c)}}function _isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0}catch(a){return!1}}import classNames from"classnames";import clamp from"lodash.clamp";import PropTypes from"prop-types";import{Component,Fragment}from"react";import{Spring}from"react-spring/renderprops.cjs";import{Size,Width}from"../common";import KeyCodes from"../common/keyCodes";import Tab from"./Tab";import TabList from"./TabList";import TabPanel from"./TabPanel";import{getElasticDragDifference,getSwipeDifference,swipedLeftToRight,swipedRightToLeft,swipeShouldChangeTab,getVelocity}from"./utils";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var MIN_INDEX=0,enabledTabsFilter=function(a){return!a.disabled},SpacerWidth={default:0,xs:8,sm:16,md:24,lg:32},Tabs=/*#__PURE__*/function(a){function b(a){var d;return _classCallCheck(this,b),d=c.call(this,a),_defineProperty(_assertThisInitialized(d),"container",null),_defineProperty(_assertThisInitialized(d),"containerWidth",0),_defineProperty(_assertThisInitialized(d),"tabRefs",[]),_defineProperty(_assertThisInitialized(d),"handleResize",function(){d.setContainerWidth(d.container),d.setState(function(a){var b=a.selectedTabIndex;return{translateTo:-(d.containerWidth*b)}})}),_defineProperty(_assertThisInitialized(d),"setContainerRefAndWidth",function(a){d.container=a,d.setContainerWidth(a)}),_defineProperty(_assertThisInitialized(d),"setContainerWidth",function(a){if(a){var b=a.getBoundingClientRect(),c=b.width;d.containerWidth=c}}),_defineProperty(_assertThisInitialized(d),"isTabDisabled",function(a){var b=d.props.tabs;return b[a]&&b[a].disabled}),_defineProperty(_assertThisInitialized(d),"getAllTabsWidth",function(){return d.tabRefs.map(function(a){return a?a.getBoundingClientRect().width:0}).reduce(function(c,a){return c+a},0)}),_defineProperty(_assertThisInitialized(d),"getDistanceToSelectedTab",function(a){return d.tabRefs.filter(function(b,c){return c<a}).map(function(a){return a?a.getBoundingClientRect().width:0}).reduce(function(c,a){return c+a},0)}),_defineProperty(_assertThisInitialized(d),"setTabWidth",function(){var a=d.state.fullWidthTabs,b=d.props,c=b.headerWidth,e=b.selected,f=d.getAllTabsWidth();!a&&(c===Width.BLOCK||d.containerWidth<f)&&d.setState({fullWidthTabs:!0,translateLineX:"".concat(100*e,"%")}),a&&c===Width.AUTO&&d.containerWidth>=f&&d.setState({fullWidthTabs:!1,translateLineX:"".concat(d.getDistanceToSelectedTab(e),"px")})}),_defineProperty(_assertThisInitialized(d),"getTabLineWidth",function(){var a=d.state.fullWidthTabs,b=d.props,c=b.selected,e=b.tabs;if(a)return"".concat(100*(1/e.length),"%");var f=d.tabRefs[c]||d.tabRefs[d.tabRefs.length-1],g=f?f.getBoundingClientRect().width:0;return"".concat(g,"px")}),_defineProperty(_assertThisInitialized(d),"getTabToSelect",function(a,b,c){var e=a;if(swipedLeftToRight(b,c)){if(e-=1,e>MIN_INDEX&&d.isTabDisabled(e))return d.getTabToSelect(e,b,c);}else if(swipedRightToLeft(b,c)&&(e+=1,e<d.MAX_INDEX&&d.isTabDisabled(e)))return d.getTabToSelect(e,b,c);return e=clamp(e,Math.max(a-1,MIN_INDEX),Math.min(a+1,d.MAX_INDEX)),d.isTabDisabled(e)?a:e}),_defineProperty(_assertThisInitialized(d),"swipedOverHalfOfContainer",function(a){return .5<=a/d.containerWidth}),_defineProperty(_assertThisInitialized(d),"calculateApplicableDragDifference",function(a){var b=a.currentSelected,c=a.nextSelected,e=a.start,f=a.end,g=getSwipeDifference(e,f),h=getElasticDragDifference(g);return swipedLeftToRight(e,f)?b>MIN_INDEX&&b!==c?Math.min(g,d.containerWidth):h:!!swipedRightToLeft(e,f)&&(b<d.MAX_INDEX&&b!==c?-Math.min(g,d.containerWidth):-h)}),_defineProperty(_assertThisInitialized(d),"switchTab",function(a){var b=d.props.onTabSelect;b(a)}),_defineProperty(_assertThisInitialized(d),"animateToTab",function(a,b){d.animateLine(a),d.animatePanel(d.getTabIndexWithoutDisabledTabs(a),b)}),_defineProperty(_assertThisInitialized(d),"animateLine",function(a){d.setState(function(b){return{translateLineX:b.fullWidthTabs?"".concat(100*a,"%"):"".concat(d.getDistanceToSelectedTab(a),"px")}})}),_defineProperty(_assertThisInitialized(d),"animatePanel",function(a){var b=!!(1<arguments.length&&void 0!==arguments[1])&&arguments[1],c=d.state.translateTo,e=c,f=-(d.containerWidth*a);d.setState({selectedTabIndex:a,isAnimating:!b&&e!==f,translateFrom:e,translateTo:f})}),_defineProperty(_assertThisInitialized(d),"disableScroll",function(a){var b=d.state.isSwiping;b&&a.preventDefault()}),_defineProperty(_assertThisInitialized(d),"handleTabClick",function(a){return function(){d.switchTab(a)}}),_defineProperty(_assertThisInitialized(d),"onKeyDown",function(a){return function(b){b&&b.keyCode===KeyCodes.ENTER&&d.switchTab(a)}}),_defineProperty(_assertThisInitialized(d),"handleTouchStart",function(a){var b={x:a.nativeEvent.touches[0].clientX,y:a.nativeEvent.touches[0].clientY,time:Date.now()};d.setState({start:b,currentSwipe:[b]}),a.persist()}),_defineProperty(_assertThisInitialized(d),"handleTouchMove",function(a){var b=d.state.start,c=d.props.selected,e=d.getTabIndexWithoutDisabledTabs(c),f={x:a.nativeEvent.changedTouches[0].clientX,y:a.nativeEvent.changedTouches[0].clientY,time:Date.now()},g=getSwipeDifference(b,f),h=getSwipeDifference(b,f,"y"),i=d.state,j=i.isScrolling,k=i.isSwiping;if(a.persist(),j||k||(g>h?k=!0:j=!0),d.setState({isScrolling:j,isSwiping:k}),k){var n=d.getTabToSelect(c,b,f);d.animateLine(d.swipedOverHalfOfContainer(g)?n:c);var l=d.calculateApplicableDragDifference({currentSelected:c,nextSelected:n,start:b,end:f}),m=!!l&&-(d.containerWidth*e)+l;d.setState(function(a){return{currentSwipe:[].concat(_toConsumableArray(a.currentSwipe),[f]),translateFrom:m||a.translateFrom,translateTo:m||a.translateTo}})}}),_defineProperty(_assertThisInitialized(d),"handleTouchEnd",function(a){var b=d.state,c=b.start,e=b.isSwiping,f=d.props.selected,g={x:a.nativeEvent.changedTouches[0].clientX,y:a.nativeEvent.changedTouches[0].clientY,time:Date.now()},h=getSwipeDifference(c,g),i=getVelocity([].concat(_toConsumableArray(d.state.currentSwipe),[g]));d.setState({currentSwipe:[]});var j=f;a.persist(),e&&((swipeShouldChangeTab(c,g)||d.swipedOverHalfOfContainer(h))&&(j=d.getTabToSelect(j,c,g)),j===f?d.animateToTab(j):(d.switchTab(j),d.setState({lastSwipeVelocity:i}))),d.setState({isSwiping:!1,isScrolling:!1})}),d.state={start:null,translateX:0,translateFrom:0,translateTo:0,translateLineX:null,isAnimating:!1,isSwiping:!1,isScrolling:!1,lastSwipeVelocity:0,fullWidthTabs:a.headerWidth===Width.BLOCK},d}_inherits(b,a);var c=_createSuper(b);return _createClass(b,[{key:"filteredTabsLength",get:function get(){return this.props.tabs.filter(enabledTabsFilter).length}},{key:"MAX_INDEX",get:function get(){return this.props.tabs.length-1}},{key:"componentDidMount",value:function componentDidMount(){var a=this.props.selected;this.setTabWidth(),this.switchTab(clamp(a,MIN_INDEX,this.MAX_INDEX)),this.animateToTab(clamp(a,MIN_INDEX,this.MAX_INDEX),!0),document.body.addEventListener("touchmove",this.disableScroll,{passive:!1}),document.body.addEventListener("touchforcechange",this.disableScroll,{passive:!1}),window.addEventListener("resize",this.handleResize)}},{key:"componentDidUpdate",value:function componentDidUpdate(a,b){var c=this.props.selected,d=a.selected,e=this.props.tabs[c],f=e&&e.disabled,g=a.tabs[d],h=g&&g.disabled,i=this.props.tabs.length,j=a.tabs.length,k=this.props.tabs.filter(enabledTabsFilter).length,l=a.tabs.filter(enabledTabsFilter).length,m=this.props.headerWidth,n=a.headerWidth,o=this.props.animatePanelsOnClick,p=!o&&!b.isSwiping;(m!==n||i!==j)&&this.setTabWidth(),(c!==d||k!==l||f!==h)&&this.animateToTab(clamp(c,MIN_INDEX,this.MAX_INDEX),c===d||p)}},{key:"componentWillUnmount",value:function componentWillUnmount(){document.body.removeEventListener("touchmove",this.disableScroll),document.body.removeEventListener("touchforcechange",this.disableScroll),window.removeEventListener("resize",this.handleResize)}},{key:"getTabIndexWithoutDisabledTabs",value:function getTabIndexWithoutDisabledTabs(a){return a-this.props.tabs.slice(0,a).filter(function(a){return!enabledTabsFilter(a)}).length}},{key:"render",value:function render(){var a=this,b=this.props,c=b.tabs,d=b.changeTabOnSwipe,e=b.name,f=b.selected,g=b.className,h=b.transitionSpacing,i=b.headerWidth,j=this.state,k=j.isSwiping,l=j.translateLineX,m=j.isAnimating,n=j.translateFrom,o=j.translateTo,p=j.lastSwipeVelocity,q=j.fullWidthTabs,r=SpacerWidth[h],s=this.filteredTabsLength,t=Math.abs(-n-this.containerWidth*f),u=k?1-t/this.containerWidth:1-Math.abs(t/this.containerWidth-1),v=(Number.isNaN(u)?0:u)*Math.min(10*Math.E,10*p*Math.E),w=m||k,x=s*this.containerWidth+2*r,y=function(a){var b=a.id;return 0<r&&/*#__PURE__*/_jsx("div",{style:{width:r,display:w?"block":"none"}},b)};return/*#__PURE__*/_jsxs("div",{className:classNames("tabs",g,{"tabs--auto-width":i===Width.AUTO}),onTouchStart:d?this.handleTouchStart:void 0,onTouchEnd:d?this.handleTouchEnd:void 0,onTouchMove:d?this.handleTouchMove:void 0,children:[/*#__PURE__*/_jsxs(TabList,{children:[c.map(function(b,d){var g=b.title,h=b.disabled;return/*#__PURE__*/_jsx(Tab,_objectSpread(_objectSpread({ref:function ref(b){a.tabRefs[d]=b},id:"".concat(e,"-tab-").concat(d),panelId:"".concat(e,"-panel-").concat(d),selected:f===d,disabled:h,focusTab:function focusTab(){a.tabRefs[d].focus()},onClick:h?null:a.handleTabClick(d),onKeyDown:a.onKeyDown(d)},q?{style:{width:"".concat(100*(1/c.length),"%")}}:{}),{},{children:g}),g)}),l?/*#__PURE__*/_jsx("div",{className:classNames("tabs__line"),style:{width:this.getTabLineWidth(),transform:"translateX(".concat(l,")")}}):null]}),/*#__PURE__*/_jsx("div",{ref:this.setContainerRefAndWidth,className:"tabs__panel-container",style:{overflow:w?"hidden":"visible"},children:/*#__PURE__*/_jsx(Spring,{from:{transform:"translateX(".concat(n-r,"px)")},to:{transform:"translateX(".concat(o-r,"px)")},config:{precision:k?1:.01,velocity:k?0:v,clamp:!0},onRest:function onRest(){m&&a.setState({isAnimating:!1,lastSwipeVelocity:0})},children:function children(b){return/*#__PURE__*/_jsx("div",{className:"tabs__slider",style:{width:w?"".concat(x,"px"):"100%",transform:w?b.transform:"translateX(0px)"},children:c.map(function(b,d){var g=b.content,h=b.disabled;return h?null:/*#__PURE__*/_jsxs(Fragment,{children:[d===f&&/*#__PURE__*/_jsx(y,{id:"left-spacer"}),/*#__PURE__*/_jsx(TabPanel,{tabId:"".concat(e,"-tab-").concat(d),id:"".concat(e,"-panel-").concat(d),style:{width:w?"".concat(a.containerWidth,"px"):"100%",display:w||d===f?"block":"none"},children:g},c[d].title),d===f&&/*#__PURE__*/_jsx(y,{id:"right-spacer"})]},"".concat(c[d].title,"-fragment"))})})}})})]})}}]),b}(Component),SpacerSizes=_objectSpread(_objectSpread({},Size),{},{NONE:"default"});Tabs.propTypes={tabs:PropTypes.arrayOf(PropTypes.shape({title:PropTypes.string.isRequired,content:PropTypes.node.isRequired,disabled:PropTypes.bool.isRequired})).isRequired,selected:PropTypes.number.isRequired,onTabSelect:PropTypes.func.isRequired,name:PropTypes.string.isRequired,animatePanelsOnClick:PropTypes.bool,changeTabOnSwipe:PropTypes.bool,className:PropTypes.string,transitionSpacing:PropTypes.oneOf(["default","xs","sm","md","lg"]),headerWidth:PropTypes.oneOf(["auto","block"])},Tabs.defaultProps={animatePanelsOnClick:!1,changeTabOnSwipe:!0,className:"",transitionSpacing:SpacerSizes.NONE,headerWidth:Width.BLOCK};export default Tabs;
1
+ import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";import _assertThisInitialized from"@babel/runtime/helpers/assertThisInitialized";import _inherits from"@babel/runtime/helpers/inherits";import _possibleConstructorReturn from"@babel/runtime/helpers/possibleConstructorReturn";import _getPrototypeOf from"@babel/runtime/helpers/getPrototypeOf";import _defineProperty from"@babel/runtime/helpers/defineProperty";import"core-js/modules/es.reflect.construct.js";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import"core-js/modules/es.array.reduce.js";import"core-js/modules/es.array.map.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.array.concat.js";import"core-js/modules/es.array.slice.js";import"core-js/modules/es.function.name.js";import"core-js/modules/es.number.is-nan.js";import"core-js/modules/es.number.constructor.js";function _createSuper(a){var b=_isNativeReflectConstruct();return function(){var c,d=_getPrototypeOf(a);if(b){var e=_getPrototypeOf(this).constructor;c=Reflect.construct(d,arguments,e)}else c=d.apply(this,arguments);return _possibleConstructorReturn(this,c)}}function _isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0}catch(a){return!1}}import classNames from"classnames";import clamp from"lodash.clamp";import PropTypes from"prop-types";import{Component,Fragment}from"react";import{Spring}from"react-spring/renderprops.cjs";import{Size,Width,Direction}from"../common";import KeyCodes from"../common/keyCodes";import{DirectionContext}from"../provider/direction";import Tab from"./Tab";import TabList from"./TabList";import TabPanel from"./TabPanel";import{getElasticDragDifference,getSwipeDifference,swipedLeftToRight,swipedRightToLeft,swipeShouldChangeTab,getVelocity}from"./utils";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var MIN_INDEX=0,enabledTabsFilter=function(a){return!a.disabled},SpacerWidth={default:0,xs:8,sm:16,md:24,lg:32},Tabs=/*#__PURE__*/function(a){function b(a){var d;return _classCallCheck(this,b),d=c.call(this,a),_defineProperty(_assertThisInitialized(d),"container",null),_defineProperty(_assertThisInitialized(d),"containerWidth",0),_defineProperty(_assertThisInitialized(d),"tabRefs",[]),_defineProperty(_assertThisInitialized(d),"handleResize",function(){d.setContainerWidth(d.container),d.setState(function(a){var b=a.selectedTabIndex;return{translateTo:-(d.containerWidth*b)}})}),_defineProperty(_assertThisInitialized(d),"setContainerRefAndWidth",function(a){d.container=a,d.setContainerWidth(a)}),_defineProperty(_assertThisInitialized(d),"setContainerWidth",function(a){if(a){var b=a.getBoundingClientRect(),c=b.width;d.containerWidth=c}}),_defineProperty(_assertThisInitialized(d),"isTabDisabled",function(a){var b=d.props.tabs;return b[a]&&b[a].disabled}),_defineProperty(_assertThisInitialized(d),"getAllTabsWidth",function(){return d.tabRefs.map(function(a){return a?a.getBoundingClientRect().width:0}).reduce(function(c,a){return c+a},0)}),_defineProperty(_assertThisInitialized(d),"getDistanceToSelectedTab",function(a){return d.tabRefs.filter(function(b,c){return c<a}).map(function(a){return a?a.getBoundingClientRect().width:0}).reduce(function(c,a){return c+a},0)}),_defineProperty(_assertThisInitialized(d),"setTabWidth",function(){var a=d.state.fullWidthTabs,b=d.props,c=b.headerWidth,e=b.selected,f=d.getAllTabsWidth();!a&&(c===Width.BLOCK||d.containerWidth<f)&&d.setState({fullWidthTabs:!0,translateLineX:"".concat(100*e,"%")}),a&&c===Width.AUTO&&d.containerWidth>=f&&d.setState({fullWidthTabs:!1,translateLineX:"".concat(d.getDistanceToSelectedTab(e),"px")})}),_defineProperty(_assertThisInitialized(d),"getTabLineWidth",function(){var a=d.state.fullWidthTabs,b=d.props,c=b.selected,e=b.tabs;if(a)return"".concat(100*(1/e.length),"%");var f=d.tabRefs[c]||d.tabRefs[d.tabRefs.length-1],g=f?f.getBoundingClientRect().width:0;return"".concat(g,"px")}),_defineProperty(_assertThisInitialized(d),"getTabToSelect",function(a,b,c){var e=a;if(swipedLeftToRight(b,c)){if(e-=1,e>MIN_INDEX&&d.isTabDisabled(e))return d.getTabToSelect(e,b,c);}else if(swipedRightToLeft(b,c)&&(e+=1,e<d.MAX_INDEX&&d.isTabDisabled(e)))return d.getTabToSelect(e,b,c);return e=clamp(e,Math.max(a-1,MIN_INDEX),Math.min(a+1,d.MAX_INDEX)),d.isTabDisabled(e)?a:e}),_defineProperty(_assertThisInitialized(d),"swipedOverHalfOfContainer",function(a){return .5<=a/d.containerWidth}),_defineProperty(_assertThisInitialized(d),"calculateApplicableDragDifference",function(a){var b=a.currentSelected,c=a.nextSelected,e=a.start,f=a.end,g=getSwipeDifference(e,f),h=getElasticDragDifference(g);return swipedLeftToRight(e,f)?b>MIN_INDEX&&b!==c?Math.min(g,d.containerWidth):h:!!swipedRightToLeft(e,f)&&(b<d.MAX_INDEX&&b!==c?-Math.min(g,d.containerWidth):-h)}),_defineProperty(_assertThisInitialized(d),"switchTab",function(a){var b=d.props.onTabSelect;b(a)}),_defineProperty(_assertThisInitialized(d),"animateToTab",function(a,b){d.animateLine(a),d.animatePanel(d.getTabIndexWithoutDisabledTabs(a),b)}),_defineProperty(_assertThisInitialized(d),"animateLine",function(a){d.setState(function(b){return{translateLineX:b.fullWidthTabs?"".concat(100*a,"%"):"".concat(d.getDistanceToSelectedTab(a),"px")}})}),_defineProperty(_assertThisInitialized(d),"animatePanel",function(a){var b=!!(1<arguments.length&&void 0!==arguments[1])&&arguments[1],c=d.state.translateTo,e=c,f=-(d.containerWidth*a);d.setState({selectedTabIndex:a,isAnimating:!b&&e!==f,translateFrom:e,translateTo:f})}),_defineProperty(_assertThisInitialized(d),"disableScroll",function(a){var b=d.state.isSwiping;b&&a.preventDefault()}),_defineProperty(_assertThisInitialized(d),"handleTabClick",function(a){return function(){d.switchTab(a)}}),_defineProperty(_assertThisInitialized(d),"onKeyDown",function(a){return function(b){b&&b.keyCode===KeyCodes.ENTER&&d.switchTab(a)}}),_defineProperty(_assertThisInitialized(d),"handleTouchStart",function(a){var b={x:a.nativeEvent.touches[0].clientX,y:a.nativeEvent.touches[0].clientY,time:Date.now()};d.setState({start:b,currentSwipe:[b]}),a.persist()}),_defineProperty(_assertThisInitialized(d),"handleTouchMove",function(a){var b=d.state.start,c=d.props.selected,e=d.getTabIndexWithoutDisabledTabs(c),f={x:a.nativeEvent.changedTouches[0].clientX,y:a.nativeEvent.changedTouches[0].clientY,time:Date.now()},g=getSwipeDifference(b,f),h=getSwipeDifference(b,f,"y"),i=d.state,j=i.isScrolling,k=i.isSwiping;if(a.persist(),j||k||(g>h?k=!0:j=!0),d.setState({isScrolling:j,isSwiping:k}),k){var n=d.getTabToSelect(c,b,f);d.animateLine(d.swipedOverHalfOfContainer(g)?n:c);var l=d.calculateApplicableDragDifference({currentSelected:c,nextSelected:n,start:b,end:f}),m=!!l&&-(d.containerWidth*e)+l;d.setState(function(a){return{currentSwipe:[].concat(_toConsumableArray(a.currentSwipe),[f]),translateFrom:m||a.translateFrom,translateTo:m||a.translateTo}})}}),_defineProperty(_assertThisInitialized(d),"handleTouchEnd",function(a){var b=d.state,c=b.start,e=b.isSwiping,f=d.props.selected,g={x:a.nativeEvent.changedTouches[0].clientX,y:a.nativeEvent.changedTouches[0].clientY,time:Date.now()},h=getSwipeDifference(c,g),i=getVelocity([].concat(_toConsumableArray(d.state.currentSwipe),[g]));d.setState({currentSwipe:[]});var j=f;a.persist(),e&&((swipeShouldChangeTab(c,g)||d.swipedOverHalfOfContainer(h))&&(j=d.getTabToSelect(j,c,g)),j===f?d.animateToTab(j):(d.switchTab(j),d.setState({lastSwipeVelocity:i}))),d.setState({isSwiping:!1,isScrolling:!1})}),d.state={start:null,translateX:0,translateFrom:0,translateTo:0,translateLineX:null,isAnimating:!1,isSwiping:!1,isScrolling:!1,lastSwipeVelocity:0,fullWidthTabs:a.headerWidth===Width.BLOCK},d}_inherits(b,a);var c=_createSuper(b);return _createClass(b,[{key:"filteredTabsLength",get:function get(){return this.props.tabs.filter(enabledTabsFilter).length}},{key:"MAX_INDEX",get:function get(){return this.props.tabs.length-1}},{key:"componentDidMount",value:function componentDidMount(){var a=this.props.selected;this.setTabWidth(),this.switchTab(clamp(a,MIN_INDEX,this.MAX_INDEX)),this.animateToTab(clamp(a,MIN_INDEX,this.MAX_INDEX),!0),document.body.addEventListener("touchmove",this.disableScroll,{passive:!1}),document.body.addEventListener("touchforcechange",this.disableScroll,{passive:!1}),window.addEventListener("resize",this.handleResize)}},{key:"componentDidUpdate",value:function componentDidUpdate(a,b){var c=this.props.selected,d=a.selected,e=this.props.tabs[c],f=e&&e.disabled,g=a.tabs[d],h=g&&g.disabled,i=this.props.tabs.length,j=a.tabs.length,k=this.props.tabs.filter(enabledTabsFilter).length,l=a.tabs.filter(enabledTabsFilter).length,m=this.props.headerWidth,n=a.headerWidth,o=this.props.animatePanelsOnClick,p=!o&&!b.isSwiping;(m!==n||i!==j)&&this.setTabWidth(),(c!==d||k!==l||f!==h)&&this.animateToTab(clamp(c,MIN_INDEX,this.MAX_INDEX),c===d||p)}},{key:"componentWillUnmount",value:function componentWillUnmount(){document.body.removeEventListener("touchmove",this.disableScroll),document.body.removeEventListener("touchforcechange",this.disableScroll),window.removeEventListener("resize",this.handleResize)}},{key:"getTabIndexWithoutDisabledTabs",value:function getTabIndexWithoutDisabledTabs(a){return a-this.props.tabs.slice(0,a).filter(function(a){return!enabledTabsFilter(a)}).length}},{key:"render",value:function render(){var a=this,b=this.props,c=b.tabs,d=b.changeTabOnSwipe,e=b.name,f=b.selected,g=b.className,h=b.transitionSpacing,i=b.headerWidth,j=this.state,k=j.isSwiping,l=j.translateLineX,m=j.isAnimating,n=j.translateFrom,o=j.translateTo,p=j.lastSwipeVelocity,q=j.fullWidthTabs,r=SpacerWidth[h],s=this.filteredTabsLength,t=Math.abs(-n-this.containerWidth*f),u=k?1-t/this.containerWidth:1-Math.abs(t/this.containerWidth-1),v=(Number.isNaN(u)?0:u)*Math.min(10*Math.E,10*p*Math.E),w=m||k,x=s*this.containerWidth+2*r,y=function(a){var b=a.id;return 0<r&&/*#__PURE__*/_jsx("div",{style:{width:r,display:w?"block":"none"}},b)};return/*#__PURE__*/_jsx(DirectionContext.Consumer,{children:function children(b){var h=b===Direction.RTL;return/*#__PURE__*/_jsxs("div",{className:classNames("tabs",g,{"tabs--auto-width":i===Width.AUTO}),onTouchStart:d?a.handleTouchStart:void 0,onTouchEnd:d?a.handleTouchEnd:void 0,onTouchMove:d?a.handleTouchMove:void 0,children:[/*#__PURE__*/_jsxs(TabList,{children:[c.map(function(b,d){var g=b.title,h=b.disabled;return/*#__PURE__*/_jsx(Tab,_objectSpread(_objectSpread({ref:function ref(b){a.tabRefs[d]=b},id:"".concat(e,"-tab-").concat(d),panelId:"".concat(e,"-panel-").concat(d),selected:f===d,disabled:h,focusTab:function focusTab(){a.tabRefs[d].focus()},onClick:h?null:a.handleTabClick(d),onKeyDown:a.onKeyDown(d)},q?{style:{width:"".concat(100*(1/c.length),"%")}}:{}),{},{children:g}),g)}),l?/*#__PURE__*/_jsx("div",{className:classNames("tabs__line"),style:{width:a.getTabLineWidth(),transform:h?"translateX(-".concat(l,")"):"translateX(".concat(l,")")}}):null]}),/*#__PURE__*/_jsx("div",{ref:a.setContainerRefAndWidth,className:"tabs__panel-container",style:{overflow:w?"hidden":"visible"},children:/*#__PURE__*/_jsx(Spring,{from:{transform:"translateX(".concat(n-r,"px)")},to:{transform:"translateX(".concat(o-r,"px)")},config:{precision:k?1:.01,velocity:k?0:v,clamp:!0},onRest:function onRest(){m&&a.setState({isAnimating:!1,lastSwipeVelocity:0})},children:function children(b){return/*#__PURE__*/_jsx("div",{className:"tabs__slider",style:{width:w?"".concat(x,"px"):"100%",transform:w?b.transform:"translateX(0px)"},children:c.map(function(b,d){var g=b.content,h=b.disabled;return h?null:/*#__PURE__*/_jsxs(Fragment,{children:[d===f&&/*#__PURE__*/_jsx(y,{id:"left-spacer"}),/*#__PURE__*/_jsx(TabPanel,{tabId:"".concat(e,"-tab-").concat(d),id:"".concat(e,"-panel-").concat(d),style:{width:w?"".concat(a.containerWidth,"px"):"100%",display:w||d===f?"block":"none"},children:g},c[d].title),d===f&&/*#__PURE__*/_jsx(y,{id:"right-spacer"})]},"".concat(c[d].title,"-fragment"))})})}})})]})}})}}]),b}(Component),SpacerSizes=_objectSpread(_objectSpread({},Size),{},{NONE:"default"});Tabs.propTypes={tabs:PropTypes.arrayOf(PropTypes.shape({title:PropTypes.string.isRequired,content:PropTypes.node.isRequired,disabled:PropTypes.bool.isRequired})).isRequired,selected:PropTypes.number.isRequired,onTabSelect:PropTypes.func.isRequired,name:PropTypes.string.isRequired,animatePanelsOnClick:PropTypes.bool,changeTabOnSwipe:PropTypes.bool,className:PropTypes.string,transitionSpacing:PropTypes.oneOf(["default","xs","sm","md","lg"]),headerWidth:PropTypes.oneOf(["auto","block"])},Tabs.defaultProps={animatePanelsOnClick:!1,changeTabOnSwipe:!0,className:"",transitionSpacing:SpacerSizes.NONE,headerWidth:Width.BLOCK};export default Tabs;
@@ -1 +1,8 @@
1
- import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";import _assertThisInitialized from"@babel/runtime/helpers/assertThisInitialized";import _inherits from"@babel/runtime/helpers/inherits";import _possibleConstructorReturn from"@babel/runtime/helpers/possibleConstructorReturn";import _getPrototypeOf from"@babel/runtime/helpers/getPrototypeOf";import _defineProperty from"@babel/runtime/helpers/defineProperty";import"core-js/modules/es.reflect.construct.js";import"core-js/modules/es.array.slice.js";import"core-js/modules/es.object.to-string.js";import"core-js/modules/es.regexp.to-string.js";import"core-js/modules/es.array.concat.js";function _createSuper(a){var b=_isNativeReflectConstruct();return function(){var c,d=_getPrototypeOf(a);if(b){var e=_getPrototypeOf(this).constructor;c=Reflect.construct(d,arguments,e)}else c=d.apply(this,arguments);return _possibleConstructorReturn(this,c)}}function _isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0}catch(a){return!1}}import PropTypes from"prop-types";import{Component}from"react";import{Position}from"../common";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";function getTooltipStyle(a,b,c,d){return c===Position.TOP?{top:"".concat(a.offsetTop-b.offsetHeight-d,"px"),left:"".concat(a.offsetLeft+a.offsetWidth/2-b.offsetWidth/2,"px")}:c===Position.LEFT?{top:"".concat(a.offsetTop+a.offsetHeight/2-b.offsetHeight/2,"px"),left:"".concat(a.offsetLeft-b.offsetWidth-d,"px")}:c===Position.RIGHT?{top:"".concat(a.offsetTop+a.offsetHeight/2-b.offsetHeight/2,"px"),left:"".concat(a.offsetLeft+a.offsetWidth+d,"px")}:c===Position.BOTTOM?{top:"".concat(a.offsetTop+a.offsetHeight+d,"px"),left:"".concat(a.offsetLeft+a.offsetWidth/2-b.offsetWidth/2,"px")}:{}}var Tooltip=/*#__PURE__*/function(a){function b(){var a;return _classCallCheck(this,b),a=c.call(this),_defineProperty(_assertThisInitialized(a),"ensureHidden",function(b){a.state.show||(b.stopPropagation(),a.hide())}),a.state={show:!1,tooltipId:null},a}_inherits(b,a);var c=_createSuper(b);return _createClass(b,[{key:"componentDidMount",value:function componentDidMount(){this.setState({tooltipId:Math.random().toString(36).slice(7)})}},{key:"show",value:function show(){this.setState(function(){return{show:!0}})}},{key:"hide",value:function hide(){this.setState(function(){return{show:!1}})}},{key:"render",value:function render(){var a=this,b=this.state.tooltipId,c=this.props,d=c.position,e=c.children,f=c.label,g=c.offset,h=this.elementReference&&this.tooltipReference?getTooltipStyle(this.elementReference,this.tooltipReference,d,g):{};return/*#__PURE__*/_jsxs("span",{ref:function ref(b){a.elementReference=b},"aria-describedby":b,className:"tw-tooltip-container",onMouseOver:function onMouseOver(){return a.show()},onFocus:function onFocus(){return a.show()},onMouseOut:function onMouseOut(){return a.hide()},onBlur:function onBlur(){return a.hide()},children:[/*#__PURE__*/_jsxs("div",{ref:function ref(b){a.tooltipReference=b},className:"tooltip fade ".concat(d," ").concat(this.state.show?"in":""),role:"tooltip",style:h,id:b,onMouseOver:this.ensureHidden,onFocus:this.ensureHidden,children:[/*#__PURE__*/_jsx("div",{className:"tooltip-arrow"}),/*#__PURE__*/_jsx("div",{className:"tooltip-inner",children:f})]}),e]})}}]),b}(Component);Tooltip.propTypes={children:PropTypes.oneOfType([PropTypes.element,PropTypes.arrayOf(PropTypes.element),PropTypes.string]).isRequired,position:PropTypes.oneOf(["top","bottom","left","right"]),label:PropTypes.node.isRequired,offset:PropTypes.number},Tooltip.defaultProps={position:Position.TOP,offset:0};export default Tooltip;
1
+ import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}/* eslint-disable @typescript-eslint/ban-ts-comment */import classNames from"classnames";import{cloneElement,useRef,useState,useEffect}from"react";import{usePopper}from"react-popper";import{Position}from"../common";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";var Tooltip=function(a){var b=a.position,c=void 0===b?Position.TOP:b,d=a.children,e=void 0===d?void 0:d,f=a.label,g=a.className,h=useState(!1),i=_slicedToArray(h,2),j=i[0],k=i[1],l=useRef(null),m=useState(null),n=_slicedToArray(m,2),o=n[0],p=n[1],q=useState(null),r=_slicedToArray(q,2),s=r[0],t=r[1],u=[];u.push({name:"arrow",options:{element:o,options:{padding:8// 8px from the edges of the popper
2
+ }}}),u.push({name:"offset",options:{offset:[0,16]}}),u.push({name:"flip",options:{fallbackPlacements:Position.TOP}});var v=usePopper(l.current,s,{placement:c,modifiers:u}),w=v.styles,x=v.attributes,y=v.forceUpdate;// If the trigger is not visible when the position is calculated, it will be incorrect. Because this can happen repeatedly (on resize for example),
3
+ // it is most simple just to always position before opening
4
+ return useEffect(function(){j&&y&&y()},[j]),/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx("span",{ref:l,className:"d-inline-block",children:e?/*#__PURE__*/cloneElement(e,{/* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call */onMouseOver:function onMouseOver(){var a;if(null!==e&&void 0!==e&&null!==(a=e.props)&&void 0!==a&&a.onMouseOver){var b;null===e||void 0===e||null===(b=e.props)||void 0===b?void 0:b.onMouseOver()}k(!0)},onFocus:function onFocus(){var a;null!==e&&void 0!==e&&null!==(a=e.props)&&void 0!==a&&a.onFocus&&e.props.onFocus(),k(!0)},onMouseOut:function onMouseOut(){var a;null!==e&&void 0!==e&&null!==(a=e.props)&&void 0!==a&&a.onMouseOver&&e.props.onMouseOver(),k(!1)},onBlur:function onBlur(){var a;null!==e&&void 0!==e&&null!==(a=e.props)&&void 0!==a&&a.onBlur&&e.props.onBlur(),k(!1)}/* eslint-enable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call */}):null}),j?/*#__PURE__*/_jsx("div",_objectSpread(_objectSpread({// @ts-expect-error
5
+ ref:t,className:classNames("np-panel","np-panel--open","bg-screen",g)// eslint-disable-next-line react/forbid-dom-props
6
+ ,style:_objectSpread({},w.popper)},x.popper),{},{children:/*#__PURE__*/_jsxs("div",{className:"np-panel__content tooltip-inner",children:[f,/*#__PURE__*/_jsx("div",{// @ts-expect-error
7
+ ref:p,className:classNames("np-panel__arrow")// eslint-disable-next-line react/forbid-dom-props
8
+ ,style:w.arrow})]})})):null]})};export default Tooltip;
@@ -0,0 +1 @@
1
+ import{render,screen,fireEvent,userEvent}from"../test-utils";import Tooltip from".";import{jsx as _jsx}from"react/jsx-runtime";describe("Tooltip",function(){var a=/*#__PURE__*/_jsx("span",{children:"Hover over me!"});it("wraps anchor as a children and renders it",function(){render(/*#__PURE__*/_jsx(Tooltip,{label:"Tooltip",children:a})),expect(screen.getByText("Hover over me!")).toBeInTheDocument()}),it("appears onMouseOver",function(){render(/*#__PURE__*/_jsx(Tooltip,{label:"Tooltip",children:a})),expect(screen.queryByText("Tooltip")).not.toBeInTheDocument(),userEvent.hover(screen.getByText("Hover over me!")),expect(screen.getByText("Tooltip")).toBeInTheDocument()}),it("hides onMouseOut",function(){render(/*#__PURE__*/_jsx(Tooltip,{label:"Tooltip",children:a})),userEvent.hover(screen.getByText("Hover over me!")),expect(screen.getByText("Tooltip")).toBeInTheDocument(),userEvent.unhover(screen.getByText("Hover over me!"))}),it("appears onFocus",function(){render(/*#__PURE__*/_jsx(Tooltip,{label:"Tooltip",children:a})),expect(screen.queryByText("Tooltip")).not.toBeInTheDocument(),fireEvent.focus(screen.getByText("Hover over me!")),expect(screen.getByText("Tooltip")).toBeInTheDocument()}),it("hides onBlur",function(){render(/*#__PURE__*/_jsx(Tooltip,{label:"Tooltip",children:a})),fireEvent.blur(screen.getByText("Hover over me!")),expect(screen.queryByText("Tooltip")).not.toBeInTheDocument()})});
@@ -0,0 +1 @@
1
+ import{select,text}from"@storybook/addon-knobs";import Button from"../button";import{Position}from"../common";import Tooltip from"./Tooltip";import{jsx as _jsx}from"react/jsx-runtime";export default{component:Tooltip,title:"Tooltip"};export var Basic=function(){var a=text("label","Hey edit me!!!!!!"),b=select("position",[Position.BOTTOM,Position.TOP,Position.LEFT,Position.RIGHT],Position.BOTTOM);return/*#__PURE__*/_jsx("div",{className:"text-xs-center",children:/*#__PURE__*/_jsx(Tooltip,{label:a,position:b,children:/*#__PURE__*/_jsx(Button,{children:"Hover me"})})})};
@@ -1,4 +1,4 @@
1
- import _asyncToGenerator from"@babel/runtime/helpers/asyncToGenerator";import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";import _assertThisInitialized from"@babel/runtime/helpers/assertThisInitialized";import _inherits from"@babel/runtime/helpers/inherits";import _possibleConstructorReturn from"@babel/runtime/helpers/possibleConstructorReturn";import _getPrototypeOf from"@babel/runtime/helpers/getPrototypeOf";import _defineProperty from"@babel/runtime/helpers/defineProperty";var _UPLOAD_STEP_COMPONEN;import"core-js/modules/es.reflect.construct.js";import"core-js/modules/es.function.name.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.array.includes.js";import"core-js/modules/es.string.includes.js";import _regeneratorRuntime from"@babel/runtime/regenerator";function _createSuper(a){var b=_isNativeReflectConstruct();return function(){var c,d=_getPrototypeOf(a);if(b){var e=_getPrototypeOf(this).constructor;c=Reflect.construct(d,arguments,e)}else c=d.apply(this,arguments);return _possibleConstructorReturn(this,c)}}function _isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0}catch(a){return!1}}import{Plus as PlusIcon}from"@transferwise/icons";import classNames from"classnames";import PropTypes from"prop-types";import{Component}from"react";import{injectIntl}from"react-intl";import{Status}from"../common";import messages from"./Upload.messages";import{UploadImageStep,MediaUploadStep,ProcessingStep,CompleteStep}from"./steps";import{UploadStep}from"./uploadSteps";import{postData,asyncFileRead,isSizeValid,isTypeValid,getFileType}from"./utils";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var PROCESS_STATE=["error","success"],ANIMATION_FIX=10,MAX_SIZE_DEFAULT=5e6,UPLOAD_STEP_COMPONENTS=(_UPLOAD_STEP_COMPONEN={},_defineProperty(_UPLOAD_STEP_COMPONEN,UploadStep.UPLOAD_IMAGE_STEP,UploadImageStep),_defineProperty(_UPLOAD_STEP_COMPONEN,UploadStep.MEDIA_UPLOAD_STEP,MediaUploadStep),_UPLOAD_STEP_COMPONEN),Upload=/*#__PURE__*/function(a){function b(a){var d;return _classCallCheck(this,b),d=c.call(this,a),_defineProperty(_assertThisInitialized(d),"onAnimationCompleted",/*#__PURE__*/function(){var a=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function a(b){var c,e,f,g,h,i,j;return _regeneratorRuntime.wrap(function(a){for(;;)switch(a.prev=a.next){case 0:c=d.state,e=c.response,f=c.isProcessing,g=c.fileName,h=d.props.animationDelay,f&&b===Status.SUCCEEDED&&(i=d.props.onSuccess,d.timeouts=setTimeout(function(){d.setState({isProcessing:!1,isComplete:!0},function(){return i?i(e,g):{}})},h)),f&&b===Status.FAILED&&(j=d.props.onFailure,d.timeouts=setTimeout(function(){d.setState({isProcessing:!1,isComplete:!0},function(){return j?j(e):{}})},h));case 4:case"end":return a.stop();}},a)}));return function(){return a.apply(this,arguments)}}()),_defineProperty(_assertThisInitialized(d),"asyncPost",function(a){var b=d.props.httpOptions,c=b||{},e=c.fileInputName,f=void 0===e?a.name:e,g=c.data,h=void 0===g?{}:g,i=new FormData;return i.append(f,a),Object.keys(h).forEach(function(a){return i.append(a,h[a])}),postData(d.prepareHttpOptions(b),i)}),_defineProperty(_assertThisInitialized(d),"asyncResponse",function(a,b){d.timeouts=setTimeout(function(){d.setState({response:a,isError:b===PROCESS_STATE[0],isSuccess:b===PROCESS_STATE[1]})},ANIMATION_FIX)}),_defineProperty(_assertThisInitialized(d),"prepareHttpOptions",function(a){if(!a.url)throw new Error("You must supply a URL to post image data asynchronously");return a}),_defineProperty(_assertThisInitialized(d),"handleOnClear",function(a){a.preventDefault();var b=d.props.onCancel;b&&b(),d.reset()}),_defineProperty(_assertThisInitialized(d),"reset",function(){d.dragCounter=0,clearTimeout(d.timeouts),d.setState({isComplete:!1,isError:!1,isProcessing:!1,isSuccess:!1})}),_defineProperty(_assertThisInitialized(d),"showDataImage",function(a){var b=d.state.isImage;b&&d.setState({uploadedImage:a})}),_defineProperty(_assertThisInitialized(d),"fileDropped",/*#__PURE__*/function(){var a=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function a(b){var c,e,f,g,h,i,j,k,l,m;return _regeneratorRuntime.wrap(function(a){for(;;)switch(a.prev=a.next){case 0:if(c=d.props,e=c.httpOptions,f=c.maxSize,g=c.onStart,h=c.usDisabled,i=c.usAccept,j=d.state.isProcessing,!(h||j)){a.next=4;break}return a.abrupt("return",!1);case 4:if(b){a.next=6;break}throw new Error("Could not retrieve file");case 6:return d.setState({fileName:b.name,isDroppable:!1,isProcessing:!0}),g&&g(b),k=null,a.prev=9,a.next=12,asyncFileRead(b);case 12:k=a.sent,a.next=18;break;case 15:a.prev=15,a.t0=a["catch"](9),d.asyncResponse(a.t0,PROCESS_STATE[0]);case 18:if(k){a.next=20;break}return a.abrupt("return",!1);case 20:if(d.setState({isImage:getFileType(b,k).includes("image")}),isTypeValid(b,i,k)){a.next=25;break}return l={status:415,statusText:"Unsupported Media Type"},d.asyncResponse(l,PROCESS_STATE[0]),a.abrupt("return",!1);case 25:if(isSizeValid(b,f)){a.next=29;break}return m={status:413,statusText:"Request Entity Too Large"},d.asyncResponse(m,PROCESS_STATE[0]),a.abrupt("return",!1);case 29:if(!e){a.next=33;break}return a.next=32,d.asyncPost(b).then(function(a){return d.asyncResponse(a,"success")}).then(function(){return d.showDataImage(k),!0}).catch(function(a){return d.asyncResponse(a,PROCESS_STATE[0]),!1});case 32:return a.abrupt("return",a.sent);case 33:return d.showDataImage(k),d.asyncResponse(k,"success"),a.abrupt("return",!0);case 36:case"end":return a.stop();}},a,null,[[9,15]])}));return function(){return a.apply(this,arguments)}}()),d.dragCounter=0,d.timeouts=null,d.state={fileName:"",isComplete:!1,isError:!1,isImage:!1,isProcessing:!1,isSuccess:!1,response:null,uploadedImage:null},d}_inherits(b,a);var c=_createSuper(b);return _createClass(b,[{key:"getErrorMessage",value:function getErrorMessage(a){return 413===a?this.props.csTooLargeMessage||this.props.intl.formatMessage(messages.csTooLargeMessage):415===a?this.props.csWrongTypeMessage||this.props.intl.formatMessage(messages.csWrongTypeMessage):this.props.csFailureText||this.props.intl.formatMessage(messages.csFailureText)}},{key:"onDragLeave",value:function onDragLeave(a){a.preventDefault(),this.dragCounter-=1,0===this.dragCounter&&this.setState({isDroppable:!1})}},{key:"onDragEnter",value:function onDragEnter(a){a.preventDefault(),this.dragCounter+=1;var b=this.props.usDisabled,c=this.state.isProcessing;1!==this.dragCounter||b||c||this.setState({isDroppable:!0})}},{key:"onDrop",value:function onDrop(a){var b=this.state.isProcessing;a.preventDefault(),b||this.reset(),a.dataTransfer&&a.dataTransfer.files&&a.dataTransfer.files[0]&&this.fileDropped(a.dataTransfer.files[0])}},{key:"render",value:function render(){var a=this,b=this.props,c=b.usDropMessage,d=b.usAccept,e=b.usButtonText,f=b.usDisabled,g=b.usHelpImage,h=b.usLabel,i=b.usPlaceholder,j=b.psButtonText,k=b.psProcessingText,l=b.csButtonText,m=b.csSuccessText,n=b.size,o=b.uploadStep,p=b.intl,q=this.state,r=q.response,s=q.fileName,t=q.isComplete,u=q.isDroppable,v=q.isError,w=q.isImage,x=q.isProcessing,y=q.isSuccess,z=q.uploadedImage,A=UPLOAD_STEP_COMPONENTS[o]||UploadImageStep;return/*#__PURE__*/_jsxs("div",{className:classNames({droppable:!0,"tw-droppable-sm droppable-sm":"sm"===n,"tw-droppable-md droppable-md":"md"===n||!n,"tw-droppable-lg droppable-lg":"lg"===n,"droppable-dropping":u,"droppable-processing":x,"droppable-complete":t}),onDragEnter:function onDragEnter(b){return a.onDragEnter(b)},onDragLeave:function onDragLeave(b){return a.onDragLeave(b)},onDrop:function onDrop(b){return a.onDrop(b)},onDragOver:function onDragOver(a){return a.preventDefault()},children:[!x&&!t&&/*#__PURE__*/_jsx(A,{fileDropped:function fileDropped(b){return a.fileDropped(b)},isComplete:t,usAccept:d,usButtonText:e||p.formatMessage(messages.usButtonText),usDisabled:f,usHelpImage:g,usLabel:h,usPlaceholder:i||p.formatMessage(messages.usPlaceholder)}),x&&/*#__PURE__*/_jsx(ProcessingStep,{isComplete:t,isError:v,isSuccess:y,psButtonText:j||p.formatMessage(messages.psButtonText),psProcessingText:k||p.formatMessage(messages.psProcessingText),onAnimationCompleted:function onAnimationCompleted(b){return a.onAnimationCompleted(b)},onClear:function onClear(b){return a.handleOnClear(b)}}),(y||v||t)&&/*#__PURE__*/_jsx(CompleteStep,{fileName:s,isComplete:t,isError:v,isImage:w,csButtonText:l||p.formatMessage(messages.csButtonText),csFailureText:this.getErrorMessage(null===r||void 0===r?void 0:r.status),csSuccessText:m||p.formatMessage(messages.csSuccessText),uploadedImage:z,onClear:function onClear(b){return a.handleOnClear(b)}}),!x&&/*#__PURE__*/_jsx("div",{className:"droppable-dropping-card droppable-card",children:/*#__PURE__*/_jsxs("div",{className:"droppable-card-content",children:[/*#__PURE__*/_jsx("div",{className:"circle circle-sm p-t-1 text-info",children:/*#__PURE__*/_jsx(PlusIcon,{})}),/*#__PURE__*/_jsx("h4",{className:"m-t-3",children:c||p.formatMessage(messages.usDropMessage)})]})})]})}}]),b}(Component);/*
1
+ import _asyncToGenerator from"@babel/runtime/helpers/asyncToGenerator";import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";import _assertThisInitialized from"@babel/runtime/helpers/assertThisInitialized";import _inherits from"@babel/runtime/helpers/inherits";import _possibleConstructorReturn from"@babel/runtime/helpers/possibleConstructorReturn";import _getPrototypeOf from"@babel/runtime/helpers/getPrototypeOf";import _defineProperty from"@babel/runtime/helpers/defineProperty";var _UPLOAD_STEP_COMPONEN;import"core-js/modules/es.reflect.construct.js";import"core-js/modules/es.function.name.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.array.includes.js";import"core-js/modules/es.string.includes.js";import _regeneratorRuntime from"@babel/runtime/regenerator";function _createSuper(a){var b=_isNativeReflectConstruct();return function(){var c,d=_getPrototypeOf(a);if(b){var e=_getPrototypeOf(this).constructor;c=Reflect.construct(d,arguments,e)}else c=d.apply(this,arguments);return _possibleConstructorReturn(this,c)}}function _isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0}catch(a){return!1}}import{Plus as PlusIcon}from"@transferwise/icons";import classNames from"classnames";import PropTypes from"prop-types";import{Component}from"react";import{injectIntl}from"react-intl";import{Status}from"../common";import messages from"./Upload.messages";import{UploadImageStep,MediaUploadStep,ProcessingStep,CompleteStep}from"./steps";import{UploadStep}from"./uploadSteps";import{postData,asyncFileRead,isSizeValid,isTypeValid,getFileType}from"./utils";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var PROCESS_STATE=["error","success"],ANIMATION_FIX=10,MAX_SIZE_DEFAULT=5e6,UPLOAD_STEP_COMPONENTS=(_UPLOAD_STEP_COMPONEN={},_defineProperty(_UPLOAD_STEP_COMPONEN,UploadStep.UPLOAD_IMAGE_STEP,UploadImageStep),_defineProperty(_UPLOAD_STEP_COMPONEN,UploadStep.MEDIA_UPLOAD_STEP,MediaUploadStep),_UPLOAD_STEP_COMPONEN),Upload=/*#__PURE__*/function(a){function b(a){var d;return _classCallCheck(this,b),d=c.call(this,a),_defineProperty(_assertThisInitialized(d),"onAnimationCompleted",/*#__PURE__*/function(){var a=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function a(b){var c,e,f,g,h,i,j;return _regeneratorRuntime.wrap(function(a){for(;;)switch(a.prev=a.next){case 0:c=d.state,e=c.response,f=c.isProcessing,g=c.fileName,h=d.props.animationDelay,f&&b===Status.SUCCEEDED&&(i=d.props.onSuccess,d.timeouts=setTimeout(function(){d.setState({isProcessing:!1,isComplete:!0},function(){return i?i(e,g):{}})},h)),f&&b===Status.FAILED&&(j=d.props.onFailure,d.timeouts=setTimeout(function(){d.setState({isProcessing:!1,isComplete:!0},function(){return j?j(e):{}})},h));case 4:case"end":return a.stop();}},a)}));return function(){return a.apply(this,arguments)}}()),_defineProperty(_assertThisInitialized(d),"asyncPost",function(a){var b=d.props.httpOptions,c=b||{},e=c.fileInputName,f=void 0===e?a.name:e,g=c.data,h=void 0===g?{}:g,i=new FormData;return i.append(f,a),Object.keys(h).forEach(function(a){return i.append(a,h[a])}),postData(d.prepareHttpOptions(b),i)}),_defineProperty(_assertThisInitialized(d),"asyncResponse",function(a,b){d.timeouts=setTimeout(function(){d.setState({response:a,isError:b===PROCESS_STATE[0],isSuccess:b===PROCESS_STATE[1]})},ANIMATION_FIX)}),_defineProperty(_assertThisInitialized(d),"prepareHttpOptions",function(a){if(!a.url)throw new Error("You must supply a URL to post image data asynchronously");return a}),_defineProperty(_assertThisInitialized(d),"handleOnClear",function(a){a.preventDefault();var b=d.props.onCancel;b&&b(),d.reset()}),_defineProperty(_assertThisInitialized(d),"reset",function(){d.dragCounter=0,clearTimeout(d.timeouts),d.setState({isComplete:!1,isError:!1,isProcessing:!1,isSuccess:!1})}),_defineProperty(_assertThisInitialized(d),"showDataImage",function(a){var b=d.state.isImage;b&&d.setState({uploadedImage:a})}),_defineProperty(_assertThisInitialized(d),"fileDropped",/*#__PURE__*/function(){var a=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function a(b){var c,e,f,g,h,i,j,k,l,m;return _regeneratorRuntime.wrap(function(a){for(;;)switch(a.prev=a.next){case 0:if(c=d.props,e=c.httpOptions,f=c.maxSize,g=c.onStart,h=c.usDisabled,i=c.usAccept,j=d.state.isProcessing,!(h||j)){a.next=4;break}return a.abrupt("return",!1);case 4:if(b){a.next=6;break}throw new Error("Could not retrieve file");case 6:return d.setState({fileName:b.name,isDroppable:!1,isProcessing:!0}),g&&g(b),k=null,a.prev=9,a.next=12,asyncFileRead(b);case 12:k=a.sent,a.next=18;break;case 15:a.prev=15,a.t0=a["catch"](9),d.asyncResponse(a.t0,PROCESS_STATE[0]);case 18:if(k){a.next=20;break}return a.abrupt("return",!1);case 20:if(d.setState({isImage:getFileType(b,k).includes("image")}),isTypeValid(b,i,k)){a.next=25;break}return l={status:415,statusText:"Unsupported Media Type"},d.asyncResponse(l,PROCESS_STATE[0]),a.abrupt("return",!1);case 25:if(isSizeValid(b,f)){a.next=29;break}return m={status:413,statusText:"Request Entity Too Large"},d.asyncResponse(m,PROCESS_STATE[0]),a.abrupt("return",!1);case 29:if(!e){a.next=33;break}return a.next=32,d.asyncPost(b).then(function(a){return d.asyncResponse(a,"success")}).then(function(){return d.showDataImage(k),!0}).catch(function(a){return d.asyncResponse(a,PROCESS_STATE[0]),!1});case 32:return a.abrupt("return",a.sent);case 33:return d.showDataImage(k),d.asyncResponse(k,"success"),a.abrupt("return",!0);case 36:case"end":return a.stop();}},a,null,[[9,15]])}));return function(){return a.apply(this,arguments)}}()),d.dragCounter=0,d.timeouts=null,d.state={fileName:"",isComplete:!1,isError:!1,isImage:!1,isProcessing:!1,isSuccess:!1,response:null,uploadedImage:null},d}_inherits(b,a);var c=_createSuper(b);return _createClass(b,[{key:"getErrorMessage",value:function getErrorMessage(a){return 413===a?this.props.csTooLargeMessage||this.props.intl.formatMessage(messages.csTooLargeMessage):415===a?this.props.csWrongTypeMessage||this.props.intl.formatMessage(messages.csWrongTypeMessage):this.props.csFailureText||this.props.intl.formatMessage(messages.csFailureText)}},{key:"onDragLeave",value:function onDragLeave(a){a.preventDefault(),this.dragCounter-=1,0===this.dragCounter&&this.setState({isDroppable:!1})}},{key:"onDragEnter",value:function onDragEnter(a){a.preventDefault(),this.dragCounter+=1;var b=this.props.usDisabled,c=this.state.isProcessing;1!==this.dragCounter||b||c||this.setState({isDroppable:!0})}},{key:"onDrop",value:function onDrop(a){var b=this.state.isProcessing;a.preventDefault(),b||this.reset(),a.dataTransfer&&a.dataTransfer.files&&a.dataTransfer.files[0]&&this.fileDropped(a.dataTransfer.files[0])}},{key:"render",value:function render(){var a=this,b=this.props,c=b.usDropMessage,d=b.usAccept,e=b.usButtonText,f=b.usDisabled,g=b.usHelpImage,h=b.usLabel,i=b.usPlaceholder,j=b.psButtonText,k=b.psProcessingText,l=b.csButtonText,m=b.csSuccessText,n=b.size,o=b.uploadStep,p=b.intl,q=this.state,r=q.response,s=q.fileName,t=q.isComplete,u=q.isDroppable,v=q.isError,w=q.isImage,x=q.isProcessing,y=q.isSuccess,z=q.uploadedImage,A=UPLOAD_STEP_COMPONENTS[o]||UploadImageStep;return/*#__PURE__*/_jsxs("div",{className:classNames({droppable:!0,"tw-droppable-sm droppable-sm":"sm"===n,"tw-droppable-md droppable-md":"md"===n||!n,"tw-droppable-lg droppable-lg":"lg"===n,"droppable-dropping":u,"droppable-processing":x,"droppable-complete":t}),onDragEnter:function onDragEnter(b){return a.onDragEnter(b)},onDragLeave:function onDragLeave(b){return a.onDragLeave(b)},onDrop:function onDrop(b){return a.onDrop(b)},onDragOver:function onDragOver(a){return a.preventDefault()},children:[!x&&!t&&/*#__PURE__*/_jsx(A,{fileDropped:function fileDropped(b){return a.fileDropped(b)},isComplete:t,usAccept:d,usButtonText:e||p.formatMessage(messages.usButtonText),usDisabled:f,usHelpImage:g,usLabel:h,usPlaceholder:i||p.formatMessage(messages.usPlaceholder)}),x&&/*#__PURE__*/_jsx(ProcessingStep,{isComplete:t,isError:v,isSuccess:y,psButtonText:j||p.formatMessage(messages.psButtonText),psProcessingText:k||p.formatMessage(messages.psProcessingText),onAnimationCompleted:function onAnimationCompleted(b){return a.onAnimationCompleted(b)},onClear:function onClear(b){return a.handleOnClear(b)}}),(y||v||t)&&/*#__PURE__*/_jsx(CompleteStep,{fileName:s,isComplete:t,isError:v,isImage:w,csButtonText:l||p.formatMessage(messages.csButtonText),csFailureText:this.getErrorMessage(null===r||void 0===r?void 0:r.status),csSuccessText:m||p.formatMessage(messages.csSuccessText),uploadedImage:z,onClear:function onClear(b){return a.handleOnClear(b)}}),!x&&/*#__PURE__*/_jsx("div",{className:"droppable-dropping-card droppable-card",children:/*#__PURE__*/_jsxs("div",{className:"droppable-card-content",children:[/*#__PURE__*/_jsx("div",{className:"circle circle-sm p-t-1 text-primary",children:/*#__PURE__*/_jsx(PlusIcon,{})}),/*#__PURE__*/_jsx("h4",{className:"m-t-3",children:c||p.formatMessage(messages.usDropMessage)})]})})]})}}]),b}(Component);/*
2
2
  * This delay is required for the isError/isSuccess to be fired after isProcessing so the processIndicator, will be
3
3
  * rendered first and then updated with the right status.
4
4
  */Upload.propTypes={animationDelay:PropTypes.number,csButtonText:PropTypes.string,csFailureText:PropTypes.string,csSuccessText:PropTypes.string,csTooLargeMessage:PropTypes.string,csWrongTypeMessage:PropTypes.string,httpOptions:PropTypes.shape({url:PropTypes.string.isRequired,method:PropTypes.oneOf(["POST","PUT","PATCH"]),fileInputName:PropTypes.string,data:PropTypes.object,headers:PropTypes.object}),maxSize:PropTypes.number,onCancel:PropTypes.func,onFailure:PropTypes.func,onStart:PropTypes.func,onSuccess:PropTypes.func,psButtonText:PropTypes.string,psProcessingText:PropTypes.string,size:PropTypes.oneOf(["sm","md","lg"]),/**
@@ -1 +1 @@
1
- import{AlertCircle as AlertCircleIcon,Document as DocumentIcon}from"@transferwise/icons";import PropTypes from"prop-types";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var CompleteStep=function(a){var b=a.csButtonText,c=a.csFailureText,d=a.csSuccessText,e=a.fileName,f=a.isComplete,g=a.isError,h=a.isImage,i=a.onClear,j=a.uploadedImage;return/*#__PURE__*/_jsx("div",{className:"droppable-complete-card droppable-card","aria-hidden":!f,children:/*#__PURE__*/_jsxs("div",{className:"droppable-card-content",children:[/*#__PURE__*/_jsx("div",{className:"droppable-card-content d-flex flex-column align-items-center",children:g?/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(AlertCircleIcon,{size:24,className:"text-danger"}),c&&/*#__PURE__*/_jsx("p",{className:"m-t-2",children:c})]}):/*#__PURE__*/_jsxs(_Fragment,{children:[h&&j?/*#__PURE__*/_jsx("img",{src:j,alt:"OK",className:"thumbnail "}):/*#__PURE__*/_jsx(DocumentIcon,{}),e&&/*#__PURE__*/_jsx("p",{className:"m-b-0",children:/*#__PURE__*/_jsx("small",{children:e})}),d&&/*#__PURE__*/_jsx("div",{className:"caption m-t-1",children:/*#__PURE__*/_jsx("span",{className:"h4",children:d})})]})}),b&&/*#__PURE__*/_jsx("button",{type:"button",className:"btn btn-default btn-sm m-t-3",onClick:function onClick(a){return i(a)},children:b})]})})};CompleteStep.propTypes={csButtonText:PropTypes.string.isRequired,csSuccessText:PropTypes.string.isRequired,csFailureText:PropTypes.string.isRequired,fileName:PropTypes.string.isRequired,isComplete:PropTypes.bool.isRequired,isError:PropTypes.bool.isRequired,isImage:PropTypes.bool.isRequired,onClear:PropTypes.func.isRequired,uploadedImage:PropTypes.string},CompleteStep.defaultProps={uploadedImage:null};export default CompleteStep;
1
+ import{AlertCircle as AlertCircleIcon,Document as DocumentIcon}from"@transferwise/icons";import PropTypes from"prop-types";import{Priority,Size}from"../../..";import Button from"../../../button";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var CompleteStep=function(a){var b=a.csButtonText,c=a.csFailureText,d=a.csSuccessText,e=a.fileName,f=a.isComplete,g=a.isError,h=a.isImage,i=a.onClear,j=a.uploadedImage;return/*#__PURE__*/_jsx("div",{className:"droppable-complete-card droppable-card","aria-hidden":!f,children:/*#__PURE__*/_jsxs("div",{className:"droppable-card-content",children:[/*#__PURE__*/_jsx("div",{className:"droppable-card-content d-flex flex-column align-items-center",children:g?/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(AlertCircleIcon,{size:24,className:"text-negative"}),c&&/*#__PURE__*/_jsx("p",{className:"m-t-2",children:c})]}):/*#__PURE__*/_jsxs(_Fragment,{children:[h&&j?/*#__PURE__*/_jsx("img",{src:j,alt:"OK",className:"thumbnail "}):/*#__PURE__*/_jsx(DocumentIcon,{}),e&&/*#__PURE__*/_jsx("p",{className:"m-b-0",children:/*#__PURE__*/_jsx("small",{children:e})}),d&&/*#__PURE__*/_jsx("div",{className:"caption m-t-1",children:/*#__PURE__*/_jsx("span",{className:"h4",children:d})})]})}),b&&/*#__PURE__*/_jsx(Button,{size:Size.SMALL,priority:Priority.SECONDARY,className:"m-t-3",onClick:function onClick(a){return i(a)},children:b})]})})};CompleteStep.propTypes={csButtonText:PropTypes.string.isRequired,csSuccessText:PropTypes.string.isRequired,csFailureText:PropTypes.string.isRequired,fileName:PropTypes.string.isRequired,isComplete:PropTypes.bool.isRequired,isError:PropTypes.bool.isRequired,isImage:PropTypes.bool.isRequired,onClear:PropTypes.func.isRequired,uploadedImage:PropTypes.string},CompleteStep.defaultProps={uploadedImage:null};export default CompleteStep;
@@ -1 +1 @@
1
- import PropTypes from"prop-types";import{Status,Size}from"../../../common";import ProcessIndicator from"../../../processIndicator";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var ProcessingStep=function(a){var b=a.isComplete,c=a.isError,d=a.isSuccess,e=a.onAnimationCompleted,f=a.onClear,g=a.psButtonText,h=a.psProcessingText,i=Status.PROCESSING;return c&&(i=Status.FAILED),d&&(i=Status.SUCCEEDED),/*#__PURE__*/_jsx("div",{className:"droppable-processing-card droppable-card","aria-hidden":b,children:/*#__PURE__*/_jsxs("div",{className:"droppable-card-content",children:[/*#__PURE__*/_jsx(ProcessIndicator,{size:Size.Small,status:i,onAnimationCompleted:function onAnimationCompleted(a){return e(a)}}),/*#__PURE__*/_jsx("h4",{className:"m-t-3 m-b-3",children:h}),g&&/*#__PURE__*/_jsx("button",{type:"button",className:"btn btn-default btn-sm",onClick:function onClick(a){return f(a)},children:g})]})})};ProcessingStep.propTypes={isComplete:PropTypes.bool.isRequired,isError:PropTypes.bool.isRequired,isSuccess:PropTypes.bool.isRequired,onAnimationCompleted:PropTypes.func.isRequired,onClear:PropTypes.func.isRequired,psButtonText:PropTypes.string.isRequired,psProcessingText:PropTypes.string.isRequired};export default ProcessingStep;
1
+ import PropTypes from"prop-types";import Button from"../../../button";import{Status,Size}from"../../../common";import ProcessIndicator from"../../../processIndicator";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var ProcessingStep=function(a){var b=a.isComplete,c=a.isError,d=a.isSuccess,e=a.onAnimationCompleted,f=a.onClear,g=a.psButtonText,h=a.psProcessingText,i=Status.PROCESSING;return c&&(i=Status.FAILED),d&&(i=Status.SUCCEEDED),/*#__PURE__*/_jsx("div",{className:"droppable-processing-card droppable-card","aria-hidden":b,children:/*#__PURE__*/_jsxs("div",{className:"droppable-card-content",children:[/*#__PURE__*/_jsx(ProcessIndicator,{size:Size.Small,status:i,onAnimationCompleted:function onAnimationCompleted(a){return e(a)}}),/*#__PURE__*/_jsx("h4",{className:"m-t-3 m-b-3",children:h}),g&&/*#__PURE__*/_jsx(Button,{size:Size.SMALL,onClick:function onClick(a){return f(a)},children:g})]})})};ProcessingStep.propTypes={isComplete:PropTypes.bool.isRequired,isError:PropTypes.bool.isRequired,isSuccess:PropTypes.bool.isRequired,onAnimationCompleted:PropTypes.func.isRequired,onClear:PropTypes.func.isRequired,psButtonText:PropTypes.string.isRequired,psProcessingText:PropTypes.string.isRequired};export default ProcessingStep;
@@ -1 +1 @@
1
- import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import"core-js/modules/es.array.join.js";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";import{Upload as UploadIcon,PlusCircle as PlusIcon}from"@transferwise/icons";import classNames from"classnames";import{useState,useRef}from"react";import{useIntl}from"react-intl";import{useDirection}from"../../common/hooks";import MESSAGES from"./UploadButton.messages";import{imageFileTypes,DEFAULT_SIZE_LIMIT}from"./defaults";import getAllowedFileTypes from"./getAllowedFileTypes";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export var TEST_IDS;(function(a){a.uploadInput="uploadInput",a.mediaBody="mediaBody"})(TEST_IDS||(TEST_IDS={}));var onDragOver=function(a){a.preventDefault()},UploadButton=function(a){var b=a.disabled,c=a.multiple,d=a.fileTypes,e=void 0===d?imageFileTypes:d,f=a.sizeLimit,g=void 0===f?DEFAULT_SIZE_LIMIT:f,h=a.onChange,i=useDirection(),j=i.isRTL,k=useIntl(),l=k.formatMessage,m=useRef(null),n=useState(!1),o=_slicedToArray(n,2),p=o[0],q=o[1],r=useRef(0),s=function(){r.current=0,q(!1)},t=function getFileTypesDescription(){return Array.isArray(e)?getAllowedFileTypes(e).join(", "):"*"===e?e:getAllowedFileTypes([e]).join(", ")}(),u="*"===t,v=u?l(MESSAGES.allFileTypes):t,w=Array.isArray(e)?e.join(","):e;return/*#__PURE__*/_jsxs("div",_objectSpread(_objectSpread({className:classNames("np-upload-button-container","droppable",{"droppable-dropping":p})},!b&&{onDragEnter:function onDragEnter(a){a.preventDefault(),r.current+=1,1===r.current&&q(!0)},onDragLeave:function onDragLeave(a){a.preventDefault(),r.current-=1,0===r.current&&q(!1)},onDrop:function onDrop(a){a.preventDefault(),s(),a.dataTransfer&&a.dataTransfer.files&&a.dataTransfer.files[0]&&h(a.dataTransfer.files)},onDragOver:onDragOver}),{},{children:[/*#__PURE__*/_jsx("input",_objectSpread(_objectSpread(_objectSpread({ref:m,id:"np-upload-button",type:"file"},!u&&{accept:w}),c&&{multiple:!0}),{},{className:"tw-droppable-input",disabled:b,name:"file-upload","data-testid":TEST_IDS.uploadInput,onChange:function filesSelected(a){var b=a.target.files;b&&(h(b),m.current&&(m.current.value=""))}})),/*#__PURE__*/_jsx("label",{htmlFor:"np-upload-button",className:classNames("btn","np-upload-accent","np-upload-button",{disabled:b}),children:/*#__PURE__*/_jsxs("div",{className:"media",children:[/*#__PURE__*/_jsx("div",{className:classNames("np-upload-icon",{"media-right":j,"media-left":!j}),children:/*#__PURE__*/_jsx(UploadIcon,{size:24,className:"text-link"})}),/*#__PURE__*/_jsxs("div",{className:classNames("media-body",{"text-xs-right":j,"text-xs-left":!j}),"data-testid":TEST_IDS.mediaBody,children:[/*#__PURE__*/_jsx("div",{children:l(c?MESSAGES.uploadFiles:MESSAGES.uploadFile)}),/*#__PURE__*/_jsx("small",{className:classNames("np-upload-description",{"text-primary":!b}),children:l(MESSAGES.instructions,{fileTypes:v,size:Math.round(g/1e3)})})]})]})}),p&&/*#__PURE__*/_jsxs("div",{className:"droppable-card droppable-dropping-card droppable-card-content",children:[/*#__PURE__*/_jsx(PlusIcon,{filled:!0,size:24,className:"text-info m-x-1"}),/*#__PURE__*/_jsx("div",{className:"text-info",children:l(MESSAGES.dropFile)})]})]}))};export default UploadButton;
1
+ import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import"core-js/modules/es.array.join.js";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";import{Upload as UploadIcon,PlusCircle as PlusIcon}from"@transferwise/icons";import classNames from"classnames";import{useState,useRef}from"react";import{useIntl}from"react-intl";import{useDirection}from"../../common/hooks";import MESSAGES from"./UploadButton.messages";import{imageFileTypes,DEFAULT_SIZE_LIMIT}from"./defaults";import getAllowedFileTypes from"./getAllowedFileTypes";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export var TEST_IDS;(function(a){a.uploadInput="uploadInput",a.mediaBody="mediaBody"})(TEST_IDS||(TEST_IDS={}));var onDragOver=function(a){a.preventDefault()},UploadButton=function(a){var b=a.disabled,c=a.multiple,d=a.fileTypes,e=void 0===d?imageFileTypes:d,f=a.sizeLimit,g=void 0===f?DEFAULT_SIZE_LIMIT:f,h=a.onChange,i=useDirection(),j=i.isRTL,k=useIntl(),l=k.formatMessage,m=useRef(null),n=useState(!1),o=_slicedToArray(n,2),p=o[0],q=o[1],r=useRef(0),s=function(){r.current=0,q(!1)},t=function getFileTypesDescription(){return Array.isArray(e)?getAllowedFileTypes(e).join(", "):"*"===e?e:getAllowedFileTypes([e]).join(", ")}(),u="*"===t,v=u?l(MESSAGES.allFileTypes):t,w=Array.isArray(e)?e.join(","):e;return/*#__PURE__*/_jsxs("div",_objectSpread(_objectSpread({className:classNames("np-upload-button-container","droppable",{"droppable-dropping":p})},!b&&{onDragEnter:function onDragEnter(a){a.preventDefault(),r.current+=1,1===r.current&&q(!0)},onDragLeave:function onDragLeave(a){a.preventDefault(),r.current-=1,0===r.current&&q(!1)},onDrop:function onDrop(a){a.preventDefault(),s(),a.dataTransfer&&a.dataTransfer.files&&a.dataTransfer.files[0]&&h(a.dataTransfer.files)},onDragOver:onDragOver}),{},{children:[/*#__PURE__*/_jsx("input",_objectSpread(_objectSpread(_objectSpread({ref:m,id:"np-upload-button",type:"file"},!u&&{accept:w}),c&&{multiple:!0}),{},{className:"tw-droppable-input",disabled:b,name:"file-upload","data-testid":TEST_IDS.uploadInput,onChange:function filesSelected(a){var b=a.target.files;b&&(h(b),m.current&&(m.current.value=""))}})),/*#__PURE__*/_jsx("label",{htmlFor:"np-upload-button",className:classNames("btn","np-upload-accent","np-upload-button",{disabled:b}),children:/*#__PURE__*/_jsxs("div",{className:"media",children:[/*#__PURE__*/_jsx("div",{className:"np-upload-icon media-left",children:/*#__PURE__*/_jsx(UploadIcon,{size:24,className:"text-link"})}),/*#__PURE__*/_jsxs("div",{className:"media-body text-xs-left","data-testid":TEST_IDS.mediaBody,children:[/*#__PURE__*/_jsx("div",{children:l(c?MESSAGES.uploadFiles:MESSAGES.uploadFile)}),/*#__PURE__*/_jsx("small",{className:classNames("np-upload-description",{"text-primary":!b}),children:l(MESSAGES.instructions,{fileTypes:v,size:Math.round(g/1e3)})})]})]})}),p&&/*#__PURE__*/_jsxs("div",{className:"droppable-card droppable-dropping-card droppable-card-content",children:[/*#__PURE__*/_jsx(PlusIcon,{filled:!0,size:24,className:"text-info m-x-1"}),/*#__PURE__*/_jsx("div",{className:"text-info",children:l(MESSAGES.dropFile)})]})]}))};export default UploadButton;
@@ -1,2 +1,2 @@
1
- import _typeof from"@babel/runtime/helpers/typeof";import"core-js/modules/es.array.includes.js";import"core-js/modules/es.string.includes.js";import{AlertCircle,CrossCircle}from"@transferwise/icons";import classNames from"classnames";import{useIntl}from"react-intl";import{Size,Status}from"../../common";import{useDirection}from"../../common/hooks";import ProcessIndicator from"../../processIndicator/ProcessIndicator";import MESSAGES from"./UploadItem.messages";import{UploadItemBody}from"./UploadItemBody";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export var TEST_IDS;(function(a){a.uploadItem="uploadItem",a.mediaBody="mediaBody"})(TEST_IDS||(TEST_IDS={}));var UploadItem=function(a){var b=a.file,c=a.canDelete,d=a.onDelete,e=a.onDownload,f=useDirection(),g=f.isRTL,h=useIntl(),i=h.formatMessage,j=b.status,k=b.filename,l=b.error,m=b.url,n=[Status.SUCCEEDED,void 0].includes(j)&&!!m,o=function(){return"object"===_typeof(l)&&l.message||l||i(MESSAGES.uploadingFailed)};return/*#__PURE__*/_jsx("div",{className:classNames("np-upload-item",{"np-upload-item__link":n}),"data-testid":TEST_IDS.uploadItem,children:/*#__PURE__*/_jsxs("div",{className:"np-upload-item__body",children:[/*#__PURE__*/_jsx(UploadItemBody,{url:n?m:void 0,onDownload:function onDownloadFile(a){e&&(a.preventDefault(),e(b))},children:/*#__PURE__*/_jsx("div",{className:"np-upload-button",children:/*#__PURE__*/_jsxs("div",{className:"media",children:[/*#__PURE__*/_jsx("div",{className:classNames("np-upload-icon",{"media-right":g,"media-left":!g}),children:function getIcon(){if(l||j===Status.FAILED)return/*#__PURE__*/_jsx(AlertCircle,{size:24,className:"text-danger"});var a;switch(j){case Status.PROCESSING:case Status.PENDING:a=/*#__PURE__*/_jsx(ProcessIndicator,{size:Size.EXTRA_SMALL,status:Status.PROCESSING});break;case Status.SUCCEEDED:case Status.DONE:default:a=/*#__PURE__*/_jsx(ProcessIndicator,{size:Size.EXTRA_SMALL,status:Status.SUCCEEDED});}return/*#__PURE__*/_jsx("span",{style:{transform:"scale(0.8335)"},children:a});// Scale down ProcessIndicator to be 20px*20px to match `icons`
2
- }()}),/*#__PURE__*/_jsxs("div",{className:classNames("media-body",{"text-xs-right":g,"text-xs-left":!g}),"data-testid":TEST_IDS.mediaBody,children:[/*#__PURE__*/_jsx("div",{className:"text-word-break text-primary",children:function getTitle(){return k||i(MESSAGES.uploadedFile)}()}),/*#__PURE__*/_jsx("small",{className:"np-upload-description text-primary",children:function getDescription(){if(l||j===Status.FAILED)return/*#__PURE__*/_jsx("span",{className:"text-danger",children:o()});switch(j){case Status.PENDING:return/*#__PURE__*/_jsx("span",{children:i(MESSAGES.uploading)});case Status.PROCESSING:return/*#__PURE__*/_jsx("span",{children:i(MESSAGES.deleting)});case Status.SUCCEEDED:case Status.DONE:default:return/*#__PURE__*/_jsx("span",{className:"text-success",children:i(MESSAGES.uploaded)});}}()})]})]})})}),c&&/*#__PURE__*/_jsx("button",{"aria-label":i(MESSAGES.removeFile,{filename:k}),className:classNames("btn np-upload-item__remove-button",{"media-right":!g,"media-left":g}),type:"button",onClick:function onClick(){return d()},children:/*#__PURE__*/_jsx(CrossCircle,{filled:!0,size:16})})]})})};export default UploadItem;
1
+ import _typeof from"@babel/runtime/helpers/typeof";import"core-js/modules/es.array.includes.js";import"core-js/modules/es.string.includes.js";import{AlertCircle,CrossCircle}from"@transferwise/icons";import classNames from"classnames";import{useIntl}from"react-intl";import{Size,Status}from"../../common";import ProcessIndicator from"../../processIndicator/ProcessIndicator";import MESSAGES from"./UploadItem.messages";import{UploadItemBody}from"./UploadItemBody";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export var TEST_IDS;(function(a){a.uploadItem="uploadItem",a.mediaBody="mediaBody"})(TEST_IDS||(TEST_IDS={}));var UploadItem=function(a){var b=a.file,c=a.canDelete,d=a.onDelete,e=a.onDownload,f=useIntl(),g=f.formatMessage,h=b.status,i=b.filename,j=b.error,k=b.url,l=[Status.SUCCEEDED,void 0].includes(h)&&!!k,m=function(){return"object"===_typeof(j)&&j.message||j||g(MESSAGES.uploadingFailed)};return/*#__PURE__*/_jsx("div",{className:classNames("np-upload-item",{"np-upload-item__link":l}),"data-testid":TEST_IDS.uploadItem,children:/*#__PURE__*/_jsxs("div",{className:"np-upload-item__body",children:[/*#__PURE__*/_jsx(UploadItemBody,{url:l?k:void 0,onDownload:function onDownloadFile(a){e&&(a.preventDefault(),e(b))},children:/*#__PURE__*/_jsx("div",{className:"np-upload-button",children:/*#__PURE__*/_jsxs("div",{className:"media",children:[/*#__PURE__*/_jsx("div",{className:"np-upload-icon media-left",children:function getIcon(){if(j||h===Status.FAILED)return/*#__PURE__*/_jsx(AlertCircle,{size:24,className:"text-negative"});var a;switch(h){case Status.PROCESSING:case Status.PENDING:a=/*#__PURE__*/_jsx(ProcessIndicator,{size:Size.EXTRA_SMALL,status:Status.PROCESSING});break;case Status.SUCCEEDED:case Status.DONE:default:a=/*#__PURE__*/_jsx(ProcessIndicator,{size:Size.EXTRA_SMALL,status:Status.SUCCEEDED});}return/*#__PURE__*/_jsx("span",{style:{transform:"scale(0.8335)"},children:a});// Scale down ProcessIndicator to be 20px*20px to match `icons`
2
+ }()}),/*#__PURE__*/_jsxs("div",{className:"media-body text-xs-left","data-testid":TEST_IDS.mediaBody,children:[/*#__PURE__*/_jsx("div",{className:"text-word-break text-primary",children:function getTitle(){return i||g(MESSAGES.uploadedFile)}()}),/*#__PURE__*/_jsx("small",{className:"np-upload-description text-primary",children:function getDescription(){if(j||h===Status.FAILED)return/*#__PURE__*/_jsx("span",{className:"text-negative",children:m()});switch(h){case Status.PENDING:return/*#__PURE__*/_jsx("span",{children:g(MESSAGES.uploading)});case Status.PROCESSING:return/*#__PURE__*/_jsx("span",{children:g(MESSAGES.deleting)});case Status.SUCCEEDED:case Status.DONE:default:return/*#__PURE__*/_jsx("span",{className:"text-positive",children:g(MESSAGES.uploaded)});}}()})]})]})})}),c&&/*#__PURE__*/_jsx("button",{"aria-label":g(MESSAGES.removeFile,{filename:i}),className:"btn np-upload-item__remove-button media-left",type:"button",onClick:function onClick(){return d()},children:/*#__PURE__*/_jsx(CrossCircle,{filled:!0,size:16})})]})})};export default UploadItem;