@contentful/f36-datepicker 4.1.0-beta.1 → 4.1.0-beta.4

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