@dxc-technology/halstack-react 0.0.0-7550efd → 0.0.0-757bc34

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 (279) hide show
  1. package/BackgroundColorContext.d.ts +3 -3
  2. package/BackgroundColorContext.js +6 -18
  3. package/HalstackContext.d.ts +1347 -6
  4. package/HalstackContext.js +125 -110
  5. package/README.md +47 -0
  6. package/accordion/Accordion.d.ts +1 -1
  7. package/accordion/Accordion.js +116 -157
  8. package/accordion/Accordion.stories.tsx +101 -125
  9. package/accordion/Accordion.test.js +25 -41
  10. package/accordion/types.d.ts +5 -16
  11. package/accordion-group/AccordionGroup.d.ts +4 -3
  12. package/accordion-group/AccordionGroup.js +30 -98
  13. package/accordion-group/AccordionGroup.stories.tsx +94 -67
  14. package/accordion-group/AccordionGroup.test.js +52 -105
  15. package/accordion-group/AccordionGroupAccordion.d.ts +4 -0
  16. package/accordion-group/AccordionGroupAccordion.js +31 -0
  17. package/accordion-group/types.d.ts +11 -16
  18. package/alert/Alert.js +19 -55
  19. package/alert/Alert.stories.tsx +28 -0
  20. package/alert/Alert.test.js +29 -46
  21. package/alert/types.d.ts +5 -5
  22. package/badge/Badge.js +4 -17
  23. package/badge/types.d.ts +1 -1
  24. package/bleed/Bleed.js +13 -21
  25. package/bleed/Bleed.stories.tsx +1 -0
  26. package/bleed/types.d.ts +2 -2
  27. package/box/Box.d.ts +1 -1
  28. package/box/Box.js +18 -56
  29. package/box/Box.stories.tsx +38 -51
  30. package/box/Box.test.js +2 -7
  31. package/box/types.d.ts +3 -14
  32. package/bulleted-list/BulletedList.js +11 -35
  33. package/bulleted-list/BulletedList.stories.tsx +8 -92
  34. package/bulleted-list/types.d.ts +32 -5
  35. package/button/Button.d.ts +1 -1
  36. package/button/Button.js +65 -100
  37. package/button/Button.stories.tsx +152 -91
  38. package/button/Button.test.js +18 -17
  39. package/button/types.d.ts +8 -4
  40. package/card/Card.d.ts +1 -1
  41. package/card/Card.js +48 -89
  42. package/card/Card.stories.tsx +12 -42
  43. package/card/Card.test.js +11 -22
  44. package/card/types.d.ts +6 -11
  45. package/checkbox/Checkbox.d.ts +2 -2
  46. package/checkbox/Checkbox.js +141 -178
  47. package/checkbox/Checkbox.stories.tsx +128 -94
  48. package/checkbox/Checkbox.test.js +160 -39
  49. package/checkbox/types.d.ts +11 -3
  50. package/chip/Chip.js +39 -79
  51. package/chip/Chip.stories.tsx +121 -26
  52. package/chip/Chip.test.js +16 -31
  53. package/chip/types.d.ts +4 -4
  54. package/common/OpenSans.css +68 -80
  55. package/common/coreTokens.d.ts +237 -0
  56. package/common/coreTokens.js +184 -0
  57. package/common/utils.d.ts +1 -0
  58. package/common/utils.js +6 -12
  59. package/common/variables.d.ts +1499 -0
  60. package/common/variables.js +1008 -1145
  61. package/container/Container.d.ts +4 -0
  62. package/container/Container.js +198 -0
  63. package/container/Container.stories.tsx +229 -0
  64. package/container/types.d.ts +74 -0
  65. package/date-input/Calendar.d.ts +4 -0
  66. package/date-input/Calendar.js +214 -0
  67. package/date-input/DateInput.js +150 -299
  68. package/date-input/DateInput.stories.tsx +203 -56
  69. package/date-input/DateInput.test.js +700 -371
  70. package/date-input/DatePicker.d.ts +4 -0
  71. package/date-input/DatePicker.js +115 -0
  72. package/date-input/Icons.d.ts +6 -0
  73. package/date-input/Icons.js +58 -0
  74. package/date-input/YearPicker.d.ts +4 -0
  75. package/date-input/YearPicker.js +100 -0
  76. package/date-input/types.d.ts +72 -15
  77. package/dialog/Dialog.d.ts +1 -1
  78. package/dialog/Dialog.js +61 -116
  79. package/dialog/Dialog.stories.tsx +320 -166
  80. package/dialog/Dialog.test.js +269 -32
  81. package/dialog/types.d.ts +18 -25
  82. package/dropdown/Dropdown.js +72 -125
  83. package/dropdown/Dropdown.stories.tsx +210 -84
  84. package/dropdown/Dropdown.test.js +410 -402
  85. package/dropdown/DropdownMenu.js +20 -37
  86. package/dropdown/DropdownMenuItem.js +10 -35
  87. package/dropdown/types.d.ts +17 -19
  88. package/file-input/FileInput.d.ts +2 -2
  89. package/file-input/FileInput.js +241 -355
  90. package/file-input/FileInput.stories.tsx +123 -12
  91. package/file-input/FileInput.test.js +369 -367
  92. package/file-input/FileItem.d.ts +4 -14
  93. package/file-input/FileItem.js +45 -96
  94. package/file-input/types.d.ts +25 -8
  95. package/flex/Flex.d.ts +1 -1
  96. package/flex/Flex.js +40 -40
  97. package/flex/Flex.stories.tsx +35 -26
  98. package/flex/types.d.ts +84 -8
  99. package/footer/Footer.d.ts +1 -1
  100. package/footer/Footer.js +53 -104
  101. package/footer/Footer.stories.tsx +41 -19
  102. package/footer/Footer.test.js +33 -57
  103. package/footer/Icons.d.ts +2 -2
  104. package/footer/Icons.js +2 -7
  105. package/footer/types.d.ts +21 -28
  106. package/grid/Grid.d.ts +7 -0
  107. package/grid/Grid.js +76 -0
  108. package/grid/Grid.stories.tsx +219 -0
  109. package/grid/types.d.ts +115 -0
  110. package/header/Header.d.ts +4 -3
  111. package/header/Header.js +41 -116
  112. package/header/Header.stories.tsx +118 -39
  113. package/header/Header.test.js +13 -26
  114. package/header/Icons.d.ts +2 -2
  115. package/header/Icons.js +2 -7
  116. package/header/types.d.ts +5 -19
  117. package/heading/Heading.js +10 -32
  118. package/heading/Heading.test.js +71 -88
  119. package/heading/types.d.ts +7 -7
  120. package/image/Image.d.ts +4 -0
  121. package/image/Image.js +70 -0
  122. package/image/Image.stories.tsx +127 -0
  123. package/image/types.d.ts +72 -0
  124. package/inset/Inset.js +13 -21
  125. package/inset/Inset.stories.tsx +2 -1
  126. package/inset/types.d.ts +2 -2
  127. package/layout/ApplicationLayout.d.ts +5 -5
  128. package/layout/ApplicationLayout.js +29 -66
  129. package/layout/ApplicationLayout.stories.tsx +1 -1
  130. package/layout/Icons.d.ts +8 -5
  131. package/layout/Icons.js +51 -59
  132. package/layout/SidenavContext.d.ts +1 -1
  133. package/layout/SidenavContext.js +3 -9
  134. package/layout/types.d.ts +5 -6
  135. package/link/Link.js +25 -46
  136. package/link/Link.stories.tsx +60 -0
  137. package/link/Link.test.js +24 -44
  138. package/link/types.d.ts +14 -14
  139. package/main.d.ts +6 -3
  140. package/main.js +25 -51
  141. package/{tabs-nav → nav-tabs}/NavTabs.d.ts +2 -2
  142. package/{tabs-nav → nav-tabs}/NavTabs.js +17 -52
  143. package/{tabs-nav → nav-tabs}/NavTabs.stories.tsx +111 -7
  144. package/{tabs-nav → nav-tabs}/NavTabs.test.js +37 -44
  145. package/nav-tabs/Tab.js +117 -0
  146. package/{tabs-nav → nav-tabs}/types.d.ts +14 -15
  147. package/nav-tabs/types.js +5 -0
  148. package/number-input/NumberInput.d.ts +7 -0
  149. package/number-input/NumberInput.js +26 -35
  150. package/number-input/NumberInput.stories.tsx +42 -26
  151. package/number-input/NumberInput.test.js +701 -377
  152. package/number-input/types.d.ts +11 -5
  153. package/package.json +37 -40
  154. package/paginator/Icons.d.ts +5 -0
  155. package/paginator/Icons.js +21 -47
  156. package/paginator/Paginator.js +22 -55
  157. package/paginator/Paginator.stories.tsx +24 -0
  158. package/paginator/Paginator.test.js +253 -226
  159. package/paginator/types.d.ts +3 -3
  160. package/paragraph/Paragraph.d.ts +3 -4
  161. package/paragraph/Paragraph.js +6 -17
  162. package/paragraph/Paragraph.stories.tsx +0 -17
  163. package/password-input/Icons.d.ts +6 -0
  164. package/password-input/Icons.js +35 -0
  165. package/password-input/PasswordInput.js +57 -126
  166. package/password-input/PasswordInput.stories.tsx +1 -32
  167. package/password-input/PasswordInput.test.js +160 -142
  168. package/password-input/types.d.ts +8 -7
  169. package/progress-bar/ProgressBar.d.ts +2 -2
  170. package/progress-bar/ProgressBar.js +21 -47
  171. package/progress-bar/{ProgressBar.stories.jsx → ProgressBar.stories.tsx} +36 -3
  172. package/progress-bar/ProgressBar.test.js +36 -53
  173. package/progress-bar/types.d.ts +4 -3
  174. package/quick-nav/QuickNav.js +15 -39
  175. package/quick-nav/QuickNav.stories.tsx +112 -20
  176. package/quick-nav/types.d.ts +10 -10
  177. package/radio-group/Radio.d.ts +1 -1
  178. package/radio-group/Radio.js +59 -76
  179. package/radio-group/RadioGroup.js +59 -105
  180. package/radio-group/RadioGroup.stories.tsx +132 -18
  181. package/radio-group/RadioGroup.test.js +518 -457
  182. package/radio-group/types.d.ts +10 -10
  183. package/resultset-table/Icons.d.ts +7 -0
  184. package/resultset-table/Icons.js +47 -0
  185. package/resultset-table/ResultsetTable.js +159 -0
  186. package/{resultsetTable → resultset-table}/ResultsetTable.stories.tsx +50 -25
  187. package/{resultsetTable → resultset-table}/ResultsetTable.test.js +101 -144
  188. package/{resultsetTable → resultset-table}/types.d.ts +7 -7
  189. package/resultset-table/types.js +5 -0
  190. package/select/Icons.d.ts +7 -7
  191. package/select/Icons.js +1 -5
  192. package/select/Listbox.d.ts +1 -1
  193. package/select/Listbox.js +17 -73
  194. package/select/Option.js +20 -50
  195. package/select/Select.js +95 -156
  196. package/select/Select.stories.tsx +497 -153
  197. package/select/Select.test.js +1934 -1775
  198. package/select/types.d.ts +16 -17
  199. package/sidenav/Icons.d.ts +7 -0
  200. package/sidenav/Icons.js +47 -0
  201. package/sidenav/Sidenav.d.ts +2 -2
  202. package/sidenav/Sidenav.js +80 -149
  203. package/sidenav/Sidenav.stories.tsx +165 -63
  204. package/sidenav/Sidenav.test.js +3 -10
  205. package/sidenav/types.d.ts +31 -28
  206. package/slider/Slider.d.ts +2 -2
  207. package/slider/Slider.js +57 -96
  208. package/slider/Slider.test.js +108 -104
  209. package/slider/types.d.ts +7 -3
  210. package/spinner/Spinner.js +27 -63
  211. package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +53 -27
  212. package/spinner/Spinner.test.js +26 -35
  213. package/spinner/types.d.ts +3 -3
  214. package/switch/Switch.d.ts +3 -3
  215. package/switch/Switch.js +112 -144
  216. package/switch/Switch.stories.tsx +33 -34
  217. package/switch/Switch.test.js +70 -102
  218. package/switch/types.d.ts +8 -3
  219. package/table/Table.js +7 -26
  220. package/table/{Table.stories.jsx → Table.stories.tsx} +80 -1
  221. package/table/Table.test.js +3 -8
  222. package/table/types.d.ts +8 -8
  223. package/tabs/Tab.js +22 -44
  224. package/tabs/Tabs.js +59 -141
  225. package/tabs/Tabs.stories.tsx +45 -5
  226. package/tabs/Tabs.test.js +66 -123
  227. package/tabs/types.d.ts +19 -19
  228. package/tag/Tag.js +29 -61
  229. package/tag/Tag.stories.tsx +14 -1
  230. package/tag/Tag.test.js +20 -31
  231. package/tag/types.d.ts +7 -7
  232. package/text-input/Icons.d.ts +8 -0
  233. package/text-input/Icons.js +56 -0
  234. package/text-input/Suggestion.js +40 -28
  235. package/text-input/Suggestions.d.ts +4 -0
  236. package/text-input/Suggestions.js +89 -0
  237. package/text-input/TextInput.js +272 -441
  238. package/text-input/TextInput.stories.tsx +266 -274
  239. package/text-input/TextInput.test.js +1402 -1375
  240. package/text-input/types.d.ts +43 -16
  241. package/textarea/Textarea.js +63 -100
  242. package/textarea/Textarea.stories.tsx +175 -0
  243. package/textarea/Textarea.test.js +152 -183
  244. package/textarea/types.d.ts +9 -5
  245. package/toggle-group/ToggleGroup.d.ts +2 -2
  246. package/toggle-group/ToggleGroup.js +95 -106
  247. package/toggle-group/ToggleGroup.stories.tsx +49 -4
  248. package/toggle-group/ToggleGroup.test.js +69 -88
  249. package/toggle-group/types.d.ts +26 -17
  250. package/typography/Typography.d.ts +2 -2
  251. package/typography/Typography.js +15 -123
  252. package/typography/Typography.stories.tsx +1 -1
  253. package/typography/types.d.ts +1 -1
  254. package/useTheme.d.ts +1251 -1
  255. package/useTheme.js +2 -9
  256. package/useTranslatedLabels.d.ts +84 -1
  257. package/useTranslatedLabels.js +1 -7
  258. package/utils/BaseTypography.d.ts +21 -0
  259. package/utils/BaseTypography.js +94 -0
  260. package/utils/FocusLock.d.ts +13 -0
  261. package/utils/FocusLock.js +121 -0
  262. package/wizard/Wizard.js +16 -51
  263. package/wizard/Wizard.stories.tsx +20 -0
  264. package/wizard/Wizard.test.js +54 -81
  265. package/wizard/types.d.ts +8 -9
  266. package/card/ice-cream.jpg +0 -0
  267. package/common/RequiredComponent.js +0 -32
  268. package/number-input/NumberInputContext.d.ts +0 -4
  269. package/number-input/NumberInputContext.js +0 -19
  270. package/number-input/numberInputContextTypes.d.ts +0 -19
  271. package/resultsetTable/ResultsetTable.js +0 -254
  272. package/slider/Slider.stories.tsx +0 -183
  273. package/tabs-nav/Tab.js +0 -130
  274. package/textarea/Textarea.stories.jsx +0 -157
  275. /package/{resultsetTable → container}/types.js +0 -0
  276. /package/{tabs-nav → grid}/types.js +0 -0
  277. /package/{number-input/numberInputContextTypes.js → image/types.js} +0 -0
  278. /package/{tabs-nav → nav-tabs}/Tab.d.ts +0 -0
  279. /package/{resultsetTable → resultset-table}/ResultsetTable.d.ts +0 -0
@@ -1,25 +1,20 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  var _react = _interopRequireDefault(require("react"));
6
-
7
5
  var _react2 = require("@testing-library/react");
8
-
9
- var _Wizard = _interopRequireDefault(require("./Wizard"));
10
-
6
+ var _Wizard = _interopRequireDefault(require("./Wizard.tsx"));
11
7
  describe("Wizard components tests", function () {
12
8
  test("Wizard renders with correct steps", function () {
13
9
  var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Wizard["default"], {
14
- steps: [{
15
- label: "first-step"
16
- }, {
17
- label: "second-step"
18
- }]
19
- })),
20
- getByText = _render.getByText,
21
- getAllByRole = _render.getAllByRole;
22
-
10
+ steps: [{
11
+ label: "first-step"
12
+ }, {
13
+ label: "second-step"
14
+ }]
15
+ })),
16
+ getByText = _render.getByText,
17
+ getAllByRole = _render.getAllByRole;
23
18
  var steps = getAllByRole("button");
24
19
  expect(getByText("first-step")).toBeTruthy();
25
20
  expect(getByText("second-step")).toBeTruthy();
@@ -28,112 +23,90 @@ describe("Wizard components tests", function () {
28
23
  });
29
24
  test("Wizard renders with initially selected step", function () {
30
25
  var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Wizard["default"], {
31
- defaultCurrentStep: 1,
32
- steps: [{
33
- label: "first-step"
34
- }, {
35
- label: "second-step"
36
- }]
37
- })),
38
- getAllByRole = _render2.getAllByRole;
39
-
26
+ defaultCurrentStep: 1,
27
+ steps: [{
28
+ label: "first-step"
29
+ }, {
30
+ label: "second-step"
31
+ }]
32
+ })),
33
+ getAllByRole = _render2.getAllByRole;
40
34
  var steps = getAllByRole("button");
41
35
  expect(steps[1].getAttribute("aria-current")).toBe("step");
42
36
  });
43
37
  test("Click on step text", function () {
44
38
  var onClick = jest.fn();
45
-
46
39
  var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Wizard["default"], {
47
- onStepClick: onClick,
48
- steps: [{
49
- label: "first-step"
50
- }]
51
- })),
52
- getByText = _render3.getByText;
53
-
40
+ onStepClick: onClick,
41
+ steps: [{
42
+ label: "first-step"
43
+ }]
44
+ })),
45
+ getByText = _render3.getByText;
54
46
  var step = getByText("first-step");
55
-
56
47
  _react2.fireEvent.click(step);
57
-
58
48
  expect(onClick).toHaveBeenCalled();
59
49
  });
60
50
  test("Click on step description", function () {
61
51
  var onClick = jest.fn();
62
-
63
52
  var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Wizard["default"], {
64
- onStepClick: onClick,
65
- steps: [{
66
- label: "first-step",
67
- description: "step-description"
68
- }]
69
- })),
70
- getByText = _render4.getByText;
71
-
53
+ onStepClick: onClick,
54
+ steps: [{
55
+ label: "first-step",
56
+ description: "step-description"
57
+ }]
58
+ })),
59
+ getByText = _render4.getByText;
72
60
  var step = getByText("step-description");
73
-
74
61
  _react2.fireEvent.click(step);
75
-
76
62
  expect(onClick).toHaveBeenCalled();
77
63
  });
78
64
  test("Click on step number", function () {
79
65
  var onClick = jest.fn();
80
-
81
66
  var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Wizard["default"], {
82
- onStepClick: onClick,
83
- steps: [{
84
- label: "first-step"
85
- }]
86
- })),
87
- getByText = _render5.getByText;
88
-
67
+ onStepClick: onClick,
68
+ steps: [{
69
+ label: "first-step"
70
+ }]
71
+ })),
72
+ getByText = _render5.getByText;
89
73
  var step = getByText("1");
90
-
91
74
  _react2.fireEvent.click(step);
92
-
93
75
  expect(onClick).toHaveBeenCalled();
94
76
  });
95
77
  test("Click on disable step", function () {
96
78
  var onClick = jest.fn();
97
-
98
79
  var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Wizard["default"], {
99
- onStepClick: onClick,
100
- steps: [{
101
- label: "first-step"
102
- }, {
103
- label: "second-step",
104
- disabled: true
105
- }]
106
- })),
107
- getByText = _render6.getByText;
108
-
80
+ onStepClick: onClick,
81
+ steps: [{
82
+ label: "first-step"
83
+ }, {
84
+ label: "second-step",
85
+ disabled: true
86
+ }]
87
+ })),
88
+ getByText = _render6.getByText;
109
89
  var step = getByText("second-step");
110
-
111
90
  _react2.fireEvent.click(step);
112
-
113
91
  expect(onClick).toHaveBeenCalledTimes(0);
114
92
  });
115
93
  test("Controlled wizard function is called", function () {
116
94
  var onClick = jest.fn(function (i) {
117
95
  return i;
118
96
  });
119
-
120
97
  var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Wizard["default"], {
121
- currentStep: 0,
122
- onStepClick: onClick,
123
- steps: [{
124
- label: "first-step"
125
- }, {
126
- label: "second-step"
127
- }]
128
- })),
129
- getAllByRole = _render7.getAllByRole;
130
-
98
+ currentStep: 0,
99
+ onStepClick: onClick,
100
+ steps: [{
101
+ label: "first-step"
102
+ }, {
103
+ label: "second-step"
104
+ }]
105
+ })),
106
+ getAllByRole = _render7.getAllByRole;
131
107
  var steps = getAllByRole("button");
132
-
133
108
  _react2.fireEvent.click(steps[1]);
134
-
135
109
  _react2.fireEvent.click(steps[0]);
136
-
137
110
  expect(onClick).toHaveBeenCalledTimes(2);
138
111
  expect(onClick).toHaveBeenNthCalledWith(1, 1);
139
112
  expect(onClick).toHaveBeenNthCalledWith(2, 0);
package/wizard/types.d.ts CHANGED
@@ -1,13 +1,13 @@
1
1
  /// <reference types="react" />
2
- export declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
- export declare type Margin = {
2
+ type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
+ type Margin = {
4
4
  top?: Space;
5
5
  bottom?: Space;
6
6
  left?: Space;
7
7
  right?: Space;
8
8
  };
9
- declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
10
- declare type Step = {
9
+ type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
10
+ export type StepProps = {
11
11
  /**
12
12
  * Step label.
13
13
  */
@@ -29,12 +29,11 @@ declare type Step = {
29
29
  */
30
30
  valid?: boolean;
31
31
  };
32
- export declare type Mode = "horizontal" | "vertical";
33
- declare type Props = {
32
+ type Props = {
34
33
  /**
35
34
  * The wizard can be showed in horizontal or vertical.
36
35
  */
37
- mode?: Mode;
36
+ mode?: "horizontal" | "vertical";
38
37
  /**
39
38
  * Initially selected step, only when it is uncontrolled.
40
39
  */
@@ -47,11 +46,11 @@ declare type Props = {
47
46
  * This function will be called when the user clicks a step. The step
48
47
  * number will be passed as a parameter.
49
48
  */
50
- onStepClick?: (newCurrentStep: number) => void;
49
+ onStepClick?: (currentStep: number) => void;
51
50
  /**
52
51
  * An array of objects representing the steps.
53
52
  */
54
- steps: Step[];
53
+ steps: StepProps[];
55
54
  /**
56
55
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
57
56
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
Binary file
@@ -1,32 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports["default"] = void 0;
9
-
10
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
11
-
12
- var _react = _interopRequireDefault(require("react"));
13
-
14
- var _styledComponents = _interopRequireDefault(require("styled-components"));
15
-
16
- var _propTypes = _interopRequireDefault(require("prop-types"));
17
-
18
- var _templateObject;
19
-
20
- var DxcRequired = function DxcRequired(_ref) {
21
- var _ref$theme = _ref.theme,
22
- theme = _ref$theme === void 0 ? "light" : _ref$theme;
23
- return /*#__PURE__*/_react["default"].createElement(RequiredSpan, null, "*");
24
- };
25
-
26
- var RequiredSpan = _styledComponents["default"].span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n color: #d0011b;\n margin-right: 1px;\n cursor: default;\n"])));
27
-
28
- DxcRequired.propTypes = {
29
- theme: _propTypes["default"].oneOf(["dark", "light"])
30
- };
31
- var _default = DxcRequired;
32
- exports["default"] = _default;
@@ -1,4 +0,0 @@
1
- import React from "react";
2
- import NumberInputContextPropsType from "./numberInputContextTypes";
3
- declare const NumberInputContext: React.Context<NumberInputContextPropsType>;
4
- export default NumberInputContext;
@@ -1,19 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports["default"] = void 0;
9
-
10
- var _react = _interopRequireDefault(require("react"));
11
-
12
- var defaultState = {
13
- stepNumber: 1
14
- };
15
-
16
- var NumberInputContext = /*#__PURE__*/_react["default"].createContext(defaultState);
17
-
18
- var _default = NumberInputContext;
19
- exports["default"] = _default;
@@ -1,19 +0,0 @@
1
- declare type Props = {
2
- /**
3
- * Type of the input.
4
- */
5
- typeNumber?: string;
6
- /**
7
- * Minimum value allowed by the number input.
8
- */
9
- minNumber?: number;
10
- /**
11
- * Maximum value allowed by the number input.
12
- */
13
- maxNumber?: number;
14
- /**
15
- * The step interval to use when using the up and down arrows to adjust the value.
16
- */
17
- stepNumber?: number;
18
- };
19
- export default Props;
@@ -1,254 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _typeof3 = require("@babel/runtime/helpers/typeof");
6
-
7
- Object.defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
- exports["default"] = void 0;
11
-
12
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
13
-
14
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
15
-
16
- var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
17
-
18
- var _react = _interopRequireWildcard(require("react"));
19
-
20
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
21
-
22
- var _variables = require("../common/variables.js");
23
-
24
- var _Table = _interopRequireDefault(require("../table/Table"));
25
-
26
- var _Paginator = _interopRequireDefault(require("../paginator/Paginator"));
27
-
28
- var _useTheme = _interopRequireDefault(require("../useTheme"));
29
-
30
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
31
-
32
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
33
-
34
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
35
-
36
- function normalizeSortValue(sortValue) {
37
- return typeof sortValue === "string" ? sortValue.toUpperCase() : sortValue;
38
- }
39
-
40
- function sortArray(index, order, resultset) {
41
- return resultset.slice().sort(function (element1, element2) {
42
- var sortValueA = normalizeSortValue(element1[index].sortValue || element1[index].displayValue);
43
- var sortValueB = normalizeSortValue(element2[index].sortValue || element2[index].displayValue);
44
- var comparison = 0;
45
-
46
- if ((0, _typeof2["default"])(sortValueA) === "object") {
47
- comparison = -1;
48
- } else if ((0, _typeof2["default"])(sortValueB) === "object") {
49
- comparison = 1;
50
- } else if (sortValueA > sortValueB) {
51
- comparison = 1;
52
- } else if (sortValueA < sortValueB) {
53
- comparison = -1;
54
- }
55
-
56
- return order === "desc" ? comparison * -1 : comparison;
57
- });
58
- }
59
-
60
- var getMinItemsPerPageIndex = function getMinItemsPerPageIndex(currentPageInternal, itemsPerPage, page) {
61
- return currentPageInternal === 1 ? 0 : itemsPerPage * (page - 1);
62
- };
63
-
64
- var getMaxItemsPerPageIndex = function getMaxItemsPerPageIndex(minItemsPerPageIndex, itemsPerPage, resultset, page) {
65
- return minItemsPerPageIndex + itemsPerPage > resultset.length ? resultset.length : itemsPerPage * page - 1;
66
- };
67
-
68
- var ArrowUp = function ArrowUp() {
69
- return /*#__PURE__*/_react["default"].createElement("svg", {
70
- xmlns: "http://www.w3.org/2000/svg",
71
- height: "24",
72
- viewBox: "0 0 24 24",
73
- width: "24",
74
- fill: "currentColor"
75
- }, /*#__PURE__*/_react["default"].createElement("path", {
76
- d: "M0 0h24v24H0V0z",
77
- fill: "none"
78
- }), /*#__PURE__*/_react["default"].createElement("path", {
79
- d: "M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"
80
- }));
81
- };
82
-
83
- var ArrowDown = function ArrowDown() {
84
- return /*#__PURE__*/_react["default"].createElement("svg", {
85
- xmlns: "http://www.w3.org/2000/svg",
86
- height: "24",
87
- viewBox: "0 0 24 24",
88
- width: "24",
89
- fill: "currentColor"
90
- }, /*#__PURE__*/_react["default"].createElement("path", {
91
- d: "M0 0h24v24H0V0z",
92
- fill: "none"
93
- }), /*#__PURE__*/_react["default"].createElement("path", {
94
- d: "M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
95
- }));
96
- };
97
-
98
- var BothArrows = function BothArrows() {
99
- return /*#__PURE__*/_react["default"].createElement("svg", {
100
- xmlns: "http://www.w3.org/2000/svg",
101
- height: "24",
102
- viewBox: "0 0 24 24",
103
- width: "24",
104
- fill: "currentColor"
105
- }, /*#__PURE__*/_react["default"].createElement("path", {
106
- d: "M0 0h24v24H0z",
107
- fill: "none"
108
- }), /*#__PURE__*/_react["default"].createElement("path", {
109
- d: "M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z"
110
- }));
111
- };
112
-
113
- var DxcResultsetTable = function DxcResultsetTable(_ref) {
114
- var columns = _ref.columns,
115
- rows = _ref.rows,
116
- _ref$showGoToPage = _ref.showGoToPage,
117
- showGoToPage = _ref$showGoToPage === void 0 ? true : _ref$showGoToPage,
118
- _ref$itemsPerPage = _ref.itemsPerPage,
119
- itemsPerPage = _ref$itemsPerPage === void 0 ? 5 : _ref$itemsPerPage,
120
- itemsPerPageOptions = _ref.itemsPerPageOptions,
121
- itemsPerPageFunction = _ref.itemsPerPageFunction,
122
- margin = _ref.margin,
123
- _ref$tabIndex = _ref.tabIndex,
124
- tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
125
- var colorsTheme = (0, _useTheme["default"])();
126
-
127
- var _useState = (0, _react.useState)(1),
128
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
129
- page = _useState2[0],
130
- changePage = _useState2[1];
131
-
132
- var _useState3 = (0, _react.useState)(""),
133
- _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
134
- sortColumnIndex = _useState4[0],
135
- changeSortColumnIndex = _useState4[1];
136
-
137
- var _useState5 = (0, _react.useState)("asc"),
138
- _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
139
- sortOrder = _useState6[0],
140
- changeSortOrder = _useState6[1];
141
-
142
- var minItemsPerPageIndex = (0, _react.useMemo)(function () {
143
- return getMinItemsPerPageIndex(page, itemsPerPage, page);
144
- }, [itemsPerPage, page]);
145
- var maxItemsPerPageIndex = (0, _react.useMemo)(function () {
146
- return getMaxItemsPerPageIndex(minItemsPerPageIndex, itemsPerPage, rows, page);
147
- }, [itemsPerPage, minItemsPerPageIndex, page, rows]);
148
-
149
- var goToPage = function goToPage(newPage) {
150
- changePage(newPage);
151
- };
152
-
153
- var changeSorting = function changeSorting(columnIndex) {
154
- changePage(1);
155
- changeSortColumnIndex(columnIndex);
156
- changeSortOrder(sortColumnIndex === "" || sortColumnIndex !== columnIndex ? "asc" : sortOrder === "asc" ? "desc" : "asc");
157
- };
158
-
159
- var getIconForSortableColumn = function getIconForSortableColumn(clickedColumnIndex) {
160
- return sortColumnIndex === clickedColumnIndex ? sortOrder === "asc" ? /*#__PURE__*/_react["default"].createElement(ArrowUp, null) : /*#__PURE__*/_react["default"].createElement(ArrowDown, null) : /*#__PURE__*/_react["default"].createElement(BothArrows, null);
161
- };
162
-
163
- (0, _react.useEffect)(function () {
164
- if (rows.length > 0) {
165
- changePage(1);
166
- } else {
167
- changePage(0);
168
- }
169
- }, [rows.length, itemsPerPage]);
170
- var sortedResultset = (0, _react.useMemo)(function () {
171
- return sortColumnIndex !== "" ? sortArray(sortColumnIndex, sortOrder, rows) : rows;
172
- }, [sortColumnIndex, sortOrder, rows]);
173
- var filteredResultset = (0, _react.useMemo)(function () {
174
- return sortedResultset && sortedResultset.slice(minItemsPerPageIndex, maxItemsPerPageIndex + 1);
175
- }, [sortedResultset, minItemsPerPageIndex, maxItemsPerPageIndex]);
176
- return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
177
- theme: colorsTheme.table
178
- }, /*#__PURE__*/_react["default"].createElement(DxcResultsetTableContainer, {
179
- margin: margin
180
- }, /*#__PURE__*/_react["default"].createElement(TableContainer, null, /*#__PURE__*/_react["default"].createElement(_Table["default"], null, /*#__PURE__*/_react["default"].createElement(HeaderRow, null, /*#__PURE__*/_react["default"].createElement("tr", null, columns.map(function (column, index) {
181
- return /*#__PURE__*/_react["default"].createElement(TableHeader, {
182
- key: "tableHeader_".concat(index)
183
- }, /*#__PURE__*/_react["default"].createElement(HeaderContainer, {
184
- key: "headerContainer_".concat(index),
185
- onClick: function onClick() {
186
- return column.isSortable && changeSorting(index);
187
- },
188
- tabIndex: column.isSortable ? tabIndex : -1,
189
- isSortable: column.isSortable
190
- }, /*#__PURE__*/_react["default"].createElement(TitleDiv, {
191
- isSortable: column.isSortable
192
- }, column.displayValue), column.isSortable && /*#__PURE__*/_react["default"].createElement(SortIcon, null, getIconForSortableColumn(index))));
193
- }))), /*#__PURE__*/_react["default"].createElement(TableRowGroup, null, filteredResultset.map(function (cells, index) {
194
- return /*#__PURE__*/_react["default"].createElement("tr", {
195
- key: "resultSetTableCell_".concat(index)
196
- }, cells.map(function (cellContent, index) {
197
- return /*#__PURE__*/_react["default"].createElement("td", {
198
- key: "resultSetTableCellContent_".concat(index)
199
- }, cellContent.displayValue);
200
- }));
201
- })))), /*#__PURE__*/_react["default"].createElement(PaginatorContainer, null, /*#__PURE__*/_react["default"].createElement(_Paginator["default"], {
202
- totalItems: rows.length,
203
- itemsPerPage: itemsPerPage,
204
- itemsPerPageOptions: itemsPerPageOptions,
205
- itemsPerPageFunction: itemsPerPageFunction,
206
- currentPage: page,
207
- showGoToPage: showGoToPage,
208
- onPageChange: goToPage,
209
- tabIndex: tabIndex
210
- }))));
211
- };
212
-
213
- var TableContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n & table {\n table-layout: auto;\n }\n"])));
214
-
215
- var PaginatorContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])([""])));
216
-
217
- var TableRowGroup = _styledComponents["default"].tbody(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n > div:nth-child(1) {\n position: absolute;\n left: calc(50% - 68.5px);\n bottom: calc(50% - 68.5px - 30px);\n }\n & tr {\n height: ", ";\n }\n"])), function (props) {
218
- return props.theme.rowHeight || "70px";
219
- });
220
-
221
- var SortIcon = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n top: 409px;\n left: 390px;\n height: 14px;\n cursor: pointer;\n color: ", ";\n\n svg {\n height: 100%;\n width: 100%;\n }\n"])), function (props) {
222
- return props.theme.sortIconColor;
223
- });
224
-
225
- var TitleDiv = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n cursor: ", ";\n"])), function (props) {
226
- return props.isSortable && "pointer" || "default";
227
- });
228
-
229
- var TableHeader = _styledComponents["default"].th(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])([""])));
230
-
231
- var HeaderContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n justify-content: ", ";\n width: fit-content;\n :focus {\n ", "\n }\n"])), function (props) {
232
- return props.theme.headerTextAlign === "center" ? "center" : props.theme.headerTextAlign === "right" ? "flex-end" : "flex-start";
233
- }, function (props) {
234
- return props.isSortable && "outline: #0095ff solid 2px; \n outline-offset: 4px;";
235
- });
236
-
237
- var HeaderRow = _styledComponents["default"].thead(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n height: 60px;\n"])));
238
-
239
- var DxcResultsetTableContainer = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n font-size: ", ";\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"])), function (props) {
240
- return props.theme.fontSizeBase;
241
- }, function (props) {
242
- return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
243
- }, function (props) {
244
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
245
- }, function (props) {
246
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
247
- }, function (props) {
248
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
249
- }, function (props) {
250
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
251
- });
252
-
253
- var _default = DxcResultsetTable;
254
- exports["default"] = _default;