@transferwise/components 0.0.0-experimental-f2eec9e → 0.0.0-experimental-57cdeb9

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 (78) hide show
  1. package/build/avatarLayout/AvatarLayout.js +1 -2
  2. package/build/avatarLayout/AvatarLayout.js.map +1 -1
  3. package/build/avatarLayout/AvatarLayout.mjs +1 -2
  4. package/build/avatarLayout/AvatarLayout.mjs.map +1 -1
  5. package/build/button/Button.js +5 -2
  6. package/build/button/Button.js.map +1 -1
  7. package/build/button/Button.mjs +5 -2
  8. package/build/button/Button.mjs.map +1 -1
  9. package/build/index.js +0 -2
  10. package/build/index.js.map +1 -1
  11. package/build/index.mjs +0 -1
  12. package/build/index.mjs.map +1 -1
  13. package/build/main.css +13 -15
  14. package/build/nudge/Nudge.js.map +1 -1
  15. package/build/nudge/Nudge.mjs.map +1 -1
  16. package/build/styles/avatarLayout/AvatarLayout.css +1 -2
  17. package/build/styles/button/Button.css +12 -2
  18. package/build/styles/main.css +13 -15
  19. package/build/styles/nudge/Nudge.css +0 -11
  20. package/build/types/avatarLayout/AvatarLayout.d.ts.map +1 -1
  21. package/build/types/button/Button.d.ts.map +1 -1
  22. package/build/types/button/Button.types.d.ts +2 -2
  23. package/build/types/index.d.ts +0 -2
  24. package/build/types/index.d.ts.map +1 -1
  25. package/build/types/nudge/Nudge.d.ts +1 -1
  26. package/build/types/nudge/Nudge.d.ts.map +1 -1
  27. package/build/types/uploadInput/uploadButton/getAllowedFileTypes.d.ts.map +1 -1
  28. package/build/uploadInput/uploadButton/getAllowedFileTypes.js +3 -23
  29. package/build/uploadInput/uploadButton/getAllowedFileTypes.js.map +1 -1
  30. package/build/uploadInput/uploadButton/getAllowedFileTypes.mjs +3 -23
  31. package/build/uploadInput/uploadButton/getAllowedFileTypes.mjs.map +1 -1
  32. package/package.json +3 -3
  33. package/src/avatarLayout/AvatarLayout.css +1 -2
  34. package/src/avatarLayout/AvatarLayout.less +1 -1
  35. package/src/avatarLayout/AvatarLayout.tsx +0 -1
  36. package/src/button/Button.css +12 -2
  37. package/src/button/Button.less +16 -5
  38. package/src/button/Button.spec.tsx +51 -26
  39. package/src/button/Button.story.tsx +0 -5
  40. package/src/button/Button.tsx +5 -2
  41. package/src/button/Button.types.ts +2 -2
  42. package/src/drawer/Drawer.rtl.spec.tsx +59 -0
  43. package/src/drawer/Drawer.spec.js +101 -0
  44. package/src/drawer/__snapshots__/Drawer.rtl.spec.tsx.snap +55 -0
  45. package/src/index.ts +0 -12
  46. package/src/main.css +13 -15
  47. package/src/nudge/Nudge.css +0 -11
  48. package/src/nudge/Nudge.less +0 -3
  49. package/src/nudge/Nudge.story.tsx +0 -10
  50. package/src/nudge/Nudge.tsx +1 -2
  51. package/src/uploadInput/UploadInput.tests.story.tsx +5 -5
  52. package/src/uploadInput/uploadButton/getAllowedFileTypes.spec.ts +0 -12
  53. package/src/uploadInput/uploadButton/getAllowedFileTypes.ts +7 -33
  54. package/build/table/Table.js +0 -166
  55. package/build/table/Table.js.map +0 -1
  56. package/build/table/Table.messages.js +0 -24
  57. package/build/table/Table.messages.js.map +0 -1
  58. package/build/table/Table.messages.mjs +0 -22
  59. package/build/table/Table.messages.mjs.map +0 -1
  60. package/build/table/Table.mjs +0 -164
  61. package/build/table/Table.mjs.map +0 -1
  62. package/build/table/TableCell.js +0 -86
  63. package/build/table/TableCell.js.map +0 -1
  64. package/build/table/TableCell.mjs +0 -84
  65. package/build/table/TableCell.mjs.map +0 -1
  66. package/build/table/TableHeader.js +0 -57
  67. package/build/table/TableHeader.js.map +0 -1
  68. package/build/table/TableHeader.mjs +0 -55
  69. package/build/table/TableHeader.mjs.map +0 -1
  70. package/build/table/TableRow.js +0 -85
  71. package/build/table/TableRow.js.map +0 -1
  72. package/build/table/TableRow.mjs +0 -83
  73. package/build/table/TableRow.mjs.map +0 -1
  74. package/build/table/TableStatusText.js +0 -54
  75. package/build/table/TableStatusText.js.map +0 -1
  76. package/build/table/TableStatusText.mjs +0 -52
  77. package/build/table/TableStatusText.mjs.map +0 -1
  78. package/src/drawer/Drawer.spec.tsx +0 -93
@@ -0,0 +1,55 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`Drawer doesn't render content when closed 1`] = `<div />`;
4
+
5
+ exports[`Drawer renders content when open 1`] = `
6
+ <div>
7
+ <div
8
+ class="dimmer"
9
+ >
10
+ <div
11
+ class="sliding-panel"
12
+ >
13
+ <div
14
+ aria-modal="true"
15
+ class="np-drawer"
16
+ role="dialog"
17
+ >
18
+ <div
19
+ class="np-drawer-header"
20
+ >
21
+ <button
22
+ aria-label="Close"
23
+ class="np-close-button close btn-link text-no-decoration np-close-button--large"
24
+ type="button"
25
+ >
26
+ <span
27
+ class="tw-icon tw-icon-cross "
28
+ data-testid="cross-icon"
29
+ >
30
+ <svg
31
+ aria-hidden="true"
32
+ fill="currentColor"
33
+ focusable="false"
34
+ height="24"
35
+ role="none"
36
+ viewBox="0 0 24 24"
37
+ width="24"
38
+ >
39
+ <path
40
+ d="m19.629 5.915-1.2-1.2-6.257 6.257-6.258-6.257-1.2 1.2 6.258 6.257-6.258 6.257 1.2 1.2 6.258-6.257 6.257 6.257 1.2-1.2-6.258-6.257 6.258-6.257Z"
41
+ />
42
+ </svg>
43
+ </span>
44
+ </button>
45
+ </div>
46
+ <div
47
+ class="np-drawer-content"
48
+ >
49
+ content
50
+ </div>
51
+ </div>
52
+ </div>
53
+ </div>
54
+ </div>
55
+ `;
package/src/index.ts CHANGED
@@ -96,17 +96,6 @@ export type { UploadProps } from './upload';
96
96
  export type { UploadError, UploadResponse, UploadedFile } from './uploadInput/types';
97
97
  export type { WithIdProps } from './withId';
98
98
  export type { IconButtonProps } from './iconButton';
99
- export type {
100
- TableProps,
101
- TableRowType,
102
- TableRowClickableType,
103
- TableHeaderType,
104
- TableCellLeading,
105
- TableCellText,
106
- TableCellCurrency,
107
- TableCellStatus,
108
- TableCellType,
109
- } from './table';
110
99
 
111
100
  /**
112
101
  * Components
@@ -207,7 +196,6 @@ export { default as Tooltip } from './tooltip';
207
196
  export { default as Typeahead } from './typeahead';
208
197
  export { default as Upload } from './upload';
209
198
  export { default as UploadInput } from './uploadInput';
210
- export { default as Table } from './table';
211
199
 
212
200
  /**
213
201
  * Hooks
package/src/main.css CHANGED
@@ -531,8 +531,7 @@ div.critical-comms .critical-comms-body {
531
531
  margin-right: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
532
532
  }
533
533
  .np-avatar-layout-horizontal {
534
- width: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - (var(--np-avatar-offset) * (var(--np-avatar-avatars-count) - 1)));
535
- width: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - calc(var(--np-avatar-offset) * calc(var(--np-avatar-avatars-count) - 1)));
534
+ width: calc(var(--np-avatar-size) * 2 - var(--np-avatar-offset));
536
535
  height: var(--np-avatar-layout-size);
537
536
  }
538
537
  .np-avatar-layout-horizontal-mask {
@@ -772,8 +771,6 @@ div.critical-comms .critical-comms-body {
772
771
  justify-content: center;
773
772
  vertical-align: middle;
774
773
  text-align: center;
775
- -webkit-text-decoration: none;
776
- text-decoration: none;
777
774
  white-space: nowrap;
778
775
  word-wrap: break-word;
779
776
  -webkit-appearance: none;
@@ -786,6 +783,13 @@ div.critical-comms .critical-comms-body {
786
783
  cursor: pointer;
787
784
  transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
788
785
  }
786
+ .wds-Button,
787
+ .wds-Button:hover,
788
+ .wds-Button:active,
789
+ .wds-Button:focus {
790
+ -webkit-text-decoration: none;
791
+ text-decoration: none;
792
+ }
789
793
  .wds-Button:hover {
790
794
  background-color: var(--Button-background-hover);
791
795
  }
@@ -827,6 +831,11 @@ div.critical-comms .critical-comms-body {
827
831
  --Button-background-hover: var(--Button-minimal-background-hover);
828
832
  --Button-background-active: var(--Button-minimal-background-active);
829
833
  --Button-color: var(--Button-minimal-color);
834
+ }
835
+ .wds-Button--minimal,
836
+ .wds-Button--minimal:hover,
837
+ .wds-Button--minimal:active,
838
+ .wds-Button--minimal:focus {
830
839
  -webkit-text-decoration: underline;
831
840
  text-decoration: underline;
832
841
  text-underline-offset: 3px;
@@ -3915,17 +3924,6 @@ html:not([dir="rtl"]) .np-navigation-option {
3915
3924
  margin-left: 0;
3916
3925
  margin-right: 1px;
3917
3926
  }
3918
- .wds-nudge-media-flower {
3919
- margin-left: -24px;
3920
- margin-top: 11px;
3921
- position: absolute;
3922
- width: 156px;
3923
- }
3924
- [dir="rtl"] .wds-nudge-media-flower {
3925
- transform: scaleX(-1);
3926
- margin-left: 0;
3927
- margin-right: -24px;
3928
- }
3929
3927
  .wds-nudge-container {
3930
3928
  align-items: stretch;
3931
3929
  display: flex;
@@ -136,17 +136,6 @@
136
136
  margin-left: 0;
137
137
  margin-right: 1px;
138
138
  }
139
- .wds-nudge-media-flower {
140
- margin-left: -24px;
141
- margin-top: 11px;
142
- position: absolute;
143
- width: 156px;
144
- }
145
- [dir="rtl"] .wds-nudge-media-flower {
146
- transform: scaleX(-1);
147
- margin-left: 0;
148
- margin-right: -24px;
149
- }
150
139
  .wds-nudge-container {
151
140
  align-items: stretch;
152
141
  display: flex;
@@ -65,9 +65,6 @@
65
65
  &-shopping-bag {
66
66
  .media-position(116px, 1px, 14px);
67
67
  }
68
- &-flower {
69
- .media-position(156px, -24px, 11px);
70
- }
71
68
  }
72
69
 
73
70
  &-container {
@@ -104,16 +104,6 @@ export const Default = () => {
104
104
  onClick={action('action clicked')}
105
105
  onDismiss={action('dismissed')}
106
106
  />
107
-
108
- <Nudge
109
- mediaName={Assets.FLOWER}
110
- className="m-b-2"
111
- title="Text that is no longer than two lines."
112
- link="Link"
113
- href="#"
114
- onClick={action('action clicked')}
115
- onDismiss={action('dismissed')}
116
- />
117
107
  </div>
118
108
  );
119
109
  };
@@ -38,8 +38,7 @@ type MediaNameType =
38
38
  | `${Assets.BUSINESS_CARD}`
39
39
  | `${Assets.HEART}`
40
40
  | `${Assets.MULTI_CURRENCY}`
41
- | `${Assets.SHOPPING_BAG}`
42
- | `${Assets.FLOWER}`;
41
+ | `${Assets.SHOPPING_BAG}`;
43
42
 
44
43
  type BaseProps = {
45
44
  /** @deprecated use `mediaName` property instead */
@@ -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((fileType: string) => {
24
- const splittedFileTypes = fileType?.split(',');
25
-
26
- if (splittedFileTypes?.length > 1) {
27
- // If `fileType` contains `format` and `mime` types, remove mime types, proceed only with format types
28
- return splittedFileTypes
29
- .filter((splittedFileType: string) => !splittedFileType?.includes('/'))
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;
@@ -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
@@ -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;;;;"}