@transferwise/components 44.1.2 → 45.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 (118) hide show
  1. package/build/es/no-polyfill/actionButton/ActionButton.story.js +1 -1
  2. package/build/es/no-polyfill/actionOption/ActionOption.story.js +1 -1
  3. package/build/es/no-polyfill/avatarWrapper/AvatarWrapper.js +2 -1
  4. package/build/es/no-polyfill/body/Body.story.js +1 -1
  5. package/build/es/no-polyfill/button/Button.js +1 -1
  6. package/build/es/no-polyfill/checkboxButton/CheckboxButton.story.js +1 -1
  7. package/build/es/no-polyfill/checkboxOption/CheckboxOption.story.js +1 -1
  8. package/build/es/no-polyfill/chips/Chips.story.js +1 -1
  9. package/build/es/no-polyfill/common/bottomSheet/BottomSheet.js +21 -1
  10. package/build/es/no-polyfill/common/hooks/useHasIntersected/useHasIntersected.js +2 -1
  11. package/build/es/no-polyfill/common/requirements.js +19 -1
  12. package/build/es/no-polyfill/dateInput/DateInput.js +7 -1
  13. package/build/es/no-polyfill/dateLookup/dateTrigger/DateTrigger.js +1 -1
  14. package/build/es/no-polyfill/dimmer/dimmerManager/DimmerManager.js +2 -2
  15. package/build/es/no-polyfill/emphasis/EmphasisHtmlTransformer.js +1 -1
  16. package/build/es/no-polyfill/i18n/en.json +0 -3
  17. package/build/es/no-polyfill/modal/Modal.js +2 -1
  18. package/build/es/no-polyfill/modal/Modal.story.js +1 -1
  19. package/build/es/no-polyfill/progressBar/ProgressBar.story.js +1 -1
  20. package/build/es/no-polyfill/section/Section.story.js +1 -1
  21. package/build/es/no-polyfill/select/Select.js +3 -3
  22. package/build/es/no-polyfill/slidingPanel/SlidingPanel.js +1 -1
  23. package/build/es/no-polyfill/switchOption/SwitchOption.story.js +1 -1
  24. package/build/es/no-polyfill/tabs/Tabs.js +6 -1
  25. package/build/es/no-polyfill/tooltip/Tooltip.story.js +1 -1
  26. package/build/es/no-polyfill/upload/Upload.js +3 -3
  27. package/build/es/no-polyfill/upload/steps/processingStep/processingStep.js +1 -1
  28. package/build/es/no-polyfill/uploadInput/UploadInput.story.js +1 -1
  29. package/build/es/no-polyfill/withDisplayFormat/WithDisplayFormat.js +2 -1
  30. package/build/es/polyfill/actionButton/ActionButton.story.js +1 -1
  31. package/build/es/polyfill/actionOption/ActionOption.story.js +1 -1
  32. package/build/es/polyfill/avatarWrapper/AvatarWrapper.js +2 -1
  33. package/build/es/polyfill/body/Body.story.js +1 -1
  34. package/build/es/polyfill/button/Button.js +1 -1
  35. package/build/es/polyfill/checkboxButton/CheckboxButton.story.js +1 -1
  36. package/build/es/polyfill/checkboxOption/CheckboxOption.story.js +1 -1
  37. package/build/es/polyfill/chips/Chips.story.js +1 -1
  38. package/build/es/polyfill/common/bottomSheet/BottomSheet.js +21 -1
  39. package/build/es/polyfill/common/hooks/useHasIntersected/useHasIntersected.js +2 -1
  40. package/build/es/polyfill/common/requirements.js +19 -1
  41. package/build/es/polyfill/dateInput/DateInput.js +7 -1
  42. package/build/es/polyfill/dateLookup/dateTrigger/DateTrigger.js +1 -1
  43. package/build/es/polyfill/dimmer/dimmerManager/DimmerManager.js +2 -2
  44. package/build/es/polyfill/emphasis/EmphasisHtmlTransformer.js +1 -1
  45. package/build/es/polyfill/i18n/en.json +0 -3
  46. package/build/es/polyfill/modal/Modal.js +2 -1
  47. package/build/es/polyfill/modal/Modal.story.js +1 -1
  48. package/build/es/polyfill/progressBar/ProgressBar.story.js +1 -1
  49. package/build/es/polyfill/section/Section.story.js +1 -1
  50. package/build/es/polyfill/select/Select.js +3 -3
  51. package/build/es/polyfill/slidingPanel/SlidingPanel.js +1 -1
  52. package/build/es/polyfill/switchOption/SwitchOption.story.js +1 -1
  53. package/build/es/polyfill/tabs/Tabs.js +6 -1
  54. package/build/es/polyfill/tooltip/Tooltip.story.js +1 -1
  55. package/build/es/polyfill/upload/Upload.js +3 -3
  56. package/build/es/polyfill/upload/steps/processingStep/processingStep.js +1 -1
  57. package/build/es/polyfill/uploadInput/UploadInput.story.js +1 -1
  58. package/build/es/polyfill/withDisplayFormat/WithDisplayFormat.js +2 -1
  59. package/build/i18n/en.json +0 -3
  60. package/build/main.css +1 -1
  61. package/build/styles/main.css +1 -1
  62. package/build/styles/progress/Progress.css +1 -1
  63. package/build/styles/tabs/Tabs.css +1 -1
  64. package/build/types/actionButton/ActionButton.story.d.ts +4 -3
  65. package/build/types/actionOption/ActionOption.story.d.ts +12 -15
  66. package/build/types/body/Body.story.d.ts +2 -1
  67. package/build/types/checkboxButton/CheckboxButton.story.d.ts +1 -4
  68. package/build/types/checkboxOption/CheckboxOption.story.d.ts +4 -7
  69. package/build/types/chips/Chips.story.d.ts +13 -6
  70. package/build/types/modal/Modal.story.d.ts +2 -1
  71. package/build/types/progressBar/ProgressBar.story.d.ts +5 -7
  72. package/build/types/test-utils/GlobalsDecorator.d.ts +5 -0
  73. package/build/types/test-utils/fake-data.d.ts +5 -0
  74. package/build/types/test-utils/index.d.ts +2 -6
  75. package/build/types/test-utils/story-config.d.ts +54 -0
  76. package/build/types/tooltip/Tooltip.story.d.ts +8 -1
  77. package/build/types/upload/Upload.d.ts +1 -0
  78. package/build/types/upload/steps/processingStep/processingStep.d.ts +1 -0
  79. package/build/types/uploadInput/UploadInput.story.d.ts +35 -18
  80. package/build/umd/no-polyfill/main.js +1 -1
  81. package/build/umd/polyfill/main.js +1 -1
  82. package/package.json +4 -8
  83. package/build/es/no-polyfill/lab/index.js +0 -1
  84. package/build/es/no-polyfill/lab/mobileNav/MobileNav.js +0 -9
  85. package/build/es/no-polyfill/lab/mobileNav/index.js +0 -1
  86. package/build/es/no-polyfill/lab/mobileNav/utils/index.js +0 -1
  87. package/build/es/no-polyfill/lab/mobileNav/utils/isIpadOsSafari/index.js +0 -1
  88. package/build/es/no-polyfill/lab/mobileNav/utils/isIpadOsSafari/isIpadOsSafari.js +0 -1
  89. package/build/es/no-polyfill/lab/mobileNav/utils/isMobileSafari/index.js +0 -1
  90. package/build/es/no-polyfill/lab/mobileNav/utils/isMobileSafari/isMobileSafari.js +0 -1
  91. package/build/es/no-polyfill/lab/pagination/Pagination.js +0 -1
  92. package/build/es/no-polyfill/lab/pagination/Pagination.messages.js +0 -1
  93. package/build/es/no-polyfill/lab/pagination/index.js +0 -1
  94. package/build/es/no-polyfill/lab/pagination/paginationLink/PaginationLink.js +0 -1
  95. package/build/es/no-polyfill/lab/pagination/paginationLink/PaginationLink.messages.js +0 -1
  96. package/build/es/no-polyfill/lab/pagination/paginationLink/index.js +0 -1
  97. package/build/es/no-polyfill/withNormaliser/WithNormalizer.js +0 -7
  98. package/build/es/no-polyfill/withNormaliser/index.js +0 -1
  99. package/build/es/no-polyfill/withNormaliser/validation/event-utilities/index.js +0 -1
  100. package/build/es/polyfill/lab/index.js +0 -1
  101. package/build/es/polyfill/lab/mobileNav/MobileNav.js +0 -9
  102. package/build/es/polyfill/lab/mobileNav/index.js +0 -1
  103. package/build/es/polyfill/lab/mobileNav/utils/index.js +0 -1
  104. package/build/es/polyfill/lab/mobileNav/utils/isIpadOsSafari/index.js +0 -1
  105. package/build/es/polyfill/lab/mobileNav/utils/isIpadOsSafari/isIpadOsSafari.js +0 -1
  106. package/build/es/polyfill/lab/mobileNav/utils/isMobileSafari/index.js +0 -1
  107. package/build/es/polyfill/lab/mobileNav/utils/isMobileSafari/isMobileSafari.js +0 -1
  108. package/build/es/polyfill/lab/pagination/Pagination.js +0 -1
  109. package/build/es/polyfill/lab/pagination/Pagination.messages.js +0 -1
  110. package/build/es/polyfill/lab/pagination/index.js +0 -1
  111. package/build/es/polyfill/lab/pagination/paginationLink/PaginationLink.js +0 -1
  112. package/build/es/polyfill/lab/pagination/paginationLink/PaginationLink.messages.js +0 -1
  113. package/build/es/polyfill/lab/pagination/paginationLink/index.js +0 -1
  114. package/build/es/polyfill/withNormaliser/WithNormalizer.js +0 -7
  115. package/build/es/polyfill/withNormaliser/index.js +0 -1
  116. package/build/es/polyfill/withNormaliser/validation/event-utilities/index.js +0 -1
  117. package/build/styles/lab/mobileNav/MobileNav.css +0 -1
  118. package/build/styles/lab/pagination/Pagination.css +0 -1
@@ -1 +1 @@
1
- import{action}from"@storybook/addon-actions";import{boolean,text}from"@storybook/addon-knobs";import{Settings}from"@transferwise/icons";import ActionButton from"./ActionButton";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";export var Variants=function(){var a=text("text","Button label");return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx("p",{children:"Basic"}),/*#__PURE__*/_jsx("div",{className:"text-xs-center m-b-1",children:/*#__PURE__*/_jsx(ActionButton,{disabled:!1,onClick:function onClick(){return action("Clicked!")},children:a})}),/*#__PURE__*/_jsx("p",{children:"With Icon"}),/*#__PURE__*/_jsx("div",{className:"text-xs-center",children:/*#__PURE__*/_jsxs(ActionButton,{disabled:!1,onClick:function onClick(){return action("Clicked!")},children:[/*#__PURE__*/_jsx(Settings,{className:"m-r-1"}),a]})}),/*#__PURE__*/_jsx("p",{children:"Disabled"}),/*#__PURE__*/_jsx("div",{className:"text-xs-center",children:/*#__PURE__*/_jsxs(ActionButton,{disabled:!0,onClick:function onClick(){return action("Clicked!")},children:[/*#__PURE__*/_jsx(Settings,{className:"m-r-1"}),a]})})]})};export var Basic=function(){var a=boolean("disabled",!1),b=text("text","Button label"),c=boolean("with icon",!1);return/*#__PURE__*/_jsx("div",{className:"text-xs-center",children:/*#__PURE__*/_jsxs(ActionButton,{disabled:a,onClick:function onClick(){return action("Clicked!")},children:[c&&/*#__PURE__*/_jsx(Settings,{className:"m-r-1"}),b]})})};export default{title:"Actions/ActionButton",component:ActionButton};
1
+ import{action}from"@storybook/addon-actions";import{boolean,text}from"@storybook/addon-knobs";import{Settings}from"@transferwise/icons";import ActionButton from"./ActionButton";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";export default{component:ActionButton,title:"Actions/ActionButton",tags:["autodocs"]};export var Variants=function(){var a=text("text","Button label");return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx("p",{children:"Basic"}),/*#__PURE__*/_jsx("div",{className:"text-xs-center m-b-1",children:/*#__PURE__*/_jsx(ActionButton,{disabled:!1,onClick:function onClick(){return action("Clicked!")},children:a})}),/*#__PURE__*/_jsx("p",{children:"With Icon"}),/*#__PURE__*/_jsx("div",{className:"text-xs-center",children:/*#__PURE__*/_jsxs(ActionButton,{disabled:!1,onClick:function onClick(){return action("Clicked!")},children:[/*#__PURE__*/_jsx(Settings,{className:"m-r-1"}),a]})}),/*#__PURE__*/_jsx("p",{children:"Disabled"}),/*#__PURE__*/_jsx("div",{className:"text-xs-center",children:/*#__PURE__*/_jsxs(ActionButton,{disabled:!0,onClick:function onClick(){return action("Clicked!")},children:[/*#__PURE__*/_jsx(Settings,{className:"m-r-1"}),a]})})]})};export var Basic=function(){var a=boolean("disabled",!1),b=text("text","Button label"),c=boolean("with icon",!1);return/*#__PURE__*/_jsx("div",{className:"text-xs-center",children:/*#__PURE__*/_jsxs(ActionButton,{disabled:a,onClick:function onClick(){return action("Clicked!")},children:[c&&/*#__PURE__*/_jsx(Settings,{className:"m-r-1"}),b]})})};
@@ -1 +1 @@
1
- import{action}from"@storybook/addon-actions";import{text,boolean}from"@storybook/addon-knobs";import{FastFlag as FastFlagIcon}from"@transferwise/icons";import{Nudge}from"..";import ActionOption from"./ActionOption";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:ActionOption,title:"Option/ActionOption"};var Template=function(){var a=text("title","Action option"),b=text("content","Normally, the button and icon are vertically centered."),c=text("action","Action"),d=boolean("disabled",!1),e=boolean("showMediaAtAllSizes",!1),f=boolean("showMediaCircle",!1),g=boolean("isContainerAligned",!1);return/*#__PURE__*/_jsx(ActionOption,{action:c,media:/*#__PURE__*/_jsx(FastFlagIcon,{}),title:a,content:b,complex:!1,disabled:d,showMediaAtAllSizes:e,showMediaCircle:f,isContainerAligned:g,onClick:action("Button Clicked")})};export var Basic=function(){return/*#__PURE__*/_jsx(Template,{})};export var Multiple=function(){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{})]})};export var WithContainerContent=function(){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx("h2",{className:"m-b-2",children:"Choose how to pay"}),/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Nudge,{className:"m-t-2",mediaName:"globe",title:"Text that is no longer than two lines.",link:"Link",href:"#",onClick:action("action clicked"),onDismiss:action("dismissed")})]})};
1
+ import{action}from"@storybook/addon-actions";import{text,boolean}from"@storybook/addon-knobs";import{FastFlag as FastFlagIcon}from"@transferwise/icons";import{Nudge}from"..";import ActionOption from"./ActionOption";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:ActionOption,title:"Option/ActionOption",tags:["autodocs"]};var Template=function(){var a=text("title","Action option"),b=text("content","Normally, the button and icon are vertically centered."),c=text("action","Action"),d=boolean("disabled",!1),e=boolean("showMediaAtAllSizes",!1),f=boolean("showMediaCircle",!1),g=boolean("isContainerAligned",!1);return/*#__PURE__*/_jsx(ActionOption,{action:c,media:/*#__PURE__*/_jsx(FastFlagIcon,{}),title:a,content:b,complex:!1,disabled:d,showMediaAtAllSizes:e,showMediaCircle:f,isContainerAligned:g,onClick:action("Button Clicked")})};export var Basic=function(){return/*#__PURE__*/_jsx(Template,{})};export var Multiple=function(){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{})]})};export var WithContainerContent=function(){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx("h2",{className:"m-b-2",children:"Choose how to pay"}),/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Nudge,{className:"m-t-2",mediaName:"globe",title:"Text that is no longer than two lines.",link:"Link",href:"#",onClick:action("action clicked"),onDismiss:action("dismissed")})]})};
@@ -1 +1,2 @@
1
- import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["url","altText","statusIcon","children"];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{Person as ProfileIcon,Briefcase as BriefcaseIcon}from"@transferwise/icons";import PropTypes from"prop-types";import{useState,useEffect}from"react";import Avatar,{AvatarType}from"../avatar";import Badge from"../badge";import{ProfileType,Size,Sentiment}from"../common";import StatusIcon from"../statusIcon/StatusIcon";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";var OptionalBadge=function(a){var b=a.url,c=a.altText,d=a.statusIcon,e=a.children,f=_objectWithoutProperties(a,_excluded);return b?/*#__PURE__*/_jsx(Badge,_objectSpread(_objectSpread({badge:/*#__PURE__*/_jsx("img",{src:b,alt:c})},f),{},{children:e})):d?/*#__PURE__*/_jsx(Badge,_objectSpread(_objectSpread({badge:/*#__PURE__*/_jsx(StatusIcon,{sentiment:d,size:Size.SMALL})},f),{},{children:e})):e};OptionalBadge.propTypes={url:PropTypes.string,altText:PropTypes.string,statusIcon:PropTypes.oneOf([Sentiment.POSITIVE,Sentiment.NEGATIVE,Sentiment.NEUTRAL,Sentiment.WARNING,Sentiment.PENDING]),children:PropTypes.node.isRequired},OptionalBadge.defaultProps={url:void 0,altText:void 0,statusIcon:void 0};var AvatarWrapper=function(a){var b=a.url,c=a.profileType,d=a.badgeUrl,e=a.badgeAltText,f=a.badgeStatusIcon,g=a.name,h=a.avatarProps,i=a.badgeProps,j=useState(!1),k=_slicedToArray(j,2),l=k[0],m=k[1],n=c===ProfileType.BUSINESS;useEffect(function(){return m(!1)},[b]);return/*#__PURE__*/_jsx(OptionalBadge,_objectSpread(_objectSpread({url:d,altText:e,statusIcon:f},i),{},{children:/*#__PURE__*/_jsx(Avatar,_objectSpread({size:Size.MEDIUM},function getAvatarProps(){return b&&!l?_objectSpread({type:AvatarType.THUMBNAIL,children:/*#__PURE__*/_jsx("img",{src:b,alt:"avatar",onError:function onError(){return m(!0)}})},h):c?_objectSpread({type:AvatarType.ICON,children:n?/*#__PURE__*/_jsx(BriefcaseIcon,{size:"24"}):/*#__PURE__*/_jsx(ProfileIcon,{size:"24"})},h):g?_objectSpread({type:AvatarType.INITIALS,children:/*#__PURE__*/_jsx(_Fragment,{children:getInitials(g)})},h):_objectSpread({type:AvatarType.ICON,children:/*#__PURE__*/_jsx(ProfileIcon,{size:"24"})},h)}()))}))};function getInitials(a){var b=a.split(" ").map(function(a){return a[0]}).join("").toUpperCase();return 1===b.length?b[0]:b[0]+b.slice(-1)}AvatarWrapper.defaultProps={url:void 0,profileType:void 0,badgeUrl:void 0,badgeAltText:void 0,badgeStatusIcon:void 0,name:void 0,avatarProps:{},badgeProps:{}},AvatarWrapper.propTypes={url:PropTypes.string,profileType:PropTypes.oneOf([ProfileType.PERSONAL,ProfileType.BUSINESS]),badgeUrl:PropTypes.string,badgeAltText:PropTypes.string,badgeStatusIcon:PropTypes.oneOf([Sentiment.POSITIVE,Sentiment.NEGATIVE,Sentiment.NEUTRAL,Sentiment.WARNING,Sentiment.PENDING]),name:PropTypes.string,avatarProps:PropTypes.shape({}),badgeProps:PropTypes.shape({})};export default AvatarWrapper;
1
+ import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["url","altText","statusIcon","children"];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{Person as ProfileIcon,Briefcase as BriefcaseIcon}from"@transferwise/icons";import PropTypes from"prop-types";import{useState,useEffect}from"react";import Avatar,{AvatarType}from"../avatar";import Badge from"../badge";import{ProfileType,Size,Sentiment}from"../common";import StatusIcon from"../statusIcon/StatusIcon";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";var OptionalBadge=function(a){var b=a.url,c=a.altText,d=a.statusIcon,e=a.children,f=_objectWithoutProperties(a,_excluded);return b?/*#__PURE__*/_jsx(Badge,_objectSpread(_objectSpread({badge:/*#__PURE__*/_jsx("img",{src:b,alt:c})},f),{},{children:e})):d?/*#__PURE__*/_jsx(Badge,_objectSpread(_objectSpread({badge:/*#__PURE__*/_jsx(StatusIcon,{sentiment:d,size:Size.SMALL})},f),{},{children:e})):e};OptionalBadge.propTypes={url:PropTypes.string,altText:PropTypes.string,statusIcon:PropTypes.oneOf([Sentiment.POSITIVE,Sentiment.NEGATIVE,Sentiment.NEUTRAL,Sentiment.WARNING,Sentiment.PENDING]),children:PropTypes.node.isRequired},OptionalBadge.defaultProps={url:void 0,altText:void 0,statusIcon:void 0};var AvatarWrapper=function(a){var b=a.url,c=a.profileType,d=a.badgeUrl,e=a.badgeAltText,f=a.badgeStatusIcon,g=a.name,h=a.avatarProps,i=a.badgeProps,j=useState(!1),k=_slicedToArray(j,2),l=k[0],m=k[1],n=c===ProfileType.BUSINESS;// Reset the errored state when url changes
2
+ useEffect(function(){return m(!1)},[b]);return/*#__PURE__*/_jsx(OptionalBadge,_objectSpread(_objectSpread({url:d,altText:e,statusIcon:f},i),{},{children:/*#__PURE__*/_jsx(Avatar,_objectSpread({size:Size.MEDIUM},function getAvatarProps(){return b&&!l?_objectSpread({type:AvatarType.THUMBNAIL,children:/*#__PURE__*/_jsx("img",{src:b,alt:"avatar",onError:function onError(){return m(!0)}})},h):c?_objectSpread({type:AvatarType.ICON,children:n?/*#__PURE__*/_jsx(BriefcaseIcon,{size:"24"}):/*#__PURE__*/_jsx(ProfileIcon,{size:"24"})},h):g?_objectSpread({type:AvatarType.INITIALS,children:/*#__PURE__*/_jsx(_Fragment,{children:getInitials(g)})},h):_objectSpread({type:AvatarType.ICON,children:/*#__PURE__*/_jsx(ProfileIcon,{size:"24"})},h)}()))}))};function getInitials(a){var b=a.split(" ").map(function(a){return a[0]}).join("").toUpperCase();return 1===b.length?b[0]:b[0]+b.slice(-1)}AvatarWrapper.defaultProps={url:void 0,profileType:void 0,badgeUrl:void 0,badgeAltText:void 0,badgeStatusIcon:void 0,name:void 0,avatarProps:{},badgeProps:{}},AvatarWrapper.propTypes={url:PropTypes.string,profileType:PropTypes.oneOf([ProfileType.PERSONAL,ProfileType.BUSINESS]),badgeUrl:PropTypes.string,badgeAltText:PropTypes.string,badgeStatusIcon:PropTypes.oneOf([Sentiment.POSITIVE,Sentiment.NEGATIVE,Sentiment.NEUTRAL,Sentiment.WARNING,Sentiment.PENDING]),name:PropTypes.string,avatarProps:PropTypes.shape({}),badgeProps:PropTypes.shape({})};export default AvatarWrapper;
@@ -1 +1 @@
1
- import{Typography}from"../common/propsValues/typography";import Title from"../title";import Body from"./Body";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";export default{component:Body,title:"Typography/Body"};export var Basic=function(){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsxs("div",{children:[/*#__PURE__*/_jsx(Title,{type:Typography.TITLE_SUBSECTION,children:"Body Large Bold"}),/*#__PURE__*/_jsxs(Body,{as:"p",type:Typography.BODY_LARGE_BOLD,children:["We\u2019re building the world's most ",/*#__PURE__*/_jsx("strong",{children:"international account"}),". We\u2019re building the world's most ",/*#__PURE__*/_jsx("b",{children:"international account"}),"."]}),/*#__PURE__*/_jsxs(Body,{as:"p",type:Typography.BODY_LARGE_BOLD,children:["\u041C\u0438 \u0431\u0443\u0434\u0443\u0454\u043C\u043E \u043D\u0430\u0439\u0431\u0456\u043B\u044C\u0448 ",/*#__PURE__*/_jsx("strong",{children:"\u043C\u0456\u0436\u043D\u0430\u0440\u043E\u0434\u043D\u0438\u0439 \u0440\u0430\u0445\u0443\u043D\u043E\u043A \u0443 \u0441\u0432\u0456\u0442\u0456"}),". \u041C\u0438 \u0431\u0443\u0434\u0443\u0454\u043C\u043E \u043D\u0430\u0439\u0431\u0456\u043B\u044C\u0448"," ",/*#__PURE__*/_jsx("b",{children:"\u043C\u0456\u0436\u043D\u0430\u0440\u043E\u0434\u043D\u0438\u0439 \u0440\u0430\u0445\u0443\u043D\u043E\u043A \u0443 \u0441\u0432\u0456\u0442\u0456"}),"."]}),/*#__PURE__*/_jsxs(Body,{as:"p",type:Typography.BODY_LARGE_BOLD,children:["\u79C1\u305F\u3061\u306F\u4E16\u754C\u3067\u6700\u3082\u56FD\u969B\u7684\u306A\u30A2\u30AB\u30A6\u30F3",/*#__PURE__*/_jsx("strong",{children:"\u30C8\u3092\u69CB\u7BC9\u3057\u3066\u3044\u307E\u3059"})," ","\u79C1\u305F\u3061\u306F\u4E16\u754C\u3067\u6700\u3082\u56FD\u969B\u7684\u306A\u30A2\u30AB\u30A6\u30F3",/*#__PURE__*/_jsx("b",{children:"\u30C8\u3092\u69CB\u7BC9\u3057\u3066\u3044\u307E\u3059"})]}),/*#__PURE__*/_jsxs(Body,{as:"p",type:Typography.BODY_LARGE_BOLD,children:["Wir bauen den internationalen ",/*#__PURE__*/_jsx("strong",{children:"Bericht der Welt auf"}),". Wir bauen den internationalen ",/*#__PURE__*/_jsx("b",{children:"Bericht der Welt auf"}),"."]})]}),/*#__PURE__*/_jsxs("div",{children:[/*#__PURE__*/_jsx(Title,{type:Typography.TITLE_SUBSECTION,children:"Body Default"}),/*#__PURE__*/_jsxs(Body,{as:"p",type:Typography.BODY_DEFAULT,children:["We\u2019re building the world's most ",/*#__PURE__*/_jsx("strong",{children:"international account"}),". We\u2019re building the world's most ",/*#__PURE__*/_jsx("b",{children:"international account"}),"."]}),/*#__PURE__*/_jsxs(Body,{as:"p",type:Typography.BODY_DEFAULT,children:["\u041C\u0438 \u0431\u0443\u0434\u0443\u0454\u043C\u043E \u043D\u0430\u0439\u0431\u0456\u043B\u044C\u0448 ",/*#__PURE__*/_jsx("strong",{children:"\u043C\u0456\u0436\u043D\u0430\u0440\u043E\u0434\u043D\u0438\u0439 \u0440\u0430\u0445\u0443\u043D\u043E\u043A \u0443 \u0441\u0432\u0456\u0442\u0456"}),". \u041C\u0438 \u0431\u0443\u0434\u0443\u0454\u043C\u043E \u043D\u0430\u0439\u0431\u0456\u043B\u044C\u0448"," ",/*#__PURE__*/_jsx("b",{children:"\u043C\u0456\u0436\u043D\u0430\u0440\u043E\u0434\u043D\u0438\u0439 \u0440\u0430\u0445\u0443\u043D\u043E\u043A \u0443 \u0441\u0432\u0456\u0442\u0456"}),"."]}),/*#__PURE__*/_jsxs(Body,{as:"p",type:Typography.BODY_DEFAULT,children:["\u79C1\u305F\u3061\u306F\u4E16\u754C\u3067\u6700\u3082\u56FD\u969B\u7684\u306A\u30A2\u30AB\u30A6\u30F3",/*#__PURE__*/_jsx("strong",{children:"\u30C8\u3092\u69CB\u7BC9\u3057\u3066\u3044\u307E\u3059"})," ","\u79C1\u305F\u3061\u306F\u4E16\u754C\u3067\u6700\u3082\u56FD\u969B\u7684\u306A\u30A2\u30AB\u30A6\u30F3",/*#__PURE__*/_jsx("b",{children:"\u30C8\u3092\u69CB\u7BC9\u3057\u3066\u3044\u307E\u3059"})]}),/*#__PURE__*/_jsxs(Body,{as:"p",type:Typography.BODY_DEFAULT,children:["Wir bauen den internationalen ",/*#__PURE__*/_jsx("strong",{children:"Bericht der Welt auf"}),". Wir bauen den internationalen ",/*#__PURE__*/_jsx("b",{children:"Bericht der Welt auf"}),"."]})]}),/*#__PURE__*/_jsxs("div",{children:[/*#__PURE__*/_jsx(Title,{type:Typography.TITLE_SUBSECTION,children:"Body Default Bold"}),/*#__PURE__*/_jsxs(Body,{as:"p",type:Typography.BODY_DEFAULT_BOLD,children:["We\u2019re building the world's most ",/*#__PURE__*/_jsx("strong",{children:"international account"}),". We\u2019re building the world's most ",/*#__PURE__*/_jsx("b",{children:"international account"}),"."]}),/*#__PURE__*/_jsxs(Body,{as:"p",type:Typography.BODY_DEFAULT_BOLD,children:["\u041C\u0438 \u0431\u0443\u0434\u0443\u0454\u043C\u043E \u043D\u0430\u0439\u0431\u0456\u043B\u044C\u0448 ",/*#__PURE__*/_jsx("strong",{children:"\u043C\u0456\u0436\u043D\u0430\u0440\u043E\u0434\u043D\u0438\u0439 \u0440\u0430\u0445\u0443\u043D\u043E\u043A \u0443 \u0441\u0432\u0456\u0442\u0456"}),". \u041C\u0438 \u0431\u0443\u0434\u0443\u0454\u043C\u043E \u043D\u0430\u0439\u0431\u0456\u043B\u044C\u0448"," ",/*#__PURE__*/_jsx("b",{children:"\u043C\u0456\u0436\u043D\u0430\u0440\u043E\u0434\u043D\u0438\u0439 \u0440\u0430\u0445\u0443\u043D\u043E\u043A \u0443 \u0441\u0432\u0456\u0442\u0456"}),"."]}),/*#__PURE__*/_jsxs(Body,{as:"p",type:Typography.BODY_DEFAULT_BOLD,children:["\u79C1\u305F\u3061\u306F\u4E16\u754C\u3067\u6700\u3082\u56FD\u969B\u7684\u306A\u30A2\u30AB\u30A6\u30F3",/*#__PURE__*/_jsx("strong",{children:"\u30C8\u3092\u69CB\u7BC9\u3057\u3066\u3044\u307E\u3059"})," ","\u79C1\u305F\u3061\u306F\u4E16\u754C\u3067\u6700\u3082\u56FD\u969B\u7684\u306A\u30A2\u30AB\u30A6\u30F3",/*#__PURE__*/_jsx("b",{children:"\u30C8\u3092\u69CB\u7BC9\u3057\u3066\u3044\u307E\u3059"})]}),/*#__PURE__*/_jsxs(Body,{as:"p",type:Typography.BODY_DEFAULT_BOLD,children:["Wir bauen den internationalen ",/*#__PURE__*/_jsx("strong",{children:"Bericht der Welt auf"}),". Wir bauen den internationalen ",/*#__PURE__*/_jsx("b",{children:"Bericht der Welt auf"}),"."]})]}),/*#__PURE__*/_jsxs("div",{children:[/*#__PURE__*/_jsx(Title,{type:Typography.TITLE_SUBSECTION,children:"Body Large"}),/*#__PURE__*/_jsxs(Body,{as:"p",type:Typography.BODY_LARGE,children:["We\u2019re building the world's most ",/*#__PURE__*/_jsx("strong",{children:"international account"}),". We\u2019re building the world's most ",/*#__PURE__*/_jsx("b",{children:"international account"}),"."]}),/*#__PURE__*/_jsxs(Body,{as:"p",type:Typography.BODY_LARGE,children:["\u041C\u0438 \u0431\u0443\u0434\u0443\u0454\u043C\u043E \u043D\u0430\u0439\u0431\u0456\u043B\u044C\u0448 ",/*#__PURE__*/_jsx("strong",{children:"\u043C\u0456\u0436\u043D\u0430\u0440\u043E\u0434\u043D\u0438\u0439 \u0440\u0430\u0445\u0443\u043D\u043E\u043A \u0443 \u0441\u0432\u0456\u0442\u0456"}),". \u041C\u0438 \u0431\u0443\u0434\u0443\u0454\u043C\u043E \u043D\u0430\u0439\u0431\u0456\u043B\u044C\u0448"," ",/*#__PURE__*/_jsx("b",{children:"\u043C\u0456\u0436\u043D\u0430\u0440\u043E\u0434\u043D\u0438\u0439 \u0440\u0430\u0445\u0443\u043D\u043E\u043A \u0443 \u0441\u0432\u0456\u0442\u0456"}),"."]}),/*#__PURE__*/_jsxs(Body,{as:"p",type:Typography.BODY_LARGE,children:["\u79C1\u305F\u3061\u306F\u4E16\u754C\u3067\u6700\u3082\u56FD\u969B\u7684\u306A\u30A2\u30AB\u30A6\u30F3",/*#__PURE__*/_jsx("strong",{children:"\u30C8\u3092\u69CB\u7BC9\u3057\u3066\u3044\u307E\u3059"})," ","\u79C1\u305F\u3061\u306F\u4E16\u754C\u3067\u6700\u3082\u56FD\u969B\u7684\u306A\u30A2\u30AB\u30A6\u30F3",/*#__PURE__*/_jsx("b",{children:"\u30C8\u3092\u69CB\u7BC9\u3057\u3066\u3044\u307E\u3059"})]}),/*#__PURE__*/_jsxs(Body,{as:"p",type:Typography.BODY_LARGE,children:["Wir bauen den internationalen ",/*#__PURE__*/_jsx("strong",{children:"Bericht der Welt auf"}),". Wir bauen den internationalen ",/*#__PURE__*/_jsx("b",{children:"Bericht der Welt auf"}),"."]})]}),/*#__PURE__*/_jsxs(Title,{type:Typography.TITLE_SUBSECTION,children:["Copy Example without ",/*#__PURE__*/_jsx("code",{children:"<Body />"})," component"]}),/*#__PURE__*/_jsx("p",{children:"Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo saepe repellendus accusantium eveniet temporibus perspiciatis iure ut, pariatur nihil totam iusto, delectus, modi possimus soluta. Et iusto odio autem debitis!"}),/*#__PURE__*/_jsx(Title,{type:Typography.TITLE_SUBSECTION,children:"Copy Example without any HTML tag"}),"Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo saepe repellendus accusantium eveniet temporibus perspiciatis iure ut, pariatur nihil totam iusto, delectus, modi possimus soluta. Et iusto odio autem debitis!"]})};
1
+ import{Typography}from"../common/propsValues/typography";import Title from"../title";import Body from"./Body";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";export default{title:"Typography/Body",component:Body,tags:["autodocs"]};export var Basic=function(){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsxs("div",{children:[/*#__PURE__*/_jsx(Title,{type:Typography.TITLE_SUBSECTION,children:"Body Large Bold"}),/*#__PURE__*/_jsxs(Body,{as:"p",type:Typography.BODY_LARGE_BOLD,children:["We\u2019re building the world's most ",/*#__PURE__*/_jsx("strong",{children:"international account"}),". We\u2019re building the world's most ",/*#__PURE__*/_jsx("b",{children:"international account"}),"."]}),/*#__PURE__*/_jsxs(Body,{as:"p",type:Typography.BODY_LARGE_BOLD,children:["\u041C\u0438 \u0431\u0443\u0434\u0443\u0454\u043C\u043E \u043D\u0430\u0439\u0431\u0456\u043B\u044C\u0448 ",/*#__PURE__*/_jsx("strong",{children:"\u043C\u0456\u0436\u043D\u0430\u0440\u043E\u0434\u043D\u0438\u0439 \u0440\u0430\u0445\u0443\u043D\u043E\u043A \u0443 \u0441\u0432\u0456\u0442\u0456"}),". \u041C\u0438 \u0431\u0443\u0434\u0443\u0454\u043C\u043E \u043D\u0430\u0439\u0431\u0456\u043B\u044C\u0448"," ",/*#__PURE__*/_jsx("b",{children:"\u043C\u0456\u0436\u043D\u0430\u0440\u043E\u0434\u043D\u0438\u0439 \u0440\u0430\u0445\u0443\u043D\u043E\u043A \u0443 \u0441\u0432\u0456\u0442\u0456"}),"."]}),/*#__PURE__*/_jsxs(Body,{as:"p",type:Typography.BODY_LARGE_BOLD,children:["\u79C1\u305F\u3061\u306F\u4E16\u754C\u3067\u6700\u3082\u56FD\u969B\u7684\u306A\u30A2\u30AB\u30A6\u30F3",/*#__PURE__*/_jsx("strong",{children:"\u30C8\u3092\u69CB\u7BC9\u3057\u3066\u3044\u307E\u3059"})," ","\u79C1\u305F\u3061\u306F\u4E16\u754C\u3067\u6700\u3082\u56FD\u969B\u7684\u306A\u30A2\u30AB\u30A6\u30F3",/*#__PURE__*/_jsx("b",{children:"\u30C8\u3092\u69CB\u7BC9\u3057\u3066\u3044\u307E\u3059"})]}),/*#__PURE__*/_jsxs(Body,{as:"p",type:Typography.BODY_LARGE_BOLD,children:["Wir bauen den internationalen ",/*#__PURE__*/_jsx("strong",{children:"Bericht der Welt auf"}),". Wir bauen den internationalen ",/*#__PURE__*/_jsx("b",{children:"Bericht der Welt auf"}),"."]})]}),/*#__PURE__*/_jsxs("div",{children:[/*#__PURE__*/_jsx(Title,{type:Typography.TITLE_SUBSECTION,children:"Body Default"}),/*#__PURE__*/_jsxs(Body,{as:"p",type:Typography.BODY_DEFAULT,children:["We\u2019re building the world's most ",/*#__PURE__*/_jsx("strong",{children:"international account"}),". We\u2019re building the world's most ",/*#__PURE__*/_jsx("b",{children:"international account"}),"."]}),/*#__PURE__*/_jsxs(Body,{as:"p",type:Typography.BODY_DEFAULT,children:["\u041C\u0438 \u0431\u0443\u0434\u0443\u0454\u043C\u043E \u043D\u0430\u0439\u0431\u0456\u043B\u044C\u0448 ",/*#__PURE__*/_jsx("strong",{children:"\u043C\u0456\u0436\u043D\u0430\u0440\u043E\u0434\u043D\u0438\u0439 \u0440\u0430\u0445\u0443\u043D\u043E\u043A \u0443 \u0441\u0432\u0456\u0442\u0456"}),". \u041C\u0438 \u0431\u0443\u0434\u0443\u0454\u043C\u043E \u043D\u0430\u0439\u0431\u0456\u043B\u044C\u0448"," ",/*#__PURE__*/_jsx("b",{children:"\u043C\u0456\u0436\u043D\u0430\u0440\u043E\u0434\u043D\u0438\u0439 \u0440\u0430\u0445\u0443\u043D\u043E\u043A \u0443 \u0441\u0432\u0456\u0442\u0456"}),"."]}),/*#__PURE__*/_jsxs(Body,{as:"p",type:Typography.BODY_DEFAULT,children:["\u79C1\u305F\u3061\u306F\u4E16\u754C\u3067\u6700\u3082\u56FD\u969B\u7684\u306A\u30A2\u30AB\u30A6\u30F3",/*#__PURE__*/_jsx("strong",{children:"\u30C8\u3092\u69CB\u7BC9\u3057\u3066\u3044\u307E\u3059"})," ","\u79C1\u305F\u3061\u306F\u4E16\u754C\u3067\u6700\u3082\u56FD\u969B\u7684\u306A\u30A2\u30AB\u30A6\u30F3",/*#__PURE__*/_jsx("b",{children:"\u30C8\u3092\u69CB\u7BC9\u3057\u3066\u3044\u307E\u3059"})]}),/*#__PURE__*/_jsxs(Body,{as:"p",type:Typography.BODY_DEFAULT,children:["Wir bauen den internationalen ",/*#__PURE__*/_jsx("strong",{children:"Bericht der Welt auf"}),". Wir bauen den internationalen ",/*#__PURE__*/_jsx("b",{children:"Bericht der Welt auf"}),"."]})]}),/*#__PURE__*/_jsxs("div",{children:[/*#__PURE__*/_jsx(Title,{type:Typography.TITLE_SUBSECTION,children:"Body Default Bold"}),/*#__PURE__*/_jsxs(Body,{as:"p",type:Typography.BODY_DEFAULT_BOLD,children:["We\u2019re building the world's most ",/*#__PURE__*/_jsx("strong",{children:"international account"}),". We\u2019re building the world's most ",/*#__PURE__*/_jsx("b",{children:"international account"}),"."]}),/*#__PURE__*/_jsxs(Body,{as:"p",type:Typography.BODY_DEFAULT_BOLD,children:["\u041C\u0438 \u0431\u0443\u0434\u0443\u0454\u043C\u043E \u043D\u0430\u0439\u0431\u0456\u043B\u044C\u0448 ",/*#__PURE__*/_jsx("strong",{children:"\u043C\u0456\u0436\u043D\u0430\u0440\u043E\u0434\u043D\u0438\u0439 \u0440\u0430\u0445\u0443\u043D\u043E\u043A \u0443 \u0441\u0432\u0456\u0442\u0456"}),". \u041C\u0438 \u0431\u0443\u0434\u0443\u0454\u043C\u043E \u043D\u0430\u0439\u0431\u0456\u043B\u044C\u0448"," ",/*#__PURE__*/_jsx("b",{children:"\u043C\u0456\u0436\u043D\u0430\u0440\u043E\u0434\u043D\u0438\u0439 \u0440\u0430\u0445\u0443\u043D\u043E\u043A \u0443 \u0441\u0432\u0456\u0442\u0456"}),"."]}),/*#__PURE__*/_jsxs(Body,{as:"p",type:Typography.BODY_DEFAULT_BOLD,children:["\u79C1\u305F\u3061\u306F\u4E16\u754C\u3067\u6700\u3082\u56FD\u969B\u7684\u306A\u30A2\u30AB\u30A6\u30F3",/*#__PURE__*/_jsx("strong",{children:"\u30C8\u3092\u69CB\u7BC9\u3057\u3066\u3044\u307E\u3059"})," ","\u79C1\u305F\u3061\u306F\u4E16\u754C\u3067\u6700\u3082\u56FD\u969B\u7684\u306A\u30A2\u30AB\u30A6\u30F3",/*#__PURE__*/_jsx("b",{children:"\u30C8\u3092\u69CB\u7BC9\u3057\u3066\u3044\u307E\u3059"})]}),/*#__PURE__*/_jsxs(Body,{as:"p",type:Typography.BODY_DEFAULT_BOLD,children:["Wir bauen den internationalen ",/*#__PURE__*/_jsx("strong",{children:"Bericht der Welt auf"}),". Wir bauen den internationalen ",/*#__PURE__*/_jsx("b",{children:"Bericht der Welt auf"}),"."]})]}),/*#__PURE__*/_jsxs("div",{children:[/*#__PURE__*/_jsx(Title,{type:Typography.TITLE_SUBSECTION,children:"Body Large"}),/*#__PURE__*/_jsxs(Body,{as:"p",type:Typography.BODY_LARGE,children:["We\u2019re building the world's most ",/*#__PURE__*/_jsx("strong",{children:"international account"}),". We\u2019re building the world's most ",/*#__PURE__*/_jsx("b",{children:"international account"}),"."]}),/*#__PURE__*/_jsxs(Body,{as:"p",type:Typography.BODY_LARGE,children:["\u041C\u0438 \u0431\u0443\u0434\u0443\u0454\u043C\u043E \u043D\u0430\u0439\u0431\u0456\u043B\u044C\u0448 ",/*#__PURE__*/_jsx("strong",{children:"\u043C\u0456\u0436\u043D\u0430\u0440\u043E\u0434\u043D\u0438\u0439 \u0440\u0430\u0445\u0443\u043D\u043E\u043A \u0443 \u0441\u0432\u0456\u0442\u0456"}),". \u041C\u0438 \u0431\u0443\u0434\u0443\u0454\u043C\u043E \u043D\u0430\u0439\u0431\u0456\u043B\u044C\u0448"," ",/*#__PURE__*/_jsx("b",{children:"\u043C\u0456\u0436\u043D\u0430\u0440\u043E\u0434\u043D\u0438\u0439 \u0440\u0430\u0445\u0443\u043D\u043E\u043A \u0443 \u0441\u0432\u0456\u0442\u0456"}),"."]}),/*#__PURE__*/_jsxs(Body,{as:"p",type:Typography.BODY_LARGE,children:["\u79C1\u305F\u3061\u306F\u4E16\u754C\u3067\u6700\u3082\u56FD\u969B\u7684\u306A\u30A2\u30AB\u30A6\u30F3",/*#__PURE__*/_jsx("strong",{children:"\u30C8\u3092\u69CB\u7BC9\u3057\u3066\u3044\u307E\u3059"})," ","\u79C1\u305F\u3061\u306F\u4E16\u754C\u3067\u6700\u3082\u56FD\u969B\u7684\u306A\u30A2\u30AB\u30A6\u30F3",/*#__PURE__*/_jsx("b",{children:"\u30C8\u3092\u69CB\u7BC9\u3057\u3066\u3044\u307E\u3059"})]}),/*#__PURE__*/_jsxs(Body,{as:"p",type:Typography.BODY_LARGE,children:["Wir bauen den internationalen ",/*#__PURE__*/_jsx("strong",{children:"Bericht der Welt auf"}),". Wir bauen den internationalen ",/*#__PURE__*/_jsx("b",{children:"Bericht der Welt auf"}),"."]})]}),/*#__PURE__*/_jsxs(Title,{type:Typography.TITLE_SUBSECTION,children:["Copy Example without ",/*#__PURE__*/_jsx("code",{children:"<Body />"})," component"]}),/*#__PURE__*/_jsx("p",{children:"Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo saepe repellendus accusantium eveniet temporibus perspiciatis iure ut, pariatur nihil totam iusto, delectus, modi possimus soluta. Et iusto odio autem debitis!"}),/*#__PURE__*/_jsx(Title,{type:Typography.TITLE_SUBSECTION,children:"Copy Example without any HTML tag"}),"Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo saepe repellendus accusantium eveniet temporibus perspiciatis iure ut, pariatur nihil totam iusto, delectus, modi possimus soluta. Et iusto odio autem debitis!"]})};
@@ -1,4 +1,4 @@
1
- import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["as","block","children","className","disabled","loading","priority","size","type"],_excluded2=["htmlType"];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{forwardRef}from"react";import{Size,ControlType,Priority}from"../common";import{typeClassMap,priorityClassMap}from"./classMap";import{establishNewPriority,establishNewType,logDeprecationNotices}from"./legacyUtils";/** @deprecated */import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var Button=/*#__PURE__*/forwardRef(function(a,b){var c,d=a.as,e=a.block,f=void 0!==e&&e,g=a.children,h=a.className,i=a.disabled,j=a.loading,k=void 0!==j&&j,l=a.priority,m=void 0===l?Priority.PRIMARY:l,n=a.size,o=void 0===n?Size.MEDIUM:n,p=a.type,q=void 0===p?ControlType.ACCENT:p,r=_objectWithoutProperties(a,_excluded);logDeprecationNotices({size:o,type:q});// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
1
+ import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["as","block","children","className","disabled","loading","priority","size","type"],_excluded2=["htmlType"];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{forwardRef}from"react";import{Size,ControlType,Priority}from"../common";import{typeClassMap,priorityClassMap}from"./classMap";import{establishNewPriority,establishNewType,logDeprecationNotices}from"./legacyUtils";/** @deprecated */ /** @deprecated */import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var Button=/*#__PURE__*/forwardRef(function(a,b){var c,d=a.as,e=a.block,f=void 0!==e&&e,g=a.children,h=a.className,i=a.disabled,j=a.loading,k=void 0!==j&&j,l=a.priority,m=void 0===l?Priority.PRIMARY:l,n=a.size,o=void 0===n?Size.MEDIUM:n,p=a.type,q=void 0===p?ControlType.ACCENT:p,r=_objectWithoutProperties(a,_excluded);logDeprecationNotices({size:o,type:q});// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
2
2
  var s,t=establishNewType(q),u=establishNewPriority(m,q),v=classNames("btn btn-".concat(o),"np-btn np-btn-".concat(o),{"btn-loading":k,"btn-block np-btn-block":f},{disabled:i||k},// @ts-expect-error fix when refactor `typeClassMap` to TypeScript
3
3
  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
4
4
  typeClassMap[t],// @ts-expect-error fix when refactor `typeClassMap` to TypeScript
@@ -1 +1 @@
1
- import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{boolean}from"@storybook/addon-knobs";import{useState}from"react";import CheckboxButton from"./CheckboxButton";import{jsx as _jsx}from"react/jsx-runtime";export default{component:CheckboxButton,title:"Forms/CheckboxButton"};var onBlur=function(){return console.log("blur")},onClick=function(){return console.log("click")},onFocus=function(){return console.log("focus")};export var Basic=function(){var a=useState(!0),b=_slicedToArray(a,2),c=b[0],d=b[1],e=boolean("disabled",!1);return/*#__PURE__*/_jsx(CheckboxButton,{"aria-label":"Toggle email updates",checked:c,disabled:e,onBlur:onBlur,onClick:onClick,onFocus:onFocus,onChange:function onChange(){return d(!c)}})};
1
+ import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{boolean}from"@storybook/addon-knobs";import{useState}from"react";import CheckboxButton from"./CheckboxButton";import{jsx as _jsx}from"react/jsx-runtime";export default{component:CheckboxButton,title:"Actions/CheckboxButton",tags:["autodocs"]};var onBlur=function(){return console.log("blur")},onClick=function(){return console.log("click")},onFocus=function(){return console.log("focus")};export var Basic=function(){var a=useState(!0),b=_slicedToArray(a,2),c=b[0],d=b[1],e=boolean("disabled",!1);return/*#__PURE__*/_jsx(CheckboxButton,{"aria-label":"Toggle email updates",checked:c,disabled:e,onBlur:onBlur,onClick:onClick,onFocus:onFocus,onChange:function onChange(){return d(!c)}})};
@@ -1 +1 @@
1
- import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{action}from"@storybook/addon-actions";import{boolean,text}from"@storybook/addon-knobs";import{FastFlag as FastFlagIcon}from"@transferwise/icons";import{useState}from"react";import{Nudge}from"..";import CheckboxOption from"./CheckboxOption";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:CheckboxOption,title:"Option/CheckboxOption"};var Template=function(){var a=useState(!0),b=_slicedToArray(a,2),c=b[0],d=b[1],e=text("content","Normally, the button and icon are vertically centered."),f=text("title","Checkbox option"),g=boolean("disabled",!1),h=boolean("showMediaAtAllSizes",!1),i=boolean("isContainerAligned",!1);return/*#__PURE__*/_jsx(CheckboxOption,{id:"checkbox-option",name:"checkbox-option",checked:c,disabled:g,title:f,content:e,media:/*#__PURE__*/_jsx(FastFlagIcon,{}),showMediaAtAllSizes:h,isContainerAligned:i,onChange:function onChange(a){return d(a)}})};export var Basic=function(){return/*#__PURE__*/_jsx(Template,{})};export var Multiple=function(){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{})]})};export var WithContainerContent=function(){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx("h2",{className:"m-b-2",children:"Choose how to pay"}),/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Nudge,{className:"m-t-2",mediaName:"globe",title:"Text that is no longer than two lines.",link:"Link",href:"#",onClick:action("action clicked"),onDismiss:action("dismissed")})]})};
1
+ import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{action}from"@storybook/addon-actions";import{boolean,text}from"@storybook/addon-knobs";import{FastFlag as FastFlagIcon}from"@transferwise/icons";import{useState}from"react";import{Nudge}from"..";import CheckboxOption from"./CheckboxOption";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:CheckboxOption,title:"Option/CheckboxOption",tags:["autodocs"]};var Template=function(){var a=useState(!0),b=_slicedToArray(a,2),c=b[0],d=b[1],e=text("content","Normally, the button and icon are vertically centered."),f=text("title","Checkbox option"),g=boolean("disabled",!1),h=boolean("showMediaAtAllSizes",!1),i=boolean("isContainerAligned",!1);return/*#__PURE__*/_jsx(CheckboxOption,{id:"checkbox-option",name:"checkbox-option",checked:c,disabled:g,title:f,content:e,media:/*#__PURE__*/_jsx(FastFlagIcon,{}),showMediaAtAllSizes:h,isContainerAligned:i,onChange:function onChange(a){return d(a)}})};export var Basic=function(){return/*#__PURE__*/_jsx(Template,{})};export var Multiple=function(){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{})]})};export var WithContainerContent=function(){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx("h2",{className:"m-b-2",children:"Choose how to pay"}),/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx("div",{children:/*#__PURE__*/_jsx(Nudge,{className:"m-t-2",mediaName:"globe",title:"Text that is no longer than two lines.",link:"Link",href:"#",onClick:action("action clicked"),onDismiss:action("dismissed")})})]})};
@@ -1 +1 @@
1
- import _defineProperty from"@babel/runtime/helpers/defineProperty";import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";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{useState}from"react";import Chips from"./Chips";import{jsx as _jsx}from"react/jsx-runtime";export default{title:"Actions/Chips",component:Chips};var FilterTemplate=function(a){var b=useState(a.selected?a.selected:[]),c=_slicedToArray(b,2),d=c[0],e=c[1];return/*#__PURE__*/_jsx(Chips,_objectSpread(_objectSpread({},a),{},{selected:d,multiple:!0,onChange:function onChange(a){var b=a.selectedValue,c=a.isEnabled;if(c)e([].concat(_toConsumableArray(d),[b]));else{var f=d.filter(function(a){return b!==a});e(f)}}}))},ChoiceTemplate=function(a){var b=useState(a.selected),c=_slicedToArray(b,2),d=c[0],e=c[1];return/*#__PURE__*/_jsx(Chips,_objectSpread(_objectSpread({},a),{},{selected:d,onChange:function onChange(a){var b=a.selectedValue;return e(b)}}))};export var FilterChips=FilterTemplate.bind({});FilterChips.args={chips:[{value:"accounting",label:"Accounting"},{value:"payroll",label:"Payroll"},{value:"reporting",label:"Reporting"},{value:"payments",label:"Payments"}]};export var PreSelectedFilterChips=FilterTemplate.bind({});PreSelectedFilterChips.args={chips:[{value:"accounting",label:"Accounting"},{value:"payroll",label:"Payroll"},{value:"reporting",label:"Reporting"},{value:"payments",label:"Payments"}],selected:["accounting","payments"]};export var ChoiceChips=ChoiceTemplate.bind({});ChoiceChips.args={chips:[{value:1,label:"100 GBP"},{value:2,label:"200 GBP"},{value:3,label:"300 GBP"},{value:4,label:"400 GBP+"}],selected:3};
1
+ import _defineProperty from"@babel/runtime/helpers/defineProperty";import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";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{useState}from"react";import Chips from"./Chips";import{jsx as _jsx}from"react/jsx-runtime";export default{title:"Actions/Chips",component:Chips,tags:["autodocs"]};var FilterTemplate=function(a){var b=useState(a.selected?a.selected:[]),c=_slicedToArray(b,2),d=c[0],e=c[1];return/*#__PURE__*/_jsx(Chips,_objectSpread(_objectSpread({},a),{},{selected:d,multiple:!0,onChange:function onChange(a){var b=a.selectedValue,c=a.isEnabled;if(c)e([].concat(_toConsumableArray(d),[b]));else{var f=d.filter(function(a){return b!==a});e(f)}}}))},ChoiceTemplate=function(a){var b=useState(a.selected),c=_slicedToArray(b,2),d=c[0],e=c[1];return/*#__PURE__*/_jsx(Chips,_objectSpread(_objectSpread({},a),{},{selected:d,onChange:function onChange(a){var b=a.selectedValue;return e(b)}}))};export var FilterChips=FilterTemplate.bind({});FilterChips.args={chips:[{value:"accounting",label:"Accounting"},{value:"payroll",label:"Payroll"},{value:"reporting",label:"Reporting"},{value:"payments",label:"Payments"}]};export var PreSelectedFilterChips=FilterTemplate.bind({});PreSelectedFilterChips.args={chips:[{value:"accounting",label:"Accounting"},{value:"payroll",label:"Payroll"},{value:"reporting",label:"Reporting"},{value:"payments",label:"Payments"}],selected:["accounting","payments"]};export var ChoiceChips=ChoiceTemplate.bind({});ChoiceChips.args={chips:[{value:1,label:"100 GBP"},{value:2,label:"200 GBP"},{value:3,label:"300 GBP"},{value:4,label:"400 GBP+"}],selected:3};
@@ -7,4 +7,24 @@ cancelAnimationFrame(n.current),m(!1),o.current>MOVE_OFFSET_THRESHOLD&&e()?c(a):
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&&!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:"sm",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;
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);/**
11
+ * Used to track `requestAnimationFrame` requests
12
+ *
13
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame#return_value
14
+ */ /**
15
+ * Difference between initial coordinate ({@link initialYCoordinate})
16
+ * and new position (when user moves component), it's get calculated on `onTouchMove` and `onMouseMove` events
17
+ *
18
+ * @see {@link calculateOffsetAfterMove}
19
+ */ // apply shadow to the bottom of top-bar when scroll over content
20
+ 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);// check whether move is to the bottom only and content scroll position is at the top
21
+ 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:"sm",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");/**
22
+ * Calculate _real_ height of the screen (taking into account parts of browser interface).
23
+ *
24
+ * See https://css-tricks.com/the-trick-to-viewport-units-on-mobile for more details.
25
+ */return{maxHeight:"calc(".concat(b," - ").concat("64px"," - ").concat("32px",")")}}(),className:"np-bottom-sheet--content",children:a.children})]})})};/**
26
+ * Neptune: https://transferwise.github.io/neptune/components/bottom-sheet/
27
+ *
28
+ * Neptune Web: https://transferwise.github.io/neptune-web/components/overlays/BottomSheet
29
+ *
30
+ */export default BottomSheet;
@@ -8,4 +8,5 @@ import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{useEffec
8
8
  * @param {strimng} [loading = 'eager'] - string that contains the type of loading.
9
9
  * @param elRef.loading
10
10
  * @usage `const [hasIntersected] = useHasIntersected({imageRef,loading});`
11
- */export var useHasIntersected=function(a){var b=a.elRef,c=a.loading,d=useState(!1),e=_slicedToArray(d,2),f=e[0],g=e[1],h=(b||{}).current,i=function(){return b&&h},j=function(a,b){a.forEach(function(a){a.isIntersecting&&(g(!0),b.unobserve(h))})};return useEffect(function(){var a,b=!1;return"undefined"!=typeof window&&window.IntersectionObserver&&i()?!b&&(a=new IntersectionObserver(j,ObserverParams),a.observe(h)):g(!0),function(){b=!0,a&&a.unobserve(h)}},[b]),"eager"===c?[!1]:[f]};
11
+ */export var useHasIntersected=function(a){var b=a.elRef,c=a.loading,d=useState(!1),e=_slicedToArray(d,2),f=e[0],g=e[1],h=(b||{}).current,i=function(){return b&&h},j=function(a,b){a.forEach(function(a){a.isIntersecting&&(g(!0),b.unobserve(h))})};return useEffect(function(){var a,b=!1;// Check if window is define for SSR and Old browsers fallback
12
+ return"undefined"!=typeof window&&window.IntersectionObserver&&i()?!b&&(a=new IntersectionObserver(j,ObserverParams),a.observe(h)):g(!0),function(){b=!0,a&&a.unobserve(h)}},[b]),"eager"===c?[!1]:[f]};
@@ -1,3 +1,21 @@
1
1
  /* eslint-disable no-unused-vars */ /* eslint-disable no-param-reassign */var prepRequirements=function(a){if(!a||0===a.length)return[];var b=copyOf(a);return b.forEach(function(a){a.prepared||(prepLegacyAlternatives(a),a.properties=prepFields(a.properties||a.fields),a.type&&"object"!==a.type&&!a.types&&(a.properties.type={type:"string",enum:[a.type],required:!0,hidden:!0},a.type="object"),a.prepared=!0)}),b},prepFields=function(a,b,c){if(!a)return{};var d=copyOf(a);return d=flattenFieldsWithGroups(d),d=transformFieldArrayToMap(d),d=transformNestedKeysToNestedSpecs(d),Object.keys(d).forEach(function(a){d[a]=prepField(d[a],b,c)}),d},prepField=function(a,b,c){var d=copyOf(a);return prepLegacyProps(d),prepType(d),prepPattern(d),prepValidationMessages(d,c),d},flattenFieldsWithGroups=function(a){if(Array.isArray(a)){var b=[];return a.forEach(function(a){a.fields?b=b.concat(flattenFieldWithGroup(a,a.fields)):a.group?b=b.concat(flattenFieldWithGroup(a,a.group)):b.push(a)}),b}return a},flattenFieldWithGroup=function(a,b){return a.name&&0<b.length&&!b[0].name&&(b[0].name=a.name),a.width&&0<b.length&&!b[0].width&&(b[0].width=a.width),a.tooltip&&0<b.length&&!b[0].help&&(b[0].help={message:a.tooltip}),a.info&&0<b.length&&!b[0].help&&(b[0].help={message:a.info}),2===b.length&&b.forEach(function(a){a.width="md"}),3===b.length&&(b[0].width="md",b[1].width="md"),b},transformFieldArrayToMap=function(a){if(Array.isArray(a)){var b={};return a.forEach(function(a){var c=a.key||a.name;delete a.key,b[c]=copyOf(a)}),b}return a},transformNestedKeysToNestedSpecs=function(a){if(Array.isArray(a))throw new TypeError("Expecting a map of fields, not an array");var b={};return Object.keys(a).forEach(function(c){if(0<c.indexOf(".")){// If the key contains a period we need to nest the fields in another object
2
2
  var d=c.split("."),e=d[0];b[e]||(b[e]={type:"object",properties:{}}),b[e].properties[d[1]]=a[c]}else b[c]=a[c]}),b},prepType=function(a){var b=a.type&&a.type.toLowerCase&&a.type.toLowerCase();switch(b){case"text":a.type="string";break;case"date":a.type="string",a.format="date";break;case"password":a.type="string",a.control="password";break;case"checkbox":a.type="boolean";break;case"select":a.control||(a.control="select"),delete a.type;break;case"radio":a.control="radio",delete a.type;break;case"upload":a.type="string",a.format="base64url";break;case"tel":a.type="string",a.format="phone";break;case"textarea":a.type="string",a.control="textarea";break;default:}a.control||"object"===a.type||(a.control=getControlType(a))},prepLegacyAlternatives=function(a){!a.title&&a.label&&(a.title=a.label),a.title||(a.title=getNameFromType(a.type)),!a.type&&a.name&&(a.type=a.name),!a.description&&a.tooltip&&(a.description=a.tooltip),a.fieldGroups&&!a.fields&&(a.fields=flattenFieldsWithGroups(a.fieldGroups),delete a.fieldGroups)},prepLegacyProps=function(a){a.name&&!a.title&&(a.title=a.name,delete a.name),a.validationRegexp&&(a.pattern=a.validationRegexp,delete a.validationRegexp),a.min&&(a.minimum=a.min,delete a.min),a.max&&(a.maximum=a.max,delete a.max),a.example&&!a.placeholder&&(a.placeholder=a.example,delete a.example),a.tooltip&&!a.help&&(a.help={message:a.tooltip},delete a.tooltip),a.valuesAllowed&&!a.values&&(a.values=a.valuesAllowed,delete a.valuesAllowed),a.values&&a.values.map&&(a.values=prepLegacyValues(a.values)),a.value&&!a.default&&(a.default=a.value,delete a.value),a.values&&a.values&&0<a.values.length&&a.values[0]&&!a.values[0].value&&a.values[0].label&&!a.placeholder&&(a.placeholder=a.values[0].label,a.values=a.values.slice(1))},prepLegacyValues=function(a){return a.map(prepLegacyValue)},prepLegacyValue=function(a){return!a.label&&a.title&&(a.label=a.title,delete a.title),!a.label&&a.name&&(a.label=a.name,delete a.name),!a.value&&a.code&&(a.value=a.code,delete a.code),!a.value&&a.key&&(a.value=a.key,delete a.key),a},prepPattern=function(a){if(a.pattern)try{new RegExp(a.pattern)}catch(b){console.warn("API regexp is invalid"),delete a.pattern}else delete a.pattern},prepValidationMessages=function(a,b){return a.validationMessages=a.validationMessages?a.validationMessages:b,a.validationMessages?void(a.validationMessages.minimum&&(a.validationMessages.min=a.validationMessages.minimum,delete a.validationMessages.minimum),a.validationMessages.maximum&&(a.validationMessages.max=a.validationMessages.maximum,delete a.validationMessages.maximum)):void delete a.validationMessages},getControlType=function(a){if(a.control)return a.control.toLowerCase();if(a.hidden)return"hidden";if(a.values&&0<a.values.length)return getSelectionType(a);switch(a.type){case"string":return getControlForStringFormat(a.format);case"number":case"integer":return"number";case"boolean":return"checkbox";default:return"text";}},getControlForStringFormat=function(a){return"date"===a?"date":"base64url"===a?"file":"password"===a?"password":"uri"===a?"text":"email"===a?"text":"phone"===a?"tel":"text"},getSelectionType=function(a){return a.control?a.control:"select"===a.type?"select":"radio"===a.type?"radio":a.values?3<a.values.length?"select":"radio":"select"},copyOf=function(a){return JSON.parse(JSON.stringify(a))},getNameFromType=function(a){if(a&&0<a.length){var b=a.toLowerCase().split("_").join(" ");// String.replace method only replaces first instance
3
- return b.charAt(0).toUpperCase()+b.slice(1)}return""};export{prepFields,getControlType};
3
+ return b.charAt(0).toUpperCase()+b.slice(1)}return""};/**
4
+ * In an older format we had an extra fieldGroup level, here we flatten that out
5
+ * So the inner arrays of fields within the different field groups are flattened
6
+ * to a single array, which is returned.
7
+ *
8
+ * @param fields
9
+ */ /*
10
+ * Some older requirements return an array of fields, where it should be a map
11
+ * from the property name to the spec. This converts arrays to maps.
12
+ */ /*
13
+ * Some older format return keys like 'address.city', expecting the value of
14
+ * city to be nested inside an address object. This function creates a spec of
15
+ * type 'object', and nests such fields inside of it. When we render we pass
16
+ * this object spec to a nested fieldset.
17
+ */ /**
18
+ * Some older requirments formats do not include a label for alternatives
19
+ *
20
+ * @param tabType
21
+ */export{prepFields,getControlType};
@@ -1,4 +1,10 @@
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 classNames from"classnames";import PropTypes from"prop-types";import{useState}from"react";import{useIntl}from"react-intl";import{Size,DateMode,MonthFormat}from"../common";import{getMonthNames,isDateValid,isMonthAndYearFormat}from"../common/dateUtils";import Select from"../select";import messages from"./DateInput.messages";import{explodeDate,convertToLocalMidnight}from"./utils";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var MonthBeforeDay=new Set(["en-US","ja-JP"]),INITIAL_DEFAULT_STATE={year:null,month:null,day:null},DateInput=function(a){var b,c,d,e=a.disabled,f=a.size,g=a.value,h=a.dayLabel,i=a.monthLabel,j=a.yearLabel,k=a.monthFormat,l=a.mode,m=a.onChange,n=a.onFocus,o=a.onBlur,p=a.placeholders,q=a.id,r=a.selectProps,s=useIntl(),t=s.locale,u=s.formatMessage,v=function(){return g&&isDateValid(g)?"string"==typeof g?convertToLocalMidnight(g):g:null},w=function(a){var b=INITIAL_DEFAULT_STATE;if(g&&isDateValid(g)){var c=v();b=explodeDate(c),isMonthAndYearFormat(g)&&(b.day=null)}return b[a]},x=useState(function(){return w("day")}),y=_slicedToArray(x,2),z=y[0],A=y[1],B=useState(function(){return w("month")}),C=_slicedToArray(B,2),D=C[0],E=C[1],F=useState(function(){return w("year")}),G=_slicedToArray(F,2),H=G[0],I=G[1],J=useState(v),K=_slicedToArray(J,2),L=K[0],M=K[1];h=h||u(messages.dayLabel),i=i||u(messages.monthLabel),j=j||u(messages.yearLabel),p={day:(null===(b=p)||void 0===b?void 0:b.day)||"DD",month:(null===(c=p)||void 0===c?void 0:c.month)||u(messages.monthLabel),year:(null===(d=p)||void 0===d?void 0:d.year)||"YYYY"};var N=function(a){if(!isDateValid(a))return"";switch(l){case DateMode.MONTH_YEAR:return[a.getFullYear(),"0".concat(a.getMonth()+1).slice(-2)].join("-");case DateMode.DAY_MONTH_YEAR:default:return[a.getFullYear(),"0".concat(a.getMonth()+1).slice(-2),"0".concat(a.getDate()).slice(-2)].join("-");}},O=function(){var a=getMonthNames(t,k);return/*#__PURE__*/_jsxs("label",{children:[/*#__PURE__*/_jsx("span",{className:"sr-only",children:i}),/*#__PURE__*/_jsx(Select,_objectSpread({id:q?"".concat(q,"-select"):void 0,name:"month",disabled:e,placeholder:p.month,options:P(),size:f,selected:null===D?null:{value:D,label:a[D]},onChange:function(a){return S(a)}},r))]})},P=function(){var a=[],b=getMonthNames(t,k);return b.forEach(function(b,c){a.push({value:c,label:b})}),a},Q=function(){var a=0<arguments.length&&arguments[0]!==void 0?arguments[0]:z,b=1<arguments.length&&arguments[1]!==void 0?arguments[1]:D,c=2<arguments.length&&arguments[2]!==void 0?arguments[2]:H,d=null!=a&&null!=b&&null!=c?new Date(c,b,a):null,e=isDateValid(d)?d:null;e||U(INITIAL_DEFAULT_STATE),l===DateMode.MONTH_YEAR?0<=b&&c&&(b!==D||c!==H)&&U(e):a&&0<=b&&c&&(a!==z||b!==D||c!==H)&&U(e)},R=function(a){var b=V(a.target.value,D,H),c=b.checkedDay;A(c),Q(c,D,H)},S=function(a){if(!a)return E(null),void Q(z,null,H);var b=a?a.value:0,c=V(z,b,H),d=c.checkedDay;E(b),z&&d!==z&&A(d),Q(d,b,H)},T=function(a){var b=a.target.value,c=4<b.length?b.slice(0,4):b;if(4===c.toString().length){// Correct day based on year and month.
2
2
  var d=V(z,D,b),e=d.checkedDay;z&&e!==z&&A(e),I(c),Q(e,D,c)}else I(c),Q(z,D,null)},U=function(a){a!==L&&(M(a),m(N(a)||null))},V=function(){var a=0<arguments.length&&void 0!==arguments[0]?arguments[0]:null,b=1<arguments.length&&void 0!==arguments[1]?arguments[1]:0,c=2<arguments.length&&void 0!==arguments[2]?arguments[2]:null,d=a,e=new Date(c||2e3,b+1,0).getDate();return a||(d=null),(a&&0>a||"00"===a)&&(d=1),(a&&b||31<a)&&(d=a>e?e:a),{checkedDay:d,checkedMonth:b,checkedYear:c}},W=l===DateMode.MONTH_YEAR,X=classNames({"col-sm-8":W,"col-sm-5":!W}),Y=MonthBeforeDay.has(t);return/*#__PURE__*/_jsx("div",{className:"tw-date",id:q,onFocus:function onFocus(a){return shouldPropagateOnFocus(a)?n&&n():a.stopPropagation()},onBlur:function onBlur(a){return shouldPropagateOnBlur(a)?o&&o():a.stopPropagation()},children:/*#__PURE__*/_jsxs("div",{className:"row",children:[Y&&/*#__PURE__*/_jsx("div",{className:X,children:O()}),!W&&/*#__PURE__*/_jsx("div",{className:"col-sm-3",children:/*#__PURE__*/_jsxs("label",{children:[/*#__PURE__*/_jsx("span",{className:"sr-only",children:h}),/*#__PURE__*/_jsx("div",{className:"input-group input-group-".concat(f),children:/*#__PURE__*/_jsx("input",{type:"number",name:"day",className:"form-control",value:z||"",placeholder:p.day,disabled:e,onChange:function(a){return R(a)}})})]})}),!Y&&/*#__PURE__*/_jsx("div",{className:X,children:O()}),/*#__PURE__*/_jsx("div",{className:"col-sm-4",children:/*#__PURE__*/_jsxs("label",{children:[/*#__PURE__*/_jsx("span",{className:"sr-only",children:j}),/*#__PURE__*/_jsx("div",{className:"input-group input-group-".concat(f),children:/*#__PURE__*/_jsx("input",{type:"number",name:"year",className:"form-control",placeholder:p.year,value:H||"",disabled:e,onChange:function(a){return T(a)}})})]})})]})})};// Should only propagate if the relatedTarget is not part of this DateInput component.
3
3
  function shouldPropagateOnFocus(a){var b=a.target,c=a.relatedTarget,d=b.closest(".tw-date"),e=c&&c.closest(".tw-date");return d!==e}// Should only propagate if the relatedTarget or the activeElement is not part of this DateInput component.
4
- function shouldPropagateOnBlur(a){var b=a.target,c=a.relatedTarget,d=b.closest(".tw-date"),e=c||(document.activeElement===b?null:document.activeElement),f=e&&e.closest(".tw-date");return d!==f}DateInput.propTypes={disabled:PropTypes.bool,size:PropTypes.oneOf(["sm","md","lg"]),value:PropTypes.oneOfType([PropTypes.string,PropTypes.instanceOf(Date)]),onChange:PropTypes.func.isRequired,onFocus:PropTypes.func,onBlur:PropTypes.func,dayLabel:PropTypes.string,monthLabel:PropTypes.string,yearLabel:PropTypes.string,monthFormat:PropTypes.oneOf(["long","short"]),mode:PropTypes.oneOf(["day-month-year","month-year"]),placeholders:PropTypes.shape({day:PropTypes.node,month:PropTypes.node,year:PropTypes.node}),id:PropTypes.string,selectProps:PropTypes.object},DateInput.defaultProps={disabled:!1,size:Size.MEDIUM,value:null,onFocus:null,onBlur:null,monthFormat:MonthFormat.LONG,mode:DateMode.DAY_MONTH_YEAR,id:"",selectProps:{}};export default DateInput;
4
+ function shouldPropagateOnBlur(a){var b=a.target,c=a.relatedTarget,d=b.closest(".tw-date"),e=c||(document.activeElement===b?null:document.activeElement),f=e&&e.closest(".tw-date");// Even though FocusEvent.relatedTarget is supported by IE
5
+ // (https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent/relatedTarget)
6
+ // "IE11 sets document.activeElement to the next focused element before the blur event is called."
7
+ // (https://stackoverflow.com/a/49325196/986241)
8
+ // Therefore if the relatedTarget is null, we try the document.activeElement,
9
+ // which may contain the HTML element that is gaining focus
10
+ return d!==f}DateInput.propTypes={disabled:PropTypes.bool,size:PropTypes.oneOf(["sm","md","lg"]),value:PropTypes.oneOfType([PropTypes.string,PropTypes.instanceOf(Date)]),onChange:PropTypes.func.isRequired,onFocus:PropTypes.func,onBlur:PropTypes.func,dayLabel:PropTypes.string,monthLabel:PropTypes.string,yearLabel:PropTypes.string,monthFormat:PropTypes.oneOf(["long","short"]),mode:PropTypes.oneOf(["day-month-year","month-year"]),placeholders:PropTypes.shape({day:PropTypes.node,month:PropTypes.node,year:PropTypes.node}),id:PropTypes.string,selectProps:PropTypes.object},DateInput.defaultProps={disabled:!1,size:Size.MEDIUM,value:null,onFocus:null,onBlur:null,monthFormat:MonthFormat.LONG,mode:DateMode.DAY_MONTH_YEAR,id:"",selectProps:{}};export default DateInput;
@@ -1 +1 @@
1
- import{formatDate}from"@transferwise/formatting";import{isKey}from"@transferwise/neptune-validation";import{useTheme}from"@wise/components-theming";import PropTypes from"prop-types";import{useIntl}from"react-intl";import Chevron from"../../chevron";import{Size,Position}from"../../common";import{CloseButton}from"../../common/closeButton/CloseButton";import messages from"./DateTrigger.messages";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 DateTrigger=function(a){var b=a.selectedDate,c=a.size,d=a.placeholder,e=a.label,f=a.monthFormat,g=a.disabled,h=a.onClick,i=a.onClear,j=useTheme(),k=j.isModern,l=useIntl(),m=l.locale,n=l.formatMessage;return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsxs("button",{className:"btn btn-".concat(c," btn-input np-date-trigger"),disabled:g,type:"button",onClick:h,children:[e&&/*#__PURE__*/_jsx("span",{className:"control-label small m-r-1",children:e}),b?/*#__PURE__*/_jsx("span",{className:k?"":"font-weight-normal",children:formatDate(b,m,{day:"numeric",month:f,year:"numeric"})}):/*#__PURE__*/_jsx("span",{className:"form-control-placeholder visible-xs-inline visible-sm-inline visible-md-inline visible-lg-inline visible-xl-inline",children:d}),i?null:/*#__PURE__*/_jsx(Chevron,{orientation:Position.BOTTOM,disabled:g})]}),i?/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx("div",{className:"clearfix"}),/*#__PURE__*/_jsx("span",{className:"input-group-addon",children:/*#__PURE__*/_jsx(CloseButton,{className:"clear-btn clear-btn--".concat(c),"aria-label":n(messages.ariaLabel),size:Size.SMALL,onClick:function(a){a.stopPropagation(),a.preventDefault(),i()},onKeyPress:function handleKeyDown(a){(isKey({keyType:"Space",event:a})||isKey({keyType:"Enter",event:a}))&&(a.stopPropagation(),a.preventDefault(),i())}})})]}):null]})};DateTrigger.propTypes={selectedDate:PropTypes.instanceOf(Date),size:PropTypes.oneOf(["sm","md","lg"]),placeholder:PropTypes.string.isRequired,label:PropTypes.string.isRequired,monthFormat:PropTypes.oneOf(["short","long"]).isRequired,disabled:PropTypes.bool.isRequired,onClick:PropTypes.func.isRequired,onClear:PropTypes.func},DateTrigger.defaultProps={selectedDate:null,size:Size.MEDIUM,onClear:void 0};export default DateTrigger;
1
+ import{formatDate}from"@transferwise/formatting";import{isKey}from"@transferwise/neptune-validation";import{useTheme}from"@wise/components-theming";import PropTypes from"prop-types";import{useIntl}from"react-intl";import Chevron from"../../chevron";import{Size,Position}from"../../common";import{CloseButton}from"../../common/closeButton/CloseButton";import messages from"./DateTrigger.messages";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 DateTrigger=function(a){var b=a.selectedDate,c=a.size,d=a.placeholder,e=a.label,f=a.monthFormat,g=a.disabled,h=a.onClick,i=a.onClear,j=useTheme(),k=j.isModern,l=useIntl(),m=l.locale,n=l.formatMessage;return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsxs("button",{className:"btn btn-".concat(c," btn-input np-date-trigger"),disabled:g,type:"button",onClick:h,children:[e&&/*#__PURE__*/_jsx("span",{className:"control-label small m-r-1",children:e}),b?/*#__PURE__*/_jsx("span",{className:"font-weight-normal",children:formatDate(b,m,{day:"numeric",month:f,year:"numeric"})}):/*#__PURE__*/_jsx("span",{className:"form-control-placeholder visible-xs-inline visible-sm-inline visible-md-inline visible-lg-inline visible-xl-inline",children:d}),i?null:/*#__PURE__*/_jsx(Chevron,{orientation:Position.BOTTOM,disabled:g})]}),i?/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx("div",{className:"clearfix"}),/*#__PURE__*/_jsx("span",{className:"input-group-addon",children:/*#__PURE__*/_jsx(CloseButton,{className:"clear-btn clear-btn--".concat(c),"aria-label":n(messages.ariaLabel),size:Size.SMALL,onClick:function(a){a.stopPropagation(),a.preventDefault(),i()},onKeyPress:function handleKeyDown(a){(isKey({keyType:"Space",event:a})||isKey({keyType:"Enter",event:a}))&&(a.stopPropagation(),a.preventDefault(),i())}})})]}):null]})};DateTrigger.propTypes={selectedDate:PropTypes.instanceOf(Date),size:PropTypes.oneOf(["sm","md","lg"]),placeholder:PropTypes.string.isRequired,label:PropTypes.string.isRequired,monthFormat:PropTypes.oneOf(["short","long"]).isRequired,disabled:PropTypes.bool.isRequired,onClick:PropTypes.func.isRequired,onClear:PropTypes.func},DateTrigger.defaultProps={selectedDate:null,size:Size.MEDIUM,onClear:void 0};export default DateTrigger;
@@ -1,5 +1,5 @@
1
- import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";/**
1
+ import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";import _defineProperty from"@babel/runtime/helpers/defineProperty";/**
2
2
  * Dimmer state management inspired by Material UI's ModalManager (https://github.com/mui-org/material-ui)
3
3
  */var DimmerManager=/*#__PURE__*/function(){/**
4
4
  * Dimmer refs
5
- */function a(){_classCallCheck(this,a),this.dimmers=[]}return _createClass(a,[{key:"add",value:function add(a){var b=this.dimmers.indexOf(a);return-1===b?(b=this.dimmers.length,this.dimmers.push(a),b):b}},{key:"remove",value:function remove(a){var b=this.dimmers.indexOf(a);return-1!==b&&this.dimmers.splice(b,1),b}},{key:"isTop",value:function isTop(a){return 0<this.dimmers.length&&this.dimmers[this.dimmers.length-1]===a}}]),a}();export{DimmerManager as default};
5
+ */function a(){_classCallCheck(this,a),_defineProperty(this,"dimmers",void 0),this.dimmers=[]}return _createClass(a,[{key:"add",value:function add(a){var b=this.dimmers.indexOf(a);return-1===b?(b=this.dimmers.length,this.dimmers.push(a),b):b}},{key:"remove",value:function remove(a){var b=this.dimmers.indexOf(a);return-1!==b&&this.dimmers.splice(b,1),b}},{key:"isTop",value:function isTop(a){return 0<this.dimmers.length&&this.dimmers[this.dimmers.length-1]===a}}]),a}();export{DimmerManager as default};
@@ -1,4 +1,4 @@
1
- import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";var ESCAPED_OPENING_CHEVRON="&lt;",ESCAPED_CLOSING_CHEVRON="&gt;",EmphasisHtmlTransformer=/*#__PURE__*/function(){function a(b){_classCallCheck(this,a),this.tags=(b||[]).map(function(a){return{transformed:{opening:"<em class=\"emphasis emphasis--".concat(a,"\">"),closing:"</em>"},escapedRegex:{opening:new RegExp("".concat(ESCAPED_OPENING_CHEVRON).concat(a).concat(ESCAPED_CLOSING_CHEVRON),"g"),closing:new RegExp("".concat(ESCAPED_OPENING_CHEVRON,"/").concat(a).concat(ESCAPED_CLOSING_CHEVRON),"g")}}})}// Algorithm:
1
+ import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";import _defineProperty from"@babel/runtime/helpers/defineProperty";var ESCAPED_OPENING_CHEVRON="&lt;",ESCAPED_CLOSING_CHEVRON="&gt;",EmphasisHtmlTransformer=/*#__PURE__*/function(){function a(b){_classCallCheck(this,a),_defineProperty(this,"tags",void 0),this.tags=(b||[]).map(function(a){return{transformed:{opening:"<em class=\"emphasis emphasis--".concat(a,"\">"),closing:"</em>"},escapedRegex:{opening:new RegExp("".concat(ESCAPED_OPENING_CHEVRON).concat(a).concat(ESCAPED_CLOSING_CHEVRON),"g"),closing:new RegExp("".concat(ESCAPED_OPENING_CHEVRON,"/").concat(a).concat(ESCAPED_CLOSING_CHEVRON),"g")}}})}// Algorithm:
2
2
  // 1) Escape all dangerous characters (<,>,&)
3
3
  // 2) Replace all escaped, whitelisted tags with styled spans.
4
4
  // 3) Transform new line characters to `<br />`s
@@ -6,9 +6,6 @@
6
6
  "neptune.DateInput.month.label": "Month",
7
7
  "neptune.DateInput.year.label": "Year",
8
8
  "neptune.MoneyInput.Select.placeholder": "Select an option...",
9
- "neptune.Pagination.ariaLabel": "Pagination navigation",
10
- "neptune.PaginationLink.ariaLabel.active": "Go to page {pageNumber}",
11
- "neptune.PaginationLink.ariaLabel.inactive": "Current page, page {pageNumber}",
12
9
  "neptune.Select.searchPlaceholder": "Search...",
13
10
  "neptune.Summary.statusDone": "Item done",
14
11
  "neptune.Summary.statusNotDone": "Item to do",
@@ -1 +1,2 @@
1
- import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["title","body","footer","onClose","className","open","size","scroll","position"];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{useRef}from"react";import CSSTransition from"react-transition-group/CSSTransition";import{Size,Position,Scroll,Typography}from"../common";import{CloseButton}from"../common/closeButton";import{useLayout}from"../common/hooks";import Dimmer from"../dimmer";import Drawer from"../drawer";import Title from"../title/Title";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var TRANSITION_DURATION_IN_MILLISECONDS=150,Modal=function(a){var b=a.title,c=void 0===b?null:b,d=a.body,e=a.footer,f=void 0===e?null:e,g=a.onClose,h=a.className,i=a.open,j=a.size,k=void 0===j?Size.MEDIUM:j,l=a.scroll,m=void 0===l?Scroll.VIEWPORT:l,n=a.position,o=void 0===n?Position.CENTER:n,p=_objectWithoutProperties(a,_excluded),q=function(a){return null===h||void 0===h?void 0:h.split(" ").includes(a)},r=useLayout(),s=r.isMobile,t=q("compact"),u=q("no-divider"),v=useRef(null);return s?/*#__PURE__*/_jsx(Drawer,{open:i,headerTitle:c,footerContent:f,position:Position.BOTTOM,onClose:g,children:d}):/*#__PURE__*/_jsx(Dimmer,{open:i,scrollable:m===Scroll.VIEWPORT,contentPosition:o,onClose:g,children:/*#__PURE__*/_jsx(CSSTransition,{nodeRef:v,appear:!0,in:i,classNames:{enterDone:"in"},timeout:TRANSITION_DURATION_IN_MILLISECONDS,unmountOnExit:!0,children:/*#__PURE__*/_jsx("div",_objectSpread(_objectSpread({ref:v,className:classNames("tw-modal","d-flex","fade","outline-none",m===Scroll.CONTENT&&"tw-modal--scrollable",h)},p),{},{children:/*#__PURE__*/_jsx("div",{className:classNames("tw-modal-dialog","d-flex",_defineProperty({},"tw-modal-".concat(k),k)),"aria-modal":!0,role:"dialog",children:/*#__PURE__*/_jsxs("div",{className:classNames("tw-modal-content","d-flex","flex-column","justify-content-between",{"tw-modal-compact":t,"tw-modal-no-title":!c}),children:[/*#__PURE__*/_jsxs("div",{className:classNames("tw-modal-header","d-flex","align-items-center","justify-content-between","flex-wrap",{"modal--withoutborder":!c||u}),children:[/*#__PURE__*/_jsx(Title,{type:Typography.TITLE_BODY,className:"tw-modal-title",children:c}),/*#__PURE__*/_jsx(CloseButton,{onClick:g})]}),/*#__PURE__*/_jsx("div",{className:classNames("tw-modal-body",{"tw-modal-body--scrollable":m===Scroll.CONTENT}),children:d}),f&&/*#__PURE__*/_jsx("div",{className:classNames("tw-modal-footer","d-flex","align-items-center","flex-wrap",{"modal--withoutborder":u}),children:f})]})})}))})})};export default Modal;
1
+ import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["title","body","footer","onClose","className","open","size","scroll","position"];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{useRef}from"react";import CSSTransition from"react-transition-group/CSSTransition";import{Size,Position,Scroll,Typography}from"../common";import{CloseButton}from"../common/closeButton";import{useLayout}from"../common/hooks";import Dimmer from"../dimmer";import Drawer from"../drawer";import Title from"../title/Title";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var TRANSITION_DURATION_IN_MILLISECONDS=150,Modal=function(a){var b=a.title,c=void 0===b?null:b,d=a.body,e=a.footer,f=void 0===e?null:e,g=a.onClose,h=a.className,i=a.open,j=a.size,k=void 0===j?Size.MEDIUM:j,l=a.scroll,m=void 0===l?Scroll.VIEWPORT:l,n=a.position,o=void 0===n?Position.CENTER:n,p=_objectWithoutProperties(a,_excluded),q=function(a){return null===h||void 0===h?void 0:h.split(" ").includes(a)},r=useLayout(),s=r.isMobile,t=q("compact"),u=q("no-divider"),v=useRef(null);// These should be replaced with props in breaking change.
2
+ return s?/*#__PURE__*/_jsx(Drawer,{open:i,headerTitle:c,footerContent:f,position:Position.BOTTOM,onClose:g,children:d}):/*#__PURE__*/_jsx(Dimmer,{open:i,scrollable:m===Scroll.VIEWPORT,contentPosition:o,onClose:g,children:/*#__PURE__*/_jsx(CSSTransition,{nodeRef:v,appear:!0,in:i,classNames:{enterDone:"in"},timeout:TRANSITION_DURATION_IN_MILLISECONDS,unmountOnExit:!0,children:/*#__PURE__*/_jsx("div",_objectSpread(_objectSpread({ref:v,className:classNames("tw-modal","d-flex","fade","outline-none",m===Scroll.CONTENT&&"tw-modal--scrollable",h)},p),{},{children:/*#__PURE__*/_jsx("div",{className:classNames("tw-modal-dialog","d-flex",_defineProperty({},"tw-modal-".concat(k),k)),"aria-modal":!0,role:"dialog",children:/*#__PURE__*/_jsxs("div",{className:classNames("tw-modal-content","d-flex","flex-column","justify-content-between",{"tw-modal-compact":t,"tw-modal-no-title":!c}),children:[/*#__PURE__*/_jsxs("div",{className:classNames("tw-modal-header","d-flex","align-items-center","justify-content-between","flex-wrap",{"modal--withoutborder":!c||u}),children:[/*#__PURE__*/_jsx(Title,{type:Typography.TITLE_BODY,className:"tw-modal-title",children:c}),/*#__PURE__*/_jsx(CloseButton,{onClick:g})]}),/*#__PURE__*/_jsx("div",{className:classNames("tw-modal-body",{"tw-modal-body--scrollable":m===Scroll.CONTENT}),children:d}),f&&/*#__PURE__*/_jsx("div",{className:classNames("tw-modal-footer","d-flex","align-items-center","flex-wrap",{"modal--withoutborder":u}),children:f})]})})}))})})};export default Modal;
@@ -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{select,text}from"@storybook/addon-knobs";import{useState}from"react";import{Button,Modal}from"..";import{Size,Scroll,Position}from"../common";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:Modal,title:"Dialogs/Modal"};var Template=function(a){var b=useState({value:-1,label:"A thing"}),c=_slicedToArray(b,2),d=c[0],e=c[1],f=select("size",[Size.SMALL,Size.MEDIUM,Size.LARGE,Size.EXTRA_LARGE],Size.MEDIUM),g=useState(!1),h=_slicedToArray(g,2),i=h[0],j=h[1],k=text("title","title"),l=text("class",""),m=select("position",[Position.TOP,Position.CENTER],Position.CENTER),n=select("scroll",[Scroll.CONTENT,Scroll.VIEWPORT],Scroll.CONTENT);return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Button,{onClick:function onClick(){return j(!0)},children:"Open Modal"}),/*#__PURE__*/_jsx(Modal,_objectSpread({body:/*#__PURE__*/_jsx(_Fragment,{children:/*#__PURE__*/_jsx("p",{children:a.children})}),open:i,position:m,size:f,title:k,className:l,scroll:n,footer:/*#__PURE__*/_jsx(Button,{block:!0,onClick:function onClick(){return alert("clicked")},children:"Action"}),onClose:function onClose(){return j(!1)}},a))]})};export var Basic=function(){return/*#__PURE__*/_jsx(Template,{children:"I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok. La croix stumptown try-hard chartreuse. I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated charcoal ramps marfa shoreditch tumeric, I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok."})};export var WithLongText=function(){return/*#__PURE__*/_jsx(Template,{children:"I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok. La croix stumptown try-hard chartreuse. I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated charcoal ramps marfa shoreditch tumeric, I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok. I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok. La croix stumptown try-hard chartreuse. I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated charcoal ramps marfa shoreditch tumeric, I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok. I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok. La croix stumptown try-hard chartreuse. I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated charcoal ramps marfa shoreditch tumeric, I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok."})};
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{select,text}from"@storybook/addon-knobs";import{useState}from"react";import{Button,Modal}from"..";import{Size,Scroll,Position}from"../common";import{storyConfig,lorem10,lorem1000}from"../test-utils";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:Modal,title:"Dialogs/Modal"};var Template=function(a){var b=useState({value:-1,label:"A thing"}),c=_slicedToArray(b,2),d=c[0],e=c[1],f=select("size",[Size.SMALL,Size.MEDIUM,Size.LARGE,Size.EXTRA_LARGE],Size.MEDIUM),g=useState(!0),h=_slicedToArray(g,2),i=h[0],j=h[1],k=text("title","title"),l=text("class",""),m=select("position",[Position.TOP,Position.CENTER],Position.CENTER),n=select("scroll",[Scroll.CONTENT,Scroll.VIEWPORT],Scroll.CONTENT);return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Button,{onClick:function onClick(){return j(!0)},children:"Open Modal"}),/*#__PURE__*/_jsx(Modal,_objectSpread(_objectSpread({},a),{},{body:/*#__PURE__*/_jsx(_Fragment,{children:/*#__PURE__*/_jsx("p",{children:a.children})}),open:i,position:m,size:f,title:k,className:l,scroll:n,footer:/*#__PURE__*/_jsx(Button,{block:!0,onClick:function onClick(){return alert("clicked")},children:"Action"}),onClose:function onClose(){return j(!1)}}))]})};export var Basic=storyConfig(function(){return/*#__PURE__*/_jsx(Template,{children:lorem10})},{visualTest:{delay:2e3}});export var WithLongText=function(){return/*#__PURE__*/_jsx(Template,{children:lorem1000})};export var WithLongTextMobileView=storyConfig(WithLongText,{mobileView:!0,visualTest:{delay:2e3}});
@@ -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 ProgressBar from"./ProgressBar";import{jsx as _jsx}from"react/jsx-runtime";export default{component:ProgressBar,title:"Other/ProgressBar"};export var Basic=function(){return/*#__PURE__*/_jsx(ProgressBar,_objectSpread({},{description:"You have 3 days to reach your goal.",id:"progress-bar-id",title:"Send 5,550 GBP",progress:{value:50,max:100},textEnd:"200 GBP to go"}))};
1
+ import ProgressBar from"./ProgressBar";export default{component:ProgressBar,title:"Content/ProgressBar",tags:["autodocs"]};export var Basic={args:{description:"You have 3 days to reach your goal.",id:"progress-bar-id",title:"Send 5,550 GBP",progress:{value:50,max:100},textEnd:"200 GBP to go"}};
@@ -1 +1 @@
1
- import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{FastFlag as FastFlagIcon}from"@transferwise/icons";import{useState}from"react";import Accordion from"../accordion";import Card from"../card";import Header from"../header";import NavigationOption from"../navigationOption";import Section from"./Section";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:Section,title:"Other/Section"};export var Basic=function(){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Section,{children:"Section 1 content"}),/*#__PURE__*/_jsx(Section,{children:"Section 2 content"})]})};export var WithHeader=function(){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsxs(Section,{children:[/*#__PURE__*/_jsx(Header,{title:"Section 1 title"}),"Section 1 content"]}),/*#__PURE__*/_jsxs(Section,{children:[/*#__PURE__*/_jsx(Header,{title:"Section 2 title"}),"Section 2 content"]})]})};export var withAccordion=function(){var a=[{id:"Item 1",title:"If you have a deadline, set up your transfer early",content:"Most large transfers take around 2\u20134 working days from start to finish. So set up your transfer early if you have a deadline coming up.",icon:/*#__PURE__*/_jsx(FastFlagIcon,{size:24})},{id:"Item 2",title:"Have documents on hand to speed things up",content:"When you set up your transfer, we might ask for documents that show where your money comes from. Documents you might need (opens in a new tab)",icon:/*#__PURE__*/_jsx(FastFlagIcon,{size:24})},{id:"Item 3",title:"Lorem ipsum",content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque velit nec ex rutrum efficitur sit amet at enim. Nam a neque magna. Nullam est urna, dignissim nec erat id, euismod aliquet nulla.",icon:/*#__PURE__*/_jsx(FastFlagIcon,{size:24})}];return/*#__PURE__*/_jsxs(Section,{children:[/*#__PURE__*/_jsx(Header,{title:"Section with accordion"}),/*#__PURE__*/_jsx(Accordion,{items:a,indexOpen:0})]})};export var WithCards=function(){var a=useState(null),b=_slicedToArray(a,2),c=b[0],d=b[1],e=function(a){return c===a?d(null):void d(a)};return/*#__PURE__*/_jsxs(Section,{children:[/*#__PURE__*/_jsx(Header,{title:"Section with cards"}),/*#__PURE__*/_jsx(Card,{title:"What's in the box?!",details:"Click me to reveal.",icon:/*#__PURE__*/_jsx(FastFlagIcon,{size:24}),isExpanded:0===c,onClick:function onClick(){return e(0)},children:/*#__PURE__*/_jsx("div",{children:"Hello there!"})}),/*#__PURE__*/_jsx(Card,{title:"What's in the box?!",details:"Click me to reveal.",icon:/*#__PURE__*/_jsx(FastFlagIcon,{size:24}),isExpanded:1===c,onClick:function onClick(){return e(1)},children:/*#__PURE__*/_jsx("div",{children:"Hello there!"})})]})};export var WithNavigationOptions=function(){return/*#__PURE__*/_jsxs(Section,{children:[/*#__PURE__*/_jsx(Header,{title:"Section with options"}),/*#__PURE__*/_jsx(NavigationOption,{title:"Option 1",onClick:function onClick(){return alert("Option 1")}}),/*#__PURE__*/_jsx(NavigationOption,{title:"Option 2",onClick:function onClick(){return alert("Option 2")}})]})};
1
+ import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{FastFlag as FastFlagIcon}from"@transferwise/icons";import{useState}from"react";import Accordion from"../accordion";import Card from"../card";import Header from"../header";import NavigationOption from"../navigationOption";import Section from"./Section";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:Section,title:"Content/Section"};export var Basic=function(){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Section,{children:"Section 1 content"}),/*#__PURE__*/_jsx(Section,{children:"Section 2 content"})]})};export var WithHeader=function(){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsxs(Section,{children:[/*#__PURE__*/_jsx(Header,{title:"Section 1 title"}),"Section 1 content"]}),/*#__PURE__*/_jsxs(Section,{children:[/*#__PURE__*/_jsx(Header,{title:"Section 2 title"}),"Section 2 content"]})]})};export var withAccordion=function(){var a=[{id:"Item 1",title:"If you have a deadline, set up your transfer early",content:"Most large transfers take around 2\u20134 working days from start to finish. So set up your transfer early if you have a deadline coming up.",icon:/*#__PURE__*/_jsx(FastFlagIcon,{size:24})},{id:"Item 2",title:"Have documents on hand to speed things up",content:"When you set up your transfer, we might ask for documents that show where your money comes from. Documents you might need (opens in a new tab)",icon:/*#__PURE__*/_jsx(FastFlagIcon,{size:24})},{id:"Item 3",title:"Lorem ipsum",content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque velit nec ex rutrum efficitur sit amet at enim. Nam a neque magna. Nullam est urna, dignissim nec erat id, euismod aliquet nulla.",icon:/*#__PURE__*/_jsx(FastFlagIcon,{size:24})}];return/*#__PURE__*/_jsxs(Section,{children:[/*#__PURE__*/_jsx(Header,{title:"Section with accordion"}),/*#__PURE__*/_jsx(Accordion,{items:a,indexOpen:0})]})};export var WithCards=function(){var a=useState(null),b=_slicedToArray(a,2),c=b[0],d=b[1],e=function(a){return c===a?d(null):void d(a)};return/*#__PURE__*/_jsxs(Section,{children:[/*#__PURE__*/_jsx(Header,{title:"Section with cards"}),/*#__PURE__*/_jsx(Card,{title:"What's in the box?!",details:"Click me to reveal.",icon:/*#__PURE__*/_jsx(FastFlagIcon,{size:24}),isExpanded:0===c,onClick:function onClick(){return e(0)},children:/*#__PURE__*/_jsx("div",{children:"Hello there!"})}),/*#__PURE__*/_jsx(Card,{title:"What's in the box?!",details:"Click me to reveal.",icon:/*#__PURE__*/_jsx(FastFlagIcon,{size:24}),isExpanded:1===c,onClick:function onClick(){return e(1)},children:/*#__PURE__*/_jsx("div",{children:"Hello there!"})})]})};export var WithNavigationOptions=function(){return/*#__PURE__*/_jsxs(Section,{children:[/*#__PURE__*/_jsx(Header,{title:"Section with options"}),/*#__PURE__*/_jsx(NavigationOption,{title:"Option 1",onClick:function onClick(){return alert("Option 1")}}),/*#__PURE__*/_jsx(NavigationOption,{title:"Option 2",onClick:function onClick(){return alert("Option 2")}})]})};
@@ -1,9 +1,9 @@
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{useTheme}from"@wise/components-theming";import classNames from"classnames";import PropTypes from"prop-types";import{useState,useEffect,useRef,useMemo}from"react";import{useIntl}from"react-intl";import Button from"../button";import Chevron from"../chevron";import{Position,getSimpleRandomId}from"../common";import BottomSheet from"../common/bottomSheet";import{stopPropagation}from"../common/domHelpers";import{useLayout}from"../common/hooks";import KeyCodes from"../common/keyCodes";import Panel from"../common/panel";import Drawer from"../drawer";import messages from"./Select.messages";import Option from"./option";import SearchBox from"./searchBox";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var DEFAULT_SEARCH_VALUE="",DEFAULT_OPTIONS_PAGE_SIZE=1e3,includesString=function(a,b){return a.toLowerCase().includes(b.toLowerCase())};function defaultFilterFunction(a,b){if(isPlaceholderOption(a))return!0;var c=a.label,d=a.note,e=a.secondary,f=a.currency,g=a.searchStrings;return!!c&&includesString(c,b)||!!d&&includesString(d,b)||!!e&&includesString(e,b)||!!f&&includesString(f,b)||!!g&&g.some(function(a){return includesString(a,b)})}function isActionableOption(a){return!a.header&&!a.separator&&!a.disabled}function isHeaderOption(a){return null!=a&&"header"in a}function isSparatorOption(a){return null!=a&&"separator"in a}function clamp(a,b,c){return Math.max(Math.min(b,c),a)}/**
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{useTheme}from"@wise/components-theming";import classNames from"classnames";import PropTypes from"prop-types";import{useState,useEffect,useRef,useMemo}from"react";import{useIntl}from"react-intl";import Button from"../button";import Chevron from"../chevron";import{Position,getSimpleRandomId}from"../common";import BottomSheet from"../common/bottomSheet";import{stopPropagation}from"../common/domHelpers";import{useLayout}from"../common/hooks";import KeyCodes from"../common/keyCodes";import Panel from"../common/panel";import Drawer from"../drawer";import messages from"./Select.messages";import Option from"./option";import SearchBox from"./searchBox";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var DEFAULT_SEARCH_VALUE="",DEFAULT_OPTIONS_PAGE_SIZE=1e3,includesString=function(a,b){return a.toLowerCase().includes(b.toLowerCase())};function defaultFilterFunction(a,b){if(isPlaceholderOption(a))return!0;var c=a.label,d=a.note,e=a.secondary,f=a.currency,g=a.searchStrings;return!!c&&includesString(c,b)||!!d&&includesString(d,b)||!!e&&includesString(e,b)||!!f&&includesString(f,b)||!!g&&g.some(function(a){return includesString(a,b)})}function isActionableOption(a){return!a.header&&!a.separator&&!a.disabled}function isHeaderOption(a){return null!=a&&"header"in a}function isSeparatorOption(a){return null!=a&&"separator"in a}function clamp(a,b,c){return Math.max(Math.min(b,c),a)}/**
2
2
  * No option or placeholder option is selected
3
- */var DEFAULT_SELECTED_OPTION=null;function isPlaceholderOption(a){return a===DEFAULT_SELECTED_OPTION||"placeholder"in a}var getUniqueIdForOption=function(){var a,b,c=0<arguments.length&&arguments[0]!==void 0?arguments[0]:"",d=1<arguments.length?arguments[1]:void 0;if(null!=d){var e=d.value||(null!==(a=null===(b=d.label)||void 0===b?void 0:b.replace(/\s/g,""))&&void 0!==a?a:"");return"option-".concat(c,"-").concat(e)}};export default function Select(a){function b(){null!=W&&0<ka.length&&e(ka[W])}function c(a){var b,c=ka.reduce(function(a,b,c){return null==a?k(v,b)?c:null:a},null),d=null!==(b=Z.current)&&void 0!==b?b:-1,e=d;-1===d&&(null==c?X(0):e=c);var f=e+a,g=clamp(0,ka.length-1,f);X(g)}function d(a){return function(b){stopPropagation(b),e(a)}}function e(a){x(isPlaceholderOption(a)?DEFAULT_SELECTED_OPTION:a),sa()}function f(){var a,b=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{},c=b.className,d=classNames(M("np-dropdown-menu"),(a={},_defineProperty(a,M("np-dropdown-menu-desktop"),!qa),_defineProperty(a,M("np-dropdown-menu-".concat(r)),!qa&&!ha),a),M(c));return/*#__PURE__*/_jsxs("ul",_objectSpread(_objectSpread({ref:fa,id:na,role:"listbox",tabIndex:"-1",className:d},G),{},{children:[!o&&!ga&&!!m&&/*#__PURE__*/_jsx(h,{}),ga&&/*#__PURE__*/_jsx(SearchBox,{ref:ca,id:oa,classNames:E,value:C||S,placeholder:D||J(messages.searchPlaceholder),focusedOptionId:getUniqueIdForOption(n,la),onChange:ra,onClick:stopPropagation}),ja.slice(0,aa).map(ta),aa<ja.length&&/*#__PURE__*/_jsx(g,{})]}))}function g(){function a(a){stopPropagation(a),ba(aa+DEFAULT_OPTIONS_PAGE_SIZE)}return/*#__PURE__*/ (/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */_jsx("li",{className:classNames(M("clickable"),M("border-bottom"),M("show-more")),onClick:a,onKeyPress:a,children:/*#__PURE__*/_jsx("a",{children:"..."})}))}function h(){var a={placeholder:m};return/*#__PURE__*/ (/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */_jsx("li",{className:classNames(M("clickable"),M("border-bottom")),onClick:d(a),onKeyPress:d(a),children:/*#__PURE__*/_jsx("a",{children:m})}))}// eslint-disable-next-line react/prop-types
3
+ */var DEFAULT_SELECTED_OPTION=null;function isPlaceholderOption(a){return a===DEFAULT_SELECTED_OPTION||"placeholder"in a}function isSearchableOption(a){return!isHeaderOption(a)&&!isSeparatorOption(a)&&!isPlaceholderOption(a)}var getUniqueIdForOption=function(){var a,b,c=0<arguments.length&&arguments[0]!==void 0?arguments[0]:"",d=1<arguments.length?arguments[1]:void 0;if(null!=d){var e=d.value||(null!==(a=null===(b=d.label)||void 0===b?void 0:b.replace(/\s/g,""))&&void 0!==a?a:"");return"option-".concat(c,"-").concat(e)}};export default function Select(a){function b(){null!=W&&0<ka.length&&e(ka[W])}function c(a){var b,c=ka.reduce(function(a,b,c){return null==a?k(v,b)?c:null:a},null),d=null!==(b=Z.current)&&void 0!==b?b:-1,e=d;-1===d&&(null==c?X(0):e=c);var f=e+a,g=clamp(0,ka.length-1,f);X(g)}function d(a){return function(b){stopPropagation(b),e(a)}}function e(a){x(isPlaceholderOption(a)?DEFAULT_SELECTED_OPTION:a),sa()}function f(){var a,b=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{},c=b.className,d=classNames(M("np-dropdown-menu"),(a={},_defineProperty(a,M("np-dropdown-menu-desktop"),!qa),_defineProperty(a,M("np-dropdown-menu-".concat(r)),!qa&&!ha),a),M(c));return/*#__PURE__*/_jsxs("ul",_objectSpread(_objectSpread({ref:fa,id:na,role:"listbox",tabIndex:"-1",className:d},G),{},{children:[!o&&!ga&&!!m&&/*#__PURE__*/_jsx(h,{}),ga&&/*#__PURE__*/_jsx(SearchBox,{ref:ca,id:oa,classNames:E,value:C||S,placeholder:D||J(messages.searchPlaceholder),focusedOptionId:getUniqueIdForOption(n,la),onChange:ra,onClick:stopPropagation}),ja.slice(0,aa).map(ta),aa<ja.length&&/*#__PURE__*/_jsx(g,{})]}))}function g(){function a(a){stopPropagation(a),ba(aa+DEFAULT_OPTIONS_PAGE_SIZE)}return/*#__PURE__*/ (/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */_jsx("li",{className:classNames(M("clickable"),M("border-bottom"),M("show-more")),onClick:a,onKeyPress:a,children:/*#__PURE__*/_jsx("a",{children:"..."})}))}function h(){var a={placeholder:m};return/*#__PURE__*/ (/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */_jsx("li",{className:classNames(M("clickable"),M("border-bottom")),onClick:d(a),onKeyPress:d(a),children:/*#__PURE__*/_jsx("a",{children:m})}))}// eslint-disable-next-line react/prop-types
4
4
  function i(){return/*#__PURE__*/_jsx("li",{className:M("np-separator"),"aria-hidden":!0})}// eslint-disable-next-line react/prop-types
5
5
  function j(a){var b=a.children;return/*#__PURE__*/_jsx("li",{// eslint-disable-line jsx-a11y/no-noninteractive-element-interactions
6
- className:classNames(M("np-dropdown-header"),M("np-text-title-group")),onClick:stopPropagation,onKeyPress:stopPropagation,children:b})}function k(a,b){return(null===a||void 0===a?void 0:a.value)===(null===b||void 0===b?void 0:b.value)}function l(a){return ja.reduce(function(b,c,d){return d<a&&isActionableOption(c)?b+1:b},0)}var m=a.placeholder,n=a.id,o=a.required,p=a.disabled,q=a.inverse,r=a.dropdownWidth,t=a.size,u=a.block,v=a.selected,w=a.search,x=a.onChange,y=a.onFocus,z=a.onBlur,A=a.options,B=a.onSearchChange,C=a.searchValue,D=a.searchPlaceholder,E=a.classNames,F=a.dropdownUp,G=a.dropdownProps,H=a.buttonProps,I=useIntl(),J=I.formatMessage,K=useTheme(),L=K.isModern,M=function(a){return E[a]||a},s=useState(!1),N=_slicedToArray(s,2),O=N[0],P=N[1],Q=useState(DEFAULT_SEARCH_VALUE),R=_slicedToArray(Q,2),S=R[0],T=R[1],U=useState(null),V=_slicedToArray(U,2),W=V[0],X=V[1],Y=useRef(),Z=useRef(),$=useState(DEFAULT_OPTIONS_PAGE_SIZE),_=_slicedToArray($,2),aa=_[0],ba=_[1],ca=useRef(null),da=useRef(null),ea=useRef(null),fa=useRef(null),ga=!!B||!!w,ha=null==r,ia=useMemo(function(){return getSimpleRandomId("np-select-")},[]),ja=useMemo(function(){return w&&S?A.filter(function(a){return isActionableOption(a)&&!isPlaceholderOption(a)}).filter(function(a){return"function"==typeof w?w(a,S):defaultFilterFunction(a,S)}):A},[A,w,S]),ka=useMemo(function(){return ja.filter(isActionableOption)},[ja]),la=ka[W],ma=n||ia,na="".concat(ma,"-listbox"),oa="".concat(ma,"-searchbox"),pa=useLayout(),qa=pa.isMobile;useEffect(function(){var a;if(0<=W)return requestAnimationFrame(function(){if(!a)if(ga){var b,c;null===(b=Y.current)||void 0===b||null===(c=b.scrollIntoView)||void 0===c?void 0:c.call(b,{block:"center"})}else{var d;null===(d=Y.current)||void 0===d?void 0:d.focus()}}),function(){a=!0}},[W,ga]);var ra=function(a){ba(DEFAULT_OPTIONS_PAGE_SIZE),T(a.target.value),B&&B(a.target.value)};useEffect(function(){O?((!qa||S)&&(ga&&!!ca.current&&ca.current.focus(),!ga&&fa.current&&(null==Z.current||Number.isNaN(Z.current))&&fa.current.focus()),Z.current=W):Z.current=null},[O,S,ga,qa,W]);var sa=function(){P(!1),X(null),ea.current&&ea.current.focus()},ta=function(a,b){var c,e=a;if(isSparatorOption(e)&&null!==e&&void 0!==e&&e.separator)return/*#__PURE__*/_jsx(i,{},b);var f=a;if(isHeaderOption(f)&&f.header)return/*#__PURE__*/_jsx(j,{children:f.header},b);var g=k(v,a),h=a,m=!h.disabled&&W===l(b),o=classNames(M("np-dropdown-item"),h.disabled?[M("disabled")]:M("clickable"),(c={},_defineProperty(c,M("active"),g),_defineProperty(c,M("np-dropdown-item--focused"),m),c)),p=h.disabled?stopPropagation:d(h);return/*#__PURE__*/ (/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */_jsx("li",{ref:m?Y:void 0,id:getUniqueIdForOption(n,a),"aria-selected":g,"aria-disabled":a.disabled,role:"option",tabIndex:"-1",className:o,onClick:p,onKeyPress:p,children:/*#__PURE__*/_jsx("a",{disabled:h.disabled,children:/*#__PURE__*/_jsx(Option,_objectSpread(_objectSpread({},h),{},{classNames:E}))})},b))},ua=!!A.length;return O&&(C||S)&&(ua&&null==W&&X(0),!ua&&null!=W&&X(null)),/*#__PURE__*/_jsxs("div",{// eslint-disable-line jsx-a11y/no-static-element-interactions
6
+ className:classNames(M("np-dropdown-header"),M("np-text-title-group")),onClick:stopPropagation,onKeyPress:stopPropagation,children:b})}function k(a,b){return(null===a||void 0===a?void 0:a.value)===(null===b||void 0===b?void 0:b.value)}function l(a){return ja.reduce(function(b,c,d){return d<a&&isActionableOption(c)?b+1:b},0)}var m=a.placeholder,n=a.id,o=a.required,p=a.disabled,q=a.inverse,r=a.dropdownWidth,t=a.size,u=a.block,v=a.selected,w=a.search,x=a.onChange,y=a.onFocus,z=a.onBlur,A=a.options,B=a.onSearchChange,C=a.searchValue,D=a.searchPlaceholder,E=a.classNames,F=a.dropdownUp,G=a.dropdownProps,H=a.buttonProps,I=useIntl(),J=I.formatMessage,K=useTheme(),L=K.isModern,M=function(a){return E[a]||a},s=useState(!1),N=_slicedToArray(s,2),O=N[0],P=N[1],Q=useState(DEFAULT_SEARCH_VALUE),R=_slicedToArray(Q,2),S=R[0],T=R[1],U=useState(null),V=_slicedToArray(U,2),W=V[0],X=V[1],Y=useRef(),Z=useRef(),$=useState(DEFAULT_OPTIONS_PAGE_SIZE),_=_slicedToArray($,2),aa=_[0],ba=_[1],ca=useRef(null),da=useRef(null),ea=useRef(null),fa=useRef(null),ga=!!B||!!w,ha=null==r,ia=useMemo(function(){return getSimpleRandomId("np-select-")},[]),ja=useMemo(function(){return w&&S?A.filter(isSearchableOption).filter(function(a){return"function"==typeof w?w(a,S):defaultFilterFunction(a,S)}):A},[A,w,S]),ka=useMemo(function(){return ja.filter(isActionableOption)},[ja]),la=ka[W],ma=n||ia,na="".concat(ma,"-listbox"),oa="".concat(ma,"-searchbox"),pa=useLayout(),qa=pa.isMobile;useEffect(function(){var a;if(0<=W)return requestAnimationFrame(function(){if(!a)if(ga){var b,c;null===(b=Y.current)||void 0===b||null===(c=b.scrollIntoView)||void 0===c?void 0:c.call(b,{block:"center"})}else{var d;null===(d=Y.current)||void 0===d?void 0:d.focus()}}),function(){a=!0}},[W,ga]);var ra=function(a){ba(DEFAULT_OPTIONS_PAGE_SIZE),T(a.target.value),B&&B(a.target.value)};useEffect(function(){O?((!qa||S)&&(ga&&!!ca.current&&ca.current.focus(),!ga&&fa.current&&(null==Z.current||Number.isNaN(Z.current))&&fa.current.focus()),Z.current=W):Z.current=null},[O,S,ga,qa,W]);var sa=function(){P(!1),X(null),ea.current&&ea.current.focus()},ta=function(a,b){var c,e=a;if(isSeparatorOption(e)&&null!==e&&void 0!==e&&e.separator)return/*#__PURE__*/_jsx(i,{},b);var f=a;if(isHeaderOption(f)&&f.header)return/*#__PURE__*/_jsx(j,{children:f.header},b);var g=k(v,a),h=a,m=!h.disabled&&W===l(b),o=classNames(M("np-dropdown-item"),h.disabled?[M("disabled")]:M("clickable"),(c={},_defineProperty(c,M("active"),g),_defineProperty(c,M("np-dropdown-item--focused"),m),c)),p=h.disabled?stopPropagation:d(h);return/*#__PURE__*/ (/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */_jsx("li",{ref:m?Y:void 0,id:getUniqueIdForOption(n,a),"aria-selected":g,"aria-disabled":a.disabled,role:"option",tabIndex:"-1",className:o,onClick:p,onKeyPress:p,children:/*#__PURE__*/_jsx("a",{disabled:h.disabled,children:/*#__PURE__*/_jsx(Option,_objectSpread(_objectSpread({},h),{},{classNames:E}))})},b))},ua=!!A.length;return O&&(C||S)&&(ua&&null==W&&X(0),!ua&&null!=W&&X(null)),/*#__PURE__*/_jsxs("div",{// eslint-disable-line jsx-a11y/no-static-element-interactions
7
7
  ref:da,className:classNames(M("np-select"),u?M("btn-block"):null,M("btn-group")),onKeyDown:function handleKeyDown(a){switch(a.keyCode){case KeyCodes.UP:case KeyCodes.DOWN:O?c(a.keyCode===KeyCodes.UP?-1:1):P(!0),stopPropagation(a);break;case KeyCodes.SPACE:a.target!==ca.current&&(O?b():P(!0),stopPropagation(a));break;case KeyCodes.ENTER:O?b():P(!0),stopPropagation(a);break;case KeyCodes.ESCAPE:sa(),stopPropagation(a);break;case KeyCodes.TAB:O&&b();break;default:}},onTouchMove:function handleTouchStart(a){a.currentTarget===a.target&&O&&sa()},onFocus:function handleOnFocus(a){y&&y(a)},onBlur:function handleOnBlur(a){var b=a.nativeEvent;if(b){var c=b.relatedTarget,d=a.currentTarget;if(d&&c&&d.contains(c))return}z&&z(a)},children:[/*#__PURE__*/_jsxs(Button,_objectSpread(_objectSpread({ref:ea,id:ma,block:u,size:t,htmlType:"button",className:classNames(M("np-dropdown-toggle"),M("np-text-body-large"),q?M("np-dropdown-toggle-navy"):null)// reset Button's styles
8
8
  ,type:null,priority:null,disabled:p,role:"combobox","aria-controls":na,"aria-expanded":O,"aria-autocomplete":"none",onClick:function handleOnClick(){P(!0)}},H),{},{children:[v?/*#__PURE__*/_jsx(Option,_objectSpread(_objectSpread({},v),{},{classNames:E,selected:!0})):/*#__PURE__*/_jsx("span",{className:M("form-control-placeholder"),children:m}),/*#__PURE__*/_jsx(Chevron// disabled={disabled}
9
9
  ,{className:classNames(M("tw-icon"),M("tw-chevron-up-icon"),M("tw-chevron"),M("bottom"),M("np-select-chevron"))})]})),qa?ga?/*#__PURE__*/_jsx(Drawer,{open:O,headerTitle:D||J(messages.searchPlaceholder),onClose:sa,children:f()}):/*#__PURE__*/_jsx(BottomSheet,{open:O,onClose:sa,children:f({className:L?"":"p-a-1"})}):/*#__PURE__*/_jsx(Panel,{open:O,flip:!1,altAxis:!0,anchorRef:da,anchorWidth:ha,position:F?Position.TOP:Position.BOTTOM,onClose:sa,children:f({className:"p-a-1"})})]})}Select.propTypes={placeholder:PropTypes.string,id:PropTypes.string,required:PropTypes.bool,disabled:PropTypes.bool,inverse:PropTypes.bool,dropdownRight:PropTypes.oneOf(["xs","sm","md","lg","xl"]),dropdownWidth:PropTypes.oneOf(["sm","md","lg"]),size:PropTypes.oneOf(["sm","md","lg"]),block:PropTypes.bool,selected:PropTypes.shape({value:PropTypes.any.isRequired,label:PropTypes.node,icon:PropTypes.node,currency:PropTypes.string,note:PropTypes.node,secondary:PropTypes.node}),/**
@@ -1,2 +1,2 @@
1
- import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["children","className","open","position","showSlidingPanelBorder","slidingPanelPositionFixed"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import classNames from"classnames";import PropTypes from"prop-types";import{forwardRef,useRef}from"react";import mergeRefs from"react-merge-refs";import CSSTransition from"react-transition-group/CSSTransition";import{jsx as _jsx}from"react/jsx-runtime";export var EXIT_ANIMATION=350;var SlidingPanel=/*#__PURE__*/forwardRef(function(a,b){var c=a.children,d=a.className,e=a.open,f=a.position,g=a.showSlidingPanelBorder,h=a.slidingPanelPositionFixed,i=_objectWithoutProperties(a,_excluded),j=useRef(null);return/*#__PURE__*/_jsx(CSSTransition,_objectSpread(_objectSpread({},i),{},{nodeRef:j,in:e// Wait for animation to finish before unmount.
1
+ import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["children","className","open","position","showSlidingPanelBorder","slidingPanelPositionFixed"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import classNames from"classnames";import PropTypes from"prop-types";import{forwardRef,useRef}from"react";import mergeRefs from"react-merge-refs";import CSSTransition from"react-transition-group/CSSTransition";import{jsx as _jsx}from"react/jsx-runtime";export var EXIT_ANIMATION=350;var SlidingPanel=/*#__PURE__*/forwardRef(function(a,b){var c=a.children,d=a.className,e=a.open,f=a.position,g=a.showSlidingPanelBorder,h=a.slidingPanelPositionFixed,i=_objectWithoutProperties(a,_excluded),j=useRef(null);/** @type {RefObject<HTMLDivElement>} */return/*#__PURE__*/_jsx(CSSTransition,_objectSpread(_objectSpread({},i),{},{nodeRef:j,in:e// Wait for animation to finish before unmount.
2
2
  ,timeout:{enter:0,exit:EXIT_ANIMATION},classNames:classNames("sliding-panel--open-".concat(f),g&&"sliding-panel--border-".concat(f),{"sliding-panel--fixed":h},"sliding-panel"),appear:!0,unmountOnExit:!0,children:/*#__PURE__*/_jsx("div",{ref:mergeRefs([b,j]),className:classNames("sliding-panel","sliding-panel--open-".concat(f),d),children:c})}))});SlidingPanel.propTypes={children:PropTypes.node,className:PropTypes.string,open:PropTypes.bool,position:PropTypes.oneOf(["top","bottom","left","right"]),showSlidingPanelBorder:PropTypes.bool,slidingPanelPositionFixed:PropTypes.bool},SlidingPanel.defaultProps={children:null,className:void 0,open:!1,position:"left",showSlidingPanelBorder:!1,slidingPanelPositionFixed:!1};export default SlidingPanel;
@@ -1 +1 @@
1
- import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{action}from"@storybook/addon-actions";import{text,boolean}from"@storybook/addon-knobs";import{FastFlag as FastFlagIcon}from"@transferwise/icons";import{useState}from"react";import{Nudge}from"..";import SwitchOption from"./SwitchOption";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:SwitchOption,title:"Option/SwitchOption"};var Template=function(){var a=useState(!1),b=_slicedToArray(a,2),c=b[0],d=b[1],e=text("title","Switch option"),f=text("content","Normally, the button and icon are vertically centered."),g=boolean("disabled",!1),h=boolean("showMediaAtAllSizes",!1),i=boolean("isContainerAligned",!1);return/*#__PURE__*/_jsx(SwitchOption,{media:/*#__PURE__*/_jsx(FastFlagIcon,{}),title:e,content:f,id:"id",checked:c,complex:!1,disabled:g,showMediaAtAllSizes:h,isContainerAligned:i,"aria-label":e,onChange:d})};export var Basic=function(){return/*#__PURE__*/_jsx(Template,{})};export var Multiple=function(){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{})]})};export var WithContainerContent=function(){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx("h2",{className:"m-b-2",children:"Choose how to pay"}),/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Nudge,{className:"m-t-2",mediaName:"globe",title:"Text that is no longer than two lines.",link:"Link",href:"#",onClick:action("action clicked"),onDismiss:action("dismissed")})]})};
1
+ import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{action}from"@storybook/addon-actions";import{text,boolean}from"@storybook/addon-knobs";import{FastFlag as FastFlagIcon}from"@transferwise/icons";import{useState}from"react";import{Nudge}from"..";import SwitchOption from"./SwitchOption";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:SwitchOption,title:"Option/SwitchOption"};var Template=function(){var a=useState(!1),b=_slicedToArray(a,2),c=b[0],d=b[1],e=text("title","Switch option"),f=text("content","Normally, the button and icon are vertically centered."),g=boolean("disabled",!1),h=boolean("showMediaAtAllSizes",!1),i=boolean("isContainerAligned",!1);return/*#__PURE__*/_jsx(SwitchOption,{media:/*#__PURE__*/_jsx(FastFlagIcon,{}),title:e,content:f,id:"id",checked:c,complex:!1,disabled:g,showMediaAtAllSizes:h,isContainerAligned:i,"aria-label":e,onChange:d})};export var Basic=function(){return/*#__PURE__*/_jsx(Template,{})};export var Multiple=function(){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{})]})};export var WithContainerContent=function(){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx("h2",{className:"m-b-2",children:"Choose how to pay"}),/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx("div",{children:/*#__PURE__*/_jsx(Nudge,{className:"m-t-2",mediaName:"globe",title:"Text that is no longer than two lines.",link:"Link",href:"#",onClick:action("action clicked"),onDismiss:action("dismissed")})})]})};
@@ -1 +1,6 @@
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{Spring}from"@react-spring/web";import classNames from"classnames";import clamp from"lodash.clamp";import PropTypes from"prop-types";import{Component,createRef,Fragment}from"react";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){/** @type {RefObject<HTMLDivElement>} */function b(a){var d;return _classCallCheck(this,b),d=c.call(this,a),_defineProperty(_assertThisInitialized(d),"containerReference",/*#__PURE__*/createRef()),_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 l=d.getTabToSelect(c,b,f);d.animateLine(d.swipedOverHalfOfContainer(g)?l:c);var m=d.calculateApplicableDragDifference({currentSelected:c,nextSelected:l,start:b,end:f}),n=!!m&&-(d.containerWidth*e)+m;d.setState(function(a){return{currentSwipe:[].concat(_toConsumableArray(a.currentSwipe),[f]),translateFrom:n||a.translateFrom,translateTo:n||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",{ref:a.containerReference,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(){var b;null!==(b=a.containerReference.current)&&void 0!==b&&b.contains(document.activeElement)&&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"]),id:PropTypes.string},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{Spring}from"@react-spring/web";import classNames from"classnames";import clamp from"lodash.clamp";import PropTypes from"prop-types";import{Component,createRef,Fragment}from"react";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){/** @type {RefObject<HTMLDivElement>} */function b(a){var d;return _classCallCheck(this,b),d=c.call(this,a),_defineProperty(_assertThisInitialized(d),"containerReference",/*#__PURE__*/createRef()),_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 l=d.getTabToSelect(c,b,f);d.animateLine(d.swipedOverHalfOfContainer(g)?l:c);var m=d.calculateApplicableDragDifference({currentSelected:c,nextSelected:l,start:b,end:f}),n=!!m&&-(d.containerWidth*e)+m;d.setState(function(a){return{currentSwipe:[].concat(_toConsumableArray(a.currentSwipe),[f]),translateFrom:n||a.translateFrom,translateTo:n||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)}/*
2
+ * Gets the next tab that should be selected based on the swipe direction
3
+ * and the current selected tab (is called recursively to account for disabled tabs).
4
+ */},{key:"getTabIndexWithoutDisabledTabs",value:function getTabIndexWithoutDisabledTabs(a){return a-this.props.tabs.slice(0,a).filter(function(a){return!enabledTabsFilter(a)}).length}// Pass `instant` to set the `translateX` to the new panel with no transition
5
+ },{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)};// Uses `props.panelTransitionSpacing` to add a spacer in-between the `TabPanel` you're transitioning to/from
6
+ return/*#__PURE__*/_jsx(DirectionContext.Consumer,{children:function children(b){var h=b===Direction.RTL;return/*#__PURE__*/_jsxs("div",{ref:a.containerReference,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(){var b;null!==(b=a.containerReference.current)&&void 0!==b&&b.contains(document.activeElement)&&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("li",{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"]),id:PropTypes.string},Tabs.defaultProps={animatePanelsOnClick:!1,changeTabOnSwipe:!0,className:"",transitionSpacing:SpacerSizes.NONE,headerWidth:Width.BLOCK};export default Tabs;
@@ -1 +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:"Dialogs/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
+ import{select,text}from"@storybook/addon-knobs";import Button from"../button";import{Position}from"../common";import{within,userEvent,storyConfig}from"../test-utils";import Tooltip from"./Tooltip";import{jsx as _jsx}from"react/jsx-runtime";export default{component:Tooltip,title:"Dialogs/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"})})})};Basic.play=hoverOverButton;export var BasicDarkMode=storyConfig(Basic,{darkMode:!0});BasicDarkMode.play=hoverOverButton;function hoverOverButton(a){var b=a.canvasElement,c=within(b);userEvent.hover(c.getByRole("button"))}