@contentful/f36-datepicker 4.81.1 → 5.0.0-alpha.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/esm/index.js +3 -3
  2. package/dist/esm/index.js.map +1 -1
  3. package/dist/index.js +2 -2
  4. package/dist/index.js.map +1 -1
  5. package/package.json +8 -8
package/dist/esm/index.js CHANGED
@@ -8,10 +8,10 @@ import { Popover } from '@contentful/f36-popover';
8
8
  import ie from 'react-focus-lock';
9
9
  import { TextInput } from '@contentful/f36-forms';
10
10
  import { IconButton } from '@contentful/f36-button';
11
- import { CalendarIcon } from '@contentful/f36-icons';
11
+ import { CalendarBlankIcon } from '@contentful/f36-icons';
12
12
 
13
- var X=Object.defineProperty,q=Object.defineProperties;var J=Object.getOwnPropertyDescriptors;var b=Object.getOwnPropertySymbols;var z=Object.prototype.hasOwnProperty,M=Object.prototype.propertyIsEnumerable;var L=(t,o,r)=>o in t?X(t,o,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[o]=r,m=(t,o)=>{for(var r in o||(o={}))z.call(o,r)&&L(t,r,o[r]);if(b)for(var r of b(o))M.call(o,r)&&L(t,r,o[r]);return t},v=(t,o)=>q(t,J(o));var I=(t,o)=>{var r={};for(var a in t)z.call(t,a)&&o.indexOf(a)<0&&(r[a]=t[a]);if(t!=null&&b)for(var a of b(t))o.indexOf(a)<0&&M.call(t,a)&&(r[a]=t[a]);return r};var W=()=>({calendar:css({padding:n.spacingM})});var A=40,E=()=>({vhidden:css({boxSizing:"border-box",padding:"0",margin:"0",background:"transparent",border:"0",MozAppearance:"none",WebkitAppearance:"none",appearance:"none",position:"absolute",top:"0",width:"1px",height:"1px",overflow:"hidden",clip:"rect(1px, 1px, 1px, 1px)"}),button_reset:css({appearance:"none",position:"relative",margin:0,padding:0,border:"none",outline:"none",background:"none"}),button:css({borderRadius:"50%",cursor:"pointer",color:n.gray900,"&.rdp-day_disabled":{color:n.gray400,pointerEvents:"none"},"&:focus, &:active":{boxShadow:n.glowPrimary},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:hover":{backgroundColor:n.gray200},"&.rdp-day_selected:not(.rdp-day_disabled)":{backgroundColor:n.blue600,color:n.colorWhite,fontWeight:n.fontWeightDemiBold}}),months:css({display:"flex"}),month:css({width:"100%",margin:"0 1em","&:first-child":{marginLeft:0},"&:last-child":{marginRight:0}}),table:css({width:"100%",margin:0,borderCollapse:"collapse"}),caption:css({position:"relative",display:"flex",alignItems:"center",justifyContent:"space-between",padding:0,textAlign:"left",".rdp-multiple_months &":{display:"block",textAlign:"center"}}),caption_dropdowns:css({position:"relative",display:"inline-flex"}),caption_label:css({position:"relative",zIndex:1,display:"inline-flex",alignItems:"center",margin:"0",padding:`0 ${n.spacingXs}`,height:"2rem",whiteSpace:"nowrap",fontSize:n.fontSizeM,fontWeight:n.fontWeightMedium,borderRadius:n.borderRadiusMedium,"& + &":{marginLeft:"3px"}}),nav:css({whiteSpace:"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%)"}}),nav_button:css({width:"2rem",height:"2rem",display:"inline-flex",alignItems:"center",justifyContent:"center",backgroundColor:"transparent"}),nav_button_previous:css({marginRight:"3px"}),dropdown_month:css({position:"relative",display:"inline-flex",alignItems:"center"}),dropdown_year:css({position:"relative",display:"inline-flex",alignItems:"center"}),dropdown:css({appearance:"none",position:"absolute",zIndex:2,top:"0",bottom:"0",left:"0",width:"100%",margin:"0",padding:"0",cursor:"pointer",opacity:"0",border:"none",backgroundColor:"transparent",fontFamily:"inherit",fontSize:"inherit",lineHeight:"inherit","&:focus:not([disabled]) + div, &:active:not([disabled]) + div":{boxShadow:n.glowPrimary},"&:hover:not([disabled]) + div, &:hover:not([disabled]) + div":{backgroundColor:n.gray200}}),dropdown_icon:css({marginLeft:"8px"}),head:css({border:0}),head_row:css({height:"100%"}),row:css({height:"100%"}),head_cell:css({verticalAlign:"middle",fontSize:n.fontSizeS,fontWeight:n.fontWeightDemiBold,textAlign:"center",height:"32px",color:n.gray600}),tbody:css({border:0}),tfoot:css({margin:"0.5em"}),cell:css({padding:"2px",textAlign:"center"}),day:css({display:"flex",overflow:"hidden",alignItems:"center",justifyContent:"center",width:`${A/16}rem`,height:`${A/16}rem`,borderRadius:"50%",margin:"auto","&.rdp-day_today:not(.rdp-day_outside)":{fontWeight:n.fontWeightDemiBold},"&.rdp-day_today:not(.rdp-day_outside):not(.rdp-day_selected):not(:hover)":{backgroundColor:n.blue100}}),nav_icon:css({width:"0.625rem"})});function F(t){var r;let o=E();return s.createElement(DayPicker,v(m({captionLayout:"dropdown-buttons"},t),{weekStartsOn:(r=t.weekStartsOn)!=null?r:1,classNames:o}))}function pe(t){let o=W(),N=t,{testId:r="cf-ui-datepicker",className:a,style:k,inputProps:l,popoverProps:x,selected:p,onSelect:d,fromDate:c,toDate:u,locale:P,dateFormat:g="dd LLL yyyy",defaultIsOpen:B,placeholder:_}=N,Y=I(N,["testId","className","style","inputProps","popoverProps","selected","onSelect","fromDate","toDate","locale","dateFormat","defaultIsOpen","placeholder"]),f=useCallback(i=>!(!isValid(i)||c&&startOfDay(c).getTime()>i.getTime()||u&&i.getTime()>endOfDay(u).getTime()),[c,u]),y=useCallback(i=>parse(i,g,new Date,{locale:P}),[P,g]),[j,C]=useState(B),[h,w]=useState(()=>p?format(p,g):"");useEffect(()=>{if(!p){w("");return}p.getTime()!==y(h).getTime()&&w(format(p,g));},[p]);let $=useCallback(i=>{w(i.currentTarget.value);let O=y(i.currentTarget.value);f(O)?d(O):d(void 0);},[d,y,f]),G=useCallback(i=>{i&&f(i)&&(d(i),C(!1));},[d,f]),U=h&&!f(y(h));return s.createElement(Popover,m({isOpen:j,onClose:()=>C(!1)},x),s.createElement(Popover.Trigger,null,s.createElement(le,{className:a,style:k,testId:r,isDisabled:l==null?void 0:l.isDisabled,onTriggerClick:()=>{C(i=>!i);}},s.createElement(TextInput,m({placeholder:typeof _=="undefined"?format(new Date,g):_,value:h,onChange:$,isInvalid:(l==null?void 0:l.isInvalid)||U,"aria-label":"Enter date",testId:"cf-ui-datepicker-input"},l)))),s.createElement(Popover.Content,null,s.createElement(ie,{focusOptions:{preventScroll:!0},returnFocus:!0},s.createElement(F,v(m({},Y),{className:o.calendar,mode:"single",selected:p,onSelect:G,initialFocus:!1,defaultMonth:p,fromDate:c,toDate:u,locale:P})))))}var le=s.forwardRef((t,o)=>{let c=t,{children:r,testId:a,style:k,className:l,onTriggerClick:x,isDisabled:p}=c,d=I(c,["children","testId","style","className","onTriggerClick","isDisabled"]);return s.createElement(TextInput.Group,{ref:o,className:l,style:k,testId:a},r,s.createElement(IconButton,m({"aria-label":"Use calendar",variant:"secondary",icon:s.createElement(CalendarIcon,{"aria-label":"calendar"}),onClick:x,isDisabled:p,testId:"cf-ui-datepicker-button"},d)))});
13
+ var X=Object.defineProperty,q=Object.defineProperties;var J=Object.getOwnPropertyDescriptors;var b=Object.getOwnPropertySymbols;var z=Object.prototype.hasOwnProperty,M=Object.prototype.propertyIsEnumerable;var L=(t,o,r)=>o in t?X(t,o,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[o]=r,m=(t,o)=>{for(var r in o||(o={}))z.call(o,r)&&L(t,r,o[r]);if(b)for(var r of b(o))M.call(o,r)&&L(t,r,o[r]);return t},v=(t,o)=>q(t,J(o));var I=(t,o)=>{var r={};for(var a in t)z.call(t,a)&&o.indexOf(a)<0&&(r[a]=t[a]);if(t!=null&&b)for(var a of b(t))o.indexOf(a)<0&&M.call(t,a)&&(r[a]=t[a]);return r};var W=()=>({calendar:css({padding:n.spacingM})});var A=40,E=()=>({vhidden:css({boxSizing:"border-box",padding:"0",margin:"0",background:"transparent",border:"0",MozAppearance:"none",WebkitAppearance:"none",appearance:"none",position:"absolute",top:"0",width:"1px",height:"1px",overflow:"hidden",clip:"rect(1px, 1px, 1px, 1px)"}),button_reset:css({appearance:"none",position:"relative",margin:0,padding:0,border:"none",outline:"none",background:"none"}),button:css({borderRadius:"50%",cursor:"pointer",color:n.gray900,"&.rdp-day_disabled":{color:n.gray400,pointerEvents:"none"},"&:focus, &:active":{boxShadow:n.glowPrimary},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:hover":{backgroundColor:n.gray200},"&.rdp-day_selected:not(.rdp-day_disabled)":{backgroundColor:n.blue600,color:n.colorWhite,fontWeight:n.fontWeightDemiBold}}),months:css({display:"flex"}),month:css({width:"100%",margin:"0 1em","&:first-child":{marginLeft:0},"&:last-child":{marginRight:0}}),table:css({width:"100%",margin:0,borderCollapse:"collapse"}),caption:css({position:"relative",display:"flex",alignItems:"center",justifyContent:"space-between",padding:0,textAlign:"left",".rdp-multiple_months &":{display:"block",textAlign:"center"}}),caption_dropdowns:css({position:"relative",display:"inline-flex"}),caption_label:css({position:"relative",zIndex:1,display:"inline-flex",alignItems:"center",margin:"0",padding:`0 ${n.spacingXs}`,height:"2rem",whiteSpace:"nowrap",fontSize:n.fontSizeM,fontWeight:n.fontWeightMedium,borderRadius:n.borderRadiusMedium,"& + &":{marginLeft:"3px"}}),nav:css({whiteSpace:"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%)"}}),nav_button:css({width:"2rem",height:"2rem",display:"inline-flex",alignItems:"center",justifyContent:"center",backgroundColor:"transparent"}),nav_button_previous:css({marginRight:"3px"}),dropdown_month:css({position:"relative",display:"inline-flex",alignItems:"center"}),dropdown_year:css({position:"relative",display:"inline-flex",alignItems:"center"}),dropdown:css({appearance:"none",position:"absolute",zIndex:2,top:"0",bottom:"0",left:"0",width:"100%",margin:"0",padding:"0",cursor:"pointer",opacity:"0",border:"none",backgroundColor:"transparent",fontFamily:"inherit",fontSize:"inherit",lineHeight:"inherit","&:focus:not([disabled]) + div, &:active:not([disabled]) + div":{boxShadow:n.glowPrimary},"&:hover:not([disabled]) + div, &:hover:not([disabled]) + div":{backgroundColor:n.gray200}}),dropdown_icon:css({marginLeft:"8px"}),head:css({border:0}),head_row:css({height:"100%"}),row:css({height:"100%"}),head_cell:css({verticalAlign:"middle",fontSize:n.fontSizeS,fontWeight:n.fontWeightDemiBold,textAlign:"center",height:"32px",color:n.gray600}),tbody:css({border:0}),tfoot:css({margin:"0.5em"}),cell:css({padding:"2px",textAlign:"center"}),day:css({display:"flex",overflow:"hidden",alignItems:"center",justifyContent:"center",width:`${A/16}rem`,height:`${A/16}rem`,borderRadius:"50%",margin:"auto","&.rdp-day_today:not(.rdp-day_outside)":{fontWeight:n.fontWeightDemiBold},"&.rdp-day_today:not(.rdp-day_outside):not(.rdp-day_selected):not(:hover)":{backgroundColor:n.blue100}}),nav_icon:css({width:"0.625rem"})});function F(t){var r;let o=E();return s.createElement(DayPicker,v(m({captionLayout:"dropdown-buttons"},t),{weekStartsOn:(r=t.weekStartsOn)!=null?r:1,classNames:o}))}function le(t){let o=W(),N=t,{testId:r="cf-ui-datepicker",className:a,style:D,inputProps:p,popoverProps:x,selected:l,onSelect:d,fromDate:c,toDate:u,locale:P,dateFormat:g="dd LLL yyyy",defaultIsOpen:V,placeholder:_}=N,Y=I(N,["testId","className","style","inputProps","popoverProps","selected","onSelect","fromDate","toDate","locale","dateFormat","defaultIsOpen","placeholder"]),f=useCallback(i=>!(!isValid(i)||c&&startOfDay(c).getTime()>i.getTime()||u&&i.getTime()>endOfDay(u).getTime()),[c,u]),y=useCallback(i=>parse(i,g,new Date,{locale:P}),[P,g]),[j,C]=useState(V),[h,w]=useState(()=>l?format(l,g):"");useEffect(()=>{if(!l){w("");return}l.getTime()!==y(h).getTime()&&w(format(l,g));},[l]);let $=useCallback(i=>{w(i.currentTarget.value);let O=y(i.currentTarget.value);f(O)?d(O):d(void 0);},[d,y,f]),G=useCallback(i=>{i&&f(i)&&(d(i),C(!1));},[d,f]),U=h&&!f(y(h));return s.createElement(Popover,m({isOpen:j,onClose:()=>C(!1)},x),s.createElement(Popover.Trigger,null,s.createElement(pe,{className:a,style:D,testId:r,isDisabled:p==null?void 0:p.isDisabled,onTriggerClick:()=>{C(i=>!i);}},s.createElement(TextInput,m({placeholder:typeof _=="undefined"?format(new Date,g):_,value:h,onChange:$,isInvalid:(p==null?void 0:p.isInvalid)||U,"aria-label":"Enter date",testId:"cf-ui-datepicker-input"},p)))),s.createElement(Popover.Content,null,s.createElement(ie,{focusOptions:{preventScroll:!0},returnFocus:!0},s.createElement(F,v(m({},Y),{className:o.calendar,mode:"single",selected:l,onSelect:G,initialFocus:!1,defaultMonth:l,fromDate:c,toDate:u,locale:P})))))}var pe=s.forwardRef((t,o)=>{let c=t,{children:r,testId:a,style:D,className:p,onTriggerClick:x,isDisabled:l}=c,d=I(c,["children","testId","style","className","onTriggerClick","isDisabled"]);return s.createElement(TextInput.Group,{ref:o,className:p,style:D,testId:a},r,s.createElement(IconButton,m({"aria-label":"Use calendar",variant:"secondary",icon:s.createElement(CalendarBlankIcon,{"aria-label":"calendar"}),onClick:x,isDisabled:l,testId:"cf-ui-datepicker-button"},d)))});
14
14
 
15
- export { F as Calendar, pe as Datepicker };
15
+ export { F as Calendar, le as Datepicker };
16
16
  //# sourceMappingURL=out.js.map
17
17
  //# sourceMappingURL=index.js.map
package/dist/esm/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Datepicker.tsx","../../src/Datepicker.styles.ts","../../src/Calendar/Calendar.tsx","../../src/Calendar/Calendar.styles.ts","../../src/Calendar/index.ts"],"names":["React","useCallback","useEffect","useState","format","isValid","parse","startOfDay","endOfDay","css","tokens","getStyles","cellSize","DayPicker","Calendar","props","_a","styles","__spreadProps","__spreadValues","Day","DayContent","useDayPicker","Popover","FocusLock","TextInput","IconButton","CalendarIcon","Datepicker","testId","className","style","inputProps","popoverProps","selected","onSelect","fromDate","toDate","locale","dateFormat","defaultIsOpen","placeholder","otherProps","__objRest","isDateValid","date","parseInputDate","value","isPopoverOpen","setIsPopoverOpen","inputValue","setInputValue","handleInputChange","e","handleDaySelect","isTextInputValueInvalid","DatepickerTrigger","prevState","ref","children","onTriggerClick","isDisabled","popoverTriggerProps"],"mappings":"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","sourcesContent":["import React, {\n ChangeEventHandler,\n useCallback,\n useEffect,\n useState,\n} from 'react';\nimport type { 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 type { DayPickerSingleProps } from 'react-day-picker';\nimport FocusLock from 'react-focus-lock';\nimport { TextInput, type TextInputProps } from '@contentful/f36-forms';\nimport { IconButton } from '@contentful/f36-button';\nimport { CalendarIcon } from '@contentful/f36-icons';\nimport type { 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 * Custom placeholder for the input field\n */\n placeholder?: string;\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 placeholder,\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={\n typeof placeholder === 'undefined'\n ? format(new Date(), dateFormat)\n : placeholder\n }\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 focusOptions={{ preventScroll: true }} 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\" />}\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 React from 'react';\n\nimport { getStyles } from './Calendar.styles';\n\nimport {\n DayPicker,\n type DayPickerDefaultProps,\n type DayPickerSingleProps,\n} from 'react-day-picker';\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 captionLayout=\"dropdown-buttons\"\n {...props}\n weekStartsOn={props.weekStartsOn ?? 1}\n classNames={styles}\n />\n );\n}\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport type { 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 '&.rdp-day_disabled': {\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(.rdp-day_disabled)': {\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 display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\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 color: tokens.gray600,\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","export * from './Calendar';\nexport { Day, DayContent, useDayPicker } from 'react-day-picker';\nexport type { DayProps, DayContentProps } from 'react-day-picker';\n"]}
1
+ {"version":3,"sources":["../../src/Datepicker.tsx","../../src/Datepicker.styles.ts","../../src/Calendar/Calendar.tsx","../../src/Calendar/Calendar.styles.ts","../../src/Calendar/index.ts"],"names":["React","useCallback","useEffect","useState","format","isValid","parse","startOfDay","endOfDay","css","tokens","getStyles","cellSize","DayPicker","Calendar","props","_a","styles","__spreadProps","__spreadValues","Day","DayContent","useDayPicker","Popover","FocusLock","TextInput","IconButton","CalendarBlankIcon","Datepicker","testId","className","style","inputProps","popoverProps","selected","onSelect","fromDate","toDate","locale","dateFormat","defaultIsOpen","placeholder","otherProps","__objRest","isDateValid","date","parseInputDate","value","isPopoverOpen","setIsPopoverOpen","inputValue","setInputValue","handleInputChange","e","handleDaySelect","isTextInputValueInvalid","DatepickerTrigger","prevState","ref","children","onTriggerClick","isDisabled","popoverTriggerProps"],"mappings":"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","sourcesContent":["import React, {\n ChangeEventHandler,\n useCallback,\n useEffect,\n useState,\n} from 'react';\nimport type { 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 type { DayPickerSingleProps } from 'react-day-picker';\nimport FocusLock from 'react-focus-lock';\nimport { TextInput, type TextInputProps } from '@contentful/f36-forms';\nimport { IconButton } from '@contentful/f36-button';\nimport { CalendarBlankIcon } from '@contentful/f36-icons';\nimport type { 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 * Custom placeholder for the input field\n */\n placeholder?: string;\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 placeholder,\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={\n typeof placeholder === 'undefined'\n ? format(new Date(), dateFormat)\n : placeholder\n }\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 focusOptions={{ preventScroll: true }} 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={<CalendarBlankIcon aria-label=\"calendar\" />}\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 React from 'react';\n\nimport { getStyles } from './Calendar.styles';\n\nimport {\n DayPicker,\n type DayPickerDefaultProps,\n type DayPickerSingleProps,\n} from 'react-day-picker';\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 captionLayout=\"dropdown-buttons\"\n {...props}\n weekStartsOn={props.weekStartsOn ?? 1}\n classNames={styles}\n />\n );\n}\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport type { 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 '&.rdp-day_disabled': {\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(.rdp-day_disabled)': {\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 display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\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 color: tokens.gray600,\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","export * from './Calendar';\nexport { Day, DayContent, useDayPicker } from 'react-day-picker';\nexport type { DayProps, DayContentProps } from 'react-day-picker';\n"]}
package/dist/index.js CHANGED
@@ -17,7 +17,7 @@ var s__default = /*#__PURE__*/_interopDefault(s);
17
17
  var n__default = /*#__PURE__*/_interopDefault(n);
18
18
  var ie__default = /*#__PURE__*/_interopDefault(ie);
19
19
 
20
- var X=Object.defineProperty,q=Object.defineProperties;var J=Object.getOwnPropertyDescriptors;var b=Object.getOwnPropertySymbols;var z=Object.prototype.hasOwnProperty,M=Object.prototype.propertyIsEnumerable;var L=(t,o,r)=>o in t?X(t,o,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[o]=r,m=(t,o)=>{for(var r in o||(o={}))z.call(o,r)&&L(t,r,o[r]);if(b)for(var r of b(o))M.call(o,r)&&L(t,r,o[r]);return t},v=(t,o)=>q(t,J(o));var I=(t,o)=>{var r={};for(var a in t)z.call(t,a)&&o.indexOf(a)<0&&(r[a]=t[a]);if(t!=null&&b)for(var a of b(t))o.indexOf(a)<0&&M.call(t,a)&&(r[a]=t[a]);return r};var W=()=>({calendar:emotion.css({padding:n__default.default.spacingM})});var A=40,E=()=>({vhidden:emotion.css({boxSizing:"border-box",padding:"0",margin:"0",background:"transparent",border:"0",MozAppearance:"none",WebkitAppearance:"none",appearance:"none",position:"absolute",top:"0",width:"1px",height:"1px",overflow:"hidden",clip:"rect(1px, 1px, 1px, 1px)"}),button_reset:emotion.css({appearance:"none",position:"relative",margin:0,padding:0,border:"none",outline:"none",background:"none"}),button:emotion.css({borderRadius:"50%",cursor:"pointer",color:n__default.default.gray900,"&.rdp-day_disabled":{color:n__default.default.gray400,pointerEvents:"none"},"&:focus, &:active":{boxShadow:n__default.default.glowPrimary},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:hover":{backgroundColor:n__default.default.gray200},"&.rdp-day_selected:not(.rdp-day_disabled)":{backgroundColor:n__default.default.blue600,color:n__default.default.colorWhite,fontWeight:n__default.default.fontWeightDemiBold}}),months:emotion.css({display:"flex"}),month:emotion.css({width:"100%",margin:"0 1em","&:first-child":{marginLeft:0},"&:last-child":{marginRight:0}}),table:emotion.css({width:"100%",margin:0,borderCollapse:"collapse"}),caption:emotion.css({position:"relative",display:"flex",alignItems:"center",justifyContent:"space-between",padding:0,textAlign:"left",".rdp-multiple_months &":{display:"block",textAlign:"center"}}),caption_dropdowns:emotion.css({position:"relative",display:"inline-flex"}),caption_label:emotion.css({position:"relative",zIndex:1,display:"inline-flex",alignItems:"center",margin:"0",padding:`0 ${n__default.default.spacingXs}`,height:"2rem",whiteSpace:"nowrap",fontSize:n__default.default.fontSizeM,fontWeight:n__default.default.fontWeightMedium,borderRadius:n__default.default.borderRadiusMedium,"& + &":{marginLeft:"3px"}}),nav:emotion.css({whiteSpace:"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%)"}}),nav_button:emotion.css({width:"2rem",height:"2rem",display:"inline-flex",alignItems:"center",justifyContent:"center",backgroundColor:"transparent"}),nav_button_previous:emotion.css({marginRight:"3px"}),dropdown_month:emotion.css({position:"relative",display:"inline-flex",alignItems:"center"}),dropdown_year:emotion.css({position:"relative",display:"inline-flex",alignItems:"center"}),dropdown:emotion.css({appearance:"none",position:"absolute",zIndex:2,top:"0",bottom:"0",left:"0",width:"100%",margin:"0",padding:"0",cursor:"pointer",opacity:"0",border:"none",backgroundColor:"transparent",fontFamily:"inherit",fontSize:"inherit",lineHeight:"inherit","&:focus:not([disabled]) + div, &:active:not([disabled]) + div":{boxShadow:n__default.default.glowPrimary},"&:hover:not([disabled]) + div, &:hover:not([disabled]) + div":{backgroundColor:n__default.default.gray200}}),dropdown_icon:emotion.css({marginLeft:"8px"}),head:emotion.css({border:0}),head_row:emotion.css({height:"100%"}),row:emotion.css({height:"100%"}),head_cell:emotion.css({verticalAlign:"middle",fontSize:n__default.default.fontSizeS,fontWeight:n__default.default.fontWeightDemiBold,textAlign:"center",height:"32px",color:n__default.default.gray600}),tbody:emotion.css({border:0}),tfoot:emotion.css({margin:"0.5em"}),cell:emotion.css({padding:"2px",textAlign:"center"}),day:emotion.css({display:"flex",overflow:"hidden",alignItems:"center",justifyContent:"center",width:`${A/16}rem`,height:`${A/16}rem`,borderRadius:"50%",margin:"auto","&.rdp-day_today:not(.rdp-day_outside)":{fontWeight:n__default.default.fontWeightDemiBold},"&.rdp-day_today:not(.rdp-day_outside):not(.rdp-day_selected):not(:hover)":{backgroundColor:n__default.default.blue100}}),nav_icon:emotion.css({width:"0.625rem"})});function F(t){var r;let o=E();return s__default.default.createElement(reactDayPicker.DayPicker,v(m({captionLayout:"dropdown-buttons"},t),{weekStartsOn:(r=t.weekStartsOn)!=null?r:1,classNames:o}))}function pe(t){let o=W(),N=t,{testId:r="cf-ui-datepicker",className:a,style:k,inputProps:l,popoverProps:x,selected:p,onSelect:d,fromDate:c,toDate:u,locale:P,dateFormat:g="dd LLL yyyy",defaultIsOpen:B,placeholder:_}=N,Y=I(N,["testId","className","style","inputProps","popoverProps","selected","onSelect","fromDate","toDate","locale","dateFormat","defaultIsOpen","placeholder"]),f=s.useCallback(i=>!(!dateFns.isValid(i)||c&&dateFns.startOfDay(c).getTime()>i.getTime()||u&&i.getTime()>dateFns.endOfDay(u).getTime()),[c,u]),y=s.useCallback(i=>dateFns.parse(i,g,new Date,{locale:P}),[P,g]),[j,C]=s.useState(B),[h,w]=s.useState(()=>p?dateFns.format(p,g):"");s.useEffect(()=>{if(!p){w("");return}p.getTime()!==y(h).getTime()&&w(dateFns.format(p,g));},[p]);let $=s.useCallback(i=>{w(i.currentTarget.value);let O=y(i.currentTarget.value);f(O)?d(O):d(void 0);},[d,y,f]),G=s.useCallback(i=>{i&&f(i)&&(d(i),C(!1));},[d,f]),U=h&&!f(y(h));return s__default.default.createElement(f36Popover.Popover,m({isOpen:j,onClose:()=>C(!1)},x),s__default.default.createElement(f36Popover.Popover.Trigger,null,s__default.default.createElement(le,{className:a,style:k,testId:r,isDisabled:l==null?void 0:l.isDisabled,onTriggerClick:()=>{C(i=>!i);}},s__default.default.createElement(f36Forms.TextInput,m({placeholder:typeof _=="undefined"?dateFns.format(new Date,g):_,value:h,onChange:$,isInvalid:(l==null?void 0:l.isInvalid)||U,"aria-label":"Enter date",testId:"cf-ui-datepicker-input"},l)))),s__default.default.createElement(f36Popover.Popover.Content,null,s__default.default.createElement(ie__default.default,{focusOptions:{preventScroll:!0},returnFocus:!0},s__default.default.createElement(F,v(m({},Y),{className:o.calendar,mode:"single",selected:p,onSelect:G,initialFocus:!1,defaultMonth:p,fromDate:c,toDate:u,locale:P})))))}var le=s__default.default.forwardRef((t,o)=>{let c=t,{children:r,testId:a,style:k,className:l,onTriggerClick:x,isDisabled:p}=c,d=I(c,["children","testId","style","className","onTriggerClick","isDisabled"]);return s__default.default.createElement(f36Forms.TextInput.Group,{ref:o,className:l,style:k,testId:a},r,s__default.default.createElement(f36Button.IconButton,m({"aria-label":"Use calendar",variant:"secondary",icon:s__default.default.createElement(f36Icons.CalendarIcon,{"aria-label":"calendar"}),onClick:x,isDisabled:p,testId:"cf-ui-datepicker-button"},d)))});
20
+ var X=Object.defineProperty,q=Object.defineProperties;var J=Object.getOwnPropertyDescriptors;var b=Object.getOwnPropertySymbols;var z=Object.prototype.hasOwnProperty,M=Object.prototype.propertyIsEnumerable;var L=(t,o,r)=>o in t?X(t,o,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[o]=r,m=(t,o)=>{for(var r in o||(o={}))z.call(o,r)&&L(t,r,o[r]);if(b)for(var r of b(o))M.call(o,r)&&L(t,r,o[r]);return t},v=(t,o)=>q(t,J(o));var I=(t,o)=>{var r={};for(var a in t)z.call(t,a)&&o.indexOf(a)<0&&(r[a]=t[a]);if(t!=null&&b)for(var a of b(t))o.indexOf(a)<0&&M.call(t,a)&&(r[a]=t[a]);return r};var W=()=>({calendar:emotion.css({padding:n__default.default.spacingM})});var A=40,E=()=>({vhidden:emotion.css({boxSizing:"border-box",padding:"0",margin:"0",background:"transparent",border:"0",MozAppearance:"none",WebkitAppearance:"none",appearance:"none",position:"absolute",top:"0",width:"1px",height:"1px",overflow:"hidden",clip:"rect(1px, 1px, 1px, 1px)"}),button_reset:emotion.css({appearance:"none",position:"relative",margin:0,padding:0,border:"none",outline:"none",background:"none"}),button:emotion.css({borderRadius:"50%",cursor:"pointer",color:n__default.default.gray900,"&.rdp-day_disabled":{color:n__default.default.gray400,pointerEvents:"none"},"&:focus, &:active":{boxShadow:n__default.default.glowPrimary},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:hover":{backgroundColor:n__default.default.gray200},"&.rdp-day_selected:not(.rdp-day_disabled)":{backgroundColor:n__default.default.blue600,color:n__default.default.colorWhite,fontWeight:n__default.default.fontWeightDemiBold}}),months:emotion.css({display:"flex"}),month:emotion.css({width:"100%",margin:"0 1em","&:first-child":{marginLeft:0},"&:last-child":{marginRight:0}}),table:emotion.css({width:"100%",margin:0,borderCollapse:"collapse"}),caption:emotion.css({position:"relative",display:"flex",alignItems:"center",justifyContent:"space-between",padding:0,textAlign:"left",".rdp-multiple_months &":{display:"block",textAlign:"center"}}),caption_dropdowns:emotion.css({position:"relative",display:"inline-flex"}),caption_label:emotion.css({position:"relative",zIndex:1,display:"inline-flex",alignItems:"center",margin:"0",padding:`0 ${n__default.default.spacingXs}`,height:"2rem",whiteSpace:"nowrap",fontSize:n__default.default.fontSizeM,fontWeight:n__default.default.fontWeightMedium,borderRadius:n__default.default.borderRadiusMedium,"& + &":{marginLeft:"3px"}}),nav:emotion.css({whiteSpace:"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%)"}}),nav_button:emotion.css({width:"2rem",height:"2rem",display:"inline-flex",alignItems:"center",justifyContent:"center",backgroundColor:"transparent"}),nav_button_previous:emotion.css({marginRight:"3px"}),dropdown_month:emotion.css({position:"relative",display:"inline-flex",alignItems:"center"}),dropdown_year:emotion.css({position:"relative",display:"inline-flex",alignItems:"center"}),dropdown:emotion.css({appearance:"none",position:"absolute",zIndex:2,top:"0",bottom:"0",left:"0",width:"100%",margin:"0",padding:"0",cursor:"pointer",opacity:"0",border:"none",backgroundColor:"transparent",fontFamily:"inherit",fontSize:"inherit",lineHeight:"inherit","&:focus:not([disabled]) + div, &:active:not([disabled]) + div":{boxShadow:n__default.default.glowPrimary},"&:hover:not([disabled]) + div, &:hover:not([disabled]) + div":{backgroundColor:n__default.default.gray200}}),dropdown_icon:emotion.css({marginLeft:"8px"}),head:emotion.css({border:0}),head_row:emotion.css({height:"100%"}),row:emotion.css({height:"100%"}),head_cell:emotion.css({verticalAlign:"middle",fontSize:n__default.default.fontSizeS,fontWeight:n__default.default.fontWeightDemiBold,textAlign:"center",height:"32px",color:n__default.default.gray600}),tbody:emotion.css({border:0}),tfoot:emotion.css({margin:"0.5em"}),cell:emotion.css({padding:"2px",textAlign:"center"}),day:emotion.css({display:"flex",overflow:"hidden",alignItems:"center",justifyContent:"center",width:`${A/16}rem`,height:`${A/16}rem`,borderRadius:"50%",margin:"auto","&.rdp-day_today:not(.rdp-day_outside)":{fontWeight:n__default.default.fontWeightDemiBold},"&.rdp-day_today:not(.rdp-day_outside):not(.rdp-day_selected):not(:hover)":{backgroundColor:n__default.default.blue100}}),nav_icon:emotion.css({width:"0.625rem"})});function F(t){var r;let o=E();return s__default.default.createElement(reactDayPicker.DayPicker,v(m({captionLayout:"dropdown-buttons"},t),{weekStartsOn:(r=t.weekStartsOn)!=null?r:1,classNames:o}))}function le(t){let o=W(),N=t,{testId:r="cf-ui-datepicker",className:a,style:D,inputProps:p,popoverProps:x,selected:l,onSelect:d,fromDate:c,toDate:u,locale:P,dateFormat:g="dd LLL yyyy",defaultIsOpen:V,placeholder:_}=N,Y=I(N,["testId","className","style","inputProps","popoverProps","selected","onSelect","fromDate","toDate","locale","dateFormat","defaultIsOpen","placeholder"]),f=s.useCallback(i=>!(!dateFns.isValid(i)||c&&dateFns.startOfDay(c).getTime()>i.getTime()||u&&i.getTime()>dateFns.endOfDay(u).getTime()),[c,u]),y=s.useCallback(i=>dateFns.parse(i,g,new Date,{locale:P}),[P,g]),[j,C]=s.useState(V),[h,w]=s.useState(()=>l?dateFns.format(l,g):"");s.useEffect(()=>{if(!l){w("");return}l.getTime()!==y(h).getTime()&&w(dateFns.format(l,g));},[l]);let $=s.useCallback(i=>{w(i.currentTarget.value);let O=y(i.currentTarget.value);f(O)?d(O):d(void 0);},[d,y,f]),G=s.useCallback(i=>{i&&f(i)&&(d(i),C(!1));},[d,f]),U=h&&!f(y(h));return s__default.default.createElement(f36Popover.Popover,m({isOpen:j,onClose:()=>C(!1)},x),s__default.default.createElement(f36Popover.Popover.Trigger,null,s__default.default.createElement(pe,{className:a,style:D,testId:r,isDisabled:p==null?void 0:p.isDisabled,onTriggerClick:()=>{C(i=>!i);}},s__default.default.createElement(f36Forms.TextInput,m({placeholder:typeof _=="undefined"?dateFns.format(new Date,g):_,value:h,onChange:$,isInvalid:(p==null?void 0:p.isInvalid)||U,"aria-label":"Enter date",testId:"cf-ui-datepicker-input"},p)))),s__default.default.createElement(f36Popover.Popover.Content,null,s__default.default.createElement(ie__default.default,{focusOptions:{preventScroll:!0},returnFocus:!0},s__default.default.createElement(F,v(m({},Y),{className:o.calendar,mode:"single",selected:l,onSelect:G,initialFocus:!1,defaultMonth:l,fromDate:c,toDate:u,locale:P})))))}var pe=s__default.default.forwardRef((t,o)=>{let c=t,{children:r,testId:a,style:D,className:p,onTriggerClick:x,isDisabled:l}=c,d=I(c,["children","testId","style","className","onTriggerClick","isDisabled"]);return s__default.default.createElement(f36Forms.TextInput.Group,{ref:o,className:p,style:D,testId:a},r,s__default.default.createElement(f36Button.IconButton,m({"aria-label":"Use calendar",variant:"secondary",icon:s__default.default.createElement(f36Icons.CalendarBlankIcon,{"aria-label":"calendar"}),onClick:x,isDisabled:l,testId:"cf-ui-datepicker-button"},d)))});
21
21
 
22
22
  Object.defineProperty(exports, 'Day', {
23
23
  enumerable: true,
@@ -32,6 +32,6 @@ Object.defineProperty(exports, 'useDayPicker', {
32
32
  get: function () { return reactDayPicker.useDayPicker; }
33
33
  });
34
34
  exports.Calendar = F;
35
- exports.Datepicker = pe;
35
+ exports.Datepicker = le;
36
36
  //# sourceMappingURL=out.js.map
37
37
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/Datepicker.tsx","../src/Datepicker.styles.ts","../src/Calendar/Calendar.tsx","../src/Calendar/Calendar.styles.ts","../src/Calendar/index.ts"],"names":["React","useCallback","useEffect","useState","format","isValid","parse","startOfDay","endOfDay","css","tokens","getStyles","cellSize","DayPicker","Calendar","props","_a","styles","__spreadProps","__spreadValues","Day","DayContent","useDayPicker","Popover","FocusLock","TextInput","IconButton","CalendarIcon","Datepicker","testId","className","style","inputProps","popoverProps","selected","onSelect","fromDate","toDate","locale","dateFormat","defaultIsOpen","placeholder","otherProps","__objRest","isDateValid","date","parseInputDate","value","isPopoverOpen","setIsPopoverOpen","inputValue","setInputValue","handleInputChange","e","handleDaySelect","isTextInputValueInvalid","DatepickerTrigger","prevState","ref","children","onTriggerClick","isDisabled","popoverTriggerProps"],"mappings":"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","sourcesContent":["import React, {\n ChangeEventHandler,\n useCallback,\n useEffect,\n useState,\n} from 'react';\nimport type { 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 type { DayPickerSingleProps } from 'react-day-picker';\nimport FocusLock from 'react-focus-lock';\nimport { TextInput, type TextInputProps } from '@contentful/f36-forms';\nimport { IconButton } from '@contentful/f36-button';\nimport { CalendarIcon } from '@contentful/f36-icons';\nimport type { 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 * Custom placeholder for the input field\n */\n placeholder?: string;\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 placeholder,\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={\n typeof placeholder === 'undefined'\n ? format(new Date(), dateFormat)\n : placeholder\n }\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 focusOptions={{ preventScroll: true }} 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\" />}\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 React from 'react';\n\nimport { getStyles } from './Calendar.styles';\n\nimport {\n DayPicker,\n type DayPickerDefaultProps,\n type DayPickerSingleProps,\n} from 'react-day-picker';\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 captionLayout=\"dropdown-buttons\"\n {...props}\n weekStartsOn={props.weekStartsOn ?? 1}\n classNames={styles}\n />\n );\n}\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport type { 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 '&.rdp-day_disabled': {\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(.rdp-day_disabled)': {\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 display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\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 color: tokens.gray600,\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","export * from './Calendar';\nexport { Day, DayContent, useDayPicker } from 'react-day-picker';\nexport type { DayProps, DayContentProps } from 'react-day-picker';\n"]}
1
+ {"version":3,"sources":["../src/Datepicker.tsx","../src/Datepicker.styles.ts","../src/Calendar/Calendar.tsx","../src/Calendar/Calendar.styles.ts","../src/Calendar/index.ts"],"names":["React","useCallback","useEffect","useState","format","isValid","parse","startOfDay","endOfDay","css","tokens","getStyles","cellSize","DayPicker","Calendar","props","_a","styles","__spreadProps","__spreadValues","Day","DayContent","useDayPicker","Popover","FocusLock","TextInput","IconButton","CalendarBlankIcon","Datepicker","testId","className","style","inputProps","popoverProps","selected","onSelect","fromDate","toDate","locale","dateFormat","defaultIsOpen","placeholder","otherProps","__objRest","isDateValid","date","parseInputDate","value","isPopoverOpen","setIsPopoverOpen","inputValue","setInputValue","handleInputChange","e","handleDaySelect","isTextInputValueInvalid","DatepickerTrigger","prevState","ref","children","onTriggerClick","isDisabled","popoverTriggerProps"],"mappings":"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","sourcesContent":["import React, {\n ChangeEventHandler,\n useCallback,\n useEffect,\n useState,\n} from 'react';\nimport type { 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 type { DayPickerSingleProps } from 'react-day-picker';\nimport FocusLock from 'react-focus-lock';\nimport { TextInput, type TextInputProps } from '@contentful/f36-forms';\nimport { IconButton } from '@contentful/f36-button';\nimport { CalendarBlankIcon } from '@contentful/f36-icons';\nimport type { 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 * Custom placeholder for the input field\n */\n placeholder?: string;\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 placeholder,\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={\n typeof placeholder === 'undefined'\n ? format(new Date(), dateFormat)\n : placeholder\n }\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 focusOptions={{ preventScroll: true }} 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={<CalendarBlankIcon aria-label=\"calendar\" />}\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 React from 'react';\n\nimport { getStyles } from './Calendar.styles';\n\nimport {\n DayPicker,\n type DayPickerDefaultProps,\n type DayPickerSingleProps,\n} from 'react-day-picker';\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 captionLayout=\"dropdown-buttons\"\n {...props}\n weekStartsOn={props.weekStartsOn ?? 1}\n classNames={styles}\n />\n );\n}\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport type { 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 '&.rdp-day_disabled': {\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(.rdp-day_disabled)': {\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 display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\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 color: tokens.gray600,\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","export * from './Calendar';\nexport { Day, DayContent, useDayPicker } from 'react-day-picker';\nexport type { DayProps, DayContentProps } from 'react-day-picker';\n"]}
package/package.json CHANGED
@@ -1,18 +1,18 @@
1
1
  {
2
2
  "name": "@contentful/f36-datepicker",
3
- "version": "4.81.1",
3
+ "version": "5.0.0-alpha.3",
4
4
  "description": "Forma 36: Datepicker component",
5
5
  "scripts": {
6
6
  "build": "tsup"
7
7
  },
8
8
  "dependencies": {
9
- "@contentful/f36-core": "^4.81.1",
10
- "@contentful/f36-typography": "^4.81.1",
11
- "@contentful/f36-forms": "^4.81.1",
12
- "@contentful/f36-popover": "^4.81.1",
13
- "@contentful/f36-icons": "^4.29.1",
14
- "@contentful/f36-button": "^4.81.1",
15
- "@contentful/f36-tokens": "^4.2.0",
9
+ "@contentful/f36-core": "^5.0.0-alpha.5",
10
+ "@contentful/f36-typography": "^5.0.0-alpha.3",
11
+ "@contentful/f36-forms": "^5.0.0-alpha.3",
12
+ "@contentful/f36-popover": "^5.0.0-alpha.3",
13
+ "@contentful/f36-icons": "^5.0.0-alpha.49",
14
+ "@contentful/f36-button": "^5.0.0-alpha.3",
15
+ "@contentful/f36-tokens": "^5.0.0-alpha.2",
16
16
  "emotion": "^10.0.17",
17
17
  "date-fns": "^2.28.0",
18
18
  "react-day-picker": "^8.7.1",