@dxc-technology/halstack-react 0.0.0-9bd9511 → 0.0.0-9c20370

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 (213) hide show
  1. package/BackgroundColorContext.d.ts +3 -3
  2. package/BackgroundColorContext.js +12 -2
  3. package/HalstackContext.d.ts +1330 -7
  4. package/HalstackContext.js +84 -67
  5. package/accordion/Accordion.d.ts +1 -1
  6. package/accordion/Accordion.js +74 -55
  7. package/accordion/Accordion.stories.tsx +3 -101
  8. package/accordion/Accordion.test.js +34 -19
  9. package/accordion/types.d.ts +4 -16
  10. package/accordion-group/AccordionGroup.d.ts +4 -3
  11. package/accordion-group/AccordionGroup.js +49 -42
  12. package/accordion-group/AccordionGroup.stories.tsx +77 -76
  13. package/accordion-group/AccordionGroup.test.js +62 -54
  14. package/accordion-group/AccordionGroupAccordion.d.ts +4 -0
  15. package/accordion-group/AccordionGroupAccordion.js +43 -0
  16. package/accordion-group/types.d.ts +6 -18
  17. package/alert/Alert.js +47 -20
  18. package/alert/Alert.test.js +46 -29
  19. package/alert/types.d.ts +3 -3
  20. package/badge/Badge.js +14 -2
  21. package/badge/types.d.ts +1 -1
  22. package/bleed/Bleed.js +21 -13
  23. package/bleed/Bleed.stories.tsx +1 -0
  24. package/bleed/types.d.ts +2 -2
  25. package/box/Box.d.ts +1 -1
  26. package/box/Box.js +33 -33
  27. package/box/Box.stories.tsx +25 -53
  28. package/box/Box.test.js +7 -2
  29. package/box/types.d.ts +3 -15
  30. package/bulleted-list/BulletedList.js +36 -9
  31. package/bulleted-list/BulletedList.stories.tsx +7 -1
  32. package/bulleted-list/types.d.ts +32 -5
  33. package/button/Button.d.ts +1 -1
  34. package/button/Button.js +83 -71
  35. package/button/Button.stories.tsx +4 -4
  36. package/button/Button.test.js +28 -8
  37. package/button/types.d.ts +8 -4
  38. package/card/Card.d.ts +1 -1
  39. package/card/Card.js +67 -62
  40. package/card/Card.stories.tsx +12 -42
  41. package/card/Card.test.js +22 -11
  42. package/card/types.d.ts +4 -10
  43. package/checkbox/Checkbox.js +71 -27
  44. package/checkbox/Checkbox.test.js +60 -33
  45. package/checkbox/types.d.ts +4 -4
  46. package/chip/Chip.js +51 -48
  47. package/chip/Chip.stories.tsx +25 -17
  48. package/chip/Chip.test.js +29 -17
  49. package/chip/types.d.ts +4 -4
  50. package/common/OpenSans.css +68 -80
  51. package/common/coreTokens.d.ts +146 -0
  52. package/common/coreTokens.js +167 -0
  53. package/common/utils.d.ts +1 -0
  54. package/common/utils.js +8 -3
  55. package/common/variables.d.ts +226 -175
  56. package/common/variables.js +956 -1133
  57. package/date-input/Calendar.js +55 -12
  58. package/date-input/DateInput.js +82 -35
  59. package/date-input/DateInput.test.js +351 -164
  60. package/date-input/DatePicker.js +38 -8
  61. package/date-input/Icons.js +12 -0
  62. package/date-input/YearPicker.js +30 -5
  63. package/date-input/types.d.ts +7 -7
  64. package/dialog/Dialog.d.ts +1 -1
  65. package/dialog/Dialog.js +83 -86
  66. package/dialog/Dialog.stories.tsx +127 -221
  67. package/dialog/Dialog.test.js +331 -18
  68. package/dialog/types.d.ts +1 -14
  69. package/dropdown/Dropdown.js +86 -32
  70. package/dropdown/Dropdown.test.js +211 -104
  71. package/dropdown/DropdownMenu.js +22 -8
  72. package/dropdown/DropdownMenuItem.js +15 -6
  73. package/dropdown/types.d.ts +8 -8
  74. package/file-input/FileInput.js +218 -134
  75. package/file-input/FileInput.test.js +343 -331
  76. package/file-input/FileItem.js +39 -12
  77. package/file-input/types.d.ts +10 -10
  78. package/flex/Flex.js +39 -25
  79. package/flex/Flex.stories.tsx +35 -26
  80. package/flex/types.d.ts +74 -9
  81. package/footer/Footer.d.ts +1 -1
  82. package/footer/Footer.js +80 -68
  83. package/footer/Footer.stories.tsx +12 -89
  84. package/footer/Footer.test.js +47 -40
  85. package/footer/Icons.js +4 -0
  86. package/footer/types.d.ts +15 -17
  87. package/grid/Grid.d.ts +7 -0
  88. package/grid/Grid.js +91 -0
  89. package/grid/Grid.stories.tsx +219 -0
  90. package/grid/types.d.ts +115 -0
  91. package/header/Header.d.ts +4 -3
  92. package/header/Header.js +72 -55
  93. package/header/Header.stories.tsx +7 -71
  94. package/header/Header.test.js +26 -13
  95. package/header/Icons.js +4 -0
  96. package/header/types.d.ts +2 -16
  97. package/heading/Heading.js +28 -7
  98. package/heading/Heading.test.js +88 -71
  99. package/heading/types.d.ts +3 -3
  100. package/inset/Inset.js +21 -13
  101. package/inset/Inset.stories.tsx +2 -1
  102. package/inset/types.d.ts +2 -2
  103. package/layout/ApplicationLayout.d.ts +5 -5
  104. package/layout/ApplicationLayout.js +57 -15
  105. package/layout/Icons.js +10 -0
  106. package/layout/SidenavContext.d.ts +1 -1
  107. package/layout/SidenavContext.js +4 -0
  108. package/layout/types.d.ts +5 -6
  109. package/link/Link.js +41 -21
  110. package/link/Link.test.js +42 -26
  111. package/link/types.d.ts +4 -4
  112. package/main.d.ts +2 -1
  113. package/main.js +55 -0
  114. package/nav-tabs/NavTabs.d.ts +2 -2
  115. package/nav-tabs/NavTabs.js +43 -16
  116. package/nav-tabs/NavTabs.stories.tsx +14 -0
  117. package/nav-tabs/NavTabs.test.js +44 -37
  118. package/nav-tabs/Tab.js +71 -45
  119. package/nav-tabs/types.d.ts +10 -11
  120. package/number-input/NumberInput.js +30 -20
  121. package/number-input/NumberInput.test.js +249 -113
  122. package/number-input/NumberInputContext.js +5 -0
  123. package/number-input/numberInputContextTypes.d.ts +1 -1
  124. package/number-input/types.d.ts +4 -4
  125. package/package.json +7 -7
  126. package/paginator/Icons.js +10 -0
  127. package/paginator/Paginator.js +39 -17
  128. package/paginator/Paginator.test.js +156 -104
  129. package/paginator/types.d.ts +1 -1
  130. package/paragraph/Paragraph.d.ts +3 -4
  131. package/paragraph/Paragraph.js +18 -8
  132. package/password-input/PasswordInput.js +51 -22
  133. package/password-input/PasswordInput.test.js +94 -51
  134. package/password-input/types.d.ts +4 -4
  135. package/progress-bar/ProgressBar.d.ts +2 -2
  136. package/progress-bar/ProgressBar.js +39 -14
  137. package/progress-bar/ProgressBar.test.js +53 -36
  138. package/progress-bar/types.d.ts +4 -3
  139. package/quick-nav/QuickNav.js +24 -2
  140. package/quick-nav/types.d.ts +2 -2
  141. package/radio-group/Radio.js +53 -22
  142. package/radio-group/RadioGroup.js +84 -41
  143. package/radio-group/RadioGroup.test.js +288 -186
  144. package/radio-group/types.d.ts +4 -4
  145. package/resultsetTable/Icons.js +3 -0
  146. package/resultsetTable/ResultsetTable.js +56 -21
  147. package/resultsetTable/ResultsetTable.test.js +75 -42
  148. package/resultsetTable/types.d.ts +5 -5
  149. package/select/Icons.js +3 -0
  150. package/select/Listbox.js +35 -10
  151. package/select/Option.js +24 -8
  152. package/select/Select.js +143 -56
  153. package/select/Select.test.js +839 -456
  154. package/select/types.d.ts +12 -12
  155. package/sidenav/Icons.d.ts +7 -0
  156. package/sidenav/Icons.js +51 -0
  157. package/sidenav/Sidenav.d.ts +2 -2
  158. package/sidenav/Sidenav.js +116 -104
  159. package/sidenav/Sidenav.stories.tsx +60 -60
  160. package/sidenav/Sidenav.test.js +10 -3
  161. package/sidenav/types.d.ts +26 -23
  162. package/slider/Slider.js +84 -38
  163. package/slider/Slider.test.js +104 -76
  164. package/slider/types.d.ts +4 -4
  165. package/spinner/Spinner.js +51 -28
  166. package/spinner/Spinner.stories.jsx +28 -28
  167. package/spinner/Spinner.test.js +35 -26
  168. package/spinner/types.d.ts +3 -3
  169. package/switch/Switch.js +66 -24
  170. package/switch/Switch.test.js +97 -52
  171. package/switch/types.d.ts +4 -4
  172. package/table/Table.js +22 -4
  173. package/table/Table.test.js +7 -2
  174. package/table/types.d.ts +3 -3
  175. package/tabs/Tab.js +39 -22
  176. package/tabs/Tabs.js +131 -62
  177. package/tabs/Tabs.test.js +122 -67
  178. package/tabs/types.d.ts +8 -8
  179. package/tag/Tag.js +54 -27
  180. package/tag/Tag.test.js +31 -20
  181. package/tag/types.d.ts +7 -7
  182. package/text-input/Icons.js +3 -0
  183. package/text-input/Suggestion.js +24 -8
  184. package/text-input/Suggestions.js +36 -11
  185. package/text-input/TextInput.js +144 -59
  186. package/text-input/TextInput.stories.tsx +1 -1
  187. package/text-input/TextInput.test.js +858 -539
  188. package/text-input/types.d.ts +9 -9
  189. package/textarea/Textarea.js +73 -38
  190. package/textarea/Textarea.test.js +173 -98
  191. package/textarea/types.d.ts +4 -4
  192. package/toggle-group/ToggleGroup.d.ts +2 -2
  193. package/toggle-group/ToggleGroup.js +59 -21
  194. package/toggle-group/ToggleGroup.test.js +72 -40
  195. package/toggle-group/types.d.ts +11 -11
  196. package/typography/Typography.d.ts +2 -2
  197. package/typography/Typography.js +23 -110
  198. package/typography/Typography.stories.tsx +1 -1
  199. package/typography/types.d.ts +1 -1
  200. package/useTheme.d.ts +1234 -1
  201. package/useTheme.js +6 -0
  202. package/useTranslatedLabels.d.ts +84 -2
  203. package/useTranslatedLabels.js +5 -0
  204. package/utils/BaseTypography.d.ts +21 -0
  205. package/utils/BaseTypography.js +108 -0
  206. package/utils/FocusLock.d.ts +13 -0
  207. package/utils/FocusLock.js +138 -0
  208. package/wizard/Wizard.js +47 -13
  209. package/wizard/Wizard.test.js +81 -54
  210. package/wizard/types.d.ts +7 -8
  211. package/card/ice-cream.jpg +0 -0
  212. package/translatedLabelsType.d.ts +0 -82
  213. /package/{translatedLabelsType.js → grid/types.js} +0 -0
@@ -1,25 +1,38 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
4
5
  var _typeof = require("@babel/runtime/helpers/typeof");
6
+
5
7
  Object.defineProperty(exports, "__esModule", {
6
8
  value: true
7
9
  });
8
10
  exports["default"] = void 0;
11
+
9
12
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
13
+
10
14
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
15
+
11
16
  var _react = _interopRequireWildcard(require("react"));
17
+
12
18
  var _styledComponents = _interopRequireDefault(require("styled-components"));
19
+
13
20
  var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
14
- var _main = require("../main");
21
+
22
+ var _Flex = _interopRequireDefault(require("../flex/Flex"));
23
+
15
24
  var _templateObject, _templateObject2, _templateObject3, _templateObject4;
25
+
16
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
+
17
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
+
18
30
  var getDays = function getDays(innerDate) {
19
31
  var monthDayCells = [];
20
32
  var lastMonthNumberOfDays = innerDate.set("month", innerDate.get("month") - 1).endOf("month");
21
33
  var firstDayOfMonth = innerDate.startOf("month").day() === 0 ? 6 : innerDate.startOf("month").day() - 1;
22
34
  var daysInMonth = firstDayOfMonth + innerDate.daysInMonth();
35
+
23
36
  for (var i = 0; i < 42; i++) {
24
37
  if (i < firstDayOfMonth) {
25
38
  monthDayCells.push({
@@ -41,53 +54,66 @@ var getDays = function getDays(innerDate) {
41
54
  });
42
55
  }
43
56
  }
57
+
44
58
  return monthDayCells;
45
59
  };
60
+
46
61
  var getDateToFocus = function getDateToFocus(selectedDate, innerDate, today) {
47
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);
48
63
  };
64
+
49
65
  var isDaySelected = function isDaySelected(date, selectedDate) {
50
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;
51
67
  };
68
+
52
69
  var Calendar = function Calendar(_ref) {
53
70
  var selectedDate = _ref.selectedDate,
54
- innerDate = _ref.innerDate,
55
- onInnerDateChange = _ref.onInnerDateChange,
56
- onDaySelect = _ref.onDaySelect,
57
- today = _ref.today;
71
+ innerDate = _ref.innerDate,
72
+ onInnerDateChange = _ref.onInnerDateChange,
73
+ onDaySelect = _ref.onDaySelect,
74
+ today = _ref.today;
75
+
58
76
  var _useState = (0, _react.useState)(getDateToFocus(selectedDate, innerDate, today)),
59
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
60
- dateToFocus = _useState2[0],
61
- setDateToFocus = _useState2[1];
77
+ _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
78
+ dateToFocus = _useState2[0],
79
+ setDateToFocus = _useState2[1];
80
+
62
81
  var _useState3 = (0, _react.useState)(false),
63
- _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
64
- isFocusable = _useState4[0],
65
- setIsFocusable = _useState4[1];
82
+ _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
83
+ isFocusable = _useState4[0],
84
+ setIsFocusable = _useState4[1];
85
+
66
86
  var dayCells = (0, _react.useMemo)(function () {
67
87
  return getDays(innerDate);
68
88
  }, [innerDate]);
69
89
  var translatedLabels = (0, _useTranslatedLabels["default"])();
70
90
  var weekDays = translatedLabels.calendar.daysShort;
91
+
71
92
  var onDateClickHandler = function onDateClickHandler(date) {
72
93
  var newDate = innerDate.set("month", date.month).set("date", date.day);
73
94
  onDaySelect(newDate);
74
95
  setDateToFocus(newDate);
75
96
  };
97
+
76
98
  var handleOnBlur = function handleOnBlur(event) {
77
99
  if (!(event !== null && event !== void 0 && event.currentTarget.contains(event.relatedTarget))) {
78
100
  setDateToFocus(getDateToFocus(selectedDate, innerDate, today));
79
101
  }
80
102
  };
103
+
81
104
  var focusDate = function focusDate(date) {
82
105
  if (innerDate.get("month") !== date.get("month") || innerDate.get("year") !== date.get("year")) {
83
106
  onInnerDateChange(date);
84
107
  }
108
+
85
109
  setDateToFocus(date);
86
110
  setIsFocusable(true);
87
111
  };
112
+
88
113
  (0, _react.useEffect)(function () {
89
114
  if (isFocusable) {
90
115
  var _document$getElementB;
116
+
91
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();
92
118
  setIsFocusable(false);
93
119
  }
@@ -97,56 +123,67 @@ var Calendar = function Calendar(_ref) {
97
123
  setDateToFocus(getDateToFocus(selectedDate, innerDate, today));
98
124
  }
99
125
  }, [innerDate, dateToFocus, selectedDate, today]);
126
+
100
127
  var handleDayKeyboardEvent = function handleDayKeyboardEvent(event, date) {
101
128
  var dateToFocusTemp = date.month === innerDate.get("month") ? innerDate.set("date", date.day) : innerDate.set("date", date.day).set("month", date.month);
129
+
102
130
  switch (event.key) {
103
131
  case "PageUp":
104
132
  event.preventDefault();
105
133
  event.shiftKey ? dateToFocusTemp = dateToFocusTemp.set("year", dateToFocusTemp.get("year") - 1) : dateToFocusTemp = dateToFocusTemp.set("month", dateToFocusTemp.get("month") - 1);
106
134
  focusDate(dateToFocusTemp);
107
135
  break;
136
+
108
137
  case "PageDown":
109
138
  event.preventDefault();
110
139
  event.shiftKey ? dateToFocusTemp = dateToFocusTemp.set("year", dateToFocusTemp.get("year") + 1) : dateToFocusTemp = dateToFocusTemp.set("month", dateToFocusTemp.get("month") + 1);
111
140
  focusDate(dateToFocusTemp);
112
141
  break;
142
+
113
143
  case "ArrowLeft":
114
144
  event.preventDefault();
115
145
  dateToFocusTemp = dateToFocusTemp.set("date", dateToFocusTemp.get("date") - 1);
116
146
  focusDate(dateToFocusTemp);
117
147
  break;
148
+
118
149
  case "ArrowRight":
119
150
  event.preventDefault();
120
151
  dateToFocusTemp = dateToFocusTemp.set("date", dateToFocusTemp.get("date") + 1);
121
152
  focusDate(dateToFocusTemp);
122
153
  break;
154
+
123
155
  case "ArrowUp":
124
156
  event.preventDefault();
125
157
  dateToFocusTemp = dateToFocusTemp.set("date", dateToFocusTemp.get("date") - 7);
126
158
  focusDate(dateToFocusTemp);
127
159
  break;
160
+
128
161
  case "ArrowDown":
129
162
  event.preventDefault();
130
163
  dateToFocusTemp = dateToFocusTemp.set("date", dateToFocusTemp.get("date") + 7);
131
164
  focusDate(dateToFocusTemp);
132
165
  break;
166
+
133
167
  case "Home":
134
168
  event.preventDefault();
135
169
  dateToFocus.get("day") !== 0 ? dateToFocusTemp = dateToFocusTemp.day(1) : dateToFocusTemp = innerDate.date(date.day - 1).day(1);
136
170
  focusDate(dateToFocusTemp);
137
171
  break;
172
+
138
173
  case "End":
139
174
  event.preventDefault();
140
175
  dateToFocusTemp.get("day") !== 0 && (dateToFocusTemp = dateToFocusTemp.day(7));
141
176
  focusDate(dateToFocusTemp);
142
177
  break;
178
+
143
179
  case " ":
144
180
  event.preventDefault();
145
181
  onDaySelect(dateToFocusTemp);
146
182
  break;
147
183
  }
148
184
  };
149
- return /*#__PURE__*/_react["default"].createElement(CalendarContainer, null, /*#__PURE__*/_react["default"].createElement(_main.DxcFlex, {
185
+
186
+ return /*#__PURE__*/_react["default"].createElement(CalendarContainer, null, /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
150
187
  alignItems: "center",
151
188
  justifyContent: "space-between"
152
189
  }, weekDays.map(function (weekDay) {
@@ -175,6 +212,7 @@ var Calendar = function Calendar(_ref) {
175
212
  }, date.day);
176
213
  })));
177
214
  };
215
+
178
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) {
179
217
  return props.theme.dateInput.pickerFontFamily;
180
218
  }, function (props) {
@@ -184,8 +222,11 @@ var CalendarContainer = _styledComponents["default"].div(_templateObject || (_te
184
222
  }, function (props) {
185
223
  return props.theme.dateInput.pickerFontWeight;
186
224
  });
225
+
187
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
+
188
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
+
189
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) {
190
231
  return props.theme.dateInput.pickerFontFamily;
191
232
  }, function (props) {
@@ -211,5 +252,7 @@ var DayCell = _styledComponents["default"].button(_templateObject4 || (_template
211
252
  }, function (props) {
212
253
  return props.selected ? props.theme.dateInput.pickerSelectedFontColor : props.isCurrentDay ? props.theme.dateInput.pickerCurrentDateFontColor : !props.actualMonth ? props.theme.dateInput.pickerNonCurrentMonthFontColor : props.theme.dateInput.pickerFontColor;
213
254
  });
255
+
214
256
  var _default = /*#__PURE__*/_react["default"].memo(Calendar);
257
+
215
258
  exports["default"] = _default;
@@ -1,37 +1,62 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
4
5
  var _typeof = require("@babel/runtime/helpers/typeof");
6
+
5
7
  Object.defineProperty(exports, "__esModule", {
6
8
  value: true
7
9
  });
8
10
  exports["default"] = void 0;
11
+
9
12
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
13
+
10
14
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
15
+
11
16
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
17
+
12
18
  var _react = _interopRequireWildcard(require("react"));
19
+
13
20
  var _dayjs = _interopRequireDefault(require("dayjs"));
21
+
14
22
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
23
+
15
24
  var _useTheme = _interopRequireDefault(require("../useTheme"));
25
+
16
26
  var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
27
+
17
28
  var _TextInput = _interopRequireDefault(require("../text-input/TextInput"));
29
+
18
30
  var _DatePicker = _interopRequireDefault(require("./DatePicker"));
31
+
19
32
  var Popover = _interopRequireWildcard(require("@radix-ui/react-popover"));
33
+
20
34
  var _customParseFormat = _interopRequireDefault(require("dayjs/plugin/customParseFormat"));
35
+
21
36
  var _uuid = require("uuid");
37
+
22
38
  var _Icons = require("./Icons");
39
+
23
40
  var _templateObject;
41
+
24
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
+
25
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
+
26
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
+
27
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
+
28
50
  _dayjs["default"].extend(_customParseFormat["default"]);
51
+
29
52
  var getValueForPicker = function getValueForPicker(value, format) {
30
53
  return (0, _dayjs["default"])(value, format.toUpperCase(), true);
31
54
  };
55
+
32
56
  var getDate = function getDate(value, format, lastValidYear, setLastValidYear) {
33
57
  if ((value || value === "") && format.toUpperCase().includes("YYYY")) return getValueForPicker(value, format);else {
34
58
  var newDate = getValueForPicker(value, format);
59
+
35
60
  if (!lastValidYear) {
36
61
  if (+newDate.format("YY") < 68) {
37
62
  setLastValidYear(2000 + +newDate.format("YY"));
@@ -43,50 +68,59 @@ var getDate = function getDate(value, format, lastValidYear, setLastValidYear) {
43
68
  } else {
44
69
  newDate = newDate.set("year", (lastValidYear <= 1999 ? 1900 : 2000) + +newDate.format("YY"));
45
70
  }
71
+
46
72
  return newDate;
47
73
  }
48
74
  };
75
+
49
76
  var DxcDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
50
77
  var _ref2;
78
+
51
79
  var label = _ref.label,
52
- name = _ref.name,
53
- _ref$defaultValue = _ref.defaultValue,
54
- defaultValue = _ref$defaultValue === void 0 ? "" : _ref$defaultValue,
55
- value = _ref.value,
56
- _ref$format = _ref.format,
57
- format = _ref$format === void 0 ? "dd-MM-yyyy" : _ref$format,
58
- helperText = _ref.helperText,
59
- _ref$placeholder = _ref.placeholder,
60
- placeholder = _ref$placeholder === void 0 ? false : _ref$placeholder,
61
- clearable = _ref.clearable,
62
- disabled = _ref.disabled,
63
- optional = _ref.optional,
64
- onChange = _ref.onChange,
65
- onBlur = _ref.onBlur,
66
- error = _ref.error,
67
- autocomplete = _ref.autocomplete,
68
- margin = _ref.margin,
69
- size = _ref.size,
70
- tabIndex = _ref.tabIndex;
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
+
71
100
  var _useState = (0, _react.useState)(defaultValue),
72
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
73
- innerValue = _useState2[0],
74
- setInnerValue = _useState2[1];
101
+ _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
102
+ innerValue = _useState2[0],
103
+ setInnerValue = _useState2[1];
104
+
75
105
  var _useState3 = (0, _react.useState)(false),
76
- _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
77
- isOpen = _useState4[0],
78
- setIsOpen = _useState4[1];
106
+ _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
107
+ isOpen = _useState4[0],
108
+ setIsOpen = _useState4[1];
109
+
79
110
  var _useState5 = (0, _react.useState)("date-picker-".concat((0, _uuid.v4)())),
80
- _useState6 = (0, _slicedToArray2["default"])(_useState5, 1),
81
- calendarId = _useState6[0];
111
+ _useState6 = (0, _slicedToArray2["default"])(_useState5, 1),
112
+ calendarId = _useState6[0];
113
+
82
114
  var _useState7 = (0, _react.useState)(getValueForPicker((_ref2 = value !== null && value !== void 0 ? value : defaultValue) !== null && _ref2 !== void 0 ? _ref2 : "", format)),
83
- _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
84
- dayjsDate = _useState8[0],
85
- setDayjsDate = _useState8[1];
115
+ _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
116
+ dayjsDate = _useState8[0],
117
+ setDayjsDate = _useState8[1];
118
+
86
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),
87
- _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
88
- lastValidYear = _useState10[0],
89
- setLastValidYear = _useState10[1];
120
+ _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
121
+ lastValidYear = _useState10[0],
122
+ setLastValidYear = _useState10[1];
123
+
90
124
  var colorsTheme = (0, _useTheme["default"])();
91
125
  var translatedLabels = (0, _useTranslatedLabels["default"])();
92
126
  var dateRef = (0, _react.useRef)(null);
@@ -103,12 +137,15 @@ var DxcDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
103
137
  actionButtonRef === null || actionButtonRef === void 0 ? void 0 : actionButtonRef.setAttribute("aria-describedby", calendarId);
104
138
  }
105
139
  }, [isOpen, disabled, calendarId]);
140
+
106
141
  var handleCalendarOnClick = function handleCalendarOnClick(newDate) {
107
142
  var newValue = newDate.format(format.toUpperCase());
143
+
108
144
  if (!value) {
109
145
  setDayjsDate(newDate);
110
146
  setInnerValue(newValue);
111
147
  }
148
+
112
149
  setLastValidYear(newDate.get("year"));
113
150
  newDate !== null && newDate !== void 0 && newDate.set("day", newDate.get("date")).toJSON() ? onChange === null || onChange === void 0 ? void 0 : onChange({
114
151
  value: newValue,
@@ -117,9 +154,10 @@ var DxcDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
117
154
  value: newValue
118
155
  });
119
156
  };
157
+
120
158
  var handleIOnChange = function handleIOnChange(_ref3) {
121
159
  var newValue = _ref3.value,
122
- inputError = _ref3.error;
160
+ inputError = _ref3.error;
123
161
  value !== null && value !== void 0 ? value : setInnerValue(newValue);
124
162
  var newDate = getDate(newValue, format, lastValidYear, setLastValidYear);
125
163
  var invalidDateMessage = newValue !== "" && !newDate.isValid() && translatedLabels.dateInput.invalidDateErrorMessage;
@@ -129,6 +167,7 @@ var DxcDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
129
167
  } : {
130
168
  value: newValue
131
169
  };
170
+
132
171
  if (newDate.isValid()) {
133
172
  setDayjsDate(newDate);
134
173
  onChange === null || onChange === void 0 ? void 0 : onChange(_objectSpread(_objectSpread({}, callbackParams), {}, {
@@ -138,14 +177,16 @@ var DxcDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
138
177
  onChange === null || onChange === void 0 ? void 0 : onChange(callbackParams);
139
178
  setLastValidYear(function (validYear) {
140
179
  var _dayjsDate$get;
180
+
141
181
  return (_dayjsDate$get = dayjsDate === null || dayjsDate === void 0 ? void 0 : dayjsDate.get("year")) !== null && _dayjsDate$get !== void 0 ? _dayjsDate$get : validYear;
142
182
  });
143
183
  setDayjsDate(null);
144
184
  }
145
185
  };
186
+
146
187
  var handleIOnBlur = function handleIOnBlur(_ref4) {
147
188
  var value = _ref4.value,
148
- inputError = _ref4.error;
189
+ inputError = _ref4.error;
149
190
  var date = getDate(value, format, lastValidYear, setLastValidYear);
150
191
  var invalidDateMessage = value !== "" && !date.isValid() && translatedLabels.dateInput.invalidDateErrorMessage;
151
192
  var callbackParams = inputError || invalidDateMessage ? {
@@ -158,20 +199,25 @@ var DxcDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
158
199
  date: date.toDate()
159
200
  })) : onBlur === null || onBlur === void 0 ? void 0 : onBlur(callbackParams);
160
201
  };
202
+
161
203
  var openCalendar = function openCalendar() {
162
204
  setIsOpen(!isOpen);
163
205
  };
206
+
164
207
  var closeCalendar = function closeCalendar() {
165
208
  setIsOpen(false);
166
209
  };
210
+
167
211
  var handleDatePickerEscKeydown = function handleDatePickerEscKeydown(event) {
168
212
  event.preventDefault();
169
213
  closeCalendar();
170
214
  dateRef === null || dateRef === void 0 ? void 0 : dateRef.current.getElementsByTagName("input")[0].focus();
171
215
  };
216
+
172
217
  var handleDatePickerOnBlur = function handleDatePickerOnBlur(event) {
173
218
  if (!(event !== null && event !== void 0 && event.currentTarget.contains(event.relatedTarget))) closeCalendar();
174
219
  };
220
+
175
221
  return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
176
222
  theme: colorsTheme
177
223
  }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -217,6 +263,7 @@ var DxcDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
217
263
  date: dayjsDate
218
264
  })))));
219
265
  });
266
+
220
267
  var StyledContent = (0, _styledComponents["default"])(Popover.Content)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n &:focus-visible {\n outline: none;\n }\n"])));
221
268
  var _default = DxcDateInput;
222
269
  exports["default"] = _default;