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