@contentful/f36-datepicker 4.1.0-beta.2 → 4.1.0-beta.5
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/README.mdx +19 -2
- package/dist/main.js +8 -8
- package/dist/main.js.map +1 -1
- package/dist/module.js +8 -8
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +7 -3
- package/dist/types.d.ts.map +1 -1
- package/package.json +9 -9
- package/CHANGELOG.md +0 -41
package/README.mdx
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
title: 'Datepicker'
|
|
3
|
-
status: '
|
|
4
|
-
|
|
3
|
+
status: 'beta'
|
|
4
|
+
isBeta: true
|
|
5
5
|
slug: /components/datepicker/
|
|
6
6
|
github: 'https://github.com/contentful/forma-36/tree/main/packages/components/datepicker'
|
|
7
7
|
storybook: 'https://v4-f36-storybook.netlify.app/?path=/story/components-datepicker'
|
|
@@ -54,6 +54,14 @@ Invalid: "Please enter a valid date!"
|
|
|
54
54
|
|
|
55
55
|
```
|
|
56
56
|
|
|
57
|
+
### Wrapped in FormControl
|
|
58
|
+
|
|
59
|
+
You can use Datepicker with the [FormControl](/components/form-control) in order to enhance layout with input label, help text or validation message.
|
|
60
|
+
|
|
61
|
+
```jsx file=./examples/Datepicker/WithFormControl.tsx
|
|
62
|
+
|
|
63
|
+
```
|
|
64
|
+
|
|
57
65
|
### Open by default
|
|
58
66
|
|
|
59
67
|
Open the dropdown and display the Calendar by default without user interaction
|
|
@@ -62,6 +70,15 @@ Open the dropdown and display the Calendar by default without user interaction
|
|
|
62
70
|
|
|
63
71
|
```
|
|
64
72
|
|
|
73
|
+
### Custom
|
|
74
|
+
|
|
75
|
+
If you need a custom solution, you can build it by leveraging our lower-level components, such as Calendar, Popover, and TextInput.
|
|
76
|
+
For example, Datepicker that uses text input as a trigger without a button.
|
|
77
|
+
|
|
78
|
+
```jsx file=./examples/Datepicker/Custom.tsx
|
|
79
|
+
|
|
80
|
+
```
|
|
81
|
+
|
|
65
82
|
## Props (API reference)
|
|
66
83
|
|
|
67
84
|
<PropsTable of="Datepicker" />
|
package/dist/main.js
CHANGED
|
@@ -123,6 +123,10 @@ const $ca92f136b31cadb2$export$ffd58b7f6f099a57 = ()=>{
|
|
|
123
123
|
name: "datla1",
|
|
124
124
|
styles: "position:relative;display:inline-flex;align-items:center;"
|
|
125
125
|
}),
|
|
126
|
+
dropdown_year: /*#__PURE__*/ $bMnqh$emotion.css({
|
|
127
|
+
name: "datla1",
|
|
128
|
+
styles: "position:relative;display:inline-flex;align-items:center;"
|
|
129
|
+
}),
|
|
126
130
|
dropdown: /*#__PURE__*/ $bMnqh$emotion.css({
|
|
127
131
|
appearance: 'none',
|
|
128
132
|
position: 'absolute',
|
|
@@ -267,7 +271,7 @@ function $fcd3f98a88933011$export$e1aef45b828286de(props) {
|
|
|
267
271
|
|
|
268
272
|
function $af2068a878c80fd7$export$7235422eca03ec90(props) {
|
|
269
273
|
const styles = $ceebd8c575fa61b7$export$ffd58b7f6f099a57();
|
|
270
|
-
const { testId: testId = 'cf-ui-datepicker' , className: className , style: style ,
|
|
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;
|
|
271
275
|
const isDateValid = $bMnqh$react.useCallback((date)=>{
|
|
272
276
|
if (!$bMnqh$datefns.isValid(date)) return false;
|
|
273
277
|
if (fromDate && $bMnqh$datefns.startOfDay(fromDate).getTime() > date.getTime()) return false;
|
|
@@ -318,7 +322,7 @@ function $af2068a878c80fd7$export$7235422eca03ec90(props) {
|
|
|
318
322
|
isOpen: isPopoverOpen,
|
|
319
323
|
onClose: ()=>setIsPopoverOpen(false)
|
|
320
324
|
,
|
|
321
|
-
|
|
325
|
+
...popoverProps
|
|
322
326
|
}, /*#__PURE__*/ ($parcel$interopDefault($bMnqh$react)).createElement($bMnqh$contentfulf36popover.Popover.Trigger, null, /*#__PURE__*/ ($parcel$interopDefault($bMnqh$react)).createElement($bMnqh$contentfulf36forms.TextInput.Group, {
|
|
323
327
|
className: $bMnqh$emotion.cx(className),
|
|
324
328
|
style: style,
|
|
@@ -327,12 +331,8 @@ function $af2068a878c80fd7$export$7235422eca03ec90(props) {
|
|
|
327
331
|
placeholder: $bMnqh$datefns.format(new Date(), dateFormat),
|
|
328
332
|
value: inputValue,
|
|
329
333
|
onChange: handleInputChange,
|
|
330
|
-
|
|
331
|
-
isInvalid: isInvalid || isTextInputValueInvalid,
|
|
334
|
+
isInvalid: (inputProps === null || inputProps === void 0 ? void 0 : inputProps.isInvalid) || isTextInputValueInvalid,
|
|
332
335
|
"aria-label": "Enter date",
|
|
333
|
-
isDisabled: isDisabled,
|
|
334
|
-
isRequired: isRequired,
|
|
335
|
-
isReadOnly: isReadOnly,
|
|
336
336
|
testId: "cf-ui-datepicker-input",
|
|
337
337
|
...inputProps
|
|
338
338
|
}), /*#__PURE__*/ ($parcel$interopDefault($bMnqh$react)).createElement($bMnqh$contentfulf36button.IconButton, {
|
|
@@ -346,7 +346,7 @@ function $af2068a878c80fd7$export$7235422eca03ec90(props) {
|
|
|
346
346
|
setIsPopoverOpen((prevState)=>!prevState
|
|
347
347
|
);
|
|
348
348
|
},
|
|
349
|
-
isDisabled: isDisabled,
|
|
349
|
+
isDisabled: inputProps === null || inputProps === void 0 ? void 0 : inputProps.isDisabled,
|
|
350
350
|
testId: "cf-ui-datepicker-button"
|
|
351
351
|
}))), /*#__PURE__*/ ($parcel$interopDefault($bMnqh$react)).createElement($bMnqh$contentfulf36popover.Popover.Content, null, /*#__PURE__*/ ($parcel$interopDefault($bMnqh$react)).createElement(($parcel$interopDefault($bMnqh$reactfocuslock)), {
|
|
352
352
|
returnFocus: true
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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\n /**\n * Props to pass to the TextInput component\n */\n inputProps?: Partial<TextInputProps>;\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 inputProps,\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 {...inputProps}\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","inputProps","Partial","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"}
|
|
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';\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 (\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 {...popoverProps}\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 isInvalid={inputProps?.isInvalid || isTextInputValueInvalid}\n aria-label=\"Enter date\"\n testId=\"cf-ui-datepicker-input\"\n {...inputProps}\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={inputProps?.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 =\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 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 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\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","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","isInvalid","prevState","isDisabled","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_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","useDayPicker","Flex","numberOfMonths","isDropdownsVisible","Boolean","CaptionLabelProps","Heading","formatters","formatCaption","isVisuallyHidden","id","displayMonth"],"version":3,"file":"main.js.map"}
|
package/dist/module.js
CHANGED
|
@@ -114,6 +114,10 @@ const $8a8549d7899c6d38$export$ffd58b7f6f099a57 = ()=>{
|
|
|
114
114
|
name: "datla1",
|
|
115
115
|
styles: "position:relative;display:inline-flex;align-items:center;"
|
|
116
116
|
}),
|
|
117
|
+
dropdown_year: /*#__PURE__*/ $hTedu$css({
|
|
118
|
+
name: "datla1",
|
|
119
|
+
styles: "position:relative;display:inline-flex;align-items:center;"
|
|
120
|
+
}),
|
|
117
121
|
dropdown: /*#__PURE__*/ $hTedu$css({
|
|
118
122
|
appearance: 'none',
|
|
119
123
|
position: 'absolute',
|
|
@@ -258,7 +262,7 @@ function $3cc676068e0ce875$export$e1aef45b828286de(props) {
|
|
|
258
262
|
|
|
259
263
|
function $79969cefd37296a5$export$7235422eca03ec90(props) {
|
|
260
264
|
const styles = $968b11f2deb5586d$export$ffd58b7f6f099a57();
|
|
261
|
-
const { testId: testId = 'cf-ui-datepicker' , className: className , style: style ,
|
|
265
|
+
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;
|
|
262
266
|
const isDateValid = $hTedu$useCallback((date)=>{
|
|
263
267
|
if (!$hTedu$isValid(date)) return false;
|
|
264
268
|
if (fromDate && $hTedu$startOfDay(fromDate).getTime() > date.getTime()) return false;
|
|
@@ -309,7 +313,7 @@ function $79969cefd37296a5$export$7235422eca03ec90(props) {
|
|
|
309
313
|
isOpen: isPopoverOpen,
|
|
310
314
|
onClose: ()=>setIsPopoverOpen(false)
|
|
311
315
|
,
|
|
312
|
-
|
|
316
|
+
...popoverProps
|
|
313
317
|
}, /*#__PURE__*/ $hTedu$react.createElement($hTedu$Popover.Trigger, null, /*#__PURE__*/ $hTedu$react.createElement($hTedu$TextInput.Group, {
|
|
314
318
|
className: $hTedu$cx(className),
|
|
315
319
|
style: style,
|
|
@@ -318,12 +322,8 @@ function $79969cefd37296a5$export$7235422eca03ec90(props) {
|
|
|
318
322
|
placeholder: $hTedu$format(new Date(), dateFormat),
|
|
319
323
|
value: inputValue,
|
|
320
324
|
onChange: handleInputChange,
|
|
321
|
-
|
|
322
|
-
isInvalid: isInvalid || isTextInputValueInvalid,
|
|
325
|
+
isInvalid: (inputProps === null || inputProps === void 0 ? void 0 : inputProps.isInvalid) || isTextInputValueInvalid,
|
|
323
326
|
"aria-label": "Enter date",
|
|
324
|
-
isDisabled: isDisabled,
|
|
325
|
-
isRequired: isRequired,
|
|
326
|
-
isReadOnly: isReadOnly,
|
|
327
327
|
testId: "cf-ui-datepicker-input",
|
|
328
328
|
...inputProps
|
|
329
329
|
}), /*#__PURE__*/ $hTedu$react.createElement($hTedu$IconButton, {
|
|
@@ -337,7 +337,7 @@ function $79969cefd37296a5$export$7235422eca03ec90(props) {
|
|
|
337
337
|
setIsPopoverOpen((prevState)=>!prevState
|
|
338
338
|
);
|
|
339
339
|
},
|
|
340
|
-
isDisabled: isDisabled,
|
|
340
|
+
isDisabled: inputProps === null || inputProps === void 0 ? void 0 : inputProps.isDisabled,
|
|
341
341
|
testId: "cf-ui-datepicker-button"
|
|
342
342
|
}))), /*#__PURE__*/ $hTedu$react.createElement($hTedu$Popover.Content, null, /*#__PURE__*/ $hTedu$react.createElement($hTedu$reactfocuslock, {
|
|
343
343
|
returnFocus: true
|
package/dist/module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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\n /**\n * Props to pass to the TextInput component\n */\n inputProps?: Partial<TextInputProps>;\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 inputProps,\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 {...inputProps}\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","inputProps","Partial","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":"module.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';\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 (\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 {...popoverProps}\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 isInvalid={inputProps?.isInvalid || isTextInputValueInvalid}\n aria-label=\"Enter date\"\n testId=\"cf-ui-datepicker-input\"\n {...inputProps}\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={inputProps?.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 =\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 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 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\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","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","isInvalid","prevState","isDisabled","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_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","useDayPicker","Flex","numberOfMonths","isDropdownsVisible","Boolean","CaptionLabelProps","Heading","formatters","formatCaption","isVisuallyHidden","id","displayMonth"],"version":3,"file":"module.js.map"}
|
package/dist/types.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { DayPickerDefaultProps, DayPickerSingleProps } from "react-day-picker";
|
|
2
2
|
import { CommonProps } from "@contentful/f36-core";
|
|
3
3
|
import { TextInputProps } from "@contentful/f36-forms";
|
|
4
|
-
import { PopoverProps } from "@contentful/f36-popover
|
|
5
|
-
export type CalendarProps = DayPickerDefaultProps | DayPickerSingleProps
|
|
4
|
+
import { PopoverProps } from "@contentful/f36-popover";
|
|
5
|
+
export type CalendarProps = Omit<DayPickerDefaultProps, 'classNames'> | Omit<DayPickerSingleProps, 'classNames'>;
|
|
6
6
|
/**
|
|
7
7
|
* Provides functionality for calendar date selection. Used as a part of Datepicker component.
|
|
8
8
|
* Based on the [React DayPicker](https://react-day-picker.js.org/) library.
|
|
@@ -28,7 +28,11 @@ export type DatepickerProps = CommonProps & {
|
|
|
28
28
|
* Props to pass to the TextInput component
|
|
29
29
|
*/
|
|
30
30
|
inputProps?: Partial<TextInputProps>;
|
|
31
|
-
|
|
31
|
+
/**
|
|
32
|
+
* Props to pass to the Popover (Dropdown) component
|
|
33
|
+
*/
|
|
34
|
+
popoverProps?: Partial<PopoverProps>;
|
|
35
|
+
} & Omit<DayPickerSingleProps, 'mode' | 'onSelect' | 'fromMonth' | 'toMonth' | 'fromYear' | 'toYear' | 'classNames' | 'className'>;
|
|
32
36
|
/**
|
|
33
37
|
* Provides functionality for date selection.
|
|
34
38
|
*/
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;AIYA,
|
|
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;AEfD,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,eAqIhD","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 { Calendar } from './Calendar';\nexport type { CalendarProps } from './Calendar';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
|
package/package.json
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@contentful/f36-datepicker",
|
|
3
|
-
"version": "4.1.0-beta.
|
|
3
|
+
"version": "4.1.0-beta.5",
|
|
4
4
|
"description": "Forma 36: Datepicker component",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build": "parcel build"
|
|
7
7
|
},
|
|
8
8
|
"dependencies": {
|
|
9
9
|
"@babel/runtime": "^7.6.2",
|
|
10
|
-
"@contentful/f36-core": "^4.11.0
|
|
11
|
-
"@contentful/f36-typography": "^4.11.0
|
|
12
|
-
"@contentful/f36-forms": "^4.11.0
|
|
13
|
-
"@contentful/f36-popover": "^4.11.0
|
|
14
|
-
"@contentful/f36-icons": "^4.11.0
|
|
15
|
-
"@contentful/f36-button": "^4.11.0
|
|
10
|
+
"@contentful/f36-core": "^4.11.0",
|
|
11
|
+
"@contentful/f36-typography": "^4.11.0",
|
|
12
|
+
"@contentful/f36-forms": "^4.11.0",
|
|
13
|
+
"@contentful/f36-popover": "^4.11.0",
|
|
14
|
+
"@contentful/f36-icons": "^4.11.0",
|
|
15
|
+
"@contentful/f36-button": "^4.11.0",
|
|
16
16
|
"@contentful/f36-tokens": "^4.0.0",
|
|
17
17
|
"emotion": "^10.0.17",
|
|
18
18
|
"date-fns": "^2.28.0",
|
|
19
|
-
"react-day-picker": "^8.0.
|
|
20
|
-
"react-focus-lock": "^2.
|
|
19
|
+
"react-day-picker": "^8.0.7",
|
|
20
|
+
"react-focus-lock": "^2.9.1"
|
|
21
21
|
},
|
|
22
22
|
"peerDependencies": {
|
|
23
23
|
"react": ">=16.8"
|
package/CHANGELOG.md
DELETED
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
# @contentful/f36-datepicker
|
|
2
|
-
|
|
3
|
-
## 4.1.0-beta.2
|
|
4
|
-
|
|
5
|
-
### Patch Changes
|
|
6
|
-
|
|
7
|
-
- [#2120](https://github.com/contentful/forma-36/pull/2120) [`b057ce45`](https://github.com/contentful/forma-36/commit/b057ce45acd3e22b05f79b5bcb121c7e1b3a8c44) Thanks [@denkristoffer](https://github.com/denkristoffer)! - fix(datepicker): allow passing input props
|
|
8
|
-
|
|
9
|
-
## 4.1.0-beta.1
|
|
10
|
-
|
|
11
|
-
### Patch Changes
|
|
12
|
-
|
|
13
|
-
- Updated dependencies []:
|
|
14
|
-
- @contentful/f36-button@4.11.0-beta.0
|
|
15
|
-
- @contentful/f36-forms@4.11.0-beta.0
|
|
16
|
-
- @contentful/f36-icons@4.11.0-beta.0
|
|
17
|
-
- @contentful/f36-popover@4.11.0-beta.0
|
|
18
|
-
- @contentful/f36-typography@4.11.0-beta.0
|
|
19
|
-
- @contentful/f36-core@4.11.0-beta.0
|
|
20
|
-
|
|
21
|
-
## 5.0.0-beta.1
|
|
22
|
-
|
|
23
|
-
### Major Changes
|
|
24
|
-
|
|
25
|
-
- [#2112](https://github.com/contentful/forma-36/pull/2112) [`177b8e27`](https://github.com/contentful/forma-36/commit/177b8e27e644a6696afec6e8f8a4d0ea488fddf3) Thanks [@burakukula](https://github.com/burakukula)! - feat: add new Calendar and Datepicker Components https://f36.contentful.com/components/calendar
|
|
26
|
-
|
|
27
|
-
## 4.0.0
|
|
28
|
-
|
|
29
|
-
### Major Changes
|
|
30
|
-
|
|
31
|
-
- [#2005](https://github.com/contentful/forma-36/pull/2005) [`32cac8e8`](https://github.com/contentful/forma-36/commit/32cac8e8bdeedfe29b36bc6025eec11607c93da8) Thanks [@denkristoffer](https://github.com/denkristoffer)! - feat: Datepicker component
|
|
32
|
-
|
|
33
|
-
### Patch Changes
|
|
34
|
-
|
|
35
|
-
- Updated dependencies [[`32cac8e8`](https://github.com/contentful/forma-36/commit/32cac8e8bdeedfe29b36bc6025eec11607c93da8)]:
|
|
36
|
-
- @contentful/f36-icons@4.10.5
|
|
37
|
-
- @contentful/f36-popover@4.10.5
|
|
38
|
-
- @contentful/f36-button@4.10.5
|
|
39
|
-
- @contentful/f36-forms@4.10.5
|
|
40
|
-
- @contentful/f36-typography@4.10.5
|
|
41
|
-
- @contentful/f36-core@4.10.5
|