react-trip-date
Version:
Accessible, fully customizable date and range picker for React applications.
341 lines (305 loc) • 27.6 kB
JavaScript
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),Mr=require("@zoomit/dayjs-jalali-plugin"),F=require("dayjs"),$r=require("dayjs/locale/de"),jr=require("dayjs/locale/es"),Or=require("dayjs/locale/fa"),Sr=require("dayjs/locale/fr"),Er=require("dayjs/locale/it"),Cr=require("dayjs/locale/ja"),Nr=require("dayjs/locale/ru"),_r=require("dayjs/locale/tr"),Rr=require("dayjs/locale/zh"),Tr=require("dayjs/plugin/isBetween"),Ir=require("dayjs/plugin/isSameOrBefore"),T=require("styled-components"),w=require("react");function Ar(r){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const n in r)if(n!=="default"){const e=Object.getOwnPropertyDescriptor(r,n);Object.defineProperty(o,n,e.get?e:{enumerable:!0,get:()=>r[n]})}}return o.default=r,Object.freeze(o)}const D=Ar(w),Lr=r=>{const o=w.useRef(null);return w.useEffect(()=>{const n=e=>{const t=o.current;!t||t.contains(e.target)||r(e)};return document.addEventListener("mousedown",n),document.addEventListener("touchstart",n),()=>{document.removeEventListener("mousedown",n),document.removeEventListener("touchstart",n)}},[r]),{ref:o}},qr=120,zr=({setDisplayYears:r,setSource:o})=>{const{ref:n}=Lr(()=>r(!1)),e=[];for(let t=0;t<qr;t++){const c=F().subtract(t,"year").format("YYYY");e.push(i.jsx("button",{type:"button",onClick:()=>{o(a=>a.set("year",Number(c))),r(a=>!a)},children:c},c))}return i.jsx(Br,{className:"tp-calendar-year-select",ref:n,role:"listbox","aria-label":"Choose year",children:e})},Br=T.div`
display: flex;
flex-direction: column;
position: absolute;
top: 20px;
left: 0;
right: 0;
margin: auto;
width: 80px;
height: 40vh;
background: #fff;
overflow: auto;
padding: 10px 0px;
border-radius: ${({theme:r})=>r.shape.borderRadius}px;
z-index: 10;
> button {
display: block;
margin: 0;
padding: 6px 0;
text-align: center;
width: 100%;
color: ${({theme:r})=>r.grey[900]};
border: 0;
background: transparent;
font: inherit;
cursor: pointer;
&:hover,
&:focus-visible {
background-color: ${({theme:r})=>r.primary.light};
outline: none;
}
}
`,ir=r=>D.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:4.876,height:7.908,viewBox:"0 0 4.876 7.908",fill:"currentColor",...r},D.createElement("path",{id:"ic_keyboard_arrow_down_24px_1_",d:"M241.923 1911.5l3.031 3.031 3.031-3.031.923.923-3.954 3.954-3.954-3.954z",className:"semi-dark",transform:"rotate(90 1078.688 837.689)"})),sr=r=>D.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:4.877,height:7.91,viewBox:"0 0 4.877 7.91",fill:"currentColor",...r},D.createElement("path",{id:"ic_keyboard_arrow_down_24px_1_",d:"M241.923 1911.5l3.031 3.031 3.031-3.031.923.923-3.954 3.954-3.954-3.954z",transform:"rotate(-90 -831.296 1080.205)"})),hr=({jalali:r,source:o,setSource:n,components:e,displayMonths:t,numberOfMonths:c,setDisplayMonths:a})=>{var p,y,k,v,b,M,m,$,f,Y,O,E,C,_,I,L;const[s,l]=w.useState(!1),u=()=>{n(o.subtract(1,t?"year":"month"))},d=()=>{n(o.add(1,t?"year":"month"))},S=t?`Previous year, ${o.format("YYYY")}`:`Previous month, ${o.format("MMMM YYYY")}`,h=t?`Next year, ${o.format("YYYY")}`:`Next month, ${o.format("MMMM YYYY")}`,j=()=>{var B,N;if(t)return i.jsxs(i.Fragment,{children:[i.jsx("button",{type:"button",className:"tp-calendar-header-title",onClick:()=>l(R=>!R),"aria-label":`Choose year, ${o.format("YYYY")}`,children:o.format(((B=e==null?void 0:e.header)==null?void 0:B.format)??(t?"YYYY":"YYYY-MMMM"))}),s&&i.jsx(zr,{setDisplayYears:l,setSource:n})]});const z=[];for(let R=0;R<c;R++){const K=o.add(R,"month");z.push(i.jsx("button",{type:"button",className:"tp-calendar-header-title",onClick:()=>a(P=>!P),"aria-label":`Choose month, ${K.format("MMMM YYYY")}`,children:K.format(((N=e==null?void 0:e.header)==null?void 0:N.format)??"YYYY MMMM")},R))}return z};return i.jsxs(Wr,{className:"tp-calendar-header",$numberOfMonths:c,$jalali:r,$displayMonths:t,children:[i.jsxs("button",{type:"button","aria-label":S,className:(y=(p=e==null?void 0:e.header)==null?void 0:p.monthIcons)!=null&&y.left?"":"action left",onClick:u,children:[((v=(k=e==null?void 0:e.header)==null?void 0:k.monthIcons)==null?void 0:v.left)&&!t&&e.header.monthIcons.left,((M=(b=e==null?void 0:e.header)==null?void 0:b.yearIcons)==null?void 0:M.left)&&t&&e.header.yearIcons.left,!(($=(m=e==null?void 0:e.header)==null?void 0:m.monthIcons)!=null&&$.left)&&i.jsxs(i.Fragment,{children:[i.jsx(ir,{}),t?i.jsx(ir,{}):null]})]}),j(),i.jsxs("button",{type:"button","aria-label":h,className:(Y=(f=e==null?void 0:e.header)==null?void 0:f.monthIcons)!=null&&Y.right?"":"action right",onClick:d,children:[((E=(O=e==null?void 0:e.header)==null?void 0:O.monthIcons)==null?void 0:E.right)&&!t&&e.header.monthIcons.right,((_=(C=e==null?void 0:e.header)==null?void 0:C.yearIcons)==null?void 0:_.right)&&t&&e.header.yearIcons.right,!((L=(I=e==null?void 0:e.header)==null?void 0:I.monthIcons)!=null&&L.right)&&i.jsxs(i.Fragment,{children:[i.jsx(sr,{}),t?i.jsx(sr,{}):null]})]})]})},Wr=T.div`
display: flex;
justify-content: space-between;
align-items: center;
height: 55px;
position: relative;
background-color: ${({theme:r})=>r.primary.main};
flex-direction: ${({$jalali:r})=>r?"row-reverse":"row"};
border-radius: ${({theme:r})=>r.shape.borderRadius}px;
.tp-calendar-header-title {
color: #fff;
text-align: center;
cursor: pointer;
border: 0;
background: transparent;
font: inherit;
border-radius: ${({theme:r})=>r.shape.borderRadius}px;
direction: ${({$jalali:r})=>r?"ltr":"rtl"};
width: ${({$numberOfMonths:r,$displayMonths:o})=>o?"120px":`${100/r}% `};
margin: auto;
&:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
}
button.action {
position: absolute;
height: 55px;
width: 55px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border: 0;
background: transparent;
color: #fff;
&:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
&.right {
transform: ${({$jalali:r})=>r?"rotate(180deg)":"rotate(0deg)"};
${({$jalali:r})=>r?"left:0;":"right: 0;"}
}
&.left {
transform: ${({$jalali:r})=>r?"rotate(180deg)":"rotate(0deg)"};
${({$jalali:r})=>r?"right:0;":"left: 0;"}
}
}
svg {
width: 10px;
height: 15px;
color: ${({theme:r})=>r.background.default};
}
`,V={primary:{light:"#d0f4f0",main:"#13c8b5",dark:"#12baa9"},grey:{700:"#707070",900:"#1b1b1d"},background:{default:"#f5f5f5"},text:{disabled:"#BABABA"},shape:{borderRadius:4}},A="YYYY-MM-DD",mr=(...r)=>{const o=[];for(const n of r){if(!n)continue;const e=typeof n;if(e==="string"||e==="number")o.push(n);else if(e==="object"){const t=n;if(t.toString&&t.toString!==Object.prototype.toString)o.push(t.toString());else for(const c in t)Object.prototype.hasOwnProperty.call(t,c)&&t[c]&&o.push(c)}}return o.join(" ")},Fr=[$r,jr,Or,Sr,Er,Cr,Nr,_r,Rr];if(Fr.length===0)throw new Error("react-trip-date: locale registration failed.");F.extend(Mr);F.extend(Tr);F.extend(Ir);const x=F,W=(r,o)=>x(r,{jalali:o,format:"YYYY-MM-DD"}).calendar("gregory").format("YYYY-MM-DD"),Kr="YYYY-MM-DD";function pr(r,{day:o,source:n,setSource:e,setFocusedDate:t,requestFocus:c}){let a;switch(r.key){case"ArrowLeft":a=o.subtract(1,"day");break;case"ArrowRight":a=o.add(1,"day");break;case"ArrowUp":a=o.subtract(1,"week");break;case"ArrowDown":a=o.add(1,"week");break;case"Home":a=o.startOf("week");break;case"End":a=o.endOf("week");break;case"PageUp":a=r.shiftKey?o.subtract(1,"year"):o.subtract(1,"month");break;case"PageDown":a=r.shiftKey?o.add(1,"year"):o.add(1,"month");break;default:return!1}r.preventDefault(),r.stopPropagation();const s=a.format(Kr);return c==null||c(s),t(s),(a.month()!==n.month()||a.year()!==n.year())&&e(a.startOf("month")),!0}const Pr=()=>/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(navigator.userAgent||navigator.vendor||window.opera)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test((navigator.userAgent||navigator.vendor||window.opera).substr(0,4)),Gr=()=>x().format(A),Dr=({day:r,source:o,setSource:n,jalali:e,selectedDays:t,disabledDays:c,allowDisabledDaysSpan:a,hoverDay:s,disabled:l,components:u,setHoverDay:d,setSelectedDays:S,numberOfMonth:h,disabledBeforeToday:j,disabledBeforeDate:p,disabledAfterDate:y,dayClasses:k,focusedDate:v,setFocusedDate:b,focusRef:M,requestFocus:m})=>{const $=w.useRef(null),f=W(r,e),Y=v===f,O=(()=>{if(!j)return p;const g=Gr();return p&&x(p).isAfter(g)?p:g})(),E=g=>!!(c.includes(g)||O&&x(g).isBefore(O)||y&&x(g).isAfter(y));w.useEffect(()=>{Y&&$.current&&M.current===f&&document.activeElement!==$.current&&($.current.focus({preventScroll:!0}),M.current=null)},[Y,f,M]);const C=g=>{S(g)},_=(g,q)=>{l||(x(g).isBefore(q)?C({from:g,to:q}):C({from:q,to:g}))},I=()=>{if(!(l||E(f))){if(!(t!=null&&t.from)&&!(t!=null&&t.to)){d(""),C({from:f,to:""});return}if(t!=null&&t.from&&!(t!=null&&t.to)){const g=c.filter(q=>x(q).isBetween(t.from,f,null,"[]"));if(g.length&&!a){const q=s??f,H=[...g].sort((nr,ar)=>x(g[0]).isBefore(q)?x(nr).isSameOrBefore(ar)?-1:1:x(nr).isSameOrBefore(ar)?1:-1)[0];x(H).isBefore(q)?_(t.from,W(x(H).subtract(1,"day"),e)):_(t.from,W(x(H).add(1,"day"),e))}else _(t.from,f);return}d(""),C({from:f,to:""})}},L=g=>{g.preventDefault(),!l&&(b(f),I())},z=g=>{pr(g,{day:r,source:o,setSource:n,setFocusedDate:b,requestFocus:m})||(g.key==="Enter"||g.key===" ")&&(g.preventDefault(),I())},B=()=>{!(t!=null&&t.to)&&(t!=null&&t.from)&&d(f)},N=()=>t?t.to?t.to:s||t.from:"",R=()=>{if(!t||!t.from)return!1;if(f===t.from)return!0;const g=N();return E(g)?!1:x(f).isBetween(t.from,g,null,"[]")},K=r.month()!==o.add(h,"month").month(),P=x().calendar(e?"jalali":"gregory").format(A)===r.format(A),rr=E(f)&&!R(),tr=!!t&&f===(x(t.from).isSameOrBefore(N())?t.from:t.to),er=!!t&&f===(x(t.from).isSameOrBefore(N())?t.to:t.from),or=u==null?void 0:u.days,yr=k?k(r).join(" "):"";return i.jsx(Vr,{ref:$,type:"button","data-test":r.format(A),onClick:L,onKeyDown:z,onMouseEnter:Pr()?void 0:B,tabIndex:Y?0:-1,role:"gridcell","aria-selected":tr||er||R(),"aria-disabled":rr||l||void 0,"aria-current":P?"date":void 0,"aria-label":r.format("dddd, MMMM D, YYYY"),disabled:l,className:mr({inactive:K,disabled:rr,"range-select":R(),jalali:e,disable:l,same:!!t&&x(t.from).isSame(t.to),"start-date":tr,"end-date":er,today:P},yr,"tp-calendar-day"),children:or?i.jsx(or,{day:r.format(A),jalali:e}):r.format("DD")})},Vr=T.button`
border: 0;
background: transparent;
font: inherit;
width: 40px;
height: 40px;
transition: all 0.15s ease-in-out;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin-bottom: 5px;
cursor: pointer;
color: ${({theme:r})=>r.grey[900]};
&:focus-visible {
outline: 2px solid ${({theme:r})=>r.primary.dark};
outline-offset: 2px;
}
&:hover {
background-color: ${({theme:r})=>r.primary.light};
color: ${({theme:r})=>r.grey[700]};
&.disable {
background-color: transparent;
color: ${({theme:r})=>r.grey[900]};
cursor: default;
}
}
&.inactive {
color: transparent;
visibility: hidden;
}
&.today {
border: 1px solid #e2e2e2;
border-radius: 50%;
}
&.disabled {
color: ${({theme:r})=>r.text.disabled};
position: relative;
cursor: not-allowed;
&:hover {
background-color: transparent;
color: ${({theme:r})=>r.text.disabled};
}
&::after {
position: absolute;
content: "";
width: 15px;
height: 2px;
background-color: ${({theme:r})=>r.text.disabled};
transform: rotate(-20deg);
}
}
&.range-select {
background-color: ${({theme:r})=>r.primary.dark};
color: #fff;
border: 0;
border-radius: 0;
&:hover {
background-color: ${({theme:r})=>r.primary.dark};
color: #fff;
}
box-shadow: 0px 10px 30px -12px ${({theme:r})=>r.primary.dark};
&.jalali {
box-shadow: 0px 10px 30px -12px ${({theme:r})=>r.primary.dark};
}
&.end-date {
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
&.jalali {
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
}
&.start-date {
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
&.jalali {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
}
}
}
&.same {
border-top-left-radius: 25px !important;
border-bottom-left-radius: 25px !important;
border-top-right-radius: 25px !important;
border-bottom-right-radius: 25px !important;
}
`,br=({jalali:r,startOfWeek:o,components:n})=>{let e=["Su","Mo","Tu","We","Th","Fr","Sa"];if(n!=null&&n.titles?e=[...n.titles]:r&&(e=["ش","ی","د","س","چ","پ","ج"]),!r){let t=o%7;if(t>0)for(;t--;)e.push(e.shift())}if(n!=null&&n.wrapper){const t=n.wrapper;return i.jsx(t,{jalali:r,startOfWeek:o})}return i.jsx(Hr,{className:"tp-calendar-week-titles",$jalali:r,role:"row",children:e.map(t=>i.jsx("p",{role:"columnheader","aria-label":t,children:t},t))})},Hr=T.div`
display: flex;
text-align: center;
justify-content: center;
flex-direction: ${({$jalali:r})=>r?"row-reverse":"row"};
border-bottom: 1px solid #e2e2e2;
margin: 30px 0 15px 0;
p {
width: 38px;
margin-bottom: 15px;
margin-left: 5px;
}
`,gr=T.div`
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
flex-direction: ${({$jalali:r})=>r?"row-reverse":"row"};
`,xr=T.div`
height: 350px;
display: flex;
position: relative;
align-items: center;
flex-direction: column;
width: ${({$numberOfMonths:r})=>T.css`calc(${100/r}%)`};
`,wr=T.div`
display: flex;
align-items: center;
position: relative;
flex-direction: ${({$jalali:r})=>r?"row-reverse":"row"};
`,Q=({source:r,startOfWeek:o})=>{const n=[],e=r.daysInMonth(),t=r.startOf("month").day(),c=o<0?0:o%7;let a=0;t>c?a=t-c:c>t&&(a=7-(c-t));let s=r.startOf("month").subtract(a,"day"),l=e+a;const u=l%7;u>0&&(l+=7-u);for(let d=0;d<l;d++)n.push(s),s=s.add(1,"day");return n},X=(r,o)=>{let n=0;const e=[];for(;n*o<r.length;)e.push(r.slice(n*o,++n*o));return e},U="YYYY-MM-DD",cr=r=>r.format("YYYY-MM"),lr=r=>r.format(U),Ur=({allowDisabledDaysSpan:r,numberOfMonths:o,startOfWeek:n,selectedDays:e,disabledDays:t,hoverDay:c,setHoverDay:a,components:s,setSelectedDays:l,disabledBeforeToday:u,disabledBeforeDate:d,disabledAfterDate:S,jalali:h,disabled:j,source:p,setSource:y,dayClasses:k})=>{const[v,b]=w.useState(()=>(e==null?void 0:e.from)??p.format(U)),M=w.useRef(null),m=f=>{M.current=f},$=[];for(let f=0;f<o;f++){const Y=p.add(f,"month"),O=X(Q({source:Y,startOfWeek:h?6:n}),7);$.push(i.jsxs(xr,{className:"tp-calendar-month",$numberOfMonths:o||1,"data-test":cr(Y),role:"grid","aria-label":Y.format("MMMM YYYY"),children:[i.jsx(br,{jalali:h,startOfWeek:n,components:s==null?void 0:s.titleOfWeek}),O.map(E=>i.jsx(wr,{className:"tp-calendar-week",$jalali:h,"data-test":lr(E[0]),role:"row",children:E.map(C=>i.jsx(Dr,{day:C,jalali:h,numberOfMonth:f,hoverDay:c,setHoverDay:a,components:s,source:p,setSource:y,disabled:j,disabledDays:t,selectedDays:e,setSelectedDays:l,disabledBeforeToday:u,allowDisabledDaysSpan:r,disabledBeforeDate:d,disabledAfterDate:S,dayClasses:k,focusedDate:v,setFocusedDate:b,focusRef:M,requestFocus:m},C.format(U)))},lr(E[0])))]},cr(Y)))}return i.jsx(gr,{className:"tp-calendar-months",$jalali:h,children:$})},kr=({source:r,setSource:o,setDisplayMonths:n,jalali:e})=>{const t=s=>{o(s.month(+s.format("M")-1)),n(!1)},c=r.date(1),a=[];for(let s=0;s<12;s++)a[s]=c.month(s);return i.jsx(Jr,{className:"tp-calendar-month-select",$jalali:e,role:"listbox","aria-label":"Choose month",children:a.map((s,l)=>i.jsx("div",{onClick:()=>t(s),onKeyDown:u=>{(u.key==="Enter"||u.key===" ")&&(u.preventDefault(),t(s))},role:"option","aria-selected":r.month()===s.month(),tabIndex:0,"data-testid":"month-item-to-select",children:i.jsx("p",{children:s.format("MMMM")})},l))})},Jr=T.div`
margin-top: 15px;
display: flex;
flex: 1 1;
height: 350px;
flex-wrap: wrap;
flex-direction: ${({$jalali:r})=>r?"row-reverse":"row"};
> div {
flex-basis: calc(25% - 4px);
justify-content: center;
text-align: center;
display: flex;
align-items: center;
cursor: pointer;
border: 2px solid #fff;
background-color: ${({theme:r})=>r.primary.main};
border-radius: ${({theme:r})=>r.shape.borderRadius}px;
&:focus-visible {
outline: 2px solid ${({theme:r})=>r.primary.dark};
outline-offset: 2px;
}
p {
color: #fff;
}
}
`,G=r=>typeof r=="object"&&r!==null&&!Array.isArray(r)&&Object.getPrototypeOf(r)===Object.prototype,Z=(r,...o)=>{let n=G(r)?{...r}:{};for(const e of o){if(!G(e))continue;const t={...n};for(const c of Object.keys(e)){const a=e[c],s=t[c];G(a)?t[c]=Z(G(s)?s:{},a):Array.isArray(a)&&Array.isArray(s)?t[c]=Array.from(new Set([...s,...a])):t[c]=a}n=t}return n},fr=(r=!1,o,n="en")=>x(o).calendar(r?"jalali":"gregory").locale(r?"fa":n||"en"),Qr=580,Xr=320;function vr({autoResponsive:r,initialMonthAndYear:o,jalali:n,locale:e,numberOfMonthsProp:t,onRangeDateInScreen:c,initialFocusDate:a}){const s=w.useRef(null),[l,u]=w.useState(()=>fr(n,o??a,e)),[d,S]=w.useState(!1),[h,j]=w.useState(t);w.useEffect(()=>{o&&u(fr(n,o,e))},[o,n,e]),w.useEffect(()=>{if(!r){j(t);return}if(typeof window>"u")return;const y=s.current;if(!y)return;const k=b=>{b<Qr?j(1):j(Math.max(1,Math.floor(b/Xr)))};if(k(y.clientWidth),typeof ResizeObserver>"u")return;const v=new ResizeObserver(b=>{for(const M of b)k(M.contentRect.width)});return v.observe(y),()=>v.disconnect()},[r,t]);const p=w.useRef(c);return p.current=c,w.useEffect(()=>{if(!p.current)return;const y=Math.max(0,h-1);let k=l.add(y,"month");k=k.date(k.daysInMonth());const v=l.date(1);p.current({start:W(v,n),end:W(k,n)})},[n,h,l]),{ref:s,source:l,setSource:u,numberOfMonths:h,displayMonths:d,setDisplayMonths:S}}const Zr=typeof process<"u"&&typeof process.env<"u"&&process.env.NODE_ENV!=="production";function Yr(r,o,n){const e=r!==void 0,{current:t}=w.useRef(e);Zr&&e!==t&&console.warn("[react-trip-date] A controlled prop was switched between controlled and uncontrolled. Pick one for the lifetime of the component.");const[c,a]=w.useState(o),s=e?r:c,l=w.useRef(n);l.current=n;const u=w.useCallback(d=>{var S;if(!t)a(h=>{var p;const j=typeof d=="function"?d(h):d;return(p=l.current)==null||p.call(l,j),j});else{const h=typeof d=="function"?d(r):d;(S=l.current)==null||S.call(l,h)}},[t,r]);return[s,u]}const rt={from:"",to:""},tt=({autoResponsive:r=!0,allowDisabledDaysSpan:o=!1,components:n,disabled:e=!1,dayClasses:t,disabledAfterDate:c,disabledBeforeToday:a=!1,disabledBeforeDate:s,disabledDays:l=[],initialMonthAndYear:u,jalali:d=!1,locale:S,numberOfMonths:h=1,onChange:j,onRangeDateInScreen:p,selectedDays:y,startOfWeek:k=1,theme:v})=>{const[b,M]=Yr(y,y??rt,j),[m,$]=w.useState(),f=!u&&(b!=null&&b.from)?b.from:void 0,{ref:Y,source:O,setSource:E,numberOfMonths:C,displayMonths:_,setDisplayMonths:I}=vr({autoResponsive:r,initialMonthAndYear:u,jalali:d,locale:S,numberOfMonthsProp:h,onRangeDateInScreen:p,initialFocusDate:f}),L=v?Z(V,v):V;return i.jsx("div",{className:"tp-calendar",ref:Y,role:"group","aria-label":"Date range picker",children:i.jsxs(T.ThemeProvider,{theme:L,children:[i.jsx(hr,{jalali:d,source:O,setSource:E,components:n,displayMonths:_,numberOfMonths:C,setDisplayMonths:I}),_?i.jsx(kr,{jalali:d,setDisplayMonths:I,setSource:E,source:O}):i.jsx(Ur,{source:O,jalali:d,disabled:e,setSource:E,hoverDay:m,components:n,setHoverDay:$,startOfWeek:k,disabledDays:l,selectedDays:b,numberOfMonths:C,setSelectedDays:M,disabledBeforeToday:a,disabledBeforeDate:s,disabledAfterDate:c,allowDisabledDaysSpan:o,dayClasses:t})]})})},et=()=>x().format(A),ot=({day:r,jalali:o,source:n,setSource:e,disabled:t,components:c,selectedDays:a,disabledDays:s,numberOfMonth:l,setSelectedDays:u,disabledBeforeToday:d,numberOfSelectableDays:S,disabledBeforeDate:h,disabledAfterDate:j,dayClasses:p,focusedDate:y,setFocusedDate:k,focusRef:v,requestFocus:b})=>{const M=w.useRef(null),m=W(r,o),$=y===m,f=a.includes(m),Y=(()=>{if(!d)return h;const N=et();return h&&x(h).isAfter(N)?h:N})(),O=!!(t||s.includes(m)||Y&&x(m).isBefore(Y)||j&&x(m).isAfter(j));w.useEffect(()=>{$&&M.current&&v.current===m&&document.activeElement!==M.current&&(M.current.focus({preventScroll:!0}),v.current=null)},[$,m,v]);const E=r.month()!==n.add(l,"month").month(),C=x().calendar(o?"jalali":"gregory").format(A)===r.format(A),_=N=>{u(N)},I=N=>{if(N.preventDefault(),!t){if(k(m),a.includes(m)){_(a.filter(R=>R!==m));return}if(!O){if(S===1){_([m]);return}S>0&&a.length>=S||_([...a,m])}}},L=N=>{pr(N,{day:r,source:n,setSource:e,setFocusedDate:k,requestFocus:b})||(N.key==="Enter"||N.key===" ")&&(N.preventDefault(),I(N))},z=c==null?void 0:c.days,B=p?p(r).join(" "):"";return i.jsx(nt,{ref:M,type:"button","data-test":r.format(A),onClick:I,onKeyDown:L,tabIndex:$?0:-1,role:"gridcell","aria-selected":f,"aria-disabled":O||void 0,"aria-current":C?"date":void 0,"aria-label":r.format("dddd, MMMM D, YYYY"),disabled:t,className:mr({inactive:E,selected:f,disabled:O,disable:t,today:C},B,"tp-calendar-day"),children:z?i.jsx(z,{day:r.format(A),jalali:o}):r.format("DD")})},nt=T.button`
border: 0;
background: transparent;
border-radius: 50%;
margin-left: 5px;
margin-bottom: 5px;
width: 38px;
height: 38px;
transition: all 0.15s ease-in-out;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
cursor: pointer;
color: ${({theme:r})=>r.grey[900]};
user-select: none;
font: inherit;
&:focus-visible {
outline: 2px solid ${({theme:r})=>r.primary.dark};
outline-offset: 2px;
}
&:hover {
background-color: ${({theme:r})=>r.primary.light};
color: ${({theme:r})=>r.grey[700]};
&.disable {
cursor: default;
background-color: transparent;
color: ${({theme:r})=>r.grey[900]};
}
}
&.inactive {
color: transparent;
visibility: hidden;
}
&.today {
border: 1px solid #e2e2e2;
}
&.disabled {
color: ${({theme:r})=>r.text.disabled};
position: relative;
cursor: not-allowed;
&:hover {
background-color: transparent;
color: ${({theme:r})=>r.text.disabled};
}
&::after {
position: absolute;
content: "";
width: 15px;
height: 2px;
background-color: ${({theme:r})=>r.text.disabled};
transform: rotate(-20deg);
}
}
&.selected {
color: #fff;
background-color: ${({theme:r})=>r.primary.dark};
box-shadow: 0px 10px 30px -12px ${({theme:r})=>r.primary.main};
&:hover {
background-color: ${({theme:r})=>r.primary.main};
&.disable {
color: #fff;
}
}
p {
color: #fff;
}
}
`,J="YYYY-MM-DD",dr=r=>r.format("YYYY-MM"),ur=r=>r.format(J),at=({numberOfSelectableDays:r,numberOfMonths:o,startOfWeek:n,selectedDays:e,disabledDays:t,setSelectedDays:c,components:a,disabledBeforeToday:s,disabledBeforeDate:l,disabledAfterDate:u,jalali:d,disabled:S,source:h,setSource:j,dayClasses:p})=>{const[y,k]=w.useState(()=>e[0]??h.format(J)),v=w.useRef(null),b=m=>{v.current=m},M=[];for(let m=0;m<o;m++){const $=h.add(m,"month"),f=X(Q({source:$,startOfWeek:d?6:n}),7);M.push(i.jsxs(xr,{className:"tp-calendar-month",$numberOfMonths:o||1,"data-test":dr($),role:"grid","aria-label":$.format("MMMM YYYY"),children:[i.jsx(br,{jalali:d,startOfWeek:n,components:a==null?void 0:a.titleOfWeek}),f.map(Y=>i.jsx(wr,{className:"tp-calendar-week",$jalali:d,"data-test":ur(Y[0]),role:"row",children:Y.map(O=>i.jsx(ot,{day:O,jalali:d,numberOfMonth:m,disabled:S,source:h,setSource:j,components:a,disabledDays:t,selectedDays:e,setSelectedDays:c,disabledBeforeToday:s,disabledBeforeDate:l,disabledAfterDate:u,numberOfSelectableDays:r,dayClasses:p,focusedDate:y,setFocusedDate:k,focusRef:v,requestFocus:b},O.format(J)))},ur(Y[0])))]},dr($)))}return i.jsx(gr,{className:"tp-calendar-months",$jalali:d,children:M})},it=({autoResponsive:r=!0,components:o,dayClasses:n,disabled:e=!1,disabledBeforeToday:t=!1,disabledAfterDate:c,disabledBeforeDate:a,disabledDays:s=[],initialMonthAndYear:l,jalali:u=!1,locale:d,numberOfMonths:S=1,numberOfSelectableDays:h=0,onChange:j,onRangeDateInScreen:p,selectedDays:y,startOfWeek:k=1,theme:v})=>{const[b,M]=Yr(y,y??[],j),m=!l&&b.length>0?b[0]:void 0,{ref:$,source:f,setSource:Y,numberOfMonths:O,displayMonths:E,setDisplayMonths:C}=vr({autoResponsive:r,initialMonthAndYear:l,jalali:u,locale:d,numberOfMonthsProp:S,onRangeDateInScreen:p,initialFocusDate:m}),_=v?Z(V,v):V;return i.jsx("div",{className:"tp-calendar",ref:$,role:"group","aria-label":"Date picker",children:i.jsxs(T.ThemeProvider,{theme:_,children:[i.jsx(hr,{jalali:u,source:f,setSource:Y,components:o,displayMonths:E,numberOfMonths:O,setDisplayMonths:C}),E?i.jsx(kr,{jalali:u,setDisplayMonths:C,setSource:Y,source:f}):i.jsx(at,{source:f,jalali:u,disabled:e,setSource:Y,components:o,startOfWeek:k,disabledDays:s,selectedDays:b,numberOfMonths:O,setSelectedDays:M,disabledAfterDate:c,disabledBeforeDate:a,disabledBeforeToday:t,numberOfSelectableDays:h,dayClasses:n})]})})},st=({jalali:r,startOfWeek:o=1,children:n})=>{const e=x().calendar(r?"jalali":"gregory"),t=X(Q({source:e,startOfWeek:r?6:o}),7);return i.jsx(i.Fragment,{children:n(t)})};exports.Calendar=st;exports.DatePicker=it;exports.RangePicker=tt;
//# sourceMappingURL=index.cjs.map