react-calendar-kit
Version:
React Calendar Kit is a powerful and flexible library for building accessible and highly customizable calendar and date/time picker components in your React applications. React Calendar Kit provides a solid foundation for creating inclusive user experienc
3 lines (2 loc) • 18 kB
JavaScript
'use client';
var st=Object.create;var Q=Object.defineProperty;var it=Object.getOwnPropertyDescriptor;var lt=Object.getOwnPropertyNames;var dt=Object.getPrototypeOf,mt=Object.prototype.hasOwnProperty;var pt=(e,t)=>{for(var r in t)Q(e,r,{get:t[r],enumerable:!0})},Pe=(e,t,r,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of lt(t))!mt.call(e,n)&&n!==r&&Q(e,n,{get:()=>t[n],enumerable:!(a=it(t,n))||a.enumerable});return e};var S=(e,t,r)=>(r=e!=null?st(dt(e)):{},Pe(t||!e||!e.__esModule?Q(r,"default",{value:e,enumerable:!0}):r,e)),ct=e=>Pe(Q({},"__esModule",{value:!0}),e);var Et={};pt(Et,{Calendar:()=>Je,RangeCalendar:()=>rt,useCalendarContext:()=>V});module.exports=ct(Et);var $=S(require("react")),q=require("@internationalized/date"),Ye=require("@react-aria/calendar"),_e=require("@react-aria/i18n"),qe=require("@react-stately/calendar");var Z=S(require("react"));var W=S(require("react"));function le(e){let t=W.useRef(e);return W.useEffect(()=>{t.current=e}),W.useMemo(()=>(...r)=>t.current?.(...r),[])}function X({prop:e,defaultProp:t,onChange:r=()=>{}}){let[a,n]=ut({defaultProp:t,onChange:r}),s=e!==void 0,l=s?e:a,p=le(r),d=Z.useCallback(o=>{if(s){let i=typeof o=="function"?o(e):o;i!==e&&p(i)}else n(o)},[s,e,n,p]);return[l,d]}function ut({defaultProp:e,onChange:t}){let r=Z.useState(e),[a]=r,n=Z.useRef(a),s=le(t);return Z.useEffect(()=>{n.current!==a&&(s(a),n.current=a)},[a,n,s]),r}var K=S(require("react"));function ke(e){let t=(0,K.createContext)(null);return[({children:n,value:s})=>K.default.createElement(t.Provider,{value:s},n),()=>{let n=(0,K.useContext)(t);if(n===null)throw new Error(e);return n}]}var[ee,V]=ke("Calendar component was not found in tree");var m=S(require("react")),Ke=require("@react-aria/i18n"),je=require("@react-aria/utils"),ge=require("@react-aria/visually-hidden");var te=require("@internationalized/date"),be=require("clsx"),w=be.clsx,c=e=>e?"true":void 0;function ve(e,t){let r=[];if(!e||!t)return r;let a=(0,te.startOfYear)(e);for(;a.compare(t)<=0;)r.push(a),a=(0,te.startOfYear)(a.add({years:1}));return r}function ft(e,t){return e.add({months:t})}function xe(e){let r=[(0,te.startOfYear)(e)];for(;r.length<12;){let a=r[r.length-1];r.push(ft(a,1))}return r}function M(...e){return e?.reduce((t,r)=>r?{...t,...r}:t,{})??{}}var j=S(require("react")),Se=require("@react-aria/button"),we=require("@react-aria/focus"),De=require("@react-aria/interactions"),ae=require("@react-aria/utils");var Re=require("react");function yt(e,t){typeof e=="function"?e(t):typeof e=="object"&&e!==null&&"current"in e&&(e.current=t)}function ht(...e){return t=>{e.forEach(r=>yt(r,t))}}function re(...e){return(0,Re.useCallback)(ht(...e),e)}var Ee=(0,j.forwardRef)((e,t)=>{let{children:r,autoFocus:a,isDisabled:n,onKeyDown:s,...l}=e,p=(0,j.useRef)(null),{buttonProps:d,isPressed:o}=(0,Se.useButton)({elementType:"button",isDisabled:n,onKeyDown:s,...l},p),k=re(p,t),{isFocusVisible:i,isFocused:y,focusProps:v}=(0,we.useFocusRing)({autoFocus:a}),{isHovered:f,hoverProps:h}=(0,De.useHover)({isDisabled:n});return j.default.createElement("button",{ref:k,"data-disabled":c(n),"data-focus":c(y),"data-focus-visible":c(i),"data-hover":c(f),"data-pressed":c(o),className:e.className,...(0,ae.mergeProps)(v,h,d,(0,ae.filterDOMProps)(l))},r)});Ee.displayName="Button";var G=Ee;var A=S(require("react")),ne=require("@internationalized/date"),He=require("@react-aria/calendar"),Ie=require("@react-aria/i18n");var Y=S(require("react")),I=require("@internationalized/date"),Ne=require("@react-aria/calendar"),Te=require("@react-aria/focus"),Me=require("@react-aria/i18n"),Be=require("@react-aria/interactions"),Le=require("@react-aria/utils");function Ve({isPickerVisible:e,classNames:t,styles:r,state:a,currentMonth:n,...s}){let{locale:l}=(0,Me.useLocale)(),p=(0,Y.useRef)(null),{cellProps:d,buttonProps:o,isPressed:k,isSelected:i,isDisabled:y,isFocused:v,isInvalid:f,formattedDate:h}=(0,Ne.useCalendarCell)({...s,date:s.date,isDisabled:!(0,I.isSameMonth)(s.date,n)||e},a,p),C=a.isCellUnavailable(s.date),x=!y&&!f&&a.isCellUnavailable(s.date.add({days:1})),R=!y&&!f&&a.isCellUnavailable(s.date.subtract({days:1})),E="highlightedRange"in a&&a.highlightedRange,B=i&&E&&(0,I.isSameDay)(s.date,E.start),P=i&&E&&(0,I.isSameDay)(s.date,E.end),T=(0,I.getDayOfWeek)(s.date,l),O=i&&(R||T===0||s.date.day===1),g=i&&(x||T===6||s.date.day===n.calendar.getDaysInMonth(n)),{focusProps:u,isFocusVisible:b}=(0,Te.useFocusRing)(),{hoverProps:L,isHovered:N}=(0,Be.useHover)({isDisabled:y||C||a.isReadOnly});return Y.default.createElement("td",{...d,role:"grid-body-cell",className:t.gridBodyCell},Y.default.createElement("span",{...(0,Le.mergeProps)(o,L,u),className:t.cellButton,style:r?.cellButton,ref:p,role:"button","data-disabled":c(y&&!f),"data-focus-visible":c(v&&b),"data-hover":c(N),"data-invalid":c(f),"data-outside-month":c(!(0,I.isSameMonth)(s.date,n)),"data-pressed":c(k&&!a.isReadOnly),"data-range-end":c(g),"data-range-selection":c(i&&"highlightedRange"in a),"data-range-start":c(O),"data-readonly":c(a.isReadOnly),"data-selected":c(i),"data-selection-end":c(P),"data-selection-start":c(B),"data-today":c((0,I.isToday)(s.date,a.timeZone)),"data-unavailable":c(C)},Y.default.createElement("span",null,h)))}var gt=e=>{let{startDate:t,currentMonth:r,...a}=e,{state:n,weekdayStyle:s,isPickerExpanded:l,classNames:p,styles:d}=V(),{locale:o}=(0,Ie.useLocale)(),k=(0,ne.getWeeksInMonth)(t,o),{gridProps:i,headerProps:y,weekDays:v}=(0,He.useCalendarGrid)({...a,weekdayStyle:s,endDate:(0,ne.endOfMonth)(t)},n),f=[...new Array(k).keys()].map(h=>A.default.createElement("tr",{role:"grid-body-row",className:p.gridBodyRow,key:h,"data-picker-expanded":c(l)},n.getDatesInWeek(h,t).map((C,x)=>C?A.default.createElement(Ve,{key:x,state:n,currentMonth:t,date:C,isPickerVisible:l,classNames:p,styles:d}):A.default.createElement("td",{key:x}))));return A.default.createElement("table",{...i,role:"grid",className:w(p.grid,i.className),"aria-hidden":c(l),tabIndex:-1},A.default.createElement("thead",{...y,className:w(p.gridHead,y.className),style:M(y.style,d?.gridHead),role:"grid-header"},A.default.createElement("tr",{className:p.gridHeadRow,style:d?.gridHeadRow,role:"grid-header-row"},v.map((h,C)=>A.default.createElement("th",{key:C,role:"grid-header-cell",className:p.gridHeadCell,style:d?.gridHeadCell},A.default.createElement("span",null,h))))),A.default.createElement("tbody",{key:r,className:p.gridBody,style:d?.gridBody,role:"grid-body"},f))},de=gt;var F=S(require("react")),Oe=require("@react-aria/i18n");var me=S(require("react")),Ct=e=>me.createElement("svg",{width:20,height:20,viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},me.createElement("path",{d:"m5 7.5 5 5 5-5",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"})),Ae=Ct;var Pt=e=>{let{date:t,currentMonth:r,...a}=e,{state:n,headerRef:s,withPicker:l,classNames:p,styles:d,isPickerExpanded:o,setPickerExpanded:k}=V(),y=(0,Oe.useDateFormatter)({month:"long",era:r.calendar.identifier==="gregory"&&r.era==="BC"?"short":void 0,calendar:r.calendar.identifier,timeZone:n.timeZone,year:"numeric"}).format(t.toDate(n.timeZone)),v=(0,F.useCallback)(f=>{f.key==="Escape"&&(f.preventDefault(),f.stopPropagation(),k?.(!1))},[k]);return l?F.default.createElement("div",{className:p.month,style:d?.month,ref:s,...a},F.default.createElement(G,{onPress:()=>k(!o),onKeyDown:v,className:p?.picker?.button,style:d?.picker?.button,ref:s,"data-expanded":c(o)},F.default.createElement("span",{key:r.month,"aria-hidden":!0},y),F.default.createElement(Ae,{role:"chevron-down",className:p?.picker?.buttonIcon,style:d?.picker?.buttonIcon}))):F.default.createElement("div",{className:p.month,style:d?.month,ref:s,...a},F.default.createElement("span",{key:r.month,"aria-hidden":!0},y))},pe=Pt;var ce=S(require("react")),kt=e=>ce.createElement("svg",{"aria-hidden":"true",role:"presentation",width:20,height:20,viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},ce.createElement("path",{d:"m12.5 15-5-5 5-5",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"})),oe=kt;var ue=S(require("react")),bt=e=>ue.createElement("svg",{"aria-hidden":"true",role:"presentation",width:20,height:20,viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},ue.createElement("path",{d:"m7.5 15 5-5-5-5",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"})),se=bt;var H=S(require("react")),he=require("@react-aria/i18n");var D=S(require("react")),Ze=S(require("lodash.debounce")),$e=S(require("scroll-into-view-if-needed"));function Ge(e,t){let r=Math.max(0,Math.min(e.right,t.right)-Math.max(e.left,t.left)),a=Math.max(0,Math.min(e.bottom,t.bottom)-Math.max(e.top,t.top));return r*a}var Fe=require("react"),vt=()=>{let e=(0,Fe.useRef)(new Map);function t(){return e.current||(e.current=new Map),e.current}function r(a,n){a?e.current.set(n,a):e.current.delete(n)}return[r,t]},Ue=vt;var _=S(require("react")),xt=({className:e,total:t,...r})=>_.default.createElement(_.default.Fragment,null,Array.from({length:t},(a,n)=>_.default.createElement("div",{key:n,"aria-hidden":"true",className:e,role:"picker-item-empty",tabIndex:-1,...r},"\xA0"))),fe=(0,_.memo)(xt);var Rt=200,St=e=>{let{initialDate:t,options:r=[],className:a,style:n,listClassName:s,itemClassName:l,listStyle:p,itemStyle:d,listType:o="month",highlightRef:k,...i}=e,y=(0,D.useRef)(null),[v,f]=Ue(),{state:h,isPickerExpanded:C,headerRef:x,setPickerExpanded:R,pickerEmptyItem:E}=V(),B=(0,D.useCallback)((g,u)=>{if(!(g.target instanceof HTMLElement))return;let b=f(),N=Array.from(b.values()).findLast(nt=>{let ot=nt.getBoundingClientRect(),Ce=u?.getBoundingClientRect();return Ce?Ge(ot,Ce)>50:!1}),J=Number(N?.getAttribute("data-value"));if(!J)return;let at=h.focusedDate.set({[o]:J});h.setFocusedDate(at)},[h,t,o,C]);(0,D.useEffect)(()=>{let g=y.current,u=k;if(!u)return;let b=(0,Ze.default)(L=>B(L,u),Rt);return g?.addEventListener("scroll",b),()=>{b&&g?.removeEventListener("scroll",b)}},[B]);let P=(0,D.useCallback)((g,u=!0)=>{let L=f().get(g);L&&(0,$e.default)(L,{scrollMode:"always",behavior:u?"smooth":"instant",boundary:y.current})},[f]),T=(0,D.useCallback)(g=>{let u=g.target,b=Number(u.getAttribute("data-value"));if(b===h.focusedDate[o]){R?.(!1);return}b&&P(b)},[h]),O=(0,D.useCallback)((g,u)=>{let b=f();if(!b.get(u))return;let N=u;switch(g.key){case"ArrowDown":N=u+1;break;case"ArrowUp":N=u-1;break;case"Home":N=0;break;case"End":N=r.length-1;break;case"PageUp":N=u-3;break;case"PageDown":N=u+3;break;case"Escape":case"Enter":case" ":R?.(!1),x?.current?.focus();return}b.get(N)?.focus()},[f,r.length,R,x]);return(0,D.useEffect)(()=>{C&&P(t,!1)},[C]),D.default.createElement("div",{ref:y,className:w(s,a),style:M({overflowY:"scroll"},n,p),role:`picker-${o}-list`,...i},D.default.createElement(fe,{total:E,className:l,style:d}),r.map(g=>D.default.createElement(G,{role:`picker-${o}-item`,key:`picker-${o}-${g.value}`,ref:u=>v(u,g.value),className:l,style:d,"data-value":g.value,tabIndex:!C||h.focusedDate?.[o]!==g.value?-1:0,onKeyDown:u=>O(u,g.value),onPress:u=>T(u)},g.label)),D.default.createElement(fe,{total:E,className:l}))},ye=(0,D.memo)(St);var wt=e=>{let{date:t,currentMonth:r,className:a,style:n,...s}=e,{state:l,isPickerExpanded:p,classNames:d,styles:o}=V(),[k,i]=(0,H.useState)(null),y=(0,he.useDateFormatter)({month:"long",era:r.calendar.identifier==="gregory"&&r.era==="BC"?"short":void 0,calendar:r.calendar.identifier,timeZone:l.timeZone}),v=(0,he.useDateFormatter)({year:"numeric",timeZone:l.timeZone}),f=(0,H.useMemo)(()=>ve(l.minValue,l.maxValue)?.map(C=>({value:C.year,label:v.format(C.toDate(l.timeZone))})),[l.minValue,l.maxValue,v,l.timeZone]),h=(0,H.useMemo)(()=>xe(t).map(C=>({value:C.month,label:y.format(C.toDate(l.timeZone))})),[t,y,l.timeZone]);return H.default.createElement("div",{...s,"data-expanded":c(p),className:w(d?.picker?.root,a),style:M({height:"var(--picker-height)"},n,o?.picker?.root),role:"picker-root",inert:p?void 0:"true"},H.default.createElement("div",{ref:i,className:d?.picker?.highlight,style:o?.picker?.highlight,role:"picker-highlight"}),H.default.createElement(ye,{highlightRef:k,options:h,listClassName:w(d?.picker?.list,d?.picker?.monthList),listStyle:M(o?.picker?.list,o?.picker?.monthList),itemClassName:w(d?.picker?.item,d?.picker?.monthItem),itemStyle:M(o?.picker?.item,o?.picker?.monthItem),initialDate:t.month,listType:"month"}),H.default.createElement(ye,{highlightRef:k,options:f,listClassName:w(d?.picker?.list,d?.picker?.yearList),listStyle:M(o?.picker?.list,o?.picker?.yearList),itemClassName:w(d?.picker?.item,d?.picker?.yearItem),itemStyle:M(o?.picker?.item,o?.picker?.yearItem),initialDate:t.year,listType:"year"}))},We=(0,H.memo)(wt);var Dt=(0,m.forwardRef)((e,t)=>{let{calendarProps:r,headerLayout:a="apart",className:n,prevButtonProps:s,nextButtonProps:l,header:p,footer:d}=e,{state:o,visibleMonths:k,classNames:i,withPicker:y,pickerHeight:v,isPickerExpanded:f,styles:h}=V(),{direction:C}=(0,Ke.useLocale)(),x=o.visibleRange.start,R=C==="rtl",E=[],B=[];for(let P=0;P<k;P++){let T=x.add({months:P}),O=m.default.createElement(m.Fragment,{key:`calendar-header-${P}`},P===0&&m.default.createElement(G,{...s,className:w(i.nav,R?i.nextButton:i.previousButton),role:R?"next-button":"previous-button"},R?m.default.createElement(se,null):m.default.createElement(oe,null)),m.default.createElement(pe,{"data-layout":a,currentMonth:x,date:T}),P===k-1&&m.default.createElement(G,{...l,className:w(i.nav,R?i.previousButton:i.nextButton),role:R?"previous-button":"next-button"},R?m.default.createElement(oe,null):m.default.createElement(se,null))),g=m.default.createElement("div",{className:i.navGroup,style:h?.navGroup},m.default.createElement(G,{...s,className:w(i.nav,i.nextButton),role:"next-button"},m.default.createElement(oe,null)),m.default.createElement(G,{...l,className:w(i.nav,i.previousButton),role:"previous-button"},m.default.createElement(se,null))),u=m.default.createElement(m.Fragment,{key:`calendar-header-${P}`},a==="left"?g:null,m.default.createElement(pe,{"data-layout":a,currentMonth:x,date:T}),a==="right"?g:null);E.push(a==="apart"?O:u);let b=y?m.default.createElement("div",{key:`calendar-month-${P}`,className:i.gridGroup,role:"calendar-month-group"},m.default.createElement(We,{key:`calendar-picker-${P}`,"data-index":P,currentMonth:x,date:T}),m.default.createElement(de,{...e,key:`calendar-grid-${P}`,currentMonth:x.month,startDate:T})):m.default.createElement("div",{key:`calendar-month-${P}`,className:i.gridGroup,role:"calendar-month-group"},m.default.createElement(de,{...e,key:`calendar-grid-${P}`,currentMonth:x.month,startDate:T}));B.push(b)}return m.default.createElement("div",{...(0,je.mergeProps)(r),style:M({"--picker-height":`${v}px`},r?.style,h?.root),"data-picker-expanded":c(f),className:w(n,i.root),ref:t},p,m.default.createElement(ge.VisuallyHidden,null,m.default.createElement("h2",null,r["aria-label"])),m.default.createElement("div",{className:i.container,style:h?.container},m.default.createElement("div",{className:i.header,style:h?.header},E),m.default.createElement("div",{className:i.gridWrapper,style:M(y&&f?{minHeight:"var(--picker-height)",maxHeight:"var(--picker-height)",overflowY:"hidden"}:{},h?.gridWrapper)},B)),m.default.createElement(ge.VisuallyHidden,null,m.default.createElement("button",{"aria-label":l["aria-label"],disabled:l.isDisabled,tabIndex:-1,onClick:()=>o.focusNextPage()})),f?null:d)}),ie=(0,m.memo)(Dt);function ze(e,t){let{minValue:r=new q.CalendarDate(1900,1,1),maxValue:a=new q.CalendarDate(2099,12,31),className:n,classNames:s={},styles:l={},visibleMonths:p=1,weekdayStyle:d="short",createCalendar:o,withPicker:k=!1,pickerHeight:i=278,pickerEmptyItem:y=3,pickerOpen:v,defaultPickerOpen:f=!1,onPickerOpenChange:h,headerLayout:C,...x}=e,{locale:R}=(0,_e.useLocale)(),E=Math.max(1,Math.min(p,4)),B=(0,$.useMemo)(()=>({months:E}),[E]),P=(0,qe.useCalendarState)({...e,locale:R,minValue:r,maxValue:a,visibleDuration:B,createCalendar:!o||typeof o!="function"?q.createCalendar:o}),[T,O]=X({prop:v,defaultProp:f,onChange:h}),{calendarProps:g,prevButtonProps:u,nextButtonProps:b,title:L,errorMessageProps:N}=(0,Ye.useCalendar)(e,P);return $.default.createElement(ee,{value:{state:P,visibleMonths:E,weekdayStyle:d,withPicker:k,pickerHeight:i,pickerEmptyItem:y,isPickerExpanded:T,setPickerExpanded:O,classNames:s,styles:l}},$.default.createElement(ie,{ref:t,calendarProps:g,prevButtonProps:u,nextButtonProps:b,title:L,errorMessageProps:N,className:n,headerLayout:C,...x}))}ze.displayName="Calendar";var Je=(0,$.forwardRef)(ze);var U=S(require("react")),z=require("@internationalized/date"),Qe=require("@react-aria/calendar"),Xe=require("@react-aria/i18n"),et=require("@react-stately/calendar");function tt(e,t){let{minValue:r=new z.CalendarDate(1900,1,1),maxValue:a=new z.CalendarDate(2099,12,31),className:n,classNames:s={},styles:l={},visibleMonths:p=1,weekdayStyle:d="short",createCalendar:o,withPicker:k=!1,pickerHeight:i=278,pickerEmptyItem:y=3,pickerOpen:v,defaultPickerOpen:f=!1,onPickerOpenChange:h,...C}=e,{locale:x}=(0,Xe.useLocale)(),R=k?1:Math.max(1,Math.min(p,3)),E=(0,U.useMemo)(()=>({months:R}),[R]),B=(0,et.useRangeCalendarState)({...e,locale:x,minValue:r,maxValue:a,visibleDuration:E,createCalendar:!o||typeof o!="function"?z.createCalendar:o}),P=(0,U.useRef)(null),{calendarProps:T,prevButtonProps:O,nextButtonProps:g,title:u,errorMessageProps:b}=(0,Qe.useRangeCalendar)(e,B,P),[L,N]=X({prop:v,defaultProp:f,onChange:h}),J=re(P,t);return U.default.createElement(ee,{value:{state:B,visibleMonths:R,weekdayStyle:d,classNames:s,styles:l,withPicker:k,pickerHeight:i,pickerEmptyItem:y,isPickerExpanded:L,setPickerExpanded:N}},U.default.createElement(ie,{ref:J,calendarProps:T,prevButtonProps:O,nextButtonProps:g,title:u,errorMessageProps:b,className:n,...C}))}tt.displayName="RangeCalendar";var rt=(0,U.forwardRef)(tt);0&&(module.exports={Calendar,RangeCalendar,useCalendarContext});