@transferwise/components 0.0.0-experimental-5e036d6 → 0.0.0-experimental-de92c64

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 (105) 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 +2 -2
  6. package/build/button/Button.mjs +2 -2
  7. package/build/iconButton/IconButton.js +2 -2
  8. package/build/iconButton/IconButton.mjs +2 -2
  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/link/Link.js +2 -2
  14. package/build/link/Link.mjs +2 -2
  15. package/build/main.css +1 -2
  16. package/build/primitives/PrimitiveAnchor/PrimitiveAnchor.js.map +1 -0
  17. package/build/primitives/PrimitiveAnchor/PrimitiveAnchor.mjs.map +1 -0
  18. package/build/primitives/PrimitiveButton/{src/PrimitiveButton.js → PrimitiveButton.js} +1 -1
  19. package/build/primitives/PrimitiveButton/PrimitiveButton.js.map +1 -0
  20. package/build/primitives/PrimitiveButton/{src/PrimitiveButton.mjs → PrimitiveButton.mjs} +1 -1
  21. package/build/primitives/PrimitiveButton/PrimitiveButton.mjs.map +1 -0
  22. package/build/styles/avatarLayout/AvatarLayout.css +1 -2
  23. package/build/styles/main.css +1 -2
  24. package/build/types/avatarLayout/AvatarLayout.d.ts.map +1 -1
  25. package/build/types/index.d.ts +0 -2
  26. package/build/types/index.d.ts.map +1 -1
  27. package/build/types/primitives/PrimitiveAnchor/PrimitiveAnchor.d.ts.map +1 -0
  28. package/build/types/primitives/PrimitiveAnchor/PrimitiveAnchor.types.d.ts +25 -0
  29. package/build/types/primitives/PrimitiveAnchor/PrimitiveAnchor.types.d.ts.map +1 -0
  30. package/build/types/primitives/PrimitiveAnchor/index.d.ts +2 -2
  31. package/build/types/primitives/PrimitiveAnchor/index.d.ts.map +1 -1
  32. package/build/types/primitives/PrimitiveButton/{src/PrimitiveButton.d.ts → PrimitiveButton.d.ts} +1 -1
  33. package/build/types/primitives/PrimitiveButton/PrimitiveButton.d.ts.map +1 -0
  34. package/build/types/primitives/PrimitiveButton/{src/PrimitiveButton.types.d.ts → PrimitiveButton.types.d.ts} +1 -1
  35. package/build/types/primitives/PrimitiveButton/PrimitiveButton.types.d.ts.map +1 -0
  36. package/build/types/primitives/PrimitiveButton/index.d.ts +2 -2
  37. package/build/types/primitives/PrimitiveButton/index.d.ts.map +1 -1
  38. package/build/types/uploadInput/uploadButton/getAllowedFileTypes.d.ts.map +1 -1
  39. package/build/uploadInput/uploadButton/getAllowedFileTypes.js +3 -23
  40. package/build/uploadInput/uploadButton/getAllowedFileTypes.js.map +1 -1
  41. package/build/uploadInput/uploadButton/getAllowedFileTypes.mjs +3 -23
  42. package/build/uploadInput/uploadButton/getAllowedFileTypes.mjs.map +1 -1
  43. package/package.json +3 -3
  44. package/src/avatarLayout/AvatarLayout.css +1 -2
  45. package/src/avatarLayout/AvatarLayout.less +1 -1
  46. package/src/avatarLayout/AvatarLayout.tsx +0 -1
  47. package/src/drawer/Drawer.rtl.spec.tsx +59 -0
  48. package/src/drawer/Drawer.spec.js +101 -0
  49. package/src/drawer/__snapshots__/Drawer.rtl.spec.tsx.snap +55 -0
  50. package/src/index.ts +0 -12
  51. package/src/main.css +1 -2
  52. package/src/primitives/PrimitiveAnchor/PrimitiveAnchor.types.ts +33 -0
  53. package/src/primitives/PrimitiveAnchor/index.ts +6 -2
  54. package/src/primitives/PrimitiveAnchor/stories/PrimitiveAnchor.tests.story.tsx +1 -1
  55. package/src/primitives/PrimitiveAnchor/test/PrimitiveAnchor.spec.tsx +1 -1
  56. package/src/primitives/PrimitiveButton/{src/PrimitiveButton.tsx → PrimitiveButton.tsx} +2 -2
  57. package/src/primitives/PrimitiveButton/{src/PrimitiveButton.types.ts → PrimitiveButton.types.ts} +1 -1
  58. package/src/primitives/PrimitiveButton/index.ts +6 -2
  59. package/src/primitives/PrimitiveButton/stories/PrimitiveButton.tests.story.tsx +1 -1
  60. package/src/primitives/PrimitiveButton/test/PrimitiveButton.spec.tsx +1 -1
  61. package/src/uploadInput/UploadInput.tests.story.tsx +5 -5
  62. package/src/uploadInput/uploadButton/getAllowedFileTypes.spec.ts +0 -12
  63. package/src/uploadInput/uploadButton/getAllowedFileTypes.ts +7 -33
  64. package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.js.map +0 -1
  65. package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.mjs.map +0 -1
  66. package/build/primitives/PrimitiveButton/src/PrimitiveButton.js.map +0 -1
  67. package/build/primitives/PrimitiveButton/src/PrimitiveButton.mjs.map +0 -1
  68. package/build/table/Table.js +0 -166
  69. package/build/table/Table.js.map +0 -1
  70. package/build/table/Table.messages.js +0 -24
  71. package/build/table/Table.messages.js.map +0 -1
  72. package/build/table/Table.messages.mjs +0 -22
  73. package/build/table/Table.messages.mjs.map +0 -1
  74. package/build/table/Table.mjs +0 -164
  75. package/build/table/Table.mjs.map +0 -1
  76. package/build/table/TableCell.js +0 -86
  77. package/build/table/TableCell.js.map +0 -1
  78. package/build/table/TableCell.mjs +0 -84
  79. package/build/table/TableCell.mjs.map +0 -1
  80. package/build/table/TableHeader.js +0 -57
  81. package/build/table/TableHeader.js.map +0 -1
  82. package/build/table/TableHeader.mjs +0 -55
  83. package/build/table/TableHeader.mjs.map +0 -1
  84. package/build/table/TableRow.js +0 -85
  85. package/build/table/TableRow.js.map +0 -1
  86. package/build/table/TableRow.mjs +0 -83
  87. package/build/table/TableRow.mjs.map +0 -1
  88. package/build/table/TableStatusText.js +0 -54
  89. package/build/table/TableStatusText.js.map +0 -1
  90. package/build/table/TableStatusText.mjs +0 -52
  91. package/build/table/TableStatusText.mjs.map +0 -1
  92. package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.d.ts.map +0 -1
  93. package/build/types/primitives/PrimitiveAnchor/src/index.d.ts +0 -3
  94. package/build/types/primitives/PrimitiveAnchor/src/index.d.ts.map +0 -1
  95. package/build/types/primitives/PrimitiveButton/src/PrimitiveButton.d.ts.map +0 -1
  96. package/build/types/primitives/PrimitiveButton/src/PrimitiveButton.types.d.ts.map +0 -1
  97. package/build/types/primitives/PrimitiveButton/src/index.d.ts +0 -3
  98. package/build/types/primitives/PrimitiveButton/src/index.d.ts.map +0 -1
  99. package/src/drawer/Drawer.spec.tsx +0 -93
  100. package/src/primitives/PrimitiveAnchor/src/index.ts +0 -6
  101. package/src/primitives/PrimitiveButton/src/index.ts +0 -6
  102. /package/build/primitives/PrimitiveAnchor/{src/PrimitiveAnchor.js → PrimitiveAnchor.js} +0 -0
  103. /package/build/primitives/PrimitiveAnchor/{src/PrimitiveAnchor.mjs → PrimitiveAnchor.mjs} +0 -0
  104. /package/build/types/primitives/PrimitiveAnchor/{src/PrimitiveAnchor.d.ts → PrimitiveAnchor.d.ts} +0 -0
  105. /package/src/primitives/PrimitiveAnchor/{src/PrimitiveAnchor.tsx → PrimitiveAnchor.tsx} +0 -0
@@ -1 +1 @@
1
- {"version":3,"file":"getAllowedFileTypes.mjs","sources":["../../../src/uploadInput/uploadButton/getAllowedFileTypes.ts"],"sourcesContent":["import { FileType } from '../../common';\n\nconst parseFileType = (fileType: string): string => {\n if (fileType?.includes('.')) {\n return fileType.replace('.', '').toUpperCase();\n }\n\n const mimeType = fileType?.split('/');\n if (mimeType?.length > 1) {\n let parsedType = mimeType[1];\n\n if (parsedType.toLocaleLowerCase() === 'jpeg') {\n parsedType = 'jpg, '.concat(parsedType).toUpperCase();\n }\n\n return parsedType.toUpperCase();\n }\n\n return fileType;\n};\n\nconst getAllowedFileTypes = (fileTypes: readonly FileType[] | readonly string[]): string[] =>\n fileTypes.map((fileType: string) => {\n const splittedFileTypes = fileType?.split(',');\n\n if (splittedFileTypes?.length > 1) {\n // If `fileType` contains `format` and `mime` types, remove mime types, proceed only with format types\n return splittedFileTypes\n .filter((splittedFileType: string) => !splittedFileType?.includes('/'))\n .map((splittedFileType: string) => parseFileType(splittedFileType))\n .join(', ');\n }\n\n // If `fileType` contains only `format` or `mime` type, parse the type\n return parseFileType(fileType);\n });\n\nexport default getAllowedFileTypes;\n"],"names":["parseFileType","fileType","includes","replace","toUpperCase","mimeType","split","length","parsedType","toLocaleLowerCase","concat","getAllowedFileTypes","fileTypes","map","splittedFileTypes","filter","splittedFileType","join"],"mappings":"AAEA,MAAMA,aAAa,GAAIC,QAAgB,IAAY;AACjD,EAAA,IAAIA,QAAQ,EAAEC,QAAQ,CAAC,GAAG,CAAC,EAAE;IAC3B,OAAOD,QAAQ,CAACE,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAACC,WAAW,EAAE,CAAA;AAChD,GAAA;AAEA,EAAA,MAAMC,QAAQ,GAAGJ,QAAQ,EAAEK,KAAK,CAAC,GAAG,CAAC,CAAA;AACrC,EAAA,IAAID,QAAQ,EAAEE,MAAM,GAAG,CAAC,EAAE;AACxB,IAAA,IAAIC,UAAU,GAAGH,QAAQ,CAAC,CAAC,CAAC,CAAA;AAE5B,IAAA,IAAIG,UAAU,CAACC,iBAAiB,EAAE,KAAK,MAAM,EAAE;MAC7CD,UAAU,GAAG,OAAO,CAACE,MAAM,CAACF,UAAU,CAAC,CAACJ,WAAW,EAAE,CAAA;AACvD,KAAA;AAEA,IAAA,OAAOI,UAAU,CAACJ,WAAW,EAAE,CAAA;AACjC,GAAA;AAEA,EAAA,OAAOH,QAAQ,CAAA;AACjB,CAAC,CAAA;AAEKU,MAAAA,mBAAmB,GAAIC,SAAkD,IAC7EA,SAAS,CAACC,GAAG,CAAEZ,QAAgB,IAAI;AACjC,EAAA,MAAMa,iBAAiB,GAAGb,QAAQ,EAAEK,KAAK,CAAC,GAAG,CAAC,CAAA;AAE9C,EAAA,IAAIQ,iBAAiB,EAAEP,MAAM,GAAG,CAAC,EAAE;AACjC;AACA,IAAA,OAAOO,iBAAiB,CACrBC,MAAM,CAAEC,gBAAwB,IAAK,CAACA,gBAAgB,EAAEd,QAAQ,CAAC,GAAG,CAAC,CAAC,CACtEW,GAAG,CAAEG,gBAAwB,IAAKhB,aAAa,CAACgB,gBAAgB,CAAC,CAAC,CAClEC,IAAI,CAAC,IAAI,CAAC,CAAA;AACf,GAAA;AAEA;EACA,OAAOjB,aAAa,CAACC,QAAQ,CAAC,CAAA;AAChC,CAAC;;;;"}
1
+ {"version":3,"file":"getAllowedFileTypes.mjs","sources":["../../../src/uploadInput/uploadButton/getAllowedFileTypes.ts"],"sourcesContent":["import { FileType } from '../../common';\n\nconst getAllowedFileTypes = (fileTypes: readonly FileType[] | readonly string[]): string[] =>\n fileTypes.map((fileTypeDefinition: string) =>\n fileTypeDefinition\n .split(',')\n .filter((extension) => !extension.includes('/')) // Filter out mime types\n .map((extension) => extension.replace('.', '').toUpperCase()) // Remove dot and convert extensions to uppercase to be displayed in the instructions\n .join(', '),\n );\n\nexport default getAllowedFileTypes;\n"],"names":["getAllowedFileTypes","fileTypes","map","fileTypeDefinition","split","filter","extension","includes","replace","toUpperCase","join"],"mappings":"AAEA,MAAMA,mBAAmB,GAAIC,SAAkD,IAC7EA,SAAS,CAACC,GAAG,CAAEC,kBAA0B,IACvCA,kBAAkB,CACfC,KAAK,CAAC,GAAG,CAAC,CACVC,MAAM,CAAEC,SAAS,IAAK,CAACA,SAAS,CAACC,QAAQ,CAAC,GAAG,CAAC,CAAC;AAAC,CAChDL,GAAG,CAAEI,SAAS,IAAKA,SAAS,CAACE,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAACC,WAAW,EAAE,CAAC;AAAC,CAC7DC,IAAI,CAAC,IAAI,CAAC;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-5e036d6",
3
+ "version": "0.0.0-experimental-de92c64",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -92,12 +92,12 @@
92
92
  "rollup-preserve-directives": "^1.1.1",
93
93
  "storybook": "^8.2.2",
94
94
  "@transferwise/less-config": "3.1.0",
95
- "@transferwise/neptune-css": "0.0.0-experimental-5e036d6",
95
+ "@transferwise/neptune-css": "0.0.0-experimental-de92c64",
96
96
  "@wise/components-theming": "1.6.1"
97
97
  },
98
98
  "peerDependencies": {
99
99
  "@transferwise/icons": "^3.13.1",
100
- "@transferwise/neptune-css": "0.0.0-experimental-5e036d6",
100
+ "@transferwise/neptune-css": "0.0.0-experimental-de92c64",
101
101
  "@wise/art": "^2.16",
102
102
  "@wise/components-theming": "^1.0.0",
103
103
  "react": ">=18",
@@ -24,8 +24,7 @@
24
24
  margin-right: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
25
25
  }
26
26
  .np-avatar-layout-horizontal {
27
- width: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - (var(--np-avatar-offset) * (var(--np-avatar-avatars-count) - 1)));
28
- width: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - calc(var(--np-avatar-offset) * calc(var(--np-avatar-avatars-count) - 1)));
27
+ width: calc(var(--np-avatar-size) * 2 - var(--np-avatar-offset));
29
28
  height: var(--np-avatar-layout-size);
30
29
  }
31
30
  .np-avatar-layout-horizontal-mask {
@@ -35,7 +35,7 @@
35
35
  }
36
36
 
37
37
  &-horizontal {
38
- width: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - calc(var(--np-avatar-offset) * calc(var(--np-avatar-avatars-count) - 1)));
38
+ width: calc(var(--np-avatar-size) * 2 - var(--np-avatar-offset));
39
39
  height: var(--np-avatar-layout-size);
40
40
 
41
41
  &-mask {
@@ -40,7 +40,6 @@ export default function AvatarLayout({
40
40
  '--np-avatar-layout-size': `${size}px`,
41
41
  '--np-avatar-size': `${avatarSize}px`,
42
42
  '--np-avatar-offset': `${isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size].offset : HORIZONTAL_LAYOUT_OFFSET[size]}px`,
43
- '--np-avatar-avatars-count': avatars.length,
44
43
  }}
45
44
  {...restProps}
46
45
  >
@@ -0,0 +1,59 @@
1
+ import { DimmerProps } from '../dimmer';
2
+ import { SlidingPanelProps } from '../slidingPanel';
3
+ import { mockMatchMedia, render, screen, userEvent } from '../test-utils';
4
+
5
+ import Drawer from './Drawer';
6
+
7
+ mockMatchMedia();
8
+
9
+ jest.mock(
10
+ '../dimmer',
11
+ () =>
12
+ function Dimmer({ open, children }: DimmerProps) {
13
+ return open ? <div className="dimmer">{children}</div> : null;
14
+ },
15
+ );
16
+
17
+ jest.mock(
18
+ '../slidingPanel',
19
+ () =>
20
+ function SlidingPanel({ open, children }: SlidingPanelProps) {
21
+ return open ? <div className="sliding-panel">{children}</div> : null;
22
+ },
23
+ );
24
+
25
+ describe('Drawer', () => {
26
+ const props = {
27
+ onClose: jest.fn(),
28
+ open: true,
29
+ };
30
+
31
+ afterEach(() => {
32
+ jest.clearAllMocks();
33
+ });
34
+
35
+ it('renders content when open', () => {
36
+ const { container } = render(<Drawer {...props}>content</Drawer>);
37
+
38
+ expect(container).toMatchSnapshot();
39
+ });
40
+
41
+ it("doesn't render content when closed", () => {
42
+ const { container } = render(
43
+ <Drawer {...props} open={false}>
44
+ content
45
+ </Drawer>,
46
+ );
47
+
48
+ expect(container).toMatchSnapshot();
49
+ });
50
+
51
+ it('calls onClose when user clicks close button', async () => {
52
+ render(<Drawer {...props}>content</Drawer>);
53
+ expect(props.onClose).not.toHaveBeenCalled();
54
+ await userEvent.click(getCloseButton());
55
+ expect(props.onClose).toHaveBeenCalledTimes(1);
56
+ });
57
+
58
+ const getCloseButton = () => screen.getByLabelText('Close');
59
+ });
@@ -0,0 +1,101 @@
1
+ import { mount } from 'enzyme';
2
+
3
+ import { mockMatchMedia } from '../test-utils';
4
+ import Title from '../title/Title';
5
+
6
+ import Drawer from '.';
7
+
8
+ mockMatchMedia();
9
+ jest.mock('../common');
10
+ jest.useFakeTimers();
11
+
12
+ jest.mock(
13
+ '../dimmer',
14
+ () =>
15
+ function Dimmer({ open, children }) {
16
+ return open ? <div className="dimmer">{children}</div> : null;
17
+ },
18
+ );
19
+
20
+ jest.mock(
21
+ '../slidingPanel',
22
+ () =>
23
+ function SlidingPanel({ open, children }) {
24
+ return open ? <div className="sliding-panel">{children}</div> : null;
25
+ },
26
+ );
27
+
28
+ const defaultLocale = 'en-GB';
29
+
30
+ jest.mock('react-intl', () => ({
31
+ injectIntl: (Component) =>
32
+ function InjectedComponent(props) {
33
+ return <Component {...props} intl={{ locale: defaultLocale }} />;
34
+ },
35
+ useIntl: () => ({ locale: defaultLocale, formatMessage: (id) => String(id) }),
36
+ defineMessages: (translations) => translations,
37
+ }));
38
+
39
+ describe('Drawer', () => {
40
+ let component;
41
+ const props = {
42
+ open: true,
43
+ position: 'left',
44
+ onClose: jest.fn(),
45
+ children: null,
46
+ headerTitle: null,
47
+ footerContent: null,
48
+ };
49
+
50
+ beforeEach(() => {
51
+ component = mount(<Drawer {...props} />);
52
+ });
53
+
54
+ afterEach(() => {
55
+ jest.clearAllMocks();
56
+ component.unmount();
57
+ });
58
+
59
+ it('renders drawer header if title is provided', () => {
60
+ expect(component.find('.np-drawer-header--title')).toHaveLength(0);
61
+ component.setProps({ headerTitle: 'A title' });
62
+ expect(component.find(Title)).toHaveLength(1);
63
+ expect(component.find(Title).props().children).toBe('A title');
64
+ });
65
+
66
+ it('renders header with or without borders', () => {
67
+ expect(component.find('.np-drawer-header--withborder')).toHaveLength(0);
68
+ component.setProps({ headerTitle: 'A title' });
69
+ expect(component.find('.np-drawer-header--withborder')).toHaveLength(1);
70
+ });
71
+
72
+ it('renders content if children are provided', () => {
73
+ expect(component.find('.np-drawer-content')).toHaveLength(0);
74
+ component.setProps({ children: 'SomeChildren' });
75
+ expect(component.find('.np-drawer-content')).toHaveLength(1);
76
+ });
77
+
78
+ it('renders drawer footer if footerContent is provided', () => {
79
+ expect(component.find('.np-drawer-footer')).toHaveLength(0);
80
+ component.setProps({ footerContent: 'SomeContent' });
81
+ expect(component.find('.np-drawer-footer')).toHaveLength(1);
82
+ });
83
+
84
+ it('passes onUnmount to Dimmer onExited prop', () => {
85
+ const onUnmount = jest.fn();
86
+ component.setProps({ onUnmount });
87
+ component.setProps({ open: true });
88
+ expect(component.find('Dimmer').prop('onExited')).toBe(onUnmount);
89
+ });
90
+
91
+ it('calls onUnmount when the component unmounts', () => {
92
+ const onUnmount = jest.fn();
93
+ component.setProps({ onUnmount });
94
+ component.setProps({ open: true });
95
+ expect(onUnmount).not.toHaveBeenCalled();
96
+ jest.runAllTimers();
97
+ component.setProps({ open: false });
98
+ component.find('Dimmer').prop('onExited')();
99
+ expect(onUnmount).toHaveBeenCalledTimes(1);
100
+ });
101
+ });
@@ -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 {
@@ -0,0 +1,33 @@
1
+ import React, { ReactNode } from 'react';
2
+ import { BasePrimitiveProps, StyleProp } from '..';
3
+
4
+ /**
5
+ * Type aliases for an anchor component.
6
+ */
7
+ export type PrimitiveAnchorAttributes = React.AnchorHTMLAttributes<HTMLAnchorElement>;
8
+ export type PrimitiveAnchorElementRef = React.Ref<HTMLAnchorElement>;
9
+
10
+ /**
11
+ * Properties for the anchor component.
12
+ */
13
+ export interface PrimitiveAnchorProps
14
+ extends BasePrimitiveProps,
15
+ StyleProp,
16
+ Omit<PrimitiveAnchorAttributes, 'role'> {
17
+ /** Content of the anchor */
18
+ children?: ReactNode;
19
+
20
+ /** The URL to navigate to when the anchor is clicked */
21
+ href?: string | undefined;
22
+
23
+ /** Disable the anchor */
24
+ disabled?: boolean;
25
+
26
+ /** Reference to the anchor element */
27
+ ref?: PrimitiveAnchorElementRef;
28
+
29
+ /**
30
+ * HTML anchor `target` attribute. If set to `_blank`, `rel="noopener noreferrer"` is automatically added to the rendered node.
31
+ */
32
+ target?: HTMLAnchorElement['target'];
33
+ }
@@ -1,2 +1,6 @@
1
- export { default } from './src';
2
- export * from './src';
1
+ export { default } from './PrimitiveAnchor';
2
+ export type {
3
+ PrimitiveAnchorProps,
4
+ PrimitiveAnchorAttributes,
5
+ PrimitiveAnchorElementRef,
6
+ } from './PrimitiveAnchor.types';
@@ -1,7 +1,7 @@
1
1
  import { useState } from 'react';
2
2
  import { userEvent, within, expect, waitFor } from '@storybook/test';
3
3
  import { Meta, StoryObj } from '@storybook/react';
4
- import PrimitiveAnchor from '../src';
4
+ import PrimitiveAnchor from '..';
5
5
 
6
6
  const meta = {
7
7
  title: 'Primitives/Anchor/Tests',
@@ -1,5 +1,5 @@
1
1
  import { render, screen } from '@testing-library/react';
2
- import PrimitiveAnchor from '../src';
2
+ import PrimitiveAnchor from '..';
3
3
 
4
4
  describe('PrimitiveAnchor', () => {
5
5
  const defaultProps = {
@@ -2,8 +2,8 @@
2
2
  import React, { forwardRef, useCallback } from 'react';
3
3
  import { clsx } from 'clsx';
4
4
  import { useIntl, MessageDescriptor } from 'react-intl';
5
- import messages from '../../../i18n/commonMessages/Button.messages';
6
- import type { PrimitiveButtonProps } from '..';
5
+ import messages from '../../i18n/commonMessages/Button.messages';
6
+ import type { PrimitiveButtonProps } from '.';
7
7
 
8
8
  /**
9
9
  * The Primitive `PrimitiveButton` component can be used in various parts the Wise Design
@@ -1,5 +1,5 @@
1
1
  import React, { ReactNode } from 'react';
2
- import { BasePrimitiveProps, StyleProp } from '../..';
2
+ import { BasePrimitiveProps, StyleProp } from '..';
3
3
 
4
4
  /**
5
5
  * Type aliases for a button component.
@@ -1,2 +1,6 @@
1
- export { default } from './src';
2
- export * from './src';
1
+ export { default } from './PrimitiveButton';
2
+ export type {
3
+ PrimitiveButtonProps,
4
+ PrimitiveButtonAttributes,
5
+ PrimitiveButtonElementRef,
6
+ } from './PrimitiveButton.types';
@@ -1,7 +1,7 @@
1
1
  import { useState } from 'react';
2
2
  import { userEvent, within, expect, waitFor } from '@storybook/test';
3
3
  import { Meta, StoryObj } from '@storybook/react';
4
- import PrimitiveButton from '../src';
4
+ import PrimitiveButton from '..';
5
5
 
6
6
  const meta = {
7
7
  title: 'Primitives/Button/Tests',
@@ -1,5 +1,5 @@
1
1
  import { screen } from '@testing-library/react';
2
- import PrimitiveButton from '../src';
2
+ import PrimitiveButton from '..';
3
3
  import messages from '../../../i18n/commonMessages/Button.messages';
4
4
  import { render } from '../../../test-utils';
5
5
 
@@ -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 +0,0 @@
1
- {"version":3,"file":"PrimitiveAnchor.js","sources":["../../../../src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.tsx"],"sourcesContent":["import React, { forwardRef, useCallback } from 'react';\nimport { clsx } from 'clsx';\nimport type { PrimitiveAnchorProps } from '..';\n\n/**\n * The Primitive `PrimitiveAnchor` component is customisable link element that can be\n * used in various parts of the Wise Design System internally. It supports\n * different states such as disabled and provides event handlers for common\n * interactions like click, focus, blur, mouse enter, mouse leave, and key down.\n *\n * @see {@link PrimitiveAnchor} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/primitive-anchor--docs|Storybook Wise Design}\n */\nconst PrimitiveAnchor = forwardRef<HTMLAnchorElement, PrimitiveAnchorProps>(\n (\n {\n children,\n className,\n href,\n id,\n disabled = false,\n testId,\n onClick,\n onFocus,\n onBlur,\n onMouseEnter,\n onMouseLeave,\n onKeyDown,\n ...props\n },\n ref,\n ) => {\n const anchorClasses = clsx(className);\n\n const handleClick = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement>) => {\n if (disabled) {\n event.preventDefault();\n } else {\n onClick?.(event);\n }\n },\n [disabled, onClick],\n );\n\n const handleFocus = useCallback(\n (event: React.FocusEvent<HTMLAnchorElement>) => {\n onFocus?.(event);\n },\n [onFocus],\n );\n\n const handleBlur = useCallback(\n (event: React.FocusEvent<HTMLAnchorElement>) => {\n onBlur?.(event);\n },\n [onBlur],\n );\n\n const handleMouseEnter = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement>) => {\n onMouseEnter?.(event);\n },\n [onMouseEnter],\n );\n\n const handleMouseLeave = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement>) => {\n onMouseLeave?.(event);\n },\n [onMouseLeave],\n );\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLAnchorElement>) => {\n onKeyDown?.(event);\n },\n [onKeyDown],\n );\n\n /**\n * The following props are set to handle the `disabled` state for the link:\n *\n * - `aria-disabled`: Exposes the link as disabled to assistive technologies.\n * - `href`: Removed when `disabled` is true to prevent navigation.\n * - `role`: Set to 'link' when `disabled` is true to ensure the element\n * is still exposed as a link.\n *\n * For more details, refer to Scott O'Hara's article on disabling links:\n * https://www.scottohara.me/blog/2021/05/28/disabled-links.html\n */\n const anchorProps = {\n 'aria-disabled': disabled,\n className: anchorClasses,\n 'data-testid': testId,\n href: disabled ? undefined : href,\n id,\n ref,\n role: disabled ? 'link' : undefined,\n rel: props.target === '_blank' ? 'noopener noreferrer' : undefined,\n onClick: handleClick,\n onFocus: handleFocus,\n onBlur: handleBlur,\n onMouseEnter: handleMouseEnter,\n onMouseLeave: handleMouseLeave,\n onKeyDown: handleKeyDown,\n ...props,\n };\n\n return <a {...anchorProps}>{children}</a>;\n },\n);\n\nPrimitiveAnchor.displayName = 'PrimitiveAnchor';\n\nexport default PrimitiveAnchor;\n"],"names":["PrimitiveAnchor","forwardRef","children","className","href","id","disabled","testId","onClick","onFocus","onBlur","onMouseEnter","onMouseLeave","onKeyDown","props","ref","anchorClasses","clsx","handleClick","useCallback","event","preventDefault","handleFocus","handleBlur","handleMouseEnter","handleMouseLeave","handleKeyDown","anchorProps","undefined","role","rel","target","_jsx","displayName"],"mappings":";;;;;;AAaA,MAAMA,eAAe,gBAAGC,gBAAU,CAChC,CACE;EACEC,QAAQ;EACRC,SAAS;EACTC,IAAI;EACJC,EAAE;AACFC,EAAAA,QAAQ,GAAG,KAAK;EAChBC,MAAM;EACNC,OAAO;EACPC,OAAO;EACPC,MAAM;EACNC,YAAY;EACZC,YAAY;EACZC,SAAS;EACT,GAAGC,KAAAA;CACJ,EACDC,GAAG,KACD;AACF,EAAA,MAAMC,aAAa,GAAGC,SAAI,CAACd,SAAS,CAAC,CAAA;AAErC,EAAA,MAAMe,WAAW,GAAGC,iBAAW,CAC5BC,KAA0C,IAAI;AAC7C,IAAA,IAAId,QAAQ,EAAE;MACZc,KAAK,CAACC,cAAc,EAAE,CAAA;AACxB,KAAC,MAAM;MACLb,OAAO,GAAGY,KAAK,CAAC,CAAA;AAClB,KAAA;AACF,GAAC,EACD,CAACd,QAAQ,EAAEE,OAAO,CAAC,CACpB,CAAA;AAED,EAAA,MAAMc,WAAW,GAAGH,iBAAW,CAC5BC,KAA0C,IAAI;IAC7CX,OAAO,GAAGW,KAAK,CAAC,CAAA;AAClB,GAAC,EACD,CAACX,OAAO,CAAC,CACV,CAAA;AAED,EAAA,MAAMc,UAAU,GAAGJ,iBAAW,CAC3BC,KAA0C,IAAI;IAC7CV,MAAM,GAAGU,KAAK,CAAC,CAAA;AACjB,GAAC,EACD,CAACV,MAAM,CAAC,CACT,CAAA;AAED,EAAA,MAAMc,gBAAgB,GAAGL,iBAAW,CACjCC,KAA0C,IAAI;IAC7CT,YAAY,GAAGS,KAAK,CAAC,CAAA;AACvB,GAAC,EACD,CAACT,YAAY,CAAC,CACf,CAAA;AAED,EAAA,MAAMc,gBAAgB,GAAGN,iBAAW,CACjCC,KAA0C,IAAI;IAC7CR,YAAY,GAAGQ,KAAK,CAAC,CAAA;AACvB,GAAC,EACD,CAACR,YAAY,CAAC,CACf,CAAA;AAED,EAAA,MAAMc,aAAa,GAAGP,iBAAW,CAC9BC,KAA6C,IAAI;IAChDP,SAAS,GAAGO,KAAK,CAAC,CAAA;AACpB,GAAC,EACD,CAACP,SAAS,CAAC,CACZ,CAAA;AAED;;;;;;;;;;AAUG;AACH,EAAA,MAAMc,WAAW,GAAG;AAClB,IAAA,eAAe,EAAErB,QAAQ;AACzBH,IAAAA,SAAS,EAAEa,aAAa;AACxB,IAAA,aAAa,EAAET,MAAM;AACrBH,IAAAA,IAAI,EAAEE,QAAQ,GAAGsB,SAAS,GAAGxB,IAAI;IACjCC,EAAE;IACFU,GAAG;AACHc,IAAAA,IAAI,EAAEvB,QAAQ,GAAG,MAAM,GAAGsB,SAAS;IACnCE,GAAG,EAAEhB,KAAK,CAACiB,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAGH,SAAS;AAClEpB,IAAAA,OAAO,EAAEU,WAAW;AACpBT,IAAAA,OAAO,EAAEa,WAAW;AACpBZ,IAAAA,MAAM,EAAEa,UAAU;AAClBZ,IAAAA,YAAY,EAAEa,gBAAgB;AAC9BZ,IAAAA,YAAY,EAAEa,gBAAgB;AAC9BZ,IAAAA,SAAS,EAAEa,aAAa;IACxB,GAAGZ,KAAAA;GACJ,CAAA;AAED,EAAA,oBAAOkB,cAAA,CAAA,GAAA,EAAA;AAAA,IAAA,GAAOL,WAAW;AAAAzB,IAAAA,QAAA,EAAGA,QAAAA;AAAQ,GAAI,CAAC,CAAA;AAC3C,CAAC,EACF;AAEDF,eAAe,CAACiC,WAAW,GAAG,iBAAiB;;;;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"PrimitiveAnchor.mjs","sources":["../../../../src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.tsx"],"sourcesContent":["import React, { forwardRef, useCallback } from 'react';\nimport { clsx } from 'clsx';\nimport type { PrimitiveAnchorProps } from '..';\n\n/**\n * The Primitive `PrimitiveAnchor` component is customisable link element that can be\n * used in various parts of the Wise Design System internally. It supports\n * different states such as disabled and provides event handlers for common\n * interactions like click, focus, blur, mouse enter, mouse leave, and key down.\n *\n * @see {@link PrimitiveAnchor} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/primitive-anchor--docs|Storybook Wise Design}\n */\nconst PrimitiveAnchor = forwardRef<HTMLAnchorElement, PrimitiveAnchorProps>(\n (\n {\n children,\n className,\n href,\n id,\n disabled = false,\n testId,\n onClick,\n onFocus,\n onBlur,\n onMouseEnter,\n onMouseLeave,\n onKeyDown,\n ...props\n },\n ref,\n ) => {\n const anchorClasses = clsx(className);\n\n const handleClick = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement>) => {\n if (disabled) {\n event.preventDefault();\n } else {\n onClick?.(event);\n }\n },\n [disabled, onClick],\n );\n\n const handleFocus = useCallback(\n (event: React.FocusEvent<HTMLAnchorElement>) => {\n onFocus?.(event);\n },\n [onFocus],\n );\n\n const handleBlur = useCallback(\n (event: React.FocusEvent<HTMLAnchorElement>) => {\n onBlur?.(event);\n },\n [onBlur],\n );\n\n const handleMouseEnter = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement>) => {\n onMouseEnter?.(event);\n },\n [onMouseEnter],\n );\n\n const handleMouseLeave = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement>) => {\n onMouseLeave?.(event);\n },\n [onMouseLeave],\n );\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLAnchorElement>) => {\n onKeyDown?.(event);\n },\n [onKeyDown],\n );\n\n /**\n * The following props are set to handle the `disabled` state for the link:\n *\n * - `aria-disabled`: Exposes the link as disabled to assistive technologies.\n * - `href`: Removed when `disabled` is true to prevent navigation.\n * - `role`: Set to 'link' when `disabled` is true to ensure the element\n * is still exposed as a link.\n *\n * For more details, refer to Scott O'Hara's article on disabling links:\n * https://www.scottohara.me/blog/2021/05/28/disabled-links.html\n */\n const anchorProps = {\n 'aria-disabled': disabled,\n className: anchorClasses,\n 'data-testid': testId,\n href: disabled ? undefined : href,\n id,\n ref,\n role: disabled ? 'link' : undefined,\n rel: props.target === '_blank' ? 'noopener noreferrer' : undefined,\n onClick: handleClick,\n onFocus: handleFocus,\n onBlur: handleBlur,\n onMouseEnter: handleMouseEnter,\n onMouseLeave: handleMouseLeave,\n onKeyDown: handleKeyDown,\n ...props,\n };\n\n return <a {...anchorProps}>{children}</a>;\n },\n);\n\nPrimitiveAnchor.displayName = 'PrimitiveAnchor';\n\nexport default PrimitiveAnchor;\n"],"names":["PrimitiveAnchor","forwardRef","children","className","href","id","disabled","testId","onClick","onFocus","onBlur","onMouseEnter","onMouseLeave","onKeyDown","props","ref","anchorClasses","clsx","handleClick","useCallback","event","preventDefault","handleFocus","handleBlur","handleMouseEnter","handleMouseLeave","handleKeyDown","anchorProps","undefined","role","rel","target","_jsx","displayName"],"mappings":";;;;AAaA,MAAMA,eAAe,gBAAGC,UAAU,CAChC,CACE;EACEC,QAAQ;EACRC,SAAS;EACTC,IAAI;EACJC,EAAE;AACFC,EAAAA,QAAQ,GAAG,KAAK;EAChBC,MAAM;EACNC,OAAO;EACPC,OAAO;EACPC,MAAM;EACNC,YAAY;EACZC,YAAY;EACZC,SAAS;EACT,GAAGC,KAAAA;CACJ,EACDC,GAAG,KACD;AACF,EAAA,MAAMC,aAAa,GAAGC,IAAI,CAACd,SAAS,CAAC,CAAA;AAErC,EAAA,MAAMe,WAAW,GAAGC,WAAW,CAC5BC,KAA0C,IAAI;AAC7C,IAAA,IAAId,QAAQ,EAAE;MACZc,KAAK,CAACC,cAAc,EAAE,CAAA;AACxB,KAAC,MAAM;MACLb,OAAO,GAAGY,KAAK,CAAC,CAAA;AAClB,KAAA;AACF,GAAC,EACD,CAACd,QAAQ,EAAEE,OAAO,CAAC,CACpB,CAAA;AAED,EAAA,MAAMc,WAAW,GAAGH,WAAW,CAC5BC,KAA0C,IAAI;IAC7CX,OAAO,GAAGW,KAAK,CAAC,CAAA;AAClB,GAAC,EACD,CAACX,OAAO,CAAC,CACV,CAAA;AAED,EAAA,MAAMc,UAAU,GAAGJ,WAAW,CAC3BC,KAA0C,IAAI;IAC7CV,MAAM,GAAGU,KAAK,CAAC,CAAA;AACjB,GAAC,EACD,CAACV,MAAM,CAAC,CACT,CAAA;AAED,EAAA,MAAMc,gBAAgB,GAAGL,WAAW,CACjCC,KAA0C,IAAI;IAC7CT,YAAY,GAAGS,KAAK,CAAC,CAAA;AACvB,GAAC,EACD,CAACT,YAAY,CAAC,CACf,CAAA;AAED,EAAA,MAAMc,gBAAgB,GAAGN,WAAW,CACjCC,KAA0C,IAAI;IAC7CR,YAAY,GAAGQ,KAAK,CAAC,CAAA;AACvB,GAAC,EACD,CAACR,YAAY,CAAC,CACf,CAAA;AAED,EAAA,MAAMc,aAAa,GAAGP,WAAW,CAC9BC,KAA6C,IAAI;IAChDP,SAAS,GAAGO,KAAK,CAAC,CAAA;AACpB,GAAC,EACD,CAACP,SAAS,CAAC,CACZ,CAAA;AAED;;;;;;;;;;AAUG;AACH,EAAA,MAAMc,WAAW,GAAG;AAClB,IAAA,eAAe,EAAErB,QAAQ;AACzBH,IAAAA,SAAS,EAAEa,aAAa;AACxB,IAAA,aAAa,EAAET,MAAM;AACrBH,IAAAA,IAAI,EAAEE,QAAQ,GAAGsB,SAAS,GAAGxB,IAAI;IACjCC,EAAE;IACFU,GAAG;AACHc,IAAAA,IAAI,EAAEvB,QAAQ,GAAG,MAAM,GAAGsB,SAAS;IACnCE,GAAG,EAAEhB,KAAK,CAACiB,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAGH,SAAS;AAClEpB,IAAAA,OAAO,EAAEU,WAAW;AACpBT,IAAAA,OAAO,EAAEa,WAAW;AACpBZ,IAAAA,MAAM,EAAEa,UAAU;AAClBZ,IAAAA,YAAY,EAAEa,gBAAgB;AAC9BZ,IAAAA,YAAY,EAAEa,gBAAgB;AAC9BZ,IAAAA,SAAS,EAAEa,aAAa;IACxB,GAAGZ,KAAAA;GACJ,CAAA;AAED,EAAA,oBAAOkB,GAAA,CAAA,GAAA,EAAA;AAAA,IAAA,GAAOL,WAAW;AAAAzB,IAAAA,QAAA,EAAGA,QAAAA;AAAQ,GAAI,CAAC,CAAA;AAC3C,CAAC,EACF;AAEDF,eAAe,CAACiC,WAAW,GAAG,iBAAiB;;;;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"PrimitiveButton.js","sources":["../../../../src/primitives/PrimitiveButton/src/PrimitiveButton.tsx"],"sourcesContent":["/* eslint-disable react/button-has-type */\nimport React, { forwardRef, useCallback } from 'react';\nimport { clsx } from 'clsx';\nimport { useIntl, MessageDescriptor } from 'react-intl';\nimport messages from '../../../i18n/commonMessages/Button.messages';\nimport type { PrimitiveButtonProps } from '..';\n\n/**\n * The Primitive `PrimitiveButton` component can be used in various parts the Wise Design\n * System internally. It supports different states such as disabled and loading,\n * and provides event handlers for common interactions like click, focus, blur,\n * mouse enter, mouse leave, and keydown.\n *\n * @see {@link PrimitiveButton} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/primitive-button--docs|Storybook Wise Design}\n */\nconst PrimitiveButton = forwardRef<HTMLButtonElement, PrimitiveButtonProps>(\n (\n {\n children,\n className,\n id,\n disabled = false,\n loading = false,\n testId,\n type = 'button',\n onClick,\n onFocus,\n onBlur,\n onMouseEnter,\n onMouseLeave,\n onKeyDown,\n ...props\n },\n ref,\n ) => {\n const intl = useIntl();\n const classNames = clsx(className);\n\n const handleClick = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n if (disabled || loading) {\n event.preventDefault();\n } else {\n onClick?.(event);\n }\n },\n [disabled, loading, onClick],\n );\n\n const handleFocus = useCallback(\n (event: React.FocusEvent<HTMLButtonElement>) => {\n onFocus?.(event);\n },\n [onFocus],\n );\n\n const handleBlur = useCallback(\n (event: React.FocusEvent<HTMLButtonElement>) => {\n onBlur?.(event);\n },\n [onBlur],\n );\n\n const handleMouseEnter = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n onMouseEnter?.(event);\n },\n [onMouseEnter],\n );\n\n const handleMouseLeave = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n onMouseLeave?.(event);\n },\n [onMouseLeave],\n );\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLButtonElement>) => {\n onKeyDown?.(event);\n },\n [onKeyDown],\n );\n\n /**\n * The following props are used to manage the `disabled` and `loading`\n * states for the button:\n *\n * - `aria-disabled`: Communicates to assistive technologies that the button\n * is disabled when it is either disabled or loading.\n * - `aria-label`: Provides an accessible label for the button, using a\n * localized loading message when the button is in a loading state.\n * - `aria-live`: Ensures that updates to the button's content are announced\n * by assistive technologies, set to 'polite' during loading.\n */\n const buttonProps = {\n 'aria-disabled': disabled || loading,\n 'aria-label': loading\n ? intl.formatMessage(messages.loadingAriaLabel as MessageDescriptor)\n : props['aria-label'],\n 'aria-live': (loading ? 'polite' : 'off') as 'polite' | 'off' | 'assertive' | undefined,\n className: classNames,\n 'data-testid': testId,\n disabled,\n id,\n ref,\n type,\n onBlur: handleBlur,\n onClick: handleClick,\n onFocus: handleFocus,\n onMouseEnter: handleMouseEnter,\n onMouseLeave: handleMouseLeave,\n onKeyDown: handleKeyDown,\n ...props,\n };\n\n return <button {...buttonProps}>{children}</button>;\n },\n);\n\nPrimitiveButton.displayName = 'PrimitiveButton';\n\nexport default PrimitiveButton;\n"],"names":["PrimitiveButton","forwardRef","children","className","id","disabled","loading","testId","type","onClick","onFocus","onBlur","onMouseEnter","onMouseLeave","onKeyDown","props","ref","intl","useIntl","classNames","clsx","handleClick","useCallback","event","preventDefault","handleFocus","handleBlur","handleMouseEnter","handleMouseLeave","handleKeyDown","buttonProps","formatMessage","messages","loadingAriaLabel","_jsx","displayName"],"mappings":";;;;;;;;AAAA;AAgBA,MAAMA,eAAe,gBAAGC,gBAAU,CAChC,CACE;EACEC,QAAQ;EACRC,SAAS;EACTC,EAAE;AACFC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA,OAAO,GAAG,KAAK;EACfC,MAAM;AACNC,EAAAA,IAAI,GAAG,QAAQ;EACfC,OAAO;EACPC,OAAO;EACPC,MAAM;EACNC,YAAY;EACZC,YAAY;EACZC,SAAS;EACT,GAAGC,KAAAA;CACJ,EACDC,GAAG,KACD;AACF,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE,CAAA;AACtB,EAAA,MAAMC,UAAU,GAAGC,SAAI,CAACjB,SAAS,CAAC,CAAA;AAElC,EAAA,MAAMkB,WAAW,GAAGC,iBAAW,CAC5BC,KAA0C,IAAI;IAC7C,IAAIlB,QAAQ,IAAIC,OAAO,EAAE;MACvBiB,KAAK,CAACC,cAAc,EAAE,CAAA;AACxB,KAAC,MAAM;MACLf,OAAO,GAAGc,KAAK,CAAC,CAAA;AAClB,KAAA;GACD,EACD,CAAClB,QAAQ,EAAEC,OAAO,EAAEG,OAAO,CAAC,CAC7B,CAAA;AAED,EAAA,MAAMgB,WAAW,GAAGH,iBAAW,CAC5BC,KAA0C,IAAI;IAC7Cb,OAAO,GAAGa,KAAK,CAAC,CAAA;AAClB,GAAC,EACD,CAACb,OAAO,CAAC,CACV,CAAA;AAED,EAAA,MAAMgB,UAAU,GAAGJ,iBAAW,CAC3BC,KAA0C,IAAI;IAC7CZ,MAAM,GAAGY,KAAK,CAAC,CAAA;AACjB,GAAC,EACD,CAACZ,MAAM,CAAC,CACT,CAAA;AAED,EAAA,MAAMgB,gBAAgB,GAAGL,iBAAW,CACjCC,KAA0C,IAAI;IAC7CX,YAAY,GAAGW,KAAK,CAAC,CAAA;AACvB,GAAC,EACD,CAACX,YAAY,CAAC,CACf,CAAA;AAED,EAAA,MAAMgB,gBAAgB,GAAGN,iBAAW,CACjCC,KAA0C,IAAI;IAC7CV,YAAY,GAAGU,KAAK,CAAC,CAAA;AACvB,GAAC,EACD,CAACV,YAAY,CAAC,CACf,CAAA;AAED,EAAA,MAAMgB,aAAa,GAAGP,iBAAW,CAC9BC,KAA6C,IAAI;IAChDT,SAAS,GAAGS,KAAK,CAAC,CAAA;AACpB,GAAC,EACD,CAACT,SAAS,CAAC,CACZ,CAAA;AAED;;;;;;;;;;AAUG;AACH,EAAA,MAAMgB,WAAW,GAAG;IAClB,eAAe,EAAEzB,QAAQ,IAAIC,OAAO;AACpC,IAAA,YAAY,EAAEA,OAAO,GACjBW,IAAI,CAACc,aAAa,CAACC,eAAQ,CAACC,gBAAqC,CAAC,GAClElB,KAAK,CAAC,YAAY,CAAC;AACvB,IAAA,WAAW,EAAGT,OAAO,GAAG,QAAQ,GAAG,KAAoD;AACvFH,IAAAA,SAAS,EAAEgB,UAAU;AACrB,IAAA,aAAa,EAAEZ,MAAM;IACrBF,QAAQ;IACRD,EAAE;IACFY,GAAG;IACHR,IAAI;AACJG,IAAAA,MAAM,EAAEe,UAAU;AAClBjB,IAAAA,OAAO,EAAEY,WAAW;AACpBX,IAAAA,OAAO,EAAEe,WAAW;AACpBb,IAAAA,YAAY,EAAEe,gBAAgB;AAC9Bd,IAAAA,YAAY,EAAEe,gBAAgB;AAC9Bd,IAAAA,SAAS,EAAEe,aAAa;IACxB,GAAGd,KAAAA;GACJ,CAAA;AAED,EAAA,oBAAOmB,cAAA,CAAA,QAAA,EAAA;AAAA,IAAA,GAAYJ,WAAW;AAAA5B,IAAAA,QAAA,EAAGA,QAAAA;AAAQ,GAAS,CAAC,CAAA;AACrD,CAAC,EACF;AAEDF,eAAe,CAACmC,WAAW,GAAG,iBAAiB;;;;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"PrimitiveButton.mjs","sources":["../../../../src/primitives/PrimitiveButton/src/PrimitiveButton.tsx"],"sourcesContent":["/* eslint-disable react/button-has-type */\nimport React, { forwardRef, useCallback } from 'react';\nimport { clsx } from 'clsx';\nimport { useIntl, MessageDescriptor } from 'react-intl';\nimport messages from '../../../i18n/commonMessages/Button.messages';\nimport type { PrimitiveButtonProps } from '..';\n\n/**\n * The Primitive `PrimitiveButton` component can be used in various parts the Wise Design\n * System internally. It supports different states such as disabled and loading,\n * and provides event handlers for common interactions like click, focus, blur,\n * mouse enter, mouse leave, and keydown.\n *\n * @see {@link PrimitiveButton} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/primitive-button--docs|Storybook Wise Design}\n */\nconst PrimitiveButton = forwardRef<HTMLButtonElement, PrimitiveButtonProps>(\n (\n {\n children,\n className,\n id,\n disabled = false,\n loading = false,\n testId,\n type = 'button',\n onClick,\n onFocus,\n onBlur,\n onMouseEnter,\n onMouseLeave,\n onKeyDown,\n ...props\n },\n ref,\n ) => {\n const intl = useIntl();\n const classNames = clsx(className);\n\n const handleClick = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n if (disabled || loading) {\n event.preventDefault();\n } else {\n onClick?.(event);\n }\n },\n [disabled, loading, onClick],\n );\n\n const handleFocus = useCallback(\n (event: React.FocusEvent<HTMLButtonElement>) => {\n onFocus?.(event);\n },\n [onFocus],\n );\n\n const handleBlur = useCallback(\n (event: React.FocusEvent<HTMLButtonElement>) => {\n onBlur?.(event);\n },\n [onBlur],\n );\n\n const handleMouseEnter = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n onMouseEnter?.(event);\n },\n [onMouseEnter],\n );\n\n const handleMouseLeave = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n onMouseLeave?.(event);\n },\n [onMouseLeave],\n );\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLButtonElement>) => {\n onKeyDown?.(event);\n },\n [onKeyDown],\n );\n\n /**\n * The following props are used to manage the `disabled` and `loading`\n * states for the button:\n *\n * - `aria-disabled`: Communicates to assistive technologies that the button\n * is disabled when it is either disabled or loading.\n * - `aria-label`: Provides an accessible label for the button, using a\n * localized loading message when the button is in a loading state.\n * - `aria-live`: Ensures that updates to the button's content are announced\n * by assistive technologies, set to 'polite' during loading.\n */\n const buttonProps = {\n 'aria-disabled': disabled || loading,\n 'aria-label': loading\n ? intl.formatMessage(messages.loadingAriaLabel as MessageDescriptor)\n : props['aria-label'],\n 'aria-live': (loading ? 'polite' : 'off') as 'polite' | 'off' | 'assertive' | undefined,\n className: classNames,\n 'data-testid': testId,\n disabled,\n id,\n ref,\n type,\n onBlur: handleBlur,\n onClick: handleClick,\n onFocus: handleFocus,\n onMouseEnter: handleMouseEnter,\n onMouseLeave: handleMouseLeave,\n onKeyDown: handleKeyDown,\n ...props,\n };\n\n return <button {...buttonProps}>{children}</button>;\n },\n);\n\nPrimitiveButton.displayName = 'PrimitiveButton';\n\nexport default PrimitiveButton;\n"],"names":["PrimitiveButton","forwardRef","children","className","id","disabled","loading","testId","type","onClick","onFocus","onBlur","onMouseEnter","onMouseLeave","onKeyDown","props","ref","intl","useIntl","classNames","clsx","handleClick","useCallback","event","preventDefault","handleFocus","handleBlur","handleMouseEnter","handleMouseLeave","handleKeyDown","buttonProps","formatMessage","messages","loadingAriaLabel","_jsx","displayName"],"mappings":";;;;;;AAAA;AAgBA,MAAMA,eAAe,gBAAGC,UAAU,CAChC,CACE;EACEC,QAAQ;EACRC,SAAS;EACTC,EAAE;AACFC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA,OAAO,GAAG,KAAK;EACfC,MAAM;AACNC,EAAAA,IAAI,GAAG,QAAQ;EACfC,OAAO;EACPC,OAAO;EACPC,MAAM;EACNC,YAAY;EACZC,YAAY;EACZC,SAAS;EACT,GAAGC,KAAAA;CACJ,EACDC,GAAG,KACD;AACF,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE,CAAA;AACtB,EAAA,MAAMC,UAAU,GAAGC,IAAI,CAACjB,SAAS,CAAC,CAAA;AAElC,EAAA,MAAMkB,WAAW,GAAGC,WAAW,CAC5BC,KAA0C,IAAI;IAC7C,IAAIlB,QAAQ,IAAIC,OAAO,EAAE;MACvBiB,KAAK,CAACC,cAAc,EAAE,CAAA;AACxB,KAAC,MAAM;MACLf,OAAO,GAAGc,KAAK,CAAC,CAAA;AAClB,KAAA;GACD,EACD,CAAClB,QAAQ,EAAEC,OAAO,EAAEG,OAAO,CAAC,CAC7B,CAAA;AAED,EAAA,MAAMgB,WAAW,GAAGH,WAAW,CAC5BC,KAA0C,IAAI;IAC7Cb,OAAO,GAAGa,KAAK,CAAC,CAAA;AAClB,GAAC,EACD,CAACb,OAAO,CAAC,CACV,CAAA;AAED,EAAA,MAAMgB,UAAU,GAAGJ,WAAW,CAC3BC,KAA0C,IAAI;IAC7CZ,MAAM,GAAGY,KAAK,CAAC,CAAA;AACjB,GAAC,EACD,CAACZ,MAAM,CAAC,CACT,CAAA;AAED,EAAA,MAAMgB,gBAAgB,GAAGL,WAAW,CACjCC,KAA0C,IAAI;IAC7CX,YAAY,GAAGW,KAAK,CAAC,CAAA;AACvB,GAAC,EACD,CAACX,YAAY,CAAC,CACf,CAAA;AAED,EAAA,MAAMgB,gBAAgB,GAAGN,WAAW,CACjCC,KAA0C,IAAI;IAC7CV,YAAY,GAAGU,KAAK,CAAC,CAAA;AACvB,GAAC,EACD,CAACV,YAAY,CAAC,CACf,CAAA;AAED,EAAA,MAAMgB,aAAa,GAAGP,WAAW,CAC9BC,KAA6C,IAAI;IAChDT,SAAS,GAAGS,KAAK,CAAC,CAAA;AACpB,GAAC,EACD,CAACT,SAAS,CAAC,CACZ,CAAA;AAED;;;;;;;;;;AAUG;AACH,EAAA,MAAMgB,WAAW,GAAG;IAClB,eAAe,EAAEzB,QAAQ,IAAIC,OAAO;AACpC,IAAA,YAAY,EAAEA,OAAO,GACjBW,IAAI,CAACc,aAAa,CAACC,QAAQ,CAACC,gBAAqC,CAAC,GAClElB,KAAK,CAAC,YAAY,CAAC;AACvB,IAAA,WAAW,EAAGT,OAAO,GAAG,QAAQ,GAAG,KAAoD;AACvFH,IAAAA,SAAS,EAAEgB,UAAU;AACrB,IAAA,aAAa,EAAEZ,MAAM;IACrBF,QAAQ;IACRD,EAAE;IACFY,GAAG;IACHR,IAAI;AACJG,IAAAA,MAAM,EAAEe,UAAU;AAClBjB,IAAAA,OAAO,EAAEY,WAAW;AACpBX,IAAAA,OAAO,EAAEe,WAAW;AACpBb,IAAAA,YAAY,EAAEe,gBAAgB;AAC9Bd,IAAAA,YAAY,EAAEe,gBAAgB;AAC9Bd,IAAAA,SAAS,EAAEe,aAAa;IACxB,GAAGd,KAAAA;GACJ,CAAA;AAED,EAAA,oBAAOmB,GAAA,CAAA,QAAA,EAAA;AAAA,IAAA,GAAYJ,WAAW;AAAA5B,IAAAA,QAAA,EAAGA,QAAAA;AAAQ,GAAS,CAAC,CAAA;AACrD,CAAC,EACF;AAEDF,eAAe,CAACmC,WAAW,GAAG,iBAAiB;;;;"}