@transferwise/components 46.42.0 → 46.43.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.
- package/build/index.js +73 -40
- package/build/index.js.map +1 -1
- package/build/index.mjs +74 -41
- package/build/index.mjs.map +1 -1
- package/build/main.css +41 -51
- package/build/styles/inputs/SelectInput.css +41 -51
- package/build/styles/main.css +41 -51
- package/build/types/common/hooks/useVirtualKeyboard.d.ts +7 -0
- package/build/types/common/hooks/useVirtualKeyboard.d.ts.map +1 -0
- package/build/types/inputs/InputGroup.d.ts.map +1 -1
- package/build/types/inputs/SelectInput.d.ts +3 -1
- package/build/types/inputs/SelectInput.d.ts.map +1 -1
- package/build/types/inputs/_BottomSheet.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/circularButton/CircularButton.story.tsx +53 -84
- package/src/common/hooks/useVirtualKeyboard.ts +21 -0
- package/src/inputs/InputGroup.spec.tsx +26 -0
- package/src/inputs/InputGroup.tsx +35 -13
- package/src/inputs/SearchInput.spec.tsx +16 -0
- package/src/inputs/SelectInput.css +41 -51
- package/src/inputs/SelectInput.spec.tsx +1 -1
- package/src/inputs/SelectInput.tsx +4 -1
- package/src/inputs/_BottomSheet.less +35 -49
- package/src/inputs/_BottomSheet.tsx +22 -27
- package/src/inputs/_Popover.less +2 -2
- package/src/main.css +41 -51
package/build/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
|
|
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
|
|
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:
|
|
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;
|
|
@@ -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
|
|
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
|
|
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:
|
|
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/build/styles/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
|
|
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
|
|
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:
|
|
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;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* This progressive enhancement uses an experimental API, it might change,
|
|
3
|
+
* and at the time of authoring is not supported on iOS or mobile Firefox.
|
|
4
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/API/VirtualKeyboard
|
|
5
|
+
*/
|
|
6
|
+
export declare function useVirtualKeyboard(): void;
|
|
7
|
+
//# sourceMappingURL=useVirtualKeyboard.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useVirtualKeyboard.d.ts","sourceRoot":"","sources":["../../../../src/common/hooks/useVirtualKeyboard.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,wBAAgB,kBAAkB,SAajC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputGroup.d.ts","sourceRoot":"","sources":["../../../src/inputs/InputGroup.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"InputGroup.d.ts","sourceRoot":"","sources":["../../../src/inputs/InputGroup.tsx"],"names":[],"mappings":"AAsBA,wBAAgB,gBAAgB;;;EAQ/B;AAED,UAAU,eAAe;IACvB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,mBAAmB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;CAChC;AAED,MAAM,WAAW,eAAe;IAC9B,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAiBD,wBAAgB,UAAU,CAAC,EACzB,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,QAAQ,GACT,EAAE,eAAe,+BAkCjB"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { Merge } from '../utils';
|
|
2
|
+
import { WithInputAttributesProps } from './contexts';
|
|
2
3
|
export interface SelectInputOptionItem<T = string> {
|
|
3
4
|
type: 'option';
|
|
4
5
|
value: T;
|
|
@@ -41,6 +42,7 @@ export interface SelectInputProps<T = string, M extends boolean = false> {
|
|
|
41
42
|
disabled?: boolean;
|
|
42
43
|
size?: 'sm' | 'md' | 'lg';
|
|
43
44
|
className?: string;
|
|
45
|
+
UNSAFE_triggerButtonProps?: WithInputAttributesProps['inputAttributes'];
|
|
44
46
|
onFilterChange?: (args: {
|
|
45
47
|
query: string;
|
|
46
48
|
queryNormalized: string | null;
|
|
@@ -49,7 +51,7 @@ export interface SelectInputProps<T = string, M extends boolean = false> {
|
|
|
49
51
|
onClose?: () => void;
|
|
50
52
|
onClear?: () => void;
|
|
51
53
|
}
|
|
52
|
-
export declare function SelectInput<T = string, M extends boolean = false>({ id: idProp, name, multiple, placeholder, items, defaultValue, value: controlledValue, compareValues, renderValue, renderFooter, renderTrigger, filterable, filterPlaceholder, disabled, size, className, onFilterChange, onChange, onClose, onClear, }: SelectInputProps<T, M>): import("react").JSX.Element;
|
|
54
|
+
export declare function SelectInput<T = string, M extends boolean = false>({ id: idProp, name, multiple, placeholder, items, defaultValue, value: controlledValue, compareValues, renderValue, renderFooter, renderTrigger, filterable, filterPlaceholder, disabled, size, className, UNSAFE_triggerButtonProps, onFilterChange, onChange, onClose, onClear, }: SelectInputProps<T, M>): import("react").JSX.Element;
|
|
53
55
|
type SelectInputTriggerButtonElementType = 'button' | React.ComponentType;
|
|
54
56
|
export type SelectInputTriggerButtonProps<T extends SelectInputTriggerButtonElementType = 'button'> = Merge<React.ComponentPropsWithoutRef<T>, {
|
|
55
57
|
as?: T;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../src/inputs/SelectInput.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../src/inputs/SelectInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"_BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/inputs/_BottomSheet.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"_BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/inputs/_BottomSheet.tsx"],"names":[],"mappings":"AAmBA,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE;QACrB,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAChC,mBAAmB,EAAE,CAAC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK;YACvE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;SACxB,CAAC;KACH,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC7D,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,aAAa,EACb,KAAK,EACL,eAAe,EACf,OAAc,EACd,QAAQ,EACR,OAAO,EACP,UAAU,GACX,EAAE,gBAAgB,+BA6FlB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "46.
|
|
3
|
+
"version": "46.43.0",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -93,8 +93,8 @@
|
|
|
93
93
|
"rollup": "^4.17.2",
|
|
94
94
|
"storybook": "^8.1.10",
|
|
95
95
|
"@transferwise/less-config": "3.1.0",
|
|
96
|
-
"@
|
|
97
|
-
"@
|
|
96
|
+
"@wise/components-theming": "1.3.0",
|
|
97
|
+
"@transferwise/neptune-css": "14.12.0"
|
|
98
98
|
},
|
|
99
99
|
"peerDependencies": {
|
|
100
100
|
"@transferwise/icons": "^3.7.0",
|