@transferwise/components 46.119.2 → 46.119.4

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 (46) hide show
  1. package/build/chips/Chip.js +3 -11
  2. package/build/chips/Chip.js.map +1 -1
  3. package/build/chips/Chip.mjs +3 -11
  4. package/build/chips/Chip.mjs.map +1 -1
  5. package/build/dimmer/Dimmer.js +0 -1
  6. package/build/dimmer/Dimmer.js.map +1 -1
  7. package/build/dimmer/Dimmer.mjs +0 -1
  8. package/build/dimmer/Dimmer.mjs.map +1 -1
  9. package/build/inputs/SelectInput.js +5 -1
  10. package/build/inputs/SelectInput.js.map +1 -1
  11. package/build/inputs/SelectInput.mjs +5 -1
  12. package/build/inputs/SelectInput.mjs.map +1 -1
  13. package/build/inputs/_BottomSheet.js +0 -1
  14. package/build/inputs/_BottomSheet.js.map +1 -1
  15. package/build/inputs/_BottomSheet.mjs +0 -1
  16. package/build/inputs/_BottomSheet.mjs.map +1 -1
  17. package/build/inputs/_Popover.js +0 -1
  18. package/build/inputs/_Popover.js.map +1 -1
  19. package/build/inputs/_Popover.mjs +0 -1
  20. package/build/inputs/_Popover.mjs.map +1 -1
  21. package/build/progressBar/ProgressBar.js +1 -5
  22. package/build/progressBar/ProgressBar.js.map +1 -1
  23. package/build/progressBar/ProgressBar.mjs +1 -5
  24. package/build/progressBar/ProgressBar.mjs.map +1 -1
  25. package/build/select/Select.js +1 -7
  26. package/build/select/Select.js.map +1 -1
  27. package/build/select/Select.mjs +1 -7
  28. package/build/select/Select.mjs.map +1 -1
  29. package/build/types/chips/Chip.d.ts.map +1 -1
  30. package/build/types/dimmer/Dimmer.d.ts.map +1 -1
  31. package/build/types/inputs/SelectInput.d.ts.map +1 -1
  32. package/build/types/inputs/_BottomSheet.d.ts.map +1 -1
  33. package/build/types/inputs/_Popover.d.ts.map +1 -1
  34. package/build/types/progressBar/ProgressBar.d.ts.map +1 -1
  35. package/build/types/select/Select.d.ts.map +1 -1
  36. package/package.json +2 -2
  37. package/src/chips/Chip.tsx +5 -14
  38. package/src/chips/__snapshots__/Chips.spec.tsx.snap +31 -29
  39. package/src/dimmer/Dimmer.tsx +1 -5
  40. package/src/inputs/SelectInput.spec.tsx +40 -0
  41. package/src/inputs/SelectInput.story.tsx +8 -2
  42. package/src/inputs/SelectInput.tsx +10 -1
  43. package/src/inputs/_BottomSheet.tsx +1 -5
  44. package/src/inputs/_Popover.tsx +1 -5
  45. package/src/progressBar/ProgressBar.tsx +1 -6
  46. package/src/select/Select.tsx +1 -2
package/src/chips/Chip.tsx CHANGED
@@ -1,4 +1,3 @@
1
- import { useTheme } from '@wise/components-theming';
2
1
  import { clsx } from 'clsx';
3
2
  import { useEffect, useRef } from 'react';
4
3
 
@@ -36,8 +35,6 @@ const Chip = ({
36
35
  const defaultRole = isActionable ? 'button' : undefined;
37
36
  const tabIndex = isActionable ? 0 : -1;
38
37
 
39
- const { isModern } = useTheme();
40
-
41
38
  const closeButtonReference = useRef<HTMLButtonElement>(null);
42
39
  const previousCloseButtonShown = useRef<boolean | undefined>(undefined);
43
40
  useEffect(() => {
@@ -64,22 +61,16 @@ const Chip = ({
64
61
  )}
65
62
  {...(isActionable && { onClick, onKeyPress })}
66
63
  >
67
- {isModern ? (
68
- <Body aria-hidden={!!onRemove} type={Typography.BODY_DEFAULT_BOLD}>
69
- {label}
70
- </Body>
71
- ) : (
72
- <span aria-hidden="false" className="np-chip-label">
73
- {label}
74
- </span>
75
- )}
64
+ <Body aria-hidden={!!onRemove} type={Typography.BODY_DEFAULT_BOLD}>
65
+ {label}
66
+ </Body>
76
67
  {onRemove ? (
77
68
  <CloseButton
78
69
  ref={closeButtonReference}
79
- className={isModern ? `btn-unstyled` : `btn-unstyled m-l-1`}
70
+ className="btn-unstyled"
80
71
  aria-label={closeButton?.['aria-label']}
81
72
  size="sm"
82
- filled={isModern}
73
+ filled
83
74
  onClick={onRemove}
84
75
  />
85
76
  ) : null}
package/src/chips/__snapshots__/Chips.spec.tsx.snap CHANGED
@@ -13,12 +13,12 @@ exports[`Chips Choice Chips renders as expected 1`] = `
13
13
  role="radio"
14
14
  tabindex="0"
15
15
  >
16
- <span
16
+ <div
17
17
  aria-hidden="false"
18
- class="np-chip-label"
18
+ class="np-text-body-default-bold"
19
19
  >
20
20
  Accounting
21
- </span>
21
+ </div>
22
22
  </div>
23
23
  <div
24
24
  aria-checked="true"
@@ -26,12 +26,12 @@ exports[`Chips Choice Chips renders as expected 1`] = `
26
26
  role="radio"
27
27
  tabindex="0"
28
28
  >
29
- <span
29
+ <div
30
30
  aria-hidden="false"
31
- class="np-chip-label"
31
+ class="np-text-body-default-bold"
32
32
  >
33
33
  Payroll
34
- </span>
34
+ </div>
35
35
  </div>
36
36
  <div
37
37
  aria-checked="false"
@@ -39,12 +39,12 @@ exports[`Chips Choice Chips renders as expected 1`] = `
39
39
  role="radio"
40
40
  tabindex="0"
41
41
  >
42
- <span
42
+ <div
43
43
  aria-hidden="false"
44
- class="np-chip-label"
44
+ class="np-text-body-default-bold"
45
45
  >
46
46
  Reporting
47
- </span>
47
+ </div>
48
48
  </div>
49
49
  <div
50
50
  aria-checked="false"
@@ -52,12 +52,12 @@ exports[`Chips Choice Chips renders as expected 1`] = `
52
52
  role="radio"
53
53
  tabindex="0"
54
54
  >
55
- <span
55
+ <div
56
56
  aria-hidden="false"
57
- class="np-chip-label"
57
+ class="np-text-body-default-bold"
58
58
  >
59
59
  Payments
60
- </span>
60
+ </div>
61
61
  </div>
62
62
  </div>
63
63
  </div>
@@ -76,12 +76,12 @@ exports[`Chips Filter Chips renders as expected 1`] = `
76
76
  role="checkbox"
77
77
  tabindex="0"
78
78
  >
79
- <span
79
+ <div
80
80
  aria-hidden="false"
81
- class="np-chip-label"
81
+ class="np-text-body-default-bold"
82
82
  >
83
83
  Accounting
84
- </span>
84
+ </div>
85
85
  </div>
86
86
  <div
87
87
  aria-checked="false"
@@ -89,12 +89,12 @@ exports[`Chips Filter Chips renders as expected 1`] = `
89
89
  role="checkbox"
90
90
  tabindex="0"
91
91
  >
92
- <span
92
+ <div
93
93
  aria-hidden="false"
94
- class="np-chip-label"
94
+ class="np-text-body-default-bold"
95
95
  >
96
96
  Payroll
97
- </span>
97
+ </div>
98
98
  </div>
99
99
  <div
100
100
  aria-checked="false"
@@ -102,12 +102,12 @@ exports[`Chips Filter Chips renders as expected 1`] = `
102
102
  role="checkbox"
103
103
  tabindex="0"
104
104
  >
105
- <span
105
+ <div
106
106
  aria-hidden="false"
107
- class="np-chip-label"
107
+ class="np-text-body-default-bold"
108
108
  >
109
109
  Reporting
110
- </span>
110
+ </div>
111
111
  </div>
112
112
  <div
113
113
  aria-checked="true"
@@ -115,20 +115,20 @@ exports[`Chips Filter Chips renders as expected 1`] = `
115
115
  role="checkbox"
116
116
  tabindex="-1"
117
117
  >
118
- <span
119
- aria-hidden="false"
120
- class="np-chip-label"
118
+ <div
119
+ aria-hidden="true"
120
+ class="np-text-body-default-bold"
121
121
  >
122
122
  Payments
123
- </span>
123
+ </div>
124
124
  <button
125
125
  aria-label="Clear Payments"
126
- class="np-close-button close btn-link text-no-decoration btn-unstyled m-l-1"
126
+ class="np-close-button close btn-link text-no-decoration btn-unstyled"
127
127
  type="button"
128
128
  >
129
129
  <span
130
- class="tw-icon tw-icon-cross "
131
- data-testid="cross-icon"
130
+ class="tw-icon tw-icon-cross-circle-fill "
131
+ data-testid="cross-circle-fill-icon"
132
132
  >
133
133
  <svg
134
134
  aria-hidden="true"
@@ -140,7 +140,9 @@ exports[`Chips Filter Chips renders as expected 1`] = `
140
140
  width="16"
141
141
  >
142
142
  <path
143
- d="m12 13.414-7.293 7.293-1.414-1.414L10.586 12 3.293 4.707l1.414-1.414L12 10.586l7.293-7.293 1.414 1.414L13.414 12l7.293 7.293-1.414 1.414z"
143
+ clip-rule="evenodd"
144
+ d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10m-4.707-6.707L10.586 12 7.293 8.707l1.414-1.414L12 10.586l3.293-3.293 1.414 1.414L13.414 12l3.293 3.293-1.414 1.414L12 13.414l-3.293 3.293z"
145
+ fill-rule="evenodd"
144
146
  />
145
147
  </svg>
146
148
  </span>
package/src/dimmer/Dimmer.tsx CHANGED
@@ -183,11 +183,7 @@ const DimmerWrapper: React.ComponentType<{
183
183
  const { screenMode, theme } = useTheme();
184
184
 
185
185
  return open || hasNotExited ? (
186
- <ThemeProvider
187
- theme="personal"
188
- screenMode={theme === 'personal' ? screenMode : 'light'}
189
- isNotRootProvider
190
- >
186
+ <ThemeProvider theme="personal" screenMode={theme === 'personal' ? screenMode : 'light'}>
191
187
  {children}
192
188
  </ThemeProvider>
193
189
  ) : (
package/src/inputs/SelectInput.spec.tsx CHANGED
@@ -184,6 +184,46 @@ describe('SelectInput', () => {
184
184
  expect(within(listbox).getAllByRole('option')).toHaveLength(2);
185
185
  });
186
186
 
187
+ it('filters items ignoring diacritics/accents', async () => {
188
+ render(
189
+ <SelectInput
190
+ items={[
191
+ { type: 'option', value: 'AX', filterMatchers: ['Åland Islands'] },
192
+ { type: 'option', value: 'AL', filterMatchers: ['Albania'] },
193
+ { type: 'option', value: 'DZ', filterMatchers: ['Algeria'] },
194
+ { type: 'option', value: 'RE', filterMatchers: ['Réunion'] },
195
+ ]}
196
+ filterable
197
+ />,
198
+ );
199
+
200
+ await userEvent.tab();
201
+ await userEvent.keyboard(' ');
202
+
203
+ const listbox = screen.getByRole('listbox');
204
+ expect(within(listbox).getAllByRole('option')).toHaveLength(4);
205
+
206
+ await userEvent.keyboard('aland');
207
+ expect(within(listbox).getAllByRole('option')).toHaveLength(1);
208
+ expect(within(listbox).getByRole('option')).toHaveTextContent('AX');
209
+
210
+ const searchInput = screen.getByRole('combobox', { expanded: true });
211
+ await userEvent.clear(searchInput);
212
+ await userEvent.keyboard('reunion');
213
+ expect(within(listbox).getAllByRole('option')).toHaveLength(1);
214
+ expect(within(listbox).getByRole('option')).toHaveTextContent('RE');
215
+
216
+ await userEvent.clear(searchInput);
217
+ await userEvent.keyboard('Åland');
218
+ expect(within(listbox).getAllByRole('option')).toHaveLength(1);
219
+ expect(within(listbox).getByRole('option')).toHaveTextContent('AX');
220
+
221
+ await userEvent.clear(searchInput);
222
+ await userEvent.keyboard('Rèunion');
223
+ expect(within(listbox).getAllByRole('option')).toHaveLength(1);
224
+ expect(within(listbox).getByRole('option')).toHaveTextContent('RE');
225
+ });
226
+
187
227
  it('selects multiple options', async () => {
188
228
  render(
189
229
  <SelectInput
package/src/inputs/SelectInput.story.tsx CHANGED
@@ -111,7 +111,7 @@ interface Currency {
111
111
  const popularCurrencies: Currency[] = [
112
112
  {
113
113
  code: 'USD',
114
- name: 'United States dollar',
114
+ name: 'United States Dollar',
115
115
  countries: ['Hong Kong', 'Saudi Arabia'],
116
116
  },
117
117
  {
@@ -136,6 +136,11 @@ const otherCurrencies: Currency[] = [
136
136
  code: 'AUD',
137
137
  name: 'Australian dollar',
138
138
  },
139
+ {
140
+ code: 'ÅLD',
141
+ name: 'Ålandian peso',
142
+ countries: ['Ålandia'],
143
+ },
139
144
  ];
140
145
 
141
146
  const allCurrencies: Currency[] = [...popularCurrencies, ...otherCurrencies].sort((a, b) =>
@@ -205,7 +210,7 @@ export const Currencies: Story<Currency> = {
205
210
  });
206
211
 
207
212
  await step('Check if options are displayed', async () => {
208
- await waitFor(async () => expect(await screen.findAllByRole('option')).toHaveLength(8));
213
+ await waitFor(async () => expect(await screen.findAllByRole('option')).toHaveLength(9));
209
214
  await waitFor(async () => expect(screen.getByText(/^Can’t find it?/u)).toBeInTheDocument());
210
215
  });
211
216
 
@@ -538,6 +543,7 @@ const countries: Country[] = [
538
543
  { code: 'NL', name: 'Netherlands' },
539
544
  { code: 'CH', name: 'Switzerland' },
540
545
  { code: 'SE', name: 'Sweden' },
546
+ { code: 'AL', name: 'Ålandia' },
541
547
  ];
542
548
 
543
549
  function countryOption(country: Country) {
package/src/inputs/SelectInput.tsx CHANGED
@@ -38,7 +38,16 @@ import { ButtonProps } from '../button/Button.types';
38
38
  const MAX_ITEMS_WITHOUT_VIRTUALIZATION = 50;
39
39
 
40
40
  function searchableString(value: string) {
41
- return value.trim().replace(/\s+/gu, ' ').normalize('NFKC').toLowerCase();
41
+ return (
42
+ value
43
+ .trim()
44
+ .replace(/\s+/gu, ' ')
45
+ // NFD converts an Å to A + ̊ (and other special characters)
46
+ .normalize('NFD')
47
+ // and then this replaces the ̊ with nothing (and other special characters)
48
+ .replace(/[\u0300-\u036f]/g, '')
49
+ .toLowerCase()
50
+ );
42
51
  }
43
52
 
44
53
  function inferSearchableStrings(value: unknown) {
package/src/inputs/_BottomSheet.tsx CHANGED
@@ -71,11 +71,7 @@ export function BottomSheet({
71
71
  })}
72
72
 
73
73
  <FloatingPortal>
74
- <ThemeProvider
75
- theme="personal"
76
- screenMode={theme === 'personal' ? screenMode : 'light'}
77
- isNotRootProvider
78
- >
74
+ <ThemeProvider theme="personal" screenMode={theme === 'personal' ? screenMode : 'light'}>
79
75
  <Transition
80
76
  show={open}
81
77
  className="np-bottom-sheet-v2-container"
package/src/inputs/_Popover.tsx CHANGED
@@ -90,11 +90,7 @@ export function Popover({
90
90
  })}
91
91
 
92
92
  <FloatingPortal>
93
- <ThemeProvider
94
- theme="personal"
95
- screenMode={theme === 'personal' ? screenMode : 'light'}
96
- isNotRootProvider
97
- >
93
+ <ThemeProvider theme="personal" screenMode={theme === 'personal' ? screenMode : 'light'}>
98
94
  <Transition
99
95
  show={open}
100
96
  leave="transition-opacity"
package/src/progressBar/ProgressBar.tsx CHANGED
@@ -1,4 +1,3 @@
1
- import { useTheme } from '@wise/components-theming';
2
1
  import { clsx } from 'clsx';
3
2
 
4
3
  import Body from '../body';
@@ -23,14 +22,10 @@ const ProgressBar = ({
23
22
  progress,
24
23
  textEnd,
25
24
  }: ProgressBarProps) => {
26
- const { isModern } = useTheme();
27
25
  return (
28
26
  <div className={clsx('np-progress-bar', className)}>
29
27
  <label className="np-progress-bar__title m-b-1" htmlFor={id}>
30
- <Title
31
- type={Typography.TITLE_BODY}
32
- className={isModern ? `m-b-1 text-primary` : `text-primary`}
33
- >
28
+ <Title type={Typography.TITLE_BODY} className="m-b-1 text-primary">
34
29
  {title}
35
30
  </Title>
36
31
  {description && <Body>{description}</Body>}
package/src/select/Select.tsx CHANGED
@@ -163,7 +163,6 @@ export default function Select({
163
163
  const inputAttributes = useInputAttributes();
164
164
 
165
165
  const { formatMessage } = useIntl();
166
- const { isModern } = useTheme();
167
166
  const s = (className: string) => classNamesProp[className] || className;
168
167
  const [open, setOpen] = useState(false);
169
168
  const [searchValue, setSearchValue] = useState(DEFAULT_SEARCH_VALUE);
@@ -599,7 +598,7 @@ export default function Select({
599
598
  </Drawer>
600
599
  ) : (
601
600
  <BottomSheet open={open} onClose={handleCloseOptions}>
602
- {renderOptionsList({ className: isModern ? '' : 'p-a-1' })}
601
+ {renderOptionsList()}
603
602
  </BottomSheet>
604
603
  )
605
604
  ) : (