@dxc-technology/halstack-react 10.1.0 → 11.0.0

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 (210) hide show
  1. package/BackgroundColorContext.d.ts +2 -2
  2. package/BackgroundColorContext.js +5 -17
  3. package/HalstackContext.d.ts +18 -6
  4. package/HalstackContext.js +9 -34
  5. package/accordion/Accordion.js +21 -58
  6. package/accordion/Accordion.stories.tsx +1 -15
  7. package/accordion/Accordion.test.js +18 -33
  8. package/accordion/types.d.ts +5 -5
  9. package/accordion-group/AccordionGroup.js +15 -42
  10. package/accordion-group/AccordionGroup.stories.tsx +1 -1
  11. package/accordion-group/AccordionGroup.test.js +42 -60
  12. package/accordion-group/AccordionGroupAccordion.js +9 -21
  13. package/accordion-group/types.d.ts +6 -6
  14. package/alert/Alert.js +14 -46
  15. package/alert/Alert.test.js +28 -45
  16. package/alert/types.d.ts +5 -5
  17. package/badge/Badge.js +4 -17
  18. package/badge/types.d.ts +1 -1
  19. package/bleed/Bleed.js +13 -21
  20. package/bleed/types.d.ts +2 -2
  21. package/box/Box.js +10 -29
  22. package/box/Box.test.js +1 -6
  23. package/box/types.d.ts +3 -3
  24. package/bulleted-list/BulletedList.js +7 -33
  25. package/bulleted-list/BulletedList.stories.tsx +1 -91
  26. package/bulleted-list/types.d.ts +5 -5
  27. package/button/Button.js +23 -46
  28. package/button/Button.stories.tsx +5 -86
  29. package/button/Button.test.js +11 -21
  30. package/button/types.d.ts +4 -4
  31. package/card/Card.js +21 -44
  32. package/card/Card.test.js +10 -21
  33. package/card/types.d.ts +5 -5
  34. package/checkbox/Checkbox.js +81 -111
  35. package/checkbox/Checkbox.stories.tsx +16 -54
  36. package/checkbox/Checkbox.test.js +107 -63
  37. package/checkbox/types.d.ts +8 -4
  38. package/chip/Chip.js +12 -31
  39. package/chip/Chip.test.js +15 -28
  40. package/chip/types.d.ts +4 -4
  41. package/common/coreTokens.js +1 -2
  42. package/common/utils.js +2 -8
  43. package/common/variables.d.ts +15 -6
  44. package/common/variables.js +17 -15
  45. package/date-input/Calendar.js +13 -57
  46. package/date-input/DateInput.js +50 -96
  47. package/date-input/DateInput.stories.tsx +11 -30
  48. package/date-input/DateInput.test.js +674 -701
  49. package/date-input/DatePicker.js +11 -42
  50. package/date-input/Icons.d.ts +6 -6
  51. package/date-input/Icons.js +6 -23
  52. package/date-input/YearPicker.js +8 -34
  53. package/date-input/types.d.ts +27 -21
  54. package/dialog/Dialog.js +11 -35
  55. package/dialog/Dialog.test.js +125 -187
  56. package/dialog/types.d.ts +18 -13
  57. package/dropdown/Dropdown.js +39 -93
  58. package/dropdown/Dropdown.test.js +391 -378
  59. package/dropdown/DropdownMenu.js +8 -19
  60. package/dropdown/DropdownMenuItem.js +5 -17
  61. package/dropdown/types.d.ts +17 -19
  62. package/file-input/FileInput.js +131 -220
  63. package/file-input/FileInput.stories.tsx +1 -1
  64. package/file-input/FileInput.test.js +293 -342
  65. package/file-input/FileItem.js +12 -39
  66. package/file-input/types.d.ts +9 -9
  67. package/flex/Flex.js +25 -39
  68. package/flex/types.d.ts +6 -6
  69. package/footer/Footer.js +9 -39
  70. package/footer/Footer.test.js +18 -32
  71. package/footer/Icons.d.ts +2 -2
  72. package/footer/Icons.js +2 -7
  73. package/footer/types.d.ts +13 -13
  74. package/grid/Grid.js +1 -16
  75. package/grid/types.d.ts +10 -10
  76. package/header/Header.d.ts +1 -1
  77. package/header/Header.js +19 -64
  78. package/header/Header.test.js +12 -25
  79. package/header/Icons.d.ts +2 -2
  80. package/header/Icons.js +2 -7
  81. package/header/types.d.ts +5 -7
  82. package/heading/Heading.js +9 -31
  83. package/heading/Heading.test.js +70 -87
  84. package/heading/types.d.ts +7 -7
  85. package/image/Image.d.ts +2 -2
  86. package/image/Image.js +17 -32
  87. package/image/types.d.ts +2 -2
  88. package/inset/Inset.js +13 -21
  89. package/inset/types.d.ts +2 -2
  90. package/layout/ApplicationLayout.d.ts +1 -1
  91. package/layout/ApplicationLayout.js +14 -54
  92. package/layout/Icons.d.ts +5 -5
  93. package/layout/Icons.js +1 -5
  94. package/layout/SidenavContext.d.ts +1 -1
  95. package/layout/SidenavContext.js +3 -9
  96. package/layout/types.d.ts +3 -3
  97. package/link/Link.js +21 -42
  98. package/link/Link.test.js +23 -41
  99. package/link/types.d.ts +14 -14
  100. package/main.d.ts +1 -1
  101. package/main.js +3 -52
  102. package/nav-tabs/NavTabs.js +11 -43
  103. package/nav-tabs/NavTabs.stories.tsx +1 -1
  104. package/nav-tabs/NavTabs.test.js +36 -43
  105. package/nav-tabs/Tab.js +16 -45
  106. package/nav-tabs/types.d.ts +9 -9
  107. package/number-input/NumberInput.d.ts +1 -1
  108. package/number-input/NumberInput.js +24 -35
  109. package/number-input/NumberInput.stories.tsx +42 -26
  110. package/number-input/NumberInput.test.js +682 -577
  111. package/number-input/types.d.ts +11 -5
  112. package/package.json +27 -25
  113. package/paginator/Icons.d.ts +5 -5
  114. package/paginator/Icons.js +5 -19
  115. package/paginator/Paginator.js +14 -39
  116. package/paginator/Paginator.test.js +224 -207
  117. package/paginator/types.d.ts +3 -3
  118. package/paragraph/Paragraph.js +3 -14
  119. package/paragraph/Paragraph.stories.tsx +0 -17
  120. package/password-input/Icons.d.ts +3 -3
  121. package/password-input/Icons.js +1 -5
  122. package/password-input/PasswordInput.js +26 -48
  123. package/password-input/PasswordInput.stories.tsx +1 -33
  124. package/password-input/PasswordInput.test.js +153 -129
  125. package/password-input/types.d.ts +8 -7
  126. package/progress-bar/ProgressBar.js +16 -42
  127. package/progress-bar/{ProgressBar.stories.jsx → ProgressBar.stories.tsx} +1 -1
  128. package/progress-bar/ProgressBar.test.js +35 -52
  129. package/progress-bar/types.d.ts +3 -3
  130. package/quick-nav/QuickNav.js +4 -27
  131. package/quick-nav/QuickNav.stories.tsx +1 -1
  132. package/quick-nav/types.d.ts +10 -10
  133. package/radio-group/Radio.d.ts +1 -1
  134. package/radio-group/Radio.js +22 -54
  135. package/radio-group/RadioGroup.js +37 -83
  136. package/radio-group/RadioGroup.stories.tsx +10 -10
  137. package/radio-group/RadioGroup.test.js +504 -470
  138. package/radio-group/types.d.ts +8 -8
  139. package/resultset-table/Icons.d.ts +7 -0
  140. package/{resultsetTable → resultset-table}/Icons.js +1 -5
  141. package/{resultsetTable → resultset-table}/ResultsetTable.js +22 -58
  142. package/{resultsetTable → resultset-table}/ResultsetTable.test.js +72 -92
  143. package/{resultsetTable → resultset-table}/types.d.ts +7 -7
  144. package/select/Icons.d.ts +7 -7
  145. package/select/Icons.js +1 -5
  146. package/select/Listbox.js +13 -39
  147. package/select/Option.js +9 -26
  148. package/select/Select.js +54 -138
  149. package/select/Select.test.js +1902 -1796
  150. package/select/types.d.ts +14 -15
  151. package/sidenav/Icons.d.ts +4 -4
  152. package/sidenav/Icons.js +1 -5
  153. package/sidenav/Sidenav.js +24 -63
  154. package/sidenav/Sidenav.test.js +3 -10
  155. package/sidenav/types.d.ts +18 -18
  156. package/slider/Slider.js +38 -86
  157. package/slider/Slider.test.js +107 -103
  158. package/slider/types.d.ts +4 -4
  159. package/spinner/Spinner.js +10 -40
  160. package/spinner/Spinner.test.js +25 -34
  161. package/spinner/types.d.ts +3 -3
  162. package/switch/Switch.js +26 -69
  163. package/switch/Switch.stories.tsx +0 -34
  164. package/switch/Switch.test.js +51 -96
  165. package/switch/types.d.ts +4 -4
  166. package/table/Table.js +4 -23
  167. package/table/Table.test.js +1 -6
  168. package/table/types.d.ts +8 -8
  169. package/tabs/Tab.js +10 -29
  170. package/tabs/Tabs.js +48 -124
  171. package/tabs/Tabs.test.js +62 -118
  172. package/tabs/types.d.ts +19 -19
  173. package/tag/Tag.js +21 -51
  174. package/tag/Tag.test.js +19 -30
  175. package/tag/types.d.ts +7 -7
  176. package/text-input/Icons.d.ts +5 -5
  177. package/text-input/Icons.js +1 -5
  178. package/text-input/Suggestion.js +9 -26
  179. package/text-input/Suggestions.d.ts +1 -1
  180. package/text-input/Suggestions.js +12 -57
  181. package/text-input/TextInput.js +128 -193
  182. package/text-input/TextInput.stories.tsx +48 -152
  183. package/text-input/TextInput.test.js +1210 -1194
  184. package/text-input/types.d.ts +25 -17
  185. package/textarea/Textarea.js +60 -96
  186. package/textarea/{Textarea.stories.jsx → Textarea.stories.tsx} +58 -99
  187. package/textarea/Textarea.test.js +150 -179
  188. package/textarea/types.d.ts +9 -5
  189. package/toggle-group/ToggleGroup.js +20 -57
  190. package/toggle-group/ToggleGroup.stories.tsx +1 -1
  191. package/toggle-group/ToggleGroup.test.js +48 -81
  192. package/toggle-group/types.d.ts +10 -10
  193. package/typography/Typography.js +4 -13
  194. package/typography/types.d.ts +1 -1
  195. package/useTheme.d.ts +12 -3
  196. package/useTheme.js +1 -8
  197. package/useTranslatedLabels.js +1 -7
  198. package/utils/BaseTypography.d.ts +2 -2
  199. package/utils/BaseTypography.js +16 -30
  200. package/utils/FocusLock.js +12 -36
  201. package/wizard/Wizard.js +14 -49
  202. package/wizard/Wizard.test.js +53 -80
  203. package/wizard/types.d.ts +6 -6
  204. package/resultsetTable/Icons.d.ts +0 -7
  205. package/slider/Slider.stories.tsx +0 -240
  206. /package/{resultsetTable → resultset-table}/ResultsetTable.d.ts +0 -0
  207. /package/{resultsetTable → resultset-table}/ResultsetTable.stories.tsx +0 -0
  208. /package/{resultsetTable → resultset-table}/types.js +0 -0
  209. /package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +0 -0
  210. /package/table/{Table.stories.jsx → Table.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
14
  var _variables = require("../common/variables");
23
-
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
19
  var _utils = require("../common/utils");
33
-
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]);
@@ -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,19 +1,14 @@
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
11
  var _ResultsetTable = _interopRequireDefault(require("./ResultsetTable.tsx"));
16
-
17
12
  // Mocking DOMRect for Radix Primitive Popover
18
13
  global.globalThis = global;
19
14
  global.DOMRect = {
@@ -28,12 +23,10 @@ global.DOMRect = {
28
23
  };
29
24
  }
30
25
  };
31
-
32
26
  global.ResizeObserver = /*#__PURE__*/function () {
33
27
  function ResizeObserver() {
34
28
  (0, _classCallCheck2["default"])(this, ResizeObserver);
35
29
  }
36
-
37
30
  (0, _createClass2["default"])(ResizeObserver, [{
38
31
  key: "observe",
39
32
  value: function observe() {}
@@ -46,7 +39,6 @@ global.ResizeObserver = /*#__PURE__*/function () {
46
39
  }]);
47
40
  return ResizeObserver;
48
41
  }();
49
-
50
42
  var columns = [{
51
43
  displayValue: "Id",
52
44
  isSortable: false
@@ -181,92 +173,88 @@ var rows2 = [[{
181
173
  describe("Resultset table component tests", function () {
182
174
  test("Resultset table rendered correctly", function () {
183
175
  var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
184
- columns: columns,
185
- rows: rows,
186
- itemsPerPage: 3
187
- })),
188
- getByText = _render.getByText;
189
-
176
+ columns: columns,
177
+ rows: rows,
178
+ itemsPerPage: 3
179
+ })),
180
+ getByText = _render.getByText;
190
181
  expect(getByText("Peter")).toBeTruthy();
191
182
  });
192
183
  test("Resultset table shows as many rows as itemsPerPage", function () {
193
184
  var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
194
- columns: columns,
195
- rows: rows,
196
- itemsPerPage: 3
197
- })),
198
- getAllByRole = _render2.getAllByRole;
199
-
185
+ columns: columns,
186
+ rows: rows,
187
+ itemsPerPage: 3
188
+ })),
189
+ getAllByRole = _render2.getAllByRole;
200
190
  expect(getAllByRole("row").length - 1).toEqual(3);
201
191
  });
202
192
  test("Resultset table shows rows on second page", function () {
203
193
  var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
204
- columns: columns,
205
- rows: rows,
206
- itemsPerPage: 3
207
- })),
208
- getByText = _render3.getByText,
209
- getAllByRole = _render3.getAllByRole;
210
-
194
+ columns: columns,
195
+ rows: rows,
196
+ itemsPerPage: 3
197
+ })),
198
+ getByText = _render3.getByText,
199
+ getAllByRole = _render3.getAllByRole;
211
200
  expect(getByText("Peter")).toBeTruthy();
212
201
  expect(getByText("Louis")).toBeTruthy();
213
202
  expect(getByText("Lana")).toBeTruthy();
214
203
  expect(getAllByRole("row").length - 1).toEqual(3);
215
204
  var nextButton = getAllByRole("button")[3];
216
-
217
205
  _react2.fireEvent.click(nextButton);
218
-
219
- expect(getByText("4 to 6 of 10")).toBeTruthy();
220
- expect(getByText("Rick")).toBeTruthy();
221
- expect(getByText("Mark")).toBeTruthy();
222
- expect(getByText("Cris")).toBeTruthy();
223
- expect(getAllByRole("row").length - 1).toEqual(3);
224
- });
225
- test("Resultset table goToPage works as expected", function () {
226
- window.HTMLElement.prototype.scrollIntoView = function () {};
227
-
228
- window.HTMLElement.prototype.scrollTo = function () {};
229
-
230
- var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
231
- columns: columns,
232
- showGoToPage: true,
233
- rows: rows,
234
- itemsPerPage: 3
235
- })),
236
- getByText = _render4.getByText,
237
- getAllByRole = _render4.getAllByRole;
238
-
239
- expect(getByText("Peter")).toBeTruthy();
240
- expect(getByText("Louis")).toBeTruthy();
241
- expect(getByText("Lana")).toBeTruthy();
242
- expect(getAllByRole("row").length - 1).toEqual(3);
243
- var goToPageSelect = getAllByRole("button")[3];
244
-
245
- _userEvent["default"].click(goToPageSelect);
246
-
247
- var goToPageOption = getByText("2");
248
-
249
- _userEvent["default"].click(goToPageOption);
250
-
251
206
  expect(getByText("4 to 6 of 10")).toBeTruthy();
252
207
  expect(getByText("Rick")).toBeTruthy();
253
208
  expect(getByText("Mark")).toBeTruthy();
254
209
  expect(getByText("Cris")).toBeTruthy();
255
210
  expect(getAllByRole("row").length - 1).toEqual(3);
256
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
+ })));
257
248
  test("Resultset table going to the last page shows only one row", function () {
258
249
  var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
259
- columns: columns,
260
- rows: rows,
261
- itemsPerPage: 3
262
- })),
263
- getByText = _render5.getByText,
264
- getAllByRole = _render5.getAllByRole;
265
-
250
+ columns: columns,
251
+ rows: rows,
252
+ itemsPerPage: 3
253
+ })),
254
+ getByText = _render5.getByText,
255
+ getAllByRole = _render5.getAllByRole;
266
256
  var lastButton = getAllByRole("button")[4];
267
-
268
257
  _react2.fireEvent.click(lastButton);
269
-
270
258
  expect(getByText("10 to 10 of 10")).toBeTruthy();
271
259
  expect(getAllByRole("row")).toHaveLength(2);
272
260
  expect(getByText("Cosmin")).toBeTruthy();
@@ -278,26 +266,21 @@ describe("Resultset table component tests", function () {
278
266
  itemsPerPage: 3
279
267
  }));
280
268
  expect(component.queryByText("Peter")).toBeTruthy();
281
-
282
269
  _react2.fireEvent.click(component.queryByText("Name"));
283
-
284
270
  expect(component.queryByText("Tina")).not.toBeTruthy();
285
271
  expect(component.queryByText("Cosmin")).toBeTruthy();
286
-
287
272
  _react2.fireEvent.click(component.queryByText("Name"));
288
-
289
273
  expect(component.queryByText("Tina")).toBeTruthy();
290
274
  expect(component.queryByText("Cosmin")).not.toBeTruthy();
291
275
  });
292
276
  test("Resultset table change rows should go to first page", function () {
293
277
  var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
294
- columns: columns,
295
- rows: rows,
296
- itemsPerPage: 3
297
- })),
298
- queryByText = _render6.queryByText,
299
- rerender = _render6.rerender;
300
-
278
+ columns: columns,
279
+ rows: rows,
280
+ itemsPerPage: 3
281
+ })),
282
+ queryByText = _render6.queryByText,
283
+ rerender = _render6.rerender;
301
284
  expect(queryByText("Peter")).toBeTruthy();
302
285
  rerender( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
303
286
  columns: columns,
@@ -308,18 +291,15 @@ describe("Resultset table component tests", function () {
308
291
  });
309
292
  test("Resultset table change itemsPerPage should go to first page", function () {
310
293
  var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
311
- columns: columns,
312
- rows: rows,
313
- itemsPerPage: 3,
314
- itemsPerPageOptions: [2, 3]
315
- })),
316
- getAllByRole = _render7.getAllByRole;
317
-
294
+ columns: columns,
295
+ rows: rows,
296
+ itemsPerPage: 3,
297
+ itemsPerPageOptions: [2, 3]
298
+ })),
299
+ getAllByRole = _render7.getAllByRole;
318
300
  var lastButton = getAllByRole("button")[4];
319
301
  expect(getAllByRole("row").length - 1).toEqual(3);
320
-
321
302
  _react2.fireEvent.click(lastButton);
322
-
323
303
  expect(getAllByRole("row").length - 1).toEqual(1);
324
304
  });
325
305
  });
@@ -1,12 +1,12 @@
1
1
  /// <reference types="react" />
2
- declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
- 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
- export declare type Column = {
9
+ export type Column = {
10
10
  /**
11
11
  * Column display value.
12
12
  */
@@ -16,7 +16,7 @@ export 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
  };
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;