@transferwise/components 0.0.0-experimental-60cb1a1 → 0.0.0-experimental-af50fa6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/avatarLayout/AvatarLayout.js +1 -2
- package/build/avatarLayout/AvatarLayout.js.map +1 -1
- package/build/avatarLayout/AvatarLayout.mjs +1 -2
- package/build/avatarLayout/AvatarLayout.mjs.map +1 -1
- package/build/button/Button.js +2 -1
- package/build/button/Button.js.map +1 -1
- package/build/button/Button.mjs +2 -1
- package/build/button/Button.mjs.map +1 -1
- package/build/index.js +0 -2
- package/build/index.js.map +1 -1
- package/build/index.mjs +0 -1
- package/build/index.mjs.map +1 -1
- package/build/main.css +14 -5
- package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.js +1 -1
- package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.js.map +1 -1
- package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.mjs +1 -1
- package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.mjs.map +1 -1
- package/build/primitives/PrimitiveButton/src/PrimitiveButton.js +2 -1
- package/build/primitives/PrimitiveButton/src/PrimitiveButton.js.map +1 -1
- package/build/primitives/PrimitiveButton/src/PrimitiveButton.mjs +2 -1
- package/build/primitives/PrimitiveButton/src/PrimitiveButton.mjs.map +1 -1
- package/build/styles/avatarLayout/AvatarLayout.css +1 -2
- package/build/styles/button/Button.css +13 -3
- package/build/styles/button/Button.vars.css +10 -3
- package/build/styles/main.css +14 -5
- package/build/types/avatarLayout/AvatarLayout.d.ts.map +1 -1
- package/build/types/button/Button.d.ts.map +1 -1
- package/build/types/index.d.ts +0 -2
- package/build/types/index.d.ts.map +1 -1
- package/build/types/primitives/PrimitiveButton/src/PrimitiveButton.d.ts.map +1 -1
- package/build/types/uploadInput/uploadButton/getAllowedFileTypes.d.ts.map +1 -1
- package/build/uploadInput/uploadButton/getAllowedFileTypes.js +3 -23
- package/build/uploadInput/uploadButton/getAllowedFileTypes.js.map +1 -1
- package/build/uploadInput/uploadButton/getAllowedFileTypes.mjs +3 -23
- package/build/uploadInput/uploadButton/getAllowedFileTypes.mjs.map +1 -1
- package/package.json +3 -3
- package/src/avatarLayout/AvatarLayout.css +1 -2
- package/src/avatarLayout/AvatarLayout.less +1 -1
- package/src/avatarLayout/AvatarLayout.tsx +0 -1
- package/src/button/Button.css +13 -3
- package/src/button/Button.less +7 -1
- package/src/button/Button.spec.tsx +103 -0
- package/src/button/Button.tsx +2 -1
- package/src/button/Button.vars.css +10 -3
- package/src/button/Button.vars.less +16 -6
- package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap +0 -1
- package/src/index.ts +0 -12
- package/src/main.css +14 -5
- package/src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.tsx +1 -1
- package/src/primitives/PrimitiveButton/src/PrimitiveButton.tsx +3 -4
- package/src/primitives/PrimitiveButton/test/PrimitiveButton.spec.tsx +15 -9
- package/src/uploadInput/UploadInput.tests.story.tsx +5 -5
- package/src/uploadInput/uploadButton/getAllowedFileTypes.spec.ts +0 -12
- package/src/uploadInput/uploadButton/getAllowedFileTypes.ts +7 -33
- package/build/table/Table.js +0 -166
- package/build/table/Table.js.map +0 -1
- package/build/table/Table.messages.js +0 -24
- package/build/table/Table.messages.js.map +0 -1
- package/build/table/Table.messages.mjs +0 -22
- package/build/table/Table.messages.mjs.map +0 -1
- package/build/table/Table.mjs +0 -164
- package/build/table/Table.mjs.map +0 -1
- package/build/table/TableCell.js +0 -86
- package/build/table/TableCell.js.map +0 -1
- package/build/table/TableCell.mjs +0 -84
- package/build/table/TableCell.mjs.map +0 -1
- package/build/table/TableHeader.js +0 -57
- package/build/table/TableHeader.js.map +0 -1
- package/build/table/TableHeader.mjs +0 -55
- package/build/table/TableHeader.mjs.map +0 -1
- package/build/table/TableRow.js +0 -85
- package/build/table/TableRow.js.map +0 -1
- package/build/table/TableRow.mjs +0 -83
- package/build/table/TableRow.mjs.map +0 -1
- package/build/table/TableStatusText.js +0 -54
- package/build/table/TableStatusText.js.map +0 -1
- package/build/table/TableStatusText.mjs +0 -52
- package/build/table/TableStatusText.mjs.map +0 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { screen } from '@testing-library/react';
|
|
2
|
-
import PrimitiveButton from '../src';
|
|
3
|
-
import messages from '../../../i18n/commonMessages/Button.messages';
|
|
4
2
|
import { render } from '../../../test-utils';
|
|
3
|
+
import PrimitiveButton from '../src';
|
|
4
|
+
import allMessages from '../../../i18n';
|
|
5
5
|
|
|
6
6
|
describe('Button', () => {
|
|
7
7
|
const defaultProps = {
|
|
@@ -11,7 +11,7 @@ describe('Button', () => {
|
|
|
11
11
|
const renderButton = (
|
|
12
12
|
props?: Partial<typeof defaultProps>,
|
|
13
13
|
locale = 'en',
|
|
14
|
-
localeMessages =
|
|
14
|
+
localeMessages = allMessages.en,
|
|
15
15
|
) => {
|
|
16
16
|
return render(
|
|
17
17
|
<PrimitiveButton {...defaultProps} {...props} />,
|
|
@@ -50,6 +50,17 @@ describe('Button', () => {
|
|
|
50
50
|
expect(button).toBeDisabled();
|
|
51
51
|
});
|
|
52
52
|
|
|
53
|
+
it('disables and announces the button as busy in loading mode', () => {
|
|
54
|
+
const props = {
|
|
55
|
+
...defaultProps,
|
|
56
|
+
loading: true,
|
|
57
|
+
};
|
|
58
|
+
|
|
59
|
+
renderButton(props);
|
|
60
|
+
|
|
61
|
+
expect(screen.getByRole('button', { busy: true })).toHaveAttribute('aria-disabled', 'true');
|
|
62
|
+
});
|
|
63
|
+
|
|
53
64
|
it('sets data-testid attribute', () => {
|
|
54
65
|
const props = {
|
|
55
66
|
...defaultProps,
|
|
@@ -98,12 +109,7 @@ describe('Button', () => {
|
|
|
98
109
|
loading: true,
|
|
99
110
|
};
|
|
100
111
|
|
|
101
|
-
|
|
102
|
-
...messages,
|
|
103
|
-
'neptune.Button.loadingAriaLabel': 'cargando',
|
|
104
|
-
};
|
|
105
|
-
|
|
106
|
-
renderButton(props, 'es', spanishMessages);
|
|
112
|
+
renderButton(props, 'es', allMessages.es);
|
|
107
113
|
|
|
108
114
|
const button = screen.getByRole('button');
|
|
109
115
|
expect(button).toHaveAttribute('aria-label', 'cargando');
|
|
@@ -4,7 +4,7 @@ import { Meta, StoryObj } from '@storybook/react';
|
|
|
4
4
|
import { Status } from '../common';
|
|
5
5
|
import UploadInput, { UploadInputProps } from './UploadInput';
|
|
6
6
|
import { UploadedFile, UploadResponse } from './types';
|
|
7
|
-
import { userEvent } from '@storybook/test';
|
|
7
|
+
import { userEvent, within } from '@storybook/test';
|
|
8
8
|
|
|
9
9
|
const meta: Meta<typeof UploadInput> = {
|
|
10
10
|
title: 'Forms/UploadInput/Tests',
|
|
@@ -65,8 +65,8 @@ const createDelayedPromise = async ({
|
|
|
65
65
|
});
|
|
66
66
|
|
|
67
67
|
const props = {
|
|
68
|
-
onUploadFile: async () => createDelayedPromise(),
|
|
69
|
-
onDeleteFile: async () => createDelayedPromise(),
|
|
68
|
+
onUploadFile: async (formData: FormData) => createDelayedPromise(),
|
|
69
|
+
onDeleteFile: async (id: string | number) => createDelayedPromise(),
|
|
70
70
|
};
|
|
71
71
|
|
|
72
72
|
export const UploadInputWithDescriptionFromProps: Story = {
|
|
@@ -268,7 +268,7 @@ export const DeletingTop: Story = {
|
|
|
268
268
|
files: [files[0], files[1], files[2]],
|
|
269
269
|
multiple: true,
|
|
270
270
|
},
|
|
271
|
-
play: async () => {
|
|
271
|
+
play: async ({ canvasElement }) => {
|
|
272
272
|
await userEvent.tab();
|
|
273
273
|
await triggerModalAndConfirm();
|
|
274
274
|
await triggerModalAndConfirm({ isLink: false });
|
|
@@ -282,7 +282,7 @@ export const DeletingBottom: Story = {
|
|
|
282
282
|
files: [files[0], files[1], files[2]],
|
|
283
283
|
multiple: true,
|
|
284
284
|
},
|
|
285
|
-
play: async () => {
|
|
285
|
+
play: async ({ canvasElement }) => {
|
|
286
286
|
await userEvent.tab();
|
|
287
287
|
await userEvent.tab();
|
|
288
288
|
await userEvent.tab();
|
|
@@ -38,16 +38,4 @@ describe('getAllowedFileTypes', () => {
|
|
|
38
38
|
expect(allowedFileTypes).toStrictEqual(['*']);
|
|
39
39
|
});
|
|
40
40
|
});
|
|
41
|
-
|
|
42
|
-
describe('using only mime types', () => {
|
|
43
|
-
const mimeTypes = ['application/json', 'image/jpeg'];
|
|
44
|
-
|
|
45
|
-
beforeAll(() => {
|
|
46
|
-
allowedFileTypes = getAllowedFileTypes(mimeTypes);
|
|
47
|
-
});
|
|
48
|
-
|
|
49
|
-
it('returns the original mime types', () => {
|
|
50
|
-
expect(allowedFileTypes).toStrictEqual(['JSON', 'JPG, JPEG']);
|
|
51
|
-
});
|
|
52
|
-
});
|
|
53
41
|
});
|
|
@@ -1,38 +1,12 @@
|
|
|
1
1
|
import { FileType } from '../../common';
|
|
2
2
|
|
|
3
|
-
const parseFileType = (fileType: string): string => {
|
|
4
|
-
if (fileType?.includes('.')) {
|
|
5
|
-
return fileType.replace('.', '').toUpperCase();
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
const mimeType = fileType?.split('/');
|
|
9
|
-
if (mimeType?.length > 1) {
|
|
10
|
-
let parsedType = mimeType[1];
|
|
11
|
-
|
|
12
|
-
if (parsedType.toLocaleLowerCase() === 'jpeg') {
|
|
13
|
-
parsedType = 'jpg, '.concat(parsedType).toUpperCase();
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
return parsedType.toUpperCase();
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
return fileType;
|
|
20
|
-
};
|
|
21
|
-
|
|
22
3
|
const getAllowedFileTypes = (fileTypes: readonly FileType[] | readonly string[]): string[] =>
|
|
23
|
-
fileTypes.map((
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
.map((splittedFileType: string) => parseFileType(splittedFileType))
|
|
31
|
-
.join(', ');
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
// If `fileType` contains only `format` or `mime` type, parse the type
|
|
35
|
-
return parseFileType(fileType);
|
|
36
|
-
});
|
|
4
|
+
fileTypes.map((fileTypeDefinition: string) =>
|
|
5
|
+
fileTypeDefinition
|
|
6
|
+
.split(',')
|
|
7
|
+
.filter((extension) => !extension.includes('/')) // Filter out mime types
|
|
8
|
+
.map((extension) => extension.replace('.', '').toUpperCase()) // Remove dot and convert extensions to uppercase to be displayed in the instructions
|
|
9
|
+
.join(', '),
|
|
10
|
+
);
|
|
37
11
|
|
|
38
12
|
export default getAllowedFileTypes;
|
package/build/table/Table.js
DELETED
|
@@ -1,166 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var reactIntl = require('react-intl');
|
|
4
|
-
var TableCell = require('./TableCell.js');
|
|
5
|
-
var TableHeader = require('./TableHeader.js');
|
|
6
|
-
var TableRow = require('./TableRow.js');
|
|
7
|
-
var Alert = require('../alert/Alert.js');
|
|
8
|
-
var Table_messages = require('./Table.messages.js');
|
|
9
|
-
var Loader = require('../loader/Loader.js');
|
|
10
|
-
require('../common/theme.js');
|
|
11
|
-
require('../common/direction.js');
|
|
12
|
-
require('../common/propsValues/control.js');
|
|
13
|
-
require('../common/propsValues/breakpoint.js');
|
|
14
|
-
var size = require('../common/propsValues/size.js');
|
|
15
|
-
require('../common/propsValues/typography.js');
|
|
16
|
-
require('../common/propsValues/width.js');
|
|
17
|
-
require('../common/propsValues/type.js');
|
|
18
|
-
require('../common/propsValues/dateMode.js');
|
|
19
|
-
require('../common/propsValues/monthFormat.js');
|
|
20
|
-
require('../common/propsValues/position.js');
|
|
21
|
-
require('../common/propsValues/layouts.js');
|
|
22
|
-
require('../common/propsValues/status.js');
|
|
23
|
-
var sentiment = require('../common/propsValues/sentiment.js');
|
|
24
|
-
require('../common/propsValues/profileType.js');
|
|
25
|
-
require('../common/propsValues/variant.js');
|
|
26
|
-
require('../common/propsValues/scroll.js');
|
|
27
|
-
require('../common/propsValues/markdownNodeType.js');
|
|
28
|
-
require('../common/fileType.js');
|
|
29
|
-
require('@transferwise/icons');
|
|
30
|
-
var clsx = require('clsx');
|
|
31
|
-
require('react');
|
|
32
|
-
require('../common/closeButton/CloseButton.messages.js');
|
|
33
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
34
|
-
var StatusIcon = require('../statusIcon/StatusIcon.js');
|
|
35
|
-
var componentsTheming = require('@wise/components-theming');
|
|
36
|
-
var Body = require('../body/Body.js');
|
|
37
|
-
|
|
38
|
-
const Table = ({
|
|
39
|
-
'aria-labelledby': ariaLabelledBy,
|
|
40
|
-
data,
|
|
41
|
-
loading,
|
|
42
|
-
className,
|
|
43
|
-
fullWidth = true,
|
|
44
|
-
error
|
|
45
|
-
}) => {
|
|
46
|
-
const {
|
|
47
|
-
formatMessage
|
|
48
|
-
} = reactIntl.useIntl();
|
|
49
|
-
const {
|
|
50
|
-
theme
|
|
51
|
-
} = componentsTheming.useTheme();
|
|
52
|
-
const isEmptyHeader = loading ?? (data?.headers && !data?.headers.length);
|
|
53
|
-
const getRowLength = () => {
|
|
54
|
-
const columnsLength = data?.headers?.length ?? 0;
|
|
55
|
-
return data?.onRowClick ? columnsLength + 1 : columnsLength;
|
|
56
|
-
};
|
|
57
|
-
const getTableContent = () => {
|
|
58
|
-
if (loading) {
|
|
59
|
-
return /*#__PURE__*/jsxRuntime.jsx(TableRow, {
|
|
60
|
-
children: /*#__PURE__*/jsxRuntime.jsx(TableCell, {
|
|
61
|
-
children: /*#__PURE__*/jsxRuntime.jsx(Loader, {
|
|
62
|
-
"data-testid": "np-table-loader"
|
|
63
|
-
})
|
|
64
|
-
})
|
|
65
|
-
});
|
|
66
|
-
}
|
|
67
|
-
// Shows the `emptyData` message when there is no data to display
|
|
68
|
-
if (!data?.rows?.length) {
|
|
69
|
-
return /*#__PURE__*/jsxRuntime.jsx(TableRow, {
|
|
70
|
-
children: /*#__PURE__*/jsxRuntime.jsx(TableCell, {
|
|
71
|
-
colSpan: data?.headers?.length,
|
|
72
|
-
children: /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
73
|
-
className: "np-table-empty-data",
|
|
74
|
-
"data-testid": "np-table-empty-data",
|
|
75
|
-
children: [/*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
|
|
76
|
-
sentiment: sentiment.Sentiment.WARNING,
|
|
77
|
-
size: size.Size.MEDIUM
|
|
78
|
-
}), /*#__PURE__*/jsxRuntime.jsx(Body, {
|
|
79
|
-
type: "body-default-bold",
|
|
80
|
-
children: formatMessage(Table_messages.emptyData)
|
|
81
|
-
})]
|
|
82
|
-
})
|
|
83
|
-
})
|
|
84
|
-
});
|
|
85
|
-
}
|
|
86
|
-
return data?.rows?.map((rowData, rowIndex) => {
|
|
87
|
-
return /*#__PURE__*/jsxRuntime.jsx(TableRow, {
|
|
88
|
-
rowData: rowData,
|
|
89
|
-
hasSeparator: data?.rows?.length ? data.rows.length - 1 !== rowIndex : false,
|
|
90
|
-
onRowClick: data?.onRowClick
|
|
91
|
-
}, 'table-row-'.concat(rowIndex.toString()));
|
|
92
|
-
});
|
|
93
|
-
};
|
|
94
|
-
if (error) {
|
|
95
|
-
return /*#__PURE__*/jsxRuntime.jsx(Alert.default, {
|
|
96
|
-
className: "np-table-error",
|
|
97
|
-
message: error.message,
|
|
98
|
-
type: sentiment.Sentiment.NEGATIVE,
|
|
99
|
-
action: {
|
|
100
|
-
href: error?.action?.href ?? '/',
|
|
101
|
-
text: error?.action?.text ?? formatMessage(Table_messages.refreshPage)
|
|
102
|
-
},
|
|
103
|
-
"data-testid": "np-table-error"
|
|
104
|
-
});
|
|
105
|
-
}
|
|
106
|
-
return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
107
|
-
children: [/*#__PURE__*/jsxRuntime.jsx("div", {
|
|
108
|
-
"aria-live": "polite",
|
|
109
|
-
className: "sr-only",
|
|
110
|
-
children: formatMessage(Table_messages[loading ? 'loading' : 'loaded'])
|
|
111
|
-
}), /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
112
|
-
role: loading ? 'presentation' : 'region',
|
|
113
|
-
"aria-labelledby": ariaLabelledBy,
|
|
114
|
-
className: clsx.clsx('np-table-outer-container', className, {
|
|
115
|
-
'np-theme-personal': theme === 'bright-green',
|
|
116
|
-
'np-table-outer-container--center': !fullWidth,
|
|
117
|
-
'np-table-outer-container--full-width': fullWidth
|
|
118
|
-
})
|
|
119
|
-
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
|
|
120
|
-
,
|
|
121
|
-
tabIndex: 0,
|
|
122
|
-
"data-testid": "np-table-outer-container",
|
|
123
|
-
children: /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
124
|
-
className: clsx.clsx('np-table-container', {
|
|
125
|
-
'np-table-container--loading': loading
|
|
126
|
-
}),
|
|
127
|
-
"data-testid": "np-table-container",
|
|
128
|
-
children: /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
129
|
-
className: "np-table-inner-container",
|
|
130
|
-
children: /*#__PURE__*/jsxRuntime.jsxs("table", {
|
|
131
|
-
className: "np-table",
|
|
132
|
-
children: [/*#__PURE__*/jsxRuntime.jsx("thead", {
|
|
133
|
-
"aria-hidden": isEmptyHeader,
|
|
134
|
-
children: /*#__PURE__*/jsxRuntime.jsxs("tr", {
|
|
135
|
-
children: [isEmptyHeader ? /*#__PURE__*/jsxRuntime.jsx(TableHeader, {}) : data?.headers?.map((headerItem, index) => /*#__PURE__*/jsxRuntime.jsx(TableHeader, {
|
|
136
|
-
...headerItem
|
|
137
|
-
}, headerItem.header?.concat(index.toString()))), data?.onRowClick && /*#__PURE__*/jsxRuntime.jsx(TableHeader, {
|
|
138
|
-
isActionHeader: true
|
|
139
|
-
})]
|
|
140
|
-
})
|
|
141
|
-
}), /*#__PURE__*/jsxRuntime.jsxs("tbody", {
|
|
142
|
-
children: [/*#__PURE__*/jsxRuntime.jsx("tr", {
|
|
143
|
-
"aria-hidden": "true",
|
|
144
|
-
className: "np-table-row np-table-row--cosmetic",
|
|
145
|
-
children: /*#__PURE__*/jsxRuntime.jsx("td", {
|
|
146
|
-
className: "np-table-cell",
|
|
147
|
-
colSpan: getRowLength()
|
|
148
|
-
})
|
|
149
|
-
}, "first-np-table-row--cosmetic"), getTableContent(), /*#__PURE__*/jsxRuntime.jsx("tr", {
|
|
150
|
-
"aria-hidden": "true",
|
|
151
|
-
className: "np-table-row np-table-row--cosmetic",
|
|
152
|
-
children: /*#__PURE__*/jsxRuntime.jsx("td", {
|
|
153
|
-
className: "np-table-cell",
|
|
154
|
-
colSpan: getRowLength()
|
|
155
|
-
})
|
|
156
|
-
}, "last-np-table-row--cosmetic")]
|
|
157
|
-
})]
|
|
158
|
-
})
|
|
159
|
-
})
|
|
160
|
-
})
|
|
161
|
-
})]
|
|
162
|
-
});
|
|
163
|
-
};
|
|
164
|
-
|
|
165
|
-
module.exports = Table;
|
|
166
|
-
//# sourceMappingURL=Table.js.map
|
package/build/table/Table.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Table.js","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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"}
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var reactIntl = require('react-intl');
|
|
4
|
-
|
|
5
|
-
var messages = reactIntl.defineMessages({
|
|
6
|
-
loading: {
|
|
7
|
-
id: "neptune.Table.loading"
|
|
8
|
-
},
|
|
9
|
-
loaded: {
|
|
10
|
-
id: "neptune.Table.loaded"
|
|
11
|
-
},
|
|
12
|
-
emptyData: {
|
|
13
|
-
id: "neptune.Table.emptyData"
|
|
14
|
-
},
|
|
15
|
-
refreshPage: {
|
|
16
|
-
id: "neptune.Table.refreshPage"
|
|
17
|
-
},
|
|
18
|
-
actionHeader: {
|
|
19
|
-
id: "neptune.Table.actionHeader"
|
|
20
|
-
}
|
|
21
|
-
});
|
|
22
|
-
|
|
23
|
-
module.exports = messages;
|
|
24
|
-
//# sourceMappingURL=Table.messages.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Table.messages.js","sources":["../../src/table/Table.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n loading: {\n id: 'neptune.Table.loading',\n defaultMessage: 'Table data is loading',\n },\n loaded: {\n id: 'neptune.Table.loaded',\n defaultMessage: 'Table data has loaded',\n },\n emptyData: {\n id: 'neptune.Table.emptyData',\n defaultMessage: 'No results found',\n },\n refreshPage: {\n id: 'neptune.Table.refreshPage',\n defaultMessage: 'Refresh page',\n },\n actionHeader: {\n id: 'neptune.Table.actionHeader',\n defaultMessage: 'Action',\n },\n});\n"],"names":["defineMessages","loading","id","loaded","emptyData","refreshPage","actionHeader"],"mappings":";;;;AAEA,eAAeA,wBAAc,CAAC;AAC5BC,EAAAA,OAAO,EAAE;IACPC,EAAE,EAAA,uBAAA;GAEH;AACDC,EAAAA,MAAM,EAAE;IACND,EAAE,EAAA,sBAAA;GAEH;AACDE,EAAAA,SAAS,EAAE;IACTF,EAAE,EAAA,yBAAA;GAEH;AACDG,EAAAA,WAAW,EAAE;IACXH,EAAE,EAAA,2BAAA;GAEH;AACDI,EAAAA,YAAY,EAAE;IACZJ,EAAE,EAAA,4BAAA;AAEH,GAAA;AACF,CAAA,CAAC;;;;"}
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { defineMessages } from 'react-intl';
|
|
2
|
-
|
|
3
|
-
var messages = defineMessages({
|
|
4
|
-
loading: {
|
|
5
|
-
id: "neptune.Table.loading"
|
|
6
|
-
},
|
|
7
|
-
loaded: {
|
|
8
|
-
id: "neptune.Table.loaded"
|
|
9
|
-
},
|
|
10
|
-
emptyData: {
|
|
11
|
-
id: "neptune.Table.emptyData"
|
|
12
|
-
},
|
|
13
|
-
refreshPage: {
|
|
14
|
-
id: "neptune.Table.refreshPage"
|
|
15
|
-
},
|
|
16
|
-
actionHeader: {
|
|
17
|
-
id: "neptune.Table.actionHeader"
|
|
18
|
-
}
|
|
19
|
-
});
|
|
20
|
-
|
|
21
|
-
export { messages as default };
|
|
22
|
-
//# sourceMappingURL=Table.messages.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Table.messages.mjs","sources":["../../src/table/Table.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n loading: {\n id: 'neptune.Table.loading',\n defaultMessage: 'Table data is loading',\n },\n loaded: {\n id: 'neptune.Table.loaded',\n defaultMessage: 'Table data has loaded',\n },\n emptyData: {\n id: 'neptune.Table.emptyData',\n defaultMessage: 'No results found',\n },\n refreshPage: {\n id: 'neptune.Table.refreshPage',\n defaultMessage: 'Refresh page',\n },\n actionHeader: {\n id: 'neptune.Table.actionHeader',\n defaultMessage: 'Action',\n },\n});\n"],"names":["defineMessages","loading","id","loaded","emptyData","refreshPage","actionHeader"],"mappings":";;AAEA,eAAeA,cAAc,CAAC;AAC5BC,EAAAA,OAAO,EAAE;IACPC,EAAE,EAAA,uBAAA;GAEH;AACDC,EAAAA,MAAM,EAAE;IACND,EAAE,EAAA,sBAAA;GAEH;AACDE,EAAAA,SAAS,EAAE;IACTF,EAAE,EAAA,yBAAA;GAEH;AACDG,EAAAA,WAAW,EAAE;IACXH,EAAE,EAAA,2BAAA;GAEH;AACDI,EAAAA,YAAY,EAAE;IACZJ,EAAE,EAAA,4BAAA;AAEH,GAAA;AACF,CAAA,CAAC;;;;"}
|
package/build/table/Table.mjs
DELETED
|
@@ -1,164 +0,0 @@
|
|
|
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
|
|
@@ -1 +0,0 @@
|
|
|
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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"}
|