@contentful/f36-datepicker 6.0.0-alpha.6 → 6.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/esm/index.js CHANGED
@@ -1,2 +1,2 @@
1
- import l,{useCallback,useState,useEffect}from'react';import {isValid,startOfDay,endOfDay,parse,format}from'date-fns';import {css}from'@emotion/css';import n from'@contentful/f36-tokens';import {DayPicker}from'react-day-picker';export{Day,DayContent,useDayPicker}from'react-day-picker';import {Popover}from'@contentful/f36-popover';import ae from'react-focus-lock';import {TextInput}from'@contentful/f36-forms';import {IconButton}from'@contentful/f36-button';import {CalendarBlankIcon}from'@contentful/f36-icons';var X=Object.defineProperty,q=Object.defineProperties;var J=Object.getOwnPropertyDescriptors;var b=Object.getOwnPropertySymbols;var M=Object.prototype.hasOwnProperty,W=Object.prototype.propertyIsEnumerable;var L=(t,o,r)=>o in t?X(t,o,{enumerable:true,configurable:true,writable:true,value:r}):t[o]=r,m=(t,o)=>{for(var r in o||(o={}))M.call(o,r)&&L(t,r,o[r]);if(b)for(var r of b(o))W.call(o,r)&&L(t,r,o[r]);return t},v=(t,o)=>q(t,J(o));var w=(t,o)=>{var r={};for(var a in t)M.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&&W.call(t,a)&&(r[a]=t[a]);return r};var A=()=>({calendar:css({padding:n.spacingM})});var E=40,F=()=>({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:`${E/16}rem`,height:`${E/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 j(t){var r;let o=F();return l.createElement(DayPicker,v(m({captionLayout:"dropdown-buttons"},t),{weekStartsOn:(r=t.weekStartsOn)!=null?r:1,classNames:o}))}function pe(t){let o=A(),O=t,{testId:r="cf-ui-datepicker",className:a,style:D,inputProps:p,popoverProps:x,selected:s,onSelect:d,fromDate:f,toDate:c,locale:P,dateFormat:g="dd LLL yyyy",defaultIsOpen:V,placeholder:_,size:z="medium"}=O,Y=w(O,["testId","className","style","inputProps","popoverProps","selected","onSelect","fromDate","toDate","locale","dateFormat","defaultIsOpen","placeholder","size"]),u=useCallback(i=>!(!isValid(i)||f&&startOfDay(f).getTime()>i.getTime()||c&&i.getTime()>endOfDay(c).getTime()),[f,c]),y=useCallback(i=>parse(i,g,new Date,{locale:P}),[P,g]),[$,C]=useState(V),[h,I]=useState(()=>s?format(s,g):"");useEffect(()=>{if(!s){I("");return}s.getTime()!==y(h).getTime()&&I(format(s,g));},[s]);let G=useCallback(i=>{I(i.currentTarget.value);let N=y(i.currentTarget.value);u(N)?d(N):d(void 0);},[d,y,u]),R=useCallback(i=>{i&&u(i)&&(d(i),C(false));},[d,u]),U=h&&!u(y(h));return l.createElement(Popover,m({isOpen:$,onClose:()=>C(false)},x),l.createElement(Popover.Trigger,null,l.createElement(de,{size:z,className:a,style:D,testId:r,isDisabled:p==null?void 0:p.isDisabled,onTriggerClick:()=>{C(i=>!i);}},l.createElement(TextInput,m({placeholder:typeof _=="undefined"?format(new Date,g):_,value:h,onChange:G,isInvalid:(p==null?void 0:p.isInvalid)||U,"aria-label":"Enter date",testId:"cf-ui-datepicker-input",size:z},p)))),l.createElement(Popover.Content,null,l.createElement(ae,{focusOptions:{preventScroll:true},returnFocus:true},l.createElement(j,v(m({},Y),{className:o.calendar,mode:"single",selected:s,onSelect:R,initialFocus:false,defaultMonth:s,fromDate:f,toDate:c,locale:P})))))}var de=t=>{let c=t,{children:o,testId:r,style:a,className:D,onTriggerClick:p,isDisabled:x,size:s,ref:d}=c,f=w(c,["children","testId","style","className","onTriggerClick","isDisabled","size","ref"]);return l.createElement(TextInput.Group,{ref:d,className:D,style:a,testId:r},o,l.createElement(IconButton,m({"aria-label":"Use calendar",variant:"secondary",icon:l.createElement(CalendarBlankIcon,{"aria-label":"calendar"}),onClick:p,isDisabled:x,testId:"cf-ui-datepicker-button",size:s},f)))};export{j as Calendar,pe as Datepicker};//# sourceMappingURL=index.js.map
1
+ import s,{useCallback,useState,useEffect}from'react';import {isValid,startOfDay,endOfDay,parse,format}from'date-fns';import {css}from'@emotion/css';import n from'@contentful/f36-tokens';import {DayPicker}from'react-day-picker';export{Day,DayContent,useDayPicker}from'react-day-picker';import {Popover}from'@contentful/f36-popover';import ae from'react-focus-lock';import {TextInput}from'@contentful/f36-forms';import {IconButton}from'@contentful/f36-button';import {CalendarBlankIcon}from'@contentful/f36-icons';var q=Object.defineProperty,J=Object.defineProperties;var K=Object.getOwnPropertyDescriptors;var b=Object.getOwnPropertySymbols;var M=Object.prototype.hasOwnProperty,W=Object.prototype.propertyIsEnumerable;var L=(t,o,r)=>o in t?q(t,o,{enumerable:true,configurable:true,writable:true,value:r}):t[o]=r,m=(t,o)=>{for(var r in o||(o={}))M.call(o,r)&&L(t,r,o[r]);if(b)for(var r of b(o))W.call(o,r)&&L(t,r,o[r]);return t},v=(t,o)=>J(t,K(o));var I=(t,o)=>{var r={};for(var a in t)M.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&&W.call(t,a)&&(r[a]=t[a]);return r};var A=()=>({calendar:css({padding:n.spacingM})});var E=40,F=()=>({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:`${E/16}rem`,height:`${E/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 B(t){var r;let o=F();return s.createElement(DayPicker,v(m({captionLayout:"dropdown-buttons"},t),{weekStartsOn:(r=t.weekStartsOn)!=null?r:1,classNames:o}))}function pe(t){let o=A(),N=t,{testId:r="cf-ui-datepicker",className:a,style:D,inputProps:p,popoverProps:x,selected:l,onSelect:d,fromDate:g,toDate:c,locale:P,dateFormat:f="dd LLL yyyy",defaultIsOpen:Y,placeholder:_,size:z="medium"}=N,j=I(N,["testId","className","style","inputProps","popoverProps","selected","onSelect","fromDate","toDate","locale","dateFormat","defaultIsOpen","placeholder","size"]),u=useCallback(i=>!(!isValid(i)||g&&startOfDay(g).getTime()>i.getTime()||c&&i.getTime()>endOfDay(c).getTime()),[g,c]),y=useCallback(i=>parse(i,f,new Date,{locale:P}),[P,f]),[$,C]=useState(Y),[h,w]=useState(()=>l?format(l,f):"");useEffect(()=>{if(!l){w("");return}l.getTime()!==y(h).getTime()&&w(format(l,f));},[l]);let G=useCallback(i=>{w(i.currentTarget.value);let O=y(i.currentTarget.value);u(O)?d(O):d(void 0);},[d,y,u]),U=useCallback(i=>{i&&u(i)&&(d(i),C(false));},[d,u]),X=h&&!u(y(h));return s.createElement(Popover,m({isOpen:$,onClose:()=>C(false)},x),s.createElement(Popover.Trigger,null,s.createElement(de,{size:z,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,f):_,value:h,onChange:G,isInvalid:(p==null?void 0:p.isInvalid)||X,"aria-label":"Enter date",testId:"cf-ui-datepicker-input",size:z},p)))),s.createElement(Popover.Content,null,s.createElement(ae,{focusOptions:{preventScroll:true},returnFocus:true},s.createElement(B,v(m({},j),{className:o.calendar,mode:"single",selected:l,onSelect:U,initialFocus:false,defaultMonth:l,fromDate:g,toDate:c,locale:P})))))}var de=s.forwardRef((t,o)=>{let c=t,{children:r,testId:a,style:D,className:p,onTriggerClick:x,isDisabled:l,size:d}=c,g=I(c,["children","testId","style","className","onTriggerClick","isDisabled","size"]);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",size:d},g)))});export{B as Calendar,pe as Datepicker};//# sourceMappingURL=index.js.map
2
2
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Datepicker.styles.ts","../../src/Calendar/Calendar.styles.ts","../../src/Calendar/Calendar.tsx","../../src/Datepicker.tsx"],"names":["getStyles","css","tokens","cellSize","Calendar","props","_a","styles","React","DayPicker","__spreadProps","__spreadValues","Datepicker","testId","className","style","inputProps","popoverProps","selected","onSelect","fromDate","toDate","locale","dateFormat","defaultIsOpen","placeholder","size","otherProps","__objRest","isDateValid","useCallback","date","isValid","startOfDay","endOfDay","parseInputDate","value","parse","isPopoverOpen","setIsPopoverOpen","useState","inputValue","setInputValue","format","useEffect","handleInputChange","e","handleDaySelect","isTextInputValueInvalid","Popover","DatepickerTrigger","prevState","TextInput","FocusLock","children","onTriggerClick","isDisabled","ref","popoverTriggerProps","IconButton","CalendarBlankIcon"],"mappings":"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","file":"index.js","sourcesContent":["import { css } from '@emotion/css';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getStyles = () => {\n return {\n calendar: css({\n padding: tokens.spacingM,\n }),\n };\n};\n","import { css } from '@emotion/css';\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","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 React, {\n type ChangeEventHandler,\n type RefObject,\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 /** Size variations */\n size?: 'small' | 'medium';\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 size = 'medium',\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 size={size}\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 size={size}\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 ref?: RefObject<HTMLDivElement | null>;\n} & Pick<DatepickerProps, 'className' | 'size' | 'style' | 'testId'>;\n\nconst DatepickerTrigger = (props: DatepickerTriggerProps) => {\n const {\n children,\n testId,\n style,\n className,\n onTriggerClick,\n isDisabled,\n size,\n ref,\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 size={size}\n {...popoverTriggerProps}\n />\n </TextInput.Group>\n );\n};\n"]}
1
+ {"version":3,"sources":["../../src/Datepicker.styles.ts","../../src/Calendar/Calendar.styles.ts","../../src/Calendar/Calendar.tsx","../../src/Datepicker.tsx"],"names":["getStyles","css","tokens","cellSize","Calendar","props","_a","styles","React","DayPicker","__spreadProps","__spreadValues","Datepicker","testId","className","style","inputProps","popoverProps","selected","onSelect","fromDate","toDate","locale","dateFormat","defaultIsOpen","placeholder","size","otherProps","__objRest","isDateValid","useCallback","date","isValid","startOfDay","endOfDay","parseInputDate","value","parse","isPopoverOpen","setIsPopoverOpen","useState","inputValue","setInputValue","format","useEffect","handleInputChange","e","handleDaySelect","isTextInputValueInvalid","Popover","DatepickerTrigger","prevState","TextInput","FocusLock","ref","children","onTriggerClick","isDisabled","popoverTriggerProps","IconButton","CalendarBlankIcon"],"mappings":"qlCAGO,IAAMA,CAAAA,CAAY,KAChB,CACL,QAAA,CAAUC,GAAAA,CAAI,CACZ,OAAA,CAASC,CAAAA,CAAO,QAClB,CAAC,CACH,CAAA,CAAA,CCJF,IAAMC,CAAAA,CAAW,EAAA,CAEJH,CAAAA,CAAY,KAChB,CACL,OAAA,CAASC,GAAAA,CAAI,CACX,SAAA,CAAW,aACX,OAAA,CAAS,GAAA,CACT,MAAA,CAAQ,GAAA,CACR,UAAA,CAAY,aAAA,CACZ,MAAA,CAAQ,GAAA,CACR,aAAA,CAAe,MAAA,CACf,gBAAA,CAAkB,MAAA,CAClB,UAAA,CAAY,MAAA,CACZ,QAAA,CAAU,UAAA,CACV,GAAA,CAAK,GAAA,CACL,KAAA,CAAO,KAAA,CACP,MAAA,CAAQ,KAAA,CACR,QAAA,CAAU,QAAA,CACV,IAAA,CAAM,0BACR,CAAC,CAAA,CACD,YAAA,CAAcA,GAAAA,CAAI,CAChB,UAAA,CAAY,MAAA,CACZ,QAAA,CAAU,UAAA,CACV,MAAA,CAAQ,CAAA,CACR,OAAA,CAAS,CAAA,CACT,MAAA,CAAQ,MAAA,CACR,OAAA,CAAS,MAAA,CACT,UAAA,CAAY,MACd,CAAC,CAAA,CACD,MAAA,CAAQA,GAAAA,CAAI,CACV,YAAA,CAAc,KAAA,CACd,MAAA,CAAQ,SAAA,CACR,KAAA,CAAOC,CAAAA,CAAO,OAAA,CAEd,oBAAA,CAAsB,CACpB,KAAA,CAAOA,CAAAA,CAAO,OAAA,CACd,cAAe,MACjB,CAAA,CACA,mBAAA,CAAqB,CACnB,SAAA,CAAWA,CAAAA,CAAO,WACpB,CAAA,CAEA,6BAAA,CAA+B,CAC7B,SAAA,CAAW,OACb,CAAA,CAEA,SAAA,CAAW,CACT,eAAA,CAAiBA,CAAAA,CAAO,OAC1B,CAAA,CAEA,2CAAA,CAA6C,CAC3C,eAAA,CAAiBA,CAAAA,CAAO,OAAA,CACxB,KAAA,CAAOA,CAAAA,CAAO,UAAA,CACd,UAAA,CAAYA,CAAAA,CAAO,kBACrB,CACF,CAAC,CAAA,CAED,MAAA,CAAQD,GAAAA,CAAI,CACV,OAAA,CAAS,MACX,CAAC,CAAA,CACD,KAAA,CAAOA,GAAAA,CAAI,CACT,KAAA,CAAO,MAAA,CACP,MAAA,CAAQ,OAAA,CACR,eAAA,CAAiB,CACf,UAAA,CAAY,CACd,CAAA,CACA,cAAA,CAAgB,CACd,WAAA,CAAa,CACf,CACF,CAAC,CAAA,CACD,KAAA,CAAOA,GAAAA,CAAI,CACT,MAAO,MAAA,CACP,MAAA,CAAQ,CAAA,CACR,cAAA,CAAgB,UAClB,CAAC,CAAA,CACD,OAAA,CAASA,GAAAA,CAAI,CACX,QAAA,CAAU,UAAA,CACV,OAAA,CAAS,MAAA,CACT,UAAA,CAAY,QAAA,CACZ,cAAA,CAAgB,eAAA,CAChB,OAAA,CAAS,CAAA,CACT,SAAA,CAAW,MAAA,CAEX,wBAAA,CAA0B,CACxB,OAAA,CAAS,OAAA,CACT,SAAA,CAAW,QACb,CACF,CAAC,CAAA,CACD,iBAAA,CAAmBA,GAAAA,CAAI,CACrB,QAAA,CAAU,UAAA,CACV,OAAA,CAAS,aACX,CAAC,CAAA,CACD,aAAA,CAAeA,GAAAA,CAAI,CACjB,QAAA,CAAU,UAAA,CACV,MAAA,CAAQ,CAAA,CACR,OAAA,CAAS,aAAA,CACT,UAAA,CAAY,QAAA,CACZ,MAAA,CAAQ,GAAA,CACR,OAAA,CAAS,CAAA,EAAA,EAAKC,CAAAA,CAAO,SAAS,CAAA,CAAA,CAC9B,MAAA,CAAQ,MAAA,CACR,UAAA,CAAY,QAAA,CACZ,SAAUA,CAAAA,CAAO,SAAA,CACjB,UAAA,CAAYA,CAAAA,CAAO,gBAAA,CACnB,YAAA,CAAcA,CAAAA,CAAO,kBAAA,CAErB,OAAA,CAAS,CACP,UAAA,CAAY,KACd,CACF,CAAC,CAAA,CACD,GAAA,CAAKD,GAAAA,CAAI,CACP,UAAA,CAAY,QAAA,CAEZ,2CAAA,CAA6C,CAC3C,QAAA,CAAU,UAAA,CACV,GAAA,CAAK,KAAA,CACL,IAAA,CAAM,GAAA,CACN,SAAA,CAAW,kBACb,EAEA,yCAAA,CAA2C,CACzC,QAAA,CAAU,UAAA,CACV,GAAA,CAAK,KAAA,CACL,KAAA,CAAO,GAAA,CACP,SAAA,CAAW,kBACb,CACF,CAAC,CAAA,CAED,UAAA,CAAYA,GAAAA,CAAI,CACd,KAAA,CAAO,MAAA,CACP,MAAA,CAAQ,MAAA,CACR,OAAA,CAAS,aAAA,CACT,UAAA,CAAY,QAAA,CACZ,cAAA,CAAgB,QAAA,CAChB,eAAA,CAAiB,aACnB,CAAC,CAAA,CACD,oBAAqBA,GAAAA,CAAI,CACvB,WAAA,CAAa,KACf,CAAC,CAAA,CACD,cAAA,CAAgBA,GAAAA,CAAI,CAClB,QAAA,CAAU,UAAA,CACV,OAAA,CAAS,aAAA,CACT,UAAA,CAAY,QACd,CAAC,CAAA,CACD,aAAA,CAAeA,GAAAA,CAAI,CACjB,QAAA,CAAU,UAAA,CACV,OAAA,CAAS,aAAA,CACT,UAAA,CAAY,QACd,CAAC,CAAA,CACD,QAAA,CAAUA,GAAAA,CAAI,CACZ,UAAA,CAAY,MAAA,CACZ,QAAA,CAAU,UAAA,CACV,MAAA,CAAQ,CAAA,CACR,GAAA,CAAK,GAAA,CACL,MAAA,CAAQ,GAAA,CACR,IAAA,CAAM,GAAA,CACN,KAAA,CAAO,MAAA,CACP,MAAA,CAAQ,GAAA,CACR,OAAA,CAAS,GAAA,CACT,MAAA,CAAQ,SAAA,CACR,OAAA,CAAS,GAAA,CACT,MAAA,CAAQ,MAAA,CACR,eAAA,CAAiB,aAAA,CACjB,UAAA,CAAY,SAAA,CACZ,QAAA,CAAU,SAAA,CACV,UAAA,CAAY,UAEZ,+DAAA,CAAiE,CAC/D,SAAA,CAAWC,CAAAA,CAAO,WACpB,CAAA,CAEA,8DAAA,CAAgE,CAC9D,eAAA,CAAiBA,CAAAA,CAAO,OAC1B,CACF,CAAC,CAAA,CAED,aAAA,CAAeD,GAAAA,CAAI,CACjB,UAAA,CAAY,KACd,CAAC,CAAA,CAED,IAAA,CAAMA,GAAAA,CAAI,CACR,MAAA,CAAQ,CACV,CAAC,CAAA,CAED,QAAA,CAAUA,GAAAA,CAAI,CACZ,MAAA,CAAQ,MACV,CAAC,CAAA,CAED,GAAA,CAAKA,GAAAA,CAAI,CACP,MAAA,CAAQ,MACV,CAAC,CAAA,CAED,SAAA,CAAWA,GAAAA,CAAI,CACb,aAAA,CAAe,QAAA,CACf,QAAA,CAAUC,CAAAA,CAAO,SAAA,CACjB,UAAA,CAAYA,CAAAA,CAAO,kBAAA,CACnB,SAAA,CAAW,QAAA,CACX,MAAA,CAAQ,MAAA,CACR,KAAA,CAAOA,CAAAA,CAAO,OAChB,CAAC,CAAA,CAED,MAAOD,GAAAA,CAAI,CACT,MAAA,CAAQ,CACV,CAAC,CAAA,CAED,KAAA,CAAOA,GAAAA,CAAI,CACT,MAAA,CAAQ,OACV,CAAC,CAAA,CAED,IAAA,CAAMA,GAAAA,CAAI,CACR,OAAA,CAAS,KAAA,CACT,SAAA,CAAW,QACb,CAAC,CAAA,CACD,GAAA,CAAKA,GAAAA,CAAI,CACP,OAAA,CAAS,MAAA,CACT,QAAA,CAAU,QAAA,CACV,UAAA,CAAY,QAAA,CACZ,cAAA,CAAgB,QAAA,CAChB,KAAA,CAAO,CAAA,EAAGE,CAAAA,CAAW,EAAE,CAAA,GAAA,CAAA,CACvB,MAAA,CAAQ,CAAA,EAAGA,CAAAA,CAAW,EAAE,CAAA,GAAA,CAAA,CACxB,YAAA,CAAc,KAAA,CACd,MAAA,CAAQ,MAAA,CAER,uCAAA,CAAyC,CACvC,UAAA,CAAYD,CAAAA,CAAO,kBACrB,CAAA,CACA,0EAAA,CACE,CACE,eAAA,CAAiBA,CAAAA,CAAO,OAC1B,CACJ,CAAC,CAAA,CAED,QAAA,CAAUD,IAAI,CACZ,KAAA,CAAO,UACT,CAAC,CACH,CAAA,CAAA,CC5NK,SAASG,CAAAA,CAASC,CAAAA,CAAsB,CAlB/C,IAAAC,CAAAA,CAmBE,IAAMC,CAAAA,CAASP,CAAAA,EAAU,CAEzB,OACEQ,CAAAA,CAAA,aAAA,CAACC,SAAAA,CAAAC,CAAAA,CAAAC,CAAAA,CAAA,CACC,aAAA,CAAc,kBAAA,CAAA,CACVN,CAAAA,CAAAA,CAFL,CAGC,YAAA,CAAA,CAAcC,CAAAA,CAAAD,CAAAA,CAAM,YAAA,GAAN,IAAA,CAAAC,CAAAA,CAAsB,CAAA,CACpC,UAAA,CAAYC,CAAAA,CAAAA,CACd,CAEJ,CCyCO,SAASK,EAAAA,CAAWP,CAAAA,CAAwB,CACjD,IAAME,CAAAA,CAASP,CAAAA,EAAU,CAiBrBM,CAAAA,CAAAD,CAAAA,CAfF,CAAA,MAAA,CAAAQ,CAAAA,CAAS,kBAAA,CACT,SAAA,CAAAC,CAAAA,CACA,KAAA,CAAAC,CAAAA,CACA,UAAA,CAAAC,CAAAA,CACA,YAAA,CAAAC,CAAAA,CACA,QAAA,CAAAC,CAAAA,CACA,QAAA,CAAAC,CAAAA,CACA,QAAA,CAAAC,CAAAA,CACA,MAAA,CAAAC,CAAAA,CACA,MAAA,CAAAC,CAAAA,CACA,UAAA,CAAAC,CAAAA,CAAa,aAAA,CACb,aAAA,CAAAC,CAAAA,CACA,WAAA,CAAAC,CAAAA,CACA,IAAA,CAAAC,CAAAA,CAAO,QAtFX,CAAA,CAwFMpB,CAAAA,CADCqB,CAAAA,CAAAC,CAAAA,CACDtB,CAAAA,CADC,CAdH,QAAA,CACA,WAAA,CACA,OAAA,CACA,YAAA,CACA,cAAA,CACA,UAAA,CACA,UAAA,CACA,UAAA,CACA,SACA,QAAA,CACA,YAAA,CACA,eAAA,CACA,aAAA,CACA,MAAA,CAAA,CAAA,CAIIuB,CAAAA,CAAcC,WAAAA,CACjBC,CAAAA,EACK,EAAA,CAACC,OAAAA,CAAQD,CAAI,CAAA,EAGbX,CAAAA,EAAYa,UAAAA,CAAWb,CAAQ,CAAA,CAAE,OAAA,EAAQ,CAAIW,CAAAA,CAAK,OAAA,EAAQ,EAG1DV,CAAAA,EAAUU,CAAAA,CAAK,OAAA,EAAQ,CAAIG,QAAAA,CAASb,CAAM,CAAA,CAAE,OAAA,EAAQ,CAAA,CAK1D,CAACD,CAAAA,CAAUC,CAAM,CACnB,CAAA,CAEMc,CAAAA,CAAiBL,WAAAA,CACpBM,CAAAA,EAAkBC,KAAAA,CAAMD,CAAAA,CAAOb,CAAAA,CAAY,IAAI,IAAA,CAAQ,CAAE,MAAA,CAAAD,CAAO,CAAC,CAAA,CAClE,CAACA,CAAAA,CAAQC,CAAU,CACrB,CAAA,CAEM,CAACe,CAAAA,CAAeC,CAAgB,CAAA,CAAIC,QAAAA,CAAShB,CAAa,CAAA,CAC1D,CAACiB,CAAAA,CAAYC,CAAa,CAAA,CAAIF,QAAAA,CAAiB,IACnDtB,CAAAA,CAAWyB,MAAAA,CAAOzB,CAAAA,CAAUK,CAAU,CAAA,CAAI,EAC5C,CAAA,CAEAqB,SAAAA,CAAU,IAAM,CACd,GAAI,CAAC1B,CAAAA,CAAU,CACbwB,CAAAA,CAAc,EAAE,CAAA,CAChB,MACF,CAEIxB,CAAAA,CAAS,OAAA,EAAQ,GAAMiB,CAAAA,CAAeM,CAAU,CAAA,CAAE,OAAA,EAAQ,EAC5DC,CAAAA,CAAcC,MAAAA,CAAOzB,CAAAA,CAAUK,CAAU,CAAC,EAI9C,CAAA,CAAG,CAACL,CAAQ,CAAC,CAAA,CAEb,IAAM2B,CAAAA,CAA0Df,WAAAA,CAC7DgB,CAAAA,EAAM,CACLJ,CAAAA,CAAcI,CAAAA,CAAE,aAAA,CAAc,KAAK,CAAA,CAEnC,IAAMf,CAAAA,CAAOI,CAAAA,CAAeW,CAAAA,CAAE,aAAA,CAAc,KAAK,CAAA,CAC7CjB,CAAAA,CAAYE,CAAI,CAAA,CAClBZ,CAAAA,CAASY,CAAI,CAAA,CAEbZ,CAAAA,CAAS,MAAS,EAEtB,CAAA,CACA,CAACA,CAAAA,CAAUgB,CAAAA,CAAgBN,CAAW,CACxC,CAAA,CAEMkB,CAAAA,CAAkBjB,WAAAA,CACrBC,CAAAA,EAAe,CACVA,CAAAA,EAAQF,CAAAA,CAAYE,CAAI,CAAA,GAC1BZ,CAAAA,CAASY,CAAI,CAAA,CACbQ,CAAAA,CAAiB,KAAK,CAAA,EAE1B,CAAA,CACA,CAACpB,CAAAA,CAAUU,CAAW,CACxB,EAEMmB,CAAAA,CACJP,CAAAA,EAAc,CAACZ,CAAAA,CAAYM,CAAAA,CAAeM,CAAU,CAAC,CAAA,CAEvD,OACEjC,CAAAA,CAAA,aAAA,CAACyC,OAAAA,CAAAtC,CAAAA,CAAA,CACC,MAAA,CAAQ2B,CAAAA,CACR,OAAA,CAAS,IAAMC,CAAAA,CAAiB,KAAK,CAAA,CAAA,CACjCtB,CAAAA,CAAAA,CAEJT,CAAAA,CAAA,aAAA,CAACyC,OAAAA,CAAQ,OAAA,CAAR,IAAA,CAECzC,CAAAA,CAAA,aAAA,CAAC0C,EAAAA,CAAA,CACC,IAAA,CAAMxB,CAAAA,CACN,SAAA,CAAWZ,CAAAA,CACX,KAAA,CAAOC,CAAAA,CACP,MAAA,CAAQF,CAAAA,CACR,UAAA,CAAYG,CAAAA,EAAA,IAAA,CAAA,MAAA,CAAAA,CAAAA,CAAY,UAAA,CACxB,cAAA,CAAgB,IAAM,CACpBuB,CAAAA,CAAkBY,CAAAA,EAAc,CAACA,CAAS,EAC5C,CAAA,CAAA,CAEA3C,CAAAA,CAAA,aAAA,CAAC4C,SAAAA,CAAAzC,CAAAA,CAAA,CACC,WAAA,CACE,OAAOc,CAAAA,EAAgB,WAAA,CACnBkB,MAAAA,CAAO,IAAI,IAAA,CAAQpB,CAAU,CAAA,CAC7BE,CAAAA,CAEN,KAAA,CAAOgB,CAAAA,CACP,QAAA,CAAUI,CAAAA,CACV,SAAA,CAAA,CAAW7B,CAAAA,EAAA,IAAA,CAAA,MAAA,CAAAA,CAAAA,CAAY,SAAA,GAAagC,CAAAA,CACpC,YAAA,CAAW,YAAA,CACX,MAAA,CAAO,wBAAA,CACP,IAAA,CAAMtB,CAAAA,CAAAA,CACFV,CAAAA,CACN,CACF,CACF,CAAA,CACAR,CAAAA,CAAA,aAAA,CAACyC,OAAAA,CAAQ,OAAA,CAAR,IAAA,CACCzC,EAAA,aAAA,CAAC6C,EAAAA,CAAA,CAAU,YAAA,CAAc,CAAE,aAAA,CAAe,IAAK,CAAA,CAAG,WAAA,CAAa,IAAA,CAAA,CAC7D7C,CAAAA,CAAA,aAAA,CAACJ,CAAAA,CAAAM,CAAAA,CAAAC,CAAAA,CAAA,EAAA,CACKgB,CAAAA,CAAAA,CADL,CAEC,SAAA,CAAWpB,CAAAA,CAAO,QAAA,CAClB,IAAA,CAAK,QAAA,CACL,QAAA,CAAUW,CAAAA,CACV,QAAA,CAAU6B,CAAAA,CACV,YAAA,CAAc,KAAA,CACd,YAAA,CAAc7B,CAAAA,CACd,QAAA,CAAUE,CAAAA,CACV,MAAA,CAAQC,CAAAA,CACR,MAAA,CAAQC,CAAAA,CAAAA,CACV,CACF,CACF,CACF,CAEJ,CAQA,IAAM4B,EAAAA,CAAoB1C,CAAAA,CAAM,UAAA,CAG9B,CAACH,CAAAA,CAAOiD,CAAAA,GAAQ,CAChB,IAUIhD,CAAAA,CAAAD,CAAAA,CATF,CAAA,QAAA,CAAAkD,CAAAA,CACA,MAAA,CAAA1C,CAAAA,CACA,KAAA,CAAAE,CAAAA,CACA,SAAA,CAAAD,CAAAA,CACA,cAAA,CAAA0C,EACA,UAAA,CAAAC,CAAAA,CACA,IAAA,CAAA/B,CAnOJ,CAAA,CAsOMpB,CAAAA,CADCoD,CAAAA,CAAA9B,CAAAA,CACDtB,CAAAA,CADC,CARH,UAAA,CACA,QAAA,CACA,OAAA,CACA,WAAA,CACA,gBAAA,CACA,YAAA,CACA,MAAA,CAAA,CAAA,CAKF,OACEE,CAAAA,CAAA,aAAA,CAAC4C,SAAAA,CAAU,KAAA,CAAV,CACC,GAAA,CAAKE,CAAAA,CACL,SAAA,CAAWxC,CAAAA,CACX,KAAA,CAAOC,CAAAA,CACP,MAAA,CAAQF,CAAAA,CAAAA,CAEP0C,CAAAA,CACD/C,CAAAA,CAAA,aAAA,CAACmD,UAAAA,CAAAhD,CAAAA,CAAA,CACC,YAAA,CAAW,cAAA,CACX,OAAA,CAAQ,WAAA,CACR,IAAA,CAAMH,CAAAA,CAAA,aAAA,CAACoD,iBAAAA,CAAA,CAAkB,YAAA,CAAW,UAAA,CAAW,CAAA,CAC/C,OAAA,CAASJ,CAAAA,CACT,UAAA,CAAYC,CAAAA,CACZ,MAAA,CAAO,yBAAA,CACP,IAAA,CAAM/B,CAAAA,CAAAA,CACFgC,CAAAA,CACN,CACF,CAEJ,CAAC,CAAA","file":"index.js","sourcesContent":["import { css } from '@emotion/css';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getStyles = () => {\n return {\n calendar: css({\n padding: tokens.spacingM,\n }),\n };\n};\n","import { css } from '@emotion/css';\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","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 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 /** Size variations */\n size?: 'small' | 'medium';\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 size = 'medium',\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 size={size}\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 size={size}\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' | 'size' | 'style' | 'testId'>;\n\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 size,\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 size={size}\n {...popoverTriggerProps}\n />\n </TextInput.Group>\n );\n});\n"]}
package/dist/index.js CHANGED
@@ -1,2 +1,2 @@
1
- 'use strict';var l=require('react'),dateFns=require('date-fns'),css=require('@emotion/css'),n=require('@contentful/f36-tokens'),reactDayPicker=require('react-day-picker'),f36Popover=require('@contentful/f36-popover'),ae=require('react-focus-lock'),f36Forms=require('@contentful/f36-forms'),f36Button=require('@contentful/f36-button'),f36Icons=require('@contentful/f36-icons');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var l__default=/*#__PURE__*/_interopDefault(l);var n__default=/*#__PURE__*/_interopDefault(n);var ae__default=/*#__PURE__*/_interopDefault(ae);var X=Object.defineProperty,q=Object.defineProperties;var J=Object.getOwnPropertyDescriptors;var b=Object.getOwnPropertySymbols;var M=Object.prototype.hasOwnProperty,W=Object.prototype.propertyIsEnumerable;var L=(t,o,r)=>o in t?X(t,o,{enumerable:true,configurable:true,writable:true,value:r}):t[o]=r,m=(t,o)=>{for(var r in o||(o={}))M.call(o,r)&&L(t,r,o[r]);if(b)for(var r of b(o))W.call(o,r)&&L(t,r,o[r]);return t},v=(t,o)=>q(t,J(o));var w=(t,o)=>{var r={};for(var a in t)M.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&&W.call(t,a)&&(r[a]=t[a]);return r};var A=()=>({calendar:css.css({padding:n__default.default.spacingM})});var E=40,F=()=>({vhidden:css.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.css({appearance:"none",position:"relative",margin:0,padding:0,border:"none",outline:"none",background:"none"}),button:css.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:css.css({display:"flex"}),month:css.css({width:"100%",margin:"0 1em","&:first-child":{marginLeft:0},"&:last-child":{marginRight:0}}),table:css.css({width:"100%",margin:0,borderCollapse:"collapse"}),caption:css.css({position:"relative",display:"flex",alignItems:"center",justifyContent:"space-between",padding:0,textAlign:"left",".rdp-multiple_months &":{display:"block",textAlign:"center"}}),caption_dropdowns:css.css({position:"relative",display:"inline-flex"}),caption_label:css.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:css.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.css({width:"2rem",height:"2rem",display:"inline-flex",alignItems:"center",justifyContent:"center",backgroundColor:"transparent"}),nav_button_previous:css.css({marginRight:"3px"}),dropdown_month:css.css({position:"relative",display:"inline-flex",alignItems:"center"}),dropdown_year:css.css({position:"relative",display:"inline-flex",alignItems:"center"}),dropdown:css.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:css.css({marginLeft:"8px"}),head:css.css({border:0}),head_row:css.css({height:"100%"}),row:css.css({height:"100%"}),head_cell:css.css({verticalAlign:"middle",fontSize:n__default.default.fontSizeS,fontWeight:n__default.default.fontWeightDemiBold,textAlign:"center",height:"32px",color:n__default.default.gray600}),tbody:css.css({border:0}),tfoot:css.css({margin:"0.5em"}),cell:css.css({padding:"2px",textAlign:"center"}),day:css.css({display:"flex",overflow:"hidden",alignItems:"center",justifyContent:"center",width:`${E/16}rem`,height:`${E/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:css.css({width:"0.625rem"})});function j(t){var r;let o=F();return l__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=A(),O=t,{testId:r="cf-ui-datepicker",className:a,style:D,inputProps:p,popoverProps:x,selected:s,onSelect:d,fromDate:f,toDate:c,locale:P,dateFormat:g="dd LLL yyyy",defaultIsOpen:V,placeholder:_,size:z="medium"}=O,Y=w(O,["testId","className","style","inputProps","popoverProps","selected","onSelect","fromDate","toDate","locale","dateFormat","defaultIsOpen","placeholder","size"]),u=l.useCallback(i=>!(!dateFns.isValid(i)||f&&dateFns.startOfDay(f).getTime()>i.getTime()||c&&i.getTime()>dateFns.endOfDay(c).getTime()),[f,c]),y=l.useCallback(i=>dateFns.parse(i,g,new Date,{locale:P}),[P,g]),[$,C]=l.useState(V),[h,I]=l.useState(()=>s?dateFns.format(s,g):"");l.useEffect(()=>{if(!s){I("");return}s.getTime()!==y(h).getTime()&&I(dateFns.format(s,g));},[s]);let G=l.useCallback(i=>{I(i.currentTarget.value);let N=y(i.currentTarget.value);u(N)?d(N):d(void 0);},[d,y,u]),R=l.useCallback(i=>{i&&u(i)&&(d(i),C(false));},[d,u]),U=h&&!u(y(h));return l__default.default.createElement(f36Popover.Popover,m({isOpen:$,onClose:()=>C(false)},x),l__default.default.createElement(f36Popover.Popover.Trigger,null,l__default.default.createElement(de,{size:z,className:a,style:D,testId:r,isDisabled:p==null?void 0:p.isDisabled,onTriggerClick:()=>{C(i=>!i);}},l__default.default.createElement(f36Forms.TextInput,m({placeholder:typeof _=="undefined"?dateFns.format(new Date,g):_,value:h,onChange:G,isInvalid:(p==null?void 0:p.isInvalid)||U,"aria-label":"Enter date",testId:"cf-ui-datepicker-input",size:z},p)))),l__default.default.createElement(f36Popover.Popover.Content,null,l__default.default.createElement(ae__default.default,{focusOptions:{preventScroll:true},returnFocus:true},l__default.default.createElement(j,v(m({},Y),{className:o.calendar,mode:"single",selected:s,onSelect:R,initialFocus:false,defaultMonth:s,fromDate:f,toDate:c,locale:P})))))}var de=t=>{let c=t,{children:o,testId:r,style:a,className:D,onTriggerClick:p,isDisabled:x,size:s,ref:d}=c,f=w(c,["children","testId","style","className","onTriggerClick","isDisabled","size","ref"]);return l__default.default.createElement(f36Forms.TextInput.Group,{ref:d,className:D,style:a,testId:r},o,l__default.default.createElement(f36Button.IconButton,m({"aria-label":"Use calendar",variant:"secondary",icon:l__default.default.createElement(f36Icons.CalendarBlankIcon,{"aria-label":"calendar"}),onClick:p,isDisabled:x,testId:"cf-ui-datepicker-button",size:s},f)))};Object.defineProperty(exports,"Day",{enumerable:true,get:function(){return reactDayPicker.Day}});Object.defineProperty(exports,"DayContent",{enumerable:true,get:function(){return reactDayPicker.DayContent}});Object.defineProperty(exports,"useDayPicker",{enumerable:true,get:function(){return reactDayPicker.useDayPicker}});exports.Calendar=j;exports.Datepicker=pe;//# sourceMappingURL=index.js.map
1
+ 'use strict';var s=require('react'),dateFns=require('date-fns'),css=require('@emotion/css'),n=require('@contentful/f36-tokens'),reactDayPicker=require('react-day-picker'),f36Popover=require('@contentful/f36-popover'),ae=require('react-focus-lock'),f36Forms=require('@contentful/f36-forms'),f36Button=require('@contentful/f36-button'),f36Icons=require('@contentful/f36-icons');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var s__default=/*#__PURE__*/_interopDefault(s);var n__default=/*#__PURE__*/_interopDefault(n);var ae__default=/*#__PURE__*/_interopDefault(ae);var q=Object.defineProperty,J=Object.defineProperties;var K=Object.getOwnPropertyDescriptors;var b=Object.getOwnPropertySymbols;var M=Object.prototype.hasOwnProperty,W=Object.prototype.propertyIsEnumerable;var L=(t,o,r)=>o in t?q(t,o,{enumerable:true,configurable:true,writable:true,value:r}):t[o]=r,m=(t,o)=>{for(var r in o||(o={}))M.call(o,r)&&L(t,r,o[r]);if(b)for(var r of b(o))W.call(o,r)&&L(t,r,o[r]);return t},v=(t,o)=>J(t,K(o));var I=(t,o)=>{var r={};for(var a in t)M.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&&W.call(t,a)&&(r[a]=t[a]);return r};var A=()=>({calendar:css.css({padding:n__default.default.spacingM})});var E=40,F=()=>({vhidden:css.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.css({appearance:"none",position:"relative",margin:0,padding:0,border:"none",outline:"none",background:"none"}),button:css.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:css.css({display:"flex"}),month:css.css({width:"100%",margin:"0 1em","&:first-child":{marginLeft:0},"&:last-child":{marginRight:0}}),table:css.css({width:"100%",margin:0,borderCollapse:"collapse"}),caption:css.css({position:"relative",display:"flex",alignItems:"center",justifyContent:"space-between",padding:0,textAlign:"left",".rdp-multiple_months &":{display:"block",textAlign:"center"}}),caption_dropdowns:css.css({position:"relative",display:"inline-flex"}),caption_label:css.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:css.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.css({width:"2rem",height:"2rem",display:"inline-flex",alignItems:"center",justifyContent:"center",backgroundColor:"transparent"}),nav_button_previous:css.css({marginRight:"3px"}),dropdown_month:css.css({position:"relative",display:"inline-flex",alignItems:"center"}),dropdown_year:css.css({position:"relative",display:"inline-flex",alignItems:"center"}),dropdown:css.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:css.css({marginLeft:"8px"}),head:css.css({border:0}),head_row:css.css({height:"100%"}),row:css.css({height:"100%"}),head_cell:css.css({verticalAlign:"middle",fontSize:n__default.default.fontSizeS,fontWeight:n__default.default.fontWeightDemiBold,textAlign:"center",height:"32px",color:n__default.default.gray600}),tbody:css.css({border:0}),tfoot:css.css({margin:"0.5em"}),cell:css.css({padding:"2px",textAlign:"center"}),day:css.css({display:"flex",overflow:"hidden",alignItems:"center",justifyContent:"center",width:`${E/16}rem`,height:`${E/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:css.css({width:"0.625rem"})});function B(t){var r;let o=F();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=A(),N=t,{testId:r="cf-ui-datepicker",className:a,style:D,inputProps:p,popoverProps:x,selected:l,onSelect:d,fromDate:g,toDate:c,locale:P,dateFormat:f="dd LLL yyyy",defaultIsOpen:Y,placeholder:_,size:z="medium"}=N,j=I(N,["testId","className","style","inputProps","popoverProps","selected","onSelect","fromDate","toDate","locale","dateFormat","defaultIsOpen","placeholder","size"]),u=s.useCallback(i=>!(!dateFns.isValid(i)||g&&dateFns.startOfDay(g).getTime()>i.getTime()||c&&i.getTime()>dateFns.endOfDay(c).getTime()),[g,c]),y=s.useCallback(i=>dateFns.parse(i,f,new Date,{locale:P}),[P,f]),[$,C]=s.useState(Y),[h,w]=s.useState(()=>l?dateFns.format(l,f):"");s.useEffect(()=>{if(!l){w("");return}l.getTime()!==y(h).getTime()&&w(dateFns.format(l,f));},[l]);let G=s.useCallback(i=>{w(i.currentTarget.value);let O=y(i.currentTarget.value);u(O)?d(O):d(void 0);},[d,y,u]),U=s.useCallback(i=>{i&&u(i)&&(d(i),C(false));},[d,u]),X=h&&!u(y(h));return s__default.default.createElement(f36Popover.Popover,m({isOpen:$,onClose:()=>C(false)},x),s__default.default.createElement(f36Popover.Popover.Trigger,null,s__default.default.createElement(de,{size:z,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,f):_,value:h,onChange:G,isInvalid:(p==null?void 0:p.isInvalid)||X,"aria-label":"Enter date",testId:"cf-ui-datepicker-input",size:z},p)))),s__default.default.createElement(f36Popover.Popover.Content,null,s__default.default.createElement(ae__default.default,{focusOptions:{preventScroll:true},returnFocus:true},s__default.default.createElement(B,v(m({},j),{className:o.calendar,mode:"single",selected:l,onSelect:U,initialFocus:false,defaultMonth:l,fromDate:g,toDate:c,locale:P})))))}var de=s__default.default.forwardRef((t,o)=>{let c=t,{children:r,testId:a,style:D,className:p,onTriggerClick:x,isDisabled:l,size:d}=c,g=I(c,["children","testId","style","className","onTriggerClick","isDisabled","size"]);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",size:d},g)))});Object.defineProperty(exports,"Day",{enumerable:true,get:function(){return reactDayPicker.Day}});Object.defineProperty(exports,"DayContent",{enumerable:true,get:function(){return reactDayPicker.DayContent}});Object.defineProperty(exports,"useDayPicker",{enumerable:true,get:function(){return reactDayPicker.useDayPicker}});exports.Calendar=B;exports.Datepicker=pe;//# sourceMappingURL=index.js.map
2
2
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/Datepicker.styles.ts","../src/Calendar/Calendar.styles.ts","../src/Calendar/Calendar.tsx","../src/Datepicker.tsx"],"names":["getStyles","css","tokens","cellSize","Calendar","props","_a","styles","React","DayPicker","__spreadProps","__spreadValues","Datepicker","testId","className","style","inputProps","popoverProps","selected","onSelect","fromDate","toDate","locale","dateFormat","defaultIsOpen","placeholder","size","otherProps","__objRest","isDateValid","useCallback","date","isValid","startOfDay","endOfDay","parseInputDate","value","parse","isPopoverOpen","setIsPopoverOpen","useState","inputValue","setInputValue","format","useEffect","handleInputChange","e","handleDaySelect","isTextInputValueInvalid","Popover","DatepickerTrigger","prevState","TextInput","FocusLock","children","onTriggerClick","isDisabled","ref","popoverTriggerProps","IconButton","CalendarBlankIcon"],"mappings":"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","file":"index.js","sourcesContent":["import { css } from '@emotion/css';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getStyles = () => {\n return {\n calendar: css({\n padding: tokens.spacingM,\n }),\n };\n};\n","import { css } from '@emotion/css';\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","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 React, {\n type ChangeEventHandler,\n type RefObject,\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 /** Size variations */\n size?: 'small' | 'medium';\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 size = 'medium',\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 size={size}\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 size={size}\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 ref?: RefObject<HTMLDivElement | null>;\n} & Pick<DatepickerProps, 'className' | 'size' | 'style' | 'testId'>;\n\nconst DatepickerTrigger = (props: DatepickerTriggerProps) => {\n const {\n children,\n testId,\n style,\n className,\n onTriggerClick,\n isDisabled,\n size,\n ref,\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 size={size}\n {...popoverTriggerProps}\n />\n </TextInput.Group>\n );\n};\n"]}
1
+ {"version":3,"sources":["../src/Datepicker.styles.ts","../src/Calendar/Calendar.styles.ts","../src/Calendar/Calendar.tsx","../src/Datepicker.tsx"],"names":["getStyles","css","tokens","cellSize","Calendar","props","_a","styles","React","DayPicker","__spreadProps","__spreadValues","Datepicker","testId","className","style","inputProps","popoverProps","selected","onSelect","fromDate","toDate","locale","dateFormat","defaultIsOpen","placeholder","size","otherProps","__objRest","isDateValid","useCallback","date","isValid","startOfDay","endOfDay","parseInputDate","value","parse","isPopoverOpen","setIsPopoverOpen","useState","inputValue","setInputValue","format","useEffect","handleInputChange","e","handleDaySelect","isTextInputValueInvalid","Popover","DatepickerTrigger","prevState","TextInput","FocusLock","ref","children","onTriggerClick","isDisabled","popoverTriggerProps","IconButton","CalendarBlankIcon"],"mappings":"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","file":"index.js","sourcesContent":["import { css } from '@emotion/css';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getStyles = () => {\n return {\n calendar: css({\n padding: tokens.spacingM,\n }),\n };\n};\n","import { css } from '@emotion/css';\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","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 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 /** Size variations */\n size?: 'small' | 'medium';\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 size = 'medium',\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 size={size}\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 size={size}\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' | 'size' | 'style' | 'testId'>;\n\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 size,\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 size={size}\n {...popoverTriggerProps}\n />\n </TextInput.Group>\n );\n});\n"]}
package/package.json CHANGED
@@ -1,18 +1,18 @@
1
1
  {
2
2
  "name": "@contentful/f36-datepicker",
3
- "version": "6.0.0-alpha.6",
3
+ "version": "6.0.0",
4
4
  "description": "Forma 36: Datepicker component",
5
5
  "scripts": {
6
6
  "build": "tsup"
7
7
  },
8
8
  "dependencies": {
9
- "@contentful/f36-core": "^6.0.0-alpha.0",
10
- "@contentful/f36-typography": "^6.0.0-alpha.0",
11
- "@contentful/f36-forms": "^6.0.0-alpha.0",
12
- "@contentful/f36-popover": "^6.0.0-alpha.0",
13
- "@contentful/f36-icons": "^6.0.0-alpha.0",
14
- "@contentful/f36-button": "^6.0.0-alpha.0",
15
- "@contentful/f36-tokens": "^6.0.0-alpha.0",
9
+ "@contentful/f36-core": "^6.0.0",
10
+ "@contentful/f36-typography": "^6.0.0",
11
+ "@contentful/f36-forms": "^6.0.0",
12
+ "@contentful/f36-popover": "^6.0.0",
13
+ "@contentful/f36-icons": "^6.0.0",
14
+ "@contentful/f36-button": "^6.0.0",
15
+ "@contentful/f36-tokens": "^6.0.0",
16
16
  "@emotion/css": "^11.13.5",
17
17
  "date-fns": "^2.28.0",
18
18
  "react-day-picker": "^8.7.1",