@transferwise/components 38.3.1 → 39.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (208) hide show
  1. package/CHANGELOG.md +48 -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/focusBoundary/FocusBoundary.js +1 -1
  10. package/build/es/no-polyfill/common/hocs/index.js +1 -0
  11. package/build/es/no-polyfill/common/hocs/theme/index.js +1 -0
  12. package/build/es/no-polyfill/common/hocs/theme/withTheme.js +2 -0
  13. package/build/es/no-polyfill/common/hocs/theme/withTheme.spec.js +1 -0
  14. package/build/es/no-polyfill/common/hooks/index.js +1 -1
  15. package/build/es/no-polyfill/common/hooks/useTheme/index.js +1 -0
  16. package/build/es/no-polyfill/common/hooks/useTheme/useTheme.js +1 -0
  17. package/build/es/no-polyfill/common/hooks/useTheme/useTheme.spec.js +1 -0
  18. package/build/es/no-polyfill/common/index.js +1 -1
  19. package/build/es/no-polyfill/common/locale/index.js +13 -3
  20. package/build/es/no-polyfill/common/theme.js +1 -1
  21. package/build/es/no-polyfill/dateInput/DateInput.js +2 -2
  22. package/build/es/no-polyfill/dateLookup/dateHeader/DateHeader.js +1 -1
  23. package/build/es/no-polyfill/decision/Decision.js +3 -3
  24. package/build/es/no-polyfill/dimmer/Dimmer.js +4 -3
  25. package/build/es/no-polyfill/dimmer/Dimmer.story.js +1 -0
  26. package/build/es/no-polyfill/drawer/Drawer.js +1 -1
  27. package/build/es/no-polyfill/dynamicFieldDefinitionList/DynamicFieldDefinitionList.js +1 -1
  28. package/build/es/no-polyfill/dynamicFieldDefinitionList/FormattedValue/FormattedValue.js +1 -1
  29. package/build/es/no-polyfill/index.js +4 -4
  30. package/build/es/no-polyfill/logo/Logo.js +1 -1
  31. package/build/es/no-polyfill/nudge/Nudge.js +1 -1
  32. package/build/es/no-polyfill/phoneNumberInput/PhoneNumberInput.js +1 -1
  33. package/build/es/no-polyfill/provider/Provider.js +1 -1
  34. package/build/es/no-polyfill/provider/Provider.spec.js +2 -0
  35. package/build/es/no-polyfill/provider/Provider.story.js +1 -0
  36. package/build/es/no-polyfill/provider/direction/DirectionProvider.js +1 -1
  37. package/build/es/no-polyfill/provider/direction/DirectionProvider.spec.js +1 -0
  38. package/build/es/no-polyfill/provider/index.js +1 -1
  39. package/build/es/no-polyfill/provider/theme/ThemeProvider.js +2 -0
  40. package/build/es/no-polyfill/provider/theme/ThemeProvider.spec.js +2 -0
  41. package/build/es/no-polyfill/provider/theme/index.js +1 -0
  42. package/build/es/no-polyfill/radio/Radio.js +1 -1
  43. package/build/es/no-polyfill/select/option/Option.js +1 -1
  44. package/build/es/no-polyfill/snackbar/Snackbar.js +1 -1
  45. package/build/es/no-polyfill/stepper/Stepper.js +1 -1
  46. package/build/es/no-polyfill/summary/Summary.js +1 -1
  47. package/build/es/no-polyfill/switch/Switch.js +1 -1
  48. package/build/es/no-polyfill/tabs/Tabs.js +1 -1
  49. package/build/es/no-polyfill/tooltip/Tooltip.js +8 -1
  50. package/build/es/no-polyfill/tooltip/Tooltip.spec.js +1 -0
  51. package/build/es/no-polyfill/tooltip/Tooltip.story.js +1 -0
  52. package/build/es/no-polyfill/upload/Upload.js +1 -1
  53. package/build/es/no-polyfill/upload/steps/completeStep/completeStep.js +1 -1
  54. package/build/es/no-polyfill/upload/steps/processingStep/processingStep.js +1 -1
  55. package/build/es/no-polyfill/uploadInput/UploadInput.js +5 -4
  56. package/build/es/no-polyfill/uploadInput/UploadInput.spec.js +1 -1
  57. package/build/es/no-polyfill/uploadInput/UploadInput.story.js +1 -1
  58. package/build/es/no-polyfill/uploadInput/uploadButton/UploadButton.js +1 -1
  59. package/build/es/no-polyfill/uploadInput/uploadItem/UploadItem.js +2 -2
  60. package/build/es/polyfill/accordion/AccordionItem/AccordionItem.js +1 -1
  61. package/build/es/polyfill/alert/Alert.js +1 -1
  62. package/build/es/polyfill/checkbox/Checkbox.js +1 -1
  63. package/build/es/polyfill/common/Option/Option.js +1 -1
  64. package/build/es/polyfill/common/bottomSheet/BottomSheet.js +2 -2
  65. package/build/es/polyfill/common/direction.js +1 -0
  66. package/build/es/polyfill/common/domHelpers/index.js +1 -1
  67. package/build/es/polyfill/common/focusBoundary/FocusBoundary.js +1 -1
  68. package/build/es/polyfill/common/hocs/index.js +1 -0
  69. package/build/es/polyfill/common/hocs/theme/index.js +1 -0
  70. package/build/es/polyfill/common/hocs/theme/withTheme.js +2 -0
  71. package/build/es/polyfill/common/hocs/theme/withTheme.spec.js +1 -0
  72. package/build/es/polyfill/common/hooks/index.js +1 -1
  73. package/build/es/polyfill/common/hooks/useTheme/index.js +1 -0
  74. package/build/es/polyfill/common/hooks/useTheme/useTheme.js +1 -0
  75. package/build/es/polyfill/common/hooks/useTheme/useTheme.spec.js +1 -0
  76. package/build/es/polyfill/common/index.js +1 -1
  77. package/build/es/polyfill/common/locale/index.js +13 -3
  78. package/build/es/polyfill/common/theme.js +1 -1
  79. package/build/es/polyfill/dateInput/DateInput.js +2 -2
  80. package/build/es/polyfill/dateLookup/dateHeader/DateHeader.js +1 -1
  81. package/build/es/polyfill/decision/Decision.js +3 -3
  82. package/build/es/polyfill/dimmer/Dimmer.js +4 -3
  83. package/build/es/polyfill/dimmer/Dimmer.story.js +1 -0
  84. package/build/es/polyfill/drawer/Drawer.js +1 -1
  85. package/build/es/polyfill/dynamicFieldDefinitionList/DynamicFieldDefinitionList.js +1 -1
  86. package/build/es/polyfill/dynamicFieldDefinitionList/FormattedValue/FormattedValue.js +1 -1
  87. package/build/es/polyfill/index.js +4 -4
  88. package/build/es/polyfill/logo/Logo.js +1 -1
  89. package/build/es/polyfill/nudge/Nudge.js +1 -1
  90. package/build/es/polyfill/phoneNumberInput/PhoneNumberInput.js +1 -1
  91. package/build/es/polyfill/provider/Provider.js +1 -1
  92. package/build/es/polyfill/provider/Provider.spec.js +2 -0
  93. package/build/es/polyfill/provider/Provider.story.js +1 -0
  94. package/build/es/polyfill/provider/direction/DirectionProvider.js +1 -1
  95. package/build/es/polyfill/provider/direction/DirectionProvider.spec.js +1 -0
  96. package/build/es/polyfill/provider/index.js +1 -1
  97. package/build/es/polyfill/provider/theme/ThemeProvider.js +2 -0
  98. package/build/es/polyfill/provider/theme/ThemeProvider.spec.js +2 -0
  99. package/build/es/polyfill/provider/theme/index.js +1 -0
  100. package/build/es/polyfill/radio/Radio.js +1 -1
  101. package/build/es/polyfill/select/option/Option.js +1 -1
  102. package/build/es/polyfill/snackbar/Snackbar.js +1 -1
  103. package/build/es/polyfill/stepper/Stepper.js +1 -1
  104. package/build/es/polyfill/summary/Summary.js +1 -1
  105. package/build/es/polyfill/switch/Switch.js +1 -1
  106. package/build/es/polyfill/tabs/Tabs.js +1 -1
  107. package/build/es/polyfill/tooltip/Tooltip.js +8 -1
  108. package/build/es/polyfill/tooltip/Tooltip.spec.js +1 -0
  109. package/build/es/polyfill/tooltip/Tooltip.story.js +1 -0
  110. package/build/es/polyfill/upload/Upload.js +1 -1
  111. package/build/es/polyfill/upload/steps/completeStep/completeStep.js +1 -1
  112. package/build/es/polyfill/upload/steps/processingStep/processingStep.js +1 -1
  113. package/build/es/polyfill/uploadInput/UploadInput.js +5 -4
  114. package/build/es/polyfill/uploadInput/UploadInput.spec.js +1 -1
  115. package/build/es/polyfill/uploadInput/UploadInput.story.js +1 -1
  116. package/build/es/polyfill/uploadInput/uploadButton/UploadButton.js +1 -1
  117. package/build/es/polyfill/uploadInput/uploadItem/UploadItem.js +2 -2
  118. package/build/main.css +1 -1
  119. package/build/styles/accordion/Accordion.css +1 -1
  120. package/build/styles/avatar/Avatar.css +1 -1
  121. package/build/styles/badge/Badge.css +1 -1
  122. package/build/styles/button/Button.css +1 -1
  123. package/build/styles/card/Card.css +1 -1
  124. package/build/styles/checkboxButton/CheckboxButton.css +1 -1
  125. package/build/styles/chips/Chip.css +1 -1
  126. package/build/styles/circularButton/CircularButton.css +1 -1
  127. package/build/styles/common/Option/Option.css +1 -1
  128. package/build/styles/common/RadioButton/RadioButton.css +1 -1
  129. package/build/styles/common/bottomSheet/BottomSheet.css +1 -1
  130. package/build/styles/common/closeButton/CloseButton.css +1 -1
  131. package/build/styles/dateLookup/DateLookup.css +1 -1
  132. package/build/styles/dateLookup/dateTrigger/DateTrigger.css +1 -1
  133. package/build/styles/decision/Decision.css +1 -1
  134. package/build/styles/definitionList/DefinitionList.css +1 -1
  135. package/build/styles/dimmer/Dimmer.css +1 -1
  136. package/build/styles/drawer/Drawer.css +1 -1
  137. package/build/styles/emphasis/Emphasis.css +1 -1
  138. package/build/styles/flowNavigation/FlowNavigation.css +1 -1
  139. package/build/styles/flowNavigation/animatedLabel/AnimatedLabel.css +1 -1
  140. package/build/styles/flowNavigation/backButton/BackButton.css +1 -1
  141. package/build/styles/header/Header.css +1 -1
  142. package/build/styles/info/Info.css +1 -1
  143. package/build/styles/instructionsList/InstructionsList.css +1 -1
  144. package/build/styles/lab/mobileNav/MobileNav.css +1 -1
  145. package/build/styles/lab/pagination/Pagination.css +1 -1
  146. package/build/styles/link/Link.css +1 -1
  147. package/build/styles/loader/Loader.css +1 -1
  148. package/build/styles/main.css +1 -1
  149. package/build/styles/modal/Modal.css +1 -1
  150. package/build/styles/moneyInput/MoneyInput.css +1 -1
  151. package/build/styles/navigationOption/NavigationOption.css +1 -1
  152. package/build/styles/navigationOptionsList/NavigationOptionsList.css +1 -1
  153. package/build/styles/nudge/Nudge.css +1 -1
  154. package/build/styles/overlayHeader/OverlayHeader.css +1 -1
  155. package/build/styles/phoneNumberInput/PhoneNumberInput.css +1 -1
  156. package/build/styles/popover/Popover.css +1 -1
  157. package/build/styles/section/Section.css +1 -1
  158. package/build/styles/slidingPanel/SlidingPanel.css +1 -1
  159. package/build/styles/snackbar/Snackbar.css +1 -1
  160. package/build/styles/stepper/Stepper.css +1 -1
  161. package/build/styles/summary/Summary.css +1 -1
  162. package/build/styles/switch/Switch.css +1 -1
  163. package/build/styles/tabs/Tabs.css +1 -1
  164. package/build/styles/tile/Tile.css +1 -1
  165. package/build/styles/tooltip/Tooltip.css +1 -1
  166. package/build/styles/typeahead/Typeahead.css +1 -1
  167. package/build/styles/typeahead/typeaheadOption/TypeaheadOption.css +1 -1
  168. package/build/styles/uploadInput/UploadInput.css +1 -1
  169. package/build/styles/uploadInput/uploadButton/UploadButton.css +1 -1
  170. package/build/styles/uploadInput/uploadItem/UploadItem.css +1 -1
  171. package/build/types/common/direction.d.ts +6 -0
  172. package/build/types/common/domHelpers/index.d.ts +2 -1
  173. package/build/types/common/focusBoundary/FocusBoundary.d.ts +2 -2
  174. package/build/types/common/hocs/index.d.ts +1 -0
  175. package/build/types/common/hocs/theme/index.d.ts +1 -0
  176. package/build/types/common/hocs/theme/withTheme.d.ts +10 -0
  177. package/build/types/common/hocs/theme/withTheme.spec.d.ts +1 -0
  178. package/build/types/common/hooks/index.d.ts +3 -2
  179. package/build/types/common/hooks/useDirection/useDirection.d.ts +3 -2
  180. package/build/types/common/hooks/useTheme/index.d.ts +1 -0
  181. package/build/types/common/hooks/useTheme/useTheme.d.ts +1 -0
  182. package/build/types/common/hooks/useTheme/useTheme.spec.d.ts +1 -0
  183. package/build/types/common/index.d.ts +2 -0
  184. package/build/types/common/locale/index.d.ts +23 -2
  185. package/build/types/common/propsValues/position.d.ts +4 -0
  186. package/build/types/common/theme.d.ts +5 -2
  187. package/build/types/dimmer/Dimmer.d.ts +31 -19
  188. package/build/types/dimmer/Dimmer.story.d.ts +16 -0
  189. package/build/types/index.d.ts +5 -3
  190. package/build/types/provider/Provider.spec.d.ts +1 -0
  191. package/build/types/provider/Provider.story.d.ts +23 -0
  192. package/build/types/provider/direction/DirectionProvider.d.ts +8 -18
  193. package/build/types/provider/direction/DirectionProvider.spec.d.ts +1 -0
  194. package/build/types/provider/index.d.ts +2 -0
  195. package/build/types/provider/theme/ThemeProvider.d.ts +8 -0
  196. package/build/types/provider/theme/ThemeProvider.spec.d.ts +1 -0
  197. package/build/types/provider/theme/index.d.ts +1 -0
  198. package/build/types/test-utils/index.d.ts +0 -8
  199. package/build/types/tooltip/Tooltip.d.ts +9 -18
  200. package/build/types/tooltip/Tooltip.spec.d.ts +1 -0
  201. package/build/types/tooltip/Tooltip.story.d.ts +12 -0
  202. package/build/types/uploadInput/UploadInput.d.ts +7 -1
  203. package/build/types/uploadInput/UploadInput.story.d.ts +1 -0
  204. package/build/types/withNextPortal/withNextPortal.d.ts +2 -1
  205. package/build/umd/no-polyfill/main.js +1 -1
  206. package/build/umd/polyfill/main.js +1 -1
  207. package/package.json +13 -12
  208. package/scripts/generate-type-declarations.js +85 -0
@@ -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";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";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 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 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{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{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";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}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";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}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";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";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 _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 _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,6 +1,7 @@
1
- import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";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 classNames from"classnames";import{useState}from"react";import{useIntl}from"react-intl";import Button from"../button";import{ControlType,Priority,Status}from"../common";import Modal from"../modal";import{isSizeValid}from"../upload/utils/isSizeValid";import{isTypeValid}from"../upload/utils/isTypeValid";import MESSAGES from"./UploadInput.messages";import UploadButton from"./uploadButton/UploadButton";import{DEFAULT_SIZE_LIMIT,imageFileTypes}from"./uploadButton/defaults";import UploadItem from"./uploadItem/UploadItem";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 UploadInput=function(a){var b=a.files,c=void 0===b?[]:b,d=a.fileInputName,e=void 0===d?"file":d,f=a.className,g=a.deleteConfirm,h=a.disabled,i=a.multiple,j=void 0!==i&&i,k=a.fileTypes,l=void 0===k?imageFileTypes:k,m=a.sizeLimit,n=void 0===m?DEFAULT_SIZE_LIMIT:m,o=a.onUploadFile,p=a.onDeleteFile,q=a.onValidationError,r=a.onDownload,s=useState(null),t=_slicedToArray(s,2),u=t[0],v=t[1],w=useIntl(),x=w.formatMessage,y=new Set([Status.PENDING,Status.PROCESSING]),z=useState(j||0===c.length?c:[c[0]]),A=_slicedToArray(z,2),B=A[0],C=A[1],D=function(a){C(function(b){return b.filter(function(b){return a!==b&&a.id!==b.id})})},E=function(a,b){C(function(c){return c.map(function(c){return c===a||c.id===a.id?_objectSpread(_objectSpread({},a),b):c})})},F=function(a){var b=a.id,c=a.status;c===Status.FAILED?D(a):p&&b&&(E(a,{status:Status.PROCESSING,error:void 0}),p(b).then(function(){return D(a)}).catch(function(b){E(a,{error:b})}))};return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsxs("div",{className:classNames("np-upload-input",f),children:[B.map(function(a){return/*#__PURE__*/_jsx(UploadItem,{file:a,canDelete:(!!p||a.status===Status.FAILED)&&(!a.status||!y.has(a.status)),onDelete:a.status===Status.FAILED?function(){return F(a)}:function(){return v(a)},onDownload:r},a.id)}),(j||!j&&!B.length)&&/*#__PURE__*/_jsx(UploadButton,{disabled:h,multiple:j,fileTypes:l,sizeLimit:n,onChange:function addFiles(a){for(var f=0;f<a.length;f+=1){var b=a.item(f),c=new FormData;// Returning a FormData[] array instead of FileList so we can filter out incorrect files
1
+ import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";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 classNames from"classnames";import{useEffect,useState}from"react";import{useIntl}from"react-intl";import Button from"../button";import{ControlType,Priority,Status}from"../common";import Modal from"../modal";import{isSizeValid}from"../upload/utils/isSizeValid";import{isTypeValid}from"../upload/utils/isTypeValid";import MESSAGES from"./UploadInput.messages";import UploadButton from"./uploadButton/UploadButton";import{DEFAULT_SIZE_LIMIT,imageFileTypes}from"./uploadButton/defaults";import UploadItem from"./uploadItem/UploadItem";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 UploadInput=function(a){var b=a.files,c=void 0===b?[]:b,d=a.fileInputName,e=void 0===d?"file":d,f=a.className,g=a.deleteConfirm,h=a.disabled,i=a.multiple,j=void 0!==i&&i,k=a.fileTypes,l=void 0===k?imageFileTypes:k,m=a.sizeLimit,n=void 0===m?DEFAULT_SIZE_LIMIT:m,o=a.onUploadFile,p=a.onDeleteFile,q=a.onValidationError,r=a.onFilesChange,s=a.onDownload,t=useState(null),u=_slicedToArray(t,2),v=u[0],w=u[1],x=useState(!1),y=_slicedToArray(x,2),z=y[0],A=y[1],B=useIntl(),C=B.formatMessage,D=new Set([Status.PENDING,Status.PROCESSING]),E=useState(j||0===c.length?c:[c[0]]),F=_slicedToArray(E,2),G=F[0],H=F[1],I=function(a){H(function(b){return b.filter(function(b){return a!==b&&a.id!==b.id})})},J=function(a,b){H(function(c){return c.map(function(c){return c===a||c.id===a.id?_objectSpread(_objectSpread({},a),b):c})})},K=function(a){var b=a.id,c=a.status;c===Status.FAILED?I(a):p&&b&&(J(a,{status:Status.PROCESSING,error:void 0}),p(b).then(function(){return I(a)}).catch(function(b){J(a,{error:b})}))};// eslint-disable-line react-hooks/exhaustive-deps
2
+ return useEffect(function(){A(!0)},[]),useEffect(function(){r&&z&&r(G)},[r,G]),/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsxs("div",{className:classNames("np-upload-input",f),children:[G.map(function(a){return/*#__PURE__*/_jsx(UploadItem,{file:a,canDelete:(!!p||a.status===Status.FAILED)&&(!a.status||!D.has(a.status)),onDelete:a.status===Status.FAILED?function(){return K(a)}:function(){return w(a)},onDownload:s},a.id)}),(j||!j&&!G.length)&&/*#__PURE__*/_jsx(UploadButton,{disabled:h,multiple:j,fileTypes:l,sizeLimit:n,onChange:function addFiles(a){for(var f=0;f<a.length;f+=1){var b=a.item(f),c=new FormData;// Returning a FormData[] array instead of FileList so we can filter out incorrect files
2
3
  if(b){var d=function(){var a=b.name,d=b.size,f="".concat(a,"_").concat(d),g=Array.isArray(l)?l.join(","):l;// Check if file type is valid
3
- if(!isTypeValid(b,g)){var i={id:f,filename:a,status:Status.FAILED,error:x(MESSAGES.fileTypeNotSupported)};return C(function(a){return[].concat(_toConsumableArray(a),[i])}),q&&q(i),"continue"}// Check if the filesize is valid
4
+ if(!isTypeValid(b,g)){var i={id:f,filename:a,status:Status.FAILED,error:C(MESSAGES.fileTypeNotSupported)};return H(function(a){return[].concat(_toConsumableArray(a),[i])}),q&&q(i),"continue"}// Check if the filesize is valid
4
5
  // Convert to rough bytes
5
- if(!isSizeValid(b,1e3*n)){var k={id:f,filename:a,status:Status.FAILED,error:x(MESSAGES.fileIsTooLarge)};return C(function(a){return[].concat(_toConsumableArray(a),[k])}),q&&q(k),"continue"}c.append(e,b);var h={id:f,filename:a,status:Status.PENDING};if(C(function(a){return[].concat(_toConsumableArray(a),[h])}),o(c).then(function(a){var b=a.id,c=a.url,d=a.error;E(h,{id:b,url:c,error:d,status:Status.SUCCEEDED})}).catch(function(a){E(h,{error:a,status:Status.FAILED})}),!j)// Only upload a single file
6
- return"break"}();if("continue"===d)continue;if("break"===d)break}}}})]}),/*#__PURE__*/_jsx(Modal,{title:(null===g||void 0===g?void 0:g.title)===void 0?x(MESSAGES.deleteModalTitle):g.title,body:(null===g||void 0===g?void 0:g.body)===void 0?x(MESSAGES.deleteModalBody):g.body,open:!!u,footer:/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Button,{block:!0,onClick:function onClick(){v(null)},children:(null===g||void 0===g?void 0:g.cancelText)||x(MESSAGES.deleteModalCancelButtonText)}),/*#__PURE__*/_jsx(Button,{block:!0,priority:Priority.SECONDARY,type:ControlType.NEGATIVE,onClick:function onClick(){u&&F(u),v(null)},children:(null===g||void 0===g?void 0:g.confirmText)||x(MESSAGES.deleteModalConfirmButtonText)})]}),onClose:function onClose(){v(null)}})]})};export default UploadInput;
6
+ if(!isSizeValid(b,1e3*n)){var k={id:f,filename:a,status:Status.FAILED,error:C(MESSAGES.fileIsTooLarge)};return H(function(a){return[].concat(_toConsumableArray(a),[k])}),q&&q(k),"continue"}c.append(e,b);var h={id:f,filename:a,status:Status.PENDING};if(H(function(a){return[].concat(_toConsumableArray(a),[h])}),o(c).then(function(a){var b=a.id,c=a.url,d=a.error;J(h,{id:b,url:c,error:d,status:Status.SUCCEEDED})}).catch(function(a){J(h,{error:a,status:Status.FAILED})}),!j)// Only upload a single file
7
+ return"break"}();if("continue"===d)continue;if("break"===d)break}}}})]}),/*#__PURE__*/_jsx(Modal,{title:void 0===(null===g||void 0===g?void 0:g.title)?C(MESSAGES.deleteModalTitle):g.title,body:void 0===(null===g||void 0===g?void 0:g.body)?C(MESSAGES.deleteModalBody):g.body,open:!!v,footer:/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Button,{block:!0,onClick:function onClick(){w(null)},children:(null===g||void 0===g?void 0:g.cancelText)||C(MESSAGES.deleteModalCancelButtonText)}),/*#__PURE__*/_jsx(Button,{block:!0,priority:Priority.SECONDARY,type:ControlType.NEGATIVE,onClick:function onClick(){v&&K(v),w(null)},children:(null===g||void 0===g?void 0:g.confirmText)||C(MESSAGES.deleteModalConfirmButtonText)})]}),onClose:function onClose(){w(null)}})]})};export default UploadInput;
@@ -1 +1 @@
1
- import _asyncToGenerator from"@babel/runtime/helpers/asyncToGenerator";import _defineProperty from"@babel/runtime/helpers/defineProperty";import _regeneratorRuntime from"@babel/runtime/regenerator";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{within}from"@testing-library/react";import userEvent from"@testing-library/user-event";import{Status}from"../common";import{render,screen,waitFor,waitForElementToBeRemoved}from"../test-utils";import UploadInput from"./UploadInput";import{TEST_IDS as UPLOAD_BUTTON_TEST_IDS}from"./uploadButton/UploadButton";import{TEST_IDS as UPLOAD_ITEM_TEST_IDS}from"./uploadItem/UploadItem";import{jsx as _jsx}from"react/jsx-runtime";describe("UploadInput",function(){var a=new File(["foo"],"foo.png",{type:"image/png"}),b=new File(["foo"],"foo.jpg",{type:"image/jpeg"}),c=[{id:1,filename:"purchase-receipt.pdf",status:Status.SUCCEEDED},{id:2,filename:"CoWork-0317-invoice.pdf",status:Status.PROCESSING}],d={onUploadFile:jest.fn().mockResolvedValue({id:1}).mockResolvedValueOnce({id:2}).mockResolvedValueOnce({id:3}),onDeleteFile:jest.fn().mockResolvedValue({})},e=function(){var a=0<arguments.length&&arguments[0]!==void 0?arguments[0]:d;return render(/*#__PURE__*/_jsx(UploadInput,_objectSpread({},a)))};describe("single file upload",function(){it("should trigger onUploadFiles with a single FormData entry containing `file` field",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function c(){var f;return _regeneratorRuntime.wrap(function(c){for(;;)switch(c.prev=c.next){case 0:return e(),f=screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput),userEvent.upload(f,[a,b]),c.next=5,waitFor(function(){expect(d.onUploadFile).toHaveBeenCalledTimes(1)});case 5:case"end":return c.stop();}},c)}))),it("should render only one file even if multiple ones were supplied",function(){e(_objectSpread(_objectSpread({},d),{},{files:c})),expect(screen.getByText(c[0].filename)).toBeInTheDocument(),c.slice(1,c.length).forEach(function(a){expect(screen.queryByText(a.filename)).not.toBeInTheDocument()})})}),describe("multiple file upload",function(){it("should render all files",function(){e(_objectSpread(_objectSpread({},d),{},{files:c,multiple:!0})),c.forEach(function(a){expect(screen.getByText(a.filename)).toBeInTheDocument()})}),it("should render the UploadButton also",function(){e(_objectSpread(_objectSpread({},d),{},{files:c,multiple:!0})),expect(screen.getByText("Upload files")).toBeInTheDocument()}),it("should trigger onUploadFile with multiple FormData entries containing `file` fields",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function c(){var f;return _regeneratorRuntime.wrap(function(c){for(;;)switch(c.prev=c.next){case 0:return e(_objectSpread(_objectSpread({},d),{},{multiple:!0})),d.onUploadFile.mockClear(),expect(screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput)).toHaveAttribute("multiple"),f=screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput),userEvent.upload(f,[a,b]),c.next=7,waitFor(function(){expect(d.onUploadFile).toHaveBeenCalledTimes(2)});case 7:case"end":return c.stop();}},c)})))}),describe("file deletion",function(){it("should delete file with modal confirmation",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function a(){var b;return _regeneratorRuntime.wrap(function(a){for(;;)switch(a.prev=a.next){case 0:return e(_objectSpread(_objectSpread({},d),{},{files:c,multiple:!0})),b=screen.getAllByTestId(UPLOAD_ITEM_TEST_IDS.uploadItem)[0],within(b).getByLabelText("Remove file",{exact:!1}).click(),screen.getByText("Remove").click(),a.next=6,waitForElementToBeRemoved(b);case 6:expect(d.onDeleteFile).toHaveBeenCalledWith(c[0].id);case 7:case"end":return a.stop();}},a)}))),it("should delete file with failed state without modal confirmation",function(){var a=[{id:1,filename:"purchase-receipt.pdf",status:Status.FAILED}];e(_objectSpread(_objectSpread({},d),{},{files:a,multiple:!0}));var b=screen.getAllByTestId(UPLOAD_ITEM_TEST_IDS.uploadItem)[0];within(b).getByLabelText("Remove file",{exact:!1}).click(),expect(b).not.toBeInTheDocument()}),it("should not render delete button when no delete callback is provided",function(){e(_objectSpread(_objectSpread({},d),{},{files:c,multiple:!0,onDeleteFile:void 0})),expect(screen.queryByLabelText("Remove file ",{exact:!1})).not.toBeInTheDocument()})})});
1
+ import _asyncToGenerator from"@babel/runtime/helpers/asyncToGenerator";import _defineProperty from"@babel/runtime/helpers/defineProperty";import _regeneratorRuntime from"@babel/runtime/regenerator";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{within}from"@testing-library/react";import userEvent from"@testing-library/user-event";import{Status}from"../common";import{render,screen,waitFor,waitForElementToBeRemoved}from"../test-utils";import UploadInput from"./UploadInput";import{TEST_IDS as UPLOAD_BUTTON_TEST_IDS}from"./uploadButton/UploadButton";import{TEST_IDS as UPLOAD_ITEM_TEST_IDS}from"./uploadItem/UploadItem";import{jsx as _jsx}from"react/jsx-runtime";describe("UploadInput",function(){var a=new File(["foo"],"foo.png",{type:"image/png"}),b=new File(["foo"],"foo.jpg",{type:"image/jpeg"}),c=[{id:1,filename:"purchase-receipt.pdf",status:Status.SUCCEEDED},{id:2,filename:"CoWork-0317-invoice.pdf",status:Status.PROCESSING}],d={onUploadFile:jest.fn().mockResolvedValue({id:1}).mockResolvedValueOnce({id:2}).mockResolvedValueOnce({id:3}),onDeleteFile:jest.fn().mockResolvedValue({})},e=function(){var a=0<arguments.length&&arguments[0]!==void 0?arguments[0]:d;return render(/*#__PURE__*/_jsx(UploadInput,_objectSpread({},a)))};describe("single file upload",function(){it("should trigger onUploadFiles & onFilesChange with a single FormData entry containing `file` field",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function c(){var f,g;return _regeneratorRuntime.wrap(function(c){for(;;)switch(c.prev=c.next){case 0:return f=jest.fn(),e(_objectSpread(_objectSpread({},d),{},{onFilesChange:f})),g=screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput),userEvent.upload(g,[a,b]),c.next=6,waitFor(function(){expect(d.onUploadFile).toHaveBeenCalledTimes(1)});case 6:expect(f).toHaveBeenCalledTimes(2),expect(f).toHaveBeenNthCalledWith(1,[{filename:"foo.png",id:"foo.png_3",status:"pending",url:void 0}]),expect(f).toHaveBeenNthCalledWith(2,[{filename:"foo.png",id:2,status:"succeeded",url:void 0}]);case 9:case"end":return c.stop();}},c)}))),it("should render only one file even if multiple ones were supplied",function(){e(_objectSpread(_objectSpread({},d),{},{files:c})),expect(screen.getByText(c[0].filename)).toBeInTheDocument(),c.slice(1,c.length).forEach(function(a){expect(screen.queryByText(a.filename)).not.toBeInTheDocument()})})}),describe("multiple file upload",function(){it("should render all files",function(){e(_objectSpread(_objectSpread({},d),{},{files:c,multiple:!0})),c.forEach(function(a){expect(screen.getByText(a.filename)).toBeInTheDocument()})}),it("should render the UploadButton also",function(){e(_objectSpread(_objectSpread({},d),{},{files:c,multiple:!0})),expect(screen.getByText("Upload files")).toBeInTheDocument()}),it("should trigger onUploadFile with multiple FormData entries containing `file` fields",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function c(){var f;return _regeneratorRuntime.wrap(function(c){for(;;)switch(c.prev=c.next){case 0:return e(_objectSpread(_objectSpread({},d),{},{multiple:!0})),d.onUploadFile.mockClear(),expect(screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput)).toHaveAttribute("multiple"),f=screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput),userEvent.upload(f,[a,b]),c.next=7,waitFor(function(){expect(d.onUploadFile).toHaveBeenCalledTimes(2)});case 7:case"end":return c.stop();}},c)})))}),describe("file deletion",function(){var a=jest.fn();beforeEach(function(){a.mockClear()}),it("should delete file with modal confirmation",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function b(){var f;return _regeneratorRuntime.wrap(function(b){for(;;)switch(b.prev=b.next){case 0:return e(_objectSpread(_objectSpread({},d),{},{files:c,multiple:!0,onFilesChange:a})),f=screen.getAllByTestId(UPLOAD_ITEM_TEST_IDS.uploadItem)[0],within(f).getByLabelText("Remove file",{exact:!1}).click(),screen.getByText("Remove").click(),b.next=6,waitForElementToBeRemoved(f);case 6:expect(d.onDeleteFile).toHaveBeenCalledWith(c[0].id),expect(a).toHaveBeenCalledTimes(2),expect(a).toHaveBeenNthCalledWith(1,[{error:void 0,filename:"purchase-receipt.pdf",id:1,status:"processing"},{filename:"CoWork-0317-invoice.pdf",id:2,status:"processing"}]),expect(a).toHaveBeenLastCalledWith([{filename:"CoWork-0317-invoice.pdf",id:2,status:"processing"}]);case 10:case"end":return b.stop();}},b)}))),it("should delete file with failed state without modal confirmation",function(){var b=[{id:1,filename:"purchase-receipt.pdf",status:Status.FAILED}];e(_objectSpread(_objectSpread({},d),{},{files:b,multiple:!0,onFilesChange:a}));var c=screen.getAllByTestId(UPLOAD_ITEM_TEST_IDS.uploadItem)[0];within(c).getByLabelText("Remove file",{exact:!1}).click(),expect(c).not.toBeInTheDocument(),expect(a).toHaveBeenCalledTimes(1),expect(a).toHaveBeenCalledWith([])}),it("should not render delete button when no delete callback is provided",function(){e(_objectSpread(_objectSpread({},d),{},{files:c,multiple:!0,onDeleteFile:void 0})),expect(screen.queryByLabelText("Remove file ",{exact:!1})).not.toBeInTheDocument()})})});
@@ -1 +1 @@
1
- import _defineProperty from"@babel/runtime/helpers/defineProperty";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{Status}from"../common";import UploadInput from"./UploadInput";import{jsx as _jsx}from"react/jsx-runtime";export default{title:"UploadInput",component:UploadInput};var files=[{id:1,filename:"purchase-receipt.pdf",url:"https://wise.com/public-resources/assets/logos/wise/brand_logo_inverse.svg"},{id:2,filename:"receipt failed.png",status:Status.FAILED},{id:3,filename:"receipt failed with error string.png",status:Status.FAILED,error:"File is too large"},{id:4,filename:"receipt failed with error object.png",status:Status.FAILED,error:{message:"Filetype not supported"}}],createDelayedPromise=function(){var a=0<arguments.length&&arguments[0]!==void 0?arguments[0]:{},b=a.successful,c=a.delaySeconds,d=void 0===c?3:c,e=a.response,f=void 0===e?{id:Math.round(1e4*Math.random()),url:"#"}:e;return new Promise(function(a,c){setTimeout(function(){return!(void 0!==b)||b?a(f):c(new Error("Unexpected error"))},1e3*d)})},props={onUploadFile:function onUploadFile(){return createDelayedPromise()},onDeleteFile:function onDeleteFile(){return createDelayedPromise()}},Template=function(a){return/*#__PURE__*/_jsx(UploadInput,_objectSpread({},a))};export var SingleFile=Template.bind({});SingleFile.args=_objectSpread({},props);export var MultipleFiles=Template.bind({});MultipleFiles.args=_objectSpread(_objectSpread({},props),{},{multiple:!0});export var Disabled=Template.bind({});Disabled.args=_objectSpread(_objectSpread({},props),{},{disabled:!0});export var WithAnyFileType=Template.bind({});WithAnyFileType.args=_objectSpread(_objectSpread({},props),{},{fileTypes:"*"});export var WithSingleFileType=Template.bind({});WithSingleFileType.args=_objectSpread(_objectSpread({},props),{},{fileTypes:".zip,application/zip"});export var WithMultipleExistingFiles=Template.bind({});WithMultipleExistingFiles.args=_objectSpread(_objectSpread({},props),{},{files:files,multiple:!0});export var WithoutDelete=Template.bind({});WithoutDelete.args=_objectSpread(_objectSpread({},props),{},{files:files,onDeleteFile:void 0,multiple:!0});export var WithUploadFailed=Template.bind({});WithUploadFailed.args=_objectSpread(_objectSpread({},props),{},{files:files.slice(0),onUploadFile:function onUploadFile(){return createDelayedPromise({successful:!1})},multiple:!0});export var WithDeleteFailed=Template.bind({});WithDeleteFailed.args=_objectSpread(_objectSpread({},props),{},{files:files.slice(0),onDeleteFile:function onDeleteFile(){return createDelayedPromise({successful:!1})},multiple:!0});export var CustomConfirmMessage=Template.bind({});CustomConfirmMessage.args=_objectSpread(_objectSpread({},props),{},{files:files.slice(0),deleteConfirm:{title:"Sure you want to remove this invoice?",body:/*#__PURE__*/_jsx("img",{alt:"brand logo",src:"https://wise.com/public-resources/assets/logos/wise/brand_logo.svg"})}});export var withManualDownloadHandler=Template.bind({});withManualDownloadHandler.args=_objectSpread(_objectSpread({},props),{},{files:files,onDownload:function onDownload(a){alert("Manual download handler triggered for: ".concat(JSON.stringify(a)))}});
1
+ import _defineProperty from"@babel/runtime/helpers/defineProperty";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{action}from"@storybook/addon-actions";import{Status}from"../common";import UploadInput from"./UploadInput";import{jsx as _jsx}from"react/jsx-runtime";export default{title:"UploadInput",component:UploadInput};var files=[{id:1,filename:"purchase-receipt.pdf",url:"https://wise.com/public-resources/assets/logos/wise/brand_logo_inverse.svg"},{id:2,filename:"receipt failed.png",status:Status.FAILED},{id:3,filename:"receipt failed with error string.png",status:Status.FAILED,error:"File is too large"},{id:4,filename:"receipt failed with error object.png",status:Status.FAILED,error:{message:"Filetype not supported"}}],createDelayedPromise=function(){var a=0<arguments.length&&arguments[0]!==void 0?arguments[0]:{},b=a.successful,c=a.delaySeconds,d=void 0===c?3:c,e=a.response,f=void 0===e?{id:Math.round(1e4*Math.random()),url:"#"}:e;return new Promise(function(a,c){setTimeout(function(){return!(void 0!==b)||b?a(f):c(new Error("Unexpected error"))},1e3*d)})},props={onUploadFile:function onUploadFile(){return createDelayedPromise()},onDeleteFile:function onDeleteFile(){return createDelayedPromise()}},Template=function(a){return/*#__PURE__*/_jsx(UploadInput,_objectSpread({},a))};export var SingleFile=Template.bind({});SingleFile.args=_objectSpread({},props);export var MultipleFiles=Template.bind({});MultipleFiles.args=_objectSpread(_objectSpread({},props),{},{multiple:!0});export var Disabled=Template.bind({});Disabled.args=_objectSpread(_objectSpread({},props),{},{disabled:!0});export var WithAnyFileType=Template.bind({});WithAnyFileType.args=_objectSpread(_objectSpread({},props),{},{fileTypes:"*"});export var WithSingleFileType=Template.bind({});WithSingleFileType.args=_objectSpread(_objectSpread({},props),{},{fileTypes:".zip,application/zip"});export var WithMultipleExistingFiles=Template.bind({});WithMultipleExistingFiles.args=_objectSpread(_objectSpread({},props),{},{files:files,multiple:!0});export var WithoutDelete=Template.bind({});WithoutDelete.args=_objectSpread(_objectSpread({},props),{},{files:files,onDeleteFile:void 0,multiple:!0});export var WithUploadFailed=Template.bind({});WithUploadFailed.args=_objectSpread(_objectSpread({},props),{},{files:files.slice(0),onUploadFile:function onUploadFile(){return createDelayedPromise({successful:!1})},multiple:!0});export var WithDeleteFailed=Template.bind({});WithDeleteFailed.args=_objectSpread(_objectSpread({},props),{},{files:files.slice(0),onDeleteFile:function onDeleteFile(){return createDelayedPromise({successful:!1})},multiple:!0});export var CustomConfirmMessage=Template.bind({});CustomConfirmMessage.args=_objectSpread(_objectSpread({},props),{},{files:files.slice(0),deleteConfirm:{title:"Sure you want to remove this invoice?",body:/*#__PURE__*/_jsx("img",{alt:"brand logo",src:"https://wise.com/public-resources/assets/logos/wise/brand_logo.svg"})}});export var withManualDownloadHandler=Template.bind({});withManualDownloadHandler.args=_objectSpread(_objectSpread({},props),{},{files:files,onDownload:action("Manual download handler")});export var withFilesChangeHandler=Template.bind({});withFilesChangeHandler.args=_objectSpread(_objectSpread({},props),{},{files:files,onFilesChange:action("Files change handler")});
@@ -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{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{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{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{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;
@@ -1 +1 @@
1
- import classNames from"classnames";import PropTypes from"prop-types";import{cloneElement}from"react";import Chevron from"../../chevron";import{Position,Theme}from"../../common";import Option from"../../common/Option";import{useDirection}from"../../common/hooks";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var AccordionItem=function(a){var b=a["aria-label"],c=a.id,d=a.title,e=a.content,f=a.onClick,g=a.open,h=a.icon,i=a.theme,j=h?/*#__PURE__*/cloneElement(h,{size:24}):null,k=useDirection(),l=k.isRTL;return/*#__PURE__*/_jsxs("div",{id:c,className:classNames("np-accordion-item","np-accordion-item--".concat(i),{"np-accordion-item--open":g}),children:[/*#__PURE__*/_jsx(Option,{"aria-label":b,as:"button",media:j,title:d,button:/*#__PURE__*/_jsx(Chevron,{orientation:g?Position.TOP:Position.DOWN}),inverseMediaCircle:!1,onClick:f}),g&&/*#__PURE__*/_jsx("div",{className:classNames("np-accordion-item__content",{"icon-right":h&&l,"icon-left":h}),children:e})]})};AccordionItem.propTypes={"aria-label":PropTypes.string,content:PropTypes.node.isRequired,icon:PropTypes.node,id:PropTypes.string,open:PropTypes.bool.isRequired,onClick:PropTypes.func.isRequired,title:PropTypes.node.isRequired,theme:PropTypes.oneOf(["light","dark"])},AccordionItem.defaultProps={"aria-label":void 0,icon:null,id:null,theme:Theme.LIGHT};export default AccordionItem;
1
+ import classNames from"classnames";import PropTypes from"prop-types";import{cloneElement}from"react";import Chevron from"../../chevron";import{Position,Theme}from"../../common";import Option from"../../common/Option";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var AccordionItem=function(a){var b=a["aria-label"],c=a.id,d=a.title,e=a.content,f=a.onClick,g=a.open,h=a.icon,i=a.theme,j=h?/*#__PURE__*/cloneElement(h,{size:24}):null;return/*#__PURE__*/_jsxs("div",{id:c,className:classNames("np-accordion-item","np-accordion-item--".concat(i),{"np-accordion-item--open":g}),children:[/*#__PURE__*/_jsx(Option,{"aria-label":b,as:"button",media:j,title:d,button:/*#__PURE__*/_jsx(Chevron,{orientation:g?Position.TOP:Position.DOWN}),inverseMediaCircle:!1,onClick:f}),g&&/*#__PURE__*/_jsx("div",{className:classNames("np-accordion-item__content",{"has-icon":h}),children:e})]})};AccordionItem.propTypes={"aria-label":PropTypes.string,content:PropTypes.node.isRequired,icon:PropTypes.node,id:PropTypes.string,open:PropTypes.bool.isRequired,onClick:PropTypes.func.isRequired,title:PropTypes.node.isRequired,theme:PropTypes.oneOf(["light","dark"])},AccordionItem.defaultProps={"aria-label":void 0,icon:null,id:null,theme:Theme.LIGHT};export default AccordionItem;
@@ -1 +1 @@
1
- import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _defineProperty from"@babel/runtime/helpers/defineProperty";var _deprecatedTypeMap,_iconTypeMap,_deprecatedTypeMapMes;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"core-js/modules/es.object.keys.js";import"core-js/modules/es.array.concat.js";import"core-js/modules/es.array.includes.js";import"core-js/modules/es.string.includes.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{InfoCircle,CheckCircle,Alert as AlertIcon,AlertCircle}from"@transferwise/icons";import classNames from"classnames";import PropTypes from"prop-types";import{cloneElement,useState,useRef}from"react";import requiredIf from"react-required-if";import{Sentiment}from"../common";import CloseButton from"../common/closeButton";import{useDirection}from"../common/hooks";import{logActionRequiredIf,deprecated}from"../utilities";import InlineMarkdown from"./inlineMarkdown";import withArrow from"./withArrow";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var deprecatedTypeMap=(_deprecatedTypeMap={},_defineProperty(_deprecatedTypeMap,Sentiment.SUCCESS,Sentiment.POSITIVE),_defineProperty(_deprecatedTypeMap,Sentiment.INFO,Sentiment.NEUTRAL),_defineProperty(_deprecatedTypeMap,Sentiment.ERROR,Sentiment.NEGATIVE),_deprecatedTypeMap),iconTypeMap=(_iconTypeMap={},_defineProperty(_iconTypeMap,Sentiment.POSITIVE,CheckCircle),_defineProperty(_iconTypeMap,Sentiment.NEUTRAL,InfoCircle),_defineProperty(_iconTypeMap,Sentiment.WARNING,AlertIcon),_defineProperty(_iconTypeMap,Sentiment.NEGATIVE,AlertCircle),_iconTypeMap),Alert=function(a){var b=useState(!1),c=_slicedToArray(b,2),d=c[0],e=c[1],f=a.arrow,g=a.action,h=a.children,i=a.className,j=a.icon,k=a.onDismiss,l=a.message,m=a.type,n=useRef(null),o=useDirection(),p=o.isRTL;if(f){var t=withArrow(Alert,f);return/*#__PURE__*/_jsx(t,_objectSpread({},a))}logActionRequired(a);var q=deprecatedTypeMap[m]||m,r=iconTypeMap[q],s=j?/*#__PURE__*/cloneElement(j,{size:24}):/*#__PURE__*/_jsx(r,{size:24});return/*#__PURE__*/_jsxs("div",{role:"alert",className:classNames("alert d-flex","alert-".concat(q),i),onTouchStart:function handleTouchStart(){return e(!0)},onTouchEnd:function handleTouchEnd(a){d&&g&&null!==n&&void 0!==n&&n.current&&!n.current.contains(a.target)&&("_blank"===(null===g||void 0===g?void 0:g.target)?window.top.open(g.href):window.top.location.assign(g.href)),e(!1)},onTouchMove:function handleTouchMove(){return e(!1)},children:[s,/*#__PURE__*/_jsxs("div",{className:classNames("alert__message flex-grow-1",{"p-l-2":!p,"p-r-2":p}),children:[/*#__PURE__*/_jsx("div",{children:h||/*#__PURE__*/_jsx(InlineMarkdown,{children:l})}),g&&/*#__PURE__*/_jsx("a",{href:g.href,className:"m-t-1 d-inline-block","aria-label":g["aria-label"],target:g.target,children:g.text})]}),k&&/*#__PURE__*/_jsx(CloseButton,{ref:n,size:16,className:classNames({"m-l-2":!p,"m-r-2":p}),onClick:k})]})},deprecatedTypeMapMessage=(_deprecatedTypeMapMes={},_defineProperty(_deprecatedTypeMapMes,Sentiment.SUCCESS,"Sentiment.POSITIVE"),_defineProperty(_deprecatedTypeMapMes,Sentiment.INFO,"Sentiment.NEUTRAL"),_defineProperty(_deprecatedTypeMapMes,Sentiment.ERROR,"Sentiment.NEGATIVE"),_deprecatedTypeMapMes),deprecatedTypes=Object.keys(deprecatedTypeMap);function logActionRequired(a){var b=a.size,c=a.type;logActionRequiredIf("Alert no longer supports any possible variations in size. Please remove the `size` prop.",!!b),logActionRequiredIf("Alert has deprecated the ".concat(c," value for the `type` prop. Please update to ").concat(deprecatedTypeMapMessage[c],"."),deprecatedTypes.includes(c))}Alert.propTypes={/** An optional call to action to sit under the main body of the alert. If your label is short, use aria-label to provide more context */action:PropTypes.shape({"aria-label":PropTypes.string,href:PropTypes.string.isRequired,target:PropTypes.string,text:PropTypes.node.isRequired}),className:PropTypes.string,/** An optional icon. If not provided, we will default the icon to something appropriate for the type */icon:PropTypes.element,/** The main body of the alert. Accepts plain text and bold words specified with **double stars*/message:requiredIf(PropTypes.node,function(a){var b=a.children;return!b}),/** The presence of the onDismiss handler will trigger the visibility of the close button */onDismiss:PropTypes.func,/** The type dictates which icon and colour will be used */type:PropTypes.oneOf(["negative","neutral","positive","warning","info","error","success"]),/** @deprecated no arrow for `Alert` component anymore, consider to use [`InlineAlert`](https://transferwise.github.io/neptune-web/components/alerts/InlineAlert) component */arrow:deprecated(PropTypes.oneOf(["up-left","up-center","up-right","down-left","down-center","down-right"]),{component:"Alert",expiryDate:new Date("03-01-2021")}),/** @deprecated use `message` property instead */children:deprecated(requiredIf(PropTypes.node,function(a){var b=a.message;return!b}),{component:"Alert",message:"You should now use the `message` prop. Be aware `message` only accepts plain text or text with **bold** markdown.",expiryDate:new Date("03-01-2021")}),/** @deprecated use `onDismiss` instead */dismissible:deprecated(PropTypes.bool,{component:"Alert",message:"The Alert will now be considered dismissible if an `onDismiss` hander is present.",expiryDate:new Date("03-01-2021")})},Alert.defaultProps={action:void 0,arrow:void 0,className:void 0,dismissible:void 0,icon:void 0,type:Sentiment.NEUTRAL};export default Alert;
1
+ import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _defineProperty from"@babel/runtime/helpers/defineProperty";var _deprecatedTypeMap,_iconTypeMap,_deprecatedTypeMapMes;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"core-js/modules/es.object.keys.js";import"core-js/modules/es.array.concat.js";import"core-js/modules/es.array.includes.js";import"core-js/modules/es.string.includes.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{InfoCircle,CheckCircle,Alert as AlertIcon,AlertCircle}from"@transferwise/icons";import classNames from"classnames";import PropTypes from"prop-types";import{cloneElement,useState,useRef}from"react";import requiredIf from"react-required-if";import{Sentiment}from"../common";import CloseButton from"../common/closeButton";import{logActionRequiredIf,deprecated}from"../utilities";import InlineMarkdown from"./inlineMarkdown";import withArrow from"./withArrow";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var deprecatedTypeMap=(_deprecatedTypeMap={},_defineProperty(_deprecatedTypeMap,Sentiment.SUCCESS,Sentiment.POSITIVE),_defineProperty(_deprecatedTypeMap,Sentiment.INFO,Sentiment.NEUTRAL),_defineProperty(_deprecatedTypeMap,Sentiment.ERROR,Sentiment.NEGATIVE),_deprecatedTypeMap),iconTypeMap=(_iconTypeMap={},_defineProperty(_iconTypeMap,Sentiment.POSITIVE,CheckCircle),_defineProperty(_iconTypeMap,Sentiment.NEUTRAL,InfoCircle),_defineProperty(_iconTypeMap,Sentiment.WARNING,AlertIcon),_defineProperty(_iconTypeMap,Sentiment.NEGATIVE,AlertCircle),_iconTypeMap),Alert=function(a){var b=useState(!1),c=_slicedToArray(b,2),d=c[0],e=c[1],f=a.arrow,g=a.action,h=a.children,i=a.className,j=a.icon,k=a.onDismiss,l=a.message,m=a.type,n=useRef(null);if(f){var r=withArrow(Alert,f);return/*#__PURE__*/_jsx(r,_objectSpread({},a))}logActionRequired(a);var o=deprecatedTypeMap[m]||m,p=iconTypeMap[o],q=j?/*#__PURE__*/cloneElement(j,{size:24}):/*#__PURE__*/_jsx(p,{size:24});return/*#__PURE__*/_jsxs("div",{role:"alert",className:classNames("alert d-flex","alert-".concat(o),i),onTouchStart:function handleTouchStart(){return e(!0)},onTouchEnd:function handleTouchEnd(a){d&&g&&null!==n&&void 0!==n&&n.current&&!n.current.contains(a.target)&&("_blank"===(null===g||void 0===g?void 0:g.target)?window.top.open(g.href):window.top.location.assign(g.href)),e(!1)},onTouchMove:function handleTouchMove(){return e(!1)},children:[q,/*#__PURE__*/_jsxs("div",{className:"alert__message flex-grow-1 p-l-2",children:[/*#__PURE__*/_jsx("div",{children:h||/*#__PURE__*/_jsx(InlineMarkdown,{children:l})}),g&&/*#__PURE__*/_jsx("a",{href:g.href,className:"m-t-1 d-inline-block","aria-label":g["aria-label"],target:g.target,children:g.text})]}),k&&/*#__PURE__*/_jsx(CloseButton,{ref:n,size:16,className:"m-l-2",onClick:k})]})},deprecatedTypeMapMessage=(_deprecatedTypeMapMes={},_defineProperty(_deprecatedTypeMapMes,Sentiment.SUCCESS,"Sentiment.POSITIVE"),_defineProperty(_deprecatedTypeMapMes,Sentiment.INFO,"Sentiment.NEUTRAL"),_defineProperty(_deprecatedTypeMapMes,Sentiment.ERROR,"Sentiment.NEGATIVE"),_deprecatedTypeMapMes),deprecatedTypes=Object.keys(deprecatedTypeMap);function logActionRequired(a){var b=a.size,c=a.type;logActionRequiredIf("Alert no longer supports any possible variations in size. Please remove the `size` prop.",!!b),logActionRequiredIf("Alert has deprecated the ".concat(c," value for the `type` prop. Please update to ").concat(deprecatedTypeMapMessage[c],"."),deprecatedTypes.includes(c))}Alert.propTypes={/** An optional call to action to sit under the main body of the alert. If your label is short, use aria-label to provide more context */action:PropTypes.shape({"aria-label":PropTypes.string,href:PropTypes.string.isRequired,target:PropTypes.string,text:PropTypes.node.isRequired}),className:PropTypes.string,/** An optional icon. If not provided, we will default the icon to something appropriate for the type */icon:PropTypes.element,/** The main body of the alert. Accepts plain text and bold words specified with **double stars*/message:requiredIf(PropTypes.node,function(a){var b=a.children;return!b}),/** The presence of the onDismiss handler will trigger the visibility of the close button */onDismiss:PropTypes.func,/** The type dictates which icon and colour will be used */type:PropTypes.oneOf(["negative","neutral","positive","warning","info","error","success"]),/** @deprecated no arrow for `Alert` component anymore, consider to use [`InlineAlert`](https://transferwise.github.io/neptune-web/components/alerts/InlineAlert) component */arrow:deprecated(PropTypes.oneOf(["up-left","up-center","up-right","down-left","down-center","down-right"]),{component:"Alert",expiryDate:new Date("03-01-2021")}),/** @deprecated use `message` property instead */children:deprecated(requiredIf(PropTypes.node,function(a){var b=a.message;return!b}),{component:"Alert",message:"You should now use the `message` prop. Be aware `message` only accepts plain text or text with **bold** markdown.",expiryDate:new Date("03-01-2021")}),/** @deprecated use `onDismiss` instead */dismissible:deprecated(PropTypes.bool,{component:"Alert",message:"The Alert will now be considered dismissible if an `onDismiss` hander is present.",expiryDate:new Date("03-01-2021")})},Alert.defaultProps={action:void 0,arrow:void 0,className:void 0,dismissible:void 0,icon:void 0,type:Sentiment.NEUTRAL};export default Alert;
@@ -1 +1 @@
1
- import classNames from"classnames";import PropTypes from"prop-types";import CheckboxButton from"../checkboxButton";import{useDirection}from"../common/hooks";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var Checkbox=function(a){var b=a.id,c=a.checked,d=a.required,e=a.disabled,f=a.readOnly,g=a.label,h=a.secondary,i=a.onChange,j=a.onFocus,k=a.onBlur,l=useDirection(),m=l.isRTL,n=d&&!e&&!f&&!c,o=classNames("np-checkbox",{checkbox:!0,"checkbox-lg":h,"has-error":n,disabled:e});return/*#__PURE__*/_jsx("div",{id:b,className:o,children:/*#__PURE__*/_jsxs("label",{children:[/*#__PURE__*/_jsx(CheckboxButton,{className:classNames({"has-error":n,"p-r-2":!m,"p-l-2":m}),checked:c,disabled:e||f,onFocus:j,onChange:function onChange(){return i(!c)},onBlur:k}),/*#__PURE__*/_jsxs("span",{className:"np-checkbox__text",children:[g,d&&"*",h&&/*#__PURE__*/_jsx("small",{children:h})]})]})})};Checkbox.propTypes={id:PropTypes.string,checked:PropTypes.bool,required:PropTypes.bool,disabled:PropTypes.bool,readOnly:PropTypes.bool,label:PropTypes.node.isRequired,secondary:PropTypes.string,onFocus:PropTypes.func,onChange:PropTypes.func.isRequired,onBlur:PropTypes.func},Checkbox.defaultProps={id:null,checked:!1,required:!1,disabled:!1,readOnly:!1,secondary:null,onFocus:null,onBlur:null};export default Checkbox;
1
+ import classNames from"classnames";import PropTypes from"prop-types";import CheckboxButton from"../checkboxButton";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var Checkbox=function(a){var b=a.id,c=a.checked,d=a.required,e=a.disabled,f=a.readOnly,g=a.label,h=a.secondary,i=a.onChange,j=a.onFocus,k=a.onBlur,l=d&&!e&&!f&&!c,m=classNames("np-checkbox",{checkbox:!0,"checkbox-lg":h,"has-error":l,disabled:e});return/*#__PURE__*/_jsx("div",{id:b,className:m,children:/*#__PURE__*/_jsxs("label",{children:[/*#__PURE__*/_jsx(CheckboxButton,{className:classNames("p-r-2",{"has-error":l}),checked:c,disabled:e||f,onFocus:j,onChange:function onChange(){return i(!c)},onBlur:k}),/*#__PURE__*/_jsxs("span",{className:"np-checkbox__text",children:[g,d&&"*",h&&/*#__PURE__*/_jsx("small",{children:h})]})]})})};Checkbox.propTypes={id:PropTypes.string,checked:PropTypes.bool,required:PropTypes.bool,disabled:PropTypes.bool,readOnly:PropTypes.bool,label:PropTypes.node.isRequired,secondary:PropTypes.string,onFocus:PropTypes.func,onChange:PropTypes.func.isRequired,onBlur:PropTypes.func},Checkbox.defaultProps={id:null,checked:!1,required:!1,disabled:!1,readOnly:!1,secondary:null,onFocus:null,onBlur:null};export default Checkbox;
@@ -1 +1 @@
1
- import classNames from"classnames";import PropTypes from"prop-types";import requiredIf from"react-required-if";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var Option=function(a){var b=a["aria-label"],c=a.as,d=a.href,e=a.target,f=a.media,g=a.title,h=a.content,i=a.onClick,j=a.htmlFor,k=a.disabled,l=a.button,m=a.decision,n=a.complex,o=a.className,p=a.inverseMediaCircle,q=a.showMediaAtAllSizes,r=a.showMediaCircle;return/*#__PURE__*/_jsx(c,{className:classNames("np-option",o,{"decision-complex":n,decision:m,disabled:k,"np-option__sm-media":q}),href:d,htmlFor:j,target:e,disabled:k&&"button"===c,"aria-label":b,onClick:i,children:/*#__PURE__*/_jsxs("div",{className:"media",children:[f&&/*#__PURE__*/_jsx("div",{className:"media-left",children:r?/*#__PURE__*/_jsx("div",{className:classNames("circle circle-sm text-primary",{"circle-inverse":p}),children:f}):/*#__PURE__*/_jsx("div",{className:"np-option__no-media-circle",children:f})}),/*#__PURE__*/_jsxs("div",{className:"media-body",children:[/*#__PURE__*/_jsx("div",{className:"h5",children:g}),h&&/*#__PURE__*/_jsx("div",{className:"decision__content",children:h})]}),/*#__PURE__*/_jsx("div",{className:"media-right",children:l})]})})};Option.propTypes={"aria-label":PropTypes.string,media:PropTypes.node,htmlFor:PropTypes.string,title:PropTypes.node.isRequired,content:PropTypes.node,onClick:PropTypes.func,href:requiredIf(PropTypes.string,function(a){return"a"===a.as}),target:PropTypes.oneOf(["_self","_blank","_parent","_top"]),as:PropTypes.string,disabled:PropTypes.bool,button:PropTypes.node,decision:PropTypes.bool,complex:PropTypes.bool,inverseMediaCircle:PropTypes.bool,className:PropTypes.string,showMediaAtAllSizes:PropTypes.bool,showMediaCircle:PropTypes.bool},Option.defaultProps={"aria-label":void 0,as:"label",media:"",content:null,htmlFor:null,disabled:!1,button:null,onClick:null,href:null,target:void 0,decision:!0,complex:!1,inverseMediaCircle:!0,className:null,showMediaAtAllSizes:!1,showMediaCircle:!0};export default Option;
1
+ import classNames from"classnames";import PropTypes from"prop-types";import requiredIf from"react-required-if";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var Option=function(a){var b=a["aria-label"],c=a.as,d=a.href,e=a.target,f=a.media,g=a.title,h=a.content,i=a.onClick,j=a.htmlFor,k=a.disabled,l=a.button,m=a.decision,n=a.complex,o=a.className,p=a.inverseMediaCircle,q=a.showMediaAtAllSizes,r=a.showMediaCircle;return/*#__PURE__*/_jsx(c,{className:classNames("np-option",o,{"decision-complex":n,decision:m,disabled:k,"np-option__sm-media":q}),href:d,htmlFor:j,target:e,disabled:k&&"button"===c,"aria-label":b,onClick:i,children:/*#__PURE__*/_jsxs("div",{className:"media",children:[f&&/*#__PURE__*/_jsx("div",{className:"media-left",children:r?/*#__PURE__*/_jsx("div",{className:classNames("circle circle-sm text-primary",{"circle-inverse":p}),children:f}):/*#__PURE__*/_jsx("div",{className:"np-option__no-media-circle",children:f})}),/*#__PURE__*/_jsxs("div",{className:"media-body",children:[/*#__PURE__*/_jsx("div",{className:"decision__title",children:g}),h&&/*#__PURE__*/_jsx("div",{className:"decision__content",children:h})]}),/*#__PURE__*/_jsx("div",{className:"media-right",children:l})]})})};Option.propTypes={"aria-label":PropTypes.string,media:PropTypes.node,htmlFor:PropTypes.string,title:PropTypes.node.isRequired,content:PropTypes.node,onClick:PropTypes.func,href:requiredIf(PropTypes.string,function(a){return"a"===a.as}),target:PropTypes.oneOf(["_self","_blank","_parent","_top"]),as:PropTypes.string,disabled:PropTypes.bool,button:PropTypes.node,decision:PropTypes.bool,complex:PropTypes.bool,inverseMediaCircle:PropTypes.bool,className:PropTypes.string,showMediaAtAllSizes:PropTypes.bool,showMediaCircle:PropTypes.bool},Option.defaultProps={"aria-label":void 0,as:"label",media:"",content:null,htmlFor:null,disabled:!1,button:null,onClick:null,href:null,target:void 0,decision:!0,complex:!1,inverseMediaCircle:!0,className:null,showMediaAtAllSizes:!1,showMediaCircle:!0};export default Option;
@@ -1,4 +1,4 @@
1
- import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import"core-js/modules/es.array.concat.js";import classNames from"classnames";import{useRef,useState}from"react";import Dimmer from"../../dimmer";import SlidingPanel from"../../slidingPanel";import CloseButton from"../closeButton";import{isServerSideRendering}from"../domHelpers";import{useConditionalListener}from"../hooks";import{Position}from"../propsValues/position";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var INITIAL_Y_POSITION=0,CONTENT_SCROLL_THRESHOLD=1,MOVE_OFFSET_THRESHOLD=50,BottomSheet=function(a){function b(a){null!==g.current&&(g.current.style.transform="translateY(".concat(a,"px)"))}function c(){m(!1),o.current=INITIAL_Y_POSITION,null!==g.current&&g.current.style.removeProperty("transform"),a.onClose&&a.onClose()}function d(){// stop moving component
1
+ import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import"core-js/modules/es.array.concat.js";import classNames from"classnames";import{useRef,useState}from"react";import Dimmer from"../../dimmer";import SlidingPanel from"../../slidingPanel";import CloseButton from"../closeButton";import{isServerSide}from"../domHelpers";import{useConditionalListener}from"../hooks";import{Position}from"../propsValues/position";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var INITIAL_Y_POSITION=0,CONTENT_SCROLL_THRESHOLD=1,MOVE_OFFSET_THRESHOLD=50,BottomSheet=function(a){function b(a){null!==g.current&&(g.current.style.transform="translateY(".concat(a,"px)"))}function c(){m(!1),o.current=INITIAL_Y_POSITION,null!==g.current&&g.current.style.removeProperty("transform"),a.onClose&&a.onClose()}function d(){// stop moving component
2
2
  cancelAnimationFrame(n.current),m(!1),o.current>MOVE_OFFSET_THRESHOLD&&e()?c():b(INITIAL_Y_POSITION),o.current=INITIAL_Y_POSITION}function e(){var a;return(null===i||void 0===i||null===(a=i.current)||void 0===a?void 0:a.scrollTop)!==void 0&&i.current.scrollTop<=CONTENT_SCROLL_THRESHOLD}/**
3
3
  * Calculates how hard user moves component,
4
4
  * result value used to determine whether to hide component or re-position to default state
@@ -7,4 +7,4 @@ cancelAnimationFrame(n.current),m(!1),o.current>MOVE_OFFSET_THRESHOLD&&e()?c():b
7
7
  */function f(a){return a-p.current}/**
8
8
  * Set `max-height` for content part (in order to keep it scrollable for content overflow cases) of the component
9
9
  * and ensures space for safe zone (32px) at the top.
10
- */var g=useRef(null),h=useRef(null),i=useRef(null),j=useState(!1),k=_slicedToArray(j,2),l=k[0],m=k[1],n=useRef(0),o=useRef(0),p=useRef(0);useConditionalListener({attachListener:a.open&&!isServerSideRendering(),callback:function callback(){if(null!==h.current){var a=h.current.classList;e()?a.remove("np-bottom-sheet--top-bar--shadow"):a.add("np-bottom-sheet--top-bar--shadow")}},eventType:"scroll",parent:isServerSideRendering()?void 0:document});var q=function(a){return function(b){p.current=(a?b.touches[0]:b).clientY,m(!0)}},r=function(a){return function(c){if(l){var d=a?c.touches[0]:c,h=d.clientY,i=f(h);i>INITIAL_Y_POSITION&&e()&&(o.current=i,n.current=requestAnimationFrame(function(){n.current!==void 0&&null!==g.current&&b(i)}))}}};return/*#__PURE__*/_jsx(Dimmer,{open:a.open,fadeContentOnEnter:!0,fadeContentOnExit:!0,onClose:c,children:/*#__PURE__*/_jsxs(SlidingPanel,{ref:g,open:a.open,position:Position.BOTTOM,className:classNames("np-bottom-sheet",a.className),role:"dialog",onTouchStart:q(!0),onTouchMove:r(!0),onTouchEnd:d,onMouseDown:q(!1),onMouseMove:r(!1),onMouseUp:d,children:[/*#__PURE__*/_jsxs("div",{ref:h,className:"np-bottom-sheet--top-bar",children:[/*#__PURE__*/_jsx("div",{className:"np-bottom-sheet--handler"}),/*#__PURE__*/_jsx(CloseButton,{size:16,className:"sr-only np-bottom-sheet--close-btn",onClick:c})]}),/*#__PURE__*/_jsx("div",{ref:i,style:function(){var a=isServerSideRendering()?0:window.innerHeight,b="".concat(100*(.01*a),"px");return{maxHeight:"calc(".concat(b," - ").concat("64px"," - ").concat("32px",")")}}(),className:"np-bottom-sheet--content",children:a.children})]})})};export default BottomSheet;
10
+ */var g=useRef(null),h=useRef(null),i=useRef(null),j=useState(!1),k=_slicedToArray(j,2),l=k[0],m=k[1],n=useRef(0),o=useRef(0),p=useRef(0);useConditionalListener({attachListener:a.open&&!isServerSide(),callback:function callback(){if(null!==h.current){var a=h.current.classList;e()?a.remove("np-bottom-sheet--top-bar--shadow"):a.add("np-bottom-sheet--top-bar--shadow")}},eventType:"scroll",parent:isServerSide()?void 0:document});var q=function(a){return function(b){p.current=(a?b.touches[0]:b).clientY,m(!0)}},r=function(a){return function(c){if(l){var d=a?c.touches[0]:c,h=d.clientY,i=f(h);i>INITIAL_Y_POSITION&&e()&&(o.current=i,n.current=requestAnimationFrame(function(){n.current!==void 0&&null!==g.current&&b(i)}))}}};return/*#__PURE__*/_jsx(Dimmer,{open:a.open,fadeContentOnEnter:!0,fadeContentOnExit:!0,onClose:c,children:/*#__PURE__*/_jsxs(SlidingPanel,{ref:g,open:a.open,position:Position.BOTTOM,className:classNames("np-bottom-sheet",a.className),role:"dialog",onTouchStart:q(!0),onTouchMove:r(!0),onTouchEnd:d,onMouseDown:q(!1),onMouseMove:r(!1),onMouseUp:d,children:[/*#__PURE__*/_jsxs("div",{ref:h,className:"np-bottom-sheet--top-bar",children:[/*#__PURE__*/_jsx("div",{className:"np-bottom-sheet--handler"}),/*#__PURE__*/_jsx(CloseButton,{size:16,className:"sr-only np-bottom-sheet--close-btn",onClick:c})]}),/*#__PURE__*/_jsx("div",{ref:i,style:function(){var a=isServerSide()?0:window.innerHeight,b="".concat(100*(.01*a),"px");return{maxHeight:"calc(".concat(b," - ").concat("64px"," - ").concat("32px",")")}}(),className:"np-bottom-sheet--content",children:a.children})]})})};export default BottomSheet;
@@ -0,0 +1 @@
1
+ export var Direction;(function(a){a.RTL="rtl",a.LTR="ltr",a.AUTO="auto"})(Direction||(Direction={}));
@@ -1 +1 @@
1
- export function isServerSideRendering(){return"undefined"==typeof window}export{addClickClassToDocumentOnIos,removeClickClassFromDocumentOnIos}from"./documentIosClick";
1
+ export function isServerSide(){return"undefined"==typeof window}export function isBrowser(){return!isServerSide()}export{addClickClassToDocumentOnIos,removeClickClassFromDocumentOnIos}from"./documentIosClick";
@@ -1 +1 @@
1
- import{isKey,isUndefined}from"@transferwise/neptune-validation";import Types from"prop-types";import{useEffect,useRef}from"react";import{useConditionalListener}from"../hooks";import{Key}from"../key";import{getFocusableElements,resetFocus}from"./utils";import{jsx as _jsx}from"react/jsx-runtime";var TAB=Key.TAB,FocusBoundary=function(a){var b=a.children,c=useRef(),d=isUndefined(document)?void 0:document,e={};return useEffect(function(){c.current.focus(),e=getFocusableElements(c.current)},[]),useConditionalListener({eventType:"keydown",callback:function callback(a){return isKey({keyType:TAB,event:a})&&resetFocus({event:a,focusableEls:e})},attachListener:!0,parent:d}),/*#__PURE__*/_jsx("span",{ref:c,tabIndex:-1,className:"np-focus-boundary outline-none",children:b})};FocusBoundary.propTypes={children:Types.node.isRequired};export default FocusBoundary;
1
+ import{isKey,isUndefined}from"@transferwise/neptune-validation";import PropTypes from"prop-types";import{useEffect,useRef}from"react";import{useConditionalListener}from"../hooks";import{Key}from"../key";import{getFocusableElements,resetFocus}from"./utils";import{jsx as _jsx}from"react/jsx-runtime";var TAB=Key.TAB,FocusBoundary=function(a){var b=a.children,c=useRef(),d=isUndefined(document)?void 0:document,e={};return useEffect(function(){c.current.focus(),e=getFocusableElements(c.current)},[]),useConditionalListener({eventType:"keydown",callback:function callback(a){return isKey({keyType:TAB,event:a})&&resetFocus({event:a,focusableEls:e})},attachListener:!0,parent:d}),/*#__PURE__*/_jsx("span",{ref:c,tabIndex:-1,className:"np-focus-boundary outline-none",children:b})};FocusBoundary.propTypes={children:PropTypes.node};export default FocusBoundary;
@@ -0,0 +1 @@
1
+ export{default as withTheme}from"./theme";
@@ -0,0 +1 @@
1
+ export{withTheme as default}from"./withTheme";
@@ -0,0 +1,2 @@
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"core-js/modules/es.function.name.js";import{useTheme}from"../../hooks";// eslint-disable-next-line @typescript-eslint/no-explicit-any
2
+ import{jsx as _jsx}from"react/jsx-runtime";function getDisplayName(a){return a.displayName||a.name||"Component"}export function withTheme(a){var b=function(b){var c=useTheme();return/*#__PURE__*/_jsx(a,_objectSpread({theme:c},b))};return b.displayName="withTheme(".concat(getDisplayName(a),")"),b.WrappedComponent=a,b}
@@ -0,0 +1 @@
1
+ import{render,screen}from"@testing-library/react";import{Theme}from"../..";import{ThemeProvider}from"../../../provider";import{withTheme}from"./withTheme";import{jsx as _jsx}from"react/jsx-runtime";var Component=withTheme(function(a){var b=a.theme,c=a.className;return/*#__PURE__*/_jsx("div",{className:c,"data-testid":"themed","data-theme":b})});describe("withTheme",function(){it("returns default light theme",function(){render(/*#__PURE__*/_jsx(Component,{className:"test-class"}));var a=screen.getByTestId("themed");expect(a).toHaveClass("test-class"),expect(a).toHaveAttribute("data-theme",Theme.LIGHT)}),it("returns provided theme",function(){render(/*#__PURE__*/_jsx(ThemeProvider,{theme:Theme.NAVY,children:/*#__PURE__*/_jsx(Component,{})})),expect(screen.getByTestId("themed")).toHaveAttribute("data-theme",Theme.NAVY)}),it("returns closest theme provider value",function(){render(/*#__PURE__*/_jsx(ThemeProvider,{theme:Theme.NAVY,children:/*#__PURE__*/_jsx(ThemeProvider,{theme:Theme.DARK,children:/*#__PURE__*/_jsx(Component,{})})})),expect(screen.getByTestId("themed")).toHaveAttribute("data-theme",Theme.DARK)})});
@@ -1 +1 @@
1
- export{default as useHasIntersected}from"./useHasIntersected";export{default as useClientWidth}from"./useClientWidth";export{default as useDirection}from"./useDirection";export{default as useConditionalListener}from"./useConditionalListener";
1
+ export{default as useClientWidth}from"./useClientWidth";export{default as useConditionalListener}from"./useConditionalListener";export{default as useDirection}from"./useDirection";export{default as useHasIntersected}from"./useHasIntersected";export{default as useTheme}from"./useTheme";
@@ -0,0 +1 @@
1
+ export{useTheme as default}from"./useTheme";
@@ -0,0 +1 @@
1
+ import{useContext}from"react";import{ThemeContext}from"../../../provider/theme/ThemeProvider";export var useTheme=function(){return useContext(ThemeContext)};
@@ -0,0 +1 @@
1
+ import{renderHook}from"@testing-library/react-hooks";import{Theme}from"../../../common/theme";import{ThemeProvider}from"../../../provider";import{useTheme}from"./useTheme";import{jsx as _jsx}from"react/jsx-runtime";describe("useTheme",function(){it("returns default light theme",function(){var a=renderHook(function(){return useTheme()}),b=a.result.current;expect(b).toStrictEqual(Theme.LIGHT)}),it("returns provided theme",function(){var a=renderHook(function(){return useTheme()},{wrapper:function wrapper(a){var b=a.children;return/*#__PURE__*/_jsx(ThemeProvider,{theme:Theme.NAVY,children:b})}}),b=a.result.current;expect(b).toStrictEqual(Theme.NAVY)}),it("returns closest theme provider value",function(){var a=renderHook(function(){return useTheme()},{wrapper:function wrapper(a){var b=a.children;return/*#__PURE__*/_jsx(ThemeProvider,{theme:Theme.NAVY,children:/*#__PURE__*/_jsx(ThemeProvider,{theme:Theme.DARK,children:b})})}}),b=a.result.current;expect(b).toStrictEqual(Theme.DARK)})});