@transferwise/components 0.0.0-experimental-973eefd → 0.0.0-experimental-9186c2a

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 (130) hide show
  1. package/build/common/bottomSheet/BottomSheet.js +3 -0
  2. package/build/common/bottomSheet/BottomSheet.js.map +1 -1
  3. package/build/common/bottomSheet/BottomSheet.mjs +4 -1
  4. package/build/common/bottomSheet/BottomSheet.mjs.map +1 -1
  5. package/build/common/panel/Panel.js +3 -0
  6. package/build/common/panel/Panel.js.map +1 -1
  7. package/build/common/panel/Panel.mjs +4 -1
  8. package/build/common/panel/Panel.mjs.map +1 -1
  9. package/build/dateLookup/DateLookup.js +21 -17
  10. package/build/dateLookup/DateLookup.js.map +1 -1
  11. package/build/dateLookup/DateLookup.mjs +21 -17
  12. package/build/dateLookup/DateLookup.mjs.map +1 -1
  13. package/build/dateLookup/dateTrigger/DateTrigger.js +6 -0
  14. package/build/dateLookup/dateTrigger/DateTrigger.js.map +1 -1
  15. package/build/dateLookup/dateTrigger/DateTrigger.mjs +6 -0
  16. package/build/dateLookup/dateTrigger/DateTrigger.mjs.map +1 -1
  17. package/build/drawer/Drawer.js +3 -0
  18. package/build/drawer/Drawer.js.map +1 -1
  19. package/build/drawer/Drawer.mjs +4 -1
  20. package/build/drawer/Drawer.mjs.map +1 -1
  21. package/build/i18n/es.json +2 -0
  22. package/build/i18n/es.json.js +2 -0
  23. package/build/i18n/es.json.js.map +1 -1
  24. package/build/i18n/es.json.mjs +2 -0
  25. package/build/i18n/es.json.mjs.map +1 -1
  26. package/build/i18n/fr.json +2 -0
  27. package/build/i18n/fr.json.js +2 -0
  28. package/build/i18n/fr.json.js.map +1 -1
  29. package/build/i18n/fr.json.mjs +2 -0
  30. package/build/i18n/fr.json.mjs.map +1 -1
  31. package/build/i18n/hu.json +2 -0
  32. package/build/i18n/hu.json.js +2 -0
  33. package/build/i18n/hu.json.js.map +1 -1
  34. package/build/i18n/hu.json.mjs +2 -0
  35. package/build/i18n/hu.json.mjs.map +1 -1
  36. package/build/i18n/id.json +2 -0
  37. package/build/i18n/id.json.js +2 -0
  38. package/build/i18n/id.json.js.map +1 -1
  39. package/build/i18n/id.json.mjs +2 -0
  40. package/build/i18n/id.json.mjs.map +1 -1
  41. package/build/i18n/it.json +2 -0
  42. package/build/i18n/it.json.js +2 -0
  43. package/build/i18n/it.json.js.map +1 -1
  44. package/build/i18n/it.json.mjs +2 -0
  45. package/build/i18n/it.json.mjs.map +1 -1
  46. package/build/i18n/ja.json +2 -0
  47. package/build/i18n/ja.json.js +2 -0
  48. package/build/i18n/ja.json.js.map +1 -1
  49. package/build/i18n/ja.json.mjs +2 -0
  50. package/build/i18n/ja.json.mjs.map +1 -1
  51. package/build/i18n/pl.json +2 -0
  52. package/build/i18n/pl.json.js +2 -0
  53. package/build/i18n/pl.json.js.map +1 -1
  54. package/build/i18n/pl.json.mjs +2 -0
  55. package/build/i18n/pl.json.mjs.map +1 -1
  56. package/build/i18n/ro.json +2 -0
  57. package/build/i18n/ro.json.js +2 -0
  58. package/build/i18n/ro.json.js.map +1 -1
  59. package/build/i18n/ro.json.mjs +2 -0
  60. package/build/i18n/ro.json.mjs.map +1 -1
  61. package/build/i18n/ru.json +2 -0
  62. package/build/i18n/ru.json.js +2 -0
  63. package/build/i18n/ru.json.js.map +1 -1
  64. package/build/i18n/ru.json.mjs +2 -0
  65. package/build/i18n/ru.json.mjs.map +1 -1
  66. package/build/i18n/tr.json +2 -0
  67. package/build/i18n/tr.json.js +2 -0
  68. package/build/i18n/tr.json.js.map +1 -1
  69. package/build/i18n/tr.json.mjs +2 -0
  70. package/build/i18n/tr.json.mjs.map +1 -1
  71. package/build/main.css +20 -28
  72. package/build/modal/Modal.js +3 -0
  73. package/build/modal/Modal.js.map +1 -1
  74. package/build/modal/Modal.mjs +4 -1
  75. package/build/modal/Modal.mjs.map +1 -1
  76. package/build/provider/overlay/OverlayIdProvider.js +20 -0
  77. package/build/provider/overlay/OverlayIdProvider.js.map +1 -0
  78. package/build/provider/overlay/OverlayIdProvider.mjs +17 -0
  79. package/build/provider/overlay/OverlayIdProvider.mjs.map +1 -0
  80. package/build/styles/main.css +20 -28
  81. package/build/styles/uploadInput/uploadButton/UploadButton.css +0 -5
  82. package/build/styles/uploadInput/uploadItem/UploadItem.css +20 -23
  83. package/build/types/common/bottomSheet/BottomSheet.d.ts.map +1 -1
  84. package/build/types/common/panel/Panel.d.ts.map +1 -1
  85. package/build/types/dateLookup/DateLookup.d.ts.map +1 -1
  86. package/build/types/dateLookup/dateTrigger/DateTrigger.d.ts.map +1 -1
  87. package/build/types/drawer/Drawer.d.ts.map +1 -1
  88. package/build/types/modal/Modal.d.ts.map +1 -1
  89. package/build/types/provider/overlay/OverlayIdProvider.d.ts +7 -0
  90. package/build/types/provider/overlay/OverlayIdProvider.d.ts.map +1 -0
  91. package/build/types/uploadInput/uploadItem/{UploadItemLink.d.ts → UploadItemBody.d.ts} +2 -2
  92. package/build/types/uploadInput/uploadItem/UploadItemBody.d.ts.map +1 -0
  93. package/build/uploadInput/uploadItem/UploadItem.js +3 -3
  94. package/build/uploadInput/uploadItem/UploadItem.js.map +1 -1
  95. package/build/uploadInput/uploadItem/UploadItem.mjs +3 -3
  96. package/build/uploadInput/uploadItem/UploadItem.mjs.map +1 -1
  97. package/build/uploadInput/uploadItem/UploadItemBody.js +27 -0
  98. package/build/uploadInput/uploadItem/UploadItemBody.js.map +1 -0
  99. package/build/uploadInput/uploadItem/{UploadItemLink.mjs → UploadItemBody.mjs} +4 -5
  100. package/build/uploadInput/uploadItem/UploadItemBody.mjs.map +1 -0
  101. package/package.json +5 -5
  102. package/src/common/bottomSheet/BottomSheet.tsx +12 -1
  103. package/src/common/panel/Panel.tsx +5 -0
  104. package/src/dateLookup/DateLookup.tsx +22 -19
  105. package/src/dateLookup/dateTrigger/DateTrigger.spec.js +1 -0
  106. package/src/dateLookup/dateTrigger/DateTrigger.tsx +7 -0
  107. package/src/drawer/Drawer.tsx +5 -1
  108. package/src/i18n/es.json +2 -0
  109. package/src/i18n/fr.json +2 -0
  110. package/src/i18n/hu.json +2 -0
  111. package/src/i18n/id.json +2 -0
  112. package/src/i18n/it.json +2 -0
  113. package/src/i18n/ja.json +2 -0
  114. package/src/i18n/pl.json +2 -0
  115. package/src/i18n/ro.json +2 -0
  116. package/src/i18n/ru.json +2 -0
  117. package/src/i18n/tr.json +2 -0
  118. package/src/main.css +20 -28
  119. package/src/modal/Modal.tsx +5 -1
  120. package/src/provider/overlay/OverlayIdProvider.tsx +15 -0
  121. package/src/uploadInput/uploadButton/UploadButton.css +0 -5
  122. package/src/uploadInput/uploadButton/UploadButton.less +0 -6
  123. package/src/uploadInput/uploadItem/UploadItem.css +20 -23
  124. package/src/uploadInput/uploadItem/UploadItem.less +12 -16
  125. package/src/uploadInput/uploadItem/UploadItem.tsx +4 -4
  126. package/src/uploadInput/uploadItem/{UploadItemLink.tsx → UploadItemBody.tsx} +2 -6
  127. package/build/types/uploadInput/uploadItem/UploadItemLink.d.ts.map +0 -1
  128. package/build/uploadInput/uploadItem/UploadItemLink.js +0 -32
  129. package/build/uploadInput/uploadItem/UploadItemLink.js.map +0 -1
  130. package/build/uploadInput/uploadItem/UploadItemLink.mjs.map +0 -1
package/src/i18n/es.json CHANGED
@@ -23,6 +23,8 @@
23
23
  "neptune.PhoneNumberInput.SelectInput.placeholder": "Selecciona una opción...",
24
24
  "neptune.Select.searchPlaceholder": "Buscar...",
25
25
  "neptune.SelectInput.noResultsFound": "No se han encontrado resultados",
26
+ "neptune.SelectOption.action.label": "Elegir",
27
+ "neptune.SelectOption.selected.action.label": "Cambiar opción elegida",
26
28
  "neptune.Summary.statusDone": "Apartado listo",
27
29
  "neptune.Summary.statusNotDone": "Apartado a completar",
28
30
  "neptune.Summary.statusPending": "Apartado pendiente",
package/src/i18n/fr.json CHANGED
@@ -23,6 +23,8 @@
23
23
  "neptune.PhoneNumberInput.SelectInput.placeholder": "Sélectionnez une option…",
24
24
  "neptune.Select.searchPlaceholder": "Recherche...",
25
25
  "neptune.SelectInput.noResultsFound": "Aucun résultat trouvé",
26
+ "neptune.SelectOption.action.label": "Sélectionner",
27
+ "neptune.SelectOption.selected.action.label": "Modifier l'option choisie",
26
28
  "neptune.Summary.statusDone": "Validé",
27
29
  "neptune.Summary.statusNotDone": "À compléter",
28
30
  "neptune.Summary.statusPending": "En attente",
package/src/i18n/hu.json CHANGED
@@ -23,6 +23,8 @@
23
23
  "neptune.PhoneNumberInput.SelectInput.placeholder": "Válassz ki egy lehetőséget...",
24
24
  "neptune.Select.searchPlaceholder": "Keresés...",
25
25
  "neptune.SelectInput.noResultsFound": "Nincs találat",
26
+ "neptune.SelectOption.action.label": "Kiválasztás",
27
+ "neptune.SelectOption.selected.action.label": "Kiválasztott opció módosítása",
26
28
  "neptune.Summary.statusDone": "Kész",
27
29
  "neptune.Summary.statusNotDone": "Hátravan",
28
30
  "neptune.Summary.statusPending": "Függőben",
package/src/i18n/id.json CHANGED
@@ -23,6 +23,8 @@
23
23
  "neptune.PhoneNumberInput.SelectInput.placeholder": "Pilih opsi...",
24
24
  "neptune.Select.searchPlaceholder": "Cari...",
25
25
  "neptune.SelectInput.noResultsFound": "Hasil tidak ditemukan",
26
+ "neptune.SelectOption.action.label": "Pilih",
27
+ "neptune.SelectOption.selected.action.label": "Ubah opsi yang dipilih",
26
28
  "neptune.Summary.statusDone": "Item selesai",
27
29
  "neptune.Summary.statusNotDone": "Item yang harus dilakukan",
28
30
  "neptune.Summary.statusPending": "Item tertunda",
package/src/i18n/it.json CHANGED
@@ -23,6 +23,8 @@
23
23
  "neptune.PhoneNumberInput.SelectInput.placeholder": "Seleziona un'opzione...",
24
24
  "neptune.Select.searchPlaceholder": "Cerca...",
25
25
  "neptune.SelectInput.noResultsFound": "Nessun risultato trovato",
26
+ "neptune.SelectOption.action.label": "Scegli",
27
+ "neptune.SelectOption.selected.action.label": "Modifica l'opzione scelta",
26
28
  "neptune.Summary.statusDone": "Completato",
27
29
  "neptune.Summary.statusNotDone": "Da completare",
28
30
  "neptune.Summary.statusPending": "In corso",
package/src/i18n/ja.json CHANGED
@@ -23,6 +23,8 @@
23
23
  "neptune.PhoneNumberInput.SelectInput.placeholder": "選択してください…",
24
24
  "neptune.Select.searchPlaceholder": "検索する... ",
25
25
  "neptune.SelectInput.noResultsFound": "結果が見つかりませんでした",
26
+ "neptune.SelectOption.action.label": "選択してください",
27
+ "neptune.SelectOption.selected.action.label": "選択したオプションを変更する",
26
28
  "neptune.Summary.statusDone": "完了",
27
29
  "neptune.Summary.statusNotDone": "未完了",
28
30
  "neptune.Summary.statusPending": "保留中",
package/src/i18n/pl.json CHANGED
@@ -23,6 +23,8 @@
23
23
  "neptune.PhoneNumberInput.SelectInput.placeholder": "Wybierz opcję...",
24
24
  "neptune.Select.searchPlaceholder": "Wyszukaj...",
25
25
  "neptune.SelectInput.noResultsFound": "Nie znaleziono wyników",
26
+ "neptune.SelectOption.action.label": "Wybierz",
27
+ "neptune.SelectOption.selected.action.label": "Zmień wybraną opcję",
26
28
  "neptune.Summary.statusDone": "Czynność wykonana",
27
29
  "neptune.Summary.statusNotDone": "Czynność do wykonania",
28
30
  "neptune.Summary.statusPending": "Czynność oczekująca",
package/src/i18n/ro.json CHANGED
@@ -23,6 +23,8 @@
23
23
  "neptune.PhoneNumberInput.SelectInput.placeholder": "Selectează o opțiune...",
24
24
  "neptune.Select.searchPlaceholder": "Caută...",
25
25
  "neptune.SelectInput.noResultsFound": "Nu s-a găsit niciun rezultat",
26
+ "neptune.SelectOption.action.label": "Alege",
27
+ "neptune.SelectOption.selected.action.label": "Schimbă opțiunea aleasă",
26
28
  "neptune.Summary.statusDone": "Finalizat",
27
29
  "neptune.Summary.statusNotDone": "De făcut",
28
30
  "neptune.Summary.statusPending": "În așteptare",
package/src/i18n/ru.json CHANGED
@@ -23,6 +23,8 @@
23
23
  "neptune.PhoneNumberInput.SelectInput.placeholder": "Выберите вариант...",
24
24
  "neptune.Select.searchPlaceholder": "Поиск...",
25
25
  "neptune.SelectInput.noResultsFound": "Ничего не найдено",
26
+ "neptune.SelectOption.action.label": "Выбрать",
27
+ "neptune.SelectOption.selected.action.label": "Изменить выбранный вариант",
26
28
  "neptune.Summary.statusDone": "Этап завершен",
27
29
  "neptune.Summary.statusNotDone": "Этап к выполнению",
28
30
  "neptune.Summary.statusPending": "Этап в процессе",
package/src/i18n/tr.json CHANGED
@@ -23,6 +23,8 @@
23
23
  "neptune.PhoneNumberInput.SelectInput.placeholder": "Bir seçenek seçin...",
24
24
  "neptune.Select.searchPlaceholder": "Ara...",
25
25
  "neptune.SelectInput.noResultsFound": "Sonuç bulunamadı",
26
+ "neptune.SelectOption.action.label": "Seç",
27
+ "neptune.SelectOption.selected.action.label": "Seçilen opsiyonu değiştir",
26
28
  "neptune.Summary.statusDone": "Tamamlanan aşama",
27
29
  "neptune.Summary.statusNotDone": "Yapılacak",
28
30
  "neptune.Summary.statusPending": "Bekliyor",
package/src/main.css CHANGED
@@ -5472,11 +5472,6 @@ label.np-upload-button:not(.disabled):active {
5472
5472
  .np-upload-button .media {
5473
5473
  align-items: flex-start;
5474
5474
  }
5475
- @media (max-width: 320px) {
5476
- .np-upload-icon {
5477
- padding-left: 0;
5478
- }
5479
- }
5480
5475
  .np-upload-input.form-control {
5481
5476
  height: auto;
5482
5477
  padding: 0;
@@ -5568,9 +5563,9 @@ label.np-upload-button:not(.disabled):active {
5568
5563
  border: 1px solid var(--color-interactive-secondary);
5569
5564
  position: relative;
5570
5565
  }
5571
- .np-upload-item:first-child ~ div:not(.np-upload-item--link):before,
5572
- .np-upload-item:not(:first-child).np-upload-item--link .np-upload-item__link:before,
5573
- .np-upload-item.np-upload-item--link:hover .np-upload-item__link:after {
5566
+ .np-upload-item:first-child ~ div:not(.np-upload-item__link):before,
5567
+ .np-upload-item:not(:first-child).np-upload-item__link .np-upload-item--link:before,
5568
+ .np-upload-item.np-upload-item__link:hover .np-upload-item--link:after {
5574
5569
  display: block;
5575
5570
  position: absolute;
5576
5571
  height: 1px;
@@ -5582,27 +5577,27 @@ label.np-upload-button:not(.disabled):active {
5582
5577
  width: calc(100% - 2 * 16px);
5583
5578
  width: calc(100% - 2 * var(--size-16));
5584
5579
  }
5585
- .np-upload-item:first-child ~ div:not(.np-upload-item--link):before,
5586
- .np-upload-item:not(:first-child).np-upload-item--link .np-upload-item__link:before {
5580
+ .np-upload-item:first-child ~ div:not(.np-upload-item__link):before,
5581
+ .np-upload-item:not(:first-child).np-upload-item__link .np-upload-item--link:before {
5587
5582
  top: 0;
5588
5583
  }
5589
- .np-upload-item.np-upload-item--link:hover .np-upload-item__link:after {
5584
+ .np-upload-item.np-upload-item__link:hover .np-upload-item--link:after {
5590
5585
  bottom: -1px;
5591
5586
  }
5592
5587
  .np-upload-item:first-child ~ div {
5593
5588
  border-top: 1px;
5594
5589
  }
5595
- .np-upload-item:not(:first-child) .np-upload-item__link:hover {
5590
+ .np-upload-item:not(:first-child) .np-upload-item--link:hover {
5596
5591
  border-top-color: rgba(0,0,0,0.10196);
5597
5592
  border-top-color: var(--color-border-neutral);
5598
5593
  }
5599
5594
  .np-upload-item:not(:last-child) {
5600
5595
  border-bottom: 0;
5601
5596
  }
5602
- .np-upload-item.np-upload-item--link:hover + .np-upload-item:before,
5603
- .np-upload-item.np-upload-item--link:hover + .np-upload-button-container:before,
5604
- .np-upload-item.np-upload-item--link:hover + .np-upload-item .np-upload-item__link:before,
5605
- .np-upload-item.np-upload-item--link:hover + .np-upload-button-container .np-upload-item__link:before {
5597
+ .np-upload-item.np-upload-item__link:hover + .np-upload-item:before,
5598
+ .np-upload-item.np-upload-item__link:hover + .np-upload-button-container:before,
5599
+ .np-upload-item.np-upload-item__link:hover + .np-upload-item .np-upload-item--link:before,
5600
+ .np-upload-item.np-upload-item__link:hover + .np-upload-button-container .np-upload-item--link:before {
5606
5601
  display: none;
5607
5602
  }
5608
5603
  .np-upload-button-container:hover:before,
@@ -5617,41 +5612,38 @@ label.np-upload-button:not(.disabled):active {
5617
5612
  outline-offset: -3px;
5618
5613
  }
5619
5614
  .np-upload-item--single-file:focus-visible,
5620
- .np-upload-item__link:focus-visible,
5615
+ .np-upload-item--link:focus-visible,
5621
5616
  .np-upload-button-container:has(:focus-visible) {
5622
5617
  outline-width: 3px;
5623
5618
  }
5624
- .np-upload-item--link a {
5619
+ .np-upload-item__link a {
5625
5620
  flex: 1;
5626
5621
  -webkit-text-decoration: none;
5627
5622
  text-decoration: none;
5628
5623
  border-top: 1px solid transparent;
5629
5624
  border-radius: inherit;
5630
5625
  }
5631
- .np-upload-item--link a:focus-visible {
5626
+ .np-upload-item__link a:focus-visible {
5632
5627
  outline-offset: -2px;
5633
5628
  }
5634
- .np-upload-item--link a:hover:before {
5629
+ .np-upload-item__link a:hover:before {
5635
5630
  display: none !important;
5636
5631
  }
5637
- .np-upload-item--link a:hover:after {
5632
+ .np-upload-item__link a:hover:after {
5638
5633
  left: 0 !important;
5639
5634
  width: 100% !important;
5640
5635
  }
5641
- .np-upload-item--link a:hover,
5642
- .np-upload-item--link a:active {
5636
+ .np-upload-item__link a:hover,
5637
+ .np-upload-item__link a:active {
5643
5638
  -webkit-text-decoration: none;
5644
5639
  text-decoration: none;
5645
5640
  }
5646
- .np-upload-item--link a:hover .np-upload-button,
5647
- .np-upload-item--link a:active .np-upload-button {
5641
+ .np-upload-item__link a:hover .np-upload-button,
5642
+ .np-upload-item__link a:active .np-upload-button {
5648
5643
  background-color: rgba(134,167,189,0.10196);
5649
5644
  background-color: var(--color-background-neutral);
5650
5645
  border-radius: inherit;
5651
5646
  }
5652
- .np-upload-item--link:first-of-type a {
5653
- border-top: 0;
5654
- }
5655
5647
  .np-upload-item__body {
5656
5648
  display: flex;
5657
5649
  align-items: center;
@@ -1,5 +1,5 @@
1
1
  import classNames from 'classnames';
2
- import { ReactNode, useId, useRef } from 'react';
2
+ import { ReactNode, useContext, useId, useRef } from 'react';
3
3
  import { CSSTransition } from 'react-transition-group';
4
4
 
5
5
  import {
@@ -21,6 +21,7 @@ import { CloseButton } from '../common/closeButton';
21
21
  import { useLayout } from '../common/hooks';
22
22
  import Dimmer from '../dimmer';
23
23
  import Drawer from '../drawer';
24
+ import { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';
24
25
  import Title from '../title/Title';
25
26
 
26
27
  const TRANSITION_DURATION_IN_MILLISECONDS = 150;
@@ -61,6 +62,8 @@ const Modal = ({
61
62
  const contentReference = useRef<HTMLDivElement>(null);
62
63
  const titleId = useId();
63
64
 
65
+ const overlayId = useContext(OverlayIdContext);
66
+
64
67
  return !isMedium ? (
65
68
  <Drawer
66
69
  open={open}
@@ -100,6 +103,7 @@ const Modal = ({
100
103
  {...otherProps}
101
104
  >
102
105
  <div
106
+ id={overlayId}
103
107
  role="dialog"
104
108
  aria-modal
105
109
  aria-labelledby={titleId}
@@ -0,0 +1,15 @@
1
+ import { createContext, useId } from 'react';
2
+
3
+ export const OverlayIdContext = createContext<string | undefined>(undefined);
4
+
5
+ export type OverlayIdProviderProps = {
6
+ open: boolean;
7
+ children?: React.ReactNode;
8
+ };
9
+
10
+ export const OverlayIdProvider = ({ open, children }: OverlayIdProviderProps) => {
11
+ const id = useId();
12
+ return (
13
+ <OverlayIdContext.Provider value={open ? id : undefined}>{children}</OverlayIdContext.Provider>
14
+ );
15
+ };
@@ -37,8 +37,3 @@ label.np-upload-button:not(.disabled):active {
37
37
  .np-upload-button .media {
38
38
  align-items: flex-start;
39
39
  }
40
- @media (max-width: 320px) {
41
- .np-upload-icon {
42
- padding-left: 0;
43
- }
44
- }
@@ -47,9 +47,3 @@
47
47
  align-items: flex-start;
48
48
  }
49
49
  }
50
-
51
- .np-upload-icon{
52
- @media (max-width: 320px){
53
- padding-left: 0;
54
- }
55
- }
@@ -3,9 +3,9 @@
3
3
  border: 1px solid var(--color-interactive-secondary);
4
4
  position: relative;
5
5
  }
6
- .np-upload-item:first-child ~ div:not(.np-upload-item--link):before,
7
- .np-upload-item:not(:first-child).np-upload-item--link .np-upload-item__link:before,
8
- .np-upload-item.np-upload-item--link:hover .np-upload-item__link:after {
6
+ .np-upload-item:first-child ~ div:not(.np-upload-item__link):before,
7
+ .np-upload-item:not(:first-child).np-upload-item__link .np-upload-item--link:before,
8
+ .np-upload-item.np-upload-item__link:hover .np-upload-item--link:after {
9
9
  display: block;
10
10
  position: absolute;
11
11
  height: 1px;
@@ -17,27 +17,27 @@
17
17
  width: calc(100% - 2 * 16px);
18
18
  width: calc(100% - 2 * var(--size-16));
19
19
  }
20
- .np-upload-item:first-child ~ div:not(.np-upload-item--link):before,
21
- .np-upload-item:not(:first-child).np-upload-item--link .np-upload-item__link:before {
20
+ .np-upload-item:first-child ~ div:not(.np-upload-item__link):before,
21
+ .np-upload-item:not(:first-child).np-upload-item__link .np-upload-item--link:before {
22
22
  top: 0;
23
23
  }
24
- .np-upload-item.np-upload-item--link:hover .np-upload-item__link:after {
24
+ .np-upload-item.np-upload-item__link:hover .np-upload-item--link:after {
25
25
  bottom: -1px;
26
26
  }
27
27
  .np-upload-item:first-child ~ div {
28
28
  border-top: 1px;
29
29
  }
30
- .np-upload-item:not(:first-child) .np-upload-item__link:hover {
30
+ .np-upload-item:not(:first-child) .np-upload-item--link:hover {
31
31
  border-top-color: rgba(0,0,0,0.10196);
32
32
  border-top-color: var(--color-border-neutral);
33
33
  }
34
34
  .np-upload-item:not(:last-child) {
35
35
  border-bottom: 0;
36
36
  }
37
- .np-upload-item.np-upload-item--link:hover + .np-upload-item:before,
38
- .np-upload-item.np-upload-item--link:hover + .np-upload-button-container:before,
39
- .np-upload-item.np-upload-item--link:hover + .np-upload-item .np-upload-item__link:before,
40
- .np-upload-item.np-upload-item--link:hover + .np-upload-button-container .np-upload-item__link:before {
37
+ .np-upload-item.np-upload-item__link:hover + .np-upload-item:before,
38
+ .np-upload-item.np-upload-item__link:hover + .np-upload-button-container:before,
39
+ .np-upload-item.np-upload-item__link:hover + .np-upload-item .np-upload-item--link:before,
40
+ .np-upload-item.np-upload-item__link:hover + .np-upload-button-container .np-upload-item--link:before {
41
41
  display: none;
42
42
  }
43
43
  .np-upload-button-container:hover:before,
@@ -52,41 +52,38 @@
52
52
  outline-offset: -3px;
53
53
  }
54
54
  .np-upload-item--single-file:focus-visible,
55
- .np-upload-item__link:focus-visible,
55
+ .np-upload-item--link:focus-visible,
56
56
  .np-upload-button-container:has(:focus-visible) {
57
57
  outline-width: 3px;
58
58
  }
59
- .np-upload-item--link a {
59
+ .np-upload-item__link a {
60
60
  flex: 1;
61
61
  -webkit-text-decoration: none;
62
62
  text-decoration: none;
63
63
  border-top: 1px solid transparent;
64
64
  border-radius: inherit;
65
65
  }
66
- .np-upload-item--link a:focus-visible {
66
+ .np-upload-item__link a:focus-visible {
67
67
  outline-offset: -2px;
68
68
  }
69
- .np-upload-item--link a:hover:before {
69
+ .np-upload-item__link a:hover:before {
70
70
  display: none !important;
71
71
  }
72
- .np-upload-item--link a:hover:after {
72
+ .np-upload-item__link a:hover:after {
73
73
  left: 0 !important;
74
74
  width: 100% !important;
75
75
  }
76
- .np-upload-item--link a:hover,
77
- .np-upload-item--link a:active {
76
+ .np-upload-item__link a:hover,
77
+ .np-upload-item__link a:active {
78
78
  -webkit-text-decoration: none;
79
79
  text-decoration: none;
80
80
  }
81
- .np-upload-item--link a:hover .np-upload-button,
82
- .np-upload-item--link a:active .np-upload-button {
81
+ .np-upload-item__link a:hover .np-upload-button,
82
+ .np-upload-item__link a:active .np-upload-button {
83
83
  background-color: rgba(134,167,189,0.10196);
84
84
  background-color: var(--color-background-neutral);
85
85
  border-radius: inherit;
86
86
  }
87
- .np-upload-item--link:first-of-type a {
88
- border-top: 0;
89
- }
90
87
  .np-upload-item__body {
91
88
  display: flex;
92
89
  align-items: center;
@@ -5,9 +5,9 @@
5
5
  border: 1px solid var(--color-interactive-secondary);
6
6
  position: relative;
7
7
 
8
- &:first-child ~ div:not(.np-upload-item--link):before,
9
- &:not(:first-child).np-upload-item--link .np-upload-item__link:before,
10
- &.np-upload-item--link:hover .np-upload-item__link:after {
8
+ &:first-child ~ div:not(.np-upload-item__link):before,
9
+ &:not(:first-child).np-upload-item__link .np-upload-item--link:before,
10
+ &.np-upload-item__link:hover .np-upload-item--link:after {
11
11
  display: block;
12
12
  position: absolute;
13
13
  height: 1px;
@@ -17,12 +17,12 @@
17
17
  width: calc(100% - 2 * var(--size-16));
18
18
  }
19
19
 
20
- &:first-child ~ div:not(.np-upload-item--link):before,
21
- &:not(:first-child).np-upload-item--link .np-upload-item__link:before {
20
+ &:first-child ~ div:not(.np-upload-item__link):before,
21
+ &:not(:first-child).np-upload-item__link .np-upload-item--link:before {
22
22
  top: 0;
23
23
  }
24
24
 
25
- &.np-upload-item--link:hover .np-upload-item__link:after {
25
+ &.np-upload-item__link:hover .np-upload-item--link:after {
26
26
  bottom: -1px;
27
27
  }
28
28
 
@@ -33,7 +33,7 @@
33
33
  }
34
34
 
35
35
  &:not(:first-child) {
36
- .np-upload-item__link:hover {
36
+ .np-upload-item--link:hover {
37
37
  border-top-color: var(--color-border-neutral);
38
38
  }
39
39
  }
@@ -43,10 +43,10 @@
43
43
  }
44
44
 
45
45
 
46
- &.np-upload-item--link:hover + .np-upload-item,
47
- &.np-upload-item--link:hover + .np-upload-button-container {
46
+ &.np-upload-item__link:hover + .np-upload-item,
47
+ &.np-upload-item__link:hover + .np-upload-button-container {
48
48
  &:before,
49
- .np-upload-item__link:before {
49
+ .np-upload-item--link:before {
50
50
  display: none;
51
51
  }
52
52
  }
@@ -67,12 +67,12 @@
67
67
  }
68
68
 
69
69
  .np-upload-item--single-file:focus-visible,
70
- .np-upload-item__link:focus-visible,
70
+ .np-upload-item--link:focus-visible,
71
71
  .np-upload-button-container:has(:focus-visible) {
72
72
  outline-width: 3px;
73
73
  }
74
74
 
75
- .np-upload-item--link {
75
+ .np-upload-item__link {
76
76
  a {
77
77
  flex: 1;
78
78
  text-decoration: none;
@@ -103,10 +103,6 @@
103
103
  }
104
104
  }
105
105
  }
106
-
107
- &:first-of-type a {
108
- border-top: 0;
109
- }
110
106
  }
111
107
 
112
108
  .np-upload-item__body {
@@ -9,7 +9,7 @@ import StatusIcon from '../../statusIcon/StatusIcon';
9
9
  import { UploadedFile, UploadError } from '../types';
10
10
 
11
11
  import MESSAGES from './UploadItem.messages';
12
- import { UploadItemLink } from './UploadItemLink';
12
+ import { UploadItemBody } from './UploadItemBody';
13
13
 
14
14
  export type UploadItemProps = JSX.IntrinsicAttributes & {
15
15
  file: UploadedFile;
@@ -127,11 +127,11 @@ const UploadItem = ({
127
127
 
128
128
  return (
129
129
  <div
130
- className={classNames('np-upload-item', { 'np-upload-item--link': isSucceeded })}
130
+ className={classNames('np-upload-item', { 'np-upload-item__link': isSucceeded })}
131
131
  data-testid={TEST_IDS.uploadItem}
132
132
  >
133
133
  <div className="np-upload-item__body">
134
- <UploadItemLink
134
+ <UploadItemBody
135
135
  url={isSucceeded ? url : undefined}
136
136
  singleFileUpload={singleFileUpload}
137
137
  onDownload={onDownloadFile}
@@ -145,7 +145,7 @@ const UploadItem = ({
145
145
  </div>
146
146
  </div>
147
147
  </div>
148
- </UploadItemLink>
148
+ </UploadItemBody>
149
149
  {canDelete && (
150
150
  <button
151
151
  aria-label={formatMessage(MESSAGES.removeFile, { filename })}
@@ -1,5 +1,4 @@
1
1
  import { PropsWithChildren, MouseEvent } from 'react';
2
- import classnames from 'classnames';
3
2
 
4
3
  type UploadItemLinkProps = PropsWithChildren<{
5
4
  url?: string;
@@ -7,7 +6,7 @@ type UploadItemLinkProps = PropsWithChildren<{
7
6
  singleFileUpload: boolean;
8
7
  }>;
9
8
 
10
- export const UploadItemLink = ({
9
+ export const UploadItemBody = ({
11
10
  children,
12
11
  url,
13
12
  onDownload,
@@ -22,10 +21,7 @@ export const UploadItemLink = ({
22
21
  href={url}
23
22
  target="_blank"
24
23
  rel="noopener noreferrer"
25
- className={classnames(
26
- 'np-upload-item__link',
27
- singleFileUpload ? 'np-upload-item--single-file' : '',
28
- )}
24
+ className={singleFileUpload ? 'np-upload-item--single-file' : 'np-upload-item--link'}
29
25
  onClick={onDownload}
30
26
  >
31
27
  {children}
@@ -1 +0,0 @@
1
- {"version":3,"file":"UploadItemLink.d.ts","sourceRoot":"","sources":["../../../../src/uploadInput/uploadItem/UploadItemLink.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGtD,KAAK,mBAAmB,GAAG,iBAAiB,CAAC;IAC3C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACzC,gBAAgB,EAAE,OAAO,CAAC;CAC3B,CAAC,CAAC;AAEH,eAAO,MAAM,cAAc,qDAKxB,mBAAmB,gCAmBrB,CAAC"}
@@ -1,32 +0,0 @@
1
- 'use strict';
2
-
3
- var classNames = require('classnames');
4
- var jsxRuntime = require('react/jsx-runtime');
5
-
6
- function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
7
-
8
- var classNames__default = /*#__PURE__*/_interopDefault(classNames);
9
-
10
- const UploadItemLink = ({
11
- children,
12
- url,
13
- onDownload,
14
- singleFileUpload
15
- }) => {
16
- if (!url) {
17
- return /*#__PURE__*/jsxRuntime.jsx("div", {
18
- children: children
19
- });
20
- }
21
- return /*#__PURE__*/jsxRuntime.jsx("a", {
22
- href: url,
23
- target: "_blank",
24
- rel: "noopener noreferrer",
25
- className: classNames__default.default('np-upload-item__link', singleFileUpload ? 'np-upload-item--single-file' : ''),
26
- onClick: onDownload,
27
- children: children
28
- });
29
- };
30
-
31
- exports.UploadItemLink = UploadItemLink;
32
- //# sourceMappingURL=UploadItemLink.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"UploadItemLink.js","sources":["../../../src/uploadInput/uploadItem/UploadItemLink.tsx"],"sourcesContent":["import { PropsWithChildren, MouseEvent } from 'react';\nimport classnames from 'classnames';\n\ntype UploadItemLinkProps = PropsWithChildren<{\n url?: string;\n onDownload?: (event: MouseEvent) => void;\n singleFileUpload: boolean;\n}>;\n\nexport const UploadItemLink = ({\n children,\n url,\n onDownload,\n singleFileUpload,\n}: UploadItemLinkProps) => {\n if (!url) {\n return <div>{children}</div>;\n }\n\n return (\n <a\n href={url}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className={classnames(\n 'np-upload-item__link',\n singleFileUpload ? 'np-upload-item--single-file' : '',\n )}\n onClick={onDownload}\n >\n {children}\n </a>\n );\n};\n"],"names":["UploadItemLink","children","url","onDownload","singleFileUpload","_jsx","href","target","rel","className","classnames","onClick"],"mappings":";;;;;;;;;AASO,MAAMA,cAAc,GAAGA,CAAC;EAC7BC,QAAQ;EACRC,GAAG;EACHC,UAAU;AACVC,EAAAA,gBAAAA;AAAgB,CACI,KAAI;EACxB,IAAI,CAACF,GAAG,EAAE;AACR,IAAA,oBAAOG,cAAA,CAAA,KAAA,EAAA;AAAAJ,MAAAA,QAAA,EAAMA,QAAAA;AAAQ,KAAM,CAAC,CAAA;AAC9B,GAAA;AAEA,EAAA,oBACEI,cAAA,CAAA,GAAA,EAAA;AACEC,IAAAA,IAAI,EAAEJ,GAAI;AACVK,IAAAA,MAAM,EAAC,QAAQ;AACfC,IAAAA,GAAG,EAAC,qBAAqB;IACzBC,SAAS,EAAEC,2BAAU,CACnB,sBAAsB,EACtBN,gBAAgB,GAAG,6BAA6B,GAAG,EAAE,CACrD;AACFO,IAAAA,OAAO,EAAER,UAAW;AAAAF,IAAAA,QAAA,EAEnBA,QAAAA;AAAQ,GACR,CAAC,CAAA;AAER;;;;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"UploadItemLink.mjs","sources":["../../../src/uploadInput/uploadItem/UploadItemLink.tsx"],"sourcesContent":["import { PropsWithChildren, MouseEvent } from 'react';\nimport classnames from 'classnames';\n\ntype UploadItemLinkProps = PropsWithChildren<{\n url?: string;\n onDownload?: (event: MouseEvent) => void;\n singleFileUpload: boolean;\n}>;\n\nexport const UploadItemLink = ({\n children,\n url,\n onDownload,\n singleFileUpload,\n}: UploadItemLinkProps) => {\n if (!url) {\n return <div>{children}</div>;\n }\n\n return (\n <a\n href={url}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className={classnames(\n 'np-upload-item__link',\n singleFileUpload ? 'np-upload-item--single-file' : '',\n )}\n onClick={onDownload}\n >\n {children}\n </a>\n );\n};\n"],"names":["UploadItemLink","children","url","onDownload","singleFileUpload","_jsx","href","target","rel","className","classnames","onClick"],"mappings":";;;AASO,MAAMA,cAAc,GAAGA,CAAC;EAC7BC,QAAQ;EACRC,GAAG;EACHC,UAAU;AACVC,EAAAA,gBAAAA;AAAgB,CACI,KAAI;EACxB,IAAI,CAACF,GAAG,EAAE;AACR,IAAA,oBAAOG,GAAA,CAAA,KAAA,EAAA;AAAAJ,MAAAA,QAAA,EAAMA,QAAAA;AAAQ,KAAM,CAAC,CAAA;AAC9B,GAAA;AAEA,EAAA,oBACEI,GAAA,CAAA,GAAA,EAAA;AACEC,IAAAA,IAAI,EAAEJ,GAAI;AACVK,IAAAA,MAAM,EAAC,QAAQ;AACfC,IAAAA,GAAG,EAAC,qBAAqB;IACzBC,SAAS,EAAEC,UAAU,CACnB,sBAAsB,EACtBN,gBAAgB,GAAG,6BAA6B,GAAG,EAAE,CACrD;AACFO,IAAAA,OAAO,EAAER,UAAW;AAAAF,IAAAA,QAAA,EAEnBA,QAAAA;AAAQ,GACR,CAAC,CAAA;AAER;;;;"}