@contentful/f36-datepicker 4.0.1-next-v4-6831.2285 → 4.1.0-beta.0

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 (14) hide show
  1. package/README.mdx +73 -0
  2. package/dist/main.js +369 -1
  3. package/dist/main.js.map +1 -1
  4. package/dist/module.js +361 -1
  5. package/dist/module.js.map +1 -1
  6. package/dist/types.d.ts +30 -16
  7. package/dist/types.d.ts.map +1 -1
  8. package/package.json +23 -26
  9. package/CHANGELOG.md +0 -1520
  10. package/LICENSE +0 -7
  11. package/README.md +0 -4
  12. package/src/Datepicker.test.tsx +0 -56
  13. package/src/Datepicker.tsx +0 -120
  14. package/src/index.ts +0 -2
package/README.mdx ADDED
@@ -0,0 +1,73 @@
1
+ ---
2
+ title: 'Datepicker'
3
+ status: 'alpha'
4
+ isNew: true
5
+ slug: /components/datepicker/
6
+ github: 'https://github.com/contentful/forma-36/tree/main/packages/components/datepicker'
7
+ storybook: 'https://v4-f36-storybook.netlify.app/?path=/story/components-datepicker'
8
+ typescript: ./src/Datepicker.tsx
9
+ section: 'dateComponents'
10
+ ---
11
+
12
+ Datepicker component enables users to enter a date either through text input or selecting a date from the Calendar dropdown.
13
+
14
+ The Datepicker component combines text input, and calendar in dropdown.
15
+
16
+ Use Datepicker to ask user's for date input in forms, modals, or filtering.
17
+
18
+ ## Import
19
+
20
+ ```jsx static=true
21
+ import { Datepicker } from '@contentful/f36-datepicker';
22
+ ```
23
+
24
+ ## Examples
25
+
26
+ ### Basic
27
+
28
+ Display Datepicker component with text input
29
+
30
+ ```jsx file=./examples/Datepicker/Basic.tsx
31
+
32
+ ```
33
+
34
+ ### Date Formats
35
+
36
+ Datepicker supports printing out different formats to users, see https://date-fns.org/v2.16.1/docs/format
37
+
38
+ At Contentful we use `dd LLL yyyy` format to communicate date to users, example `31 Jan 2021`
39
+
40
+ ```jsx file=./examples/Datepicker/Format.tsx
41
+
42
+ ```
43
+
44
+ ### Visual States
45
+
46
+ Visual states indicates to users certain messages through UI.
47
+
48
+ Communicate to the users in text why the Datepicker is in a specific state, example:
49
+
50
+ Disabled: "You don't have access to edit this field!"
51
+ Invalid: "Please enter a valid date!"
52
+
53
+ ```jsx file=./examples/Datepicker/VisualStates.tsx
54
+
55
+ ```
56
+
57
+ ### Open by default
58
+
59
+ Open the dropdown and display the Calendar by default without user interaction
60
+
61
+ ```jsx file=./examples/Datepicker/DefaultOpen.tsx
62
+
63
+ ```
64
+
65
+ ## Props (API reference)
66
+
67
+ <PropsTable of="Datepicker" />
68
+
69
+ ## Accessibility
70
+
71
+ - Keyboard navigation is supported
72
+ - Necessary aria roles are provided by default
73
+ - When providing a label, ensure it's linked to the text input
package/dist/main.js CHANGED
@@ -1,2 +1,370 @@
1
- var{css:e,cx:r}=require("emotion"),t=require("react"),a=m(t),{useState:n,useRef:u,useEffect:c,useCallback:i}=t,l=m(require("pikaday")),d=m(require("date-fns/format")),{Label:o}=require("@contentful/f36-forms"),{TextInput:s,ValidationMessage:f}=require("@contentful/f36-components");function m(e){return e&&e.__esModule?e.default:e}var p,y,k,b,v={};p=v,y="Datepicker",k=()=>h,Object.defineProperty(p,y,{get:k,set:b,enumerable:!0,configurable:!0});function h({labelText:t,required:m,name:p="cf-ui-datepicker",id:y="cf-ui-datepicker",testId:k="cf-ui-datepicker",dateFormat:b="do MMM yyyy",disabled:v,...h}){const q={datePickerWrapper:e({name:"134tp40",styles:"max-height:70px;"}),datePicker:e({name:"ic1jda",styles:"z-index:1002;display:block;.is-hidden{display:none;}"})},[x]=n(),g=u(),P=u(null);c((()=>(g.current=new l({field:P&&P.current,minDate:h.minDate,maxDate:h.maxDate,yearRange:5,theme:r(q.datePicker,"hide-carret"),onSelect:e=>{var r;null===(r=h.onChange)||void 0===r||r.call(h,e)}}),()=>{g.current&&g.current.destroy()})),[h,q.datePicker]);const E=i((()=>{g.current&&g.current.show()}),[]),M=i((e=>{var r;null===(r=h.onBlur)||void 0===r||r.call(h,e),g.current&&!g.current.el.contains(e.relatedTarget)&&g.current.hide()}),[h]);return a.createElement("div",{className:q.datePickerWrapper},t&&a.createElement(o,{required:m,htmlFor:y},t),a.createElement(s,{disabled:v,required:m,name:p,testId:k,readOnly:!0,inputRef:P,value:h.value&&d(h.value,b),id:y,onFocus:E,onBlur:M,autoComplete:"off"}),x&&a.createElement(f,null,x))}var q,x;q=module.exports,x=v,Object.keys(x).forEach((function(e){"default"!==e&&"__esModule"!==e&&Object.defineProperty(q,e,{enumerable:!0,get:function(){return x[e]}})}));
1
+ var $bMnqh$emotion = require("emotion");
2
+ var $bMnqh$react = require("react");
3
+ var $bMnqh$datefns = require("date-fns");
4
+ var $bMnqh$contentfulf36popover = require("@contentful/f36-popover");
5
+ var $bMnqh$reactfocuslock = require("react-focus-lock");
6
+ var $bMnqh$contentfulf36forms = require("@contentful/f36-forms");
7
+ var $bMnqh$contentfulf36button = require("@contentful/f36-button");
8
+ var $bMnqh$contentfulf36icons = require("@contentful/f36-icons");
9
+ var $bMnqh$contentfulf36tokens = require("@contentful/f36-tokens");
10
+ var $bMnqh$reactdaypicker = require("react-day-picker");
11
+ var $bMnqh$contentfulf36core = require("@contentful/f36-core");
12
+ var $bMnqh$contentfulf36typography = require("@contentful/f36-typography");
13
+
14
+ function $parcel$export(e, n, v, s) {
15
+ Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
16
+ }
17
+ function $parcel$interopDefault(a) {
18
+ return a && a.__esModule ? a.default : a;
19
+ }
20
+
21
+ $parcel$export(module.exports, "Datepicker", () => $af2068a878c80fd7$export$7235422eca03ec90);
22
+ $parcel$export(module.exports, "Calendar", () => $fcd3f98a88933011$export$e1aef45b828286de);
23
+
24
+
25
+
26
+
27
+
28
+ const $ceebd8c575fa61b7$export$ffd58b7f6f099a57 = ()=>{
29
+ return {
30
+ calendar: /*#__PURE__*/ $bMnqh$emotion.css({
31
+ padding: ($parcel$interopDefault($bMnqh$contentfulf36tokens)).spacingM
32
+ })
33
+ };
34
+ };
35
+
36
+
37
+
38
+
39
+
40
+ const $ca92f136b31cadb2$var$cellSize = 40;
41
+ const $ca92f136b31cadb2$export$ffd58b7f6f099a57 = ()=>{
42
+ return {
43
+ vhidden: /*#__PURE__*/ $bMnqh$emotion.css({
44
+ name: "986gn8",
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);"
46
+ }),
47
+ button_reset: /*#__PURE__*/ $bMnqh$emotion.css({
48
+ name: "sun3y7",
49
+ styles: "appearance:none;position:relative;margin:0;padding:0;border:none;outline:none;background:none;"
50
+ }),
51
+ button: /*#__PURE__*/ $bMnqh$emotion.css({
52
+ borderRadius: '50%',
53
+ cursor: 'pointer',
54
+ color: ($parcel$interopDefault($bMnqh$contentfulf36tokens)).gray900,
55
+ '&[aria-disabled="true"]': {
56
+ color: ($parcel$interopDefault($bMnqh$contentfulf36tokens)).gray400,
57
+ pointerEvents: 'none'
58
+ },
59
+ '&:focus, &:active': {
60
+ boxShadow: ($parcel$interopDefault($bMnqh$contentfulf36tokens)).glowPrimary
61
+ },
62
+ '&:focus:not(:focus-visible)': {
63
+ boxShadow: 'unset'
64
+ },
65
+ '&:hover': {
66
+ backgroundColor: ($parcel$interopDefault($bMnqh$contentfulf36tokens)).gray200
67
+ },
68
+ '&.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
72
+ }
73
+ }),
74
+ months: /*#__PURE__*/ $bMnqh$emotion.css({
75
+ name: "k008qs",
76
+ styles: "display:flex;"
77
+ }),
78
+ month: /*#__PURE__*/ $bMnqh$emotion.css({
79
+ name: "dmltl9",
80
+ styles: "margin:0 1em;&:first-child{margin-left:0;}&:last-child{margin-right:0;}"
81
+ }),
82
+ table: /*#__PURE__*/ $bMnqh$emotion.css({
83
+ name: "4j630u",
84
+ styles: "margin:0;border-collapse:collapse;"
85
+ }),
86
+ caption: /*#__PURE__*/ $bMnqh$emotion.css({
87
+ name: "l6jblq",
88
+ styles: "position:relative;padding:0;text-align:left;.rdp-multiple_months &{display:block;text-align:center;}"
89
+ }),
90
+ caption_dropdowns: /*#__PURE__*/ $bMnqh$emotion.css({
91
+ name: "rmz4vk",
92
+ styles: "position:relative;display:inline-flex;"
93
+ }),
94
+ caption_label: /*#__PURE__*/ $bMnqh$emotion.css({
95
+ position: 'relative',
96
+ 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'
108
+ }
109
+ }),
110
+ nav: /*#__PURE__*/ $bMnqh$emotion.css({
111
+ name: "doey51",
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%);}"
113
+ }),
114
+ nav_button: /*#__PURE__*/ $bMnqh$emotion.css({
115
+ name: "17fd5v8",
116
+ styles: "width:2rem;height:2rem;display:inline-flex;align-items:center;justify-content:center;background-color:transparent;"
117
+ }),
118
+ nav_button_previous: /*#__PURE__*/ $bMnqh$emotion.css({
119
+ name: "8er82g",
120
+ styles: "margin-right:3px;"
121
+ }),
122
+ dropdown_month: /*#__PURE__*/ $bMnqh$emotion.css({
123
+ name: "datla1",
124
+ styles: "position:relative;display:inline-flex;align-items:center;"
125
+ }),
126
+ dropdown: /*#__PURE__*/ $bMnqh$emotion.css({
127
+ appearance: 'none',
128
+ position: 'absolute',
129
+ 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
145
+ },
146
+ '&:hover:not([disabled]) + div, &:hover:not([disabled]) + div': {
147
+ backgroundColor: ($parcel$interopDefault($bMnqh$contentfulf36tokens)).gray200
148
+ }
149
+ }),
150
+ dropdown_icon: /*#__PURE__*/ $bMnqh$emotion.css({
151
+ name: "1isemmb",
152
+ styles: "margin-left:8px;"
153
+ }),
154
+ head: /*#__PURE__*/ $bMnqh$emotion.css({
155
+ name: "107tt68",
156
+ styles: "border:0;"
157
+ }),
158
+ head_row: /*#__PURE__*/ $bMnqh$emotion.css({
159
+ name: "10klw3m",
160
+ styles: "height:100%;"
161
+ }),
162
+ row: /*#__PURE__*/ $bMnqh$emotion.css({
163
+ name: "10klw3m",
164
+ styles: "height:100%;"
165
+ }),
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'
172
+ }),
173
+ tbody: /*#__PURE__*/ $bMnqh$emotion.css({
174
+ name: "107tt68",
175
+ styles: "border:0;"
176
+ }),
177
+ tfoot: /*#__PURE__*/ $bMnqh$emotion.css({
178
+ name: "jgvdrf",
179
+ styles: "margin:0.5em;"
180
+ }),
181
+ cell: /*#__PURE__*/ $bMnqh$emotion.css({
182
+ name: "1y3chau",
183
+ styles: "padding:2px;text-align:center;"
184
+ }),
185
+ day: /*#__PURE__*/ $bMnqh$emotion.css({
186
+ display: 'flex',
187
+ overflow: 'hidden',
188
+ alignItems: 'center',
189
+ justifyContent: 'center',
190
+ width: `${$ca92f136b31cadb2$var$cellSize / 16}rem`,
191
+ height: `${$ca92f136b31cadb2$var$cellSize / 16}rem`,
192
+ borderRadius: '50%',
193
+ '&.rdp-day_today:not(.rdp-day_outside)': {
194
+ fontWeight: ($parcel$interopDefault($bMnqh$contentfulf36tokens)).fontWeightDemiBold
195
+ },
196
+ '&.rdp-day_today:not(.rdp-day_outside):not(.rdp-day_selected):not(:hover)': {
197
+ backgroundColor: ($parcel$interopDefault($bMnqh$contentfulf36tokens)).blue100
198
+ }
199
+ }),
200
+ nav_icon: /*#__PURE__*/ $bMnqh$emotion.css({
201
+ name: "1ghomkw",
202
+ styles: "width:0.625rem;"
203
+ })
204
+ };
205
+ };
206
+
207
+
208
+
209
+
210
+
211
+
212
+
213
+ const $7dd04d8685a518d7$export$23682f394b530c50 = (props)=>{
214
+ const styles = $ca92f136b31cadb2$export$ffd58b7f6f099a57();
215
+ const { fromDate: fromDate , toDate: toDate , numberOfMonths: numberOfMonths } = $bMnqh$reactdaypicker.useDayPicker();
216
+ const isDropdownsVisible = Boolean(fromDate && toDate && numberOfMonths === 1);
217
+ return /*#__PURE__*/ ($parcel$interopDefault($bMnqh$react)).createElement($bMnqh$contentfulf36core.Flex, {
218
+ alignItems: "center",
219
+ justifyContent: "space-between",
220
+ 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));
222
+ };
223
+
224
+
225
+
226
+
227
+
228
+
229
+
230
+ 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();
233
+ const isVisuallyHidden = Boolean(fromDate && toDate && numberOfMonths === 1);
234
+ return /*#__PURE__*/ ($parcel$interopDefault($bMnqh$react)).createElement($bMnqh$contentfulf36typography.Heading, {
235
+ as: "h2",
236
+ "aria-live": "polite",
237
+ "aria-atomic": "true",
238
+ id: props.id,
239
+ className: $bMnqh$emotion.cx(styles.caption_label, isVisuallyHidden && styles.vhidden)
240
+ }, formatCaption(props.displayMonth, {
241
+ locale: locale
242
+ }));
243
+ };
244
+
245
+
246
+ function $fcd3f98a88933011$export$e1aef45b828286de(props) {
247
+ const styles = $ca92f136b31cadb2$export$ffd58b7f6f099a57();
248
+ var _weekStartsOn;
249
+ return /*#__PURE__*/ ($parcel$interopDefault($bMnqh$react)).createElement($bMnqh$reactdaypicker.DayPicker, {
250
+ ...props,
251
+ weekStartsOn: (_weekStartsOn = props.weekStartsOn) !== null && _weekStartsOn !== void 0 ? _weekStartsOn : 1,
252
+ classNames: styles,
253
+ components: {
254
+ Caption: $7dd04d8685a518d7$export$23682f394b530c50,
255
+ CaptionLabel: $7a9f09b2c8cda9ba$export$74e13d11a34c00bf,
256
+ ...props.components
257
+ }
258
+ });
259
+ }
260
+
261
+
262
+
263
+
264
+
265
+
266
+
267
+
268
+ 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;
275
+ return true;
276
+ }, [
277
+ fromDate,
278
+ toDate
279
+ ]);
280
+ const parseInputDate = $bMnqh$react.useCallback((value)=>$bMnqh$datefns.parse(value, dateFormat, new Date(), {
281
+ locale: locale
282
+ })
283
+ , [
284
+ locale,
285
+ dateFormat
286
+ ]);
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));
292
+ // we want to run this hook only when `selected` prop changes
293
+ // eslint-disable-next-line react-hooks/exhaustive-deps
294
+ }, [
295
+ selected
296
+ ]);
297
+ const handleInputChange = $bMnqh$react.useCallback((e)=>{
298
+ setInputValue(e.currentTarget.value);
299
+ const date = parseInputDate(e.currentTarget.value);
300
+ if (isDateValid(date)) onSelect(date);
301
+ else onSelect(undefined);
302
+ }, [
303
+ onSelect,
304
+ parseInputDate,
305
+ isDateValid
306
+ ]);
307
+ const handleDaySelect = $bMnqh$react.useCallback((date)=>{
308
+ if (date && isDateValid(date)) {
309
+ onSelect(date);
310
+ setIsPopoverOpen(false);
311
+ }
312
+ }, [
313
+ onSelect,
314
+ isDateValid
315
+ ]);
316
+ const isTextInputValueInvalid = inputValue && !isDateValid(parseInputDate(inputValue));
317
+ return /*#__PURE__*/ ($parcel$interopDefault($bMnqh$react)).createElement($bMnqh$contentfulf36popover.Popover, {
318
+ 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),
324
+ style: style,
325
+ testId: testId
326
+ }, /*#__PURE__*/ ($parcel$interopDefault($bMnqh$react)).createElement($bMnqh$contentfulf36forms.TextInput, {
327
+ placeholder: $bMnqh$datefns.format(new Date(), dateFormat),
328
+ value: inputValue,
329
+ onChange: handleInputChange,
330
+ id: id,
331
+ isInvalid: isInvalid || isTextInputValueInvalid,
332
+ "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, {
338
+ "aria-label": "Use calendar",
339
+ variant: "secondary",
340
+ icon: /*#__PURE__*/ ($parcel$interopDefault($bMnqh$react)).createElement($bMnqh$contentfulf36icons.CalendarIcon, {
341
+ "aria-label": "calendar",
342
+ variant: "muted"
343
+ }),
344
+ onClick: ()=>{
345
+ setIsPopoverOpen((prevState)=>!prevState
346
+ );
347
+ },
348
+ isDisabled: isDisabled,
349
+ 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)), {
351
+ returnFocus: true
352
+ }, /*#__PURE__*/ ($parcel$interopDefault($bMnqh$react)).createElement($fcd3f98a88933011$export$e1aef45b828286de, {
353
+ ...otherProps,
354
+ className: styles.calendar,
355
+ mode: "single",
356
+ selected: selected,
357
+ onSelect: handleDaySelect,
358
+ initialFocus: false,
359
+ defaultMonth: selected,
360
+ fromDate: fromDate,
361
+ toDate: toDate,
362
+ locale: locale
363
+ }))));
364
+ }
365
+
366
+
367
+
368
+
369
+
2
370
  //# sourceMappingURL=main.js.map
package/dist/main.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"ucAqCgBA,GAATC,UACLA,EADyBC,SAEzBA,EAFyBC,KAGzBA,EAAI,mBAHqBC,GAIzBA,EAAE,mBAJuBC,OAKzBA,EAAM,mBALmBC,WAMzBA,EAAU,cANeC,SAOzBA,KACGC,UAEGC,EAvCO,CACbC,kBAAmBC,EAAA,CAAAR,KAAA,UAAAM,OAAA,qBAGnBG,WAAYD,EAAA,CAAAR,KAAA,SAAAM,OAAA,2DAoCLI,GAAmBC,IACpBC,EAAUC,IACVC,EAAiBD,EAAgC,MAEvDE,GAAS,KACPH,EAAQI,QAAR,IAAsBC,EAAJ,CAChBC,MAAOJ,GAAkBA,EAAeE,QACxCG,QAASd,EAAWc,QACpBC,QAASf,EAAWe,QACpBC,UAAW,EACXC,MAAOC,EAAGjB,EAAOG,WAAV,eACPe,SAAWC,QAAUC,EACnB,QAAAA,EAAArB,EAAWsB,gBAAX,IAAAD,GAAAA,EAAAE,KAAAvB,EAAsBoB,WAKpBb,EAAQI,SACVJ,EAAQI,QAAQa,cAGlBxB,EAAYC,EAAOG,mBAEjBqB,EAAaC,GAAW,KACxBnB,EAAQI,SACVJ,EAAQI,QAAQgB,aAIdC,EAAaF,GAChBG,QAAkBC,EACjB,QAAAA,EAAA9B,EAAW+B,cAAX,IAAAD,GAAAA,EAAAP,KAAAvB,EAAoB6B,GAElBtB,EAAQI,UACPJ,EAAQI,QAAQqB,GAAGC,SAASJ,EAAEK,gBAE/B3B,EAAQI,QAAQwB,UAGnBnC,WAIDoC,EAAAC,cAAA,MAAA,CAAKC,UAAWrC,EAAOC,mBACpBT,GACC2C,EAAAC,cAACE,EAAD,CAAO7C,SAAUA,EAAU8C,QAAS5C,GACjCH,GAGL2C,EAAAC,cAACI,EAAD,CACE1C,SAAUA,EACVL,SAAUA,EACVC,KAAMA,EACNE,OAAQA,EACR6C,UAAU,EACVC,SAAUlC,EACVW,MACEpB,EAAWoB,OAASwB,EAAO5C,EAAWoB,MAAOtB,GAE/CF,GAAIA,EACJiD,QAASpB,EACTM,OAAQH,EACRkB,aAAY,QAEbzC,GACC+B,EAAAC,cAACU,EAAD,KAAoB1C","sources":["packages/components/datepicker/src/Datepicker.tsx"],"sourcesContent":["import { cx as _cx } from \"emotion\";\nimport { css as _css } from \"emotion\";\n\nfunction _EMOTION_STRINGIFIED_CSS_ERROR__() { return \"You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).\"; }\n\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport Pikaday from 'pikaday';\nimport format from 'date-fns/format';\nimport { Label } from '@contentful/f36-forms';\nimport { TextInput, ValidationMessage } from '@contentful/f36-components';\n\nconst getStyles = () => ({\n datePickerWrapper: /*#__PURE__*/_css(process.env.NODE_ENV === \"production\" ? {\n name: \"134tp40\",\n styles: \"max-height:70px;\"\n } : {\n name: \"134tp40\",\n styles: \"max-height:70px;\",\n map: \"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkRhdGVwaWNrZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVNxQiIsImZpbGUiOiJEYXRlcGlja2VyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgY3ggfSBmcm9tICdlbW90aW9uJztcbmltcG9ydCBSZWFjdCwgeyB1c2VDYWxsYmFjaywgdXNlRWZmZWN0LCB1c2VSZWYsIHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHR5cGUgeyBGb2N1c0V2ZW50SGFuZGxlciwgRm9jdXNFdmVudCB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBQaWthZGF5IGZyb20gJ3Bpa2FkYXknO1xuaW1wb3J0IGZvcm1hdCBmcm9tICdkYXRlLWZucy9mb3JtYXQnO1xuaW1wb3J0IHsgTGFiZWwgfSBmcm9tICdAY29udGVudGZ1bC9mMzYtZm9ybXMnO1xuaW1wb3J0IHsgVGV4dElucHV0LCBWYWxpZGF0aW9uTWVzc2FnZSB9IGZyb20gJ0Bjb250ZW50ZnVsL2YzNi1jb21wb25lbnRzJztcblxuY29uc3QgZ2V0U3R5bGVzID0gKCkgPT4gKHtcbiAgZGF0ZVBpY2tlcldyYXBwZXI6IGNzcyh7XG4gICAgbWF4SGVpZ2h0OiA3MCxcbiAgfSksXG4gIGRhdGVQaWNrZXI6IGNzcyh7XG4gICAgekluZGV4OiAxMDAyLFxuICAgIGRpc3BsYXk6ICdibG9jaycsXG4gICAgJy5pcy1oaWRkZW4nOiB7XG4gICAgICBkaXNwbGF5OiAnbm9uZScsXG4gICAgfSxcbiAgfSksXG59KTtcblxuZXhwb3J0IGludGVyZmFjZSBEYXRlUGlja2VyUHJvcHMge1xuICBkaXNhYmxlZDogYm9vbGVhbjtcbiAgcmVxdWlyZWQ6IGJvb2xlYW47XG4gIHZhbHVlPzogRGF0ZTtcbiAgbWluRGF0ZT86IERhdGU7XG4gIG1heERhdGU/OiBEYXRlO1xuICBvbkNoYW5nZT86ICh2YWw6IERhdGUpID0+IHZvaWQ7XG4gIG9uQmx1cj86IEZvY3VzRXZlbnRIYW5kbGVyO1xuICBuYW1lPzogc3RyaW5nO1xuICBoZWxwVGV4dD86IHN0cmluZztcbiAgbGFiZWxUZXh0Pzogc3RyaW5nO1xuICBpZD86IHN0cmluZztcbiAgdGVzdElkPzogc3RyaW5nO1xuICBkYXRlRm9ybWF0Pzogc3RyaW5nO1xufVxuXG5leHBvcnQgZnVuY3Rpb24gRGF0ZXBpY2tlcih7XG4gIGxhYmVsVGV4dCxcbiAgcmVxdWlyZWQsXG4gIG5hbWUgPSAnY2YtdWktZGF0ZXBpY2tlcicsXG4gIGlkID0gJ2NmLXVpLWRhdGVwaWNrZXInLFxuICB0ZXN0SWQgPSAnY2YtdWktZGF0ZXBpY2tlcicsXG4gIGRhdGVGb3JtYXQgPSAnZG8gTU1NIHl5eXknLFxuICBkaXNhYmxlZCxcbiAgLi4ub3RoZXJQcm9wc1xufTogRGF0ZVBpY2tlclByb3BzKTogUmVhY3QuUmVhY3RFbGVtZW50IHtcbiAgY29uc3Qgc3R5bGVzID0gZ2V0U3R5bGVzKCk7XG4gIGNvbnN0IFt2YWxpZGF0aW9uRXJyb3JdID0gdXNlU3RhdGU8c3RyaW5nPigpO1xuICBjb25zdCBwaWthZGF5ID0gdXNlUmVmPFBpa2FkYXk+KCk7XG4gIGNvbnN0IGRhdGVQaWNrZXJOb2RlID0gdXNlUmVmPEhUTUxJbnB1dEVsZW1lbnQgfCBudWxsPihudWxsKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIHBpa2FkYXkuY3VycmVudCA9IG5ldyBQaWthZGF5KHtcbiAgICAgIGZpZWxkOiBkYXRlUGlja2VyTm9kZSAmJiBkYXRlUGlja2VyTm9kZS5jdXJyZW50LFxuICAgICAgbWluRGF0ZTogb3RoZXJQcm9wcy5taW5EYXRlLFxuICAgICAgbWF4RGF0ZTogb3RoZXJQcm9wcy5tYXhEYXRlLFxuICAgICAgeWVhclJhbmdlOiA1LFxuICAgICAgdGhlbWU6IGN4KHN0eWxlcy5kYXRlUGlja2VyLCAnaGlkZS1jYXJyZXQnKSxcbiAgICAgIG9uU2VsZWN0OiAodmFsdWUpID0+IHtcbiAgICAgICAgb3RoZXJQcm9wcy5vbkNoYW5nZT8uKHZhbHVlKTtcbiAgICAgIH0sXG4gICAgfSk7XG5cbiAgICByZXR1cm4gKCkgPT4ge1xuICAgICAgaWYgKHBpa2FkYXkuY3VycmVudCkge1xuICAgICAgICBwaWthZGF5LmN1cnJlbnQuZGVzdHJveSgpO1xuICAgICAgfVxuICAgIH07XG4gIH0sIFtvdGhlclByb3BzLCBzdHlsZXMuZGF0ZVBpY2tlcl0pO1xuXG4gIGNvbnN0IGhhbmRsZU9wZW4gPSB1c2VDYWxsYmFjaygoKSA9PiB7XG4gICAgaWYgKHBpa2FkYXkuY3VycmVudCkge1xuICAgICAgcGlrYWRheS5jdXJyZW50LnNob3coKTtcbiAgICB9XG4gIH0sIFtdKTtcblxuICBjb25zdCBoYW5kbGVCbHVyID0gdXNlQ2FsbGJhY2soXG4gICAgKGU6IEZvY3VzRXZlbnQpID0+IHtcbiAgICAgIG90aGVyUHJvcHMub25CbHVyPy4oZSk7XG4gICAgICBpZiAoXG4gICAgICAgIHBpa2FkYXkuY3VycmVudCAmJlxuICAgICAgICAhcGlrYWRheS5jdXJyZW50LmVsLmNvbnRhaW5zKGUucmVsYXRlZFRhcmdldCBhcyBIVE1MSW5wdXRFbGVtZW50KVxuICAgICAgKSB7XG4gICAgICAgIHBpa2FkYXkuY3VycmVudC5oaWRlKCk7XG4gICAgICB9XG4gICAgfSxcbiAgICBbb3RoZXJQcm9wc10sXG4gICk7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2IGNsYXNzTmFtZT17c3R5bGVzLmRhdGVQaWNrZXJXcmFwcGVyfT5cbiAgICAgIHtsYWJlbFRleHQgJiYgKFxuICAgICAgICA8TGFiZWwgcmVxdWlyZWQ9e3JlcXVpcmVkfSBodG1sRm9yPXtpZH0+XG4gICAgICAgICAge2xhYmVsVGV4dH1cbiAgICAgICAgPC9MYWJlbD5cbiAgICAgICl9XG4gICAgICA8VGV4dElucHV0XG4gICAgICAgIGRpc2FibGVkPXtkaXNhYmxlZH1cbiAgICAgICAgcmVxdWlyZWQ9e3JlcXVpcmVkfVxuICAgICAgICBuYW1lPXtuYW1lfVxuICAgICAgICB0ZXN0SWQ9e3Rlc3RJZH1cbiAgICAgICAgcmVhZE9ubHk9e3RydWV9XG4gICAgICAgIGlucHV0UmVmPXtkYXRlUGlja2VyTm9kZX1cbiAgICAgICAgdmFsdWU9e1xuICAgICAgICAgIG90aGVyUHJvcHMudmFsdWUgJiYgZm9ybWF0KG90aGVyUHJvcHMudmFsdWUsIGRhdGVGb3JtYXQhKSAvLyBlc2xpbnQtZGlzYWJsZS1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uby1ub24tbnVsbC1hc3NlcnRpb25cbiAgICAgICAgfVxuICAgICAgICBpZD17aWR9XG4gICAgICAgIG9uRm9jdXM9e2hhbmRsZU9wZW59XG4gICAgICAgIG9uQmx1cj17aGFuZGxlQmx1cn1cbiAgICAgICAgYXV0b0NvbXBsZXRlPVwib2ZmXCJcbiAgICAgIC8+XG4gICAgICB7dmFsaWRhdGlvbkVycm9yICYmIChcbiAgICAgICAgPFZhbGlkYXRpb25NZXNzYWdlPnt2YWxpZGF0aW9uRXJyb3J9PC9WYWxpZGF0aW9uTWVzc2FnZT5cbiAgICAgICl9XG4gICAgPC9kaXY+XG4gICk7XG59XG5cbmV4cG9ydCBkZWZhdWx0IERhdGVwaWNrZXI7XG4iXX0= */\",\n toString: _EMOTION_STRINGIFIED_CSS_ERROR__\n }),\n datePicker: /*#__PURE__*/_css(process.env.NODE_ENV === \"production\" ? {\n name: \"ic1jda\",\n styles: \"z-index:1002;display:block;.is-hidden{display:none;}\"\n } : {\n name: \"ic1jda\",\n styles: \"z-index:1002;display:block;.is-hidden{display:none;}\",\n map: \"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkRhdGVwaWNrZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVljIiwiZmlsZSI6IkRhdGVwaWNrZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBjeCB9IGZyb20gJ2Vtb3Rpb24nO1xuaW1wb3J0IFJlYWN0LCB7IHVzZUNhbGxiYWNrLCB1c2VFZmZlY3QsIHVzZVJlZiwgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgdHlwZSB7IEZvY3VzRXZlbnRIYW5kbGVyLCBGb2N1c0V2ZW50IH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IFBpa2FkYXkgZnJvbSAncGlrYWRheSc7XG5pbXBvcnQgZm9ybWF0IGZyb20gJ2RhdGUtZm5zL2Zvcm1hdCc7XG5pbXBvcnQgeyBMYWJlbCB9IGZyb20gJ0Bjb250ZW50ZnVsL2YzNi1mb3Jtcyc7XG5pbXBvcnQgeyBUZXh0SW5wdXQsIFZhbGlkYXRpb25NZXNzYWdlIH0gZnJvbSAnQGNvbnRlbnRmdWwvZjM2LWNvbXBvbmVudHMnO1xuXG5jb25zdCBnZXRTdHlsZXMgPSAoKSA9PiAoe1xuICBkYXRlUGlja2VyV3JhcHBlcjogY3NzKHtcbiAgICBtYXhIZWlnaHQ6IDcwLFxuICB9KSxcbiAgZGF0ZVBpY2tlcjogY3NzKHtcbiAgICB6SW5kZXg6IDEwMDIsXG4gICAgZGlzcGxheTogJ2Jsb2NrJyxcbiAgICAnLmlzLWhpZGRlbic6IHtcbiAgICAgIGRpc3BsYXk6ICdub25lJyxcbiAgICB9LFxuICB9KSxcbn0pO1xuXG5leHBvcnQgaW50ZXJmYWNlIERhdGVQaWNrZXJQcm9wcyB7XG4gIGRpc2FibGVkOiBib29sZWFuO1xuICByZXF1aXJlZDogYm9vbGVhbjtcbiAgdmFsdWU/OiBEYXRlO1xuICBtaW5EYXRlPzogRGF0ZTtcbiAgbWF4RGF0ZT86IERhdGU7XG4gIG9uQ2hhbmdlPzogKHZhbDogRGF0ZSkgPT4gdm9pZDtcbiAgb25CbHVyPzogRm9jdXNFdmVudEhhbmRsZXI7XG4gIG5hbWU/OiBzdHJpbmc7XG4gIGhlbHBUZXh0Pzogc3RyaW5nO1xuICBsYWJlbFRleHQ/OiBzdHJpbmc7XG4gIGlkPzogc3RyaW5nO1xuICB0ZXN0SWQ/OiBzdHJpbmc7XG4gIGRhdGVGb3JtYXQ/OiBzdHJpbmc7XG59XG5cbmV4cG9ydCBmdW5jdGlvbiBEYXRlcGlja2VyKHtcbiAgbGFiZWxUZXh0LFxuICByZXF1aXJlZCxcbiAgbmFtZSA9ICdjZi11aS1kYXRlcGlja2VyJyxcbiAgaWQgPSAnY2YtdWktZGF0ZXBpY2tlcicsXG4gIHRlc3RJZCA9ICdjZi11aS1kYXRlcGlja2VyJyxcbiAgZGF0ZUZvcm1hdCA9ICdkbyBNTU0geXl5eScsXG4gIGRpc2FibGVkLFxuICAuLi5vdGhlclByb3BzXG59OiBEYXRlUGlja2VyUHJvcHMpOiBSZWFjdC5SZWFjdEVsZW1lbnQge1xuICBjb25zdCBzdHlsZXMgPSBnZXRTdHlsZXMoKTtcbiAgY29uc3QgW3ZhbGlkYXRpb25FcnJvcl0gPSB1c2VTdGF0ZTxzdHJpbmc+KCk7XG4gIGNvbnN0IHBpa2FkYXkgPSB1c2VSZWY8UGlrYWRheT4oKTtcbiAgY29uc3QgZGF0ZVBpY2tlck5vZGUgPSB1c2VSZWY8SFRNTElucHV0RWxlbWVudCB8IG51bGw+KG51bGwpO1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgcGlrYWRheS5jdXJyZW50ID0gbmV3IFBpa2FkYXkoe1xuICAgICAgZmllbGQ6IGRhdGVQaWNrZXJOb2RlICYmIGRhdGVQaWNrZXJOb2RlLmN1cnJlbnQsXG4gICAgICBtaW5EYXRlOiBvdGhlclByb3BzLm1pbkRhdGUsXG4gICAgICBtYXhEYXRlOiBvdGhlclByb3BzLm1heERhdGUsXG4gICAgICB5ZWFyUmFuZ2U6IDUsXG4gICAgICB0aGVtZTogY3goc3R5bGVzLmRhdGVQaWNrZXIsICdoaWRlLWNhcnJldCcpLFxuICAgICAgb25TZWxlY3Q6ICh2YWx1ZSkgPT4ge1xuICAgICAgICBvdGhlclByb3BzLm9uQ2hhbmdlPy4odmFsdWUpO1xuICAgICAgfSxcbiAgICB9KTtcblxuICAgIHJldHVybiAoKSA9PiB7XG4gICAgICBpZiAocGlrYWRheS5jdXJyZW50KSB7XG4gICAgICAgIHBpa2FkYXkuY3VycmVudC5kZXN0cm95KCk7XG4gICAgICB9XG4gICAgfTtcbiAgfSwgW290aGVyUHJvcHMsIHN0eWxlcy5kYXRlUGlja2VyXSk7XG5cbiAgY29uc3QgaGFuZGxlT3BlbiA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICBpZiAocGlrYWRheS5jdXJyZW50KSB7XG4gICAgICBwaWthZGF5LmN1cnJlbnQuc2hvdygpO1xuICAgIH1cbiAgfSwgW10pO1xuXG4gIGNvbnN0IGhhbmRsZUJsdXIgPSB1c2VDYWxsYmFjayhcbiAgICAoZTogRm9jdXNFdmVudCkgPT4ge1xuICAgICAgb3RoZXJQcm9wcy5vbkJsdXI/LihlKTtcbiAgICAgIGlmIChcbiAgICAgICAgcGlrYWRheS5jdXJyZW50ICYmXG4gICAgICAgICFwaWthZGF5LmN1cnJlbnQuZWwuY29udGFpbnMoZS5yZWxhdGVkVGFyZ2V0IGFzIEhUTUxJbnB1dEVsZW1lbnQpXG4gICAgICApIHtcbiAgICAgICAgcGlrYWRheS5jdXJyZW50LmhpZGUoKTtcbiAgICAgIH1cbiAgICB9LFxuICAgIFtvdGhlclByb3BzXSxcbiAgKTtcblxuICByZXR1cm4gKFxuICAgIDxkaXYgY2xhc3NOYW1lPXtzdHlsZXMuZGF0ZVBpY2tlcldyYXBwZXJ9PlxuICAgICAge2xhYmVsVGV4dCAmJiAoXG4gICAgICAgIDxMYWJlbCByZXF1aXJlZD17cmVxdWlyZWR9IGh0bWxGb3I9e2lkfT5cbiAgICAgICAgICB7bGFiZWxUZXh0fVxuICAgICAgICA8L0xhYmVsPlxuICAgICAgKX1cbiAgICAgIDxUZXh0SW5wdXRcbiAgICAgICAgZGlzYWJsZWQ9e2Rpc2FibGVkfVxuICAgICAgICByZXF1aXJlZD17cmVxdWlyZWR9XG4gICAgICAgIG5hbWU9e25hbWV9XG4gICAgICAgIHRlc3RJZD17dGVzdElkfVxuICAgICAgICByZWFkT25seT17dHJ1ZX1cbiAgICAgICAgaW5wdXRSZWY9e2RhdGVQaWNrZXJOb2RlfVxuICAgICAgICB2YWx1ZT17XG4gICAgICAgICAgb3RoZXJQcm9wcy52YWx1ZSAmJiBmb3JtYXQob3RoZXJQcm9wcy52YWx1ZSwgZGF0ZUZvcm1hdCEpIC8vIGVzbGludC1kaXNhYmxlLWxpbmUgQHR5cGVzY3JpcHQtZXNsaW50L25vLW5vbi1udWxsLWFzc2VydGlvblxuICAgICAgICB9XG4gICAgICAgIGlkPXtpZH1cbiAgICAgICAgb25Gb2N1cz17aGFuZGxlT3Blbn1cbiAgICAgICAgb25CbHVyPXtoYW5kbGVCbHVyfVxuICAgICAgICBhdXRvQ29tcGxldGU9XCJvZmZcIlxuICAgICAgLz5cbiAgICAgIHt2YWxpZGF0aW9uRXJyb3IgJiYgKFxuICAgICAgICA8VmFsaWRhdGlvbk1lc3NhZ2U+e3ZhbGlkYXRpb25FcnJvcn08L1ZhbGlkYXRpb25NZXNzYWdlPlxuICAgICAgKX1cbiAgICA8L2Rpdj5cbiAgKTtcbn1cblxuZXhwb3J0IGRlZmF1bHQgRGF0ZXBpY2tlcjtcbiJdfQ== */\",\n toString: _EMOTION_STRINGIFIED_CSS_ERROR__\n })\n});\n\nexport function Datepicker({\n labelText,\n required,\n name = 'cf-ui-datepicker',\n id = 'cf-ui-datepicker',\n testId = 'cf-ui-datepicker',\n dateFormat = 'do MMM yyyy',\n disabled,\n ...otherProps\n}) {\n const styles = getStyles();\n const [validationError] = useState();\n const pikaday = useRef();\n const datePickerNode = useRef(null);\n useEffect(() => {\n pikaday.current = new Pikaday({\n field: datePickerNode && datePickerNode.current,\n minDate: otherProps.minDate,\n maxDate: otherProps.maxDate,\n yearRange: 5,\n theme: _cx(styles.datePicker, 'hide-carret'),\n onSelect: value => {\n var _otherProps$onChange;\n\n (_otherProps$onChange = otherProps.onChange) === null || _otherProps$onChange === void 0 ? void 0 : _otherProps$onChange.call(otherProps, value);\n }\n });\n return () => {\n if (pikaday.current) {\n pikaday.current.destroy();\n }\n };\n }, [otherProps, styles.datePicker]);\n const handleOpen = useCallback(() => {\n if (pikaday.current) {\n pikaday.current.show();\n }\n }, []);\n const handleBlur = useCallback(e => {\n var _otherProps$onBlur;\n\n (_otherProps$onBlur = otherProps.onBlur) === null || _otherProps$onBlur === void 0 ? void 0 : _otherProps$onBlur.call(otherProps, e);\n\n if (pikaday.current && !pikaday.current.el.contains(e.relatedTarget)) {\n pikaday.current.hide();\n }\n }, [otherProps]);\n return /*#__PURE__*/React.createElement(\"div\", {\n className: styles.datePickerWrapper\n }, labelText && /*#__PURE__*/React.createElement(Label, {\n required: required,\n htmlFor: id\n }, labelText), /*#__PURE__*/React.createElement(TextInput, {\n disabled: disabled,\n required: required,\n name: name,\n testId: testId,\n readOnly: true,\n inputRef: datePickerNode,\n value: otherProps.value && format(otherProps.value, dateFormat) // eslint-disable-line @typescript-eslint/no-non-null-assertion\n ,\n id: id,\n onFocus: handleOpen,\n onBlur: handleBlur,\n autoComplete: \"off\"\n }), validationError && /*#__PURE__*/React.createElement(ValidationMessage, null, validationError));\n}\nexport default Datepicker;"],"names":["Datepicker","labelText","required","name","id","testId","dateFormat","disabled","otherProps","styles","datePickerWrapper","$5mbML$css","datePicker","validationError","useState","pikaday","useRef","datePickerNode","useEffect","current","Pikaday","field","minDate","maxDate","yearRange","theme","$5mbML$cx","onSelect","value","_otherProps$onChange","onChange","call","destroy","handleOpen","useCallback","show","handleBlur","e","_otherProps$onBlur","onBlur","el","contains","relatedTarget","hide","$5mbML$react","createElement","className","$5mbML$Label","htmlFor","$5mbML$TextInput","readOnly","inputRef","format","onFocus","autoComplete","$5mbML$ValidationMessage"],"version":3,"file":"main.js.map"}
1
+ {"mappings":"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","sources":["packages/components/datepicker/src/index.ts","packages/components/datepicker/src/Datepicker.tsx","packages/components/datepicker/src/Datepicker.styles.ts","packages/components/datepicker/src/Calendar/index.ts","packages/components/datepicker/src/Calendar/Calendar.tsx","packages/components/datepicker/src/Calendar/Calendar.styles.ts","packages/components/datepicker/src/Calendar/CalendarCaption.tsx","packages/components/datepicker/src/Calendar/CalendarCaptionLabel.tsx"],"sourcesContent":["export { Datepicker } from './Datepicker';\nexport type { DatepickerProps } from './Datepicker';\n\nexport { Calendar } from './Calendar';\nexport type { CalendarProps } from './Calendar';\n","import React, {\n ChangeEventHandler,\n useCallback,\n useEffect,\n useState,\n} from 'react';\nimport { cx } from 'emotion';\nimport { CommonProps } from '@contentful/f36-core';\n\nimport { format, isValid, parse, startOfDay, endOfDay } from 'date-fns';\nimport { getStyles } from './Datepicker.styles';\nimport { Calendar } from './Calendar';\nimport { Popover } from '@contentful/f36-popover';\nimport { DayPickerSingleProps } from 'react-day-picker';\nimport FocusLock from 'react-focus-lock';\nimport { TextInput, TextInputProps } from '@contentful/f36-forms';\nimport { IconButton } from '@contentful/f36-button';\nimport { CalendarIcon } from '@contentful/f36-icons';\nimport { PopoverProps } from '@contentful/f36-popover/src';\n\nexport type DatepickerProps = CommonProps & {\n /**\n * Callback fired when the day is selected\n */\n onSelect: (day: Date | undefined) => void;\n\n /**\n * Format that is used to display date in the input,\n * It is based on (Unicode Technical Standart #35)[https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table]\n *\n * @default 'dd LLL yyyy' e.g. 31 Jan 2022\n */\n dateFormat?: string;\n\n /**\n * If `true`, the Datepicker will be initially opened.\n */\n defaultIsOpen?: boolean;\n} & Omit<\n DayPickerSingleProps,\n 'mode' | 'onSelect' | 'fromMonth' | 'toMonth' | 'fromYear' | 'toYear'\n > &\n Pick<\n TextInputProps,\n | 'id'\n | 'isDisabled'\n | 'isInvalid'\n | 'isReadOnly'\n | 'isRequired'\n | 'aria-label'\n > &\n Pick<PopoverProps, 'usePortal'>;\n\n/**\n * Provides functionality for date selection.\n */\nexport function Datepicker(props: DatepickerProps) {\n const styles = getStyles();\n const {\n testId = 'cf-ui-datepicker',\n className,\n style,\n id,\n isDisabled,\n isInvalid,\n isReadOnly,\n isRequired,\n usePortal,\n selected,\n onSelect,\n fromDate,\n toDate,\n locale,\n dateFormat = 'dd LLL yyyy',\n defaultIsOpen,\n ...otherProps\n } = props;\n\n const isDateValid = useCallback(\n (date: Date) => {\n if (!isValid(date)) {\n return false;\n }\n if (fromDate && startOfDay(fromDate).getTime() > date.getTime()) {\n return false;\n }\n if (toDate && date.getTime() > endOfDay(toDate).getTime()) {\n return false;\n }\n return true;\n },\n [fromDate, toDate],\n );\n\n const parseInputDate = useCallback(\n (value: string) => parse(value, dateFormat, new Date(), { locale }),\n [locale, dateFormat],\n );\n\n const [isPopoverOpen, setIsPopoverOpen] = useState(defaultIsOpen);\n const [inputValue, setInputValue] = useState<string>(() =>\n selected ? format(selected, dateFormat) : '',\n );\n\n useEffect(() => {\n if (\n selected &&\n selected.getTime() !== parseInputDate(inputValue).getTime()\n ) {\n setInputValue(format(selected, dateFormat));\n }\n // we want to run this hook only when `selected` prop changes\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [selected]);\n\n const handleInputChange: ChangeEventHandler<HTMLInputElement> = useCallback(\n (e) => {\n setInputValue(e.currentTarget.value);\n\n const date = parseInputDate(e.currentTarget.value);\n if (isDateValid(date)) {\n onSelect(date);\n } else {\n onSelect(undefined);\n }\n },\n [onSelect, parseInputDate, isDateValid],\n );\n\n const handleDaySelect = useCallback(\n (date: Date) => {\n if (date && isDateValid(date)) {\n onSelect(date);\n setIsPopoverOpen(false);\n }\n },\n [onSelect, isDateValid],\n );\n\n const isTextInputValueInvalid =\n inputValue && !isDateValid(parseInputDate(inputValue));\n\n return (\n <Popover\n isOpen={isPopoverOpen}\n onClose={() => setIsPopoverOpen(false)}\n usePortal={usePortal}\n >\n <Popover.Trigger>\n <TextInput.Group\n className={cx(className)}\n style={style}\n testId={testId}\n >\n <TextInput\n placeholder={format(new Date(), dateFormat)}\n value={inputValue}\n onChange={handleInputChange}\n id={id}\n isInvalid={isInvalid || isTextInputValueInvalid}\n aria-label=\"Enter date\"\n isDisabled={isDisabled}\n isRequired={isRequired}\n isReadOnly={isReadOnly}\n testId=\"cf-ui-datepicker-input\"\n />\n <IconButton\n aria-label=\"Use calendar\"\n variant=\"secondary\"\n icon={<CalendarIcon aria-label=\"calendar\" variant=\"muted\" />}\n onClick={() => {\n setIsPopoverOpen((prevState) => !prevState);\n }}\n isDisabled={isDisabled}\n testId=\"cf-ui-datepicker-button\"\n />\n </TextInput.Group>\n </Popover.Trigger>\n <Popover.Content>\n <FocusLock returnFocus={true}>\n <Calendar\n {...otherProps}\n className={styles.calendar}\n mode=\"single\"\n selected={selected}\n onSelect={handleDaySelect}\n initialFocus={false}\n defaultMonth={selected}\n fromDate={fromDate}\n toDate={toDate}\n locale={locale}\n />\n </FocusLock>\n </Popover.Content>\n </Popover>\n );\n}\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getStyles = () => {\n return {\n calendar: css({\n padding: tokens.spacingM,\n }),\n };\n};\n","export * from './Calendar';\n","import React from 'react';\n\nimport { getStyles } from './Calendar.styles';\n\nimport {\n DayPicker,\n DayPickerDefaultProps,\n DayPickerSingleProps,\n} from 'react-day-picker';\nimport { CalendarCaption } from './CalendarCaption';\nimport { CalendarCaptionLabel } from './CalendarCaptionLabel';\n\nexport type CalendarProps = DayPickerDefaultProps | DayPickerSingleProps;\n\n/**\n * Provides functionality for calendar date selection. Used as a part of Datepicker component.\n * Based on the [React DayPicker](https://react-day-picker.js.org/) library.\n */\nexport function Calendar(props: CalendarProps) {\n const styles = getStyles();\n\n return (\n <DayPicker\n {...props}\n weekStartsOn={props.weekStartsOn ?? 1}\n classNames={styles}\n components={{\n Caption: CalendarCaption,\n CaptionLabel: CalendarCaptionLabel,\n ...props.components,\n }}\n />\n );\n}\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { ClassNames } from 'react-day-picker';\n\nconst cellSize = 40;\n\nexport const getStyles = (): ClassNames => {\n return {\n vhidden: css({\n boxSizing: 'border-box',\n padding: '0',\n margin: '0',\n background: 'transparent',\n border: '0',\n MozAppearance: 'none',\n WebkitAppearance: 'none',\n appearance: 'none',\n position: 'absolute',\n top: '0',\n width: '1px',\n height: '1px',\n overflow: 'hidden',\n clip: 'rect(1px, 1px, 1px, 1px)',\n }),\n button_reset: css({\n appearance: 'none',\n position: 'relative',\n margin: 0,\n padding: 0,\n border: 'none',\n outline: 'none',\n background: 'none',\n }),\n button: css({\n borderRadius: '50%',\n cursor: 'pointer',\n color: tokens.gray900,\n\n '&[aria-disabled=\"true\"]': {\n color: tokens.gray400,\n pointerEvents: 'none',\n },\n '&:focus, &:active': {\n boxShadow: tokens.glowPrimary,\n },\n\n '&:focus:not(:focus-visible)': {\n boxShadow: 'unset',\n },\n\n '&:hover': {\n backgroundColor: tokens.gray200,\n },\n\n '&.rdp-day_selected:not([aria-disabled=\"true\"])': {\n backgroundColor: tokens.blue600,\n color: tokens.colorWhite,\n fontWeight: tokens.fontWeightDemiBold,\n },\n }),\n\n months: css({\n display: 'flex',\n }),\n month: css({\n margin: '0 1em',\n '&:first-child': {\n marginLeft: 0,\n },\n '&:last-child': {\n marginRight: 0,\n },\n }),\n table: css({\n margin: 0,\n borderCollapse: 'collapse',\n }),\n caption: css({\n position: 'relative',\n padding: 0,\n textAlign: 'left',\n\n '.rdp-multiple_months &': {\n display: 'block',\n textAlign: 'center',\n },\n }),\n caption_dropdowns: css({\n position: 'relative',\n display: 'inline-flex',\n }),\n caption_label: css({\n position: 'relative',\n zIndex: 1,\n display: 'inline-flex',\n alignItems: 'center',\n margin: '0',\n padding: `0 ${tokens.spacingXs}`,\n height: '2rem',\n whiteSpace: 'nowrap',\n fontSize: tokens.fontSizeM,\n fontWeight: tokens.fontWeightMedium,\n borderRadius: tokens.borderRadiusMedium,\n\n '& + &': {\n marginLeft: '3px',\n },\n }),\n nav: css({\n whiteSpace: 'nowrap',\n\n '.rdp-multiple_months .rdp-caption_start &': {\n position: 'absolute',\n top: '50%',\n left: '0',\n transform: 'translateY(-50%)',\n },\n\n '.rdp-multiple_months .rdp-caption_end &': {\n position: 'absolute',\n top: '50%',\n right: '0',\n transform: 'translateY(-50%)',\n },\n }),\n\n nav_button: css({\n width: '2rem',\n height: '2rem',\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: 'transparent',\n }),\n nav_button_previous: css({\n marginRight: '3px',\n }),\n\n dropdown_month: css({\n position: 'relative',\n display: 'inline-flex',\n alignItems: 'center',\n }),\n dropdown: css({\n appearance: 'none',\n position: 'absolute',\n zIndex: 2,\n top: '0',\n bottom: '0',\n left: '0',\n width: '100%',\n margin: '0',\n padding: '0',\n cursor: 'pointer',\n opacity: '0',\n border: 'none',\n backgroundColor: 'transparent',\n fontFamily: 'inherit',\n fontSize: 'inherit',\n lineHeight: 'inherit',\n\n '&:focus:not([disabled]) + div, &:active:not([disabled]) + div': {\n boxShadow: tokens.glowPrimary,\n },\n\n '&:hover:not([disabled]) + div, &:hover:not([disabled]) + div': {\n backgroundColor: tokens.gray200,\n },\n }),\n\n dropdown_icon: css({\n marginLeft: '8px',\n }),\n\n head: css({\n border: 0,\n }),\n\n head_row: css({\n height: '100%',\n }),\n\n row: css({\n height: '100%',\n }),\n\n head_cell: css({\n verticalAlign: 'middle',\n fontSize: tokens.fontSizeS,\n fontWeight: tokens.fontWeightDemiBold,\n textAlign: 'center',\n height: '32px',\n }),\n\n tbody: css({\n border: 0,\n }),\n\n tfoot: css({\n margin: '0.5em',\n }),\n\n cell: css({\n padding: '2px',\n textAlign: 'center',\n }),\n day: css({\n display: 'flex',\n overflow: 'hidden',\n alignItems: 'center',\n justifyContent: 'center',\n width: `${cellSize / 16}rem`,\n height: `${cellSize / 16}rem`,\n borderRadius: '50%',\n\n '&.rdp-day_today:not(.rdp-day_outside)': {\n fontWeight: tokens.fontWeightDemiBold,\n },\n '&.rdp-day_today:not(.rdp-day_outside):not(.rdp-day_selected):not(:hover)': {\n backgroundColor: tokens.blue100,\n },\n }),\n\n nav_icon: css({\n width: '0.625rem',\n }),\n };\n};\n","import React from 'react';\n\nimport {\n CaptionDropdowns,\n CaptionNavigation,\n CaptionProps,\n useDayPicker,\n} from 'react-day-picker';\nimport { Flex } from '@contentful/f36-core';\nimport { getStyles } from './Calendar.styles';\n\nexport const CalendarCaption = (props: CaptionProps) => {\n const styles = getStyles();\n const { fromDate, toDate, numberOfMonths } = useDayPicker();\n\n const isDropdownsVisible = Boolean(\n fromDate && toDate && numberOfMonths === 1,\n );\n\n return (\n <Flex\n alignItems=\"center\"\n justifyContent=\"space-between\"\n className={styles.caption}\n >\n {isDropdownsVisible && <CaptionDropdowns {...props} />}\n <CaptionNavigation {...props} />\n </Flex>\n );\n};\n","import React from 'react';\n\nimport { CaptionLabelProps, useDayPicker } from 'react-day-picker';\nimport { Heading } from '@contentful/f36-typography';\nimport { getStyles } from './Calendar.styles';\nimport { cx } from 'emotion';\n\nexport const CalendarCaptionLabel = (props: CaptionLabelProps) => {\n const styles = getStyles();\n const {\n fromDate,\n toDate,\n formatters: { formatCaption },\n locale,\n numberOfMonths,\n } = useDayPicker();\n\n const isVisuallyHidden = Boolean(fromDate && toDate && numberOfMonths === 1);\n\n return (\n <Heading\n as=\"h2\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n id={props.id}\n className={cx(styles.caption_label, isVisuallyHidden && styles.vhidden)}\n >\n {formatCaption(props.displayMonth, { locale })}\n </Heading>\n );\n};\n"],"names":["Datepicker","DatepickerProps","Calendar","CalendarProps","React","ChangeEventHandler","useCallback","useEffect","useState","CommonProps","format","isValid","parse","startOfDay","endOfDay","getStyles","Popover","DayPickerSingleProps","FocusLock","TextInput","TextInputProps","IconButton","CalendarIcon","PopoverProps","onSelect","day","Date","dateFormat","defaultIsOpen","Omit","Pick","props","styles","testId","className","style","id","isDisabled","isInvalid","isReadOnly","isRequired","usePortal","selected","fromDate","toDate","locale","otherProps","isDateValid","date","getTime","parseInputDate","value","isPopoverOpen","setIsPopoverOpen","inputValue","setInputValue","handleInputChange","HTMLInputElement","e","currentTarget","undefined","handleDaySelect","isTextInputValueInvalid","prevState","calendar","tokens","padding","spacingM","DayPicker","DayPickerDefaultProps","CalendarCaption","CalendarCaptionLabel","weekStartsOn","Caption","CaptionLabel","components","ClassNames","cellSize","vhidden","button_reset","button","borderRadius","cursor","color","gray900","gray400","pointerEvents","boxShadow","glowPrimary","backgroundColor","gray200","blue600","colorWhite","fontWeight","fontWeightDemiBold","months","month","table","caption","caption_dropdowns","caption_label","position","zIndex","display","alignItems","margin","spacingXs","height","whiteSpace","fontSize","fontSizeM","fontWeightMedium","borderRadiusMedium","marginLeft","nav","nav_button","nav_button_previous","dropdown_month","dropdown","appearance","top","bottom","left","width","opacity","border","fontFamily","lineHeight","dropdown_icon","head","head_row","row","head_cell","verticalAlign","fontSizeS","textAlign","tbody","tfoot","cell","overflow","justifyContent","blue100","nav_icon","CaptionDropdowns","CaptionNavigation","CaptionProps","useDayPicker","Flex","numberOfMonths","isDropdownsVisible","Boolean","CaptionLabelProps","Heading","formatters","formatCaption","isVisuallyHidden","displayMonth"],"version":3,"file":"main.js.map"}