npm - @contentful/f36-datepicker - Versions diffs - 5.5.0 → 6.0.0-alpha.1 - Mend

@contentful/f36-datepicker 5.5.0 → 6.0.0-alpha.1

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 (7) hide show

package/dist/esm/index.js CHANGED Viewed

@@ -1,17 +1,2 @@
-import s, { useCallback, useState, useEffect } from 'react';
-import { isValid, startOfDay, endOfDay, parse, format } from 'date-fns';
-import { css } from 'emotion';
-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 ie 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 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)))});
-export { F as Calendar, le as Datepicker };
-//# sourceMappingURL=out.js.map
+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 ie 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 z=Object.prototype.hasOwnProperty,M=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={}))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(false));},[d,f]),U=h&&!f(y(h));return s.createElement(Popover,m({isOpen:j,onClose:()=>C(false)},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:true},returnFocus:true},s.createElement(F,v(m({},Y),{className:o.calendar,mode:"single",selected:l,onSelect:G,initialFocus:false,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)))});export{F as Calendar,le as Datepicker};//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map CHANGED Viewed

	@@ -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","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":"+kBAAA,OAAOA,GAEL,eAAAC,EACA,aAAAC,GACA,YAAAC,MACK,QAGP,OAAS,UAAAC,EAAQ,WAAAC,GAAS,SAAAC,GAAO,cAAAC,GAAY,YAAAC,OAAgB,WCR7D,OAAS,OAAAC,MAAW,UACpB,OAAOC,MAAY,yBAEZ,IAAMC,EAAY,KAChB,CACL,SAAUF,EAAI,CACZ,QAASC,EAAO,QAClB,CAAC,CACH,GCRF,OAAOV,MAAW,QCAlB,OAAS,OAAAS,MAAW,UACpB,OAAOC,MAAY,yBAGnB,IAAME,EAAW,GAEJD,EAAY,KAChB,CACL,QAASF,EAAI,CACX,UAAW,aACX,QAAS,IACT,OAAQ,IACR,WAAY,cACZ,OAAQ,IACR,cAAe,OACf,iBAAkB,OAClB,WAAY,OACZ,SAAU,WACV,IAAK,IACL,MAAO,MACP,OAAQ,MACR,SAAU,SACV,KAAM,0BACR,CAAC,EACD,aAAcA,EAAI,CAChB,WAAY,OACZ,SAAU,WACV,OAAQ,EACR,QAAS,EACT,OAAQ,OACR,QAAS,OACT,WAAY,MACd,CAAC,EACD,OAAQA,EAAI,CACV,aAAc,MACd,OAAQ,UACR,MAAOC,EAAO,QAEd,qBAAsB,CACpB,MAAOA,EAAO,QACd,cAAe,MACjB,EACA,oBAAqB,CACnB,UAAWA,EAAO,WACpB,EAEA,8BAA+B,CAC7B,UAAW,OACb,EAEA,UAAW,CACT,gBAAiBA,EAAO,OAC1B,EAEA,4CAA6C,CAC3C,gBAAiBA,EAAO,QACxB,MAAOA,EAAO,WACd,WAAYA,EAAO,kBACrB,CACF,CAAC,EAED,OAAQD,EAAI,CACV,QAAS,MACX,CAAC,EACD,MAAOA,EAAI,CACT,MAAO,OACP,OAAQ,QACR,gBAAiB,CACf,WAAY,CACd,EACA,eAAgB,CACd,YAAa,CACf,CACF,CAAC,EACD,MAAOA,EAAI,CACT,MAAO,OACP,OAAQ,EACR,eAAgB,UAClB,CAAC,EACD,QAASA,EAAI,CACX,SAAU,WACV,QAAS,OACT,WAAY,SACZ,eAAgB,gBAChB,QAAS,EACT,UAAW,OAEX,yBAA0B,CACxB,QAAS,QACT,UAAW,QACb,CACF,CAAC,EACD,kBAAmBA,EAAI,CACrB,SAAU,WACV,QAAS,aACX,CAAC,EACD,cAAeA,EAAI,CACjB,SAAU,WACV,OAAQ,EACR,QAAS,cACT,WAAY,SACZ,OAAQ,IACR,QAAS,KAAKC,EAAO,SAAS,GAC9B,OAAQ,OACR,WAAY,SACZ,SAAUA,EAAO,UACjB,WAAYA,EAAO,iBACnB,aAAcA,EAAO,mBAErB,QAAS,CACP,WAAY,KACd,CACF,CAAC,EACD,IAAKD,EAAI,CACP,WAAY,SAEZ,4CAA6C,CAC3C,SAAU,WACV,IAAK,MACL,KAAM,IACN,UAAW,kBACb,EAEA,0CAA2C,CACzC,SAAU,WACV,IAAK,MACL,MAAO,IACP,UAAW,kBACb,CACF,CAAC,EAED,WAAYA,EAAI,CACd,MAAO,OACP,OAAQ,OACR,QAAS,cACT,WAAY,SACZ,eAAgB,SAChB,gBAAiB,aACnB,CAAC,EACD,oBAAqBA,EAAI,CACvB,YAAa,KACf,CAAC,EACD,eAAgBA,EAAI,CAClB,SAAU,WACV,QAAS,cACT,WAAY,QACd,CAAC,EACD,cAAeA,EAAI,CACjB,SAAU,WACV,QAAS,cACT,WAAY,QACd,CAAC,EACD,SAAUA,EAAI,CACZ,WAAY,OACZ,SAAU,WACV,OAAQ,EACR,IAAK,IACL,OAAQ,IACR,KAAM,IACN,MAAO,OACP,OAAQ,IACR,QAAS,IACT,OAAQ,UACR,QAAS,IACT,OAAQ,OACR,gBAAiB,cACjB,WAAY,UACZ,SAAU,UACV,WAAY,UAEZ,gEAAiE,CAC/D,UAAWC,EAAO,WACpB,EAEA,+DAAgE,CAC9D,gBAAiBA,EAAO,OAC1B,CACF,CAAC,EAED,cAAeD,EAAI,CACjB,WAAY,KACd,CAAC,EAED,KAAMA,EAAI,CACR,OAAQ,CACV,CAAC,EAED,SAAUA,EAAI,CACZ,OAAQ,MACV,CAAC,EAED,IAAKA,EAAI,CACP,OAAQ,MACV,CAAC,EAED,UAAWA,EAAI,CACb,cAAe,SACf,SAAUC,EAAO,UACjB,WAAYA,EAAO,mBACnB,UAAW,SACX,OAAQ,OACR,MAAOA,EAAO,OAChB,CAAC,EAED,MAAOD,EAAI,CACT,OAAQ,CACV,CAAC,EAED,MAAOA,EAAI,CACT,OAAQ,OACV,CAAC,EAED,KAAMA,EAAI,CACR,QAAS,MACT,UAAW,QACb,CAAC,EACD,IAAKA,EAAI,CACP,QAAS,OACT,SAAU,SACV,WAAY,SACZ,eAAgB,SAChB,MAAO,GAAGG,EAAW,EAAE,MACvB,OAAQ,GAAGA,EAAW,EAAE,MACxB,aAAc,MACd,OAAQ,OAER,wCAAyC,CACvC,WAAYF,EAAO,kBACrB,EACA,2EACE,CACE,gBAAiBA,EAAO,OAC1B,CACJ,CAAC,EAED,SAAUD,EAAI,CACZ,MAAO,UACT,CAAC,CACH,GD1OF,OACE,aAAAI,MAGK,mBAUA,SAASC,EAASC,EAAsB,CAlB/C,IAAAC,EAmBE,IAAMC,EAASN,EAAU,EAEzB,OACEX,EAAA,cAACa,EAAAK,EAAAC,EAAA,CACC,cAAc,oBACVJ,GAFL,CAGC,cAAcC,EAAAD,EAAM,eAAN,KAAAC,EAAsB,EACpC,WAAYC,GACd,CAEJ,CE5BA,OAAS,OAAAG,GAAK,cAAAC,GAAY,gBAAAC,OAAoB,mBJU9C,OAAS,WAAAC,MAAe,0BAExB,OAAOC,OAAe,mBACtB,OAAS,aAAAC,MAAsC,wBAC/C,OAAS,cAAAC,OAAkB,yBAC3B,OAAS,qBAAAC,OAAyB,wBAmD3B,SAASC,GAAWb,EAAwB,CACjD,IAAME,EAASN,EAAU,EAgBrBK,EAAAD,EAdF,QAAAc,EAAS,mBACT,UAAAC,EACA,MAAAC,EACA,WAAAC,EACA,aAAAC,EACA,SAAAC,EACA,SAAAC,EACA,SAAAC,EACA,OAAAC,EACA,OAAAC,EACA,WAAAC,EAAa,cACb,cAAAC,EACA,YAAAC,CAlFJ,EAoFMzB,EADC0B,EAAAC,EACD3B,EADC,CAbH,SACA,YACA,QACA,aACA,eACA,WACA,WACA,WACA,SACA,SACA,aACA,gBACA,gBAII4B,EAAc3C,EACjB4C,GACK,GAACxC,GAAQwC,CAAI,GAGbT,GAAY7B,GAAW6B,CAAQ,EAAE,QAAQ,EAAIS,EAAK,QAAQ,GAG1DR,GAAUQ,EAAK,QAAQ,EAAIrC,GAAS6B,CAAM,EAAE,QAAQ,GAK1D,CAACD,EAAUC,CAAM,CACnB,EAEMS,EAAiB7C,EACpB8C,GAAkBzC,GAAMyC,EAAOR,EAAY,IAAI,KAAQ,CAAE,OAAAD,CAAO,CAAC,EAClE,CAACA,EAAQC,CAAU,CACrB,EAEM,CAACS,EAAeC,CAAgB,EAAI9C,EAASqC,CAAa,EAC1D,CAACU,EAAYC,CAAa,EAAIhD,EAAiB,IACnD+B,EAAW9B,EAAO8B,EAAUK,CAAU,EAAI,EAC5C,EAEArC,GAAU,IAAM,CACd,GAAI,CAACgC,EAAU,CACbiB,EAAc,EAAE,EAChB,MACF,CAEIjB,EAAS,QAAQ,IAAMY,EAAeI,CAAU,EAAE,QAAQ,GAC5DC,EAAc/C,EAAO8B,EAAUK,CAAU,CAAC,CAI9C,EAAG,CAACL,CAAQ,CAAC,EAEb,IAAMkB,EAA0DnD,EAC7DoD,GAAM,CACLF,EAAcE,EAAE,cAAc,KAAK,EAEnC,IAAMR,EAAOC,EAAeO,EAAE,cAAc,KAAK,EAC7CT,EAAYC,CAAI,EAClBV,EAASU,CAAI,EAEbV,EAAS,MAAS,CAEtB,EACA,CAACA,EAAUW,EAAgBF,CAAW,CACxC,EAEMU,EAAkBrD,EACrB4C,GAAe,CACVA,GAAQD,EAAYC,CAAI,IAC1BV,EAASU,CAAI,EACbI,EAAiB,EAAK,EAE1B,EACA,CAACd,EAAUS,CAAW,CACxB,EAEMW,EACJL,GAAc,CAACN,EAAYE,EAAeI,CAAU,CAAC,EAEvD,OACElD,EAAA,cAACuB,EAAAJ,EAAA,CACC,OAAQ6B,EACR,QAAS,IAAMC,EAAiB,EAAK,GACjChB,GAEJjC,EAAA,cAACuB,EAAQ,QAAR,KAECvB,EAAA,cAACwD,GAAA,CACC,UAAW1B,EACX,MAAOC,EACP,OAAQF,EACR,WAAYG,GAAA,YAAAA,EAAY,WACxB,eAAgB,IAAM,CACpBiB,EAAkBQ,GAAc,CAACA,CAAS,CAC5C,GAEAzD,EAAA,cAACyB,EAAAN,EAAA,CACC,YACE,OAAOsB,GAAgB,YACnBrC,EAAO,IAAI,KAAQmC,CAAU,EAC7BE,EAEN,MAAOS,EACP,SAAUE,EACV,WAAWpB,GAAA,YAAAA,EAAY,YAAauB,EACpC,aAAW,aACX,OAAO,0BACHvB,EACN,CACF,CACF,EACAhC,EAAA,cAACuB,EAAQ,QAAR,KACCvB,EAAA,cAACwB,GAAA,CAAU,aAAc,CAAE,cAAe,EAAK,EAAG,YAAa,IAC7DxB,EAAA,cAACc,EAAAI,EAAAC,EAAA,GACKuB,GADL,CAEC,UAAWzB,EAAO,SAClB,KAAK,SACL,SAAUiB,EACV,SAAUoB,EACV,aAAc,GACd,aAAcpB,EACd,SAAUE,EACV,OAAQC,EACR,OAAQC,GACV,CACF,CACF,CACF,CAEJ,CASA,IAAMkB,GAAoBxD,EAAM,WAG9B,CAACe,EAAO2C,IAAQ,CAChB,IASI1C,EAAAD,EARF,UAAA4C,EACA,OAAA9B,EACA,MAAAE,EACA,UAAAD,EACA,eAAA8B,EACA,WAAAC,CA7NJ,EAgOM7C,EADC8C,EAAAnB,EACD3B,EADC,CAPH,WACA,SACA,QACA,YACA,iBACA,eAKF,OACEhB,EAAA,cAACyB,EAAU,MAAV,CACC,IAAKiC,EACL,UAAW5B,EACX,MAAOC,EACP,OAAQF,GAEP8B,EACD3D,EAAA,cAAC0B,GAAAP,EAAA,CACC,aAAW,eACX,QAAQ,YACR,KAAMnB,EAAA,cAAC2B,GAAA,CAAkB,aAAW,WAAW,EAC/C,QAASiC,EACT,WAAYC,EACZ,OAAO,2BACHC,EACN,CACF,CAEJ,CAAC","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"]}
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","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 /\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\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"]}

package/dist/index.d.mts CHANGED Viewed

@@ -1,10 +1,11 @@
+import React from 'react';
 import { CommonProps } from '@contentful/f36-core';
 import { DayPickerSingleProps, DayPickerDefaultProps } from 'react-day-picker';
 export { Day, DayContent, DayContentProps, DayProps, useDayPicker } from 'react-day-picker';
 import { TextInputProps } from '@contentful/f36-forms';
 import { PopoverProps } from '@contentful/f36-popover';
-declare type DatepickerProps = CommonProps & {
+type DatepickerProps = CommonProps & {
     /**
      * Callback fired when the day is selected
      */
@@ -36,13 +37,13 @@ declare type DatepickerProps = CommonProps & {
 /**
  * Provides functionality for date selection.
  */
-declare function Datepicker(props: DatepickerProps): JSX.Element;
+declare function Datepicker(props: DatepickerProps): React.JSX.Element;
-declare type CalendarProps = Omit<DayPickerDefaultProps, 'classNames'> | Omit<DayPickerSingleProps, 'classNames'>;
+type CalendarProps = Omit<DayPickerDefaultProps, 'classNames'> | Omit<DayPickerSingleProps, 'classNames'>;
 /**
  * Provides functionality for calendar date selection. Used as a part of Datepicker component.
  * Based on the [React DayPicker](https://react-day-picker.js.org/) library.
  */
-declare function Calendar(props: CalendarProps): JSX.Element;
+declare function Calendar(props: CalendarProps): React.JSX.Element;
-export { Calendar, CalendarProps, Datepicker, DatepickerProps };
+export { Calendar, type CalendarProps, Datepicker, type DatepickerProps };

package/dist/index.d.ts CHANGED Viewed

@@ -1,10 +1,11 @@
+import React from 'react';
 import { CommonProps } from '@contentful/f36-core';
 import { DayPickerSingleProps, DayPickerDefaultProps } from 'react-day-picker';
 export { Day, DayContent, DayContentProps, DayProps, useDayPicker } from 'react-day-picker';
 import { TextInputProps } from '@contentful/f36-forms';
 import { PopoverProps } from '@contentful/f36-popover';
-declare type DatepickerProps = CommonProps & {
+type DatepickerProps = CommonProps & {
     /**
      * Callback fired when the day is selected
      */
@@ -36,13 +37,13 @@ declare type DatepickerProps = CommonProps & {
 /**
  * Provides functionality for date selection.
  */
-declare function Datepicker(props: DatepickerProps): JSX.Element;
+declare function Datepicker(props: DatepickerProps): React.JSX.Element;
-declare type CalendarProps = Omit<DayPickerDefaultProps, 'classNames'> | Omit<DayPickerSingleProps, 'classNames'>;
+type CalendarProps = Omit<DayPickerDefaultProps, 'classNames'> | Omit<DayPickerSingleProps, 'classNames'>;
 /**
  * Provides functionality for calendar date selection. Used as a part of Datepicker component.
  * Based on the [React DayPicker](https://react-day-picker.js.org/) library.
  */
-declare function Calendar(props: CalendarProps): JSX.Element;
+declare function Calendar(props: CalendarProps): React.JSX.Element;
-export { Calendar, CalendarProps, Datepicker, DatepickerProps };
+export { Calendar, type CalendarProps, Datepicker, type DatepickerProps };

package/dist/index.js CHANGED Viewed

@@ -1,37 +1,2 @@
-'use strict';
-var s = require('react');
-var dateFns = require('date-fns');
-var emotion = require('emotion');
-var n = require('@contentful/f36-tokens');
-var reactDayPicker = require('react-day-picker');
-var f36Popover = require('@contentful/f36-popover');
-var ie = require('react-focus-lock');
-var f36Forms = require('@contentful/f36-forms');
-var f36Button = require('@contentful/f36-button');
-var 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 ie__default = /*#__PURE__*/_interopDefault(ie);
-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)))});
-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 = F;
-exports.Datepicker = le;
-//# sourceMappingURL=out.js.map
+'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'),ie=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 ie__default=/*#__PURE__*/_interopDefault(ie);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:true,configurable:true,writable:true,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.css({padding:n__default.default.spacingM})});var A=40,E=()=>({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:`${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:css.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(false));},[d,f]),U=h&&!f(y(h));return s__default.default.createElement(f36Popover.Popover,m({isOpen:j,onClose:()=>C(false)},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:true},returnFocus:true},s__default.default.createElement(F,v(m({},Y),{className:o.calendar,mode:"single",selected:l,onSelect:G,initialFocus:false,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)))});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=F;exports.Datepicker=le;//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/index.js.map CHANGED Viewed

	@@ -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","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"]}
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","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 /\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\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"]}

package/package.json CHANGED Viewed

@@ -1,26 +1,26 @@
 {
   "name": "@contentful/f36-datepicker",
-  "version": "5.5.0",
+  "version": "6.0.0-alpha.1",
   "description": "Forma 36: Datepicker component",
   "scripts": {
     "build": "tsup"
   },
   "dependencies": {
-    "@contentful/f36-core": "^5.5.0",
-    "@contentful/f36-typography": "^5.5.0",
-    "@contentful/f36-forms": "^5.5.0",
-    "@contentful/f36-popover": "^5.5.0",
-    "@contentful/f36-icons": "^5.5.0",
-    "@contentful/f36-button": "^5.5.0",
-    "@contentful/f36-tokens": "^5.1.0",
-    "emotion": "^10.0.17",
+    "@contentful/f36-core": "^6.0.0-alpha.0",
+    "@contentful/f36-typography": "^6.0.0-alpha.0",
+    "@contentful/f36-forms": "^6.0.0-alpha.0",
+    "@contentful/f36-popover": "^6.0.0-alpha.0",
+    "@contentful/f36-icons": "^6.0.0-alpha.0",
+    "@contentful/f36-button": "^6.0.0-alpha.0",
+    "@contentful/f36-tokens": "^6.0.0-alpha.0",
+    "@emotion/css": "^11.13.5",
     "date-fns": "^2.28.0",
     "react-day-picker": "^8.7.1",
     "react-focus-lock": "^2.9.1"
   },
   "peerDependencies": {
-    "react": ">=16.8",
-    "react-dom": ">=16.8"
+    "react": ">=19.1.0",
+    "react-dom": ">=19.1.0"
   },
   "license": "MIT",
   "files": [