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