@dxc-technology/halstack-react 0.0.0-abf35d9 → 0.0.0-acc2a7e

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 (341) hide show
  1. package/README.md +46 -0
  2. package/dist/index.d.mts +3862 -0
  3. package/dist/index.d.ts +3862 -0
  4. package/dist/index.js +12917 -0
  5. package/dist/index.mjs +12830 -0
  6. package/package.json +76 -67
  7. package/BackgroundColorContext.d.ts +0 -10
  8. package/BackgroundColorContext.js +0 -47
  9. package/HalstackContext.d.ts +0 -1336
  10. package/HalstackContext.js +0 -335
  11. package/accordion/Accordion.d.ts +0 -4
  12. package/accordion/Accordion.js +0 -234
  13. package/accordion/Accordion.stories.tsx +0 -395
  14. package/accordion/Accordion.test.js +0 -71
  15. package/accordion/types.d.ts +0 -69
  16. package/accordion/types.js +0 -5
  17. package/accordion-group/AccordionGroup.d.ts +0 -7
  18. package/accordion-group/AccordionGroup.js +0 -149
  19. package/accordion-group/AccordionGroup.stories.tsx +0 -251
  20. package/accordion-group/AccordionGroup.test.js +0 -126
  21. package/accordion-group/types.d.ts +0 -79
  22. package/accordion-group/types.js +0 -5
  23. package/alert/Alert.d.ts +0 -4
  24. package/alert/Alert.js +0 -291
  25. package/alert/Alert.stories.tsx +0 -198
  26. package/alert/Alert.test.js +0 -92
  27. package/alert/types.d.ts +0 -49
  28. package/alert/types.js +0 -5
  29. package/badge/Badge.d.ts +0 -4
  30. package/badge/Badge.js +0 -61
  31. package/badge/types.d.ts +0 -5
  32. package/badge/types.js +0 -5
  33. package/bleed/Bleed.d.ts +0 -3
  34. package/bleed/Bleed.js +0 -51
  35. package/bleed/Bleed.stories.tsx +0 -341
  36. package/bleed/types.d.ts +0 -37
  37. package/bleed/types.js +0 -5
  38. package/box/Box.d.ts +0 -4
  39. package/box/Box.js +0 -114
  40. package/box/Box.stories.tsx +0 -147
  41. package/box/Box.test.js +0 -18
  42. package/box/types.d.ts +0 -44
  43. package/box/types.js +0 -5
  44. package/bulleted-list/BulletedList.d.ts +0 -7
  45. package/bulleted-list/BulletedList.js +0 -123
  46. package/bulleted-list/BulletedList.stories.tsx +0 -200
  47. package/bulleted-list/types.d.ts +0 -11
  48. package/bulleted-list/types.js +0 -5
  49. package/button/Button.d.ts +0 -4
  50. package/button/Button.js +0 -154
  51. package/button/Button.stories.tsx +0 -425
  52. package/button/Button.test.js +0 -35
  53. package/button/types.d.ts +0 -53
  54. package/button/types.js +0 -5
  55. package/card/Card.d.ts +0 -4
  56. package/card/Card.js +0 -160
  57. package/card/Card.stories.tsx +0 -200
  58. package/card/Card.test.js +0 -50
  59. package/card/ice-cream.jpg +0 -0
  60. package/card/types.d.ts +0 -68
  61. package/card/types.js +0 -5
  62. package/checkbox/Checkbox.d.ts +0 -4
  63. package/checkbox/Checkbox.js +0 -250
  64. package/checkbox/Checkbox.stories.tsx +0 -260
  65. package/checkbox/Checkbox.test.js +0 -155
  66. package/checkbox/types.d.ts +0 -68
  67. package/checkbox/types.js +0 -5
  68. package/chip/Chip.d.ts +0 -4
  69. package/chip/Chip.js +0 -153
  70. package/chip/Chip.stories.tsx +0 -206
  71. package/chip/Chip.test.js +0 -54
  72. package/chip/types.d.ts +0 -45
  73. package/chip/types.js +0 -5
  74. package/common/OpenSans.css +0 -81
  75. package/common/fonts/OpenSans-Bold.ttf +0 -0
  76. package/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  77. package/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  78. package/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  79. package/common/fonts/OpenSans-Italic.ttf +0 -0
  80. package/common/fonts/OpenSans-Light.ttf +0 -0
  81. package/common/fonts/OpenSans-LightItalic.ttf +0 -0
  82. package/common/fonts/OpenSans-Regular.ttf +0 -0
  83. package/common/fonts/OpenSans-SemiBold.ttf +0 -0
  84. package/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  85. package/common/utils.d.ts +0 -1
  86. package/common/utils.js +0 -22
  87. package/common/variables.d.ts +0 -1625
  88. package/common/variables.js +0 -1504
  89. package/date-input/Calendar.d.ts +0 -4
  90. package/date-input/Calendar.js +0 -258
  91. package/date-input/DateInput.d.ts +0 -4
  92. package/date-input/DateInput.js +0 -269
  93. package/date-input/DateInput.stories.tsx +0 -304
  94. package/date-input/DateInput.test.js +0 -835
  95. package/date-input/DatePicker.d.ts +0 -4
  96. package/date-input/DatePicker.js +0 -146
  97. package/date-input/Icons.d.ts +0 -6
  98. package/date-input/Icons.js +0 -75
  99. package/date-input/YearPicker.d.ts +0 -4
  100. package/date-input/YearPicker.js +0 -126
  101. package/date-input/types.d.ts +0 -158
  102. package/date-input/types.js +0 -5
  103. package/dialog/Dialog.d.ts +0 -4
  104. package/dialog/Dialog.js +0 -149
  105. package/dialog/Dialog.stories.tsx +0 -319
  106. package/dialog/Dialog.test.js +0 -369
  107. package/dialog/types.d.ts +0 -44
  108. package/dialog/types.js +0 -5
  109. package/dropdown/Dropdown.d.ts +0 -4
  110. package/dropdown/Dropdown.js +0 -388
  111. package/dropdown/Dropdown.stories.tsx +0 -438
  112. package/dropdown/Dropdown.test.js +0 -586
  113. package/dropdown/DropdownMenu.d.ts +0 -4
  114. package/dropdown/DropdownMenu.js +0 -70
  115. package/dropdown/DropdownMenuItem.d.ts +0 -4
  116. package/dropdown/DropdownMenuItem.js +0 -79
  117. package/dropdown/types.d.ts +0 -100
  118. package/dropdown/types.js +0 -5
  119. package/file-input/FileInput.d.ts +0 -4
  120. package/file-input/FileInput.js +0 -547
  121. package/file-input/FileInput.stories.tsx +0 -618
  122. package/file-input/FileInput.test.js +0 -457
  123. package/file-input/FileItem.d.ts +0 -4
  124. package/file-input/FileItem.js +0 -162
  125. package/file-input/types.d.ts +0 -129
  126. package/file-input/types.js +0 -5
  127. package/flex/Flex.d.ts +0 -4
  128. package/flex/Flex.js +0 -69
  129. package/flex/Flex.stories.tsx +0 -103
  130. package/flex/types.d.ts +0 -32
  131. package/flex/types.js +0 -5
  132. package/footer/Footer.d.ts +0 -4
  133. package/footer/Footer.js +0 -183
  134. package/footer/Footer.stories.tsx +0 -228
  135. package/footer/Footer.test.js +0 -97
  136. package/footer/Icons.d.ts +0 -2
  137. package/footer/Icons.js +0 -77
  138. package/footer/types.d.ts +0 -66
  139. package/footer/types.js +0 -5
  140. package/grid/Grid.d.ts +0 -7
  141. package/grid/Grid.js +0 -91
  142. package/grid/Grid.stories.tsx +0 -219
  143. package/grid/types.d.ts +0 -46
  144. package/grid/types.js +0 -5
  145. package/header/Header.d.ts +0 -8
  146. package/header/Header.js +0 -303
  147. package/header/Header.stories.tsx +0 -315
  148. package/header/Header.test.js +0 -79
  149. package/header/Icons.d.ts +0 -2
  150. package/header/Icons.js +0 -34
  151. package/header/types.d.ts +0 -48
  152. package/header/types.js +0 -5
  153. package/heading/Heading.d.ts +0 -4
  154. package/heading/Heading.js +0 -159
  155. package/heading/Heading.stories.tsx +0 -54
  156. package/heading/Heading.test.js +0 -186
  157. package/heading/types.d.ts +0 -33
  158. package/heading/types.js +0 -5
  159. package/inset/Inset.d.ts +0 -3
  160. package/inset/Inset.js +0 -51
  161. package/inset/Inset.stories.tsx +0 -229
  162. package/inset/types.d.ts +0 -37
  163. package/inset/types.js +0 -5
  164. package/layout/ApplicationLayout.d.ts +0 -20
  165. package/layout/ApplicationLayout.js +0 -171
  166. package/layout/ApplicationLayout.stories.tsx +0 -162
  167. package/layout/Icons.d.ts +0 -5
  168. package/layout/Icons.js +0 -66
  169. package/layout/SidenavContext.d.ts +0 -5
  170. package/layout/SidenavContext.js +0 -19
  171. package/layout/types.d.ts +0 -42
  172. package/layout/types.js +0 -5
  173. package/link/Link.d.ts +0 -4
  174. package/link/Link.js +0 -136
  175. package/link/Link.stories.tsx +0 -253
  176. package/link/Link.test.js +0 -81
  177. package/link/types.d.ts +0 -54
  178. package/link/types.js +0 -5
  179. package/main.d.ts +0 -45
  180. package/main.js +0 -377
  181. package/nav-tabs/NavTabs.d.ts +0 -8
  182. package/nav-tabs/NavTabs.js +0 -125
  183. package/nav-tabs/NavTabs.stories.tsx +0 -260
  184. package/nav-tabs/NavTabs.test.js +0 -82
  185. package/nav-tabs/Tab.d.ts +0 -4
  186. package/nav-tabs/Tab.js +0 -150
  187. package/nav-tabs/types.d.ts +0 -53
  188. package/nav-tabs/types.js +0 -5
  189. package/number-input/NumberInput.d.ts +0 -4
  190. package/number-input/NumberInput.js +0 -76
  191. package/number-input/NumberInput.stories.tsx +0 -115
  192. package/number-input/NumberInput.test.js +0 -542
  193. package/number-input/NumberInputContext.d.ts +0 -4
  194. package/number-input/NumberInputContext.js +0 -19
  195. package/number-input/numberInputContextTypes.d.ts +0 -19
  196. package/number-input/numberInputContextTypes.js +0 -5
  197. package/number-input/types.d.ts +0 -124
  198. package/number-input/types.js +0 -5
  199. package/paginator/Icons.d.ts +0 -5
  200. package/paginator/Icons.js +0 -54
  201. package/paginator/Paginator.d.ts +0 -4
  202. package/paginator/Paginator.js +0 -163
  203. package/paginator/Paginator.stories.tsx +0 -87
  204. package/paginator/Paginator.test.js +0 -305
  205. package/paginator/types.d.ts +0 -38
  206. package/paginator/types.js +0 -5
  207. package/paragraph/Paragraph.d.ts +0 -5
  208. package/paragraph/Paragraph.js +0 -38
  209. package/paragraph/Paragraph.stories.tsx +0 -44
  210. package/password-input/PasswordInput.d.ts +0 -4
  211. package/password-input/PasswordInput.js +0 -166
  212. package/password-input/PasswordInput.stories.tsx +0 -131
  213. package/password-input/PasswordInput.test.js +0 -181
  214. package/password-input/types.d.ts +0 -110
  215. package/password-input/types.js +0 -5
  216. package/progress-bar/ProgressBar.d.ts +0 -4
  217. package/progress-bar/ProgressBar.js +0 -176
  218. package/progress-bar/ProgressBar.stories.jsx +0 -93
  219. package/progress-bar/ProgressBar.test.js +0 -110
  220. package/progress-bar/types.d.ts +0 -37
  221. package/progress-bar/types.js +0 -5
  222. package/quick-nav/QuickNav.d.ts +0 -4
  223. package/quick-nav/QuickNav.js +0 -117
  224. package/quick-nav/QuickNav.stories.tsx +0 -356
  225. package/quick-nav/types.d.ts +0 -21
  226. package/quick-nav/types.js +0 -5
  227. package/radio-group/Radio.d.ts +0 -4
  228. package/radio-group/Radio.js +0 -156
  229. package/radio-group/RadioGroup.d.ts +0 -4
  230. package/radio-group/RadioGroup.js +0 -283
  231. package/radio-group/RadioGroup.stories.tsx +0 -214
  232. package/radio-group/RadioGroup.test.js +0 -722
  233. package/radio-group/types.d.ts +0 -114
  234. package/radio-group/types.js +0 -5
  235. package/resultsetTable/Icons.d.ts +0 -7
  236. package/resultsetTable/Icons.js +0 -51
  237. package/resultsetTable/ResultsetTable.d.ts +0 -4
  238. package/resultsetTable/ResultsetTable.js +0 -195
  239. package/resultsetTable/ResultsetTable.stories.tsx +0 -300
  240. package/resultsetTable/ResultsetTable.test.js +0 -325
  241. package/resultsetTable/types.d.ts +0 -67
  242. package/resultsetTable/types.js +0 -5
  243. package/select/Icons.d.ts +0 -10
  244. package/select/Icons.js +0 -93
  245. package/select/Listbox.d.ts +0 -4
  246. package/select/Listbox.js +0 -169
  247. package/select/Option.d.ts +0 -4
  248. package/select/Option.js +0 -97
  249. package/select/Select.d.ts +0 -4
  250. package/select/Select.js +0 -666
  251. package/select/Select.stories.tsx +0 -971
  252. package/select/Select.test.js +0 -2228
  253. package/select/types.d.ts +0 -210
  254. package/select/types.js +0 -5
  255. package/sidenav/Sidenav.d.ts +0 -10
  256. package/sidenav/Sidenav.js +0 -266
  257. package/sidenav/Sidenav.stories.tsx +0 -282
  258. package/sidenav/Sidenav.test.js +0 -44
  259. package/sidenav/types.d.ts +0 -73
  260. package/sidenav/types.js +0 -5
  261. package/slider/Slider.d.ts +0 -4
  262. package/slider/Slider.js +0 -342
  263. package/slider/Slider.stories.tsx +0 -240
  264. package/slider/Slider.test.js +0 -250
  265. package/slider/types.d.ts +0 -86
  266. package/slider/types.js +0 -5
  267. package/spinner/Spinner.d.ts +0 -4
  268. package/spinner/Spinner.js +0 -244
  269. package/spinner/Spinner.stories.jsx +0 -129
  270. package/spinner/Spinner.test.js +0 -64
  271. package/spinner/types.d.ts +0 -32
  272. package/spinner/types.js +0 -5
  273. package/switch/Switch.d.ts +0 -4
  274. package/switch/Switch.js +0 -262
  275. package/switch/Switch.stories.tsx +0 -171
  276. package/switch/Switch.test.js +0 -225
  277. package/switch/types.d.ts +0 -66
  278. package/switch/types.js +0 -5
  279. package/table/Table.d.ts +0 -4
  280. package/table/Table.js +0 -118
  281. package/table/Table.stories.jsx +0 -356
  282. package/table/Table.test.js +0 -26
  283. package/table/types.d.ts +0 -21
  284. package/table/types.js +0 -5
  285. package/tabs/Tab.d.ts +0 -4
  286. package/tabs/Tab.js +0 -133
  287. package/tabs/Tabs.d.ts +0 -4
  288. package/tabs/Tabs.js +0 -465
  289. package/tabs/Tabs.stories.tsx +0 -226
  290. package/tabs/Tabs.test.js +0 -350
  291. package/tabs/types.d.ts +0 -92
  292. package/tabs/types.js +0 -5
  293. package/tag/Tag.d.ts +0 -4
  294. package/tag/Tag.js +0 -181
  295. package/tag/Tag.stories.tsx +0 -155
  296. package/tag/Tag.test.js +0 -60
  297. package/tag/types.d.ts +0 -69
  298. package/tag/types.js +0 -5
  299. package/text-input/Icons.d.ts +0 -8
  300. package/text-input/Icons.js +0 -60
  301. package/text-input/Suggestion.d.ts +0 -4
  302. package/text-input/Suggestion.js +0 -84
  303. package/text-input/Suggestions.d.ts +0 -4
  304. package/text-input/Suggestions.js +0 -134
  305. package/text-input/TextInput.d.ts +0 -4
  306. package/text-input/TextInput.js +0 -673
  307. package/text-input/TextInput.stories.tsx +0 -569
  308. package/text-input/TextInput.test.js +0 -1723
  309. package/text-input/types.d.ts +0 -197
  310. package/text-input/types.js +0 -5
  311. package/textarea/Textarea.d.ts +0 -4
  312. package/textarea/Textarea.js +0 -277
  313. package/textarea/Textarea.stories.jsx +0 -216
  314. package/textarea/Textarea.test.js +0 -437
  315. package/textarea/types.d.ts +0 -137
  316. package/textarea/types.js +0 -5
  317. package/toggle-group/ToggleGroup.d.ts +0 -4
  318. package/toggle-group/ToggleGroup.js +0 -218
  319. package/toggle-group/ToggleGroup.stories.tsx +0 -215
  320. package/toggle-group/ToggleGroup.test.js +0 -156
  321. package/toggle-group/types.d.ts +0 -105
  322. package/toggle-group/types.js +0 -5
  323. package/typography/Typography.d.ts +0 -4
  324. package/typography/Typography.js +0 -32
  325. package/typography/Typography.stories.tsx +0 -198
  326. package/typography/types.d.ts +0 -18
  327. package/typography/types.js +0 -5
  328. package/useTheme.d.ts +0 -1235
  329. package/useTheme.js +0 -22
  330. package/useTranslatedLabels.d.ts +0 -85
  331. package/useTranslatedLabels.js +0 -20
  332. package/utils/BaseTypography.d.ts +0 -21
  333. package/utils/BaseTypography.js +0 -108
  334. package/utils/FocusLock.d.ts +0 -13
  335. package/utils/FocusLock.js +0 -139
  336. package/wizard/Wizard.d.ts +0 -4
  337. package/wizard/Wizard.js +0 -285
  338. package/wizard/Wizard.stories.tsx +0 -253
  339. package/wizard/Wizard.test.js +0 -141
  340. package/wizard/types.d.ts +0 -64
  341. package/wizard/types.js +0 -5
@@ -1,4 +0,0 @@
1
- import React from "react";
2
- import { CalendarPropsType } from "./types";
3
- declare const _default: React.MemoExoticComponent<({ selectedDate, innerDate, onInnerDateChange, onDaySelect, today, }: CalendarPropsType) => JSX.Element>;
4
- export default _default;
@@ -1,258 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _typeof = 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 _react = _interopRequireWildcard(require("react"));
17
-
18
- var _styledComponents = _interopRequireDefault(require("styled-components"));
19
-
20
- var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
21
-
22
- var _main = require("../main");
23
-
24
- var _templateObject, _templateObject2, _templateObject3, _templateObject4;
25
-
26
- 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); }
27
-
28
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(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; }
29
-
30
- var getDays = function getDays(innerDate) {
31
- var monthDayCells = [];
32
- var lastMonthNumberOfDays = innerDate.set("month", innerDate.get("month") - 1).endOf("month");
33
- var firstDayOfMonth = innerDate.startOf("month").day() === 0 ? 6 : innerDate.startOf("month").day() - 1;
34
- var daysInMonth = firstDayOfMonth + innerDate.daysInMonth();
35
-
36
- for (var i = 0; i < 42; i++) {
37
- if (i < firstDayOfMonth) {
38
- monthDayCells.push({
39
- day: lastMonthNumberOfDays.get("date") - firstDayOfMonth + i + 1,
40
- month: innerDate.get("month") ? innerDate.get("month") - 1 : 11,
41
- year: innerDate.set("month", innerDate.get("month") - 1).get("year")
42
- });
43
- } else if (i < daysInMonth) {
44
- monthDayCells.push({
45
- day: i - firstDayOfMonth + 1,
46
- month: innerDate.get("month"),
47
- year: innerDate.get("year")
48
- });
49
- } else {
50
- monthDayCells.push({
51
- day: i - daysInMonth + 1,
52
- month: innerDate.get("month") === 11 ? 0 : innerDate.get("month") + 1,
53
- year: innerDate.set("month", innerDate.get("month") + 1).get("year")
54
- });
55
- }
56
- }
57
-
58
- return monthDayCells;
59
- };
60
-
61
- var getDateToFocus = function getDateToFocus(selectedDate, innerDate, today) {
62
- return (selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.get("month")) === innerDate.get("month") && (selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.get("year")) === innerDate.get("year") ? selectedDate : today.get("month") === innerDate.get("month") && today.get("year") === innerDate.get("year") ? today : innerDate.set("date", 1);
63
- };
64
-
65
- var isDaySelected = function isDaySelected(date, selectedDate) {
66
- return (selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.get("month")) === date.month && (selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.get("year")) === date.year && (selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.get("date")) === date.day;
67
- };
68
-
69
- var Calendar = function Calendar(_ref) {
70
- var selectedDate = _ref.selectedDate,
71
- innerDate = _ref.innerDate,
72
- onInnerDateChange = _ref.onInnerDateChange,
73
- onDaySelect = _ref.onDaySelect,
74
- today = _ref.today;
75
-
76
- var _useState = (0, _react.useState)(getDateToFocus(selectedDate, innerDate, today)),
77
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
78
- dateToFocus = _useState2[0],
79
- setDateToFocus = _useState2[1];
80
-
81
- var _useState3 = (0, _react.useState)(false),
82
- _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
83
- isFocusable = _useState4[0],
84
- setIsFocusable = _useState4[1];
85
-
86
- var dayCells = (0, _react.useMemo)(function () {
87
- return getDays(innerDate);
88
- }, [innerDate]);
89
- var translatedLabels = (0, _useTranslatedLabels["default"])();
90
- var weekDays = translatedLabels.calendar.daysShort;
91
-
92
- var onDateClickHandler = function onDateClickHandler(date) {
93
- var newDate = innerDate.set("month", date.month).set("date", date.day);
94
- onDaySelect(newDate);
95
- setDateToFocus(newDate);
96
- };
97
-
98
- var handleOnBlur = function handleOnBlur(event) {
99
- if (!(event !== null && event !== void 0 && event.currentTarget.contains(event.relatedTarget))) {
100
- setDateToFocus(getDateToFocus(selectedDate, innerDate, today));
101
- }
102
- };
103
-
104
- var focusDate = function focusDate(date) {
105
- if (innerDate.get("month") !== date.get("month") || innerDate.get("year") !== date.get("year")) {
106
- onInnerDateChange(date);
107
- }
108
-
109
- setDateToFocus(date);
110
- setIsFocusable(true);
111
- };
112
-
113
- (0, _react.useEffect)(function () {
114
- if (isFocusable) {
115
- var _document$getElementB;
116
-
117
- (_document$getElementB = document.getElementById("day_".concat(dateToFocus.get("date"), "_month").concat(dateToFocus.get("month")))) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.focus();
118
- setIsFocusable(false);
119
- }
120
- }, [dateToFocus, isFocusable]);
121
- (0, _react.useEffect)(function () {
122
- if (dateToFocus.get("month") !== innerDate.get("month") || dateToFocus.get("year") !== innerDate.get("year")) {
123
- setDateToFocus(getDateToFocus(selectedDate, innerDate, today));
124
- }
125
- }, [innerDate, dateToFocus, selectedDate, today]);
126
-
127
- var handleDayKeyboardEvent = function handleDayKeyboardEvent(event, date) {
128
- var dateToFocusTemp = date.month === innerDate.get("month") ? innerDate.set("date", date.day) : innerDate.set("date", date.day).set("month", date.month);
129
-
130
- switch (event.key) {
131
- case "PageUp":
132
- event.preventDefault();
133
- event.shiftKey ? dateToFocusTemp = dateToFocusTemp.set("year", dateToFocusTemp.get("year") - 1) : dateToFocusTemp = dateToFocusTemp.set("month", dateToFocusTemp.get("month") - 1);
134
- focusDate(dateToFocusTemp);
135
- break;
136
-
137
- case "PageDown":
138
- event.preventDefault();
139
- event.shiftKey ? dateToFocusTemp = dateToFocusTemp.set("year", dateToFocusTemp.get("year") + 1) : dateToFocusTemp = dateToFocusTemp.set("month", dateToFocusTemp.get("month") + 1);
140
- focusDate(dateToFocusTemp);
141
- break;
142
-
143
- case "ArrowLeft":
144
- event.preventDefault();
145
- dateToFocusTemp = dateToFocusTemp.set("date", dateToFocusTemp.get("date") - 1);
146
- focusDate(dateToFocusTemp);
147
- break;
148
-
149
- case "ArrowRight":
150
- event.preventDefault();
151
- dateToFocusTemp = dateToFocusTemp.set("date", dateToFocusTemp.get("date") + 1);
152
- focusDate(dateToFocusTemp);
153
- break;
154
-
155
- case "ArrowUp":
156
- event.preventDefault();
157
- dateToFocusTemp = dateToFocusTemp.set("date", dateToFocusTemp.get("date") - 7);
158
- focusDate(dateToFocusTemp);
159
- break;
160
-
161
- case "ArrowDown":
162
- event.preventDefault();
163
- dateToFocusTemp = dateToFocusTemp.set("date", dateToFocusTemp.get("date") + 7);
164
- focusDate(dateToFocusTemp);
165
- break;
166
-
167
- case "Home":
168
- event.preventDefault();
169
- dateToFocus.get("day") !== 0 ? dateToFocusTemp = dateToFocusTemp.day(1) : dateToFocusTemp = innerDate.date(date.day - 1).day(1);
170
- focusDate(dateToFocusTemp);
171
- break;
172
-
173
- case "End":
174
- event.preventDefault();
175
- dateToFocusTemp.get("day") !== 0 && (dateToFocusTemp = dateToFocusTemp.day(7));
176
- focusDate(dateToFocusTemp);
177
- break;
178
-
179
- case " ":
180
- event.preventDefault();
181
- onDaySelect(dateToFocusTemp);
182
- break;
183
- }
184
- };
185
-
186
- return /*#__PURE__*/_react["default"].createElement(CalendarContainer, null, /*#__PURE__*/_react["default"].createElement(_main.DxcFlex, {
187
- alignItems: "center",
188
- justifyContent: "space-between"
189
- }, weekDays.map(function (weekDay) {
190
- return /*#__PURE__*/_react["default"].createElement(WeekHeaderCell, {
191
- key: weekDay
192
- }, weekDay);
193
- })), /*#__PURE__*/_react["default"].createElement(DayCellsContainer, {
194
- onBlur: handleOnBlur
195
- }, dayCells.map(function (date, index) {
196
- return /*#__PURE__*/_react["default"].createElement(DayCell, {
197
- onKeyDown: function onKeyDown(event) {
198
- return handleDayKeyboardEvent(event, date);
199
- },
200
- "aria-label": date.day,
201
- id: "day_".concat(date.day, "_month").concat(date.month),
202
- key: "day_".concat(index),
203
- onClick: function onClick() {
204
- return onDateClickHandler(date);
205
- },
206
- selected: isDaySelected(date, selectedDate),
207
- actualMonth: date.month === innerDate.get("month"),
208
- autoFocus: date.day === dateToFocus.get("date") && date.month === dateToFocus.get("month"),
209
- "aria-selected": isDaySelected(date, selectedDate),
210
- tabIndex: date.day === dateToFocus.get("date") && date.month === dateToFocus.get("month") ? 0 : -1,
211
- isCurrentDay: today.get("date") === date.day && today.get("month") === innerDate.get("month") && today.get("month") === date.month && today.get("year") === innerDate.get("year")
212
- }, date.day);
213
- })));
214
- };
215
-
216
- var CalendarContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: 0px 8px 8px 8px;\n width: 292px;\n font-family: ", ";\n font-size: ", ";\n color: ", ";\n font-weight: ", ";\n"])), function (props) {
217
- return props.theme.dateInput.pickerFontFamily;
218
- }, function (props) {
219
- return props.theme.dateInput.pickerFontSize;
220
- }, function (props) {
221
- return props.theme.dateInput.pickerFontColor;
222
- }, function (props) {
223
- return props.theme.dateInput.pickerFontWeight;
224
- });
225
-
226
- var WeekHeaderCell = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n"])));
227
-
228
- var DayCellsContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n box-sizing: border-box;\n display: flex;\n gap: 4px;\n flex-wrap: wrap;\n justify-content: space-between;\n"])));
229
-
230
- var DayCell = _styledComponents["default"].button(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n justify-content: center;\n align-items: center;\n width: 36px;\n height: 36px;\n padding: 0;\n border: none;\n border-radius: 50%;\n cursor: pointer;\n font-family: ", ";\n font-size: ", ";\n color: ", ";\n font-weight: ", ";\n\n &:focus {\n outline: ", " solid 2px;\n }\n &:hover {\n background-color: ", ";\n color: ", ";\n }\n &:active {\n background-color: ", ";\n color: ", ";\n }\n\n ", "\n background-color: ", ";\n color: ", ";\n"])), function (props) {
231
- return props.theme.dateInput.pickerFontFamily;
232
- }, function (props) {
233
- return props.theme.dateInput.pickerFontSize;
234
- }, function (props) {
235
- return props.theme.dateInput.pickerFontColor;
236
- }, function (props) {
237
- return props.theme.dateInput.pickerFontWeight;
238
- }, function (props) {
239
- return props.theme.dateInput.pickerFocusColor;
240
- }, function (props) {
241
- return props.selected ? props.theme.dateInput.pickerSelectedBackgroundColor : props.theme.dateInput.pickerHoverBackgroundColor;
242
- }, function (props) {
243
- return props.selected ? props.theme.dateInput.pickerSelectedFontColor : props.theme.dateInput.pickerHoverFontColor;
244
- }, function (props) {
245
- return props.theme.dateInput.pickerActiveBackgroundColor;
246
- }, function (props) {
247
- return props.theme.dateInput.pickerActiveFontColor;
248
- }, function (props) {
249
- return props.isCurrentDay && !props.selected && "border: ".concat(props.theme.dateInput.pickerCurrentDateBorderWidth, " solid ").concat(props.theme.dateInput.pickerCurrentDateBorderColor, ";");
250
- }, function (props) {
251
- return props.selected ? props.theme.dateInput.pickerSelectedBackgroundColor : "transparent";
252
- }, function (props) {
253
- return props.selected ? props.theme.dateInput.pickerSelectedFontColor : props.isCurrentDay ? props.theme.dateInput.pickerCurrentDateFontColor : !props.actualMonth ? props.theme.dateInput.pickerNonCurrentMonthFontColor : props.theme.dateInput.pickerFontColor;
254
- });
255
-
256
- var _default = /*#__PURE__*/_react["default"].memo(Calendar);
257
-
258
- exports["default"] = _default;
@@ -1,4 +0,0 @@
1
- import React from "react";
2
- import DateInputPropsType from "./types";
3
- declare const DxcDateInput: React.ForwardRefExoticComponent<DateInputPropsType & React.RefAttributes<HTMLDivElement>>;
4
- export default DxcDateInput;
@@ -1,269 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _typeof = 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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
15
-
16
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
17
-
18
- var _react = _interopRequireWildcard(require("react"));
19
-
20
- var _dayjs = _interopRequireDefault(require("dayjs"));
21
-
22
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
23
-
24
- var _useTheme = _interopRequireDefault(require("../useTheme"));
25
-
26
- var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
27
-
28
- var _TextInput = _interopRequireDefault(require("../text-input/TextInput"));
29
-
30
- var _DatePicker = _interopRequireDefault(require("./DatePicker"));
31
-
32
- var Popover = _interopRequireWildcard(require("@radix-ui/react-popover"));
33
-
34
- var _customParseFormat = _interopRequireDefault(require("dayjs/plugin/customParseFormat"));
35
-
36
- var _uuid = require("uuid");
37
-
38
- var _Icons = require("./Icons");
39
-
40
- var _templateObject;
41
-
42
- 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); }
43
-
44
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(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; }
45
-
46
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
47
-
48
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
49
-
50
- _dayjs["default"].extend(_customParseFormat["default"]);
51
-
52
- var getValueForPicker = function getValueForPicker(value, format) {
53
- return (0, _dayjs["default"])(value, format.toUpperCase(), true);
54
- };
55
-
56
- var getDate = function getDate(value, format, lastValidYear, setLastValidYear) {
57
- if ((value || value === "") && format.toUpperCase().includes("YYYY")) return getValueForPicker(value, format);else {
58
- var newDate = getValueForPicker(value, format);
59
-
60
- if (!lastValidYear) {
61
- if (+newDate.format("YY") < 68) {
62
- setLastValidYear(2000 + +newDate.format("YY"));
63
- newDate = newDate.set("year", 2000 + +newDate.format("YY"));
64
- } else {
65
- setLastValidYear(1900 + +newDate.format("YY"));
66
- newDate = newDate.set("year", 1900 + +newDate.format("YY"));
67
- }
68
- } else {
69
- newDate = newDate.set("year", (lastValidYear <= 1999 ? 1900 : 2000) + +newDate.format("YY"));
70
- }
71
-
72
- return newDate;
73
- }
74
- };
75
-
76
- var DxcDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
77
- var _ref2;
78
-
79
- var label = _ref.label,
80
- name = _ref.name,
81
- _ref$defaultValue = _ref.defaultValue,
82
- defaultValue = _ref$defaultValue === void 0 ? "" : _ref$defaultValue,
83
- value = _ref.value,
84
- _ref$format = _ref.format,
85
- format = _ref$format === void 0 ? "dd-MM-yyyy" : _ref$format,
86
- helperText = _ref.helperText,
87
- _ref$placeholder = _ref.placeholder,
88
- placeholder = _ref$placeholder === void 0 ? false : _ref$placeholder,
89
- clearable = _ref.clearable,
90
- disabled = _ref.disabled,
91
- optional = _ref.optional,
92
- onChange = _ref.onChange,
93
- onBlur = _ref.onBlur,
94
- error = _ref.error,
95
- autocomplete = _ref.autocomplete,
96
- margin = _ref.margin,
97
- size = _ref.size,
98
- tabIndex = _ref.tabIndex;
99
-
100
- var _useState = (0, _react.useState)(defaultValue),
101
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
102
- innerValue = _useState2[0],
103
- setInnerValue = _useState2[1];
104
-
105
- var _useState3 = (0, _react.useState)(false),
106
- _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
107
- isOpen = _useState4[0],
108
- setIsOpen = _useState4[1];
109
-
110
- var _useState5 = (0, _react.useState)("date-picker-".concat((0, _uuid.v4)())),
111
- _useState6 = (0, _slicedToArray2["default"])(_useState5, 1),
112
- calendarId = _useState6[0];
113
-
114
- var _useState7 = (0, _react.useState)(getValueForPicker((_ref2 = value !== null && value !== void 0 ? value : defaultValue) !== null && _ref2 !== void 0 ? _ref2 : "", format)),
115
- _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
116
- dayjsDate = _useState8[0],
117
- setDayjsDate = _useState8[1];
118
-
119
- var _useState9 = (0, _react.useState)(innerValue || value ? !format.toUpperCase().includes("YYYY") && +getValueForPicker(value !== null && value !== void 0 ? value : innerValue, format).format("YY") < 68 ? 2000 : 1900 : undefined),
120
- _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
121
- lastValidYear = _useState10[0],
122
- setLastValidYear = _useState10[1];
123
-
124
- var colorsTheme = (0, _useTheme["default"])();
125
- var translatedLabels = (0, _useTranslatedLabels["default"])();
126
- var dateRef = (0, _react.useRef)(null);
127
- (0, _react.useEffect)(function () {
128
- if (value || value === "") setDayjsDate(getDate(value, format, lastValidYear, setLastValidYear));
129
- }, [value, format, lastValidYear]);
130
- (0, _react.useLayoutEffect)(function () {
131
- if (!disabled) {
132
- var actionButtonRef = dateRef === null || dateRef === void 0 ? void 0 : dateRef.current.querySelector("[title='Open calendar']");
133
- actionButtonRef === null || actionButtonRef === void 0 ? void 0 : actionButtonRef.setAttribute("aria-haspopup", true);
134
- actionButtonRef === null || actionButtonRef === void 0 ? void 0 : actionButtonRef.setAttribute("role", "combobox");
135
- actionButtonRef === null || actionButtonRef === void 0 ? void 0 : actionButtonRef.setAttribute("aria-expanded", isOpen);
136
- actionButtonRef === null || actionButtonRef === void 0 ? void 0 : actionButtonRef.setAttribute("aria-controls", calendarId);
137
- actionButtonRef === null || actionButtonRef === void 0 ? void 0 : actionButtonRef.setAttribute("aria-describedby", calendarId);
138
- }
139
- }, [isOpen, disabled, calendarId]);
140
-
141
- var handleCalendarOnClick = function handleCalendarOnClick(newDate) {
142
- var newValue = newDate.format(format.toUpperCase());
143
-
144
- if (!value) {
145
- setDayjsDate(newDate);
146
- setInnerValue(newValue);
147
- }
148
-
149
- setLastValidYear(newDate.get("year"));
150
- newDate !== null && newDate !== void 0 && newDate.set("day", newDate.get("date")).toJSON() ? onChange === null || onChange === void 0 ? void 0 : onChange({
151
- value: newValue,
152
- date: newDate.toDate()
153
- }) : onChange === null || onChange === void 0 ? void 0 : onChange({
154
- value: newValue
155
- });
156
- };
157
-
158
- var handleIOnChange = function handleIOnChange(_ref3) {
159
- var newValue = _ref3.value,
160
- inputError = _ref3.error;
161
- value !== null && value !== void 0 ? value : setInnerValue(newValue);
162
- var newDate = getDate(newValue, format, lastValidYear, setLastValidYear);
163
- var invalidDateMessage = newValue !== "" && !newDate.isValid() && translatedLabels.dateInput.invalidDateErrorMessage;
164
- var callbackParams = inputError || invalidDateMessage ? {
165
- value: newValue,
166
- error: inputError || invalidDateMessage
167
- } : {
168
- value: newValue
169
- };
170
-
171
- if (newDate.isValid()) {
172
- setDayjsDate(newDate);
173
- onChange === null || onChange === void 0 ? void 0 : onChange(_objectSpread(_objectSpread({}, callbackParams), {}, {
174
- date: newDate.toDate()
175
- }));
176
- } else {
177
- onChange === null || onChange === void 0 ? void 0 : onChange(callbackParams);
178
- setLastValidYear(function (validYear) {
179
- var _dayjsDate$get;
180
-
181
- return (_dayjsDate$get = dayjsDate === null || dayjsDate === void 0 ? void 0 : dayjsDate.get("year")) !== null && _dayjsDate$get !== void 0 ? _dayjsDate$get : validYear;
182
- });
183
- setDayjsDate(null);
184
- }
185
- };
186
-
187
- var handleIOnBlur = function handleIOnBlur(_ref4) {
188
- var value = _ref4.value,
189
- inputError = _ref4.error;
190
- var date = getDate(value, format, lastValidYear, setLastValidYear);
191
- var invalidDateMessage = value !== "" && !date.isValid() && translatedLabels.dateInput.invalidDateErrorMessage;
192
- var callbackParams = inputError || invalidDateMessage ? {
193
- value: value,
194
- error: inputError || invalidDateMessage
195
- } : {
196
- value: value
197
- };
198
- date.isValid() ? onBlur === null || onBlur === void 0 ? void 0 : onBlur(_objectSpread(_objectSpread({}, callbackParams), {}, {
199
- date: date.toDate()
200
- })) : onBlur === null || onBlur === void 0 ? void 0 : onBlur(callbackParams);
201
- };
202
-
203
- var openCalendar = function openCalendar() {
204
- setIsOpen(!isOpen);
205
- };
206
-
207
- var closeCalendar = function closeCalendar() {
208
- setIsOpen(false);
209
- };
210
-
211
- var handleDatePickerEscKeydown = function handleDatePickerEscKeydown(event) {
212
- event.preventDefault();
213
- closeCalendar();
214
- dateRef === null || dateRef === void 0 ? void 0 : dateRef.current.getElementsByTagName("input")[0].focus();
215
- };
216
-
217
- var handleDatePickerOnBlur = function handleDatePickerOnBlur(event) {
218
- if (!(event !== null && event !== void 0 && event.currentTarget.contains(event.relatedTarget))) closeCalendar();
219
- };
220
-
221
- return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
222
- theme: colorsTheme
223
- }, /*#__PURE__*/_react["default"].createElement("div", {
224
- ref: ref
225
- }, /*#__PURE__*/_react["default"].createElement(Popover.Root, {
226
- open: isOpen
227
- }, /*#__PURE__*/_react["default"].createElement(Popover.Trigger, {
228
- asChild: true,
229
- "aria-controls": undefined
230
- }, /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
231
- label: label,
232
- name: name,
233
- defaultValue: defaultValue,
234
- value: value !== null && value !== void 0 ? value : innerValue,
235
- helperText: helperText,
236
- placeholder: placeholder ? format.toUpperCase() : null,
237
- action: {
238
- onClick: openCalendar,
239
- icon: _Icons.calendarIcon,
240
- title: "Open calendar"
241
- },
242
- clearable: clearable,
243
- disabled: disabled,
244
- optional: optional,
245
- onChange: handleIOnChange,
246
- onBlur: handleIOnBlur,
247
- error: error,
248
- autocomplete: autocomplete,
249
- margin: margin,
250
- size: size,
251
- tabIndex: tabIndex,
252
- ref: dateRef
253
- })), /*#__PURE__*/_react["default"].createElement(StyledContent, {
254
- sideOffset: error ? -18 : 2,
255
- align: "end",
256
- "aria-modal": true,
257
- onBlur: handleDatePickerOnBlur,
258
- onEscapeKeyDown: handleDatePickerEscKeydown,
259
- avoidCollisions: false
260
- }, /*#__PURE__*/_react["default"].createElement(_DatePicker["default"], {
261
- id: calendarId,
262
- onDateSelect: handleCalendarOnClick,
263
- date: dayjsDate
264
- })))));
265
- });
266
-
267
- var StyledContent = (0, _styledComponents["default"])(Popover.Content)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n &:focus-visible {\n outline: none;\n }\n"])));
268
- var _default = DxcDateInput;
269
- exports["default"] = _default;