@transferwise/components 0.0.0-experimental-f87190c → 0.0.0-experimental-310a13a

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 (39) hide show
  1. package/build/i18n/ja.json +2 -2
  2. package/build/i18n/ro.json +2 -2
  3. package/build/index.esm.js +53 -79
  4. package/build/index.esm.js.map +1 -1
  5. package/build/index.js +54 -80
  6. package/build/index.js.map +1 -1
  7. package/build/types/circularButton/CircularButton.d.ts +2 -2
  8. package/build/types/circularButton/CircularButton.d.ts.map +1 -1
  9. package/build/types/common/bottomSheet/BottomSheet.d.ts.map +1 -1
  10. package/build/types/index.d.ts +2 -0
  11. package/build/types/index.d.ts.map +1 -1
  12. package/build/types/slidingPanel/SlidingPanel.d.ts +12 -17
  13. package/build/types/slidingPanel/SlidingPanel.d.ts.map +1 -1
  14. package/build/types/slidingPanel/index.d.ts +2 -1
  15. package/build/types/slidingPanel/index.d.ts.map +1 -1
  16. package/build/types/sticky/Sticky.d.ts +9 -14
  17. package/build/types/sticky/Sticky.d.ts.map +1 -1
  18. package/build/types/sticky/index.d.ts +2 -1
  19. package/build/types/sticky/index.d.ts.map +1 -1
  20. package/package.json +1 -1
  21. package/src/circularButton/CircularButton.tsx +2 -2
  22. package/src/common/bottomSheet/BottomSheet.tsx +47 -41
  23. package/src/common/bottomSheet/__snapshots__/BottomSheet.spec.tsx.snap +37 -33
  24. package/src/i18n/ja.json +2 -2
  25. package/src/i18n/ro.json +2 -2
  26. package/src/index.ts +2 -0
  27. package/src/select/Select.spec.js +1 -1
  28. package/src/slidingPanel/SlidingPanel.spec.js +9 -19
  29. package/src/slidingPanel/SlidingPanel.tsx +62 -0
  30. package/src/slidingPanel/index.ts +2 -0
  31. package/src/sticky/Sticky.spec.js +0 -1
  32. package/src/sticky/{Sticky.story.js → Sticky.story.tsx} +2 -3
  33. package/src/sticky/Sticky.tsx +16 -0
  34. package/src/sticky/index.ts +2 -0
  35. package/src/slidingPanel/SlidingPanel.js +0 -73
  36. package/src/slidingPanel/index.js +0 -1
  37. package/src/sticky/Sticky.js +0 -23
  38. package/src/sticky/index.js +0 -1
  39. /package/src/slidingPanel/{SlidingPanel.story.js → SlidingPanel.story.tsx} +0 -0
@@ -29,13 +29,13 @@
29
29
  "neptune.Upload.csButtonText": "別のファイルをアップロードしますか?",
30
30
  "neptune.Upload.csFailureText": "アップロードに失敗しました。もう一度やり直してください。",
31
31
  "neptune.Upload.csSuccessText": "アップロードが完了しました。",
32
- "neptune.Upload.csTooLargeMessage": "{maxSize}MB以下のファイルをアップロードしてください",
32
+ "neptune.Upload.csTooLargeMessage": "{maxSize}MBよりも小さいファイルをアップロードください",
33
33
  "neptune.Upload.csWrongTypeMessage": "ファイルの種類はサポートされていません。別のファイルで再度お試しください",
34
34
  "neptune.Upload.psButtonText": "キャンセル",
35
35
  "neptune.Upload.psProcessingText": "アップロード中…",
36
36
  "neptune.Upload.usButtonText": "または、ファイルを選択する",
37
37
  "neptune.Upload.usDropMessage": "ファイルをドロップしてアップロードする",
38
- "neptune.Upload.usPlaceholder": "{maxSize}MB以下のファイルをドラッグ&ドロップしてください",
38
+ "neptune.Upload.usPlaceholder": "{maxSize}MB以下のファイルのみドラッグ&ドロップが可能です",
39
39
  "neptune.UploadButton.allFileTypes": "すべてのファイル種類",
40
40
  "neptune.UploadButton.dropFiles": "ファイルをドロップしてアップロードする",
41
41
  "neptune.UploadButton.instructions": "{fileTypes}、{size}MB以下",
@@ -29,13 +29,13 @@
29
29
  "neptune.Upload.csButtonText": "Încarci un alt fișier?",
30
30
  "neptune.Upload.csFailureText": "Încărcare eșuată. Te rugăm să încerci din nou",
31
31
  "neptune.Upload.csSuccessText": "Încărcare completă!",
32
- "neptune.Upload.csTooLargeMessage": "Te rugăm să furnizezi un fișier mai mic de {maxSize} MB",
32
+ "neptune.Upload.csTooLargeMessage": "Te rugăm să furnizezi un fișier mai mic de {maxSize}MB",
33
33
  "neptune.Upload.csWrongTypeMessage": "Tipul de fișier nu a fost acceptat. Te rugăm să încerci din nou cu un alt fișier",
34
34
  "neptune.Upload.psButtonText": "Anulează",
35
35
  "neptune.Upload.psProcessingText": "Se încarcă...",
36
36
  "neptune.Upload.usButtonText": "Sau selectează un fișier",
37
37
  "neptune.Upload.usDropMessage": "Atașează fișierul pentru a începe încărcarea",
38
- "neptune.Upload.usPlaceholder": "Glisează și atașează un fișier mai mic de {maxSize} MB",
38
+ "neptune.Upload.usPlaceholder": "Glisează și atașează un fișier de până în {maxSize}MB",
39
39
  "neptune.UploadButton.allFileTypes": "Toate tipurile de fișiere",
40
40
  "neptune.UploadButton.dropFiles": "Trage fișierul pentru a începe încărcarea",
41
41
  "neptune.UploadButton.instructions": "{fileTypes}, de maximum {size}MB",
@@ -1753,15 +1753,14 @@ const useLayout = () => {
1753
1753
 
1754
1754
  const EXIT_ANIMATION = 350;
1755
1755
  const SlidingPanel = /*#__PURE__*/forwardRef(({
1756
- children,
1757
- className,
1756
+ position = 'left',
1758
1757
  open,
1759
- position,
1760
1758
  showSlidingPanelBorder,
1761
1759
  slidingPanelPositionFixed,
1760
+ className,
1761
+ children,
1762
1762
  ...rest
1763
1763
  }, reference) => {
1764
- /** @type {RefObject<HTMLDivElement>} */
1765
1764
  const localReference = useRef(null);
1766
1765
  return /*#__PURE__*/createElement(CSSTransition, {
1767
1766
  ...rest,
@@ -1774,34 +1773,15 @@ const SlidingPanel = /*#__PURE__*/forwardRef(({
1774
1773
  enter: 0,
1775
1774
  exit: EXIT_ANIMATION
1776
1775
  },
1777
- classNames: classNames(`sliding-panel--open-${position}`, showSlidingPanelBorder && `sliding-panel--border-${position}`, {
1778
- 'sliding-panel--fixed': slidingPanelPositionFixed
1779
- }, 'sliding-panel'),
1776
+ classNames: "sliding-panel",
1780
1777
  appear: true,
1781
1778
  unmountOnExit: true
1782
1779
  }, /*#__PURE__*/jsx("div", {
1783
1780
  ref: mergeRefs([reference, localReference]),
1784
- className: classNames('sliding-panel', `sliding-panel--open-${position}`, className),
1781
+ className: classNames('sliding-panel', `sliding-panel--open-${position}`, showSlidingPanelBorder && `sliding-panel--border-${position}`, slidingPanelPositionFixed && 'sliding-panel--fixed', className),
1785
1782
  children: children
1786
1783
  }));
1787
1784
  });
1788
- SlidingPanel.propTypes = {
1789
- children: PropTypes.node,
1790
- className: PropTypes.string,
1791
- open: PropTypes.bool,
1792
- position: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
1793
- showSlidingPanelBorder: PropTypes.bool,
1794
- slidingPanelPositionFixed: PropTypes.bool
1795
- };
1796
- SlidingPanel.defaultProps = {
1797
- children: null,
1798
- className: undefined,
1799
- open: false,
1800
- position: 'left',
1801
- showSlidingPanelBorder: false,
1802
- slidingPanelPositionFixed: false
1803
- };
1804
- var SlidingPanel$1 = SlidingPanel;
1805
1785
 
1806
1786
  const Drawer = ({
1807
1787
  children,
@@ -1820,7 +1800,7 @@ const Drawer = ({
1820
1800
  return /*#__PURE__*/jsx(Dimmer$1, {
1821
1801
  open: open,
1822
1802
  onClose: onClose,
1823
- children: /*#__PURE__*/jsx(SlidingPanel$1, {
1803
+ children: /*#__PURE__*/jsx(SlidingPanel, {
1824
1804
  open: open,
1825
1805
  position: isMobile ? Position.BOTTOM : position,
1826
1806
  children: /*#__PURE__*/jsxs("div", {
@@ -1937,15 +1917,15 @@ const BottomSheet$1 = props => {
1937
1917
  props.onClose(event);
1938
1918
  }
1939
1919
  }
1940
- const onSwipeStart = isMobile => event => {
1941
- initialYCoordinate.current = (isMobile ? event.touches[0] : event).clientY;
1920
+ const onSwipeStart = event => {
1921
+ initialYCoordinate.current = ('touches' in event ? event.touches[0] : event).clientY;
1942
1922
  setPressed(true);
1943
1923
  };
1944
- const onSwipeMove = isMobile => event => {
1924
+ const onSwipeMove = event => {
1945
1925
  if (pressed) {
1946
1926
  const {
1947
1927
  clientY
1948
- } = isMobile ? event.touches[0] : event;
1928
+ } = 'touches' in event ? event.touches[0] : event;
1949
1929
  const offset = calculateOffsetAfterMove(clientY);
1950
1930
  // check whether move is to the bottom only and content scroll position is at the top
1951
1931
  if (offset > INITIAL_Y_POSITION && isContentScrollPositionAtTop()) {
@@ -2014,34 +1994,37 @@ const BottomSheet$1 = props => {
2014
1994
  fadeContentOnEnter: true,
2015
1995
  fadeContentOnExit: true,
2016
1996
  onClose: close,
2017
- children: /*#__PURE__*/jsxs(SlidingPanel$1, {
1997
+ children: /*#__PURE__*/jsx(SlidingPanel, {
2018
1998
  ref: bottomSheetReference,
2019
1999
  open: props.open,
2020
2000
  position: Position.BOTTOM,
2021
2001
  className: classNames('np-bottom-sheet', props.className),
2022
- role: "dialog",
2023
- onTouchStart: onSwipeStart(true),
2024
- onTouchMove: onSwipeMove(true),
2025
- onTouchEnd: onSwipeEnd,
2026
- onMouseDown: onSwipeStart(false),
2027
- onMouseMove: onSwipeMove(false),
2028
- onMouseUp: onSwipeEnd,
2029
- children: [/*#__PURE__*/jsxs("div", {
2030
- ref: topBarReference,
2031
- className: "np-bottom-sheet--top-bar",
2032
- children: [/*#__PURE__*/jsx("div", {
2033
- className: "np-bottom-sheet--handler"
2034
- }), /*#__PURE__*/jsx(CloseButton, {
2035
- size: "sm",
2036
- className: "sr-only np-bottom-sheet--close-btn",
2037
- onClick: close
2002
+ children: /*#__PURE__*/jsxs("div", {
2003
+ role: "dialog",
2004
+ "aria-modal": true,
2005
+ onTouchStart: onSwipeStart,
2006
+ onTouchMove: onSwipeMove,
2007
+ onTouchEnd: onSwipeEnd,
2008
+ onMouseDown: onSwipeStart,
2009
+ onMouseMove: onSwipeMove,
2010
+ onMouseUp: onSwipeEnd,
2011
+ children: [/*#__PURE__*/jsxs("div", {
2012
+ ref: topBarReference,
2013
+ className: "np-bottom-sheet--top-bar",
2014
+ children: [/*#__PURE__*/jsx("div", {
2015
+ className: "np-bottom-sheet--handler"
2016
+ }), /*#__PURE__*/jsx(CloseButton, {
2017
+ size: "sm",
2018
+ className: "sr-only np-bottom-sheet--close-btn",
2019
+ onClick: close
2020
+ })]
2021
+ }), /*#__PURE__*/jsx("div", {
2022
+ ref: contentReference,
2023
+ style: setContentMaxHeight(),
2024
+ className: "np-bottom-sheet--content",
2025
+ children: props.children
2038
2026
  })]
2039
- }), /*#__PURE__*/jsx("div", {
2040
- ref: contentReference,
2041
- style: setContentMaxHeight(),
2042
- className: "np-bottom-sheet--content",
2043
- children: props.children
2044
- })]
2027
+ })
2045
2028
  })
2046
2029
  });
2047
2030
  };
@@ -10942,28 +10925,19 @@ function SnackbarProvider({
10942
10925
  });
10943
10926
  }
10944
10927
 
10945
- const Sticky = ({
10946
- open,
10947
- position,
10928
+ function Sticky({
10929
+ open = true,
10930
+ position = 'bottom',
10948
10931
  children
10949
- }) => /*#__PURE__*/jsx(SlidingPanel$1, {
10950
- open: open,
10951
- position: position,
10952
- slidingPanelPositionFixed: true,
10953
- showSlidingPanelBorder: true,
10954
- children: children
10955
- });
10956
- Sticky.propTypes = {
10957
- open: PropTypes.bool,
10958
- position: PropTypes.oneOf(['top', 'bottom']),
10959
- children: PropTypes.node
10960
- };
10961
- Sticky.defaultProps = {
10962
- open: true,
10963
- position: 'bottom',
10964
- children: null
10965
- };
10966
- var Sticky$1 = Sticky;
10932
+ }) {
10933
+ return /*#__PURE__*/jsx(SlidingPanel, {
10934
+ open: open,
10935
+ position: position,
10936
+ slidingPanelPositionFixed: true,
10937
+ showSlidingPanelBorder: true,
10938
+ children: children
10939
+ });
10940
+ }
10967
10941
 
10968
10942
  var messages$1 = defineMessages({
10969
10943
  statusNotDone: {
@@ -14513,13 +14487,13 @@ var ja = {
14513
14487
  "neptune.Upload.csButtonText": "別のファイルをアップロードしますか?",
14514
14488
  "neptune.Upload.csFailureText": "アップロードに失敗しました。もう一度やり直してください。",
14515
14489
  "neptune.Upload.csSuccessText": "アップロードが完了しました。",
14516
- "neptune.Upload.csTooLargeMessage": "{maxSize}MB以下のファイルをアップロードしてください",
14490
+ "neptune.Upload.csTooLargeMessage": "{maxSize}MBよりも小さいファイルをアップロードください",
14517
14491
  "neptune.Upload.csWrongTypeMessage": "ファイルの種類はサポートされていません。別のファイルで再度お試しください",
14518
14492
  "neptune.Upload.psButtonText": "キャンセル",
14519
14493
  "neptune.Upload.psProcessingText": "アップロード中…",
14520
14494
  "neptune.Upload.usButtonText": "または、ファイルを選択する",
14521
14495
  "neptune.Upload.usDropMessage": "ファイルをドロップしてアップロードする",
14522
- "neptune.Upload.usPlaceholder": "{maxSize}MB以下のファイルをドラッグ&ドロップしてください",
14496
+ "neptune.Upload.usPlaceholder": "{maxSize}MB以下のファイルのみドラッグ&ドロップが可能です",
14523
14497
  "neptune.UploadButton.allFileTypes": "すべてのファイル種類",
14524
14498
  "neptune.UploadButton.dropFiles": "ファイルをドロップしてアップロードする",
14525
14499
  "neptune.UploadButton.instructions": "{fileTypes}、{size}MB以下",
@@ -14687,13 +14661,13 @@ var ro = {
14687
14661
  "neptune.Upload.csButtonText": "Încarci un alt fișier?",
14688
14662
  "neptune.Upload.csFailureText": "Încărcare eșuată. Te rugăm să încerci din nou",
14689
14663
  "neptune.Upload.csSuccessText": "Încărcare completă!",
14690
- "neptune.Upload.csTooLargeMessage": "Te rugăm să furnizezi un fișier mai mic de {maxSize} MB",
14664
+ "neptune.Upload.csTooLargeMessage": "Te rugăm să furnizezi un fișier mai mic de {maxSize}MB",
14691
14665
  "neptune.Upload.csWrongTypeMessage": "Tipul de fișier nu a fost acceptat. Te rugăm să încerci din nou cu un alt fișier",
14692
14666
  "neptune.Upload.psButtonText": "Anulează",
14693
14667
  "neptune.Upload.psProcessingText": "Se încarcă...",
14694
14668
  "neptune.Upload.usButtonText": "Sau selectează un fișier",
14695
14669
  "neptune.Upload.usDropMessage": "Atașează fișierul pentru a începe încărcarea",
14696
- "neptune.Upload.usPlaceholder": "Glisează și atașează un fișier mai mic de {maxSize} MB",
14670
+ "neptune.Upload.usPlaceholder": "Glisează și atașează un fișier de până în {maxSize}MB",
14697
14671
  "neptune.UploadButton.allFileTypes": "Toate tipurile de fișiere",
14698
14672
  "neptune.UploadButton.dropFiles": "Trage fișierul pentru a începe încărcarea",
14699
14673
  "neptune.UploadButton.instructions": "{fileTypes}, de maximum {size}MB",
@@ -15082,5 +15056,5 @@ const translations = {
15082
15056
  'zh-HK': zhHK
15083
15057
  };
15084
15058
 
15085
- export { Accordion, ActionButton, ActionOption, Alert$1 as Alert, ArrowPosition as AlertArrowPosition, Avatar, AvatarType, AvatarWrapper, Badge, Card as BaseCard, Body, BottomSheet$2 as BottomSheet, Breakpoint, Button, Card$2 as Card, Checkbox$1 as Checkbox, CheckboxButton$1 as CheckboxButton, CheckboxOption, Chevron, Chip, Chips, CircularButton, ControlType, CriticalCommsBanner, DEFAULT_LANG, DEFAULT_LOCALE, DateInput, DateLookup$1 as DateLookup, DateMode, Decision, DecisionPresentation, DecisionType, DefinitionList$1 as DefinitionList, Dimmer$1 as Dimmer, Direction, DirectionProvider, Display, Drawer$1 as Drawer, DropFade, DynamicFieldDefinitionList$1 as DynamicFieldDefinitionList, Emphasis, FileType, FlowNavigation, Header, Image, Info, InfoPresentation, InlineAlert, Input, InputGroup, InputWithDisplayFormat, InstructionsList, LanguageProvider, Layout, Link, ListItem$1 as ListItem, Loader$1 as Loader, Logo$1 as Logo, LogoType, Markdown, MarkdownNodeType, Modal, Money$1 as Money, MoneyInput$1 as MoneyInput, MonthFormat, NavigationOption, NavigationOptionList$1 as NavigationOptionsList, Nudge, Option$2 as Option, OverlayHeader$1 as OverlayHeader, PhoneNumberInput, Popover$1 as Popover, Position, Priority, ProcessIndicator$1 as ProcessIndicator, ProfileType, Progress, ProgressBar, PromoCard$1 as PromoCard, PromoCard$1 as PromoCardGroup, Provider$1 as Provider, RTL_LANGUAGES, Radio, RadioGroup, RadioOption, SUPPORTED_LANGUAGES, Scroll, SearchInput, Section, SegmentedControl, Select, SelectInput, SelectInputOptionContent, SelectInputTriggerButton, Sentiment, Size, SlidingPanel$1 as SlidingPanel, SnackbarConsumer, SnackbarContext, SnackbarPortal, SnackbarProvider, Status, StatusIcon, Stepper, Sticky$1 as Sticky, Summary, Switch, SwitchOption, Tabs$1 as Tabs, TextArea, TextareaWithDisplayFormat, Theme, Title, Tooltip$1 as Tooltip, Type, Typeahead, Typography, Upload$1 as Upload, UploadInput, UploadStep, Variant, Width, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale, isBrowser, isServerSide, translations, useDirection, useLayout, useScreenSize, useSnackbar };
15059
+ export { Accordion, ActionButton, ActionOption, Alert$1 as Alert, ArrowPosition as AlertArrowPosition, Avatar, AvatarType, AvatarWrapper, Badge, Card as BaseCard, Body, BottomSheet$2 as BottomSheet, Breakpoint, Button, Card$2 as Card, Checkbox$1 as Checkbox, CheckboxButton$1 as CheckboxButton, CheckboxOption, Chevron, Chip, Chips, CircularButton, ControlType, CriticalCommsBanner, DEFAULT_LANG, DEFAULT_LOCALE, DateInput, DateLookup$1 as DateLookup, DateMode, Decision, DecisionPresentation, DecisionType, DefinitionList$1 as DefinitionList, Dimmer$1 as Dimmer, Direction, DirectionProvider, Display, Drawer$1 as Drawer, DropFade, DynamicFieldDefinitionList$1 as DynamicFieldDefinitionList, Emphasis, FileType, FlowNavigation, Header, Image, Info, InfoPresentation, InlineAlert, Input, InputGroup, InputWithDisplayFormat, InstructionsList, LanguageProvider, Layout, Link, ListItem$1 as ListItem, Loader$1 as Loader, Logo$1 as Logo, LogoType, Markdown, MarkdownNodeType, Modal, Money$1 as Money, MoneyInput$1 as MoneyInput, MonthFormat, NavigationOption, NavigationOptionList$1 as NavigationOptionsList, Nudge, Option$2 as Option, OverlayHeader$1 as OverlayHeader, PhoneNumberInput, Popover$1 as Popover, Position, Priority, ProcessIndicator$1 as ProcessIndicator, ProfileType, Progress, ProgressBar, PromoCard$1 as PromoCard, PromoCard$1 as PromoCardGroup, Provider$1 as Provider, RTL_LANGUAGES, Radio, RadioGroup, RadioOption, SUPPORTED_LANGUAGES, Scroll, SearchInput, Section, SegmentedControl, Select, SelectInput, SelectInputOptionContent, SelectInputTriggerButton, Sentiment, Size, SlidingPanel, SnackbarConsumer, SnackbarContext, SnackbarPortal, SnackbarProvider, Status, StatusIcon, Stepper, Sticky, Summary, Switch, SwitchOption, Tabs$1 as Tabs, TextArea, TextareaWithDisplayFormat, Theme, Title, Tooltip$1 as Tooltip, Type, Typeahead, Typography, Upload$1 as Upload, UploadInput, UploadStep, Variant, Width, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale, isBrowser, isServerSide, translations, useDirection, useLayout, useScreenSize, useSnackbar };
15086
15060
  //# sourceMappingURL=index.esm.js.map