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