@transferwise/components 46.86.0 → 46.86.2

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 (51) hide show
  1. package/build/avatarLayout/AvatarLayout.js +5 -4
  2. package/build/avatarLayout/AvatarLayout.js.map +1 -1
  3. package/build/avatarLayout/AvatarLayout.mjs +5 -4
  4. package/build/avatarLayout/AvatarLayout.mjs.map +1 -1
  5. package/build/avatarView/AvatarView.js +12 -1
  6. package/build/avatarView/AvatarView.js.map +1 -1
  7. package/build/avatarView/AvatarView.mjs +12 -1
  8. package/build/avatarView/AvatarView.mjs.map +1 -1
  9. package/build/index.js +2 -0
  10. package/build/index.js.map +1 -1
  11. package/build/index.mjs +1 -0
  12. package/build/index.mjs.map +1 -1
  13. package/build/main.css +2 -1
  14. package/build/styles/avatarLayout/AvatarLayout.css +2 -1
  15. package/build/styles/main.css +2 -1
  16. package/build/table/Table.js +166 -0
  17. package/build/table/Table.js.map +1 -0
  18. package/build/table/Table.messages.js +24 -0
  19. package/build/table/Table.messages.js.map +1 -0
  20. package/build/table/Table.messages.mjs +22 -0
  21. package/build/table/Table.messages.mjs.map +1 -0
  22. package/build/table/Table.mjs +164 -0
  23. package/build/table/Table.mjs.map +1 -0
  24. package/build/table/TableCell.js +86 -0
  25. package/build/table/TableCell.js.map +1 -0
  26. package/build/table/TableCell.mjs +84 -0
  27. package/build/table/TableCell.mjs.map +1 -0
  28. package/build/table/TableHeader.js +57 -0
  29. package/build/table/TableHeader.js.map +1 -0
  30. package/build/table/TableHeader.mjs +55 -0
  31. package/build/table/TableHeader.mjs.map +1 -0
  32. package/build/table/TableRow.js +85 -0
  33. package/build/table/TableRow.js.map +1 -0
  34. package/build/table/TableRow.mjs +83 -0
  35. package/build/table/TableRow.mjs.map +1 -0
  36. package/build/table/TableStatusText.js +54 -0
  37. package/build/table/TableStatusText.js.map +1 -0
  38. package/build/table/TableStatusText.mjs +52 -0
  39. package/build/table/TableStatusText.mjs.map +1 -0
  40. package/build/types/avatarLayout/AvatarLayout.d.ts.map +1 -1
  41. package/build/types/avatarView/AvatarView.d.ts.map +1 -1
  42. package/build/types/index.d.ts +2 -0
  43. package/build/types/index.d.ts.map +1 -1
  44. package/package.json +3 -3
  45. package/src/avatarLayout/AvatarLayout.css +2 -1
  46. package/src/avatarLayout/AvatarLayout.less +1 -1
  47. package/src/avatarLayout/AvatarLayout.tsx +4 -3
  48. package/src/avatarView/AvatarView.tsx +15 -1
  49. package/src/dateInput/DateInput.spec.tsx +45 -26
  50. package/src/index.ts +12 -0
  51. package/src/main.css +2 -1
@@ -0,0 +1,164 @@
1
+ import { useIntl } from 'react-intl';
2
+ import TableCell from './TableCell.mjs';
3
+ import TableHeader from './TableHeader.mjs';
4
+ import TableRow from './TableRow.mjs';
5
+ import Alert from '../alert/Alert.mjs';
6
+ import messages from './Table.messages.mjs';
7
+ import Loader from '../loader/Loader.mjs';
8
+ import '../common/theme.mjs';
9
+ import '../common/direction.mjs';
10
+ import '../common/propsValues/control.mjs';
11
+ import '../common/propsValues/breakpoint.mjs';
12
+ import { Size } from '../common/propsValues/size.mjs';
13
+ import '../common/propsValues/typography.mjs';
14
+ import '../common/propsValues/width.mjs';
15
+ import '../common/propsValues/type.mjs';
16
+ import '../common/propsValues/dateMode.mjs';
17
+ import '../common/propsValues/monthFormat.mjs';
18
+ import '../common/propsValues/position.mjs';
19
+ import '../common/propsValues/layouts.mjs';
20
+ import '../common/propsValues/status.mjs';
21
+ import { Sentiment } from '../common/propsValues/sentiment.mjs';
22
+ import '../common/propsValues/profileType.mjs';
23
+ import '../common/propsValues/variant.mjs';
24
+ import '../common/propsValues/scroll.mjs';
25
+ import '../common/propsValues/markdownNodeType.mjs';
26
+ import '../common/fileType.mjs';
27
+ import '@transferwise/icons';
28
+ import { clsx } from 'clsx';
29
+ import 'react';
30
+ import '../common/closeButton/CloseButton.messages.mjs';
31
+ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
32
+ import StatusIcon from '../statusIcon/StatusIcon.mjs';
33
+ import { useTheme } from '@wise/components-theming';
34
+ import Body from '../body/Body.mjs';
35
+
36
+ const Table = ({
37
+ 'aria-labelledby': ariaLabelledBy,
38
+ data,
39
+ loading,
40
+ className,
41
+ fullWidth = true,
42
+ error
43
+ }) => {
44
+ const {
45
+ formatMessage
46
+ } = useIntl();
47
+ const {
48
+ theme
49
+ } = useTheme();
50
+ const isEmptyHeader = loading ?? (data?.headers && !data?.headers.length);
51
+ const getRowLength = () => {
52
+ const columnsLength = data?.headers?.length ?? 0;
53
+ return data?.onRowClick ? columnsLength + 1 : columnsLength;
54
+ };
55
+ const getTableContent = () => {
56
+ if (loading) {
57
+ return /*#__PURE__*/jsx(TableRow, {
58
+ children: /*#__PURE__*/jsx(TableCell, {
59
+ children: /*#__PURE__*/jsx(Loader, {
60
+ "data-testid": "np-table-loader"
61
+ })
62
+ })
63
+ });
64
+ }
65
+ // Shows the `emptyData` message when there is no data to display
66
+ if (!data?.rows?.length) {
67
+ return /*#__PURE__*/jsx(TableRow, {
68
+ children: /*#__PURE__*/jsx(TableCell, {
69
+ colSpan: data?.headers?.length,
70
+ children: /*#__PURE__*/jsxs("div", {
71
+ className: "np-table-empty-data",
72
+ "data-testid": "np-table-empty-data",
73
+ children: [/*#__PURE__*/jsx(StatusIcon, {
74
+ sentiment: Sentiment.WARNING,
75
+ size: Size.MEDIUM
76
+ }), /*#__PURE__*/jsx(Body, {
77
+ type: "body-default-bold",
78
+ children: formatMessage(messages.emptyData)
79
+ })]
80
+ })
81
+ })
82
+ });
83
+ }
84
+ return data?.rows?.map((rowData, rowIndex) => {
85
+ return /*#__PURE__*/jsx(TableRow, {
86
+ rowData: rowData,
87
+ hasSeparator: data?.rows?.length ? data.rows.length - 1 !== rowIndex : false,
88
+ onRowClick: data?.onRowClick
89
+ }, 'table-row-'.concat(rowIndex.toString()));
90
+ });
91
+ };
92
+ if (error) {
93
+ return /*#__PURE__*/jsx(Alert, {
94
+ className: "np-table-error",
95
+ message: error.message,
96
+ type: Sentiment.NEGATIVE,
97
+ action: {
98
+ href: error?.action?.href ?? '/',
99
+ text: error?.action?.text ?? formatMessage(messages.refreshPage)
100
+ },
101
+ "data-testid": "np-table-error"
102
+ });
103
+ }
104
+ return /*#__PURE__*/jsxs(Fragment, {
105
+ children: [/*#__PURE__*/jsx("div", {
106
+ "aria-live": "polite",
107
+ className: "sr-only",
108
+ children: formatMessage(messages[loading ? 'loading' : 'loaded'])
109
+ }), /*#__PURE__*/jsx("div", {
110
+ role: loading ? 'presentation' : 'region',
111
+ "aria-labelledby": ariaLabelledBy,
112
+ className: clsx('np-table-outer-container', className, {
113
+ 'np-theme-personal': theme === 'bright-green',
114
+ 'np-table-outer-container--center': !fullWidth,
115
+ 'np-table-outer-container--full-width': fullWidth
116
+ })
117
+ // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
118
+ ,
119
+ tabIndex: 0,
120
+ "data-testid": "np-table-outer-container",
121
+ children: /*#__PURE__*/jsx("div", {
122
+ className: clsx('np-table-container', {
123
+ 'np-table-container--loading': loading
124
+ }),
125
+ "data-testid": "np-table-container",
126
+ children: /*#__PURE__*/jsx("div", {
127
+ className: "np-table-inner-container",
128
+ children: /*#__PURE__*/jsxs("table", {
129
+ className: "np-table",
130
+ children: [/*#__PURE__*/jsx("thead", {
131
+ "aria-hidden": isEmptyHeader,
132
+ children: /*#__PURE__*/jsxs("tr", {
133
+ children: [isEmptyHeader ? /*#__PURE__*/jsx(TableHeader, {}) : data?.headers?.map((headerItem, index) => /*#__PURE__*/jsx(TableHeader, {
134
+ ...headerItem
135
+ }, headerItem.header?.concat(index.toString()))), data?.onRowClick && /*#__PURE__*/jsx(TableHeader, {
136
+ isActionHeader: true
137
+ })]
138
+ })
139
+ }), /*#__PURE__*/jsxs("tbody", {
140
+ children: [/*#__PURE__*/jsx("tr", {
141
+ "aria-hidden": "true",
142
+ className: "np-table-row np-table-row--cosmetic",
143
+ children: /*#__PURE__*/jsx("td", {
144
+ className: "np-table-cell",
145
+ colSpan: getRowLength()
146
+ })
147
+ }, "first-np-table-row--cosmetic"), getTableContent(), /*#__PURE__*/jsx("tr", {
148
+ "aria-hidden": "true",
149
+ className: "np-table-row np-table-row--cosmetic",
150
+ children: /*#__PURE__*/jsx("td", {
151
+ className: "np-table-cell",
152
+ colSpan: getRowLength()
153
+ })
154
+ }, "last-np-table-row--cosmetic")]
155
+ })]
156
+ })
157
+ })
158
+ })
159
+ })]
160
+ });
161
+ };
162
+
163
+ export { Table as default };
164
+ //# sourceMappingURL=Table.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Table.mjs","sources":["../../src/table/Table.tsx"],"sourcesContent":["import { useIntl } from 'react-intl';\nimport TableCell from './TableCell';\nimport TableHeader, { TableHeaderType } from './TableHeader';\nimport TableRow, { TableRowClickableType, TableRowType } from './TableRow';\nimport Alert from '../alert';\n\nimport messages from './Table.messages';\nimport Loader from '../loader';\nimport { Sentiment, Size } from '../common';\nimport StatusIcon from '../statusIcon';\nimport { clsx } from 'clsx';\nimport { useTheme } from '@wise/components-theming';\nimport Body from '../body';\n\nexport interface TableProps {\n 'aria-labelledby'?: string;\n data: {\n headers?: TableHeaderType[];\n rows?: TableRowType[] | TableRowClickableType[];\n onRowClick?: (rowData: TableRowType | TableRowClickableType) => void;\n };\n loading?: boolean;\n className?: string | undefined;\n fullWidth?: boolean;\n error?: {\n message?: string;\n action?: {\n href?: string;\n text?: string;\n };\n };\n}\n\nconst Table = ({\n 'aria-labelledby': ariaLabelledBy,\n data,\n loading,\n className,\n fullWidth = true,\n error,\n}: TableProps) => {\n const { formatMessage } = useIntl();\n const { theme } = useTheme();\n const isEmptyHeader = loading ?? (data?.headers && !data?.headers.length);\n\n const getRowLength = () => {\n const columnsLength = data?.headers?.length ?? 0;\n return data?.onRowClick ? columnsLength + 1 : columnsLength;\n };\n\n const getTableContent = () => {\n if (loading) {\n return (\n <TableRow>\n <TableCell>\n <Loader data-testid=\"np-table-loader\" />\n </TableCell>\n </TableRow>\n );\n }\n\n // Shows the `emptyData` message when there is no data to display\n if (!data?.rows?.length) {\n return (\n <TableRow>\n <TableCell colSpan={data?.headers?.length}>\n <div className=\"np-table-empty-data\" data-testid=\"np-table-empty-data\">\n <StatusIcon sentiment={Sentiment.WARNING} size={Size.MEDIUM} />\n <Body type=\"body-default-bold\">{formatMessage(messages.emptyData)}</Body>\n </div>\n </TableCell>\n </TableRow>\n );\n }\n\n return data?.rows?.map((rowData, rowIndex) => {\n return (\n <TableRow\n key={'table-row-'.concat(rowIndex.toString())}\n rowData={rowData}\n hasSeparator={data?.rows?.length ? data.rows.length - 1 !== rowIndex : false}\n onRowClick={data?.onRowClick}\n />\n );\n });\n };\n\n if (error) {\n return (\n <Alert\n className=\"np-table-error\"\n message={error.message}\n type={Sentiment.NEGATIVE}\n action={{\n href: error?.action?.href ?? '/',\n text: error?.action?.text ?? formatMessage(messages.refreshPage),\n }}\n data-testid=\"np-table-error\"\n />\n );\n }\n\n return (\n <>\n <div aria-live=\"polite\" className=\"sr-only\">\n {formatMessage(messages[loading ? 'loading' : 'loaded'])}\n </div>\n <div\n role={loading ? 'presentation' : 'region'}\n aria-labelledby={ariaLabelledBy}\n className={clsx('np-table-outer-container', className, {\n 'np-theme-personal': theme === 'bright-green',\n 'np-table-outer-container--center': !fullWidth,\n 'np-table-outer-container--full-width': fullWidth,\n })}\n // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n tabIndex={0}\n data-testid=\"np-table-outer-container\"\n >\n <div\n className={clsx('np-table-container', {\n 'np-table-container--loading': loading,\n })}\n data-testid=\"np-table-container\"\n >\n <div className=\"np-table-inner-container\">\n <table className=\"np-table\">\n <thead aria-hidden={isEmptyHeader}>\n <tr>\n {isEmptyHeader ? (\n <TableHeader />\n ) : (\n data?.headers?.map((headerItem: TableHeaderType, index) => (\n <TableHeader\n key={headerItem.header?.concat(index.toString())}\n {...headerItem}\n />\n ))\n )}\n {data?.onRowClick && <TableHeader isActionHeader />}\n </tr>\n </thead>\n <tbody>\n <tr\n key=\"first-np-table-row--cosmetic\"\n aria-hidden=\"true\"\n className=\"np-table-row np-table-row--cosmetic\"\n >\n <td className=\"np-table-cell\" colSpan={getRowLength()} />\n </tr>\n {getTableContent()}\n <tr\n key=\"last-np-table-row--cosmetic\"\n aria-hidden=\"true\"\n className=\"np-table-row np-table-row--cosmetic\"\n >\n <td className=\"np-table-cell\" colSpan={getRowLength()} />\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n </div>\n </>\n );\n};\n\nexport default Table;\n"],"names":["Table","ariaLabelledBy","data","loading","className","fullWidth","error","formatMessage","useIntl","theme","useTheme","isEmptyHeader","headers","length","getRowLength","columnsLength","onRowClick","getTableContent","_jsx","TableRow","children","TableCell","Loader","rows","colSpan","_jsxs","StatusIcon","sentiment","Sentiment","WARNING","size","Size","MEDIUM","Body","type","messages","emptyData","map","rowData","rowIndex","hasSeparator","concat","toString","Alert","message","NEGATIVE","action","href","text","refreshPage","_Fragment","role","clsx","tabIndex","TableHeader","headerItem","index","header","isActionHeader"],"mappings":"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"}
@@ -0,0 +1,86 @@
1
+ 'use strict';
2
+
3
+ var TableStatusText = require('./TableStatusText.js');
4
+ var StatusIcon = require('../statusIcon/StatusIcon.js');
5
+ var art = require('@wise/art');
6
+ require('react');
7
+ var clsx = require('clsx');
8
+ var Body = require('../body/Body.js');
9
+ var Money = require('../money/Money.js');
10
+ var AvatarView = require('../avatarView/AvatarView.js');
11
+ var jsxRuntime = require('react/jsx-runtime');
12
+
13
+ const TableCell = ({
14
+ cell,
15
+ alignment = 'left',
16
+ className,
17
+ colSpan,
18
+ children
19
+ }) => {
20
+ const getContentMedia = () => {
21
+ let mediaContent = null;
22
+ if (cell?.type === 'leading' && (cell?.avatar?.src || cell?.avatar?.profileName)) {
23
+ mediaContent = /*#__PURE__*/jsxRuntime.jsx(AvatarView, {
24
+ profileName: cell?.avatar?.profileName,
25
+ size: 40,
26
+ imgSrc: cell?.avatar?.src
27
+ });
28
+ }
29
+ if (cell?.type === 'currency' && cell?.primaryCurrency?.currency) {
30
+ mediaContent = /*#__PURE__*/jsxRuntime.jsx(art.Flag, {
31
+ code: cell?.primaryCurrency?.currency?.toLowerCase(),
32
+ intrinsicSize: 24
33
+ });
34
+ }
35
+ if (cell?.type === 'status') {
36
+ mediaContent = /*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
37
+ size: 24,
38
+ sentiment: cell?.sentiment ?? 'neutral'
39
+ });
40
+ }
41
+ if (mediaContent) {
42
+ return /*#__PURE__*/jsxRuntime.jsx("div", {
43
+ "aria-hidden": "true",
44
+ className: "np-table-content-media",
45
+ "data-testid": "np-table-content-media",
46
+ children: mediaContent
47
+ });
48
+ }
49
+ };
50
+ const formatCurrencyValue = currency => {
51
+ if (currency) {
52
+ return /*#__PURE__*/jsxRuntime.jsx(Money, {
53
+ amount: currency.amount,
54
+ currency: currency.currency,
55
+ alwaysShowDecimals: true
56
+ });
57
+ }
58
+ return '';
59
+ };
60
+ return /*#__PURE__*/jsxRuntime.jsxs("td", {
61
+ className: clsx.clsx('np-table-cell', cell?.type ? `np-table-cell--${cell?.type}` : '', `np-table-cell--${alignment}`, className),
62
+ colSpan: colSpan,
63
+ children: [cell?.type === 'text' && cell?.text && /*#__PURE__*/jsxRuntime.jsx(TableStatusText, {
64
+ text: cell?.text,
65
+ status: cell?.status
66
+ }), cell?.type && ['leading', 'currency', 'status'].includes(cell?.type) && /*#__PURE__*/jsxRuntime.jsxs("div", {
67
+ className: clsx.clsx('np-table-content', {
68
+ 'np-table-content--reversed': alignment === 'right'
69
+ }),
70
+ "data-testid": "np-table-content",
71
+ children: [getContentMedia(), /*#__PURE__*/jsxRuntime.jsxs("div", {
72
+ className: "np-table-content-body",
73
+ children: [(cell?.primaryCurrency ?? cell?.primaryText) && /*#__PURE__*/jsxRuntime.jsx(TableStatusText, {
74
+ text: cell?.type === 'currency' ? formatCurrencyValue(cell?.primaryCurrency) : cell?.primaryText ?? '',
75
+ status: cell?.type !== 'status' ? cell?.status : undefined,
76
+ typography: "default-bold"
77
+ }), (cell?.secondaryCurrency ?? cell?.secondaryText) && /*#__PURE__*/jsxRuntime.jsx(Body, {
78
+ children: cell?.type === 'currency' ? formatCurrencyValue(cell?.secondaryCurrency) : cell?.secondaryText
79
+ })]
80
+ })]
81
+ }), children]
82
+ });
83
+ };
84
+
85
+ module.exports = TableCell;
86
+ //# sourceMappingURL=TableCell.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TableCell.js","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":"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"}
@@ -0,0 +1,84 @@
1
+ import TableStatusText from './TableStatusText.mjs';
2
+ import StatusIcon from '../statusIcon/StatusIcon.mjs';
3
+ import { Flag } from '@wise/art';
4
+ import 'react';
5
+ import { clsx } from 'clsx';
6
+ import Body from '../body/Body.mjs';
7
+ import Money from '../money/Money.mjs';
8
+ import AvatarView from '../avatarView/AvatarView.mjs';
9
+ import { jsxs, jsx } from 'react/jsx-runtime';
10
+
11
+ const TableCell = ({
12
+ cell,
13
+ alignment = 'left',
14
+ className,
15
+ colSpan,
16
+ children
17
+ }) => {
18
+ const getContentMedia = () => {
19
+ let mediaContent = null;
20
+ if (cell?.type === 'leading' && (cell?.avatar?.src || cell?.avatar?.profileName)) {
21
+ mediaContent = /*#__PURE__*/jsx(AvatarView, {
22
+ profileName: cell?.avatar?.profileName,
23
+ size: 40,
24
+ imgSrc: cell?.avatar?.src
25
+ });
26
+ }
27
+ if (cell?.type === 'currency' && cell?.primaryCurrency?.currency) {
28
+ mediaContent = /*#__PURE__*/jsx(Flag, {
29
+ code: cell?.primaryCurrency?.currency?.toLowerCase(),
30
+ intrinsicSize: 24
31
+ });
32
+ }
33
+ if (cell?.type === 'status') {
34
+ mediaContent = /*#__PURE__*/jsx(StatusIcon, {
35
+ size: 24,
36
+ sentiment: cell?.sentiment ?? 'neutral'
37
+ });
38
+ }
39
+ if (mediaContent) {
40
+ return /*#__PURE__*/jsx("div", {
41
+ "aria-hidden": "true",
42
+ className: "np-table-content-media",
43
+ "data-testid": "np-table-content-media",
44
+ children: mediaContent
45
+ });
46
+ }
47
+ };
48
+ const formatCurrencyValue = currency => {
49
+ if (currency) {
50
+ return /*#__PURE__*/jsx(Money, {
51
+ amount: currency.amount,
52
+ currency: currency.currency,
53
+ alwaysShowDecimals: true
54
+ });
55
+ }
56
+ return '';
57
+ };
58
+ return /*#__PURE__*/jsxs("td", {
59
+ className: clsx('np-table-cell', cell?.type ? `np-table-cell--${cell?.type}` : '', `np-table-cell--${alignment}`, className),
60
+ colSpan: colSpan,
61
+ children: [cell?.type === 'text' && cell?.text && /*#__PURE__*/jsx(TableStatusText, {
62
+ text: cell?.text,
63
+ status: cell?.status
64
+ }), cell?.type && ['leading', 'currency', 'status'].includes(cell?.type) && /*#__PURE__*/jsxs("div", {
65
+ className: clsx('np-table-content', {
66
+ 'np-table-content--reversed': alignment === 'right'
67
+ }),
68
+ "data-testid": "np-table-content",
69
+ children: [getContentMedia(), /*#__PURE__*/jsxs("div", {
70
+ className: "np-table-content-body",
71
+ children: [(cell?.primaryCurrency ?? cell?.primaryText) && /*#__PURE__*/jsx(TableStatusText, {
72
+ text: cell?.type === 'currency' ? formatCurrencyValue(cell?.primaryCurrency) : cell?.primaryText ?? '',
73
+ status: cell?.type !== 'status' ? cell?.status : undefined,
74
+ typography: "default-bold"
75
+ }), (cell?.secondaryCurrency ?? cell?.secondaryText) && /*#__PURE__*/jsx(Body, {
76
+ children: cell?.type === 'currency' ? formatCurrencyValue(cell?.secondaryCurrency) : cell?.secondaryText
77
+ })]
78
+ })]
79
+ }), children]
80
+ });
81
+ };
82
+
83
+ export { TableCell as default };
84
+ //# sourceMappingURL=TableCell.mjs.map
@@ -0,0 +1 @@
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":"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"}
@@ -0,0 +1,57 @@
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
@@ -0,0 +1 @@
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;;;;"}
@@ -0,0 +1,55 @@
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
@@ -0,0 +1 @@
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;;;;"}
@@ -0,0 +1,85 @@
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
@@ -0,0 +1 @@
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;;;;"}