@transferwise/components 0.0.0-experimental-8809019 → 0.0.0-experimental-45bc551
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/inputs/SelectInput.js +3 -4
- package/build/inputs/SelectInput.js.map +1 -1
- package/build/inputs/SelectInput.mjs +4 -5
- package/build/inputs/SelectInput.mjs.map +1 -1
- package/build/inputs/_BottomSheet.js +2 -5
- package/build/inputs/_BottomSheet.js.map +1 -1
- package/build/inputs/_BottomSheet.mjs +3 -6
- package/build/inputs/_BottomSheet.mjs.map +1 -1
- package/build/inputs/_Popover.js +0 -2
- package/build/inputs/_Popover.js.map +1 -1
- package/build/inputs/_Popover.mjs +0 -2
- package/build/inputs/_Popover.mjs.map +1 -1
- package/build/main.css +97 -77
- package/build/prompt/InlinePrompt/InlinePrompt.js +8 -10
- package/build/prompt/InlinePrompt/InlinePrompt.js.map +1 -1
- package/build/prompt/InlinePrompt/InlinePrompt.mjs +9 -11
- package/build/prompt/InlinePrompt/InlinePrompt.mjs.map +1 -1
- package/build/prompt/PrimitivePrompt/PrimitivePrompt.js +45 -0
- package/build/prompt/PrimitivePrompt/PrimitivePrompt.js.map +1 -0
- package/build/prompt/PrimitivePrompt/PrimitivePrompt.mjs +43 -0
- package/build/prompt/PrimitivePrompt/PrimitivePrompt.mjs.map +1 -0
- package/build/styles/main.css +97 -77
- package/build/styles/prompt/InlinePrompt/InlinePrompt.css +2 -23
- package/build/styles/prompt/PrimitivePrompt/PrimitivePrompt.css +41 -0
- package/build/types/inputs/SelectInput.d.ts.map +1 -1
- package/build/types/inputs/_BottomSheet.d.ts.map +1 -1
- package/build/types/inputs/_Popover.d.ts.map +1 -1
- package/build/types/prompt/InlinePrompt/InlinePrompt.d.ts +1 -1
- package/build/types/prompt/InlinePrompt/InlinePrompt.d.ts.map +1 -1
- package/build/types/prompt/PrimitivePrompt/PrimitivePrompt.d.ts +30 -0
- package/build/types/prompt/PrimitivePrompt/PrimitivePrompt.d.ts.map +1 -0
- package/build/types/prompt/PrimitivePrompt/index.d.ts +3 -0
- package/build/types/prompt/PrimitivePrompt/index.d.ts.map +1 -0
- package/package.json +10 -11
- package/src/alert/Alert.tests.story.tsx +1 -0
- package/src/button/_stories/Button.brightGreen.tests.story.tsx +1 -1
- package/src/button/_stories/Button.dark.tests.story.tsx +1 -1
- package/src/button/_stories/Button.default.tests.story.tsx +1 -1
- package/src/button/_stories/Button.forestGreen.tests.story.tsx +1 -1
- package/src/button/_stories/Button.tests.story.tsx +1 -1
- package/src/circularButton/CircularButton.tests.story.tsx +1 -0
- package/src/dateInput/DateInput.tests.story.tsx +1 -0
- package/src/dateLookup/DateLookup.tests.story.tsx +1 -0
- package/src/header/Header.tests.story.tsx +1 -1
- package/src/inputs/SelectInput.spec.tsx +7 -3
- package/src/inputs/SelectInput.tsx +8 -14
- package/src/inputs/_BottomSheet.tsx +4 -7
- package/src/inputs/_Popover.tsx +0 -2
- package/src/legacylistItem/LegacyListItem.tests.story.tsx +1 -1
- package/src/listItem/ListItem.spec.tsx +6 -8
- package/src/listItem/_stories/ListItem.focus.test.story.tsx +1 -1
- package/src/listItem/_stories/ListItem.layout.test.story.tsx +1 -1
- package/src/listItem/_stories/variants/ListItem.brightGreen.test.story.tsx +1 -1
- package/src/listItem/_stories/variants/ListItem.dark.test.story.tsx +1 -1
- package/src/listItem/_stories/variants/ListItem.forestGreen.test.story.tsx +1 -1
- package/src/listItem/_stories/variants/ListItem.medium.test.story.tsx +1 -1
- package/src/listItem/_stories/variants/ListItem.neutral.test.story.tsx +1 -1
- package/src/listItem/_stories/variants/ListItem.personal.test.story.tsx +1 -1
- package/src/listItem/_stories/variants/ListItem.rtl.test.story.tsx +1 -1
- package/src/listItem/_stories/variants/ListItem.small.test.story.tsx +1 -1
- package/src/main.css +97 -77
- package/src/main.less +2 -1
- package/src/moneyInput/MoneyInput.spec.tsx +7 -26
- package/src/prompt/InlinePrompt/InlinePrompt.css +2 -23
- package/src/prompt/InlinePrompt/InlinePrompt.less +3 -18
- package/src/prompt/InlinePrompt/InlinePrompt.spec.tsx +6 -6
- package/src/prompt/InlinePrompt/InlinePrompt.tsx +6 -7
- package/src/prompt/PrimitivePrompt/PrimitivePrompt.css +41 -0
- package/src/prompt/PrimitivePrompt/PrimitivePrompt.less +37 -0
- package/src/prompt/PrimitivePrompt/PrimitivePrompt.tsx +70 -0
- package/src/prompt/PrimitivePrompt/index.ts +2 -0
- package/src/radioGroup/RadioGroup.test.story.tsx +1 -1
- package/src/sentimentSurface/SentimentSurface.tests.story.tsx +1 -1
- package/src/snackbar/Snackbar.tests.story.tsx +1 -1
- package/src/stepper/Stepper.tests.story.tsx +1 -0
- package/src/summary/Summary.tests.story.tsx +1 -0
- package/src/title/Title.test.story.tsx +1 -0
- package/src/upload/Upload.tests.story.tsx +1 -0
- package/src/uploadInput/UploadInput.tests.story.tsx +1 -0
- package/src/withId/withId.story.tsx +1 -1
package/build/styles/main.css
CHANGED
|
@@ -920,83 +920,6 @@
|
|
|
920
920
|
.np-theme-personal .tw-avatar--outlined:not(.disabled):not(:disabled):hover {
|
|
921
921
|
border-color: var(--color-interactive-primary-hover);
|
|
922
922
|
}
|
|
923
|
-
.wds-inline-prompt {
|
|
924
|
-
display: inline-flex;
|
|
925
|
-
text-align: left;
|
|
926
|
-
padding-top: calc(8px / 2);
|
|
927
|
-
padding-top: calc(var(--padding-x-small) / 2);
|
|
928
|
-
padding-bottom: calc(8px / 2);
|
|
929
|
-
padding-bottom: calc(var(--padding-x-small) / 2);
|
|
930
|
-
padding-left: calc(8px - 1px);
|
|
931
|
-
padding-left: calc(var(--padding-x-small) - 1px);
|
|
932
|
-
padding-right: 8px;
|
|
933
|
-
padding-right: var(--padding-x-small);
|
|
934
|
-
border-radius: 10px;
|
|
935
|
-
border-radius: var(--radius-small);
|
|
936
|
-
word-break: break-word;
|
|
937
|
-
word-wrap: break-word;
|
|
938
|
-
}
|
|
939
|
-
.wds-inline-prompt:has(a),
|
|
940
|
-
.wds-inline-prompt:has(button) {
|
|
941
|
-
position: relative;
|
|
942
|
-
z-index: 1;
|
|
943
|
-
}
|
|
944
|
-
.wds-inline-prompt:has(a):hover,
|
|
945
|
-
.wds-inline-prompt:has(button):hover {
|
|
946
|
-
background-color: var(--color-sentiment-background-surface-hover);
|
|
947
|
-
}
|
|
948
|
-
.wds-inline-prompt:has(a):active,
|
|
949
|
-
.wds-inline-prompt:has(button):active {
|
|
950
|
-
background-color: var(--color-sentiment-background-surface-active);
|
|
951
|
-
}
|
|
952
|
-
.wds-inline-prompt--full-width {
|
|
953
|
-
width: 100%;
|
|
954
|
-
}
|
|
955
|
-
.wds-inline-prompt--muted {
|
|
956
|
-
opacity: 0.93;
|
|
957
|
-
filter: grayscale(1);
|
|
958
|
-
}
|
|
959
|
-
.wds-inline-prompt a,
|
|
960
|
-
.wds-inline-prompt button {
|
|
961
|
-
color: var(--color-sentiment-content-primary);
|
|
962
|
-
text-underline-offset: calc(4px / 2);
|
|
963
|
-
text-underline-offset: calc(var(--size-4) / 2);
|
|
964
|
-
}
|
|
965
|
-
.wds-inline-prompt a:hover,
|
|
966
|
-
.wds-inline-prompt button:hover {
|
|
967
|
-
color: var(--color-sentiment-content-primary-hover);
|
|
968
|
-
}
|
|
969
|
-
.wds-inline-prompt a:active,
|
|
970
|
-
.wds-inline-prompt button:active {
|
|
971
|
-
color: var(--color-sentiment-content-primary-active);
|
|
972
|
-
}
|
|
973
|
-
.wds-inline-prompt a:first-of-type:before,
|
|
974
|
-
.wds-inline-prompt button:first-of-type:before {
|
|
975
|
-
content: "";
|
|
976
|
-
position: absolute;
|
|
977
|
-
inset: 0;
|
|
978
|
-
}
|
|
979
|
-
.wds-inline-prompt__media-wrapper {
|
|
980
|
-
padding-right: calc(12px / 2);
|
|
981
|
-
padding-right: calc(var(--size-12) / 2);
|
|
982
|
-
padding-top: calc(4px - 1px);
|
|
983
|
-
padding-top: calc(var(--size-4) - 1px);
|
|
984
|
-
padding-bottom: calc(4px - 1px);
|
|
985
|
-
padding-bottom: calc(var(--size-4) - 1px);
|
|
986
|
-
}
|
|
987
|
-
.wds-inline-prompt__media-wrapper .tw-icon-tags,
|
|
988
|
-
.wds-inline-prompt__media-wrapper .tw-icon-confetti {
|
|
989
|
-
color: var(--color-sentiment-content-primary);
|
|
990
|
-
}
|
|
991
|
-
.wds-inline-prompt .wds-inline-prompt-process-indicator {
|
|
992
|
-
width: 16px;
|
|
993
|
-
width: var(--size-16);
|
|
994
|
-
height: 16px;
|
|
995
|
-
height: var(--size-16);
|
|
996
|
-
}
|
|
997
|
-
.wds-inline-prompt .wds-inline-prompt-process-indicator .process-circle {
|
|
998
|
-
stroke: currentColor;
|
|
999
|
-
}
|
|
1000
923
|
.np-dot {
|
|
1001
924
|
--np-dot-size: 14px;
|
|
1002
925
|
position: relative;
|
|
@@ -5412,6 +5335,103 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
5412
5335
|
.np-CardGroup .np-Card.np-Card--promoCard {
|
|
5413
5336
|
max-width: 100%;
|
|
5414
5337
|
}
|
|
5338
|
+
.wds-prompt {
|
|
5339
|
+
border-radius: 10px;
|
|
5340
|
+
border-radius: var(--radius-small);
|
|
5341
|
+
display: flex;
|
|
5342
|
+
word-wrap: break-word;
|
|
5343
|
+
padding: 8px;
|
|
5344
|
+
padding: var(--Prompt-padding, var(--padding-x-small));
|
|
5345
|
+
text-align: left;
|
|
5346
|
+
word-break: break-word;
|
|
5347
|
+
}
|
|
5348
|
+
.wds-prompt__content-wrapper {
|
|
5349
|
+
display: grid;
|
|
5350
|
+
grid-gap: 16px;
|
|
5351
|
+
grid-gap: var(--Prompt-gap, var(--size-16));
|
|
5352
|
+
gap: 16px;
|
|
5353
|
+
gap: var(--Prompt-gap, var(--size-16));
|
|
5354
|
+
grid-template-columns: auto 1fr;
|
|
5355
|
+
width: 100%;
|
|
5356
|
+
}
|
|
5357
|
+
.wds-prompt__media-wrapper {
|
|
5358
|
+
align-self: flex-start;
|
|
5359
|
+
padding-top: calc(4px - 1px);
|
|
5360
|
+
padding-top: calc(var(--size-4) - 1px);
|
|
5361
|
+
}
|
|
5362
|
+
.wds-prompt__media-wrapper .tw-icon-tags,
|
|
5363
|
+
.wds-prompt__media-wrapper .tw-icon-confetti {
|
|
5364
|
+
color: var(--color-sentiment-content-primary);
|
|
5365
|
+
}
|
|
5366
|
+
.wds-prompt__actions-wrapper {
|
|
5367
|
+
display: flex;
|
|
5368
|
+
flex-wrap: wrap;
|
|
5369
|
+
gap: 8px;
|
|
5370
|
+
gap: var(--Prompt-actions-gap, var(--size-8));
|
|
5371
|
+
grid-column-start: 2;
|
|
5372
|
+
}
|
|
5373
|
+
@media (max-width: 991px) {
|
|
5374
|
+
.wds-prompt__actions-wrapper {
|
|
5375
|
+
grid-column: span 2;
|
|
5376
|
+
width: 100%;
|
|
5377
|
+
}
|
|
5378
|
+
}
|
|
5379
|
+
.wds-inline-prompt {
|
|
5380
|
+
--Prompt-gap: calc(var(--size-12) / 2);
|
|
5381
|
+
--Prompt-padding: calc(var(--padding-x-small) / 2) var(--padding-x-small);
|
|
5382
|
+
display: inline-flex;
|
|
5383
|
+
border-radius: 10px;
|
|
5384
|
+
border-radius: var(--radius-small);
|
|
5385
|
+
}
|
|
5386
|
+
.wds-inline-prompt:has(a),
|
|
5387
|
+
.wds-inline-prompt:has(button) {
|
|
5388
|
+
position: relative;
|
|
5389
|
+
z-index: 1;
|
|
5390
|
+
}
|
|
5391
|
+
.wds-inline-prompt:has(a):hover,
|
|
5392
|
+
.wds-inline-prompt:has(button):hover {
|
|
5393
|
+
background-color: var(--color-sentiment-background-surface-hover);
|
|
5394
|
+
}
|
|
5395
|
+
.wds-inline-prompt:has(a):active,
|
|
5396
|
+
.wds-inline-prompt:has(button):active {
|
|
5397
|
+
background-color: var(--color-sentiment-background-surface-active);
|
|
5398
|
+
}
|
|
5399
|
+
.wds-inline-prompt--full-width {
|
|
5400
|
+
width: 100%;
|
|
5401
|
+
}
|
|
5402
|
+
.wds-inline-prompt--muted {
|
|
5403
|
+
opacity: 0.93;
|
|
5404
|
+
filter: grayscale(1);
|
|
5405
|
+
}
|
|
5406
|
+
.wds-inline-prompt a,
|
|
5407
|
+
.wds-inline-prompt button {
|
|
5408
|
+
color: var(--color-sentiment-content-primary);
|
|
5409
|
+
text-underline-offset: calc(4px / 2);
|
|
5410
|
+
text-underline-offset: calc(var(--size-4) / 2);
|
|
5411
|
+
}
|
|
5412
|
+
.wds-inline-prompt a:hover,
|
|
5413
|
+
.wds-inline-prompt button:hover {
|
|
5414
|
+
color: var(--color-sentiment-content-primary-hover);
|
|
5415
|
+
}
|
|
5416
|
+
.wds-inline-prompt a:active,
|
|
5417
|
+
.wds-inline-prompt button:active {
|
|
5418
|
+
color: var(--color-sentiment-content-primary-active);
|
|
5419
|
+
}
|
|
5420
|
+
.wds-inline-prompt a:first-of-type:before,
|
|
5421
|
+
.wds-inline-prompt button:first-of-type:before {
|
|
5422
|
+
content: "";
|
|
5423
|
+
position: absolute;
|
|
5424
|
+
inset: 0;
|
|
5425
|
+
}
|
|
5426
|
+
.wds-inline-prompt .wds-inline-prompt-process-indicator {
|
|
5427
|
+
width: 16px;
|
|
5428
|
+
width: var(--size-16);
|
|
5429
|
+
height: 16px;
|
|
5430
|
+
height: var(--size-16);
|
|
5431
|
+
}
|
|
5432
|
+
.wds-inline-prompt .wds-inline-prompt-process-indicator .process-circle {
|
|
5433
|
+
stroke: currentColor;
|
|
5434
|
+
}
|
|
5415
5435
|
.wds-radio-group .np-radio:last-child label {
|
|
5416
5436
|
margin-bottom: 0;
|
|
5417
5437
|
}
|
|
@@ -1,18 +1,9 @@
|
|
|
1
1
|
.wds-inline-prompt {
|
|
2
|
+
--Prompt-gap: calc(var(--size-12) / 2);
|
|
3
|
+
--Prompt-padding: calc(var(--padding-x-small) / 2) var(--padding-x-small);
|
|
2
4
|
display: inline-flex;
|
|
3
|
-
text-align: left;
|
|
4
|
-
padding-top: calc(8px / 2);
|
|
5
|
-
padding-top: calc(var(--padding-x-small) / 2);
|
|
6
|
-
padding-bottom: calc(8px / 2);
|
|
7
|
-
padding-bottom: calc(var(--padding-x-small) / 2);
|
|
8
|
-
padding-left: calc(8px - 1px);
|
|
9
|
-
padding-left: calc(var(--padding-x-small) - 1px);
|
|
10
|
-
padding-right: 8px;
|
|
11
|
-
padding-right: var(--padding-x-small);
|
|
12
5
|
border-radius: 10px;
|
|
13
6
|
border-radius: var(--radius-small);
|
|
14
|
-
word-break: break-word;
|
|
15
|
-
word-wrap: break-word;
|
|
16
7
|
}
|
|
17
8
|
.wds-inline-prompt:has(a),
|
|
18
9
|
.wds-inline-prompt:has(button) {
|
|
@@ -54,18 +45,6 @@
|
|
|
54
45
|
position: absolute;
|
|
55
46
|
inset: 0;
|
|
56
47
|
}
|
|
57
|
-
.wds-inline-prompt__media-wrapper {
|
|
58
|
-
padding-right: calc(12px / 2);
|
|
59
|
-
padding-right: calc(var(--size-12) / 2);
|
|
60
|
-
padding-top: calc(4px - 1px);
|
|
61
|
-
padding-top: calc(var(--size-4) - 1px);
|
|
62
|
-
padding-bottom: calc(4px - 1px);
|
|
63
|
-
padding-bottom: calc(var(--size-4) - 1px);
|
|
64
|
-
}
|
|
65
|
-
.wds-inline-prompt__media-wrapper .tw-icon-tags,
|
|
66
|
-
.wds-inline-prompt__media-wrapper .tw-icon-confetti {
|
|
67
|
-
color: var(--color-sentiment-content-primary);
|
|
68
|
-
}
|
|
69
48
|
.wds-inline-prompt .wds-inline-prompt-process-indicator {
|
|
70
49
|
width: 16px;
|
|
71
50
|
width: var(--size-16);
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
.wds-prompt {
|
|
2
|
+
border-radius: 10px;
|
|
3
|
+
border-radius: var(--radius-small);
|
|
4
|
+
display: flex;
|
|
5
|
+
word-wrap: break-word;
|
|
6
|
+
padding: 8px;
|
|
7
|
+
padding: var(--Prompt-padding, var(--padding-x-small));
|
|
8
|
+
text-align: left;
|
|
9
|
+
word-break: break-word;
|
|
10
|
+
}
|
|
11
|
+
.wds-prompt__content-wrapper {
|
|
12
|
+
display: grid;
|
|
13
|
+
grid-gap: 16px;
|
|
14
|
+
grid-gap: var(--Prompt-gap, var(--size-16));
|
|
15
|
+
gap: 16px;
|
|
16
|
+
gap: var(--Prompt-gap, var(--size-16));
|
|
17
|
+
grid-template-columns: auto 1fr;
|
|
18
|
+
width: 100%;
|
|
19
|
+
}
|
|
20
|
+
.wds-prompt__media-wrapper {
|
|
21
|
+
align-self: flex-start;
|
|
22
|
+
padding-top: calc(4px - 1px);
|
|
23
|
+
padding-top: calc(var(--size-4) - 1px);
|
|
24
|
+
}
|
|
25
|
+
.wds-prompt__media-wrapper .tw-icon-tags,
|
|
26
|
+
.wds-prompt__media-wrapper .tw-icon-confetti {
|
|
27
|
+
color: var(--color-sentiment-content-primary);
|
|
28
|
+
}
|
|
29
|
+
.wds-prompt__actions-wrapper {
|
|
30
|
+
display: flex;
|
|
31
|
+
flex-wrap: wrap;
|
|
32
|
+
gap: 8px;
|
|
33
|
+
gap: var(--Prompt-actions-gap, var(--size-8));
|
|
34
|
+
grid-column-start: 2;
|
|
35
|
+
}
|
|
36
|
+
@media (max-width: 991px) {
|
|
37
|
+
.wds-prompt__actions-wrapper {
|
|
38
|
+
grid-column: span 2;
|
|
39
|
+
width: 100%;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../src/inputs/SelectInput.tsx"],"names":[],"mappings":"
|
|
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":"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,+
|
|
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,+BAyFlB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"_Popover.d.ts","sourceRoot":"","sources":["../../../src/inputs/_Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,SAAS,EAOf,MAAM,oBAAoB,CAAC;AAS5B,MAAM,WAAW,YAAY;IAC3B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,IAAI,EAAE,OAAO,CAAC;IACd,aAAa,EAAE,CAAC,IAAI,EAAE;QACpB,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,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,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;AAID,wBAAgB,OAAO,CAAC,EACtB,SAAS,EACT,IAAI,EACJ,aAAa,EACb,KAAK,EACL,IAAW,EACX,OAAc,EACd,QAAQ,EACR,OAAO,EACP,UAAU,GACX,EAAE,YAAY,+
|
|
1
|
+
{"version":3,"file":"_Popover.d.ts","sourceRoot":"","sources":["../../../src/inputs/_Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,SAAS,EAOf,MAAM,oBAAoB,CAAC;AAS5B,MAAM,WAAW,YAAY;IAC3B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,IAAI,EAAE,OAAO,CAAC;IACd,aAAa,EAAE,CAAC,IAAI,EAAE;QACpB,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,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,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;AAID,wBAAgB,OAAO,CAAC,EACtB,SAAS,EACT,IAAI,EACJ,aAAa,EACb,KAAK,EACL,IAAW,EACX,OAAc,EACd,QAAQ,EACR,OAAO,EACP,UAAU,GACX,EAAE,YAAY,+BAiFd"}
|
|
@@ -40,5 +40,5 @@ export type InlinePromptProps = {
|
|
|
40
40
|
*
|
|
41
41
|
* **NB:** It should be used in favour of `InlineAlert` which will be soon deprecated.
|
|
42
42
|
*/
|
|
43
|
-
export declare const InlinePrompt: ({ sentiment, muted, loading, className, children, media, mediaLabel, width, "data-testid": dataTestId, ...
|
|
43
|
+
export declare const InlinePrompt: ({ sentiment, muted, loading, className, children, media, mediaLabel, width, "data-testid": dataTestId, ...restProps }: InlinePromptProps) => import("react").JSX.Element;
|
|
44
44
|
//# sourceMappingURL=InlinePrompt.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InlinePrompt.d.ts","sourceRoot":"","sources":["../../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAQzC,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;OAEG;IACH,SAAS,CAAC,EACN,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,OAAO,EAAE,GACpF,aAAa,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,YAAY,GAAI,
|
|
1
|
+
{"version":3,"file":"InlinePrompt.d.ts","sourceRoot":"","sources":["../../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAQzC,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;OAEG;IACH,SAAS,CAAC,EACN,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,OAAO,EAAE,GACpF,aAAa,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,YAAY,GAAI,uHAW1B,iBAAiB,gCA4CnB,CAAC"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { Sentiment } from '../../sentimentSurface';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
export type PrimitivePromptProps = {
|
|
4
|
+
/**
|
|
5
|
+
* The sentiment determines the colour scheme
|
|
6
|
+
* @default success
|
|
7
|
+
*/
|
|
8
|
+
sentiment?: Sentiment;
|
|
9
|
+
/**
|
|
10
|
+
* Media to be displayed on the prompt (icon/image/etc).
|
|
11
|
+
*/
|
|
12
|
+
media: ReactNode;
|
|
13
|
+
/**
|
|
14
|
+
* Any actions to be displayed on the prompt.
|
|
15
|
+
*/
|
|
16
|
+
actions?: ReactNode;
|
|
17
|
+
/**
|
|
18
|
+
* Handler called when the close button is clicked. If not provided, then the close button is hidden.
|
|
19
|
+
*/
|
|
20
|
+
onDismiss?: () => void;
|
|
21
|
+
id?: string;
|
|
22
|
+
className?: string;
|
|
23
|
+
'data-testid'?: string;
|
|
24
|
+
children: ReactNode;
|
|
25
|
+
};
|
|
26
|
+
/**
|
|
27
|
+
* PrimitivePrompt is a low-level component that provides the structure, sentiment support and styling for various prompts.
|
|
28
|
+
* Uses several css variables to handle styling from within the consuming component, e.g. --Prompt-padding. */
|
|
29
|
+
export declare const PrimitivePrompt: ({ sentiment, media, actions, onDismiss, className, children, ...restProps }: PrimitivePromptProps) => import("react").JSX.Element;
|
|
30
|
+
//# sourceMappingURL=PrimitivePrompt.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PrimitivePrompt.d.ts","sourceRoot":"","sources":["../../../../src/prompt/PrimitivePrompt/PrimitivePrompt.tsx"],"names":[],"mappings":"AAEA,OAAyB,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAIrE,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,MAAM,oBAAoB,GAAG;IACjC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF;;8GAE8G;AAC9G,eAAO,MAAM,eAAe,GAAI,6EAQ7B,oBAAoB,gCA0BtB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/prompt/PrimitivePrompt/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "0.0.0-experimental-
|
|
3
|
+
"version": "0.0.0-experimental-45bc551",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -49,14 +49,14 @@
|
|
|
49
49
|
"@rollup/plugin-node-resolve": "^16.0.3",
|
|
50
50
|
"@rollup/plugin-typescript": "^12.3.0",
|
|
51
51
|
"@rollup/plugin-url": "^8.0.2",
|
|
52
|
-
"@storybook/addon-a11y": "^10.
|
|
53
|
-
"@storybook/addon-docs": "^10.
|
|
54
|
-
"@storybook/addon-mcp": "^0.
|
|
52
|
+
"@storybook/addon-a11y": "^10.3.0-alpha.0",
|
|
53
|
+
"@storybook/addon-docs": "^10.3.0-alpha.0",
|
|
54
|
+
"@storybook/addon-mcp": "^0.2.2",
|
|
55
55
|
"@storybook/addon-webpack5-compiler-babel": "^4.0.0",
|
|
56
|
-
"@storybook/react-webpack5": "10.
|
|
56
|
+
"@storybook/react-webpack5": "10.3.0-alpha.0",
|
|
57
57
|
"@testing-library/dom": "^10.4.1",
|
|
58
58
|
"@testing-library/jest-dom": "^6.9.1",
|
|
59
|
-
"@testing-library/react": "^16.3.
|
|
59
|
+
"@testing-library/react": "^16.3.1",
|
|
60
60
|
"@testing-library/user-event": "^14.6.1",
|
|
61
61
|
"@transferwise/icons": "^4.0.2",
|
|
62
62
|
"@tsconfig/recommended": "^1.0.13",
|
|
@@ -73,21 +73,20 @@
|
|
|
73
73
|
"@wise/eslint-config": "^13.3.0",
|
|
74
74
|
"babel-plugin-formatjs": "^10.5.39",
|
|
75
75
|
"eslint": "^9.39.2",
|
|
76
|
-
"eslint-plugin-storybook": "^10.
|
|
76
|
+
"eslint-plugin-storybook": "^10.3.0-alpha.0",
|
|
77
77
|
"gulp": "^5.0.1",
|
|
78
78
|
"jest": "^30.2.0",
|
|
79
79
|
"jest-environment-jsdom": "^29.7.0",
|
|
80
80
|
"jest-fetch-mock": "^3.0.3",
|
|
81
|
-
"jsdom-testing-mocks": "^1.16.0",
|
|
82
81
|
"lodash.times": "^4.3.2",
|
|
83
82
|
"react-intl": "^7.1.11",
|
|
84
83
|
"rollup": "^4.54.0",
|
|
85
84
|
"rollup-preserve-directives": "^1.1.3",
|
|
86
|
-
"storybook": "^10.
|
|
85
|
+
"storybook": "^10.3.0-alpha.0",
|
|
87
86
|
"storybook-addon-tag-badges": "^3.0.4",
|
|
88
87
|
"storybook-addon-test-codegen": "^3.0.1",
|
|
89
|
-
"@transferwise/less-config": "3.1.2",
|
|
90
88
|
"@transferwise/neptune-css": "14.26.1",
|
|
89
|
+
"@transferwise/less-config": "3.1.2",
|
|
91
90
|
"@wise/components-theming": "1.10.1",
|
|
92
91
|
"@wise/wds-configs": "0.0.0"
|
|
93
92
|
},
|
|
@@ -104,7 +103,7 @@
|
|
|
104
103
|
"dependencies": {
|
|
105
104
|
"@babel/runtime": "^7.28.4",
|
|
106
105
|
"@floating-ui/react": "^0.27.16",
|
|
107
|
-
"@headlessui/react": "^
|
|
106
|
+
"@headlessui/react": "^1.7.19",
|
|
108
107
|
"@popperjs/core": "^2.11.8",
|
|
109
108
|
"@react-aria/focus": "^3.21.3",
|
|
110
109
|
"@react-aria/overlays": "^3.31.0",
|
|
@@ -1,15 +1,19 @@
|
|
|
1
1
|
import { screen, waitFor, within } from '@testing-library/react';
|
|
2
2
|
import { userEvent } from '@testing-library/user-event';
|
|
3
|
-
import { mockAnimationsApi } from 'jsdom-testing-mocks';
|
|
4
3
|
|
|
5
|
-
import {
|
|
4
|
+
import {
|
|
5
|
+
render,
|
|
6
|
+
mockMatchMedia,
|
|
7
|
+
mockResizeObserver,
|
|
8
|
+
mockRequestAnimationFrame,
|
|
9
|
+
} from '../test-utils';
|
|
6
10
|
|
|
7
11
|
import { SelectInput, type SelectInputOptionItem, type SelectInputProps } from './SelectInput';
|
|
8
12
|
import { Field } from '../field/Field';
|
|
9
13
|
|
|
10
14
|
mockMatchMedia();
|
|
11
15
|
mockResizeObserver();
|
|
12
|
-
|
|
16
|
+
mockRequestAnimationFrame();
|
|
13
17
|
|
|
14
18
|
describe('SelectInput', () => {
|
|
15
19
|
it('renders placeholder', () => {
|
|
@@ -1,9 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
Listbox as ListboxBase,
|
|
3
|
-
ListboxButton,
|
|
4
|
-
ListboxOption,
|
|
5
|
-
ListboxOptions,
|
|
6
|
-
} from '@headlessui/react';
|
|
1
|
+
import { Listbox as ListboxBase } from '@headlessui/react';
|
|
7
2
|
import { Check, ChevronDown, Cross, CrossCircle } from '@transferwise/icons';
|
|
8
3
|
import { clsx } from 'clsx';
|
|
9
4
|
import mergeProps from 'merge-props';
|
|
@@ -394,8 +389,8 @@ export function SelectInput<T = string, M extends boolean = false>({
|
|
|
394
389
|
<ListboxBase
|
|
395
390
|
name={name}
|
|
396
391
|
multiple={multiple}
|
|
397
|
-
defaultValue={defaultValue
|
|
398
|
-
value={controlledValue
|
|
392
|
+
defaultValue={defaultValue}
|
|
393
|
+
value={controlledValue}
|
|
399
394
|
by={compareValues}
|
|
400
395
|
disabled={disabled}
|
|
401
396
|
onChange={
|
|
@@ -542,7 +537,7 @@ export function SelectInputTriggerButton<T extends SelectInputTriggerButtonEleme
|
|
|
542
537
|
);
|
|
543
538
|
|
|
544
539
|
return (
|
|
545
|
-
<
|
|
540
|
+
<ListboxBase.Button
|
|
546
541
|
ref={ref}
|
|
547
542
|
as={PolymorphicWithOverrides}
|
|
548
543
|
role="combobox"
|
|
@@ -771,8 +766,7 @@ function SelectInputOptions<T = string>({
|
|
|
771
766
|
};
|
|
772
767
|
|
|
773
768
|
return (
|
|
774
|
-
<
|
|
775
|
-
modal
|
|
769
|
+
<ListboxBase.Options
|
|
776
770
|
as={SelectInputOptionsContainer}
|
|
777
771
|
static
|
|
778
772
|
className="np-select-input-options-container"
|
|
@@ -929,7 +923,7 @@ function SelectInputOptions<T = string>({
|
|
|
929
923
|
</footer>
|
|
930
924
|
) : null}
|
|
931
925
|
</section>
|
|
932
|
-
</
|
|
926
|
+
</ListboxBase.Options>
|
|
933
927
|
);
|
|
934
928
|
}
|
|
935
929
|
|
|
@@ -1038,7 +1032,7 @@ function SelectInputOption<T = string>({ value, disabled, children }: SelectInpu
|
|
|
1038
1032
|
const itemsCount = useContext(SelectInputItemsCountContext);
|
|
1039
1033
|
const itemPosition = useContext(SelectInputItemPositionContext);
|
|
1040
1034
|
return (
|
|
1041
|
-
<
|
|
1035
|
+
<ListboxBase.Option
|
|
1042
1036
|
as="div"
|
|
1043
1037
|
value={value}
|
|
1044
1038
|
aria-setsize={itemsCount}
|
|
@@ -1064,7 +1058,7 @@ function SelectInputOption<T = string>({ value, disabled, children }: SelectInpu
|
|
|
1064
1058
|
/>
|
|
1065
1059
|
</>
|
|
1066
1060
|
)}
|
|
1067
|
-
</
|
|
1061
|
+
</ListboxBase.Option>
|
|
1068
1062
|
);
|
|
1069
1063
|
}
|
|
1070
1064
|
|
|
@@ -6,7 +6,7 @@ import {
|
|
|
6
6
|
useInteractions,
|
|
7
7
|
useRole,
|
|
8
8
|
} from '@floating-ui/react';
|
|
9
|
-
import { Transition
|
|
9
|
+
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 { clsx } from 'clsx';
|
|
@@ -73,7 +73,6 @@ export function BottomSheet({
|
|
|
73
73
|
<FloatingPortal>
|
|
74
74
|
<ThemeProvider theme="personal" screenMode={theme === 'personal' ? screenMode : 'light'}>
|
|
75
75
|
<Transition
|
|
76
|
-
as="div"
|
|
77
76
|
show={open}
|
|
78
77
|
className="np-bottom-sheet-v2-container"
|
|
79
78
|
beforeEnter={() => {
|
|
@@ -81,8 +80,7 @@ export function BottomSheet({
|
|
|
81
80
|
}}
|
|
82
81
|
afterLeave={onCloseEnd}
|
|
83
82
|
>
|
|
84
|
-
<
|
|
85
|
-
as="div"
|
|
83
|
+
<Transition.Child
|
|
86
84
|
className="np-bottom-sheet-v2-backdrop"
|
|
87
85
|
enterFrom="np-bottom-sheet-v2-backdrop--closed"
|
|
88
86
|
leaveTo="np-bottom-sheet-v2-backdrop--closed"
|
|
@@ -94,9 +92,8 @@ export function BottomSheet({
|
|
|
94
92
|
<Fragment
|
|
95
93
|
key={floatingKey} // Force inner state invalidation on open
|
|
96
94
|
>
|
|
97
|
-
<
|
|
95
|
+
<Transition.Child
|
|
98
96
|
ref={refs.setFloating}
|
|
99
|
-
as="div"
|
|
100
97
|
className="np-bottom-sheet-v2-content"
|
|
101
98
|
enterFrom="np-bottom-sheet-v2-content--closed"
|
|
102
99
|
leaveTo="np-bottom-sheet-v2-content--closed"
|
|
@@ -124,7 +121,7 @@ export function BottomSheet({
|
|
|
124
121
|
{children}
|
|
125
122
|
</div>
|
|
126
123
|
</div>
|
|
127
|
-
</
|
|
124
|
+
</Transition.Child>
|
|
128
125
|
</Fragment>
|
|
129
126
|
</FloatingFocusManager>
|
|
130
127
|
</FocusScope>
|