@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.
Files changed (9) hide show
  1. package/README.mdx +17 -0
  2. package/dist/main.js +167 -139
  3. package/dist/main.js.map +1 -1
  4. package/dist/module.js +171 -140
  5. package/dist/module.js.map +1 -1
  6. package/dist/types.d.ts +15 -3
  7. package/dist/types.d.ts.map +1 -1
  8. package/package.json +9 -9
  9. package/CHANGELOG.md +0 -35
package/README.mdx CHANGED
@@ -54,6 +54,14 @@ Invalid: "Please enter a valid date!"
54
54
 
55
55
  ```
56
56
 
57
+ ### Wrapped in FormControl
58
+
59
+ You can use Datepicker with the [FormControl](/components/form-control) in order to enhance layout with input label, help text or validation message.
60
+
61
+ ```jsx file=./examples/Datepicker/WithFormControl.tsx
62
+
63
+ ```
64
+
57
65
  ### Open by default
58
66
 
59
67
  Open the dropdown and display the Calendar by default without user interaction
@@ -62,6 +70,15 @@ Open the dropdown and display the Calendar by default without user interaction
62
70
 
63
71
  ```
64
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
+
65
82
  ## Props (API reference)
66
83
 
67
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,177 +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: /*#__PURE__*/ $bMnqh$emotion.css({
127
- appearance: 'none',
128
- position: 'absolute',
150
+ dropdown_year: /*#__PURE__*/ (0, $bMnqh$emotion.css)({
151
+ name: "datla1",
152
+ styles: "position:relative;display:inline-flex;align-items:center;"
153
+ }),
154
+ dropdown: /*#__PURE__*/ (0, $bMnqh$emotion.css)({
155
+ appearance: "none",
156
+ position: "absolute",
129
157
  zIndex: 2,
130
- top: '0',
131
- bottom: '0',
132
- left: '0',
133
- width: '100%',
134
- margin: '0',
135
- padding: '0',
136
- cursor: 'pointer',
137
- opacity: '0',
138
- border: 'none',
139
- backgroundColor: 'transparent',
140
- fontFamily: 'inherit',
141
- fontSize: 'inherit',
142
- lineHeight: 'inherit',
143
- '&:focus:not([disabled]) + div, &:active:not([disabled]) + div': {
144
- 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
145
173
  },
146
- '&:hover:not([disabled]) + div, &:hover:not([disabled]) + div': {
147
- backgroundColor: ($parcel$interopDefault($bMnqh$contentfulf36tokens)).gray200
174
+ "&:hover:not([disabled]) + div, &:hover:not([disabled]) + div": {
175
+ backgroundColor: (0, ($parcel$interopDefault($bMnqh$contentfulf36tokens))).gray200
148
176
  }
149
177
  }),
150
- dropdown_icon: /*#__PURE__*/ $bMnqh$emotion.css({
178
+ dropdown_icon: /*#__PURE__*/ (0, $bMnqh$emotion.css)({
151
179
  name: "1isemmb",
152
180
  styles: "margin-left:8px;"
153
181
  }),
154
- head: /*#__PURE__*/ $bMnqh$emotion.css({
182
+ head: /*#__PURE__*/ (0, $bMnqh$emotion.css)({
155
183
  name: "107tt68",
156
184
  styles: "border:0;"
157
185
  }),
158
- head_row: /*#__PURE__*/ $bMnqh$emotion.css({
186
+ head_row: /*#__PURE__*/ (0, $bMnqh$emotion.css)({
159
187
  name: "10klw3m",
160
188
  styles: "height:100%;"
161
189
  }),
162
- row: /*#__PURE__*/ $bMnqh$emotion.css({
190
+ row: /*#__PURE__*/ (0, $bMnqh$emotion.css)({
163
191
  name: "10klw3m",
164
192
  styles: "height:100%;"
165
193
  }),
166
- head_cell: /*#__PURE__*/ $bMnqh$emotion.css({
167
- verticalAlign: 'middle',
168
- fontSize: ($parcel$interopDefault($bMnqh$contentfulf36tokens)).fontSizeS,
169
- fontWeight: ($parcel$interopDefault($bMnqh$contentfulf36tokens)).fontWeightDemiBold,
170
- textAlign: 'center',
171
- 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"
172
200
  }),
173
- tbody: /*#__PURE__*/ $bMnqh$emotion.css({
201
+ tbody: /*#__PURE__*/ (0, $bMnqh$emotion.css)({
174
202
  name: "107tt68",
175
203
  styles: "border:0;"
176
204
  }),
177
- tfoot: /*#__PURE__*/ $bMnqh$emotion.css({
205
+ tfoot: /*#__PURE__*/ (0, $bMnqh$emotion.css)({
178
206
  name: "jgvdrf",
179
207
  styles: "margin:0.5em;"
180
208
  }),
181
- cell: /*#__PURE__*/ $bMnqh$emotion.css({
209
+ cell: /*#__PURE__*/ (0, $bMnqh$emotion.css)({
182
210
  name: "1y3chau",
183
211
  styles: "padding:2px;text-align:center;"
184
212
  }),
185
- day: /*#__PURE__*/ $bMnqh$emotion.css({
186
- display: 'flex',
187
- overflow: 'hidden',
188
- alignItems: 'center',
189
- justifyContent: 'center',
213
+ day: /*#__PURE__*/ (0, $bMnqh$emotion.css)({
214
+ display: "flex",
215
+ overflow: "hidden",
216
+ alignItems: "center",
217
+ justifyContent: "center",
190
218
  width: `${$ca92f136b31cadb2$var$cellSize / 16}rem`,
191
219
  height: `${$ca92f136b31cadb2$var$cellSize / 16}rem`,
192
- borderRadius: '50%',
193
- '&.rdp-day_today:not(.rdp-day_outside)': {
194
- 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
195
224
  },
196
- '&.rdp-day_today:not(.rdp-day_outside):not(.rdp-day_selected):not(:hover)': {
197
- 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
198
227
  }
199
228
  }),
200
- nav_icon: /*#__PURE__*/ $bMnqh$emotion.css({
229
+ nav_icon: /*#__PURE__*/ (0, $bMnqh$emotion.css)({
201
230
  name: "1ghomkw",
202
231
  styles: "width:0.625rem;"
203
232
  })
@@ -211,14 +240,14 @@ const $ca92f136b31cadb2$export$ffd58b7f6f099a57 = ()=>{
211
240
 
212
241
 
213
242
  const $7dd04d8685a518d7$export$23682f394b530c50 = (props)=>{
214
- const styles = $ca92f136b31cadb2$export$ffd58b7f6f099a57();
215
- 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)();
216
245
  const isDropdownsVisible = Boolean(fromDate && toDate && numberOfMonths === 1);
217
- return /*#__PURE__*/ ($parcel$interopDefault($bMnqh$react)).createElement($bMnqh$contentfulf36core.Flex, {
246
+ return /*#__PURE__*/ (0, ($parcel$interopDefault($bMnqh$react))).createElement((0, $bMnqh$contentfulf36core.Flex), {
218
247
  alignItems: "center",
219
248
  justifyContent: "space-between",
220
249
  className: styles.caption
221
- }, 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));
222
251
  };
223
252
 
224
253
 
@@ -228,15 +257,15 @@ const $7dd04d8685a518d7$export$23682f394b530c50 = (props)=>{
228
257
 
229
258
 
230
259
  const $7a9f09b2c8cda9ba$export$74e13d11a34c00bf = (props)=>{
231
- const styles = $ca92f136b31cadb2$export$ffd58b7f6f099a57();
232
- 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)();
233
262
  const isVisuallyHidden = Boolean(fromDate && toDate && numberOfMonths === 1);
234
- return /*#__PURE__*/ ($parcel$interopDefault($bMnqh$react)).createElement($bMnqh$contentfulf36typography.Heading, {
263
+ return /*#__PURE__*/ (0, ($parcel$interopDefault($bMnqh$react))).createElement((0, $bMnqh$contentfulf36typography.Heading), {
235
264
  as: "h2",
236
265
  "aria-live": "polite",
237
266
  "aria-atomic": "true",
238
267
  id: props.id,
239
- className: $bMnqh$emotion.cx(styles.caption_label, isVisuallyHidden && styles.vhidden)
268
+ className: (0, $bMnqh$emotion.cx)(styles.caption_label, isVisuallyHidden && styles.vhidden)
240
269
  }, formatCaption(props.displayMonth, {
241
270
  locale: locale
242
271
  }));
@@ -244,21 +273,26 @@ const $7a9f09b2c8cda9ba$export$74e13d11a34c00bf = (props)=>{
244
273
 
245
274
 
246
275
  function $fcd3f98a88933011$export$e1aef45b828286de(props) {
247
- const styles = $ca92f136b31cadb2$export$ffd58b7f6f099a57();
276
+ const styles = (0, $ca92f136b31cadb2$export$ffd58b7f6f099a57)();
248
277
  var _weekStartsOn;
249
- return /*#__PURE__*/ ($parcel$interopDefault($bMnqh$react)).createElement($bMnqh$reactdaypicker.DayPicker, {
278
+ return /*#__PURE__*/ (0, ($parcel$interopDefault($bMnqh$react))).createElement((0, $bMnqh$reactdaypicker.DayPicker), {
250
279
  ...props,
251
280
  weekStartsOn: (_weekStartsOn = props.weekStartsOn) !== null && _weekStartsOn !== void 0 ? _weekStartsOn : 1,
252
281
  classNames: styles,
253
282
  components: {
254
- Caption: $7dd04d8685a518d7$export$23682f394b530c50,
255
- CaptionLabel: $7a9f09b2c8cda9ba$export$74e13d11a34c00bf,
283
+ Caption: (0, $7dd04d8685a518d7$export$23682f394b530c50),
284
+ CaptionLabel: (0, $7a9f09b2c8cda9ba$export$74e13d11a34c00bf),
256
285
  ...props.components
257
286
  }
258
287
  });
259
288
  }
260
289
 
261
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
+
262
296
 
263
297
 
264
298
 
@@ -266,35 +300,33 @@ function $fcd3f98a88933011$export$e1aef45b828286de(props) {
266
300
 
267
301
 
268
302
  function $af2068a878c80fd7$export$7235422eca03ec90(props) {
269
- const styles = $ceebd8c575fa61b7$export$ffd58b7f6f099a57();
270
- 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;
271
- const isDateValid = $bMnqh$react.useCallback((date)=>{
272
- if (!$bMnqh$datefns.isValid(date)) return false;
273
- if (fromDate && $bMnqh$datefns.startOfDay(fromDate).getTime() > date.getTime()) return false;
274
- 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;
275
309
  return true;
276
310
  }, [
277
311
  fromDate,
278
312
  toDate
279
313
  ]);
280
- 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(), {
281
315
  locale: locale
282
- })
283
- , [
316
+ }), [
284
317
  locale,
285
318
  dateFormat
286
319
  ]);
287
- const [isPopoverOpen, setIsPopoverOpen] = $bMnqh$react.useState(defaultIsOpen);
288
- const [inputValue, setInputValue] = $bMnqh$react.useState(()=>selected ? $bMnqh$datefns.format(selected, dateFormat) : ''
289
- );
290
- $bMnqh$react.useEffect(()=>{
291
- 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));
292
324
  // we want to run this hook only when `selected` prop changes
293
325
  // eslint-disable-next-line react-hooks/exhaustive-deps
294
326
  }, [
295
327
  selected
296
328
  ]);
297
- const handleInputChange = $bMnqh$react.useCallback((e)=>{
329
+ const handleInputChange = (0, $bMnqh$react.useCallback)((e)=>{
298
330
  setInputValue(e.currentTarget.value);
299
331
  const date = parseInputDate(e.currentTarget.value);
300
332
  if (isDateValid(date)) onSelect(date);
@@ -304,7 +336,7 @@ function $af2068a878c80fd7$export$7235422eca03ec90(props) {
304
336
  parseInputDate,
305
337
  isDateValid
306
338
  ]);
307
- const handleDaySelect = $bMnqh$react.useCallback((date)=>{
339
+ const handleDaySelect = (0, $bMnqh$react.useCallback)((date)=>{
308
340
  if (date && isDateValid(date)) {
309
341
  onSelect(date);
310
342
  setIsPopoverOpen(false);
@@ -314,42 +346,37 @@ function $af2068a878c80fd7$export$7235422eca03ec90(props) {
314
346
  isDateValid
315
347
  ]);
316
348
  const isTextInputValueInvalid = inputValue && !isDateValid(parseInputDate(inputValue));
317
- return /*#__PURE__*/ ($parcel$interopDefault($bMnqh$react)).createElement($bMnqh$contentfulf36popover.Popover, {
349
+ return /*#__PURE__*/ (0, ($parcel$interopDefault($bMnqh$react))).createElement((0, $bMnqh$contentfulf36popover.Popover), {
318
350
  isOpen: isPopoverOpen,
319
- onClose: ()=>setIsPopoverOpen(false)
320
- ,
321
- usePortal: usePortal
322
- }, /*#__PURE__*/ ($parcel$interopDefault($bMnqh$react)).createElement($bMnqh$contentfulf36popover.Popover.Trigger, null, /*#__PURE__*/ ($parcel$interopDefault($bMnqh$react)).createElement($bMnqh$contentfulf36forms.TextInput.Group, {
323
- className: $bMnqh$emotion.cx(className),
351
+ onClose: ()=>setIsPopoverOpen(false),
352
+ ...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),
324
355
  style: style,
325
356
  testId: testId
326
- }, /*#__PURE__*/ ($parcel$interopDefault($bMnqh$react)).createElement($bMnqh$contentfulf36forms.TextInput, {
327
- 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),
328
359
  value: inputValue,
329
360
  onChange: handleInputChange,
330
- id: id,
331
- isInvalid: isInvalid || isTextInputValueInvalid,
361
+ isInvalid: (inputProps === null || inputProps === void 0 ? void 0 : inputProps.isInvalid) || isTextInputValueInvalid,
332
362
  "aria-label": "Enter date",
333
- isDisabled: isDisabled,
334
- isRequired: isRequired,
335
- isReadOnly: isReadOnly,
336
- testId: "cf-ui-datepicker-input"
337
- }), /*#__PURE__*/ ($parcel$interopDefault($bMnqh$react)).createElement($bMnqh$contentfulf36button.IconButton, {
363
+ testId: "cf-ui-datepicker-input",
364
+ ...inputProps
365
+ }), /*#__PURE__*/ (0, ($parcel$interopDefault($bMnqh$react))).createElement((0, $bMnqh$contentfulf36button.IconButton), {
338
366
  "aria-label": "Use calendar",
339
367
  variant: "secondary",
340
- icon: /*#__PURE__*/ ($parcel$interopDefault($bMnqh$react)).createElement($bMnqh$contentfulf36icons.CalendarIcon, {
368
+ icon: /*#__PURE__*/ (0, ($parcel$interopDefault($bMnqh$react))).createElement((0, $bMnqh$contentfulf36icons.CalendarIcon), {
341
369
  "aria-label": "calendar",
342
370
  variant: "muted"
343
371
  }),
344
372
  onClick: ()=>{
345
- setIsPopoverOpen((prevState)=>!prevState
346
- );
373
+ setIsPopoverOpen((prevState)=>!prevState);
347
374
  },
348
- isDisabled: isDisabled,
375
+ isDisabled: inputProps === null || inputProps === void 0 ? void 0 : inputProps.isDisabled,
349
376
  testId: "cf-ui-datepicker-button"
350
- }))), /*#__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))), {
351
378
  returnFocus: true
352
- }, /*#__PURE__*/ ($parcel$interopDefault($bMnqh$react)).createElement($fcd3f98a88933011$export$e1aef45b828286de, {
379
+ }, /*#__PURE__*/ (0, ($parcel$interopDefault($bMnqh$react))).createElement((0, $fcd3f98a88933011$export$e1aef45b828286de), {
353
380
  ...otherProps,
354
381
  className: styles.calendar,
355
382
  mode: "single",
@@ -365,6 +392,7 @@ function $af2068a878c80fd7$export$7235422eca03ec90(props) {
365
392
 
366
393
 
367
394
 
395
+ $parcel$exportWildcard(module.exports, $24e08c7c0249b6ac$exports);
368
396
 
369
397
 
370
398
  //# sourceMappingURL=main.js.map