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