@transferwise/components 46.36.0 → 46.37.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (107) hide show
  1. package/build/index.js +11 -35
  2. package/build/index.js.map +1 -1
  3. package/build/index.mjs +11 -35
  4. package/build/index.mjs.map +1 -1
  5. package/build/types/accordion/AccordionItem/AccordionItem.d.ts.map +1 -1
  6. package/build/types/actionOption/ActionOption.d.ts +5 -5
  7. package/build/types/actionOption/ActionOption.d.ts.map +1 -1
  8. package/build/types/alert/Alert.d.ts +1 -1
  9. package/build/types/alert/Alert.d.ts.map +1 -1
  10. package/build/types/body/Body.d.ts +1 -1
  11. package/build/types/body/Body.d.ts.map +1 -1
  12. package/build/types/chips/Chip.d.ts +2 -2
  13. package/build/types/chips/Chip.d.ts.map +1 -1
  14. package/build/types/chips/Chips.d.ts +2 -2
  15. package/build/types/chips/Chips.d.ts.map +1 -1
  16. package/build/types/common/bottomSheet/BottomSheet.d.ts +2 -2
  17. package/build/types/common/bottomSheet/BottomSheet.d.ts.map +1 -1
  18. package/build/types/common/closeButton/CloseButton.d.ts +1 -1
  19. package/build/types/common/closeButton/CloseButton.d.ts.map +1 -1
  20. package/build/types/common/flowHeader/FlowHeader.d.ts +1 -1
  21. package/build/types/common/flowHeader/FlowHeader.d.ts.map +1 -1
  22. package/build/types/common/hooks/useResizeObserver.d.ts +1 -1
  23. package/build/types/common/hooks/useResizeObserver.d.ts.map +1 -1
  24. package/build/types/common/panel/Panel.d.ts +3 -3
  25. package/build/types/common/panel/Panel.d.ts.map +1 -1
  26. package/build/types/common/polymorphicWithOverrides/PolymorphicWithOverrides.d.ts +1 -1
  27. package/build/types/common/polymorphicWithOverrides/PolymorphicWithOverrides.d.ts.map +1 -1
  28. package/build/types/common/responsivePanel/ResponsivePanel.d.ts +1 -1
  29. package/build/types/dimmer/Dimmer.d.ts +3 -3
  30. package/build/types/dimmer/Dimmer.d.ts.map +1 -1
  31. package/build/types/emphasis/Emphasis.d.ts +2 -2
  32. package/build/types/emphasis/Emphasis.d.ts.map +1 -1
  33. package/build/types/inputs/Input.d.ts +1 -1
  34. package/build/types/inputs/Input.d.ts.map +1 -1
  35. package/build/types/inputs/SearchInput.d.ts +1 -1
  36. package/build/types/inputs/SearchInput.d.ts.map +1 -1
  37. package/build/types/inputs/TextArea.d.ts +1 -1
  38. package/build/types/inputs/TextArea.d.ts.map +1 -1
  39. package/build/types/inputs/_BottomSheet.d.ts +1 -1
  40. package/build/types/inputs/_BottomSheet.d.ts.map +1 -1
  41. package/build/types/inputs/_ButtonInput.d.ts +1 -1
  42. package/build/types/inputs/_ButtonInput.d.ts.map +1 -1
  43. package/build/types/moneyInput/MoneyInput.d.ts.map +1 -1
  44. package/build/types/progress/Progress.d.ts +2 -2
  45. package/build/types/progress/Progress.d.ts.map +1 -1
  46. package/build/types/progressBar/ProgressBar.d.ts +2 -2
  47. package/build/types/progressBar/ProgressBar.d.ts.map +1 -1
  48. package/build/types/promoCard/PromoCard.d.ts +1 -1
  49. package/build/types/promoCard/PromoCard.d.ts.map +1 -1
  50. package/build/types/provider/direction/DirectionProvider.d.ts +2 -2
  51. package/build/types/provider/direction/DirectionProvider.d.ts.map +1 -1
  52. package/build/types/provider/language/LanguageProvider.d.ts +2 -2
  53. package/build/types/provider/language/LanguageProvider.d.ts.map +1 -1
  54. package/build/types/select/option/Option.d.ts +2 -1
  55. package/build/types/select/option/Option.d.ts.map +1 -1
  56. package/build/types/slidingPanel/SlidingPanel.d.ts +1 -1
  57. package/build/types/slidingPanel/SlidingPanel.d.ts.map +1 -1
  58. package/build/types/switchOption/SwitchOption.d.ts +4 -4
  59. package/build/types/switchOption/SwitchOption.d.ts.map +1 -1
  60. package/build/types/tabs/Tabs.d.ts +1 -1
  61. package/build/types/tabs/Tabs.d.ts.map +1 -1
  62. package/build/types/tooltip/Tooltip.d.ts.map +1 -1
  63. package/build/types/uploadInput/UploadInput.d.ts +2 -2
  64. package/build/types/uploadInput/UploadInput.d.ts.map +1 -1
  65. package/build/types/uploadInput/uploadItem/UploadItem.d.ts.map +1 -1
  66. package/build/types/withDisplayFormat/WithDisplayFormat.d.ts +4 -4
  67. package/build/types/withDisplayFormat/WithDisplayFormat.d.ts.map +1 -1
  68. package/package.json +3 -3
  69. package/src/accordion/AccordionItem/AccordionItem.tsx +5 -2
  70. package/src/actionOption/ActionOption.tsx +4 -5
  71. package/src/alert/Alert.tsx +1 -1
  72. package/src/body/Body.tsx +4 -3
  73. package/src/chips/Chip.tsx +5 -6
  74. package/src/chips/Chips.tsx +1 -2
  75. package/src/common/bottomSheet/BottomSheet.tsx +2 -9
  76. package/src/common/closeButton/CloseButton.tsx +1 -1
  77. package/src/common/flowHeader/FlowHeader.tsx +1 -1
  78. package/src/common/hooks/useResizeObserver.ts +1 -1
  79. package/src/common/panel/Panel.spec.tsx +1 -1
  80. package/src/common/panel/Panel.tsx +7 -7
  81. package/src/common/polymorphicWithOverrides/PolymorphicWithOverrides.tsx +1 -1
  82. package/src/dimmer/Dimmer.tsx +2 -10
  83. package/src/emphasis/Emphasis.tsx +1 -3
  84. package/src/inputs/Input.tsx +1 -1
  85. package/src/inputs/SearchInput.tsx +1 -1
  86. package/src/inputs/SelectInput.tsx +4 -4
  87. package/src/inputs/TextArea.tsx +1 -1
  88. package/src/inputs/_BottomSheet.tsx +1 -1
  89. package/src/inputs/_ButtonInput.tsx +1 -1
  90. package/src/moneyInput/MoneyInput.story.tsx +40 -2
  91. package/src/moneyInput/MoneyInput.tsx +1 -4
  92. package/src/progress/Progress.tsx +3 -15
  93. package/src/progressBar/ProgressBar.tsx +1 -2
  94. package/src/promoCard/PromoCard.tsx +2 -2
  95. package/src/promoCard/PromoCardContext.spec.tsx +1 -1
  96. package/src/provider/direction/DirectionProvider.tsx +2 -5
  97. package/src/provider/language/LanguageProvider.tsx +2 -2
  98. package/src/segmentedControl/SegmentedControl.tsx +2 -2
  99. package/src/select/option/Option.tsx +6 -18
  100. package/src/slidingPanel/SlidingPanel.tsx +1 -1
  101. package/src/ssr.spec.js +6 -0
  102. package/src/switchOption/SwitchOption.tsx +5 -7
  103. package/src/tabs/Tabs.js +3 -3
  104. package/src/tooltip/Tooltip.tsx +2 -1
  105. package/src/uploadInput/UploadInput.tsx +2 -2
  106. package/src/uploadInput/uploadItem/UploadItem.tsx +3 -4
  107. package/src/withDisplayFormat/WithDisplayFormat.tsx +3 -3
package/src/select/option/Option.tsx CHANGED
@@ -1,5 +1,6 @@
1
+ import { IdIconProps } from '@transferwise/icons';
1
2
  import { Flag } from '@wise/art';
2
- import { useTheme } from '@wise/components-theming';
3
+ import classNames from 'classnames';
3
4
  import { cloneElement, ReactElement, ReactNode } from 'react';
4
5
 
5
6
  import Body from '../../body';
@@ -12,6 +13,7 @@ export type Props<T> = {
12
13
  note?: ReactNode;
13
14
  secondary?: ReactNode;
14
15
  icon?: ReactNode;
16
+ /** @deprecated */
15
17
  classNames?: Record<string, string>;
16
18
  selected?: boolean;
17
19
  };
@@ -22,13 +24,10 @@ function Option<T>({
22
24
  note = '',
23
25
  secondary = '',
24
26
  icon,
25
- classNames = {},
26
27
  selected = false,
27
28
  }: Props<T>) {
28
- const { isModern } = useTheme();
29
-
30
29
  const iconElement = icon
31
- ? cloneElement(icon as ReactElement, {
30
+ ? cloneElement(icon as ReactElement<IdIconProps>, {
32
31
  size: 24,
33
32
  className: 'tw-icon',
34
33
  })
@@ -38,26 +37,15 @@ function Option<T>({
38
37
  <Body as="span" type={Typography.BODY_LARGE} className={selected ? 'text-ellipsis' : undefined}>
39
38
  {label}
40
39
  {note && (
41
- <Body as="span" className={isModern ? 'm-l-1' : 'm-l-1 body-2'}>
40
+ <Body as="span" className="m-l-1">
42
41
  {note}
43
42
  </Body>
44
43
  )}
45
44
  </Body>
46
45
  );
47
46
 
48
- const secondaryElementClassNames = (): string | undefined => {
49
- let classes: string | undefined = undefined;
50
- if (selected) {
51
- classes = 'text-ellipsis';
52
- }
53
- if (isModern) {
54
- return classes;
55
- }
56
- return `${classes ? classes + ' ' : ''}body-2`;
57
- };
58
-
59
47
  const secondaryElement = secondary && (
60
- <Body className={secondaryElementClassNames()}>{secondary}</Body>
48
+ <Body className={classNames(selected && 'text-ellipsis')}>{secondary}</Body>
61
49
  );
62
50
 
63
51
  return iconElement ? (
package/src/slidingPanel/SlidingPanel.tsx CHANGED
@@ -25,7 +25,7 @@ const SlidingPanel = forwardRef(
25
25
  children,
26
26
  ...rest
27
27
  }: Omit<SlidingPanelProps, 'ref'>,
28
- reference: React.ForwardedRef<HTMLDivElement>,
28
+ reference: React.ForwardedRef<HTMLDivElement | null>,
29
29
  ) => {
30
30
  const localReference = useRef<HTMLDivElement>(null as never);
31
31
  useImperativeHandle(reference, () => localReference.current, []);
package/src/ssr.spec.js CHANGED
@@ -194,6 +194,12 @@ describe('Server side rendering', () => {
194
194
  Popover: {
195
195
  children: <div />,
196
196
  },
197
+ Progress: {
198
+ progress: { value: 50, max: 100 },
199
+ },
200
+ ProgressBar: {
201
+ progress: { value: 50, max: 100 },
202
+ },
197
203
  Field: {
198
204
  model: 'a model',
199
205
  type: 'text',
package/src/switchOption/SwitchOption.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { MouseEvent, ReactChild } from 'react';
1
+ import { MouseEvent } from 'react';
2
2
 
3
3
  import Option from '../common/Option';
4
4
  import Switch from '../switch';
@@ -6,15 +6,15 @@ import Switch from '../switch';
6
6
  export type SwitchOptionProps = {
7
7
  checked?: boolean;
8
8
  complex?: boolean;
9
- content?: ReactChild;
9
+ content?: React.ReactNode;
10
10
  disabled?: boolean;
11
11
  showMediaCircle?: boolean;
12
12
  showMediaAtAllSizes?: boolean;
13
13
  isContainerAligned?: boolean;
14
14
  id?: string;
15
- media?: ReactChild;
15
+ media?: React.ReactNode;
16
16
  onChange: (newValue: boolean) => void;
17
- title: ReactChild;
17
+ title: React.ReactNode;
18
18
  'aria-label': string;
19
19
  };
20
20
 
@@ -22,9 +22,7 @@ const stopPropagation = (event?: MouseEvent<HTMLSpanElement>) => {
22
22
  if (event) {
23
23
  event.stopPropagation();
24
24
  event.preventDefault();
25
- if (event.nativeEvent && event.nativeEvent.stopImmediatePropagation) {
26
- event.nativeEvent.stopImmediatePropagation();
27
- }
25
+ event.nativeEvent?.stopImmediatePropagation?.();
28
26
  }
29
27
  };
30
28
 
package/src/tabs/Tabs.js CHANGED
@@ -3,7 +3,7 @@ import { Spring, SpringValue, animated } from '@react-spring/web';
3
3
  import classNames from 'classnames';
4
4
  import clamp from 'lodash.clamp';
5
5
  import PropTypes from 'prop-types';
6
- import { Component, createRef, Fragment, RefObject } from 'react';
6
+ import { Component, createRef, Fragment } from 'react';
7
7
 
8
8
  import { Size, Width, Direction } from '../common';
9
9
  import { DirectionContext } from '../provider/direction';
@@ -27,7 +27,7 @@ const enabledTabsFilter = (tab) => !tab.disabled;
27
27
  const SpacerWidth = { default: 0, xs: 8, sm: 16, md: 24, lg: 32 };
28
28
 
29
29
  class Tabs extends Component {
30
- /** @type {RefObject<HTMLDivElement>} */
30
+ /** @type {React.RefObject<HTMLDivElement | null>} */
31
31
  containerReference = createRef();
32
32
 
33
33
  constructor(props) {
@@ -576,7 +576,6 @@ Tabs.propTypes = {
576
576
  }),
577
577
  ).isRequired,
578
578
  selected: PropTypes.number.isRequired,
579
- onTabSelect: PropTypes.func.isRequired,
580
579
  name: PropTypes.string.isRequired,
581
580
  animatePanelsOnClick: PropTypes.bool,
582
581
  changeTabOnSwipe: PropTypes.bool,
@@ -584,6 +583,7 @@ Tabs.propTypes = {
584
583
  transitionSpacing: PropTypes.oneOf(['default', 'xs', 'sm', 'md', 'lg']),
585
584
  headerWidth: PropTypes.oneOf(['auto', 'block']),
586
585
  id: PropTypes.string,
586
+ onTabSelect: PropTypes.func.isRequired,
587
587
  };
588
588
 
589
589
  Tabs.defaultProps = {
package/src/tooltip/Tooltip.tsx CHANGED
@@ -1,6 +1,7 @@
1
1
  /* eslint-disable @typescript-eslint/ban-ts-comment */
2
2
  import classNames from 'classnames';
3
3
  import {
4
+ AriaAttributes,
4
5
  PropsWithChildren,
5
6
  ReactElement,
6
7
  ReactNode,
@@ -84,7 +85,7 @@ const Tooltip = ({
84
85
  onBlur={() => setOpen(false)}
85
86
  >
86
87
  {children
87
- ? cloneElement(children as ReactElement, {
88
+ ? cloneElement(children as ReactElement<Pick<AriaAttributes, 'aria-describedby'>>, {
88
89
  'aria-describedby': `${tooltipId}-tooltip`,
89
90
  })
90
91
  : null}
package/src/uploadInput/UploadInput.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import { useTheme } from '@wise/components-theming';
2
2
  import classNames from 'classnames';
3
- import { ReactElement, useEffect, useRef, useState } from 'react';
3
+ import { useEffect, useRef, useState } from 'react';
4
4
  import { useIntl } from 'react-intl';
5
5
 
6
6
  import Button from '../button';
@@ -127,7 +127,7 @@ const UploadInput = ({
127
127
  id,
128
128
  sizeLimitErrorMessage,
129
129
  uploadButtonTitle,
130
- }: UploadInputProps): ReactElement => {
130
+ }: UploadInputProps) => {
131
131
  const { isModern } = useTheme();
132
132
  const [markedFileForDelete, setMarkedFileForDelete] = useState<UploadedFile | null>(null);
133
133
  const [mounted, setMounted] = useState(false);
package/src/uploadInput/uploadItem/UploadItem.tsx CHANGED
@@ -1,7 +1,6 @@
1
1
  import { AlertCircle, CrossCircleFill } from '@transferwise/icons';
2
2
  import { useTheme } from '@wise/components-theming';
3
3
  import classNames from 'classnames';
4
- import { ReactElement, MouseEvent } from 'react';
5
4
  import { useIntl } from 'react-intl';
6
5
 
7
6
  import Body from '../../body';
@@ -49,7 +48,7 @@ const UploadItem = ({
49
48
 
50
49
  const isSucceeded = [Status.SUCCEEDED, undefined].includes(status) && !!url;
51
50
 
52
- const getIcon = (): ReactElement => {
51
+ const getIcon = () => {
53
52
  if (error || status === Status.FAILED) {
54
53
  return isModern ? (
55
54
  <StatusIcon size={Size.SMALL} sentiment={Sentiment.NEGATIVE} />
@@ -58,7 +57,7 @@ const UploadItem = ({
58
57
  );
59
58
  }
60
59
 
61
- let processIndicator: ReactElement;
60
+ let processIndicator: React.ReactNode;
62
61
 
63
62
  switch (status) {
64
63
  case Status.PROCESSING:
@@ -114,7 +113,7 @@ const UploadItem = ({
114
113
  return filename || formatMessage(MESSAGES.uploadedFile);
115
114
  };
116
115
 
117
- const onDownloadFile = (event: MouseEvent): void => {
116
+ const onDownloadFile = (event: React.MouseEvent): void => {
118
117
  if (onDownload) {
119
118
  event.preventDefault();
120
119
  onDownload(file);
package/src/withDisplayFormat/WithDisplayFormat.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { Component } from 'react';
1
+ import * as React from 'react';
2
2
 
3
3
  import { HistoryNavigator } from '../common';
4
4
  import {
@@ -61,10 +61,10 @@ export interface WithDisplayFormatProps<T extends TextElementProps = TextElement
61
61
  onChange?: (value: string) => void;
62
62
  onBlur?: (value: string) => void;
63
63
  onFocus?: (value: string) => void;
64
- render: (renderProps: T) => JSX.Element;
64
+ render: (renderProps: T) => React.JSX.Element;
65
65
  }
66
66
 
67
- class WithDisplayFormat<T extends TextElementProps> extends Component<
67
+ class WithDisplayFormat<T extends TextElementProps> extends React.Component<
68
68
  WithDisplayFormatProps<T>,
69
69
  WithDisplayFormatState
70
70
  > {