@transferwise/components 46.41.1 → 46.42.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 (20) hide show
  1. package/build/index.js +44 -36
  2. package/build/index.js.map +1 -1
  3. package/build/index.mjs +45 -37
  4. package/build/index.mjs.map +1 -1
  5. package/build/main.css +41 -51
  6. package/build/styles/inputs/SelectInput.css +41 -51
  7. package/build/styles/main.css +41 -51
  8. package/build/types/common/hooks/useVirtualKeyboard.d.ts +7 -0
  9. package/build/types/common/hooks/useVirtualKeyboard.d.ts.map +1 -0
  10. package/build/types/inlineAlert/InlineAlert.d.ts.map +1 -1
  11. package/build/types/inputs/_BottomSheet.d.ts.map +1 -1
  12. package/package.json +2 -2
  13. package/src/circularButton/CircularButton.story.tsx +53 -84
  14. package/src/common/hooks/useVirtualKeyboard.ts +21 -0
  15. package/src/inlineAlert/InlineAlert.tsx +4 -6
  16. package/src/inputs/SelectInput.css +41 -51
  17. package/src/inputs/_BottomSheet.less +35 -49
  18. package/src/inputs/_BottomSheet.tsx +22 -27
  19. package/src/inputs/_Popover.less +2 -2
  20. package/src/main.css +41 -51
package/src/inputs/SelectInput.css CHANGED
@@ -2,67 +2,37 @@
2
2
  position: relative;
3
3
  z-index: 1060;
4
4
  }
5
- .np-bottom-sheet-v2-backdrop-container--enter,
6
- .np-bottom-sheet-v2-backdrop-container--leave {
7
- transition-property: opacity;
8
- transition-timing-function: ease-out;
9
- transition-duration: 300ms;
10
- }
11
- .np-bottom-sheet-v2-backdrop-container--enter-from,
12
- .np-bottom-sheet-v2-backdrop-container--leave-to {
13
- opacity: 0;
14
- }
15
5
  .np-bottom-sheet-v2-backdrop {
16
6
  position: fixed;
17
7
  inset: 0px;
18
8
  background-color: #37517e;
19
9
  background-color: var(--color-content-primary);
20
10
  opacity: 0.4;
11
+ transition-property: opacity;
12
+ transition-timing-function: ease-out;
13
+ transition-duration: 300ms;
14
+ }
15
+ .np-bottom-sheet-v2-backdrop--closed {
16
+ opacity: 0;
21
17
  }
22
18
  .np-bottom-sheet-v2 {
23
19
  position: fixed;
24
20
  inset: 0px;
21
+ bottom: env(keyboard-inset-height, 0px);
22
+ margin-left: 8px;
23
+ margin-left: var(--size-8);
24
+ margin-right: 8px;
25
+ margin-right: var(--size-8);
26
+ margin-top: 64px;
27
+ margin-top: var(--size-64);
25
28
  display: flex;
26
29
  flex-direction: column;
27
30
  justify-content: flex-end;
28
- padding-left: 8px;
29
- padding-left: var(--size-8);
30
- padding-right: 8px;
31
- padding-right: var(--size-8);
32
- padding-top: 64px;
33
- padding-top: var(--size-64);
34
31
  }
35
32
  .np-bottom-sheet-v2-content {
36
- max-height: 100%;
37
- }
38
- .np-bottom-sheet-v2-content--enter,
39
- .np-bottom-sheet-v2-content--leave {
40
- transition-property: transform;
41
- transition-timing-function: ease-out;
42
- transition-duration: 300ms;
43
- }
44
- @media (prefers-reduced-motion: reduce) {
45
- .np-bottom-sheet-v2-content--enter,
46
- .np-bottom-sheet-v2-content--leave {
47
- transition-property: opacity;
48
- }
49
- }
50
- @media (prefers-reduced-motion: no-preference) {
51
- .np-bottom-sheet-v2-content--enter-from,
52
- .np-bottom-sheet-v2-content--leave-to {
53
- transform: translateY(100%);
54
- }
55
- }
56
- @media (prefers-reduced-motion: reduce) {
57
- .np-bottom-sheet-v2-content--enter-from,
58
- .np-bottom-sheet-v2-content--leave-to {
59
- opacity: 0;
60
- }
61
- }
62
- .np-bottom-sheet-v2-content-inner-container {
63
33
  display: flex;
64
- height: 100%;
65
34
  flex-direction: column;
35
+ overflow: auto;
66
36
  border-top-left-radius: 32px;
67
37
  /* TODO: Tokenize */
68
38
  border-top-right-radius: 32px;
@@ -71,30 +41,50 @@
71
41
  background-color: var(--color-background-elevated);
72
42
  box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
73
43
  }
74
- .np-bottom-sheet-v2-content-inner-container:focus {
44
+ .np-bottom-sheet-v2-content:focus {
75
45
  outline: none;
76
46
  }
47
+ @media (prefers-reduced-motion: no-preference) {
48
+ .np-bottom-sheet-v2-content {
49
+ transition-property: transform;
50
+ transition-timing-function: ease-out;
51
+ transition-duration: 300ms;
52
+ }
53
+ .np-bottom-sheet-v2-content--closed {
54
+ transform: translateY(100%);
55
+ }
56
+ }
57
+ @media (prefers-reduced-motion: reduce) {
58
+ .np-bottom-sheet-v2-content {
59
+ transition-property: opacity;
60
+ transition-timing-function: ease-out;
61
+ transition-duration: 300ms;
62
+ }
63
+ .np-bottom-sheet-v2-content--closed {
64
+ opacity: 0;
65
+ }
66
+ }
77
67
  .np-bottom-sheet-v2-header {
78
68
  align-self: flex-end;
79
69
  padding: 16px;
80
70
  padding: var(--size-16);
81
71
  }
82
72
  .np-bottom-sheet-v2-content-inner {
83
- padding-top: 0px;
84
73
  display: grid;
74
+ grid-template-rows: minmax(0, 1fr);
85
75
  grid-row-gap: 8px;
86
76
  grid-row-gap: var(--size-8);
87
77
  row-gap: 8px;
88
78
  row-gap: var(--size-8);
89
- overflow-y: auto;
90
- grid-template-rows: repeat(1, minmax(0, 1fr));
79
+ overflow: auto;
91
80
  }
92
81
  .np-bottom-sheet-v2-content-inner--has-title {
93
- grid-template-rows: auto 1fr;
82
+ grid-template-rows: auto minmax(0, 1fr);
94
83
  }
95
84
  .np-bottom-sheet-v2-content-inner--padding-md {
96
85
  padding: 16px;
97
86
  padding: var(--size-16);
87
+ padding-top: 0px;
98
88
  }
99
89
  .np-bottom-sheet-v2-title {
100
90
  color: #37517e;
@@ -141,10 +131,10 @@
141
131
  row-gap: 8px;
142
132
  row-gap: var(--size-8);
143
133
  overflow-y: auto;
144
- grid-template-rows: repeat(1, minmax(0, 1fr));
134
+ grid-template-rows: minmax(0, 1fr);
145
135
  }
146
136
  .np-popover-v2--has-title {
147
- grid-template-rows: auto 1fr;
137
+ grid-template-rows: auto minmax(0, 1fr);
148
138
  }
149
139
  .np-popover-v2--padding-md {
150
140
  padding: 16px;
package/src/inputs/_BottomSheet.less CHANGED
@@ -3,98 +3,84 @@
3
3
  z-index: 1060;
4
4
  }
5
5
 
6
- .np-bottom-sheet-v2-backdrop-container {
7
- &--enter, &--leave {
8
- transition-property: opacity;
9
- transition-timing-function: ease-out;
10
- transition-duration: 300ms;
11
- }
12
-
13
- &--enter-from, &--leave-to {
14
- opacity: 0;
15
- }
16
- }
17
-
18
6
  .np-bottom-sheet-v2-backdrop {
19
7
  position: fixed;
20
8
  inset: 0px;
21
9
  background-color: var(--color-content-primary);
22
10
  opacity: 0.4;
11
+ transition-property: opacity;
12
+ transition-timing-function: ease-out;
13
+ transition-duration: 300ms;
14
+
15
+ &--closed {
16
+ opacity: 0;
17
+ }
23
18
  }
24
19
 
25
20
  .np-bottom-sheet-v2 {
26
21
  position: fixed;
27
22
  inset: 0px;
23
+ bottom: env(keyboard-inset-height, 0px);
24
+ margin-left: var(--size-8);
25
+ margin-right: var(--size-8);
26
+ margin-top: var(--size-64);
28
27
  display: flex;
29
28
  flex-direction: column;
30
29
  justify-content: flex-end;
31
- padding-left: var(--size-8);
32
- padding-right: var(--size-8);
33
- padding-top: var(--size-64);
34
30
  }
35
31
 
36
32
  .np-bottom-sheet-v2-content {
37
- max-height: 100%;
33
+ display: flex;
34
+ flex-direction: column;
35
+ overflow: auto;
36
+ border-top-left-radius: 32px; /* TODO: Tokenize */
37
+ border-top-right-radius: 32px; /* TODO: Tokenize */
38
+ background-color: var(--color-background-elevated);
39
+ box-shadow: 0 0 40px rgb(69 71 69 / 0.2);
40
+
41
+ &:focus {
42
+ outline: none;
43
+ }
38
44
 
39
- &--enter, &--leave {
45
+ @media (prefers-reduced-motion: no-preference) {
40
46
  transition-property: transform;
41
47
  transition-timing-function: ease-out;
42
48
  transition-duration: 300ms;
43
49
 
44
- @media (prefers-reduced-motion: reduce) {
45
- & {
46
- transition-property: opacity;
47
- }
50
+ &--closed {
51
+ transform: translateY(100%);
48
52
  }
49
53
  }
50
54
 
51
- &--enter-from, &--leave-to {
52
- @media (prefers-reduced-motion: no-preference) {
53
- & {
54
- transform: translateY(100%);
55
- }
56
- }
55
+ @media (prefers-reduced-motion: reduce) {
56
+ transition-property: opacity;
57
+ transition-timing-function: ease-out;
58
+ transition-duration: 300ms;
57
59
 
58
- @media (prefers-reduced-motion: reduce) {
59
- & {
60
- opacity: 0;
61
- }
60
+ &--closed {
61
+ opacity: 0;
62
62
  }
63
63
  }
64
64
  }
65
65
 
66
- .np-bottom-sheet-v2-content-inner-container {
67
- display: flex;
68
- height: 100%;
69
- flex-direction: column;
70
- border-top-left-radius: 32px; /* TODO: Tokenize */
71
- border-top-right-radius: 32px; /* TODO: Tokenize */
72
- background-color: var(--color-background-elevated);
73
- box-shadow: 0 0 40px rgb(69 71 69 / 0.2);
74
-
75
- &:focus {
76
- outline: none;
77
- }
78
- }
79
-
80
66
  .np-bottom-sheet-v2-header {
81
67
  align-self: flex-end;
82
68
  padding: var(--size-16);
83
69
  }
84
70
 
85
71
  .np-bottom-sheet-v2-content-inner {
86
- padding-top: 0px;
87
72
  display: grid;
73
+ grid-template-rows: minmax(0, 1fr);
88
74
  row-gap: var(--size-8);
89
- overflow-y: auto;
90
- grid-template-rows: repeat(1, minmax(0, 1fr));
75
+ overflow: auto;
91
76
 
92
77
  &--has-title {
93
- grid-template-rows: auto 1fr;
78
+ grid-template-rows: auto minmax(0, 1fr);
94
79
  }
95
80
 
96
81
  &--padding-md {
97
82
  padding: var(--size-16);
83
+ padding-top: 0px;
98
84
  }
99
85
  }
100
86
 
package/src/inputs/_BottomSheet.tsx CHANGED
@@ -10,9 +10,10 @@ import { Transition } from '@headlessui/react';
10
10
  import { FocusScope } from '@react-aria/focus';
11
11
  import { ThemeProvider, useTheme } from '@wise/components-theming';
12
12
  import classNames from 'classnames';
13
- import { useState } from 'react';
13
+ import { Fragment, useState } from 'react';
14
14
 
15
15
  import { CloseButton } from '../common/closeButton';
16
+ import { useVirtualKeyboard } from '../common/hooks/useVirtualKeyboard';
16
17
  import { PreventScroll } from '../common/preventScroll/PreventScroll';
17
18
  import { Size } from '../common/propsValues/size';
18
19
 
@@ -42,6 +43,8 @@ export function BottomSheet({
42
43
  onClose,
43
44
  onCloseEnd,
44
45
  }: BottomSheetProps) {
46
+ useVirtualKeyboard();
47
+
45
48
  const { refs, context } = useFloating<Element>({
46
49
  open,
47
50
  onOpenChange: (value) => {
@@ -82,28 +85,22 @@ export function BottomSheet({
82
85
  afterLeave={onCloseEnd}
83
86
  >
84
87
  <Transition.Child
85
- enter="np-bottom-sheet-v2-backdrop-container--enter"
86
- enterFrom="np-bottom-sheet-v2-backdrop-container--enter-from"
87
- leave="np-bottom-sheet-v2-backdrop-container--leave"
88
- leaveTo="np-bottom-sheet-v2-backdrop-container--leave-to"
89
- >
90
- <div className="np-bottom-sheet-v2-backdrop" />
91
- </Transition.Child>
88
+ className="np-bottom-sheet-v2-backdrop"
89
+ enterFrom="np-bottom-sheet-v2-backdrop--closed"
90
+ leaveTo="np-bottom-sheet-v2-backdrop--closed"
91
+ />
92
92
 
93
93
  <div className="np-bottom-sheet-v2">
94
- <Transition.Child
95
- className="np-bottom-sheet-v2-content"
96
- enter="np-bottom-sheet-v2-content--enter"
97
- enterFrom="np-bottom-sheet-v2-content--enter-from"
98
- leave="np-bottom-sheet-v2-content--leave"
99
- leaveTo="np-bottom-sheet-v2-content--leave-to"
100
- >
101
- <FocusScope>
102
- <FloatingFocusManager context={context} initialFocus={initialFocusRef}>
103
- <div
104
- key={floatingKey} // Force inner state invalidation on open
94
+ <FocusScope>
95
+ <FloatingFocusManager context={context} initialFocus={initialFocusRef}>
96
+ <Fragment
97
+ key={floatingKey} // Force inner state invalidation on open
98
+ >
99
+ <Transition.Child
105
100
  ref={refs.setFloating}
106
- className="np-bottom-sheet-v2-content-inner-container"
101
+ className="np-bottom-sheet-v2-content"
102
+ enterFrom="np-bottom-sheet-v2-content--closed"
103
+ leaveTo="np-bottom-sheet-v2-content--closed"
107
104
  {...getFloatingProps()}
108
105
  >
109
106
  <div className="np-bottom-sheet-v2-header">
@@ -118,9 +115,7 @@ export function BottomSheet({
118
115
  className={classNames(
119
116
  'np-bottom-sheet-v2-content-inner',
120
117
  title && 'np-bottom-sheet-v2-content-inner--has-title',
121
- {
122
- 'np-bottom-sheet-v2-content-inner--padding-md': padding === 'md',
123
- },
118
+ padding === 'md' && 'np-bottom-sheet-v2-content-inner--padding-md',
124
119
  )}
125
120
  >
126
121
  {title ? (
@@ -130,10 +125,10 @@ export function BottomSheet({
130
125
  {children}
131
126
  </div>
132
127
  </div>
133
- </div>
134
- </FloatingFocusManager>
135
- </FocusScope>
136
- </Transition.Child>
128
+ </Transition.Child>
129
+ </Fragment>
130
+ </FloatingFocusManager>
131
+ </FocusScope>
137
132
  </div>
138
133
  </Transition>
139
134
  </ThemeProvider>
package/src/inputs/_Popover.less CHANGED
@@ -26,10 +26,10 @@
26
26
  display: grid;
27
27
  row-gap: var(--size-8);
28
28
  overflow-y: auto;
29
- grid-template-rows: repeat(1, minmax(0, 1fr));
29
+ grid-template-rows: minmax(0, 1fr);
30
30
 
31
31
  &--has-title {
32
- grid-template-rows: auto 1fr;
32
+ grid-template-rows: auto minmax(0, 1fr);
33
33
  }
34
34
 
35
35
  &--padding-md {
package/src/main.css CHANGED
@@ -2400,67 +2400,37 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2400
2400
  position: relative;
2401
2401
  z-index: 1060;
2402
2402
  }
2403
- .np-bottom-sheet-v2-backdrop-container--enter,
2404
- .np-bottom-sheet-v2-backdrop-container--leave {
2405
- transition-property: opacity;
2406
- transition-timing-function: ease-out;
2407
- transition-duration: 300ms;
2408
- }
2409
- .np-bottom-sheet-v2-backdrop-container--enter-from,
2410
- .np-bottom-sheet-v2-backdrop-container--leave-to {
2411
- opacity: 0;
2412
- }
2413
2403
  .np-bottom-sheet-v2-backdrop {
2414
2404
  position: fixed;
2415
2405
  inset: 0px;
2416
2406
  background-color: #37517e;
2417
2407
  background-color: var(--color-content-primary);
2418
2408
  opacity: 0.4;
2409
+ transition-property: opacity;
2410
+ transition-timing-function: ease-out;
2411
+ transition-duration: 300ms;
2412
+ }
2413
+ .np-bottom-sheet-v2-backdrop--closed {
2414
+ opacity: 0;
2419
2415
  }
2420
2416
  .np-bottom-sheet-v2 {
2421
2417
  position: fixed;
2422
2418
  inset: 0px;
2419
+ bottom: env(keyboard-inset-height, 0px);
2420
+ margin-left: 8px;
2421
+ margin-left: var(--size-8);
2422
+ margin-right: 8px;
2423
+ margin-right: var(--size-8);
2424
+ margin-top: 64px;
2425
+ margin-top: var(--size-64);
2423
2426
  display: flex;
2424
2427
  flex-direction: column;
2425
2428
  justify-content: flex-end;
2426
- padding-left: 8px;
2427
- padding-left: var(--size-8);
2428
- padding-right: 8px;
2429
- padding-right: var(--size-8);
2430
- padding-top: 64px;
2431
- padding-top: var(--size-64);
2432
2429
  }
2433
2430
  .np-bottom-sheet-v2-content {
2434
- max-height: 100%;
2435
- }
2436
- .np-bottom-sheet-v2-content--enter,
2437
- .np-bottom-sheet-v2-content--leave {
2438
- transition-property: transform;
2439
- transition-timing-function: ease-out;
2440
- transition-duration: 300ms;
2441
- }
2442
- @media (prefers-reduced-motion: reduce) {
2443
- .np-bottom-sheet-v2-content--enter,
2444
- .np-bottom-sheet-v2-content--leave {
2445
- transition-property: opacity;
2446
- }
2447
- }
2448
- @media (prefers-reduced-motion: no-preference) {
2449
- .np-bottom-sheet-v2-content--enter-from,
2450
- .np-bottom-sheet-v2-content--leave-to {
2451
- transform: translateY(100%);
2452
- }
2453
- }
2454
- @media (prefers-reduced-motion: reduce) {
2455
- .np-bottom-sheet-v2-content--enter-from,
2456
- .np-bottom-sheet-v2-content--leave-to {
2457
- opacity: 0;
2458
- }
2459
- }
2460
- .np-bottom-sheet-v2-content-inner-container {
2461
2431
  display: flex;
2462
- height: 100%;
2463
2432
  flex-direction: column;
2433
+ overflow: auto;
2464
2434
  border-top-left-radius: 32px;
2465
2435
  /* TODO: Tokenize */
2466
2436
  border-top-right-radius: 32px;
@@ -2469,30 +2439,50 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2469
2439
  background-color: var(--color-background-elevated);
2470
2440
  box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
2471
2441
  }
2472
- .np-bottom-sheet-v2-content-inner-container:focus {
2442
+ .np-bottom-sheet-v2-content:focus {
2473
2443
  outline: none;
2474
2444
  }
2445
+ @media (prefers-reduced-motion: no-preference) {
2446
+ .np-bottom-sheet-v2-content {
2447
+ transition-property: transform;
2448
+ transition-timing-function: ease-out;
2449
+ transition-duration: 300ms;
2450
+ }
2451
+ .np-bottom-sheet-v2-content--closed {
2452
+ transform: translateY(100%);
2453
+ }
2454
+ }
2455
+ @media (prefers-reduced-motion: reduce) {
2456
+ .np-bottom-sheet-v2-content {
2457
+ transition-property: opacity;
2458
+ transition-timing-function: ease-out;
2459
+ transition-duration: 300ms;
2460
+ }
2461
+ .np-bottom-sheet-v2-content--closed {
2462
+ opacity: 0;
2463
+ }
2464
+ }
2475
2465
  .np-bottom-sheet-v2-header {
2476
2466
  align-self: flex-end;
2477
2467
  padding: 16px;
2478
2468
  padding: var(--size-16);
2479
2469
  }
2480
2470
  .np-bottom-sheet-v2-content-inner {
2481
- padding-top: 0px;
2482
2471
  display: grid;
2472
+ grid-template-rows: minmax(0, 1fr);
2483
2473
  grid-row-gap: 8px;
2484
2474
  grid-row-gap: var(--size-8);
2485
2475
  row-gap: 8px;
2486
2476
  row-gap: var(--size-8);
2487
- overflow-y: auto;
2488
- grid-template-rows: repeat(1, minmax(0, 1fr));
2477
+ overflow: auto;
2489
2478
  }
2490
2479
  .np-bottom-sheet-v2-content-inner--has-title {
2491
- grid-template-rows: auto 1fr;
2480
+ grid-template-rows: auto minmax(0, 1fr);
2492
2481
  }
2493
2482
  .np-bottom-sheet-v2-content-inner--padding-md {
2494
2483
  padding: 16px;
2495
2484
  padding: var(--size-16);
2485
+ padding-top: 0px;
2496
2486
  }
2497
2487
  .np-bottom-sheet-v2-title {
2498
2488
  color: #37517e;
@@ -2539,10 +2529,10 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2539
2529
  row-gap: 8px;
2540
2530
  row-gap: var(--size-8);
2541
2531
  overflow-y: auto;
2542
- grid-template-rows: repeat(1, minmax(0, 1fr));
2532
+ grid-template-rows: minmax(0, 1fr);
2543
2533
  }
2544
2534
  .np-popover-v2--has-title {
2545
- grid-template-rows: auto 1fr;
2535
+ grid-template-rows: auto minmax(0, 1fr);
2546
2536
  }
2547
2537
  .np-popover-v2--padding-md {
2548
2538
  padding: 16px;