@contentful/f36-datepicker 4.1.0-beta.4 → 4.1.0-beta.5
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/README.mdx +2 -2
- package/dist/main.js +132 -159
- package/dist/main.js.map +1 -1
- package/dist/module.js +133 -163
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +3 -7
- package/dist/types.d.ts.map +1 -1
- package/package.json +1 -1
package/dist/module.js
CHANGED
|
@@ -7,29 +7,10 @@ import {TextInput as $hTedu$TextInput} from "@contentful/f36-forms";
|
|
|
7
7
|
import {IconButton as $hTedu$IconButton} from "@contentful/f36-button";
|
|
8
8
|
import {CalendarIcon as $hTedu$CalendarIcon} from "@contentful/f36-icons";
|
|
9
9
|
import $hTedu$contentfulf36tokens from "@contentful/f36-tokens";
|
|
10
|
-
import {
|
|
10
|
+
import {DayPicker as $hTedu$DayPicker, useDayPicker as $hTedu$useDayPicker, CaptionDropdowns as $hTedu$CaptionDropdowns, CaptionNavigation as $hTedu$CaptionNavigation} from "react-day-picker";
|
|
11
11
|
import {Flex as $hTedu$Flex} from "@contentful/f36-core";
|
|
12
12
|
import {Heading as $hTedu$Heading} from "@contentful/f36-typography";
|
|
13
13
|
|
|
14
|
-
function $parcel$export(e, n, v, s) {
|
|
15
|
-
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
16
|
-
}
|
|
17
|
-
function $parcel$exportWildcard(dest, source) {
|
|
18
|
-
Object.keys(source).forEach(function(key) {
|
|
19
|
-
if (key === 'default' || key === '__esModule' || dest.hasOwnProperty(key)) {
|
|
20
|
-
return;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
Object.defineProperty(dest, key, {
|
|
24
|
-
enumerable: true,
|
|
25
|
-
get: function get() {
|
|
26
|
-
return source[key];
|
|
27
|
-
}
|
|
28
|
-
});
|
|
29
|
-
});
|
|
30
|
-
|
|
31
|
-
return dest;
|
|
32
|
-
}
|
|
33
14
|
|
|
34
15
|
|
|
35
16
|
|
|
@@ -37,191 +18,181 @@ function $parcel$exportWildcard(dest, source) {
|
|
|
37
18
|
|
|
38
19
|
const $968b11f2deb5586d$export$ffd58b7f6f099a57 = ()=>{
|
|
39
20
|
return {
|
|
40
|
-
calendar: /*#__PURE__*/
|
|
41
|
-
padding:
|
|
21
|
+
calendar: /*#__PURE__*/ $hTedu$css({
|
|
22
|
+
padding: $hTedu$contentfulf36tokens.spacingM
|
|
42
23
|
})
|
|
43
24
|
};
|
|
44
25
|
};
|
|
45
26
|
|
|
46
27
|
|
|
47
|
-
var $8558f0ab5a94fd0e$exports = {};
|
|
48
|
-
|
|
49
|
-
$parcel$export($8558f0ab5a94fd0e$exports, "Day", () => $8558f0ab5a94fd0e$export$7a9a31a911eb9a20);
|
|
50
|
-
$parcel$export($8558f0ab5a94fd0e$exports, "DayContent", () => $8558f0ab5a94fd0e$export$16d0634337daf8ec);
|
|
51
|
-
$parcel$export($8558f0ab5a94fd0e$exports, "useDayPicker", () => $8558f0ab5a94fd0e$export$332e9e0d64b1f294);
|
|
52
|
-
|
|
53
|
-
var $3cc676068e0ce875$exports = {};
|
|
54
|
-
|
|
55
|
-
$parcel$export($3cc676068e0ce875$exports, "Calendar", () => $3cc676068e0ce875$export$e1aef45b828286de);
|
|
56
28
|
|
|
57
29
|
|
|
58
30
|
|
|
59
31
|
const $8a8549d7899c6d38$var$cellSize = 40;
|
|
60
32
|
const $8a8549d7899c6d38$export$ffd58b7f6f099a57 = ()=>{
|
|
61
33
|
return {
|
|
62
|
-
vhidden: /*#__PURE__*/
|
|
34
|
+
vhidden: /*#__PURE__*/ $hTedu$css({
|
|
63
35
|
name: "986gn8",
|
|
64
36
|
styles: "box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:absolute;top:0;width:1px;height:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);"
|
|
65
37
|
}),
|
|
66
|
-
button_reset: /*#__PURE__*/
|
|
38
|
+
button_reset: /*#__PURE__*/ $hTedu$css({
|
|
67
39
|
name: "sun3y7",
|
|
68
40
|
styles: "appearance:none;position:relative;margin:0;padding:0;border:none;outline:none;background:none;"
|
|
69
41
|
}),
|
|
70
|
-
button: /*#__PURE__*/
|
|
71
|
-
borderRadius:
|
|
72
|
-
cursor:
|
|
73
|
-
color:
|
|
42
|
+
button: /*#__PURE__*/ $hTedu$css({
|
|
43
|
+
borderRadius: '50%',
|
|
44
|
+
cursor: 'pointer',
|
|
45
|
+
color: $hTedu$contentfulf36tokens.gray900,
|
|
74
46
|
'&[aria-disabled="true"]': {
|
|
75
|
-
color:
|
|
76
|
-
pointerEvents:
|
|
47
|
+
color: $hTedu$contentfulf36tokens.gray400,
|
|
48
|
+
pointerEvents: 'none'
|
|
77
49
|
},
|
|
78
|
-
|
|
79
|
-
boxShadow:
|
|
50
|
+
'&:focus, &:active': {
|
|
51
|
+
boxShadow: $hTedu$contentfulf36tokens.glowPrimary
|
|
80
52
|
},
|
|
81
|
-
|
|
82
|
-
boxShadow:
|
|
53
|
+
'&:focus:not(:focus-visible)': {
|
|
54
|
+
boxShadow: 'unset'
|
|
83
55
|
},
|
|
84
|
-
|
|
85
|
-
backgroundColor:
|
|
56
|
+
'&:hover': {
|
|
57
|
+
backgroundColor: $hTedu$contentfulf36tokens.gray200
|
|
86
58
|
},
|
|
87
59
|
'&.rdp-day_selected:not([aria-disabled="true"])': {
|
|
88
|
-
backgroundColor:
|
|
89
|
-
color:
|
|
90
|
-
fontWeight:
|
|
60
|
+
backgroundColor: $hTedu$contentfulf36tokens.blue600,
|
|
61
|
+
color: $hTedu$contentfulf36tokens.colorWhite,
|
|
62
|
+
fontWeight: $hTedu$contentfulf36tokens.fontWeightDemiBold
|
|
91
63
|
}
|
|
92
64
|
}),
|
|
93
|
-
months: /*#__PURE__*/
|
|
65
|
+
months: /*#__PURE__*/ $hTedu$css({
|
|
94
66
|
name: "k008qs",
|
|
95
67
|
styles: "display:flex;"
|
|
96
68
|
}),
|
|
97
|
-
month: /*#__PURE__*/
|
|
98
|
-
name: "
|
|
99
|
-
styles: "
|
|
69
|
+
month: /*#__PURE__*/ $hTedu$css({
|
|
70
|
+
name: "dmltl9",
|
|
71
|
+
styles: "margin:0 1em;&:first-child{margin-left:0;}&:last-child{margin-right:0;}"
|
|
100
72
|
}),
|
|
101
|
-
table: /*#__PURE__*/
|
|
102
|
-
name: "
|
|
103
|
-
styles: "
|
|
73
|
+
table: /*#__PURE__*/ $hTedu$css({
|
|
74
|
+
name: "4j630u",
|
|
75
|
+
styles: "margin:0;border-collapse:collapse;"
|
|
104
76
|
}),
|
|
105
|
-
caption: /*#__PURE__*/
|
|
77
|
+
caption: /*#__PURE__*/ $hTedu$css({
|
|
106
78
|
name: "l6jblq",
|
|
107
79
|
styles: "position:relative;padding:0;text-align:left;.rdp-multiple_months &{display:block;text-align:center;}"
|
|
108
80
|
}),
|
|
109
|
-
caption_dropdowns: /*#__PURE__*/
|
|
81
|
+
caption_dropdowns: /*#__PURE__*/ $hTedu$css({
|
|
110
82
|
name: "rmz4vk",
|
|
111
83
|
styles: "position:relative;display:inline-flex;"
|
|
112
84
|
}),
|
|
113
|
-
caption_label: /*#__PURE__*/
|
|
114
|
-
position:
|
|
85
|
+
caption_label: /*#__PURE__*/ $hTedu$css({
|
|
86
|
+
position: 'relative',
|
|
115
87
|
zIndex: 1,
|
|
116
|
-
display:
|
|
117
|
-
alignItems:
|
|
118
|
-
margin:
|
|
119
|
-
padding: `0 ${
|
|
120
|
-
height:
|
|
121
|
-
whiteSpace:
|
|
122
|
-
fontSize:
|
|
123
|
-
fontWeight:
|
|
124
|
-
borderRadius:
|
|
125
|
-
|
|
126
|
-
marginLeft:
|
|
88
|
+
display: 'inline-flex',
|
|
89
|
+
alignItems: 'center',
|
|
90
|
+
margin: '0',
|
|
91
|
+
padding: `0 ${$hTedu$contentfulf36tokens.spacingXs}`,
|
|
92
|
+
height: '2rem',
|
|
93
|
+
whiteSpace: 'nowrap',
|
|
94
|
+
fontSize: $hTedu$contentfulf36tokens.fontSizeM,
|
|
95
|
+
fontWeight: $hTedu$contentfulf36tokens.fontWeightMedium,
|
|
96
|
+
borderRadius: $hTedu$contentfulf36tokens.borderRadiusMedium,
|
|
97
|
+
'& + &': {
|
|
98
|
+
marginLeft: '3px'
|
|
127
99
|
}
|
|
128
100
|
}),
|
|
129
|
-
nav: /*#__PURE__*/
|
|
101
|
+
nav: /*#__PURE__*/ $hTedu$css({
|
|
130
102
|
name: "doey51",
|
|
131
103
|
styles: "white-space:nowrap;.rdp-multiple_months .rdp-caption_start &{position:absolute;top:50%;left:0;transform:translateY(-50%);}.rdp-multiple_months .rdp-caption_end &{position:absolute;top:50%;right:0;transform:translateY(-50%);}"
|
|
132
104
|
}),
|
|
133
|
-
nav_button: /*#__PURE__*/
|
|
105
|
+
nav_button: /*#__PURE__*/ $hTedu$css({
|
|
134
106
|
name: "17fd5v8",
|
|
135
107
|
styles: "width:2rem;height:2rem;display:inline-flex;align-items:center;justify-content:center;background-color:transparent;"
|
|
136
108
|
}),
|
|
137
|
-
nav_button_previous: /*#__PURE__*/
|
|
109
|
+
nav_button_previous: /*#__PURE__*/ $hTedu$css({
|
|
138
110
|
name: "8er82g",
|
|
139
111
|
styles: "margin-right:3px;"
|
|
140
112
|
}),
|
|
141
|
-
dropdown_month: /*#__PURE__*/
|
|
113
|
+
dropdown_month: /*#__PURE__*/ $hTedu$css({
|
|
142
114
|
name: "datla1",
|
|
143
115
|
styles: "position:relative;display:inline-flex;align-items:center;"
|
|
144
116
|
}),
|
|
145
|
-
dropdown_year: /*#__PURE__*/
|
|
117
|
+
dropdown_year: /*#__PURE__*/ $hTedu$css({
|
|
146
118
|
name: "datla1",
|
|
147
119
|
styles: "position:relative;display:inline-flex;align-items:center;"
|
|
148
120
|
}),
|
|
149
|
-
dropdown: /*#__PURE__*/
|
|
150
|
-
appearance:
|
|
151
|
-
position:
|
|
121
|
+
dropdown: /*#__PURE__*/ $hTedu$css({
|
|
122
|
+
appearance: 'none',
|
|
123
|
+
position: 'absolute',
|
|
152
124
|
zIndex: 2,
|
|
153
|
-
top:
|
|
154
|
-
bottom:
|
|
155
|
-
left:
|
|
156
|
-
width:
|
|
157
|
-
margin:
|
|
158
|
-
padding:
|
|
159
|
-
cursor:
|
|
160
|
-
opacity:
|
|
161
|
-
border:
|
|
162
|
-
backgroundColor:
|
|
163
|
-
fontFamily:
|
|
164
|
-
fontSize:
|
|
165
|
-
lineHeight:
|
|
166
|
-
|
|
167
|
-
boxShadow:
|
|
125
|
+
top: '0',
|
|
126
|
+
bottom: '0',
|
|
127
|
+
left: '0',
|
|
128
|
+
width: '100%',
|
|
129
|
+
margin: '0',
|
|
130
|
+
padding: '0',
|
|
131
|
+
cursor: 'pointer',
|
|
132
|
+
opacity: '0',
|
|
133
|
+
border: 'none',
|
|
134
|
+
backgroundColor: 'transparent',
|
|
135
|
+
fontFamily: 'inherit',
|
|
136
|
+
fontSize: 'inherit',
|
|
137
|
+
lineHeight: 'inherit',
|
|
138
|
+
'&:focus:not([disabled]) + div, &:active:not([disabled]) + div': {
|
|
139
|
+
boxShadow: $hTedu$contentfulf36tokens.glowPrimary
|
|
168
140
|
},
|
|
169
|
-
|
|
170
|
-
backgroundColor:
|
|
141
|
+
'&:hover:not([disabled]) + div, &:hover:not([disabled]) + div': {
|
|
142
|
+
backgroundColor: $hTedu$contentfulf36tokens.gray200
|
|
171
143
|
}
|
|
172
144
|
}),
|
|
173
|
-
dropdown_icon: /*#__PURE__*/
|
|
145
|
+
dropdown_icon: /*#__PURE__*/ $hTedu$css({
|
|
174
146
|
name: "1isemmb",
|
|
175
147
|
styles: "margin-left:8px;"
|
|
176
148
|
}),
|
|
177
|
-
head: /*#__PURE__*/
|
|
149
|
+
head: /*#__PURE__*/ $hTedu$css({
|
|
178
150
|
name: "107tt68",
|
|
179
151
|
styles: "border:0;"
|
|
180
152
|
}),
|
|
181
|
-
head_row: /*#__PURE__*/
|
|
153
|
+
head_row: /*#__PURE__*/ $hTedu$css({
|
|
182
154
|
name: "10klw3m",
|
|
183
155
|
styles: "height:100%;"
|
|
184
156
|
}),
|
|
185
|
-
row: /*#__PURE__*/
|
|
157
|
+
row: /*#__PURE__*/ $hTedu$css({
|
|
186
158
|
name: "10klw3m",
|
|
187
159
|
styles: "height:100%;"
|
|
188
160
|
}),
|
|
189
|
-
head_cell: /*#__PURE__*/
|
|
190
|
-
verticalAlign:
|
|
191
|
-
fontSize:
|
|
192
|
-
fontWeight:
|
|
193
|
-
textAlign:
|
|
194
|
-
height:
|
|
161
|
+
head_cell: /*#__PURE__*/ $hTedu$css({
|
|
162
|
+
verticalAlign: 'middle',
|
|
163
|
+
fontSize: $hTedu$contentfulf36tokens.fontSizeS,
|
|
164
|
+
fontWeight: $hTedu$contentfulf36tokens.fontWeightDemiBold,
|
|
165
|
+
textAlign: 'center',
|
|
166
|
+
height: '32px'
|
|
195
167
|
}),
|
|
196
|
-
tbody: /*#__PURE__*/
|
|
168
|
+
tbody: /*#__PURE__*/ $hTedu$css({
|
|
197
169
|
name: "107tt68",
|
|
198
170
|
styles: "border:0;"
|
|
199
171
|
}),
|
|
200
|
-
tfoot: /*#__PURE__*/
|
|
172
|
+
tfoot: /*#__PURE__*/ $hTedu$css({
|
|
201
173
|
name: "jgvdrf",
|
|
202
174
|
styles: "margin:0.5em;"
|
|
203
175
|
}),
|
|
204
|
-
cell: /*#__PURE__*/
|
|
176
|
+
cell: /*#__PURE__*/ $hTedu$css({
|
|
205
177
|
name: "1y3chau",
|
|
206
178
|
styles: "padding:2px;text-align:center;"
|
|
207
179
|
}),
|
|
208
|
-
day: /*#__PURE__*/
|
|
209
|
-
display:
|
|
210
|
-
overflow:
|
|
211
|
-
alignItems:
|
|
212
|
-
justifyContent:
|
|
180
|
+
day: /*#__PURE__*/ $hTedu$css({
|
|
181
|
+
display: 'flex',
|
|
182
|
+
overflow: 'hidden',
|
|
183
|
+
alignItems: 'center',
|
|
184
|
+
justifyContent: 'center',
|
|
213
185
|
width: `${$8a8549d7899c6d38$var$cellSize / 16}rem`,
|
|
214
186
|
height: `${$8a8549d7899c6d38$var$cellSize / 16}rem`,
|
|
215
|
-
borderRadius:
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
fontWeight: (0, $hTedu$contentfulf36tokens).fontWeightDemiBold
|
|
187
|
+
borderRadius: '50%',
|
|
188
|
+
'&.rdp-day_today:not(.rdp-day_outside)': {
|
|
189
|
+
fontWeight: $hTedu$contentfulf36tokens.fontWeightDemiBold
|
|
219
190
|
},
|
|
220
|
-
|
|
221
|
-
backgroundColor:
|
|
191
|
+
'&.rdp-day_today:not(.rdp-day_outside):not(.rdp-day_selected):not(:hover)': {
|
|
192
|
+
backgroundColor: $hTedu$contentfulf36tokens.blue100
|
|
222
193
|
}
|
|
223
194
|
}),
|
|
224
|
-
nav_icon: /*#__PURE__*/
|
|
195
|
+
nav_icon: /*#__PURE__*/ $hTedu$css({
|
|
225
196
|
name: "1ghomkw",
|
|
226
197
|
styles: "width:0.625rem;"
|
|
227
198
|
})
|
|
@@ -235,14 +206,14 @@ const $8a8549d7899c6d38$export$ffd58b7f6f099a57 = ()=>{
|
|
|
235
206
|
|
|
236
207
|
|
|
237
208
|
const $5d3970620278ffac$export$23682f394b530c50 = (props)=>{
|
|
238
|
-
const styles =
|
|
239
|
-
const { fromDate: fromDate , toDate: toDate , numberOfMonths: numberOfMonths } =
|
|
209
|
+
const styles = $8a8549d7899c6d38$export$ffd58b7f6f099a57();
|
|
210
|
+
const { fromDate: fromDate , toDate: toDate , numberOfMonths: numberOfMonths } = $hTedu$useDayPicker();
|
|
240
211
|
const isDropdownsVisible = Boolean(fromDate && toDate && numberOfMonths === 1);
|
|
241
|
-
return /*#__PURE__*/
|
|
212
|
+
return /*#__PURE__*/ $hTedu$react.createElement($hTedu$Flex, {
|
|
242
213
|
alignItems: "center",
|
|
243
214
|
justifyContent: "space-between",
|
|
244
215
|
className: styles.caption
|
|
245
|
-
}, isDropdownsVisible && /*#__PURE__*/
|
|
216
|
+
}, isDropdownsVisible && /*#__PURE__*/ $hTedu$react.createElement($hTedu$CaptionDropdowns, props), /*#__PURE__*/ $hTedu$react.createElement($hTedu$CaptionNavigation, props));
|
|
246
217
|
};
|
|
247
218
|
|
|
248
219
|
|
|
@@ -252,15 +223,15 @@ const $5d3970620278ffac$export$23682f394b530c50 = (props)=>{
|
|
|
252
223
|
|
|
253
224
|
|
|
254
225
|
const $def507898477ef08$export$74e13d11a34c00bf = (props)=>{
|
|
255
|
-
const styles =
|
|
256
|
-
const { fromDate: fromDate , toDate: toDate , formatters: { formatCaption: formatCaption } , locale: locale , numberOfMonths: numberOfMonths } =
|
|
226
|
+
const styles = $8a8549d7899c6d38$export$ffd58b7f6f099a57();
|
|
227
|
+
const { fromDate: fromDate , toDate: toDate , formatters: { formatCaption: formatCaption } , locale: locale , numberOfMonths: numberOfMonths } = $hTedu$useDayPicker();
|
|
257
228
|
const isVisuallyHidden = Boolean(fromDate && toDate && numberOfMonths === 1);
|
|
258
|
-
return /*#__PURE__*/
|
|
229
|
+
return /*#__PURE__*/ $hTedu$react.createElement($hTedu$Heading, {
|
|
259
230
|
as: "h2",
|
|
260
231
|
"aria-live": "polite",
|
|
261
232
|
"aria-atomic": "true",
|
|
262
233
|
id: props.id,
|
|
263
|
-
className:
|
|
234
|
+
className: $hTedu$cx(styles.caption_label, isVisuallyHidden && styles.vhidden)
|
|
264
235
|
}, formatCaption(props.displayMonth, {
|
|
265
236
|
locale: locale
|
|
266
237
|
}));
|
|
@@ -268,26 +239,21 @@ const $def507898477ef08$export$74e13d11a34c00bf = (props)=>{
|
|
|
268
239
|
|
|
269
240
|
|
|
270
241
|
function $3cc676068e0ce875$export$e1aef45b828286de(props) {
|
|
271
|
-
const styles =
|
|
242
|
+
const styles = $8a8549d7899c6d38$export$ffd58b7f6f099a57();
|
|
272
243
|
var _weekStartsOn;
|
|
273
|
-
return /*#__PURE__*/
|
|
244
|
+
return /*#__PURE__*/ $hTedu$react.createElement($hTedu$DayPicker, {
|
|
274
245
|
...props,
|
|
275
246
|
weekStartsOn: (_weekStartsOn = props.weekStartsOn) !== null && _weekStartsOn !== void 0 ? _weekStartsOn : 1,
|
|
276
247
|
classNames: styles,
|
|
277
248
|
components: {
|
|
278
|
-
Caption:
|
|
279
|
-
CaptionLabel:
|
|
249
|
+
Caption: $5d3970620278ffac$export$23682f394b530c50,
|
|
250
|
+
CaptionLabel: $def507898477ef08$export$74e13d11a34c00bf,
|
|
280
251
|
...props.components
|
|
281
252
|
}
|
|
282
253
|
});
|
|
283
254
|
}
|
|
284
255
|
|
|
285
256
|
|
|
286
|
-
const $8558f0ab5a94fd0e$export$7a9a31a911eb9a20 = (0, $hTedu$Day);
|
|
287
|
-
const $8558f0ab5a94fd0e$export$16d0634337daf8ec = (0, $hTedu$DayContent);
|
|
288
|
-
const $8558f0ab5a94fd0e$export$332e9e0d64b1f294 = (0, $hTedu$useDayPicker);
|
|
289
|
-
$parcel$exportWildcard($8558f0ab5a94fd0e$exports, $3cc676068e0ce875$exports);
|
|
290
|
-
|
|
291
257
|
|
|
292
258
|
|
|
293
259
|
|
|
@@ -295,33 +261,35 @@ $parcel$exportWildcard($8558f0ab5a94fd0e$exports, $3cc676068e0ce875$exports);
|
|
|
295
261
|
|
|
296
262
|
|
|
297
263
|
function $79969cefd37296a5$export$7235422eca03ec90(props) {
|
|
298
|
-
const styles =
|
|
299
|
-
const { testId: testId =
|
|
300
|
-
const isDateValid =
|
|
301
|
-
if (
|
|
302
|
-
if (fromDate &&
|
|
303
|
-
if (toDate && date.getTime() >
|
|
264
|
+
const styles = $968b11f2deb5586d$export$ffd58b7f6f099a57();
|
|
265
|
+
const { testId: testId = 'cf-ui-datepicker' , className: className , style: style , inputProps: inputProps , popoverProps: popoverProps , selected: selected , onSelect: onSelect , fromDate: fromDate , toDate: toDate , locale: locale , dateFormat: dateFormat = 'dd LLL yyyy' , defaultIsOpen: defaultIsOpen , ...otherProps } = props;
|
|
266
|
+
const isDateValid = $hTedu$useCallback((date)=>{
|
|
267
|
+
if (!$hTedu$isValid(date)) return false;
|
|
268
|
+
if (fromDate && $hTedu$startOfDay(fromDate).getTime() > date.getTime()) return false;
|
|
269
|
+
if (toDate && date.getTime() > $hTedu$endOfDay(toDate).getTime()) return false;
|
|
304
270
|
return true;
|
|
305
271
|
}, [
|
|
306
272
|
fromDate,
|
|
307
273
|
toDate
|
|
308
274
|
]);
|
|
309
|
-
const parseInputDate =
|
|
275
|
+
const parseInputDate = $hTedu$useCallback((value)=>$hTedu$parse(value, dateFormat, new Date(), {
|
|
310
276
|
locale: locale
|
|
311
|
-
})
|
|
277
|
+
})
|
|
278
|
+
, [
|
|
312
279
|
locale,
|
|
313
280
|
dateFormat
|
|
314
281
|
]);
|
|
315
|
-
const [isPopoverOpen, setIsPopoverOpen] =
|
|
316
|
-
const [inputValue, setInputValue] =
|
|
317
|
-
|
|
318
|
-
|
|
282
|
+
const [isPopoverOpen, setIsPopoverOpen] = $hTedu$useState(defaultIsOpen);
|
|
283
|
+
const [inputValue, setInputValue] = $hTedu$useState(()=>selected ? $hTedu$format(selected, dateFormat) : ''
|
|
284
|
+
);
|
|
285
|
+
$hTedu$useEffect(()=>{
|
|
286
|
+
if (selected && selected.getTime() !== parseInputDate(inputValue).getTime()) setInputValue($hTedu$format(selected, dateFormat));
|
|
319
287
|
// we want to run this hook only when `selected` prop changes
|
|
320
288
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
321
289
|
}, [
|
|
322
290
|
selected
|
|
323
291
|
]);
|
|
324
|
-
const handleInputChange =
|
|
292
|
+
const handleInputChange = $hTedu$useCallback((e)=>{
|
|
325
293
|
setInputValue(e.currentTarget.value);
|
|
326
294
|
const date = parseInputDate(e.currentTarget.value);
|
|
327
295
|
if (isDateValid(date)) onSelect(date);
|
|
@@ -331,7 +299,7 @@ function $79969cefd37296a5$export$7235422eca03ec90(props) {
|
|
|
331
299
|
parseInputDate,
|
|
332
300
|
isDateValid
|
|
333
301
|
]);
|
|
334
|
-
const handleDaySelect =
|
|
302
|
+
const handleDaySelect = $hTedu$useCallback((date)=>{
|
|
335
303
|
if (date && isDateValid(date)) {
|
|
336
304
|
onSelect(date);
|
|
337
305
|
setIsPopoverOpen(false);
|
|
@@ -341,37 +309,39 @@ function $79969cefd37296a5$export$7235422eca03ec90(props) {
|
|
|
341
309
|
isDateValid
|
|
342
310
|
]);
|
|
343
311
|
const isTextInputValueInvalid = inputValue && !isDateValid(parseInputDate(inputValue));
|
|
344
|
-
return /*#__PURE__*/
|
|
312
|
+
return /*#__PURE__*/ $hTedu$react.createElement($hTedu$Popover, {
|
|
345
313
|
isOpen: isPopoverOpen,
|
|
346
|
-
onClose: ()=>setIsPopoverOpen(false)
|
|
314
|
+
onClose: ()=>setIsPopoverOpen(false)
|
|
315
|
+
,
|
|
347
316
|
...popoverProps
|
|
348
|
-
}, /*#__PURE__*/
|
|
349
|
-
className:
|
|
317
|
+
}, /*#__PURE__*/ $hTedu$react.createElement($hTedu$Popover.Trigger, null, /*#__PURE__*/ $hTedu$react.createElement($hTedu$TextInput.Group, {
|
|
318
|
+
className: $hTedu$cx(className),
|
|
350
319
|
style: style,
|
|
351
320
|
testId: testId
|
|
352
|
-
}, /*#__PURE__*/
|
|
353
|
-
placeholder:
|
|
321
|
+
}, /*#__PURE__*/ $hTedu$react.createElement($hTedu$TextInput, {
|
|
322
|
+
placeholder: $hTedu$format(new Date(), dateFormat),
|
|
354
323
|
value: inputValue,
|
|
355
324
|
onChange: handleInputChange,
|
|
356
325
|
isInvalid: (inputProps === null || inputProps === void 0 ? void 0 : inputProps.isInvalid) || isTextInputValueInvalid,
|
|
357
326
|
"aria-label": "Enter date",
|
|
358
327
|
testId: "cf-ui-datepicker-input",
|
|
359
328
|
...inputProps
|
|
360
|
-
}), /*#__PURE__*/
|
|
329
|
+
}), /*#__PURE__*/ $hTedu$react.createElement($hTedu$IconButton, {
|
|
361
330
|
"aria-label": "Use calendar",
|
|
362
331
|
variant: "secondary",
|
|
363
|
-
icon: /*#__PURE__*/
|
|
332
|
+
icon: /*#__PURE__*/ $hTedu$react.createElement($hTedu$CalendarIcon, {
|
|
364
333
|
"aria-label": "calendar",
|
|
365
334
|
variant: "muted"
|
|
366
335
|
}),
|
|
367
336
|
onClick: ()=>{
|
|
368
|
-
setIsPopoverOpen((prevState)=>!prevState
|
|
337
|
+
setIsPopoverOpen((prevState)=>!prevState
|
|
338
|
+
);
|
|
369
339
|
},
|
|
370
340
|
isDisabled: inputProps === null || inputProps === void 0 ? void 0 : inputProps.isDisabled,
|
|
371
341
|
testId: "cf-ui-datepicker-button"
|
|
372
|
-
}))), /*#__PURE__*/
|
|
342
|
+
}))), /*#__PURE__*/ $hTedu$react.createElement($hTedu$Popover.Content, null, /*#__PURE__*/ $hTedu$react.createElement($hTedu$reactfocuslock, {
|
|
373
343
|
returnFocus: true
|
|
374
|
-
}, /*#__PURE__*/
|
|
344
|
+
}, /*#__PURE__*/ $hTedu$react.createElement($3cc676068e0ce875$export$e1aef45b828286de, {
|
|
375
345
|
...otherProps,
|
|
376
346
|
className: styles.calendar,
|
|
377
347
|
mode: "single",
|
|
@@ -389,5 +359,5 @@ function $79969cefd37296a5$export$7235422eca03ec90(props) {
|
|
|
389
359
|
|
|
390
360
|
|
|
391
361
|
|
|
392
|
-
export {$79969cefd37296a5$export$7235422eca03ec90 as Datepicker, $
|
|
362
|
+
export {$79969cefd37296a5$export$7235422eca03ec90 as Datepicker, $3cc676068e0ce875$export$e1aef45b828286de as Calendar};
|
|
393
363
|
//# sourceMappingURL=module.js.map
|