UNPKG

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