@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.
- package/BackgroundColorContext.d.ts +3 -3
- package/BackgroundColorContext.js +12 -2
- package/HalstackContext.d.ts +1330 -7
- package/HalstackContext.js +84 -67
- package/accordion/Accordion.d.ts +1 -1
- package/accordion/Accordion.js +74 -55
- package/accordion/Accordion.stories.tsx +3 -101
- package/accordion/Accordion.test.js +34 -19
- package/accordion/types.d.ts +4 -16
- package/accordion-group/AccordionGroup.d.ts +4 -3
- package/accordion-group/AccordionGroup.js +49 -42
- package/accordion-group/AccordionGroup.stories.tsx +77 -76
- package/accordion-group/AccordionGroup.test.js +62 -54
- package/accordion-group/AccordionGroupAccordion.d.ts +4 -0
- package/accordion-group/AccordionGroupAccordion.js +43 -0
- package/accordion-group/types.d.ts +6 -18
- package/alert/Alert.js +47 -20
- package/alert/Alert.test.js +46 -29
- package/alert/types.d.ts +3 -3
- package/badge/Badge.js +14 -2
- package/badge/types.d.ts +1 -1
- package/bleed/Bleed.js +21 -13
- package/bleed/Bleed.stories.tsx +1 -0
- package/bleed/types.d.ts +2 -2
- package/box/Box.d.ts +1 -1
- package/box/Box.js +33 -33
- package/box/Box.stories.tsx +25 -53
- package/box/Box.test.js +7 -2
- package/box/types.d.ts +3 -15
- package/bulleted-list/BulletedList.js +36 -9
- package/bulleted-list/BulletedList.stories.tsx +7 -1
- package/bulleted-list/types.d.ts +32 -5
- package/button/Button.d.ts +1 -1
- package/button/Button.js +83 -71
- package/button/Button.stories.tsx +4 -4
- package/button/Button.test.js +28 -8
- package/button/types.d.ts +8 -4
- package/card/Card.d.ts +1 -1
- package/card/Card.js +67 -62
- package/card/Card.stories.tsx +12 -42
- package/card/Card.test.js +22 -11
- package/card/types.d.ts +4 -10
- package/checkbox/Checkbox.js +71 -27
- package/checkbox/Checkbox.test.js +60 -33
- package/checkbox/types.d.ts +4 -4
- package/chip/Chip.js +51 -48
- package/chip/Chip.stories.tsx +25 -17
- package/chip/Chip.test.js +29 -17
- package/chip/types.d.ts +4 -4
- package/common/OpenSans.css +68 -80
- package/common/coreTokens.d.ts +146 -0
- package/common/coreTokens.js +167 -0
- package/common/utils.d.ts +1 -0
- package/common/utils.js +8 -3
- package/common/variables.d.ts +226 -175
- package/common/variables.js +956 -1133
- package/date-input/Calendar.js +55 -12
- package/date-input/DateInput.js +82 -35
- package/date-input/DateInput.test.js +351 -164
- package/date-input/DatePicker.js +38 -8
- package/date-input/Icons.js +12 -0
- package/date-input/YearPicker.js +30 -5
- package/date-input/types.d.ts +7 -7
- package/dialog/Dialog.d.ts +1 -1
- package/dialog/Dialog.js +83 -86
- package/dialog/Dialog.stories.tsx +127 -221
- package/dialog/Dialog.test.js +331 -18
- package/dialog/types.d.ts +1 -14
- package/dropdown/Dropdown.js +86 -32
- package/dropdown/Dropdown.test.js +211 -104
- package/dropdown/DropdownMenu.js +22 -8
- package/dropdown/DropdownMenuItem.js +15 -6
- package/dropdown/types.d.ts +8 -8
- package/file-input/FileInput.js +218 -134
- package/file-input/FileInput.test.js +343 -331
- package/file-input/FileItem.js +39 -12
- package/file-input/types.d.ts +10 -10
- package/flex/Flex.js +39 -25
- package/flex/Flex.stories.tsx +35 -26
- package/flex/types.d.ts +74 -9
- package/footer/Footer.d.ts +1 -1
- package/footer/Footer.js +80 -68
- package/footer/Footer.stories.tsx +12 -89
- package/footer/Footer.test.js +47 -40
- package/footer/Icons.js +4 -0
- package/footer/types.d.ts +15 -17
- package/grid/Grid.d.ts +7 -0
- package/grid/Grid.js +91 -0
- package/grid/Grid.stories.tsx +219 -0
- package/grid/types.d.ts +115 -0
- package/header/Header.d.ts +4 -3
- package/header/Header.js +72 -55
- package/header/Header.stories.tsx +7 -71
- package/header/Header.test.js +26 -13
- package/header/Icons.js +4 -0
- package/header/types.d.ts +2 -16
- package/heading/Heading.js +28 -7
- package/heading/Heading.test.js +88 -71
- package/heading/types.d.ts +3 -3
- package/inset/Inset.js +21 -13
- package/inset/Inset.stories.tsx +2 -1
- package/inset/types.d.ts +2 -2
- package/layout/ApplicationLayout.d.ts +5 -5
- package/layout/ApplicationLayout.js +57 -15
- package/layout/Icons.js +10 -0
- package/layout/SidenavContext.d.ts +1 -1
- package/layout/SidenavContext.js +4 -0
- package/layout/types.d.ts +5 -6
- package/link/Link.js +41 -21
- package/link/Link.test.js +42 -26
- package/link/types.d.ts +4 -4
- package/main.d.ts +2 -1
- package/main.js +55 -0
- package/nav-tabs/NavTabs.d.ts +2 -2
- package/nav-tabs/NavTabs.js +43 -16
- package/nav-tabs/NavTabs.stories.tsx +14 -0
- package/nav-tabs/NavTabs.test.js +44 -37
- package/nav-tabs/Tab.js +71 -45
- package/nav-tabs/types.d.ts +10 -11
- package/number-input/NumberInput.js +30 -20
- package/number-input/NumberInput.test.js +249 -113
- package/number-input/NumberInputContext.js +5 -0
- package/number-input/numberInputContextTypes.d.ts +1 -1
- package/number-input/types.d.ts +4 -4
- package/package.json +7 -7
- package/paginator/Icons.js +10 -0
- package/paginator/Paginator.js +39 -17
- package/paginator/Paginator.test.js +156 -104
- package/paginator/types.d.ts +1 -1
- package/paragraph/Paragraph.d.ts +3 -4
- package/paragraph/Paragraph.js +18 -8
- package/password-input/PasswordInput.js +51 -22
- package/password-input/PasswordInput.test.js +94 -51
- package/password-input/types.d.ts +4 -4
- package/progress-bar/ProgressBar.d.ts +2 -2
- package/progress-bar/ProgressBar.js +39 -14
- package/progress-bar/ProgressBar.test.js +53 -36
- package/progress-bar/types.d.ts +4 -3
- package/quick-nav/QuickNav.js +24 -2
- package/quick-nav/types.d.ts +2 -2
- package/radio-group/Radio.js +53 -22
- package/radio-group/RadioGroup.js +84 -41
- package/radio-group/RadioGroup.test.js +288 -186
- package/radio-group/types.d.ts +4 -4
- package/resultsetTable/Icons.js +3 -0
- package/resultsetTable/ResultsetTable.js +56 -21
- package/resultsetTable/ResultsetTable.test.js +75 -42
- package/resultsetTable/types.d.ts +5 -5
- package/select/Icons.js +3 -0
- package/select/Listbox.js +35 -10
- package/select/Option.js +24 -8
- package/select/Select.js +143 -56
- package/select/Select.test.js +839 -456
- package/select/types.d.ts +12 -12
- package/sidenav/Icons.d.ts +7 -0
- package/sidenav/Icons.js +51 -0
- package/sidenav/Sidenav.d.ts +2 -2
- package/sidenav/Sidenav.js +116 -104
- package/sidenav/Sidenav.stories.tsx +60 -60
- package/sidenav/Sidenav.test.js +10 -3
- package/sidenav/types.d.ts +26 -23
- package/slider/Slider.js +84 -38
- package/slider/Slider.test.js +104 -76
- package/slider/types.d.ts +4 -4
- package/spinner/Spinner.js +51 -28
- package/spinner/Spinner.stories.jsx +28 -28
- package/spinner/Spinner.test.js +35 -26
- package/spinner/types.d.ts +3 -3
- package/switch/Switch.js +66 -24
- package/switch/Switch.test.js +97 -52
- package/switch/types.d.ts +4 -4
- package/table/Table.js +22 -4
- package/table/Table.test.js +7 -2
- package/table/types.d.ts +3 -3
- package/tabs/Tab.js +39 -22
- package/tabs/Tabs.js +131 -62
- package/tabs/Tabs.test.js +122 -67
- package/tabs/types.d.ts +8 -8
- package/tag/Tag.js +54 -27
- package/tag/Tag.test.js +31 -20
- package/tag/types.d.ts +7 -7
- package/text-input/Icons.js +3 -0
- package/text-input/Suggestion.js +24 -8
- package/text-input/Suggestions.js +36 -11
- package/text-input/TextInput.js +144 -59
- package/text-input/TextInput.stories.tsx +1 -1
- package/text-input/TextInput.test.js +858 -539
- package/text-input/types.d.ts +9 -9
- package/textarea/Textarea.js +73 -38
- package/textarea/Textarea.test.js +173 -98
- package/textarea/types.d.ts +4 -4
- package/toggle-group/ToggleGroup.d.ts +2 -2
- package/toggle-group/ToggleGroup.js +59 -21
- package/toggle-group/ToggleGroup.test.js +72 -40
- package/toggle-group/types.d.ts +11 -11
- package/typography/Typography.d.ts +2 -2
- package/typography/Typography.js +23 -110
- package/typography/Typography.stories.tsx +1 -1
- package/typography/types.d.ts +1 -1
- package/useTheme.d.ts +1234 -1
- package/useTheme.js +6 -0
- package/useTranslatedLabels.d.ts +84 -2
- package/useTranslatedLabels.js +5 -0
- package/utils/BaseTypography.d.ts +21 -0
- package/utils/BaseTypography.js +108 -0
- package/utils/FocusLock.d.ts +13 -0
- package/utils/FocusLock.js +138 -0
- package/wizard/Wizard.js +47 -13
- package/wizard/Wizard.test.js +81 -54
- package/wizard/types.d.ts +7 -8
- package/card/ice-cream.jpg +0 -0
- package/translatedLabelsType.d.ts +0 -82
- /package/{translatedLabelsType.js → grid/types.js} +0 -0
package/date-input/Calendar.js
CHANGED
|
@@ -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
|
-
|
|
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
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
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
|
-
|
|
60
|
-
|
|
61
|
-
|
|
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
|
-
|
|
64
|
-
|
|
65
|
-
|
|
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
|
-
|
|
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;
|
package/date-input/DateInput.js
CHANGED
|
@@ -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
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
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
|
-
|
|
73
|
-
|
|
74
|
-
|
|
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
|
-
|
|
77
|
-
|
|
78
|
-
|
|
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
|
-
|
|
81
|
-
|
|
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
|
-
|
|
84
|
-
|
|
85
|
-
|
|
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
|
-
|
|
88
|
-
|
|
89
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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;
|