@transferwise/components 0.0.0-experimental-3868cf1 → 0.0.0-experimental-69a95e1

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 (174) hide show
  1. package/build/avatarLayout/AvatarLayout.js +10 -4
  2. package/build/avatarLayout/AvatarLayout.js.map +1 -1
  3. package/build/avatarLayout/AvatarLayout.mjs +10 -4
  4. package/build/avatarLayout/AvatarLayout.mjs.map +1 -1
  5. package/build/button/Button.js +79 -79
  6. package/build/button/Button.js.map +1 -1
  7. package/build/button/Button.mjs +80 -80
  8. package/build/button/Button.mjs.map +1 -1
  9. package/build/button/Button.resolver.js +86 -0
  10. package/build/button/Button.resolver.js.map +1 -0
  11. package/build/button/Button.resolver.mjs +84 -0
  12. package/build/button/Button.resolver.mjs.map +1 -0
  13. package/build/button/LegacyButton.js +114 -0
  14. package/build/button/LegacyButton.js.map +1 -0
  15. package/build/button/LegacyButton.mjs +112 -0
  16. package/build/button/LegacyButton.mjs.map +1 -0
  17. package/build/criticalBanner/CriticalCommsBanner.js +2 -2
  18. package/build/criticalBanner/CriticalCommsBanner.js.map +1 -1
  19. package/build/criticalBanner/CriticalCommsBanner.mjs +1 -1
  20. package/build/header/Header.js +2 -2
  21. package/build/header/Header.js.map +1 -1
  22. package/build/header/Header.mjs +1 -1
  23. package/build/i18n/ja.json +0 -1
  24. package/build/i18n/ja.json.js +0 -1
  25. package/build/i18n/ja.json.js.map +1 -1
  26. package/build/i18n/ja.json.mjs +0 -1
  27. package/build/i18n/ja.json.mjs.map +1 -1
  28. package/build/i18n/pt.json +0 -1
  29. package/build/i18n/pt.json.js +0 -1
  30. package/build/i18n/pt.json.js.map +1 -1
  31. package/build/i18n/pt.json.mjs +0 -1
  32. package/build/i18n/pt.json.mjs.map +1 -1
  33. package/build/i18n/ru.json +0 -1
  34. package/build/i18n/ru.json.js +0 -1
  35. package/build/i18n/ru.json.js.map +1 -1
  36. package/build/i18n/ru.json.mjs +0 -1
  37. package/build/i18n/ru.json.mjs.map +1 -1
  38. package/build/i18n/zh-HK.json +0 -1
  39. package/build/i18n/zh-HK.json.js +0 -1
  40. package/build/i18n/zh-HK.json.js.map +1 -1
  41. package/build/i18n/zh-HK.json.mjs +0 -1
  42. package/build/i18n/zh-HK.json.mjs.map +1 -1
  43. package/build/index.js +2 -4
  44. package/build/index.js.map +1 -1
  45. package/build/index.mjs +1 -2
  46. package/build/index.mjs.map +1 -1
  47. package/build/link/Link.js +8 -3
  48. package/build/link/Link.js.map +1 -1
  49. package/build/link/Link.mjs +8 -3
  50. package/build/link/Link.mjs.map +1 -1
  51. package/build/main.css +227 -2
  52. package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.js +2 -4
  53. package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.js.map +1 -1
  54. package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.mjs +2 -4
  55. package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.mjs.map +1 -1
  56. package/build/primitives/PrimitiveButton/src/PrimitiveButton.js +3 -5
  57. package/build/primitives/PrimitiveButton/src/PrimitiveButton.js.map +1 -1
  58. package/build/primitives/PrimitiveButton/src/PrimitiveButton.mjs +3 -5
  59. package/build/primitives/PrimitiveButton/src/PrimitiveButton.mjs.map +1 -1
  60. package/build/select/Select.js +2 -2
  61. package/build/select/Select.js.map +1 -1
  62. package/build/select/Select.mjs +1 -1
  63. package/build/styles/avatarLayout/AvatarLayout.css +12 -2
  64. package/build/styles/button/Button.css +207 -15
  65. package/build/styles/button/Button.vars.css +39 -0
  66. package/build/styles/button/LegacyButton.css +23 -0
  67. package/build/styles/main.css +227 -2
  68. package/build/types/avatarLayout/AvatarLayout.d.ts +1 -2
  69. package/build/types/avatarLayout/AvatarLayout.d.ts.map +1 -1
  70. package/build/types/avatarLayout/index.d.ts +1 -0
  71. package/build/types/avatarLayout/index.d.ts.map +1 -1
  72. package/build/types/button/Button.d.ts +1 -23
  73. package/build/types/button/Button.d.ts.map +1 -1
  74. package/build/types/button/Button.resolver.d.ts +31 -0
  75. package/build/types/button/Button.resolver.d.ts.map +1 -0
  76. package/build/types/button/Button.types.d.ts +65 -0
  77. package/build/types/button/Button.types.d.ts.map +1 -0
  78. package/build/types/button/LegacyButton.d.ts +30 -0
  79. package/build/types/button/LegacyButton.d.ts.map +1 -0
  80. package/build/types/button/index.d.ts +2 -2
  81. package/build/types/button/index.d.ts.map +1 -1
  82. package/build/types/index.d.ts +0 -2
  83. package/build/types/index.d.ts.map +1 -1
  84. package/build/types/link/Link.d.ts +2 -2
  85. package/build/types/link/Link.d.ts.map +1 -1
  86. package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.d.ts.map +1 -1
  87. package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.types.d.ts +5 -1
  88. package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.types.d.ts.map +1 -1
  89. package/build/types/primitives/PrimitiveButton/src/PrimitiveButton.d.ts.map +1 -1
  90. package/build/types/test-utils/story-config.d.ts +1 -1
  91. package/build/types/test-utils/story-config.d.ts.map +1 -1
  92. package/build/types/uploadInput/uploadButton/getAllowedFileTypes.d.ts.map +1 -1
  93. package/build/upload/steps/completeStep/completeStep.js +2 -2
  94. package/build/upload/steps/completeStep/completeStep.js.map +1 -1
  95. package/build/upload/steps/completeStep/completeStep.mjs +1 -1
  96. package/build/upload/steps/processingStep/processingStep.js +2 -2
  97. package/build/upload/steps/processingStep/processingStep.js.map +1 -1
  98. package/build/upload/steps/processingStep/processingStep.mjs +1 -1
  99. package/build/uploadInput/UploadInput.js +3 -3
  100. package/build/uploadInput/UploadInput.js.map +1 -1
  101. package/build/uploadInput/UploadInput.mjs +1 -1
  102. package/build/uploadInput/uploadButton/getAllowedFileTypes.js +3 -23
  103. package/build/uploadInput/uploadButton/getAllowedFileTypes.js.map +1 -1
  104. package/build/uploadInput/uploadButton/getAllowedFileTypes.mjs +3 -23
  105. package/build/uploadInput/uploadButton/getAllowedFileTypes.mjs.map +1 -1
  106. package/package.json +5 -5
  107. package/src/alert/Alert.tests.story.tsx +1 -1
  108. package/src/avatarLayout/AvatarLayout.css +12 -2
  109. package/src/avatarLayout/AvatarLayout.less +19 -2
  110. package/src/avatarLayout/AvatarLayout.tsx +11 -4
  111. package/src/avatarLayout/index.ts +1 -0
  112. package/src/button/Button.css +207 -15
  113. package/src/button/Button.less +217 -14
  114. package/src/button/Button.resolver.tsx +134 -0
  115. package/src/button/Button.spec.tsx +176 -225
  116. package/src/button/Button.story.tsx +729 -135
  117. package/src/button/Button.tests.story.tsx +27 -0
  118. package/src/button/Button.tsx +89 -132
  119. package/src/button/Button.types.ts +86 -0
  120. package/src/button/Button.vars.css +39 -0
  121. package/src/button/Button.vars.less +49 -0
  122. package/src/button/LegacyButton.css +23 -0
  123. package/src/button/LegacyButton.less +24 -0
  124. package/src/button/LegacyButton.spec.tsx +146 -0
  125. package/src/button/LegacyButton.story.tsx +225 -0
  126. package/src/button/LegacyButton.tsx +161 -0
  127. package/src/button/index.ts +2 -3
  128. package/src/field/Field.story.tsx +1 -1
  129. package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap +1 -2
  130. package/src/i18n/ja.json +0 -1
  131. package/src/i18n/pt.json +0 -1
  132. package/src/i18n/ru.json +0 -1
  133. package/src/i18n/zh-HK.json +0 -1
  134. package/src/index.ts +0 -12
  135. package/src/inputs/SelectInput.story.tsx +1 -1
  136. package/src/label/Label.story.tsx +1 -1
  137. package/src/link/Link.tsx +15 -6
  138. package/src/main.css +227 -2
  139. package/src/main.less +1 -0
  140. package/src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.tsx +2 -8
  141. package/src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.types.ts +6 -1
  142. package/src/primitives/PrimitiveAnchor/test/PrimitiveAnchor.spec.tsx +1 -3
  143. package/src/primitives/PrimitiveButton/src/PrimitiveButton.tsx +4 -12
  144. package/src/primitives/PrimitiveButton/test/PrimitiveButton.spec.tsx +16 -13
  145. package/src/test-utils/Parameters.d.ts +9 -1
  146. package/src/test-utils/story-config.ts +10 -1
  147. package/src/uploadInput/UploadInput.tests.story.tsx +5 -5
  148. package/src/uploadInput/uploadButton/getAllowedFileTypes.spec.ts +0 -12
  149. package/src/uploadInput/uploadButton/getAllowedFileTypes.ts +7 -33
  150. package/build/table/Table.js +0 -166
  151. package/build/table/Table.js.map +0 -1
  152. package/build/table/Table.messages.js +0 -24
  153. package/build/table/Table.messages.js.map +0 -1
  154. package/build/table/Table.messages.mjs +0 -22
  155. package/build/table/Table.messages.mjs.map +0 -1
  156. package/build/table/Table.mjs +0 -164
  157. package/build/table/Table.mjs.map +0 -1
  158. package/build/table/TableCell.js +0 -86
  159. package/build/table/TableCell.js.map +0 -1
  160. package/build/table/TableCell.mjs +0 -84
  161. package/build/table/TableCell.mjs.map +0 -1
  162. package/build/table/TableHeader.js +0 -57
  163. package/build/table/TableHeader.js.map +0 -1
  164. package/build/table/TableHeader.mjs +0 -55
  165. package/build/table/TableHeader.mjs.map +0 -1
  166. package/build/table/TableRow.js +0 -85
  167. package/build/table/TableRow.js.map +0 -1
  168. package/build/table/TableRow.mjs +0 -83
  169. package/build/table/TableRow.mjs.map +0 -1
  170. package/build/table/TableStatusText.js +0 -54
  171. package/build/table/TableStatusText.js.map +0 -1
  172. package/build/table/TableStatusText.mjs +0 -52
  173. package/build/table/TableStatusText.mjs.map +0 -1
  174. package/src/button/__snapshots__/Button.spec.tsx.snap +0 -309
@@ -1 +0,0 @@
1
- {"version":3,"file":"TableCell.mjs","sources":["../../src/table/TableCell.tsx"],"sourcesContent":["import TableStatusText from './TableStatusText';\nimport StatusIcon from '../statusIcon';\nimport { Flag } from '@wise/art';\nimport React from 'react';\nimport { clsx } from 'clsx';\nimport Body from '../body';\nimport Money, { MoneyProps } from '../money';\nimport AvatarView from '../avatarView';\n\ninterface TableCellTypeProp {\n type: 'leading' | 'text' | 'currency' | 'status';\n}\n\n// `Leading` and `Status` cell types have 2 text fields: `primaryText` and `secondaryText`\ninterface TableCellTextProps {\n primaryText?: string;\n secondaryText?: string;\n}\n\n// `Leading`, `Text` and `Currency` cells' types can have a status indicator with `error` or `success` values\ninterface TableCellStatusProp {\n status?: 'error' | 'success';\n}\n\nexport interface TableCellLeading\n extends TableCellTypeProp,\n TableCellTextProps,\n TableCellStatusProp {\n avatar?: {\n src?: string;\n profileName?: string | null;\n };\n}\n\nexport interface TableCellText extends TableCellTypeProp, TableCellStatusProp {\n text?: string;\n}\n\nexport interface TableCellCurrency extends TableCellTypeProp, TableCellStatusProp {\n primaryCurrency?: MoneyProps;\n secondaryCurrency?: MoneyProps;\n}\n\nexport interface TableCellStatus extends TableCellTypeProp, TableCellTextProps {\n sentiment?: 'negative' | 'neutral' | 'positive' | 'warning' | 'pending';\n}\n\nexport interface TableCellType {\n cell?: TableCellLeading & TableCellText & TableCellCurrency & TableCellStatus;\n alignment?: 'left' | 'right';\n}\n\n// These properties should be exported only on the lib level to prevent visual issues because of incorrect usage.\nexport interface TableCellProps extends TableCellType {\n className?: string;\n colSpan?: number;\n children?: React.ReactNode;\n}\n\nconst TableCell = ({ cell, alignment = 'left', className, colSpan, children }: TableCellProps) => {\n const getContentMedia = () => {\n let mediaContent = null;\n\n if (cell?.type === 'leading' && (cell?.avatar?.src || cell?.avatar?.profileName)) {\n mediaContent = (\n <AvatarView profileName={cell?.avatar?.profileName} size={40} imgSrc={cell?.avatar?.src} />\n );\n }\n\n if (cell?.type === 'currency' && cell?.primaryCurrency?.currency) {\n mediaContent = (\n <Flag code={cell?.primaryCurrency?.currency?.toLowerCase()} intrinsicSize={24} />\n );\n }\n\n if (cell?.type === 'status') {\n mediaContent = <StatusIcon size={24} sentiment={cell?.sentiment ?? 'neutral'} />;\n }\n\n if (mediaContent) {\n return (\n <div\n aria-hidden=\"true\"\n className=\"np-table-content-media\"\n data-testid=\"np-table-content-media\"\n >\n {mediaContent}\n </div>\n );\n }\n };\n\n const formatCurrencyValue = (currency?: MoneyProps) => {\n if (currency) {\n return <Money amount={currency.amount} currency={currency.currency} alwaysShowDecimals />;\n }\n\n return '';\n };\n\n return (\n <td\n className={clsx(\n 'np-table-cell',\n cell?.type ? `np-table-cell--${cell?.type}` : '',\n `np-table-cell--${alignment}`,\n className,\n )}\n colSpan={colSpan}\n >\n {cell?.type === 'text' && cell?.text && (\n <TableStatusText text={cell?.text} status={cell?.status} />\n )}\n {cell?.type && ['leading', 'currency', 'status'].includes(cell?.type) && (\n <div\n className={clsx('np-table-content', {\n 'np-table-content--reversed': alignment === 'right',\n })}\n data-testid=\"np-table-content\"\n >\n {getContentMedia()}\n <div className=\"np-table-content-body\">\n {(cell?.primaryCurrency ?? cell?.primaryText) && (\n <TableStatusText\n text={\n cell?.type === 'currency'\n ? formatCurrencyValue(cell?.primaryCurrency)\n : (cell?.primaryText ?? '')\n }\n status={cell?.type !== 'status' ? cell?.status : undefined}\n typography=\"default-bold\"\n />\n )}\n {(cell?.secondaryCurrency ?? cell?.secondaryText) && (\n <Body>\n {cell?.type === 'currency'\n ? formatCurrencyValue(cell?.secondaryCurrency)\n : cell?.secondaryText}\n </Body>\n )}\n </div>\n </div>\n )}\n {children}\n </td>\n );\n};\n\nexport default TableCell;\n"],"names":["TableCell","cell","alignment","className","colSpan","children","getContentMedia","mediaContent","type","avatar","src","profileName","_jsx","AvatarView","size","imgSrc","primaryCurrency","currency","Flag","code","toLowerCase","intrinsicSize","StatusIcon","sentiment","formatCurrencyValue","Money","amount","alwaysShowDecimals","_jsxs","clsx","text","TableStatusText","status","includes","primaryText","undefined","typography","secondaryCurrency","secondaryText","Body"],"mappings":";;;;;;;;;;AA2DMA,MAAAA,SAAS,GAAGA,CAAC;EAAEC,IAAI;AAAEC,EAAAA,SAAS,GAAG,MAAM;EAAEC,SAAS;EAAEC,OAAO;AAAEC,EAAAA,QAAAA;AAAQ,CAAkB,KAAI;EAC/F,MAAMC,eAAe,GAAGA,MAAK;IAC3B,IAAIC,YAAY,GAAG,IAAI,CAAA;AAEvB,IAAA,IAAIN,IAAI,EAAEO,IAAI,KAAK,SAAS,KAAKP,IAAI,EAAEQ,MAAM,EAAEC,GAAG,IAAIT,IAAI,EAAEQ,MAAM,EAAEE,WAAW,CAAC,EAAE;MAChFJ,YAAY,gBACVK,GAAA,CAACC,UAAU,EAAA;AAACF,QAAAA,WAAW,EAAEV,IAAI,EAAEQ,MAAM,EAAEE,WAAY;AAACG,QAAAA,IAAI,EAAE,EAAG;AAACC,QAAAA,MAAM,EAAEd,IAAI,EAAEQ,MAAM,EAAEC,GAAAA;AAAI,OAAA,CACzF,CAAA;AACH,KAAA;IAEA,IAAIT,IAAI,EAAEO,IAAI,KAAK,UAAU,IAAIP,IAAI,EAAEe,eAAe,EAAEC,QAAQ,EAAE;MAChEV,YAAY,gBACVK,GAAA,CAACM,IAAI,EAAA;QAACC,IAAI,EAAElB,IAAI,EAAEe,eAAe,EAAEC,QAAQ,EAAEG,WAAW,EAAG;AAACC,QAAAA,aAAa,EAAE,EAAA;AAAG,OAAG,CAClF,CAAA;AACH,KAAA;AAEA,IAAA,IAAIpB,IAAI,EAAEO,IAAI,KAAK,QAAQ,EAAE;MAC3BD,YAAY,gBAAGK,GAAA,CAACU,UAAU,EAAA;AAACR,QAAAA,IAAI,EAAE,EAAG;AAACS,QAAAA,SAAS,EAAEtB,IAAI,EAAEsB,SAAS,IAAI,SAAA;AAAU,QAAG,CAAA;AAClF,KAAA;AAEA,IAAA,IAAIhB,YAAY,EAAE;AAChB,MAAA,oBACEK,GAAA,CAAA,KAAA,EAAA;AACE,QAAA,aAAA,EAAY,MAAM;AAClBT,QAAAA,SAAS,EAAC,wBAAwB;AAClC,QAAA,aAAA,EAAY,wBAAwB;AAAAE,QAAAA,QAAA,EAEnCE,YAAAA;AAAY,OACV,CAAC,CAAA;AAEV,KAAA;GACD,CAAA;EAED,MAAMiB,mBAAmB,GAAIP,QAAqB,IAAI;AACpD,IAAA,IAAIA,QAAQ,EAAE;MACZ,oBAAOL,GAAA,CAACa,KAAK,EAAA;QAACC,MAAM,EAAET,QAAQ,CAACS,MAAO;QAACT,QAAQ,EAAEA,QAAQ,CAACA,QAAS;QAACU,kBAAkB,EAAA,IAAA;AAAA,OAAA,CAAG,CAAA;AAC3F,KAAA;AAEA,IAAA,OAAO,EAAE,CAAA;GACV,CAAA;AAED,EAAA,oBACEC,IAAA,CAAA,IAAA,EAAA;IACEzB,SAAS,EAAE0B,IAAI,CACb,eAAe,EACf5B,IAAI,EAAEO,IAAI,GAAG,CAAkBP,eAAAA,EAAAA,IAAI,EAAEO,IAAI,CAAA,CAAE,GAAG,EAAE,EAChD,kBAAkBN,SAAS,CAAA,CAAE,EAC7BC,SAAS,CACT;AACFC,IAAAA,OAAO,EAAEA,OAAQ;AAAAC,IAAAA,QAAA,EAEhBJ,CAAAA,IAAI,EAAEO,IAAI,KAAK,MAAM,IAAIP,IAAI,EAAE6B,IAAI,iBAClClB,GAAA,CAACmB,eAAe,EAAA;MAACD,IAAI,EAAE7B,IAAI,EAAE6B,IAAK;MAACE,MAAM,EAAE/B,IAAI,EAAE+B,MAAAA;KAAO,CACzD,EACA/B,IAAI,EAAEO,IAAI,IAAI,CAAC,SAAS,EAAE,UAAU,EAAE,QAAQ,CAAC,CAACyB,QAAQ,CAAChC,IAAI,EAAEO,IAAI,CAAC,iBACnEoB,IAAA,CAAA,KAAA,EAAA;AACEzB,MAAAA,SAAS,EAAE0B,IAAI,CAAC,kBAAkB,EAAE;QAClC,4BAA4B,EAAE3B,SAAS,KAAK,OAAA;AAC7C,OAAA,CAAE;AACH,MAAA,aAAA,EAAY,kBAAkB;AAAAG,MAAAA,QAAA,EAE7BC,CAAAA,eAAe,EAAE,eAClBsB,IAAA,CAAA,KAAA,EAAA;AAAKzB,QAAAA,SAAS,EAAC,uBAAuB;AAAAE,QAAAA,QAAA,EACnC,CAAA,CAACJ,IAAI,EAAEe,eAAe,IAAIf,IAAI,EAAEiC,WAAW,kBAC1CtB,GAAA,CAACmB,eAAe,EAAA;AACdD,UAAAA,IAAI,EACF7B,IAAI,EAAEO,IAAI,KAAK,UAAU,GACrBgB,mBAAmB,CAACvB,IAAI,EAAEe,eAAe,CAAC,GACzCf,IAAI,EAAEiC,WAAW,IAAI,EAC3B;UACDF,MAAM,EAAE/B,IAAI,EAAEO,IAAI,KAAK,QAAQ,GAAGP,IAAI,EAAE+B,MAAM,GAAGG,SAAU;AAC3DC,UAAAA,UAAU,EAAC,cAAA;AAAc,SAAA,CAE5B,EACA,CAACnC,IAAI,EAAEoC,iBAAiB,IAAIpC,IAAI,EAAEqC,aAAa,kBAC9C1B,GAAA,CAAC2B,IAAI,EAAA;AAAAlC,UAAAA,QAAA,EACFJ,IAAI,EAAEO,IAAI,KAAK,UAAU,GACtBgB,mBAAmB,CAACvB,IAAI,EAAEoC,iBAAiB,CAAC,GAC5CpC,IAAI,EAAEqC,aAAAA;AAAa,SACnB,CACP,CAAA;AAAA,OACE,CACP,CAAA;KAAK,CACN,EACAjC,QAAQ,CAAA;AAAA,GACP,CAAC,CAAA;AAET;;;;"}
@@ -1,57 +0,0 @@
1
- 'use strict';
2
-
3
- var reactIntl = require('react-intl');
4
- var Table_messages = require('./Table.messages.js');
5
- var TableStatusText = require('./TableStatusText.js');
6
- var clsx = require('clsx');
7
- var jsxRuntime = require('react/jsx-runtime');
8
-
9
- const TableHeader = ({
10
- header,
11
- className,
12
- alignment = 'left',
13
- status,
14
- width,
15
- isActionHeader = false
16
- }) => {
17
- const {
18
- formatMessage
19
- } = reactIntl.useIntl();
20
- const getHeaderContent = () => {
21
- if (isActionHeader) {
22
- // `Action` header doesn't have visual text content, but it has the header, which is visible for screen readers only
23
- return /*#__PURE__*/jsxRuntime.jsx(TableStatusText, {
24
- text: formatMessage(Table_messages.actionHeader),
25
- className: `np-table-header-content${isActionHeader ? ' sr-only' : ''}`
26
- });
27
- }
28
- if (header) {
29
- return /*#__PURE__*/jsxRuntime.jsx(TableStatusText, {
30
- text: header,
31
- className: `np-table-header-content${isActionHeader ? ' sr-only' : ''}`,
32
- status: status,
33
- typography: "default-bold"
34
- });
35
- }
36
- // If headers are empty, we still should render empty headers to keep visual consistency
37
- return /*#__PURE__*/jsxRuntime.jsx("div", {
38
- className: "np-table-header-content np-text-body-default-bold",
39
- "data-testid": "np-table-empty-header",
40
- children: "\xA0"
41
- });
42
- };
43
- return /*#__PURE__*/jsxRuntime.jsx("th", {
44
- className: clsx.clsx('np-table-header', className, `np-table-header--${alignment}`, {
45
- 'np-table-header--error': status === 'error',
46
- 'np-table-header--action': isActionHeader
47
- }),
48
- style: {
49
- minWidth: width,
50
- width
51
- },
52
- children: getHeaderContent()
53
- });
54
- };
55
-
56
- module.exports = TableHeader;
57
- //# sourceMappingURL=TableHeader.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TableHeader.js","sources":["../../src/table/TableHeader.tsx"],"sourcesContent":["import { useIntl } from 'react-intl';\nimport messages from './Table.messages';\nimport TableStatusText from './TableStatusText';\nimport { clsx } from 'clsx';\n\nexport interface TableHeaderType {\n header?: string;\n className?: string;\n alignment?: 'left' | 'right';\n status?: 'error';\n width?: string;\n}\n\nexport interface TableHeaderProps extends TableHeaderType {\n isActionHeader?: boolean;\n}\n\nconst TableHeader = ({\n header,\n className,\n alignment = 'left',\n status,\n width,\n isActionHeader = false,\n}: TableHeaderProps) => {\n const { formatMessage } = useIntl();\n\n const getHeaderContent = () => {\n if (isActionHeader) {\n // `Action` header doesn't have visual text content, but it has the header, which is visible for screen readers only\n return (\n <TableStatusText\n text={formatMessage(messages.actionHeader)}\n className={`np-table-header-content${isActionHeader ? ' sr-only' : ''}`}\n />\n );\n }\n\n if (header) {\n return (\n <TableStatusText\n text={header}\n className={`np-table-header-content${isActionHeader ? ' sr-only' : ''}`}\n status={status}\n typography=\"default-bold\"\n />\n );\n }\n\n // If headers are empty, we still should render empty headers to keep visual consistency\n return (\n <div\n className=\"np-table-header-content np-text-body-default-bold\"\n data-testid=\"np-table-empty-header\"\n >\n &nbsp;\n </div>\n );\n };\n\n return (\n <th\n className={clsx('np-table-header', className, `np-table-header--${alignment}`, {\n 'np-table-header--error': status === 'error',\n 'np-table-header--action': isActionHeader,\n })}\n style={{ minWidth: width, width }}\n >\n {getHeaderContent()}\n </th>\n );\n};\n\nexport default TableHeader;\n"],"names":["TableHeader","header","className","alignment","status","width","isActionHeader","formatMessage","useIntl","getHeaderContent","_jsx","TableStatusText","text","messages","actionHeader","typography","children","clsx","style","minWidth"],"mappings":";;;;;;;;AAiBMA,MAAAA,WAAW,GAAGA,CAAC;EACnBC,MAAM;EACNC,SAAS;AACTC,EAAAA,SAAS,GAAG,MAAM;EAClBC,MAAM;EACNC,KAAK;AACLC,EAAAA,cAAc,GAAG,KAAA;AACA,CAAA,KAAI;EACrB,MAAM;AAAEC,IAAAA,aAAAA;GAAe,GAAGC,iBAAO,EAAE,CAAA;EAEnC,MAAMC,gBAAgB,GAAGA,MAAK;AAC5B,IAAA,IAAIH,cAAc,EAAE;AAClB;MACA,oBACEI,cAAA,CAACC,eAAe,EAAA;AACdC,QAAAA,IAAI,EAAEL,aAAa,CAACM,cAAQ,CAACC,YAAY,CAAE;AAC3CZ,QAAAA,SAAS,EAAE,CAA0BI,uBAAAA,EAAAA,cAAc,GAAG,UAAU,GAAG,EAAE,CAAA,CAAA;AAAG,OAAA,CACxE,CAAA;AAEN,KAAA;AAEA,IAAA,IAAIL,MAAM,EAAE;MACV,oBACES,cAAA,CAACC,eAAe,EAAA;AACdC,QAAAA,IAAI,EAAEX,MAAO;AACbC,QAAAA,SAAS,EAAE,CAA0BI,uBAAAA,EAAAA,cAAc,GAAG,UAAU,GAAG,EAAE,CAAG,CAAA;AACxEF,QAAAA,MAAM,EAAEA,MAAO;AACfW,QAAAA,UAAU,EAAC,cAAA;AAAc,OAAA,CACzB,CAAA;AAEN,KAAA;AAEA;AACA,IAAA,oBACEL,cAAA,CAAA,KAAA,EAAA;AACER,MAAAA,SAAS,EAAC,mDAAmD;AAC7D,MAAA,aAAA,EAAY,uBAAuB;AAAAc,MAAAA,QAAA,EAEnC,MAAA;AACF,KAAK,CAAC,CAAA;GAET,CAAA;AAED,EAAA,oBACEN,cAAA,CAAA,IAAA,EAAA;IACER,SAAS,EAAEe,SAAI,CAAC,iBAAiB,EAAEf,SAAS,EAAE,CAAA,iBAAA,EAAoBC,SAAS,CAAA,CAAE,EAAE;MAC7E,wBAAwB,EAAEC,MAAM,KAAK,OAAO;AAC5C,MAAA,yBAAyB,EAAEE,cAAAA;AAC5B,KAAA,CAAE;AACHY,IAAAA,KAAK,EAAE;AAAEC,MAAAA,QAAQ,EAAEd,KAAK;AAAEA,MAAAA,KAAAA;KAAQ;IAAAW,QAAA,EAEjCP,gBAAgB;AAAE,GACjB,CAAC,CAAA;AAET;;;;"}
@@ -1,55 +0,0 @@
1
- import { useIntl } from 'react-intl';
2
- import messages from './Table.messages.mjs';
3
- import TableStatusText from './TableStatusText.mjs';
4
- import { clsx } from 'clsx';
5
- import { jsx } from 'react/jsx-runtime';
6
-
7
- const TableHeader = ({
8
- header,
9
- className,
10
- alignment = 'left',
11
- status,
12
- width,
13
- isActionHeader = false
14
- }) => {
15
- const {
16
- formatMessage
17
- } = useIntl();
18
- const getHeaderContent = () => {
19
- if (isActionHeader) {
20
- // `Action` header doesn't have visual text content, but it has the header, which is visible for screen readers only
21
- return /*#__PURE__*/jsx(TableStatusText, {
22
- text: formatMessage(messages.actionHeader),
23
- className: `np-table-header-content${isActionHeader ? ' sr-only' : ''}`
24
- });
25
- }
26
- if (header) {
27
- return /*#__PURE__*/jsx(TableStatusText, {
28
- text: header,
29
- className: `np-table-header-content${isActionHeader ? ' sr-only' : ''}`,
30
- status: status,
31
- typography: "default-bold"
32
- });
33
- }
34
- // If headers are empty, we still should render empty headers to keep visual consistency
35
- return /*#__PURE__*/jsx("div", {
36
- className: "np-table-header-content np-text-body-default-bold",
37
- "data-testid": "np-table-empty-header",
38
- children: "\xA0"
39
- });
40
- };
41
- return /*#__PURE__*/jsx("th", {
42
- className: clsx('np-table-header', className, `np-table-header--${alignment}`, {
43
- 'np-table-header--error': status === 'error',
44
- 'np-table-header--action': isActionHeader
45
- }),
46
- style: {
47
- minWidth: width,
48
- width
49
- },
50
- children: getHeaderContent()
51
- });
52
- };
53
-
54
- export { TableHeader as default };
55
- //# sourceMappingURL=TableHeader.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TableHeader.mjs","sources":["../../src/table/TableHeader.tsx"],"sourcesContent":["import { useIntl } from 'react-intl';\nimport messages from './Table.messages';\nimport TableStatusText from './TableStatusText';\nimport { clsx } from 'clsx';\n\nexport interface TableHeaderType {\n header?: string;\n className?: string;\n alignment?: 'left' | 'right';\n status?: 'error';\n width?: string;\n}\n\nexport interface TableHeaderProps extends TableHeaderType {\n isActionHeader?: boolean;\n}\n\nconst TableHeader = ({\n header,\n className,\n alignment = 'left',\n status,\n width,\n isActionHeader = false,\n}: TableHeaderProps) => {\n const { formatMessage } = useIntl();\n\n const getHeaderContent = () => {\n if (isActionHeader) {\n // `Action` header doesn't have visual text content, but it has the header, which is visible for screen readers only\n return (\n <TableStatusText\n text={formatMessage(messages.actionHeader)}\n className={`np-table-header-content${isActionHeader ? ' sr-only' : ''}`}\n />\n );\n }\n\n if (header) {\n return (\n <TableStatusText\n text={header}\n className={`np-table-header-content${isActionHeader ? ' sr-only' : ''}`}\n status={status}\n typography=\"default-bold\"\n />\n );\n }\n\n // If headers are empty, we still should render empty headers to keep visual consistency\n return (\n <div\n className=\"np-table-header-content np-text-body-default-bold\"\n data-testid=\"np-table-empty-header\"\n >\n &nbsp;\n </div>\n );\n };\n\n return (\n <th\n className={clsx('np-table-header', className, `np-table-header--${alignment}`, {\n 'np-table-header--error': status === 'error',\n 'np-table-header--action': isActionHeader,\n })}\n style={{ minWidth: width, width }}\n >\n {getHeaderContent()}\n </th>\n );\n};\n\nexport default TableHeader;\n"],"names":["TableHeader","header","className","alignment","status","width","isActionHeader","formatMessage","useIntl","getHeaderContent","_jsx","TableStatusText","text","messages","actionHeader","typography","children","clsx","style","minWidth"],"mappings":";;;;;;AAiBMA,MAAAA,WAAW,GAAGA,CAAC;EACnBC,MAAM;EACNC,SAAS;AACTC,EAAAA,SAAS,GAAG,MAAM;EAClBC,MAAM;EACNC,KAAK;AACLC,EAAAA,cAAc,GAAG,KAAA;AACA,CAAA,KAAI;EACrB,MAAM;AAAEC,IAAAA,aAAAA;GAAe,GAAGC,OAAO,EAAE,CAAA;EAEnC,MAAMC,gBAAgB,GAAGA,MAAK;AAC5B,IAAA,IAAIH,cAAc,EAAE;AAClB;MACA,oBACEI,GAAA,CAACC,eAAe,EAAA;AACdC,QAAAA,IAAI,EAAEL,aAAa,CAACM,QAAQ,CAACC,YAAY,CAAE;AAC3CZ,QAAAA,SAAS,EAAE,CAA0BI,uBAAAA,EAAAA,cAAc,GAAG,UAAU,GAAG,EAAE,CAAA,CAAA;AAAG,OAAA,CACxE,CAAA;AAEN,KAAA;AAEA,IAAA,IAAIL,MAAM,EAAE;MACV,oBACES,GAAA,CAACC,eAAe,EAAA;AACdC,QAAAA,IAAI,EAAEX,MAAO;AACbC,QAAAA,SAAS,EAAE,CAA0BI,uBAAAA,EAAAA,cAAc,GAAG,UAAU,GAAG,EAAE,CAAG,CAAA;AACxEF,QAAAA,MAAM,EAAEA,MAAO;AACfW,QAAAA,UAAU,EAAC,cAAA;AAAc,OAAA,CACzB,CAAA;AAEN,KAAA;AAEA;AACA,IAAA,oBACEL,GAAA,CAAA,KAAA,EAAA;AACER,MAAAA,SAAS,EAAC,mDAAmD;AAC7D,MAAA,aAAA,EAAY,uBAAuB;AAAAc,MAAAA,QAAA,EAEnC,MAAA;AACF,KAAK,CAAC,CAAA;GAET,CAAA;AAED,EAAA,oBACEN,GAAA,CAAA,IAAA,EAAA;IACER,SAAS,EAAEe,IAAI,CAAC,iBAAiB,EAAEf,SAAS,EAAE,CAAA,iBAAA,EAAoBC,SAAS,CAAA,CAAE,EAAE;MAC7E,wBAAwB,EAAEC,MAAM,KAAK,OAAO;AAC5C,MAAA,yBAAyB,EAAEE,cAAAA;AAC5B,KAAA,CAAE;AACHY,IAAAA,KAAK,EAAE;AAAEC,MAAAA,QAAQ,EAAEd,KAAK;AAAEA,MAAAA,KAAAA;KAAQ;IAAAW,QAAA,EAEjCP,gBAAgB;AAAE,GACjB,CAAC,CAAA;AAET;;;;"}
@@ -1,85 +0,0 @@
1
- 'use strict';
2
-
3
- require('react');
4
- var TableCell = require('./TableCell.js');
5
- var Chevron = require('../chevron/Chevron.js');
6
- require('../common/theme.js');
7
- require('../common/direction.js');
8
- require('../common/propsValues/control.js');
9
- require('../common/propsValues/breakpoint.js');
10
- require('../common/propsValues/size.js');
11
- require('../common/propsValues/typography.js');
12
- require('../common/propsValues/width.js');
13
- require('../common/propsValues/type.js');
14
- require('../common/propsValues/dateMode.js');
15
- require('../common/propsValues/monthFormat.js');
16
- var position = require('../common/propsValues/position.js');
17
- require('../common/propsValues/layouts.js');
18
- require('../common/propsValues/status.js');
19
- require('../common/propsValues/sentiment.js');
20
- require('../common/propsValues/profileType.js');
21
- require('../common/propsValues/variant.js');
22
- require('../common/propsValues/scroll.js');
23
- require('../common/propsValues/markdownNodeType.js');
24
- require('../common/fileType.js');
25
- require('@transferwise/icons');
26
- var clsx = require('clsx');
27
- require('react-intl');
28
- require('../common/closeButton/CloseButton.messages.js');
29
- var jsxRuntime = require('react/jsx-runtime');
30
-
31
- const TableRow = ({
32
- rowData,
33
- hasSeparator = false,
34
- children,
35
- onRowClick
36
- }) => {
37
- return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
38
- children: [/*#__PURE__*/jsxRuntime.jsxs("tr", {
39
- className: clsx.clsx('np-table-row', {
40
- 'np-table-row--clickable': !!onRowClick
41
- }),
42
- "data-testid": "np-table-row",
43
- role: onRowClick ? 'button' : undefined,
44
- tabIndex: 0,
45
- onClick: onRowClick && rowData ? () => onRowClick(rowData) : undefined,
46
- onKeyDown: ({
47
- key
48
- }) => {
49
- if (onRowClick && rowData && key === 'Enter') {
50
- onRowClick(rowData);
51
- }
52
- },
53
- children: [rowData?.cells ? rowData?.cells?.map((item, index) => {
54
- const itemIndex = item.cell?.text ? item.cell?.text.concat(index.toString()) : index;
55
- return /*#__PURE__*/jsxRuntime.jsx(TableCell, {
56
- ...item
57
- }, itemIndex);
58
- }) : children, onRowClick && /*#__PURE__*/jsxRuntime.jsx(TableCell, {
59
- className: "np-table-cell--action",
60
- children: /*#__PURE__*/jsxRuntime.jsx("div", {
61
- "aria-hidden": "true",
62
- children: /*#__PURE__*/jsxRuntime.jsx(Chevron, {
63
- orientation: position.Position.RIGHT
64
- })
65
- })
66
- })]
67
- }), hasSeparator && /*#__PURE__*/jsxRuntime.jsx("tr", {
68
- "aria-hidden": "true",
69
- className: "np-table-row np-table-row--separator",
70
- "data-testid": "np-table-row--separator",
71
- children: /*#__PURE__*/jsxRuntime.jsx("td", {
72
- className: "np-table-cell np-table-cell--cosmetic",
73
- colSpan: onRowClick ? Number(rowData?.cells?.length) + 1 : rowData?.cells?.length,
74
- "data-testid": "np-table-cell--cosmetic",
75
- children: /*#__PURE__*/jsxRuntime.jsx("div", {
76
- className: "np-table-cell-separator",
77
- "data-testid": "np-table-cell-separator"
78
- })
79
- })
80
- })]
81
- });
82
- };
83
-
84
- module.exports = TableRow;
85
- //# sourceMappingURL=TableRow.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TableRow.js","sources":["../../src/table/TableRow.tsx"],"sourcesContent":["import React from 'react';\nimport TableCell, { TableCellProps } from './TableCell';\nimport Chevron from '../chevron';\nimport { Position } from '../common';\nimport { clsx } from 'clsx';\n\nexport interface TableRowType {\n cells?: TableCellProps[];\n}\n\nexport interface TableRowClickableType extends TableRowType {\n id: number | string; // `id` is mandatory for clickable rows\n}\n\nexport interface TableRowProps {\n rowData?: TableRowType | TableRowClickableType;\n hasSeparator?: boolean;\n children?: React.ReactNode;\n onRowClick?: (rowData: TableRowType | TableRowClickableType) => void;\n}\n\nconst TableRow = ({ rowData, hasSeparator = false, children, onRowClick }: TableRowProps) => {\n return (\n <>\n <tr\n className={clsx('np-table-row', { 'np-table-row--clickable': !!onRowClick })}\n data-testid=\"np-table-row\"\n role={onRowClick ? 'button' : undefined}\n tabIndex={0}\n onClick={onRowClick && rowData ? () => onRowClick(rowData) : undefined}\n onKeyDown={({ key }) => {\n if (onRowClick && rowData && key === 'Enter') {\n onRowClick(rowData);\n }\n }}\n >\n {rowData?.cells\n ? rowData?.cells?.map((item, index) => {\n const itemIndex = item.cell?.text ? item.cell?.text.concat(index.toString()) : index;\n return <TableCell key={itemIndex} {...item} />;\n })\n : children}\n {onRowClick && (\n <TableCell className=\"np-table-cell--action\">\n <div aria-hidden=\"true\">\n <Chevron orientation={Position.RIGHT} />\n </div>\n </TableCell>\n )}\n </tr>\n {hasSeparator && (\n <tr\n aria-hidden=\"true\"\n className=\"np-table-row np-table-row--separator\"\n data-testid=\"np-table-row--separator\"\n >\n <td\n className=\"np-table-cell np-table-cell--cosmetic\"\n colSpan={onRowClick ? Number(rowData?.cells?.length) + 1 : rowData?.cells?.length}\n data-testid=\"np-table-cell--cosmetic\"\n >\n <div className=\"np-table-cell-separator\" data-testid=\"np-table-cell-separator\" />\n </td>\n </tr>\n )}\n </>\n );\n};\n\nexport default TableRow;\n"],"names":["TableRow","rowData","hasSeparator","children","onRowClick","_jsxs","_Fragment","className","clsx","role","undefined","tabIndex","onClick","onKeyDown","key","cells","map","item","index","itemIndex","cell","text","concat","toString","_jsx","TableCell","Chevron","orientation","Position","RIGHT","colSpan","Number","length"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBMA,MAAAA,QAAQ,GAAGA,CAAC;EAAEC,OAAO;AAAEC,EAAAA,YAAY,GAAG,KAAK;EAAEC,QAAQ;AAAEC,EAAAA,UAAAA;AAAU,CAAiB,KAAI;EAC1F,oBACEC,eAAA,CAAAC,mBAAA,EAAA;AAAAH,IAAAA,QAAA,gBACEE,eAAA,CAAA,IAAA,EAAA;AACEE,MAAAA,SAAS,EAAEC,SAAI,CAAC,cAAc,EAAE;QAAE,yBAAyB,EAAE,CAAC,CAACJ,UAAAA;AAAY,OAAA,CAAE;AAC7E,MAAA,aAAA,EAAY,cAAc;AAC1BK,MAAAA,IAAI,EAAEL,UAAU,GAAG,QAAQ,GAAGM,SAAU;AACxCC,MAAAA,QAAQ,EAAE,CAAE;MACZC,OAAO,EAAER,UAAU,IAAIH,OAAO,GAAG,MAAMG,UAAU,CAACH,OAAO,CAAC,GAAGS,SAAU;AACvEG,MAAAA,SAAS,EAAEA,CAAC;AAAEC,QAAAA,GAAAA;AAAG,OAAE,KAAI;AACrB,QAAA,IAAIV,UAAU,IAAIH,OAAO,IAAIa,GAAG,KAAK,OAAO,EAAE;UAC5CV,UAAU,CAACH,OAAO,CAAC,CAAA;AACrB,SAAA;OACA;AAAAE,MAAAA,QAAA,EAEDF,CAAAA,OAAO,EAAEc,KAAK,GACXd,OAAO,EAAEc,KAAK,EAAEC,GAAG,CAAC,CAACC,IAAI,EAAEC,KAAK,KAAI;QAClC,MAAMC,SAAS,GAAGF,IAAI,CAACG,IAAI,EAAEC,IAAI,GAAGJ,IAAI,CAACG,IAAI,EAAEC,IAAI,CAACC,MAAM,CAACJ,KAAK,CAACK,QAAQ,EAAE,CAAC,GAAGL,KAAK,CAAA;QACpF,oBAAOM,cAAA,CAACC,SAAS,EAAA;UAAA,GAAqBR,IAAAA;AAAI,SAAA,EAAnBE,UAAuB,CAAA;OAC/C,CAAC,GACFhB,QAAQ,EACXC,UAAU,iBACToB,cAAA,CAACC,SAAS,EAAA;AAAClB,QAAAA,SAAS,EAAC,uBAAuB;AAAAJ,QAAAA,QAAA,eAC1CqB,cAAA,CAAA,KAAA,EAAA;AAAK,UAAA,aAAA,EAAY,MAAM;UAAArB,QAAA,eACrBqB,cAAA,CAACE,OAAO,EAAA;YAACC,WAAW,EAAEC,iBAAQ,CAACC,KAAAA;WACjC,CAAA;SAAK,CAAA;AACP,OAAW,CACZ,CAAA;AAAA,KACC,CACJ,EAAC3B,YAAY,iBACXsB,cAAA,CAAA,IAAA,EAAA;AACE,MAAA,aAAA,EAAY,MAAM;AAClBjB,MAAAA,SAAS,EAAC,sCAAsC;AAChD,MAAA,aAAA,EAAY,yBAAyB;AAAAJ,MAAAA,QAAA,eAErCqB,cAAA,CAAA,IAAA,EAAA;AACEjB,QAAAA,SAAS,EAAC,uCAAuC;AACjDuB,QAAAA,OAAO,EAAE1B,UAAU,GAAG2B,MAAM,CAAC9B,OAAO,EAAEc,KAAK,EAAEiB,MAAM,CAAC,GAAG,CAAC,GAAG/B,OAAO,EAAEc,KAAK,EAAEiB,MAAO;AAClF,QAAA,aAAA,EAAY,yBAAyB;AAAA7B,QAAAA,QAAA,eAErCqB,cAAA,CAAA,KAAA,EAAA;AAAKjB,UAAAA,SAAS,EAAC,yBAAyB;UAAC,aAAY,EAAA,yBAAA;SACvD,CAAA;OAAI,CAAA;AACN,KAAI,CACL,CAAA;AAAA,GACH,CAAG,CAAA;AAEP;;;;"}
@@ -1,83 +0,0 @@
1
- import 'react';
2
- import TableCell from './TableCell.mjs';
3
- import Chevron from '../chevron/Chevron.mjs';
4
- import '../common/theme.mjs';
5
- import '../common/direction.mjs';
6
- import '../common/propsValues/control.mjs';
7
- import '../common/propsValues/breakpoint.mjs';
8
- import '../common/propsValues/size.mjs';
9
- import '../common/propsValues/typography.mjs';
10
- import '../common/propsValues/width.mjs';
11
- import '../common/propsValues/type.mjs';
12
- import '../common/propsValues/dateMode.mjs';
13
- import '../common/propsValues/monthFormat.mjs';
14
- import { Position } from '../common/propsValues/position.mjs';
15
- import '../common/propsValues/layouts.mjs';
16
- import '../common/propsValues/status.mjs';
17
- import '../common/propsValues/sentiment.mjs';
18
- import '../common/propsValues/profileType.mjs';
19
- import '../common/propsValues/variant.mjs';
20
- import '../common/propsValues/scroll.mjs';
21
- import '../common/propsValues/markdownNodeType.mjs';
22
- import '../common/fileType.mjs';
23
- import '@transferwise/icons';
24
- import { clsx } from 'clsx';
25
- import 'react-intl';
26
- import '../common/closeButton/CloseButton.messages.mjs';
27
- import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
28
-
29
- const TableRow = ({
30
- rowData,
31
- hasSeparator = false,
32
- children,
33
- onRowClick
34
- }) => {
35
- return /*#__PURE__*/jsxs(Fragment, {
36
- children: [/*#__PURE__*/jsxs("tr", {
37
- className: clsx('np-table-row', {
38
- 'np-table-row--clickable': !!onRowClick
39
- }),
40
- "data-testid": "np-table-row",
41
- role: onRowClick ? 'button' : undefined,
42
- tabIndex: 0,
43
- onClick: onRowClick && rowData ? () => onRowClick(rowData) : undefined,
44
- onKeyDown: ({
45
- key
46
- }) => {
47
- if (onRowClick && rowData && key === 'Enter') {
48
- onRowClick(rowData);
49
- }
50
- },
51
- children: [rowData?.cells ? rowData?.cells?.map((item, index) => {
52
- const itemIndex = item.cell?.text ? item.cell?.text.concat(index.toString()) : index;
53
- return /*#__PURE__*/jsx(TableCell, {
54
- ...item
55
- }, itemIndex);
56
- }) : children, onRowClick && /*#__PURE__*/jsx(TableCell, {
57
- className: "np-table-cell--action",
58
- children: /*#__PURE__*/jsx("div", {
59
- "aria-hidden": "true",
60
- children: /*#__PURE__*/jsx(Chevron, {
61
- orientation: Position.RIGHT
62
- })
63
- })
64
- })]
65
- }), hasSeparator && /*#__PURE__*/jsx("tr", {
66
- "aria-hidden": "true",
67
- className: "np-table-row np-table-row--separator",
68
- "data-testid": "np-table-row--separator",
69
- children: /*#__PURE__*/jsx("td", {
70
- className: "np-table-cell np-table-cell--cosmetic",
71
- colSpan: onRowClick ? Number(rowData?.cells?.length) + 1 : rowData?.cells?.length,
72
- "data-testid": "np-table-cell--cosmetic",
73
- children: /*#__PURE__*/jsx("div", {
74
- className: "np-table-cell-separator",
75
- "data-testid": "np-table-cell-separator"
76
- })
77
- })
78
- })]
79
- });
80
- };
81
-
82
- export { TableRow as default };
83
- //# sourceMappingURL=TableRow.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TableRow.mjs","sources":["../../src/table/TableRow.tsx"],"sourcesContent":["import React from 'react';\nimport TableCell, { TableCellProps } from './TableCell';\nimport Chevron from '../chevron';\nimport { Position } from '../common';\nimport { clsx } from 'clsx';\n\nexport interface TableRowType {\n cells?: TableCellProps[];\n}\n\nexport interface TableRowClickableType extends TableRowType {\n id: number | string; // `id` is mandatory for clickable rows\n}\n\nexport interface TableRowProps {\n rowData?: TableRowType | TableRowClickableType;\n hasSeparator?: boolean;\n children?: React.ReactNode;\n onRowClick?: (rowData: TableRowType | TableRowClickableType) => void;\n}\n\nconst TableRow = ({ rowData, hasSeparator = false, children, onRowClick }: TableRowProps) => {\n return (\n <>\n <tr\n className={clsx('np-table-row', { 'np-table-row--clickable': !!onRowClick })}\n data-testid=\"np-table-row\"\n role={onRowClick ? 'button' : undefined}\n tabIndex={0}\n onClick={onRowClick && rowData ? () => onRowClick(rowData) : undefined}\n onKeyDown={({ key }) => {\n if (onRowClick && rowData && key === 'Enter') {\n onRowClick(rowData);\n }\n }}\n >\n {rowData?.cells\n ? rowData?.cells?.map((item, index) => {\n const itemIndex = item.cell?.text ? item.cell?.text.concat(index.toString()) : index;\n return <TableCell key={itemIndex} {...item} />;\n })\n : children}\n {onRowClick && (\n <TableCell className=\"np-table-cell--action\">\n <div aria-hidden=\"true\">\n <Chevron orientation={Position.RIGHT} />\n </div>\n </TableCell>\n )}\n </tr>\n {hasSeparator && (\n <tr\n aria-hidden=\"true\"\n className=\"np-table-row np-table-row--separator\"\n data-testid=\"np-table-row--separator\"\n >\n <td\n className=\"np-table-cell np-table-cell--cosmetic\"\n colSpan={onRowClick ? Number(rowData?.cells?.length) + 1 : rowData?.cells?.length}\n data-testid=\"np-table-cell--cosmetic\"\n >\n <div className=\"np-table-cell-separator\" data-testid=\"np-table-cell-separator\" />\n </td>\n </tr>\n )}\n </>\n );\n};\n\nexport default TableRow;\n"],"names":["TableRow","rowData","hasSeparator","children","onRowClick","_jsxs","_Fragment","className","clsx","role","undefined","tabIndex","onClick","onKeyDown","key","cells","map","item","index","itemIndex","cell","text","concat","toString","_jsx","TableCell","Chevron","orientation","Position","RIGHT","colSpan","Number","length"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBMA,MAAAA,QAAQ,GAAGA,CAAC;EAAEC,OAAO;AAAEC,EAAAA,YAAY,GAAG,KAAK;EAAEC,QAAQ;AAAEC,EAAAA,UAAAA;AAAU,CAAiB,KAAI;EAC1F,oBACEC,IAAA,CAAAC,QAAA,EAAA;AAAAH,IAAAA,QAAA,gBACEE,IAAA,CAAA,IAAA,EAAA;AACEE,MAAAA,SAAS,EAAEC,IAAI,CAAC,cAAc,EAAE;QAAE,yBAAyB,EAAE,CAAC,CAACJ,UAAAA;AAAY,OAAA,CAAE;AAC7E,MAAA,aAAA,EAAY,cAAc;AAC1BK,MAAAA,IAAI,EAAEL,UAAU,GAAG,QAAQ,GAAGM,SAAU;AACxCC,MAAAA,QAAQ,EAAE,CAAE;MACZC,OAAO,EAAER,UAAU,IAAIH,OAAO,GAAG,MAAMG,UAAU,CAACH,OAAO,CAAC,GAAGS,SAAU;AACvEG,MAAAA,SAAS,EAAEA,CAAC;AAAEC,QAAAA,GAAAA;AAAG,OAAE,KAAI;AACrB,QAAA,IAAIV,UAAU,IAAIH,OAAO,IAAIa,GAAG,KAAK,OAAO,EAAE;UAC5CV,UAAU,CAACH,OAAO,CAAC,CAAA;AACrB,SAAA;OACA;AAAAE,MAAAA,QAAA,EAEDF,CAAAA,OAAO,EAAEc,KAAK,GACXd,OAAO,EAAEc,KAAK,EAAEC,GAAG,CAAC,CAACC,IAAI,EAAEC,KAAK,KAAI;QAClC,MAAMC,SAAS,GAAGF,IAAI,CAACG,IAAI,EAAEC,IAAI,GAAGJ,IAAI,CAACG,IAAI,EAAEC,IAAI,CAACC,MAAM,CAACJ,KAAK,CAACK,QAAQ,EAAE,CAAC,GAAGL,KAAK,CAAA;QACpF,oBAAOM,GAAA,CAACC,SAAS,EAAA;UAAA,GAAqBR,IAAAA;AAAI,SAAA,EAAnBE,UAAuB,CAAA;OAC/C,CAAC,GACFhB,QAAQ,EACXC,UAAU,iBACToB,GAAA,CAACC,SAAS,EAAA;AAAClB,QAAAA,SAAS,EAAC,uBAAuB;AAAAJ,QAAAA,QAAA,eAC1CqB,GAAA,CAAA,KAAA,EAAA;AAAK,UAAA,aAAA,EAAY,MAAM;UAAArB,QAAA,eACrBqB,GAAA,CAACE,OAAO,EAAA;YAACC,WAAW,EAAEC,QAAQ,CAACC,KAAAA;WACjC,CAAA;SAAK,CAAA;AACP,OAAW,CACZ,CAAA;AAAA,KACC,CACJ,EAAC3B,YAAY,iBACXsB,GAAA,CAAA,IAAA,EAAA;AACE,MAAA,aAAA,EAAY,MAAM;AAClBjB,MAAAA,SAAS,EAAC,sCAAsC;AAChD,MAAA,aAAA,EAAY,yBAAyB;AAAAJ,MAAAA,QAAA,eAErCqB,GAAA,CAAA,IAAA,EAAA;AACEjB,QAAAA,SAAS,EAAC,uCAAuC;AACjDuB,QAAAA,OAAO,EAAE1B,UAAU,GAAG2B,MAAM,CAAC9B,OAAO,EAAEc,KAAK,EAAEiB,MAAM,CAAC,GAAG,CAAC,GAAG/B,OAAO,EAAEc,KAAK,EAAEiB,MAAO;AAClF,QAAA,aAAA,EAAY,yBAAyB;AAAA7B,QAAAA,QAAA,eAErCqB,GAAA,CAAA,KAAA,EAAA;AAAKjB,UAAAA,SAAS,EAAC,yBAAyB;UAAC,aAAY,EAAA,yBAAA;SACvD,CAAA;OAAI,CAAA;AACN,KAAI,CACL,CAAA;AAAA,GACH,CAAG,CAAA;AAEP;;;;"}
@@ -1,54 +0,0 @@
1
- 'use strict';
2
-
3
- var icons = require('@transferwise/icons');
4
- var clsx = require('clsx');
5
- require('react');
6
- var Body = require('../body/Body.js');
7
- require('../common/theme.js');
8
- require('../common/direction.js');
9
- require('../common/propsValues/control.js');
10
- require('../common/propsValues/breakpoint.js');
11
- require('../common/propsValues/size.js');
12
- var typography = require('../common/propsValues/typography.js');
13
- require('../common/propsValues/width.js');
14
- require('../common/propsValues/type.js');
15
- require('../common/propsValues/dateMode.js');
16
- require('../common/propsValues/monthFormat.js');
17
- require('../common/propsValues/position.js');
18
- require('../common/propsValues/layouts.js');
19
- require('../common/propsValues/status.js');
20
- require('../common/propsValues/sentiment.js');
21
- require('../common/propsValues/profileType.js');
22
- require('../common/propsValues/variant.js');
23
- require('../common/propsValues/scroll.js');
24
- require('../common/propsValues/markdownNodeType.js');
25
- require('../common/fileType.js');
26
- require('react-intl');
27
- require('../common/closeButton/CloseButton.messages.js');
28
- var jsxRuntime = require('react/jsx-runtime');
29
-
30
- const TableStatusText = ({
31
- text,
32
- className,
33
- status,
34
- typography: typography$1 = 'default'
35
- }) => {
36
- const typographyType = status ?? typography$1 === 'default-bold' ? typography.Typography.BODY_DEFAULT_BOLD : typography.Typography.BODY_DEFAULT;
37
- return /*#__PURE__*/jsxRuntime.jsxs(Body, {
38
- type: typographyType,
39
- className: clsx.clsx(className, {
40
- 'np-table-content--success': status === 'success',
41
- 'np-table-content--error': status === 'error'
42
- }),
43
- children: [text, status === 'success' && /*#__PURE__*/jsxRuntime.jsx(icons.CheckCircle, {
44
- className: "tw-icon--status",
45
- "data-testid": "check-icon"
46
- }), status === 'error' && /*#__PURE__*/jsxRuntime.jsx(icons.AlertCircle, {
47
- className: "tw-icon--status",
48
- "data-testid": "alert-icon"
49
- })]
50
- });
51
- };
52
-
53
- module.exports = TableStatusText;
54
- //# sourceMappingURL=TableStatusText.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TableStatusText.js","sources":["../../src/table/TableStatusText.tsx"],"sourcesContent":["import { AlertCircle, CheckCircle } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport React from 'react';\nimport Body from '../body';\nimport { Typography } from '../common';\n\nexport interface TableStatusTextProps {\n text: string | React.ReactNode;\n className?: string;\n status?: 'success' | 'error';\n typography?: 'default' | 'default-bold';\n}\n\nconst TableStatusText = ({\n text,\n className,\n status,\n typography = 'default',\n}: TableStatusTextProps) => {\n const typographyType =\n (status ?? typography === 'default-bold')\n ? Typography.BODY_DEFAULT_BOLD\n : Typography.BODY_DEFAULT;\n\n return (\n <Body\n type={typographyType}\n className={clsx(className, {\n 'np-table-content--success': status === 'success',\n 'np-table-content--error': status === 'error',\n })}\n >\n {text}\n {status === 'success' && <CheckCircle className=\"tw-icon--status\" data-testid=\"check-icon\" />}\n {status === 'error' && <AlertCircle className=\"tw-icon--status\" data-testid=\"alert-icon\" />}\n </Body>\n );\n};\n\nexport default TableStatusText;\n"],"names":["TableStatusText","text","className","status","typography","typographyType","Typography","BODY_DEFAULT_BOLD","BODY_DEFAULT","_jsxs","Body","type","clsx","children","_jsx","CheckCircle","AlertCircle"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaMA,MAAAA,eAAe,GAAGA,CAAC;EACvBC,IAAI;EACJC,SAAS;EACTC,MAAM;AACNC,cAAAA,YAAU,GAAG,SAAA;AAAS,CACD,KAAI;AACzB,EAAA,MAAMC,cAAc,GACjBF,MAAM,IAAIC,YAAU,KAAK,cAAc,GACpCE,qBAAU,CAACC,iBAAiB,GAC5BD,qBAAU,CAACE,YAAY,CAAA;EAE7B,oBACEC,eAAA,CAACC,IAAI,EAAA;AACHC,IAAAA,IAAI,EAAEN,cAAe;AACrBH,IAAAA,SAAS,EAAEU,SAAI,CAACV,SAAS,EAAE;MACzB,2BAA2B,EAAEC,MAAM,KAAK,SAAS;MACjD,yBAAyB,EAAEA,MAAM,KAAK,OAAA;AACvC,KAAA,CAAE;IAAAU,QAAA,EAAA,CAEFZ,IAAI,EACJE,MAAM,KAAK,SAAS,iBAAIW,cAAA,CAACC,iBAAW,EAAA;AAACb,MAAAA,SAAS,EAAC,iBAAiB;MAAC,aAAY,EAAA,YAAA;MAAe,EAC5FC,MAAM,KAAK,OAAO,iBAAIW,cAAA,CAACE,iBAAW,EAAA;AAACd,MAAAA,SAAS,EAAC,iBAAiB;MAAC,aAAY,EAAA,YAAA;AAAY,MAAG,CAAA;AAAA,GACvF,CAAC,CAAA;AAEX;;;;"}
@@ -1,52 +0,0 @@
1
- import { CheckCircle, AlertCircle } from '@transferwise/icons';
2
- import { clsx } from 'clsx';
3
- import 'react';
4
- import Body from '../body/Body.mjs';
5
- import '../common/theme.mjs';
6
- import '../common/direction.mjs';
7
- import '../common/propsValues/control.mjs';
8
- import '../common/propsValues/breakpoint.mjs';
9
- import '../common/propsValues/size.mjs';
10
- import { Typography } from '../common/propsValues/typography.mjs';
11
- import '../common/propsValues/width.mjs';
12
- import '../common/propsValues/type.mjs';
13
- import '../common/propsValues/dateMode.mjs';
14
- import '../common/propsValues/monthFormat.mjs';
15
- import '../common/propsValues/position.mjs';
16
- import '../common/propsValues/layouts.mjs';
17
- import '../common/propsValues/status.mjs';
18
- import '../common/propsValues/sentiment.mjs';
19
- import '../common/propsValues/profileType.mjs';
20
- import '../common/propsValues/variant.mjs';
21
- import '../common/propsValues/scroll.mjs';
22
- import '../common/propsValues/markdownNodeType.mjs';
23
- import '../common/fileType.mjs';
24
- import 'react-intl';
25
- import '../common/closeButton/CloseButton.messages.mjs';
26
- import { jsxs, jsx } from 'react/jsx-runtime';
27
-
28
- const TableStatusText = ({
29
- text,
30
- className,
31
- status,
32
- typography = 'default'
33
- }) => {
34
- const typographyType = status ?? typography === 'default-bold' ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT;
35
- return /*#__PURE__*/jsxs(Body, {
36
- type: typographyType,
37
- className: clsx(className, {
38
- 'np-table-content--success': status === 'success',
39
- 'np-table-content--error': status === 'error'
40
- }),
41
- children: [text, status === 'success' && /*#__PURE__*/jsx(CheckCircle, {
42
- className: "tw-icon--status",
43
- "data-testid": "check-icon"
44
- }), status === 'error' && /*#__PURE__*/jsx(AlertCircle, {
45
- className: "tw-icon--status",
46
- "data-testid": "alert-icon"
47
- })]
48
- });
49
- };
50
-
51
- export { TableStatusText as default };
52
- //# sourceMappingURL=TableStatusText.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TableStatusText.mjs","sources":["../../src/table/TableStatusText.tsx"],"sourcesContent":["import { AlertCircle, CheckCircle } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport React from 'react';\nimport Body from '../body';\nimport { Typography } from '../common';\n\nexport interface TableStatusTextProps {\n text: string | React.ReactNode;\n className?: string;\n status?: 'success' | 'error';\n typography?: 'default' | 'default-bold';\n}\n\nconst TableStatusText = ({\n text,\n className,\n status,\n typography = 'default',\n}: TableStatusTextProps) => {\n const typographyType =\n (status ?? typography === 'default-bold')\n ? Typography.BODY_DEFAULT_BOLD\n : Typography.BODY_DEFAULT;\n\n return (\n <Body\n type={typographyType}\n className={clsx(className, {\n 'np-table-content--success': status === 'success',\n 'np-table-content--error': status === 'error',\n })}\n >\n {text}\n {status === 'success' && <CheckCircle className=\"tw-icon--status\" data-testid=\"check-icon\" />}\n {status === 'error' && <AlertCircle className=\"tw-icon--status\" data-testid=\"alert-icon\" />}\n </Body>\n );\n};\n\nexport default TableStatusText;\n"],"names":["TableStatusText","text","className","status","typography","typographyType","Typography","BODY_DEFAULT_BOLD","BODY_DEFAULT","_jsxs","Body","type","clsx","children","_jsx","CheckCircle","AlertCircle"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAaMA,MAAAA,eAAe,GAAGA,CAAC;EACvBC,IAAI;EACJC,SAAS;EACTC,MAAM;AACNC,EAAAA,UAAU,GAAG,SAAA;AAAS,CACD,KAAI;AACzB,EAAA,MAAMC,cAAc,GACjBF,MAAM,IAAIC,UAAU,KAAK,cAAc,GACpCE,UAAU,CAACC,iBAAiB,GAC5BD,UAAU,CAACE,YAAY,CAAA;EAE7B,oBACEC,IAAA,CAACC,IAAI,EAAA;AACHC,IAAAA,IAAI,EAAEN,cAAe;AACrBH,IAAAA,SAAS,EAAEU,IAAI,CAACV,SAAS,EAAE;MACzB,2BAA2B,EAAEC,MAAM,KAAK,SAAS;MACjD,yBAAyB,EAAEA,MAAM,KAAK,OAAA;AACvC,KAAA,CAAE;IAAAU,QAAA,EAAA,CAEFZ,IAAI,EACJE,MAAM,KAAK,SAAS,iBAAIW,GAAA,CAACC,WAAW,EAAA;AAACb,MAAAA,SAAS,EAAC,iBAAiB;MAAC,aAAY,EAAA,YAAA;MAAe,EAC5FC,MAAM,KAAK,OAAO,iBAAIW,GAAA,CAACE,WAAW,EAAA;AAACd,MAAAA,SAAS,EAAC,iBAAiB;MAAC,aAAY,EAAA,YAAA;AAAY,MAAG,CAAA;AAAA,GACvF,CAAC,CAAA;AAEX;;;;"}