@contentful/f36-datepicker 4.1.0-beta.5 → 4.1.0-beta.8

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