@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/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 {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";
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__*/ (0, $hTedu$css)({
41
- padding: (0, $hTedu$contentfulf36tokens).spacingM
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__*/ (0, $hTedu$css)({
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__*/ (0, $hTedu$css)({
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__*/ (0, $hTedu$css)({
71
- borderRadius: "50%",
72
- cursor: "pointer",
73
- color: (0, $hTedu$contentfulf36tokens).gray900,
42
+ button: /*#__PURE__*/ $hTedu$css({
43
+ borderRadius: '50%',
44
+ cursor: 'pointer',
45
+ color: $hTedu$contentfulf36tokens.gray900,
74
46
  '&[aria-disabled="true"]': {
75
- color: (0, $hTedu$contentfulf36tokens).gray400,
76
- pointerEvents: "none"
47
+ color: $hTedu$contentfulf36tokens.gray400,
48
+ pointerEvents: 'none'
77
49
  },
78
- "&:focus, &:active": {
79
- boxShadow: (0, $hTedu$contentfulf36tokens).glowPrimary
50
+ '&:focus, &:active': {
51
+ boxShadow: $hTedu$contentfulf36tokens.glowPrimary
80
52
  },
81
- "&:focus:not(:focus-visible)": {
82
- boxShadow: "unset"
53
+ '&:focus:not(:focus-visible)': {
54
+ boxShadow: 'unset'
83
55
  },
84
- "&:hover": {
85
- backgroundColor: (0, $hTedu$contentfulf36tokens).gray200
56
+ '&:hover': {
57
+ backgroundColor: $hTedu$contentfulf36tokens.gray200
86
58
  },
87
59
  '&.rdp-day_selected:not([aria-disabled="true"])': {
88
- backgroundColor: (0, $hTedu$contentfulf36tokens).blue600,
89
- color: (0, $hTedu$contentfulf36tokens).colorWhite,
90
- fontWeight: (0, $hTedu$contentfulf36tokens).fontWeightDemiBold
60
+ backgroundColor: $hTedu$contentfulf36tokens.blue600,
61
+ color: $hTedu$contentfulf36tokens.colorWhite,
62
+ fontWeight: $hTedu$contentfulf36tokens.fontWeightDemiBold
91
63
  }
92
64
  }),
93
- months: /*#__PURE__*/ (0, $hTedu$css)({
65
+ months: /*#__PURE__*/ $hTedu$css({
94
66
  name: "k008qs",
95
67
  styles: "display:flex;"
96
68
  }),
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;}"
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__*/ (0, $hTedu$css)({
102
- name: "58awwq",
103
- styles: "width:100%;margin:0;border-collapse:collapse;"
73
+ table: /*#__PURE__*/ $hTedu$css({
74
+ name: "4j630u",
75
+ styles: "margin:0;border-collapse:collapse;"
104
76
  }),
105
- caption: /*#__PURE__*/ (0, $hTedu$css)({
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__*/ (0, $hTedu$css)({
81
+ caption_dropdowns: /*#__PURE__*/ $hTedu$css({
110
82
  name: "rmz4vk",
111
83
  styles: "position:relative;display:inline-flex;"
112
84
  }),
113
- caption_label: /*#__PURE__*/ (0, $hTedu$css)({
114
- position: "relative",
85
+ caption_label: /*#__PURE__*/ $hTedu$css({
86
+ position: 'relative',
115
87
  zIndex: 1,
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"
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__*/ (0, $hTedu$css)({
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__*/ (0, $hTedu$css)({
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__*/ (0, $hTedu$css)({
109
+ nav_button_previous: /*#__PURE__*/ $hTedu$css({
138
110
  name: "8er82g",
139
111
  styles: "margin-right:3px;"
140
112
  }),
141
- dropdown_month: /*#__PURE__*/ (0, $hTedu$css)({
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__*/ (0, $hTedu$css)({
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__*/ (0, $hTedu$css)({
150
- appearance: "none",
151
- position: "absolute",
121
+ dropdown: /*#__PURE__*/ $hTedu$css({
122
+ appearance: 'none',
123
+ position: 'absolute',
152
124
  zIndex: 2,
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
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
- "&:hover:not([disabled]) + div, &:hover:not([disabled]) + div": {
170
- backgroundColor: (0, $hTedu$contentfulf36tokens).gray200
141
+ '&:hover:not([disabled]) + div, &:hover:not([disabled]) + div': {
142
+ backgroundColor: $hTedu$contentfulf36tokens.gray200
171
143
  }
172
144
  }),
173
- dropdown_icon: /*#__PURE__*/ (0, $hTedu$css)({
145
+ dropdown_icon: /*#__PURE__*/ $hTedu$css({
174
146
  name: "1isemmb",
175
147
  styles: "margin-left:8px;"
176
148
  }),
177
- head: /*#__PURE__*/ (0, $hTedu$css)({
149
+ head: /*#__PURE__*/ $hTedu$css({
178
150
  name: "107tt68",
179
151
  styles: "border:0;"
180
152
  }),
181
- head_row: /*#__PURE__*/ (0, $hTedu$css)({
153
+ head_row: /*#__PURE__*/ $hTedu$css({
182
154
  name: "10klw3m",
183
155
  styles: "height:100%;"
184
156
  }),
185
- row: /*#__PURE__*/ (0, $hTedu$css)({
157
+ row: /*#__PURE__*/ $hTedu$css({
186
158
  name: "10klw3m",
187
159
  styles: "height:100%;"
188
160
  }),
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"
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__*/ (0, $hTedu$css)({
168
+ tbody: /*#__PURE__*/ $hTedu$css({
197
169
  name: "107tt68",
198
170
  styles: "border:0;"
199
171
  }),
200
- tfoot: /*#__PURE__*/ (0, $hTedu$css)({
172
+ tfoot: /*#__PURE__*/ $hTedu$css({
201
173
  name: "jgvdrf",
202
174
  styles: "margin:0.5em;"
203
175
  }),
204
- cell: /*#__PURE__*/ (0, $hTedu$css)({
176
+ cell: /*#__PURE__*/ $hTedu$css({
205
177
  name: "1y3chau",
206
178
  styles: "padding:2px;text-align:center;"
207
179
  }),
208
- day: /*#__PURE__*/ (0, $hTedu$css)({
209
- display: "flex",
210
- overflow: "hidden",
211
- alignItems: "center",
212
- justifyContent: "center",
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: "50%",
216
- margin: "auto",
217
- "&.rdp-day_today:not(.rdp-day_outside)": {
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
- "&.rdp-day_today:not(.rdp-day_outside):not(.rdp-day_selected):not(:hover)": {
221
- backgroundColor: (0, $hTedu$contentfulf36tokens).blue100
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__*/ (0, $hTedu$css)({
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 = (0, $8a8549d7899c6d38$export$ffd58b7f6f099a57)();
239
- const { fromDate: fromDate , toDate: toDate , numberOfMonths: numberOfMonths } = (0, $hTedu$useDayPicker)();
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__*/ (0, $hTedu$react).createElement((0, $hTedu$Flex), {
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__*/ (0, $hTedu$react).createElement((0, $hTedu$CaptionDropdowns), props), /*#__PURE__*/ (0, $hTedu$react).createElement((0, $hTedu$CaptionNavigation), props));
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 = (0, $8a8549d7899c6d38$export$ffd58b7f6f099a57)();
256
- const { fromDate: fromDate , toDate: toDate , formatters: { formatCaption: formatCaption } , locale: locale , numberOfMonths: numberOfMonths } = (0, $hTedu$useDayPicker)();
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__*/ (0, $hTedu$react).createElement((0, $hTedu$Heading), {
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: (0, $hTedu$cx)(styles.caption_label, isVisuallyHidden && styles.vhidden)
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 = (0, $8a8549d7899c6d38$export$ffd58b7f6f099a57)();
242
+ const styles = $8a8549d7899c6d38$export$ffd58b7f6f099a57();
272
243
  var _weekStartsOn;
273
- return /*#__PURE__*/ (0, $hTedu$react).createElement((0, $hTedu$DayPicker), {
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: (0, $5d3970620278ffac$export$23682f394b530c50),
279
- CaptionLabel: (0, $def507898477ef08$export$74e13d11a34c00bf),
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 = (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;
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 = (0, $hTedu$useCallback)((value)=>(0, $hTedu$parse)(value, dateFormat, new Date(), {
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] = (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));
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 = (0, $hTedu$useCallback)((e)=>{
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 = (0, $hTedu$useCallback)((date)=>{
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__*/ (0, $hTedu$react).createElement((0, $hTedu$Popover), {
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__*/ (0, $hTedu$react).createElement((0, $hTedu$Popover).Trigger, null, /*#__PURE__*/ (0, $hTedu$react).createElement((0, $hTedu$TextInput).Group, {
349
- className: (0, $hTedu$cx)(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__*/ (0, $hTedu$react).createElement((0, $hTedu$TextInput), {
353
- placeholder: (0, $hTedu$format)(new Date(), dateFormat),
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__*/ (0, $hTedu$react).createElement((0, $hTedu$IconButton), {
329
+ }), /*#__PURE__*/ $hTedu$react.createElement($hTedu$IconButton, {
361
330
  "aria-label": "Use calendar",
362
331
  variant: "secondary",
363
- icon: /*#__PURE__*/ (0, $hTedu$react).createElement((0, $hTedu$CalendarIcon), {
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__*/ (0, $hTedu$react).createElement((0, $hTedu$Popover).Content, null, /*#__PURE__*/ (0, $hTedu$react).createElement((0, $hTedu$reactfocuslock), {
342
+ }))), /*#__PURE__*/ $hTedu$react.createElement($hTedu$Popover.Content, null, /*#__PURE__*/ $hTedu$react.createElement($hTedu$reactfocuslock, {
373
343
  returnFocus: true
374
- }, /*#__PURE__*/ (0, $hTedu$react).createElement((0, $3cc676068e0ce875$export$e1aef45b828286de), {
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, $8558f0ab5a94fd0e$export$7a9a31a911eb9a20 as Day, $8558f0ab5a94fd0e$export$16d0634337daf8ec as DayContent, $8558f0ab5a94fd0e$export$332e9e0d64b1f294 as useDayPicker, $3cc676068e0ce875$export$e1aef45b828286de as Calendar};
362
+ export {$79969cefd37296a5$export$7235422eca03ec90 as Datepicker, $3cc676068e0ce875$export$e1aef45b828286de as Calendar};
393
363
  //# sourceMappingURL=module.js.map