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

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.
package/dist/module.js DELETED
@@ -1,409 +0,0 @@
1
- import $hTedu$react, {useCallback as $hTedu$useCallback, useState as $hTedu$useState, useEffect as $hTedu$useEffect} from "react";
2
- import {isValid as $hTedu$isValid, startOfDay as $hTedu$startOfDay, endOfDay as $hTedu$endOfDay, parse as $hTedu$parse, format as $hTedu$format} from "date-fns";
3
- import {Popover as $hTedu$Popover} from "@contentful/f36-popover";
4
- import $hTedu$reactfocuslock from "react-focus-lock";
5
- import {TextInput as $hTedu$TextInput} from "@contentful/f36-forms";
6
- import {IconButton as $hTedu$IconButton} from "@contentful/f36-button";
7
- import {CalendarIcon as $hTedu$CalendarIcon} from "@contentful/f36-icons";
8
- import {css as $hTedu$css, cx as $hTedu$cx} from "emotion";
9
- import $hTedu$contentfulf36tokens from "@contentful/f36-tokens";
10
- import {Day as $hTedu$Day, DayContent as $hTedu$DayContent, useDayPicker as $hTedu$useDayPicker, DayPicker as $hTedu$DayPicker, CaptionDropdowns as $hTedu$CaptionDropdowns, CaptionNavigation as $hTedu$CaptionNavigation} from "react-day-picker";
11
- import {Flex as $hTedu$Flex} from "@contentful/f36-core";
12
- import {Heading as $hTedu$Heading} from "@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$exportWildcard(dest, source) {
18
- Object.keys(source).forEach(function(key) {
19
- if (key === 'default' || key === '__esModule' || dest.hasOwnProperty(key)) {
20
- return;
21
- }
22
-
23
- Object.defineProperty(dest, key, {
24
- enumerable: true,
25
- get: function get() {
26
- return source[key];
27
- }
28
- });
29
- });
30
-
31
- return dest;
32
- }
33
-
34
-
35
-
36
-
37
- const $968b11f2deb5586d$export$ffd58b7f6f099a57 = ()=>{
38
- return {
39
- calendar: /*#__PURE__*/ (0, $hTedu$css)({
40
- padding: (0, $hTedu$contentfulf36tokens).spacingM
41
- })
42
- };
43
- };
44
-
45
-
46
- var $8558f0ab5a94fd0e$exports = {};
47
-
48
- $parcel$export($8558f0ab5a94fd0e$exports, "Day", () => $8558f0ab5a94fd0e$export$7a9a31a911eb9a20);
49
- $parcel$export($8558f0ab5a94fd0e$exports, "DayContent", () => $8558f0ab5a94fd0e$export$16d0634337daf8ec);
50
- $parcel$export($8558f0ab5a94fd0e$exports, "useDayPicker", () => $8558f0ab5a94fd0e$export$332e9e0d64b1f294);
51
-
52
- var $3cc676068e0ce875$exports = {};
53
-
54
- $parcel$export($3cc676068e0ce875$exports, "Calendar", () => $3cc676068e0ce875$export$e1aef45b828286de);
55
-
56
-
57
-
58
- const $8a8549d7899c6d38$var$cellSize = 40;
59
- const $8a8549d7899c6d38$export$ffd58b7f6f099a57 = ()=>{
60
- return {
61
- vhidden: /*#__PURE__*/ (0, $hTedu$css)({
62
- name: "986gn8",
63
- 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);"
64
- }),
65
- button_reset: /*#__PURE__*/ (0, $hTedu$css)({
66
- name: "sun3y7",
67
- styles: "appearance:none;position:relative;margin:0;padding:0;border:none;outline:none;background:none;"
68
- }),
69
- button: /*#__PURE__*/ (0, $hTedu$css)({
70
- borderRadius: "50%",
71
- cursor: "pointer",
72
- color: (0, $hTedu$contentfulf36tokens).gray900,
73
- '&[aria-disabled="true"]': {
74
- color: (0, $hTedu$contentfulf36tokens).gray400,
75
- pointerEvents: "none"
76
- },
77
- "&:focus, &:active": {
78
- boxShadow: (0, $hTedu$contentfulf36tokens).glowPrimary
79
- },
80
- "&:focus:not(:focus-visible)": {
81
- boxShadow: "unset"
82
- },
83
- "&:hover": {
84
- backgroundColor: (0, $hTedu$contentfulf36tokens).gray200
85
- },
86
- '&.rdp-day_selected:not([aria-disabled="true"])': {
87
- backgroundColor: (0, $hTedu$contentfulf36tokens).blue600,
88
- color: (0, $hTedu$contentfulf36tokens).colorWhite,
89
- fontWeight: (0, $hTedu$contentfulf36tokens).fontWeightDemiBold
90
- }
91
- }),
92
- months: /*#__PURE__*/ (0, $hTedu$css)({
93
- name: "k008qs",
94
- styles: "display:flex;"
95
- }),
96
- month: /*#__PURE__*/ (0, $hTedu$css)({
97
- name: "otyogu",
98
- styles: "width:100%;margin:0 1em;&:first-child{margin-left:0;}&:last-child{margin-right:0;}"
99
- }),
100
- table: /*#__PURE__*/ (0, $hTedu$css)({
101
- name: "58awwq",
102
- styles: "width:100%;margin:0;border-collapse:collapse;"
103
- }),
104
- caption: /*#__PURE__*/ (0, $hTedu$css)({
105
- name: "l6jblq",
106
- styles: "position:relative;padding:0;text-align:left;.rdp-multiple_months &{display:block;text-align:center;}"
107
- }),
108
- caption_dropdowns: /*#__PURE__*/ (0, $hTedu$css)({
109
- name: "rmz4vk",
110
- styles: "position:relative;display:inline-flex;"
111
- }),
112
- caption_label: /*#__PURE__*/ (0, $hTedu$css)({
113
- position: "relative",
114
- zIndex: 1,
115
- display: "inline-flex",
116
- alignItems: "center",
117
- margin: "0",
118
- padding: `0 ${(0, $hTedu$contentfulf36tokens).spacingXs}`,
119
- height: "2rem",
120
- whiteSpace: "nowrap",
121
- fontSize: (0, $hTedu$contentfulf36tokens).fontSizeM,
122
- fontWeight: (0, $hTedu$contentfulf36tokens).fontWeightMedium,
123
- borderRadius: (0, $hTedu$contentfulf36tokens).borderRadiusMedium,
124
- "& + &": {
125
- marginLeft: "3px"
126
- }
127
- }),
128
- nav: /*#__PURE__*/ (0, $hTedu$css)({
129
- name: "doey51",
130
- 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%);}"
131
- }),
132
- nav_button: /*#__PURE__*/ (0, $hTedu$css)({
133
- name: "17fd5v8",
134
- styles: "width:2rem;height:2rem;display:inline-flex;align-items:center;justify-content:center;background-color:transparent;"
135
- }),
136
- nav_button_previous: /*#__PURE__*/ (0, $hTedu$css)({
137
- name: "8er82g",
138
- styles: "margin-right:3px;"
139
- }),
140
- dropdown_month: /*#__PURE__*/ (0, $hTedu$css)({
141
- name: "datla1",
142
- styles: "position:relative;display:inline-flex;align-items:center;"
143
- }),
144
- dropdown_year: /*#__PURE__*/ (0, $hTedu$css)({
145
- name: "datla1",
146
- styles: "position:relative;display:inline-flex;align-items:center;"
147
- }),
148
- dropdown: /*#__PURE__*/ (0, $hTedu$css)({
149
- appearance: "none",
150
- position: "absolute",
151
- zIndex: 2,
152
- top: "0",
153
- bottom: "0",
154
- left: "0",
155
- width: "100%",
156
- margin: "0",
157
- padding: "0",
158
- cursor: "pointer",
159
- opacity: "0",
160
- border: "none",
161
- backgroundColor: "transparent",
162
- fontFamily: "inherit",
163
- fontSize: "inherit",
164
- lineHeight: "inherit",
165
- "&:focus:not([disabled]) + div, &:active:not([disabled]) + div": {
166
- boxShadow: (0, $hTedu$contentfulf36tokens).glowPrimary
167
- },
168
- "&:hover:not([disabled]) + div, &:hover:not([disabled]) + div": {
169
- backgroundColor: (0, $hTedu$contentfulf36tokens).gray200
170
- }
171
- }),
172
- dropdown_icon: /*#__PURE__*/ (0, $hTedu$css)({
173
- name: "1isemmb",
174
- styles: "margin-left:8px;"
175
- }),
176
- head: /*#__PURE__*/ (0, $hTedu$css)({
177
- name: "107tt68",
178
- styles: "border:0;"
179
- }),
180
- head_row: /*#__PURE__*/ (0, $hTedu$css)({
181
- name: "10klw3m",
182
- styles: "height:100%;"
183
- }),
184
- row: /*#__PURE__*/ (0, $hTedu$css)({
185
- name: "10klw3m",
186
- styles: "height:100%;"
187
- }),
188
- head_cell: /*#__PURE__*/ (0, $hTedu$css)({
189
- verticalAlign: "middle",
190
- fontSize: (0, $hTedu$contentfulf36tokens).fontSizeS,
191
- fontWeight: (0, $hTedu$contentfulf36tokens).fontWeightDemiBold,
192
- textAlign: "center",
193
- height: "32px"
194
- }),
195
- tbody: /*#__PURE__*/ (0, $hTedu$css)({
196
- name: "107tt68",
197
- styles: "border:0;"
198
- }),
199
- tfoot: /*#__PURE__*/ (0, $hTedu$css)({
200
- name: "jgvdrf",
201
- styles: "margin:0.5em;"
202
- }),
203
- cell: /*#__PURE__*/ (0, $hTedu$css)({
204
- name: "1y3chau",
205
- styles: "padding:2px;text-align:center;"
206
- }),
207
- day: /*#__PURE__*/ (0, $hTedu$css)({
208
- display: "flex",
209
- overflow: "hidden",
210
- alignItems: "center",
211
- justifyContent: "center",
212
- width: `${$8a8549d7899c6d38$var$cellSize / 16}rem`,
213
- height: `${$8a8549d7899c6d38$var$cellSize / 16}rem`,
214
- borderRadius: "50%",
215
- margin: "auto",
216
- "&.rdp-day_today:not(.rdp-day_outside)": {
217
- fontWeight: (0, $hTedu$contentfulf36tokens).fontWeightDemiBold
218
- },
219
- "&.rdp-day_today:not(.rdp-day_outside):not(.rdp-day_selected):not(:hover)": {
220
- backgroundColor: (0, $hTedu$contentfulf36tokens).blue100
221
- }
222
- }),
223
- nav_icon: /*#__PURE__*/ (0, $hTedu$css)({
224
- name: "1ghomkw",
225
- styles: "width:0.625rem;"
226
- })
227
- };
228
- };
229
-
230
-
231
-
232
-
233
-
234
-
235
-
236
- const $5d3970620278ffac$export$23682f394b530c50 = (props)=>{
237
- const styles = (0, $8a8549d7899c6d38$export$ffd58b7f6f099a57)();
238
- const { fromDate: fromDate , toDate: toDate , numberOfMonths: numberOfMonths } = (0, $hTedu$useDayPicker)();
239
- const isDropdownsVisible = Boolean(fromDate && toDate && numberOfMonths === 1);
240
- return /*#__PURE__*/ (0, $hTedu$react).createElement((0, $hTedu$Flex), {
241
- alignItems: "center",
242
- justifyContent: "space-between",
243
- className: styles.caption
244
- }, isDropdownsVisible && /*#__PURE__*/ (0, $hTedu$react).createElement((0, $hTedu$CaptionDropdowns), props), /*#__PURE__*/ (0, $hTedu$react).createElement((0, $hTedu$CaptionNavigation), props));
245
- };
246
-
247
-
248
-
249
-
250
-
251
-
252
-
253
- const $def507898477ef08$export$74e13d11a34c00bf = (props)=>{
254
- const styles = (0, $8a8549d7899c6d38$export$ffd58b7f6f099a57)();
255
- const { fromDate: fromDate , toDate: toDate , formatters: { formatCaption: formatCaption } , locale: locale , numberOfMonths: numberOfMonths } = (0, $hTedu$useDayPicker)();
256
- const isVisuallyHidden = Boolean(fromDate && toDate && numberOfMonths === 1);
257
- return /*#__PURE__*/ (0, $hTedu$react).createElement((0, $hTedu$Heading), {
258
- as: "h2",
259
- "aria-live": "polite",
260
- "aria-atomic": "true",
261
- id: props.id,
262
- className: (0, $hTedu$cx)(styles.caption_label, isVisuallyHidden && styles.vhidden)
263
- }, formatCaption(props.displayMonth, {
264
- locale: locale
265
- }));
266
- };
267
-
268
-
269
- function $3cc676068e0ce875$export$e1aef45b828286de(props) {
270
- const styles = (0, $8a8549d7899c6d38$export$ffd58b7f6f099a57)();
271
- var _weekStartsOn;
272
- return /*#__PURE__*/ (0, $hTedu$react).createElement((0, $hTedu$DayPicker), {
273
- ...props,
274
- weekStartsOn: (_weekStartsOn = props.weekStartsOn) !== null && _weekStartsOn !== void 0 ? _weekStartsOn : 1,
275
- classNames: styles,
276
- components: {
277
- Caption: (0, $5d3970620278ffac$export$23682f394b530c50),
278
- CaptionLabel: (0, $def507898477ef08$export$74e13d11a34c00bf),
279
- ...props.components
280
- }
281
- });
282
- }
283
-
284
-
285
- const $8558f0ab5a94fd0e$export$7a9a31a911eb9a20 = (0, $hTedu$Day);
286
- const $8558f0ab5a94fd0e$export$16d0634337daf8ec = (0, $hTedu$DayContent);
287
- const $8558f0ab5a94fd0e$export$332e9e0d64b1f294 = (0, $hTedu$useDayPicker);
288
- $parcel$exportWildcard($8558f0ab5a94fd0e$exports, $3cc676068e0ce875$exports);
289
-
290
-
291
-
292
-
293
-
294
-
295
-
296
- function $79969cefd37296a5$export$7235422eca03ec90(props) {
297
- const styles = (0, $968b11f2deb5586d$export$ffd58b7f6f099a57)();
298
- 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;
299
- const isDateValid = (0, $hTedu$useCallback)((date)=>{
300
- if (!(0, $hTedu$isValid)(date)) return false;
301
- if (fromDate && (0, $hTedu$startOfDay)(fromDate).getTime() > date.getTime()) return false;
302
- if (toDate && date.getTime() > (0, $hTedu$endOfDay)(toDate).getTime()) return false;
303
- return true;
304
- }, [
305
- fromDate,
306
- toDate
307
- ]);
308
- const parseInputDate = (0, $hTedu$useCallback)((value)=>(0, $hTedu$parse)(value, dateFormat, new Date(), {
309
- locale: locale
310
- }), [
311
- locale,
312
- dateFormat
313
- ]);
314
- const [isPopoverOpen, setIsPopoverOpen] = (0, $hTedu$useState)(defaultIsOpen);
315
- const [inputValue, setInputValue] = (0, $hTedu$useState)(()=>selected ? (0, $hTedu$format)(selected, dateFormat) : "");
316
- (0, $hTedu$useEffect)(()=>{
317
- if (!selected) {
318
- setInputValue("");
319
- return;
320
- }
321
- if (selected.getTime() !== parseInputDate(inputValue).getTime()) setInputValue((0, $hTedu$format)(selected, dateFormat));
322
- // we want to run this hook only when `selected` prop changes
323
- // eslint-disable-next-line react-hooks/exhaustive-deps
324
- }, [
325
- selected
326
- ]);
327
- const handleInputChange = (0, $hTedu$useCallback)((e)=>{
328
- setInputValue(e.currentTarget.value);
329
- const date = parseInputDate(e.currentTarget.value);
330
- if (isDateValid(date)) onSelect(date);
331
- else onSelect(undefined);
332
- }, [
333
- onSelect,
334
- parseInputDate,
335
- isDateValid
336
- ]);
337
- const handleDaySelect = (0, $hTedu$useCallback)((date)=>{
338
- if (date && isDateValid(date)) {
339
- onSelect(date);
340
- setIsPopoverOpen(false);
341
- }
342
- }, [
343
- onSelect,
344
- isDateValid
345
- ]);
346
- const isTextInputValueInvalid = inputValue && !isDateValid(parseInputDate(inputValue));
347
- return /*#__PURE__*/ (0, $hTedu$react).createElement((0, $hTedu$Popover), {
348
- isOpen: isPopoverOpen,
349
- onClose: ()=>setIsPopoverOpen(false),
350
- ...popoverProps
351
- }, /*#__PURE__*/ (0, $hTedu$react).createElement((0, $hTedu$Popover).Trigger, null, /*#__PURE__*/ (0, $hTedu$react).createElement($79969cefd37296a5$var$DatepickerTrigger, {
352
- className: className,
353
- style: style,
354
- testId: testId,
355
- isDisabled: inputProps === null || inputProps === void 0 ? void 0 : inputProps.isDisabled,
356
- onTriggerClick: ()=>{
357
- setIsPopoverOpen((prevState)=>!prevState);
358
- }
359
- }, /*#__PURE__*/ (0, $hTedu$react).createElement((0, $hTedu$TextInput), {
360
- placeholder: (0, $hTedu$format)(new Date(), dateFormat),
361
- value: inputValue,
362
- onChange: handleInputChange,
363
- isInvalid: (inputProps === null || inputProps === void 0 ? void 0 : inputProps.isInvalid) || isTextInputValueInvalid,
364
- "aria-label": "Enter date",
365
- testId: "cf-ui-datepicker-input",
366
- ...inputProps
367
- }))), /*#__PURE__*/ (0, $hTedu$react).createElement((0, $hTedu$Popover).Content, null, /*#__PURE__*/ (0, $hTedu$react).createElement((0, $hTedu$reactfocuslock), {
368
- returnFocus: true
369
- }, /*#__PURE__*/ (0, $hTedu$react).createElement((0, $3cc676068e0ce875$export$e1aef45b828286de), {
370
- ...otherProps,
371
- className: styles.calendar,
372
- mode: "single",
373
- selected: selected,
374
- onSelect: handleDaySelect,
375
- initialFocus: false,
376
- defaultMonth: selected,
377
- fromDate: fromDate,
378
- toDate: toDate,
379
- locale: locale
380
- }))));
381
- }
382
- const $79969cefd37296a5$var$DatepickerTrigger = /*#__PURE__*/ (0, $hTedu$react).forwardRef((props, ref)=>{
383
- const { children: children , testId: testId , style: style , className: className , onTriggerClick: onTriggerClick , isDisabled: isDisabled , // props will be passed from <Popover.Trigger> wrapper
384
- ...popoverTriggerProps } = props;
385
- return /*#__PURE__*/ (0, $hTedu$react).createElement((0, $hTedu$TextInput).Group, {
386
- ref: ref,
387
- className: className,
388
- style: style,
389
- testId: testId
390
- }, children, /*#__PURE__*/ (0, $hTedu$react).createElement((0, $hTedu$IconButton), {
391
- "aria-label": "Use calendar",
392
- variant: "secondary",
393
- icon: /*#__PURE__*/ (0, $hTedu$react).createElement((0, $hTedu$CalendarIcon), {
394
- "aria-label": "calendar",
395
- variant: "muted"
396
- }),
397
- onClick: onTriggerClick,
398
- isDisabled: isDisabled,
399
- testId: "cf-ui-datepicker-button",
400
- ...popoverTriggerProps
401
- }));
402
- });
403
-
404
-
405
-
406
-
407
-
408
- export {$79969cefd37296a5$export$7235422eca03ec90 as Datepicker, $8558f0ab5a94fd0e$export$7a9a31a911eb9a20 as Day, $8558f0ab5a94fd0e$export$16d0634337daf8ec as DayContent, $8558f0ab5a94fd0e$export$332e9e0d64b1f294 as useDayPicker, $3cc676068e0ce875$export$e1aef45b828286de as Calendar};
409
- //# sourceMappingURL=module.js.map
@@ -1 +0,0 @@
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 * from './Calendar';\n","import React, {\n ChangeEventHandler,\n useCallback,\n useEffect,\n useState,\n} from 'react';\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';\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\n /**\n * Props to pass to the TextInput component\n */\n inputProps?: Partial<TextInputProps>;\n\n /**\n * Props to pass to the Popover (Dropdown) component\n */\n popoverProps?: Partial<PopoverProps>;\n} & Omit<\n DayPickerSingleProps,\n | 'mode'\n | 'onSelect'\n | 'fromMonth'\n | 'toMonth'\n | 'fromYear'\n | 'toYear'\n | 'classNames'\n | 'className'\n >;\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 inputProps,\n popoverProps,\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 (!selected) {\n setInputValue('');\n return;\n }\n\n if (selected.getTime() !== parseInputDate(inputValue).getTime()) {\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 {...popoverProps}\n >\n <Popover.Trigger>\n {/* we need this additional component to pass <Popover.Trigger> props to the correct trigger button */}\n <DatepickerTrigger\n className={className}\n style={style}\n testId={testId}\n isDisabled={inputProps?.isDisabled}\n onTriggerClick={() => {\n setIsPopoverOpen((prevState) => !prevState);\n }}\n >\n <TextInput\n placeholder={format(new Date(), dateFormat)}\n value={inputValue}\n onChange={handleInputChange}\n isInvalid={inputProps?.isInvalid || isTextInputValueInvalid}\n aria-label=\"Enter date\"\n testId=\"cf-ui-datepicker-input\"\n {...inputProps}\n />\n </DatepickerTrigger>\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\ntype DatepickerTriggerProps = {\n children: React.ReactNode;\n isDisabled: boolean;\n onTriggerClick: () => void;\n} & Pick<DatepickerProps, 'className' | 'style' | 'testId'>;\n\n// eslint-disable-next-line react/display-name\nconst DatepickerTrigger = React.forwardRef<\n HTMLDivElement,\n DatepickerTriggerProps\n>((props, ref) => {\n const {\n children,\n testId,\n style,\n className,\n onTriggerClick,\n isDisabled,\n // props will be passed from <Popover.Trigger> wrapper\n ...popoverTriggerProps\n } = props;\n\n return (\n <TextInput.Group\n ref={ref}\n className={className}\n style={style}\n testId={testId}\n >\n {children}\n <IconButton\n aria-label=\"Use calendar\"\n variant=\"secondary\"\n icon={<CalendarIcon aria-label=\"calendar\" variant=\"muted\" />}\n onClick={onTriggerClick}\n isDisabled={isDisabled}\n testId=\"cf-ui-datepicker-button\"\n {...popoverTriggerProps}\n />\n </TextInput.Group>\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","import {\n Day as _Day,\n DayContent as _DayContent,\n useDayPicker as _useDayPicker,\n DayProps,\n DayContentProps,\n} from 'react-day-picker';\n\nexport * from './Calendar';\n\n// Hack for Parcel bundler, to build a valid commonJS dist\nconst Day = _Day;\nconst DayContent = _DayContent;\nconst useDayPicker = _useDayPicker;\nexport { Day, DayContent, useDayPicker };\nexport type { DayProps, DayContentProps };\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 =\n | Omit<DayPickerDefaultProps, 'classNames'>\n | Omit<DayPickerSingleProps, 'classNames'>;\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 width: '100%',\n margin: '0 1em',\n '&:first-child': {\n marginLeft: 0,\n },\n '&:last-child': {\n marginRight: 0,\n },\n }),\n table: css({\n width: '100%',\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 dropdown_month: css({\n position: 'relative',\n display: 'inline-flex',\n alignItems: 'center',\n }),\n dropdown_year: 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 margin: 'auto',\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 {\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","React","ChangeEventHandler","useCallback","useEffect","useState","CommonProps","format","isValid","parse","startOfDay","endOfDay","getStyles","Calendar","Popover","DayPickerSingleProps","FocusLock","TextInput","TextInputProps","IconButton","CalendarIcon","PopoverProps","onSelect","day","Date","dateFormat","defaultIsOpen","inputProps","Partial","popoverProps","Omit","props","styles","testId","className","style","selected","fromDate","toDate","locale","otherProps","isDateValid","date","getTime","parseInputDate","value","isPopoverOpen","setIsPopoverOpen","inputValue","setInputValue","handleInputChange","HTMLInputElement","e","currentTarget","undefined","handleDaySelect","isTextInputValueInvalid","isDisabled","prevState","isInvalid","calendar","DatepickerTriggerProps","children","ReactNode","onTriggerClick","Pick","DatepickerTrigger","forwardRef","HTMLDivElement","ref","popoverTriggerProps","tokens","padding","spacingM","Day","_Day","DayContent","_DayContent","useDayPicker","_useDayPicker","DayProps","DayContentProps","DayPicker","DayPickerDefaultProps","CalendarCaption","CalendarCaptionLabel","CalendarProps","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_year","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","Flex","numberOfMonths","isDropdownsVisible","Boolean","CaptionLabelProps","Heading","formatters","formatCaption","isVisuallyHidden","id","displayMonth"],"version":3,"file":"module.js.map"}
@@ -1 +0,0 @@
1
- {"mappings":";;;;AIYA,4BACI,IAAI,CAAC,qBAAqB,EAAE,YAAY,CAAC,GACzC,IAAI,CAAC,oBAAoB,EAAE,YAAY,CAAC,CAAC;AAE7C;;;GAGG;AACH,yBAAyB,KAAK,EAAE,aAAa,eAe5C;ACxBD,OAAA,MAAM,iBAAU,CAAC;AACjB,OAAA,MAAM,+BAAwB,CAAC;AAC/B,OAAA,MAAM,mCAA4B,CAAC;AAEnC,OAAY,EAAE,QAAQ,EAAE,eAAe,EAAE,CAAC;ACI1C,8BAA8B,WAAW,GAAG;IAC1C;;OAEG;IACH,QAAQ,EAAE,CAAC,GAAG,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;IAE1C;;;;;OAKG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IAErC;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;CACtC,GAAG,IAAI,CACJ,oBAAoB,EAClB,MAAM,GACN,UAAU,GACV,WAAW,GACX,SAAS,GACT,UAAU,GACV,QAAQ,GACR,YAAY,GACZ,WAAW,CACd,CAAC;AAEJ;;GAEG;AACH,2BAA2B,KAAK,EAAE,eAAe,eAkIhD","sources":["packages/components/datepicker/src/src/Datepicker.styles.ts","packages/components/datepicker/src/src/Calendar/Calendar.styles.ts","packages/components/datepicker/src/src/Calendar/CalendarCaption.tsx","packages/components/datepicker/src/src/Calendar/CalendarCaptionLabel.tsx","packages/components/datepicker/src/src/Calendar/Calendar.tsx","packages/components/datepicker/src/src/Calendar/index.ts","packages/components/datepicker/src/src/Datepicker.tsx","packages/components/datepicker/src/src/index.ts","packages/components/datepicker/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,"export { Datepicker } from './Datepicker';\nexport type { DatepickerProps } from './Datepicker';\n\nexport * from './Calendar';\n"],"names":[],"version":3,"file":"types.d.ts.map"}