@dxc-technology/halstack-react 0.0.0-1b8b460 → 0.0.0-1bfe223

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 (286) hide show
  1. package/BackgroundColorContext.d.ts +1 -10
  2. package/BackgroundColorContext.js +5 -22
  3. package/HalstackContext.d.ts +1215 -6
  4. package/HalstackContext.js +121 -105
  5. package/README.md +47 -0
  6. package/accordion/Accordion.d.ts +1 -1
  7. package/accordion/Accordion.js +36 -99
  8. package/accordion/Accordion.stories.tsx +101 -124
  9. package/accordion/Accordion.test.js +19 -34
  10. package/accordion/types.d.ts +5 -17
  11. package/accordion-group/AccordionGroup.d.ts +4 -3
  12. package/accordion-group/AccordionGroup.js +29 -77
  13. package/accordion-group/AccordionGroup.stories.tsx +78 -77
  14. package/accordion-group/AccordionGroup.test.js +44 -72
  15. package/accordion-group/AccordionGroupAccordion.d.ts +4 -0
  16. package/accordion-group/AccordionGroupAccordion.js +31 -0
  17. package/accordion-group/types.d.ts +6 -18
  18. package/action-icon/ActionIcon.d.ts +4 -0
  19. package/action-icon/ActionIcon.js +47 -0
  20. package/action-icon/ActionIcon.stories.tsx +41 -0
  21. package/action-icon/ActionIcon.test.js +64 -0
  22. package/action-icon/types.d.ts +26 -0
  23. package/alert/Alert.js +19 -58
  24. package/alert/Alert.stories.tsx +28 -0
  25. package/alert/Alert.test.js +29 -46
  26. package/alert/types.d.ts +5 -5
  27. package/badge/Badge.d.ts +1 -1
  28. package/badge/Badge.js +142 -42
  29. package/badge/Badge.stories.tsx +210 -0
  30. package/badge/Badge.test.js +30 -0
  31. package/badge/types.d.ts +52 -3
  32. package/bleed/Bleed.js +13 -21
  33. package/bleed/Bleed.stories.tsx +1 -0
  34. package/bleed/types.d.ts +2 -2
  35. package/box/Box.d.ts +1 -1
  36. package/box/Box.js +18 -59
  37. package/box/Box.stories.tsx +38 -51
  38. package/box/Box.test.js +2 -7
  39. package/box/types.d.ts +3 -15
  40. package/bulleted-list/BulletedList.js +19 -53
  41. package/bulleted-list/BulletedList.stories.tsx +8 -93
  42. package/bulleted-list/types.d.ts +32 -5
  43. package/button/Button.d.ts +1 -1
  44. package/button/Button.js +69 -105
  45. package/button/Button.stories.tsx +152 -91
  46. package/button/Button.test.js +20 -17
  47. package/button/types.d.ts +8 -4
  48. package/card/Card.d.ts +1 -1
  49. package/card/Card.js +48 -89
  50. package/card/Card.stories.tsx +12 -42
  51. package/card/Card.test.js +11 -22
  52. package/card/types.d.ts +6 -12
  53. package/checkbox/Checkbox.js +87 -122
  54. package/checkbox/Checkbox.stories.tsx +68 -54
  55. package/checkbox/Checkbox.test.js +108 -64
  56. package/checkbox/types.d.ts +8 -4
  57. package/chip/Chip.js +39 -79
  58. package/chip/Chip.stories.tsx +121 -26
  59. package/chip/Chip.test.js +16 -31
  60. package/chip/types.d.ts +4 -4
  61. package/common/OpenSans.css +68 -80
  62. package/common/coreTokens.d.ts +237 -0
  63. package/common/coreTokens.js +184 -0
  64. package/common/utils.d.ts +1 -0
  65. package/common/utils.js +6 -12
  66. package/common/variables.d.ts +1367 -0
  67. package/common/variables.js +866 -1139
  68. package/container/Container.d.ts +4 -0
  69. package/container/Container.js +194 -0
  70. package/container/Container.stories.tsx +214 -0
  71. package/container/types.d.ts +74 -0
  72. package/date-input/Calendar.d.ts +1 -1
  73. package/date-input/Calendar.js +52 -96
  74. package/date-input/DateInput.js +103 -107
  75. package/date-input/DateInput.stories.tsx +194 -60
  76. package/date-input/DateInput.test.js +676 -620
  77. package/date-input/DatePicker.js +47 -92
  78. package/date-input/Icons.d.ts +6 -0
  79. package/date-input/Icons.js +58 -0
  80. package/date-input/YearPicker.d.ts +1 -1
  81. package/date-input/YearPicker.js +29 -44
  82. package/date-input/types.d.ts +31 -27
  83. package/dialog/Dialog.d.ts +1 -1
  84. package/dialog/Dialog.js +61 -119
  85. package/dialog/Dialog.stories.tsx +310 -212
  86. package/dialog/Dialog.test.js +269 -32
  87. package/dialog/types.d.ts +18 -26
  88. package/dropdown/Dropdown.js +44 -101
  89. package/dropdown/Dropdown.stories.tsx +210 -84
  90. package/dropdown/Dropdown.test.js +393 -379
  91. package/dropdown/DropdownMenu.js +20 -37
  92. package/dropdown/DropdownMenuItem.js +9 -34
  93. package/dropdown/types.d.ts +17 -19
  94. package/file-input/FileInput.js +184 -256
  95. package/file-input/FileInput.stories.tsx +86 -3
  96. package/file-input/FileInput.test.js +356 -395
  97. package/file-input/FileItem.js +15 -41
  98. package/file-input/types.d.ts +10 -10
  99. package/flex/Flex.js +27 -39
  100. package/flex/Flex.stories.tsx +35 -26
  101. package/flex/types.d.ts +74 -9
  102. package/footer/Footer.d.ts +1 -1
  103. package/footer/Footer.js +70 -117
  104. package/footer/Footer.stories.tsx +55 -21
  105. package/footer/Footer.test.js +33 -57
  106. package/footer/Icons.d.ts +3 -2
  107. package/footer/Icons.js +66 -7
  108. package/footer/types.d.ts +25 -27
  109. package/grid/Grid.d.ts +7 -0
  110. package/grid/Grid.js +76 -0
  111. package/grid/Grid.stories.tsx +219 -0
  112. package/grid/types.d.ts +115 -0
  113. package/header/Header.d.ts +4 -3
  114. package/header/Header.js +48 -133
  115. package/header/Header.stories.tsx +115 -36
  116. package/header/Header.test.js +13 -26
  117. package/header/Icons.d.ts +2 -2
  118. package/header/Icons.js +2 -7
  119. package/header/types.d.ts +5 -20
  120. package/heading/Heading.js +10 -32
  121. package/heading/Heading.test.js +71 -88
  122. package/heading/types.d.ts +7 -7
  123. package/image/Image.d.ts +4 -0
  124. package/image/Image.js +70 -0
  125. package/image/Image.stories.tsx +127 -0
  126. package/image/types.d.ts +72 -0
  127. package/image/types.js +5 -0
  128. package/inset/Inset.js +13 -21
  129. package/inset/Inset.stories.tsx +2 -1
  130. package/inset/types.d.ts +2 -2
  131. package/layout/ApplicationLayout.d.ts +5 -5
  132. package/layout/ApplicationLayout.js +29 -66
  133. package/layout/ApplicationLayout.stories.tsx +1 -1
  134. package/layout/Icons.d.ts +8 -5
  135. package/layout/Icons.js +51 -59
  136. package/layout/SidenavContext.d.ts +1 -1
  137. package/layout/SidenavContext.js +3 -9
  138. package/layout/types.d.ts +5 -6
  139. package/link/Link.js +24 -45
  140. package/link/Link.stories.tsx +60 -0
  141. package/link/Link.test.js +24 -44
  142. package/link/types.d.ts +14 -14
  143. package/main.d.ts +8 -5
  144. package/main.js +33 -59
  145. package/{tabs-nav → nav-tabs}/NavTabs.d.ts +2 -2
  146. package/{tabs-nav → nav-tabs}/NavTabs.js +23 -55
  147. package/{tabs-nav → nav-tabs}/NavTabs.stories.tsx +115 -9
  148. package/{tabs-nav → nav-tabs}/NavTabs.test.js +39 -45
  149. package/nav-tabs/Tab.js +118 -0
  150. package/{tabs-nav → nav-tabs}/types.d.ts +14 -15
  151. package/nav-tabs/types.js +5 -0
  152. package/number-input/NumberInput.d.ts +7 -0
  153. package/number-input/NumberInput.js +26 -35
  154. package/number-input/NumberInput.stories.tsx +42 -26
  155. package/number-input/NumberInput.test.js +701 -413
  156. package/number-input/types.d.ts +11 -5
  157. package/package.json +31 -29
  158. package/paginator/Icons.d.ts +5 -0
  159. package/paginator/Icons.js +21 -47
  160. package/paginator/Paginator.js +22 -58
  161. package/paginator/Paginator.stories.tsx +24 -0
  162. package/paginator/Paginator.test.js +252 -225
  163. package/paginator/types.d.ts +3 -3
  164. package/paragraph/Paragraph.d.ts +3 -4
  165. package/paragraph/Paragraph.js +6 -22
  166. package/paragraph/Paragraph.stories.tsx +0 -17
  167. package/password-input/Icons.d.ts +6 -0
  168. package/password-input/Icons.js +35 -0
  169. package/password-input/PasswordInput.js +57 -126
  170. package/password-input/PasswordInput.stories.tsx +1 -33
  171. package/password-input/PasswordInput.test.js +158 -141
  172. package/password-input/types.d.ts +8 -7
  173. package/progress-bar/ProgressBar.d.ts +2 -2
  174. package/progress-bar/ProgressBar.js +23 -55
  175. package/progress-bar/{ProgressBar.stories.jsx → ProgressBar.stories.tsx} +36 -3
  176. package/progress-bar/ProgressBar.test.js +36 -53
  177. package/progress-bar/types.d.ts +4 -3
  178. package/quick-nav/QuickNav.js +4 -27
  179. package/quick-nav/QuickNav.stories.tsx +15 -1
  180. package/quick-nav/types.d.ts +10 -10
  181. package/radio-group/Radio.d.ts +1 -1
  182. package/radio-group/Radio.js +31 -63
  183. package/radio-group/RadioGroup.js +45 -93
  184. package/radio-group/RadioGroup.stories.tsx +131 -18
  185. package/radio-group/RadioGroup.test.js +505 -471
  186. package/radio-group/types.d.ts +8 -8
  187. package/resultset-table/Icons.d.ts +7 -0
  188. package/{resultsetTable → resultset-table}/Icons.js +1 -5
  189. package/{resultsetTable → resultset-table}/ResultsetTable.js +25 -61
  190. package/{resultsetTable → resultset-table}/ResultsetTable.test.js +89 -114
  191. package/{resultsetTable → resultset-table}/types.d.ts +7 -7
  192. package/resultset-table/types.js +5 -0
  193. package/select/Icons.d.ts +7 -7
  194. package/select/Icons.js +1 -5
  195. package/select/Listbox.d.ts +1 -1
  196. package/select/Listbox.js +17 -72
  197. package/select/Option.js +27 -50
  198. package/select/Select.js +120 -175
  199. package/select/Select.stories.tsx +495 -148
  200. package/select/Select.test.js +1974 -1837
  201. package/select/types.d.ts +16 -17
  202. package/sidenav/Icons.d.ts +7 -0
  203. package/sidenav/Icons.js +47 -0
  204. package/sidenav/Sidenav.d.ts +2 -2
  205. package/sidenav/Sidenav.js +81 -153
  206. package/sidenav/Sidenav.stories.tsx +165 -63
  207. package/sidenav/Sidenav.test.js +3 -10
  208. package/sidenav/types.d.ts +31 -28
  209. package/slider/Slider.js +70 -128
  210. package/slider/Slider.test.js +108 -104
  211. package/slider/types.d.ts +4 -4
  212. package/spinner/Spinner.js +29 -73
  213. package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +53 -27
  214. package/spinner/Spinner.test.js +26 -35
  215. package/spinner/types.d.ts +3 -3
  216. package/status-light/StatusLight.d.ts +4 -0
  217. package/status-light/StatusLight.js +51 -0
  218. package/status-light/StatusLight.stories.tsx +74 -0
  219. package/status-light/StatusLight.test.js +25 -0
  220. package/status-light/types.d.ts +17 -0
  221. package/status-light/types.js +5 -0
  222. package/switch/Switch.js +51 -99
  223. package/switch/Switch.stories.tsx +33 -34
  224. package/switch/Switch.test.js +52 -97
  225. package/switch/types.d.ts +4 -4
  226. package/table/Table.js +7 -29
  227. package/table/{Table.stories.jsx → Table.stories.tsx} +80 -1
  228. package/table/Table.test.js +2 -7
  229. package/table/types.d.ts +8 -8
  230. package/tabs/Tab.js +26 -45
  231. package/tabs/Tabs.js +62 -145
  232. package/tabs/Tabs.stories.tsx +46 -5
  233. package/tabs/Tabs.test.js +66 -123
  234. package/tabs/types.d.ts +19 -19
  235. package/tag/Tag.js +28 -60
  236. package/tag/Tag.stories.tsx +14 -1
  237. package/tag/Tag.test.js +20 -31
  238. package/tag/types.d.ts +7 -7
  239. package/text-input/Icons.d.ts +5 -5
  240. package/text-input/Icons.js +1 -5
  241. package/text-input/Suggestion.js +11 -28
  242. package/text-input/Suggestions.d.ts +1 -1
  243. package/text-input/Suggestions.js +15 -65
  244. package/text-input/TextInput.js +219 -324
  245. package/text-input/TextInput.stories.tsx +134 -155
  246. package/text-input/TextInput.test.js +1211 -1196
  247. package/text-input/types.d.ts +25 -17
  248. package/textarea/Textarea.js +70 -113
  249. package/textarea/Textarea.stories.tsx +174 -0
  250. package/textarea/Textarea.test.js +152 -183
  251. package/textarea/types.d.ts +9 -5
  252. package/toggle-group/ToggleGroup.d.ts +2 -2
  253. package/toggle-group/ToggleGroup.js +92 -106
  254. package/toggle-group/ToggleGroup.stories.tsx +49 -4
  255. package/toggle-group/ToggleGroup.test.js +69 -88
  256. package/toggle-group/types.d.ts +26 -17
  257. package/typography/Typography.d.ts +2 -2
  258. package/typography/Typography.js +15 -123
  259. package/typography/Typography.stories.tsx +1 -1
  260. package/typography/types.d.ts +1 -1
  261. package/useTheme.d.ts +1119 -1
  262. package/useTheme.js +2 -9
  263. package/useTranslatedLabels.d.ts +84 -1
  264. package/useTranslatedLabels.js +1 -7
  265. package/utils/BaseTypography.d.ts +21 -0
  266. package/utils/BaseTypography.js +94 -0
  267. package/utils/FocusLock.d.ts +13 -0
  268. package/utils/FocusLock.js +124 -0
  269. package/wizard/Wizard.js +16 -51
  270. package/wizard/Wizard.stories.tsx +20 -0
  271. package/wizard/Wizard.test.js +54 -81
  272. package/wizard/types.d.ts +8 -9
  273. package/card/ice-cream.jpg +0 -0
  274. package/number-input/NumberInputContext.d.ts +0 -4
  275. package/number-input/NumberInputContext.js +0 -19
  276. package/number-input/numberInputContextTypes.d.ts +0 -19
  277. package/resultsetTable/Icons.d.ts +0 -7
  278. package/slider/Slider.stories.tsx +0 -183
  279. package/tabs-nav/Tab.js +0 -130
  280. package/textarea/Textarea.stories.jsx +0 -157
  281. /package/{resultsetTable → action-icon}/types.js +0 -0
  282. /package/{tabs-nav → container}/types.js +0 -0
  283. /package/{number-input/numberInputContextTypes.js → grid/types.js} +0 -0
  284. /package/{tabs-nav → nav-tabs}/Tab.d.ts +0 -0
  285. /package/{resultsetTable → resultset-table}/ResultsetTable.d.ts +0 -0
  286. /package/{resultsetTable → resultset-table}/ResultsetTable.stories.tsx +0 -0
@@ -1,4 +1,4 @@
1
- export declare type Option = {
1
+ export type Option = {
2
2
  /**
3
3
  * Label of the option placed next to the radio input.
4
4
  */
@@ -14,11 +14,11 @@ export declare type Option = {
14
14
  */
15
15
  disabled?: boolean;
16
16
  };
17
- declare type RadioGroupProps = {
17
+ type RadioGroupProps = {
18
18
  /**
19
19
  * Text to be placed above the radio group.
20
20
  */
21
- label: string;
21
+ label?: string;
22
22
  /**
23
23
  * Name attribute of the input element. This attribute will allow users
24
24
  * to find the component's value during the submit event.
@@ -49,9 +49,9 @@ declare type RadioGroupProps = {
49
49
  */
50
50
  optionalItemLabel?: string;
51
51
  /**
52
- * If true, the component will be marked as readonly.
52
+ * If true, the component will not be mutable, meaning the user can not edit the control.
53
53
  */
54
- readonly?: boolean;
54
+ readOnly?: boolean;
55
55
  /**
56
56
  * Sets the orientation of the options within the radio group.
57
57
  */
@@ -97,18 +97,18 @@ declare type RadioGroupProps = {
97
97
  /**
98
98
  * Reference to the component.
99
99
  */
100
- export declare type RefType = HTMLDivElement;
100
+ export type RefType = HTMLDivElement;
101
101
  /**
102
102
  * Single radio prop types.
103
103
  */
104
- export declare type RadioProps = {
104
+ export type RadioProps = {
105
105
  label: string;
106
106
  checked: boolean;
107
107
  onClick: () => void;
108
108
  error?: string;
109
109
  disabled: boolean;
110
110
  focused: boolean;
111
- readonly: boolean;
111
+ readOnly: boolean;
112
112
  tabIndex: number;
113
113
  };
114
114
  export default RadioGroupProps;
@@ -0,0 +1,7 @@
1
+ import React from "react";
2
+ declare const icons: {
3
+ arrowUp: React.JSX.Element;
4
+ arrowDown: React.JSX.Element;
5
+ bothArrows: React.JSX.Element;
6
+ };
7
+ export default icons;
@@ -1,14 +1,11 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports["default"] = void 0;
9
-
10
8
  var _react = _interopRequireDefault(require("react"));
11
-
12
9
  var icons = {
13
10
  arrowUp: /*#__PURE__*/_react["default"].createElement("svg", {
14
11
  xmlns: "http://www.w3.org/2000/svg",
@@ -47,5 +44,4 @@ var icons = {
47
44
  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"
48
45
  }))
49
46
  };
50
- var _default = icons;
51
- exports["default"] = _default;
47
+ var _default = exports["default"] = icons;
@@ -1,52 +1,33 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  var _typeof3 = require("@babel/runtime/helpers/typeof");
6
-
7
5
  Object.defineProperty(exports, "__esModule", {
8
6
  value: true
9
7
  });
10
8
  exports["default"] = void 0;
11
-
12
9
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
13
-
14
10
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
15
-
16
11
  var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
17
-
18
12
  var _react = _interopRequireWildcard(require("react"));
19
-
20
13
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
21
-
22
- var _variables = require("../common/variables.js");
23
-
14
+ var _variables = require("../common/variables");
24
15
  var _Table = _interopRequireDefault(require("../table/Table"));
25
-
26
16
  var _Paginator = _interopRequireDefault(require("../paginator/Paginator"));
27
-
28
17
  var _useTheme = _interopRequireDefault(require("../useTheme"));
29
-
30
18
  var _Icons = _interopRequireDefault(require("./Icons"));
31
-
32
- var _utils = require("../common/utils.js");
33
-
19
+ var _utils = require("../common/utils");
34
20
  var _templateObject, _templateObject2, _templateObject3;
35
-
36
- 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); }
37
-
38
- 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; }
39
-
21
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
22
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
40
23
  var normalizeSortValue = function normalizeSortValue(sortValue) {
41
24
  return typeof sortValue === "string" ? sortValue.toUpperCase() : sortValue;
42
25
  };
43
-
44
26
  var sortArray = function sortArray(index, order, resultset) {
45
27
  return resultset.slice().sort(function (element1, element2) {
46
28
  var sortValueA = normalizeSortValue(element1[index].sortValue || element1[index].displayValue);
47
29
  var sortValueB = normalizeSortValue(element2[index].sortValue || element2[index].displayValue);
48
30
  var comparison = 0;
49
-
50
31
  if ((0, _typeof2["default"])(sortValueA) === "object") {
51
32
  comparison = -1;
52
33
  } else if ((0, _typeof2["default"])(sortValueB) === "object") {
@@ -56,48 +37,40 @@ var sortArray = function sortArray(index, order, resultset) {
56
37
  } else if (sortValueA < sortValueB) {
57
38
  comparison = -1;
58
39
  }
59
-
60
40
  return order === "descending" ? comparison * -1 : comparison;
61
41
  });
62
42
  };
63
-
64
43
  var getMinItemsPerPageIndex = function getMinItemsPerPageIndex(currentPageInternal, itemsPerPage, page) {
65
44
  return currentPageInternal === 1 ? 0 : itemsPerPage * (page - 1);
66
45
  };
67
-
68
46
  var getMaxItemsPerPageIndex = function getMaxItemsPerPageIndex(minItemsPerPageIndex, itemsPerPage, resultset, page) {
69
47
  return minItemsPerPageIndex + itemsPerPage > resultset.length ? resultset.length : itemsPerPage * page - 1;
70
48
  };
71
-
72
49
  var DxcResultsetTable = function DxcResultsetTable(_ref) {
73
50
  var columns = _ref.columns,
74
- rows = _ref.rows,
75
- _ref$showGoToPage = _ref.showGoToPage,
76
- showGoToPage = _ref$showGoToPage === void 0 ? true : _ref$showGoToPage,
77
- _ref$itemsPerPage = _ref.itemsPerPage,
78
- itemsPerPage = _ref$itemsPerPage === void 0 ? 5 : _ref$itemsPerPage,
79
- itemsPerPageOptions = _ref.itemsPerPageOptions,
80
- itemsPerPageFunction = _ref.itemsPerPageFunction,
81
- margin = _ref.margin,
82
- _ref$tabIndex = _ref.tabIndex,
83
- tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
51
+ rows = _ref.rows,
52
+ _ref$showGoToPage = _ref.showGoToPage,
53
+ showGoToPage = _ref$showGoToPage === void 0 ? true : _ref$showGoToPage,
54
+ _ref$itemsPerPage = _ref.itemsPerPage,
55
+ itemsPerPage = _ref$itemsPerPage === void 0 ? 5 : _ref$itemsPerPage,
56
+ itemsPerPageOptions = _ref.itemsPerPageOptions,
57
+ itemsPerPageFunction = _ref.itemsPerPageFunction,
58
+ margin = _ref.margin,
59
+ _ref$tabIndex = _ref.tabIndex,
60
+ tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
84
61
  var colorsTheme = (0, _useTheme["default"])();
85
-
86
62
  var _useState = (0, _react.useState)(1),
87
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
88
- page = _useState2[0],
89
- changePage = _useState2[1];
90
-
63
+ _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
64
+ page = _useState2[0],
65
+ changePage = _useState2[1];
91
66
  var _useState3 = (0, _react.useState)(-1),
92
- _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
93
- sortColumnIndex = _useState4[0],
94
- changeSortColumnIndex = _useState4[1];
95
-
67
+ _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
68
+ sortColumnIndex = _useState4[0],
69
+ changeSortColumnIndex = _useState4[1];
96
70
  var _useState5 = (0, _react.useState)("ascending"),
97
- _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
98
- sortOrder = _useState6[0],
99
- changeSortOrder = _useState6[1];
100
-
71
+ _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
72
+ sortOrder = _useState6[0],
73
+ changeSortOrder = _useState6[1];
101
74
  var minItemsPerPageIndex = (0, _react.useMemo)(function () {
102
75
  return getMinItemsPerPageIndex(page, itemsPerPage, page);
103
76
  }, [itemsPerPage, page]);
@@ -110,17 +83,14 @@ var DxcResultsetTable = function DxcResultsetTable(_ref) {
110
83
  var filteredResultset = (0, _react.useMemo)(function () {
111
84
  return sortedResultset && sortedResultset.slice(minItemsPerPageIndex, maxItemsPerPageIndex + 1);
112
85
  }, [sortedResultset, minItemsPerPageIndex, maxItemsPerPageIndex]);
113
-
114
86
  var goToPage = function goToPage(newPage) {
115
87
  changePage(newPage);
116
88
  };
117
-
118
89
  var changeSorting = function changeSorting(columnIndex) {
119
90
  changePage(1);
120
91
  changeSortColumnIndex(columnIndex);
121
92
  changeSortOrder(sortColumnIndex === -1 || sortColumnIndex !== columnIndex ? "ascending" : sortOrder === "ascending" ? "descending" : "ascending");
122
93
  };
123
-
124
94
  (0, _react.useEffect)(function () {
125
95
  rows.length > 0 ? changePage(1) : changePage(0);
126
96
  }, [rows]);
@@ -143,7 +113,7 @@ var DxcResultsetTable = function DxcResultsetTable(_ref) {
143
113
  }, /*#__PURE__*/_react["default"].createElement("span", null, column.displayValue), column.isSortable && /*#__PURE__*/_react["default"].createElement(SortIcon, null, sortColumnIndex === index ? sortOrder === "ascending" ? _Icons["default"].arrowUp : _Icons["default"].arrowDown : _Icons["default"].bothArrows)));
144
114
  }))), /*#__PURE__*/_react["default"].createElement("tbody", null, filteredResultset.map(function (cells, index) {
145
115
  return /*#__PURE__*/_react["default"].createElement("tr", {
146
- key: "resultSetTableCell_".concat(index)
116
+ key: "resultSetTableCell_".concat(page, "_").concat(index)
147
117
  }, cells.map(function (cellContent, index) {
148
118
  return /*#__PURE__*/_react["default"].createElement("td", {
149
119
  key: "resultSetTableCellContent_".concat(index)
@@ -160,11 +130,9 @@ var DxcResultsetTable = function DxcResultsetTable(_ref) {
160
130
  tabIndex: tabIndex
161
131
  })));
162
132
  };
163
-
164
133
  var calculateWidth = function calculateWidth(margin) {
165
134
  return "calc(100% - ".concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")");
166
135
  };
167
-
168
136
  var DxcResultsetTableContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"])), function (props) {
169
137
  return calculateWidth(props.margin);
170
138
  }, function (props) {
@@ -178,7 +146,6 @@ var DxcResultsetTableContainer = _styledComponents["default"].div(_templateObjec
178
146
  }, function (props) {
179
147
  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
180
148
  });
181
-
182
149
  var HeaderContainer = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n justify-content: ", ";\n gap: 8px;\n width: fit-content;\n border: 1px solid transparent;\n border-radius: 2px;\n padding: 3px;\n cursor: ", ";\n\n ", "\n"])), function (props) {
183
150
  return props.theme.headerTextAlign === "center" ? "center" : props.theme.headerTextAlign === "right" ? "flex-end" : "flex-start";
184
151
  }, function (props) {
@@ -186,10 +153,7 @@ var HeaderContainer = _styledComponents["default"].span(_templateObject2 || (_te
186
153
  }, function (props) {
187
154
  return props.isSortable && "&:focus {\n outline: #0095ff solid 2px;\n }";
188
155
  });
189
-
190
156
  var SortIcon = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n height: 14px;\n width: 14px;\n color: ", ";\n\n svg {\n height: 100%;\n width: 100%;\n }\n"])), function (props) {
191
157
  return props.theme.sortIconColor;
192
158
  });
193
-
194
- var _default = DxcResultsetTable;
195
- exports["default"] = _default;
159
+ var _default = exports["default"] = DxcResultsetTable;
@@ -1,45 +1,16 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
4
+ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
5
+ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
5
6
  var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
6
-
7
7
  var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
8
-
9
8
  var _react = _interopRequireDefault(require("react"));
10
-
11
9
  var _react2 = require("@testing-library/react");
12
-
13
10
  var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
14
-
15
- var _ResultsetTable = _interopRequireDefault(require("./ResultsetTable"));
16
-
11
+ var _ResultsetTable = _interopRequireDefault(require("./ResultsetTable.tsx"));
17
12
  // Mocking DOMRect for Radix Primitive Popover
18
13
  global.globalThis = global;
19
-
20
- global.ResizeObserver = /*#__PURE__*/function () {
21
- function ResizeObserver(cb) {
22
- (0, _classCallCheck2["default"])(this, ResizeObserver);
23
- this.cb = cb;
24
- }
25
-
26
- (0, _createClass2["default"])(ResizeObserver, [{
27
- key: "observe",
28
- value: function observe() {
29
- this.cb([{
30
- borderBoxSize: {
31
- inlineSize: 0,
32
- blockSize: 0
33
- }
34
- }]);
35
- }
36
- }, {
37
- key: "unobserve",
38
- value: function unobserve() {}
39
- }]);
40
- return ResizeObserver;
41
- }();
42
-
43
14
  global.DOMRect = {
44
15
  fromRect: function fromRect() {
45
16
  return {
@@ -52,6 +23,22 @@ global.DOMRect = {
52
23
  };
53
24
  }
54
25
  };
26
+ global.ResizeObserver = /*#__PURE__*/function () {
27
+ function ResizeObserver() {
28
+ (0, _classCallCheck2["default"])(this, ResizeObserver);
29
+ }
30
+ (0, _createClass2["default"])(ResizeObserver, [{
31
+ key: "observe",
32
+ value: function observe() {}
33
+ }, {
34
+ key: "unobserve",
35
+ value: function unobserve() {}
36
+ }, {
37
+ key: "disconnect",
38
+ value: function disconnect() {}
39
+ }]);
40
+ return ResizeObserver;
41
+ }();
55
42
  var columns = [{
56
43
  displayValue: "Id",
57
44
  isSortable: false
@@ -186,92 +173,88 @@ var rows2 = [[{
186
173
  describe("Resultset table component tests", function () {
187
174
  test("Resultset table rendered correctly", function () {
188
175
  var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
189
- columns: columns,
190
- rows: rows,
191
- itemsPerPage: 3
192
- })),
193
- getByText = _render.getByText;
194
-
176
+ columns: columns,
177
+ rows: rows,
178
+ itemsPerPage: 3
179
+ })),
180
+ getByText = _render.getByText;
195
181
  expect(getByText("Peter")).toBeTruthy();
196
182
  });
197
183
  test("Resultset table shows as many rows as itemsPerPage", function () {
198
184
  var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
199
- columns: columns,
200
- rows: rows,
201
- itemsPerPage: 3
202
- })),
203
- getAllByRole = _render2.getAllByRole;
204
-
185
+ columns: columns,
186
+ rows: rows,
187
+ itemsPerPage: 3
188
+ })),
189
+ getAllByRole = _render2.getAllByRole;
205
190
  expect(getAllByRole("row").length - 1).toEqual(3);
206
191
  });
207
192
  test("Resultset table shows rows on second page", function () {
208
193
  var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
209
- columns: columns,
210
- rows: rows,
211
- itemsPerPage: 3
212
- })),
213
- getByText = _render3.getByText,
214
- getAllByRole = _render3.getAllByRole;
215
-
194
+ columns: columns,
195
+ rows: rows,
196
+ itemsPerPage: 3
197
+ })),
198
+ getByText = _render3.getByText,
199
+ getAllByRole = _render3.getAllByRole;
216
200
  expect(getByText("Peter")).toBeTruthy();
217
201
  expect(getByText("Louis")).toBeTruthy();
218
202
  expect(getByText("Lana")).toBeTruthy();
219
203
  expect(getAllByRole("row").length - 1).toEqual(3);
220
204
  var nextButton = getAllByRole("button")[3];
221
-
222
205
  _react2.fireEvent.click(nextButton);
223
-
224
- expect(getByText("4 to 6 of 10")).toBeTruthy();
225
- expect(getByText("Rick")).toBeTruthy();
226
- expect(getByText("Mark")).toBeTruthy();
227
- expect(getByText("Cris")).toBeTruthy();
228
- expect(getAllByRole("row").length - 1).toEqual(3);
229
- });
230
- test("Resultset table goToPage works as expected", function () {
231
- window.HTMLElement.prototype.scrollIntoView = function () {};
232
-
233
- window.HTMLElement.prototype.scrollTo = function () {};
234
-
235
- var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
236
- columns: columns,
237
- showGoToPage: true,
238
- rows: rows,
239
- itemsPerPage: 3
240
- })),
241
- getByText = _render4.getByText,
242
- getAllByRole = _render4.getAllByRole;
243
-
244
- expect(getByText("Peter")).toBeTruthy();
245
- expect(getByText("Louis")).toBeTruthy();
246
- expect(getByText("Lana")).toBeTruthy();
247
- expect(getAllByRole("row").length - 1).toEqual(3);
248
- var goToPageSelect = getAllByRole("button")[3];
249
-
250
- _userEvent["default"].click(goToPageSelect);
251
-
252
- var goToPageOption = getByText("2");
253
-
254
- _userEvent["default"].click(goToPageOption);
255
-
256
206
  expect(getByText("4 to 6 of 10")).toBeTruthy();
257
207
  expect(getByText("Rick")).toBeTruthy();
258
208
  expect(getByText("Mark")).toBeTruthy();
259
209
  expect(getByText("Cris")).toBeTruthy();
260
210
  expect(getAllByRole("row").length - 1).toEqual(3);
261
211
  });
212
+ test("Resultset table goToPage works as expected", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
213
+ var _render4, getByText, getAllByRole, goToPageSelect, goToPageOption;
214
+ return _regenerator["default"].wrap(function _callee$(_context) {
215
+ while (1) switch (_context.prev = _context.next) {
216
+ case 0:
217
+ window.HTMLElement.prototype.scrollIntoView = function () {};
218
+ window.HTMLElement.prototype.scrollTo = function () {};
219
+ _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
220
+ columns: columns,
221
+ showGoToPage: true,
222
+ rows: rows,
223
+ itemsPerPage: 3
224
+ })), getByText = _render4.getByText, getAllByRole = _render4.getAllByRole;
225
+ expect(getByText("Peter")).toBeTruthy();
226
+ expect(getByText("Louis")).toBeTruthy();
227
+ expect(getByText("Lana")).toBeTruthy();
228
+ expect(getAllByRole("row").length - 1).toEqual(3);
229
+ goToPageSelect = getAllByRole("button")[3];
230
+ _context.next = 10;
231
+ return _userEvent["default"].click(goToPageSelect);
232
+ case 10:
233
+ goToPageOption = getByText("2");
234
+ _context.next = 13;
235
+ return _userEvent["default"].click(goToPageOption);
236
+ case 13:
237
+ expect(getByText("4 to 6 of 10")).toBeTruthy();
238
+ expect(getByText("Rick")).toBeTruthy();
239
+ expect(getByText("Mark")).toBeTruthy();
240
+ expect(getByText("Cris")).toBeTruthy();
241
+ expect(getAllByRole("row").length - 1).toEqual(3);
242
+ case 18:
243
+ case "end":
244
+ return _context.stop();
245
+ }
246
+ }, _callee);
247
+ })));
262
248
  test("Resultset table going to the last page shows only one row", function () {
263
249
  var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
264
- columns: columns,
265
- rows: rows,
266
- itemsPerPage: 3
267
- })),
268
- getByText = _render5.getByText,
269
- getAllByRole = _render5.getAllByRole;
270
-
250
+ columns: columns,
251
+ rows: rows,
252
+ itemsPerPage: 3
253
+ })),
254
+ getByText = _render5.getByText,
255
+ getAllByRole = _render5.getAllByRole;
271
256
  var lastButton = getAllByRole("button")[4];
272
-
273
257
  _react2.fireEvent.click(lastButton);
274
-
275
258
  expect(getByText("10 to 10 of 10")).toBeTruthy();
276
259
  expect(getAllByRole("row")).toHaveLength(2);
277
260
  expect(getByText("Cosmin")).toBeTruthy();
@@ -283,26 +266,21 @@ describe("Resultset table component tests", function () {
283
266
  itemsPerPage: 3
284
267
  }));
285
268
  expect(component.queryByText("Peter")).toBeTruthy();
286
-
287
269
  _react2.fireEvent.click(component.queryByText("Name"));
288
-
289
270
  expect(component.queryByText("Tina")).not.toBeTruthy();
290
271
  expect(component.queryByText("Cosmin")).toBeTruthy();
291
-
292
272
  _react2.fireEvent.click(component.queryByText("Name"));
293
-
294
273
  expect(component.queryByText("Tina")).toBeTruthy();
295
274
  expect(component.queryByText("Cosmin")).not.toBeTruthy();
296
275
  });
297
276
  test("Resultset table change rows should go to first page", function () {
298
277
  var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
299
- columns: columns,
300
- rows: rows,
301
- itemsPerPage: 3
302
- })),
303
- queryByText = _render6.queryByText,
304
- rerender = _render6.rerender;
305
-
278
+ columns: columns,
279
+ rows: rows,
280
+ itemsPerPage: 3
281
+ })),
282
+ queryByText = _render6.queryByText,
283
+ rerender = _render6.rerender;
306
284
  expect(queryByText("Peter")).toBeTruthy();
307
285
  rerender( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
308
286
  columns: columns,
@@ -313,18 +291,15 @@ describe("Resultset table component tests", function () {
313
291
  });
314
292
  test("Resultset table change itemsPerPage should go to first page", function () {
315
293
  var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
316
- columns: columns,
317
- rows: rows,
318
- itemsPerPage: 3,
319
- itemsPerPageOptions: [2, 3]
320
- })),
321
- getAllByRole = _render7.getAllByRole;
322
-
294
+ columns: columns,
295
+ rows: rows,
296
+ itemsPerPage: 3,
297
+ itemsPerPageOptions: [2, 3]
298
+ })),
299
+ getAllByRole = _render7.getAllByRole;
323
300
  var lastButton = getAllByRole("button")[4];
324
301
  expect(getAllByRole("row").length - 1).toEqual(3);
325
-
326
302
  _react2.fireEvent.click(lastButton);
327
-
328
303
  expect(getAllByRole("row").length - 1).toEqual(1);
329
304
  });
330
305
  });
@@ -1,12 +1,12 @@
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 Column = {
9
+ export type Column = {
10
10
  /**
11
11
  * Column display value.
12
12
  */
@@ -16,7 +16,7 @@ declare type Column = {
16
16
  */
17
17
  isSortable?: boolean;
18
18
  };
19
- declare type Row = {
19
+ type Row = {
20
20
  /**
21
21
  * Value to be displayed in the cell.
22
22
  */
@@ -27,7 +27,7 @@ declare type Row = {
27
27
  */
28
28
  sortValue?: string;
29
29
  };
30
- declare type Props = {
30
+ type Props = {
31
31
  /**
32
32
  * An array of objects representing the columns of the table.
33
33
  */
@@ -53,14 +53,14 @@ declare type Props = {
53
53
  * This function will be called when the user selects an item per page
54
54
  * option. The value selected will be passed as a parameter.
55
55
  */
56
- itemsPerPageFunction?: (newValue: number) => void;
56
+ itemsPerPageFunction?: (value: number) => void;
57
57
  /**
58
58
  * Size of the margin to be applied to the component. You can pass an object with 'top',
59
59
  * 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
60
60
  */
61
61
  margin?: Space | Margin;
62
62
  /**
63
- * Value of the tabindex attribute given to the sortable icon.
63
+ * Value of the tabindex attribute applied to the sortable icon.
64
64
  */
65
65
  tabIndex?: number;
66
66
  };
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
package/select/Icons.d.ts CHANGED
@@ -1,10 +1,10 @@
1
- /// <reference types="react" />
1
+ import React from "react";
2
2
  declare const selectIcons: {
3
- error: JSX.Element;
4
- arrowUp: JSX.Element;
5
- arrowDown: JSX.Element;
6
- clear: JSX.Element;
7
- selected: JSX.Element;
8
- searchOff: JSX.Element;
3
+ error: React.JSX.Element;
4
+ arrowUp: React.JSX.Element;
5
+ arrowDown: React.JSX.Element;
6
+ clear: React.JSX.Element;
7
+ selected: React.JSX.Element;
8
+ searchOff: React.JSX.Element;
9
9
  };
10
10
  export default selectIcons;
package/select/Icons.js CHANGED
@@ -1,14 +1,11 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports["default"] = void 0;
9
-
10
8
  var _react = _interopRequireDefault(require("react"));
11
-
12
9
  var selectIcons = {
13
10
  error: /*#__PURE__*/_react["default"].createElement("svg", {
14
11
  role: "img",
@@ -89,5 +86,4 @@ var selectIcons = {
89
86
  points: "6.47,10.82 4,13.29 1.53,10.82 0.82,11.53 3.29,14 0.82,16.47 1.53,17.18 4,14.71 6.47,17.18 7.18,16.47 4.71,14 7.18,11.53"
90
87
  }))))
91
88
  };
92
- var _default = selectIcons;
93
- exports["default"] = _default;
89
+ var _default = exports["default"] = selectIcons;
@@ -1,4 +1,4 @@
1
1
  import React from "react";
2
2
  import { ListboxProps } from "./types";
3
- declare const _default: React.MemoExoticComponent<({ id, currentValue, options, visualFocusIndex, lastOptionIndex, multiple, optional, optionalItem, searchable, handleOptionOnClick, getSelectWidth, }: ListboxProps) => JSX.Element>;
3
+ declare const _default: React.MemoExoticComponent<({ id, currentValue, options, visualFocusIndex, lastOptionIndex, multiple, optional, optionalItem, searchable, handleOptionOnClick, styles, }: ListboxProps) => JSX.Element>;
4
4
  export default _default;