@dotss/ui 1.0.1 → 1.0.2

package/DatePicker/DatePicker.cjs

@@ -1,9 +1,9 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("@emotion/react/jsx-runtime"),d=require("react"),at=require("../Flexbox/Flexbox.cjs"),Ee=require("../Icon/Icon.cjs"),_e=require("../IconButton/IconButton.cjs"),ct=require("../Menu/Menu.cjs"),lt=require("../Menu/MenuBlock/MenuBlock.cjs"),Xe=require("../Menu/MenuButton/MenuButton.cjs"),ut=require("../core/useTheme.cjs"),ft=require("@emotion/styled"),te=require("../utils/getContrastingTextColor/getContrastingTextColor.cjs"),dt=e=>e&&e.__esModule?e:{default:e},M=dt(ft),ht=M.default.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("@emotion/react/jsx-runtime"),d=require("react"),ct=require("../Flexbox/Flexbox.cjs"),Ee=require("../Icon/Icon.cjs"),_e=require("../IconButton/IconButton.cjs"),lt=require("../Menu/Menu.cjs"),ut=require("../Menu/MenuBlock/MenuBlock.cjs"),Xe=require("../Menu/MenuButton/MenuButton.cjs"),ft=require("../core/useTheme.cjs"),dt=require("@emotion/styled"),te=require("../utils/getContrastingTextColor/getContrastingTextColor.cjs"),ht=e=>e&&e.__esModule?e:{default:e},S=ht(dt),pt=S.default.div`
   position: relative;
   display: flex;
   flex-direction: column;
   gap: ${({theme:{spacing:e}})=>e.content(2)}px;
-`,Ce=M.default.div`
+`,Ne=S.default.div`
   display: inline-flex;
   align-items: center;
   justify-content: flex-start;
@@ -12,14 +12,14 @@
   cursor: ${({clickable:e})=>e?"pointer":"default"};
 
   ${({theme:{typography:{h4B:e}}})=>({fontSize:e.size,fontWeight:e.weight,lineHeight:e.lineHeight,letterSpacing:e.letterSpacing})};
-`,mt=M.default.div`
+`,mt=S.default.div`
   display: flex;
   align-items: center;
   justify-content: center;
   gap: ${({theme:{spacing:e}})=>e.content(4)}px;
 
   ${({theme:{typography:{h2B:e}}})=>({fontSize:e.size,fontWeight:e.weight,lineHeight:e.lineHeight,letterSpacing:e.letterSpacing})};
-`,pt=M.default.div`
+`,yt=S.default.div`
   display: flex;
   align-items: center;
   padding: 0 ${({theme:{spacing:e},edgeSpacing:n})=>e.content(n||0)}px;
@@ -30,22 +30,22 @@
     text-align: center;
     ${({theme:{palette:{grey:e},typography:{b4M:n}}})=>({fontSize:n.size,fontWeight:n.weight,lineHeight:n.lineHeight,letterSpacing:n.letterSpacing,color:e[50]})};
   }
-`,gt=M.default.div`
+`,gt=S.default.div`
   overflow: hidden;
-`,yt=M.default.div`
+`,Dt=S.default.div`
   display: flex;
   transform: translate3d(0, 0, 0);
-`,Ne=M.default.div`
+`,Be=S.default.div`
   display: flex;
   flex-direction: column;
   min-width: 100%;
   gap: ${({theme:{spacing:e}})=>e.content(2)}px;
   padding: ${({theme:{spacing:e}})=>e.content(2)}px
     ${({theme:{spacing:e},edgeSpacing:n})=>e.content(n||0)}px;
-`,Be=M.default.div`
+`,Ke=S.default.div`
   display: flex;
   width: 100%;
-`,Ke=M.default.div`
+`,Ue=S.default.div`
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -83,18 +83,18 @@
 
   ${({theme:{typography:{b2R:e}}})=>({fontSize:e.size,fontWeight:e.weight,lineHeight:e.lineHeight,letterSpacing:e.letterSpacing})};
 
-  ${({theme:{palette:{brand:e,grey:n}},variant:r,today:c,selected:l})=>{if(l){let m={fontWeight:700,color:te.default(e.primary.main,[n.white,n[100]]),"& > div:nth-of-type(1):before":{content:'""',position:"absolute",top:"50%",left:"50%",width:30,height:30,transform:"translate(-50%, -50%)",backgroundColor:e.primary.main,borderRadius:"50%"},'&[aria-disabled="true"] > div:nth-of-type(1):before':{backgroundColor:e.primary.disable}};return r==="start"&&(m={fontWeight:700,color:te.default(e.primary.main,[n.white,n[100]]),overflow:"hidden","& > div:nth-of-type(1):before":{content:'""',position:"absolute",top:"50%",left:"50%",width:30,height:30,transform:"translate(-50%, -50%)",backgroundColor:e.primary.main,borderTopLeftRadius:100,borderBottomLeftRadius:100},'&[aria-disabled="true"] > div:nth-of-type(1):before':{backgroundColor:e.primary.disable},"& > div:nth-of-type(1):after":{content:'""',position:"absolute",top:"50%",left:"50%",width:"100%",height:30,transform:"translateY(-50%)",backgroundColor:e.primary.main},'&[aria-disabled="true"] > div:nth-of-type(1):after':{backgroundColor:e.primary.disable}}),r==="end"&&(m={fontWeight:700,color:te.default(e.primary.main,[n.white,n[100]]),overflow:"hidden","& > div:nth-of-type(1):before":{content:'""',position:"absolute",top:"50%",left:"50%",width:30,height:30,transform:"translate(-50%, -50%)",backgroundColor:e.primary.main,borderTopRightRadius:100,borderBottomRightRadius:100},'&[aria-disabled="true"] > div:nth-of-type(1):before':{backgroundColor:e.primary.disable},"& > div:nth-of-type(1):after":{content:'""',position:"absolute",top:"50%",right:"50%",width:"100%",height:30,transform:"translateY(-50%)",backgroundColor:e.primary.main},'&[aria-disabled="true"] > div:nth-of-type(1):after':{backgroundColor:e.primary.disable}}),r==="middle"&&(m={fontWeight:700,color:te.default(e.primary.main,[n.white,n[100]]),overflow:"hidden","& > div:nth-of-type(1):after":{content:'""',position:"absolute",top:"50%",left:"50%",width:"calc(100% + 1px)",height:30,transform:"translate(-50%, -50%)",backgroundColor:e.primary.main},'&[aria-disabled="true"] > div:nth-of-type(1):after':{backgroundColor:e.primary.disable}}),m}return c?{"& > div:nth-of-type(1):after":{content:'""',position:"absolute",top:"50%",left:"50%",width:30,height:30,transform:"translate(-50%, -50%)",border:`1px solid ${e.primary.main}`,borderRadius:"50%"}}:null}};
+  ${({theme:{palette:{brand:e,grey:n}},variant:r,today:f,selected:o})=>{if(o){let g={fontWeight:700,color:te.default(e.primary.main,[n.white,n[100]]),"& > div:nth-of-type(1):before":{content:'""',position:"absolute",top:"50%",left:"50%",width:30,height:30,transform:"translate(-50%, -50%)",backgroundColor:e.primary.main,borderRadius:"50%"},'&[aria-disabled="true"] > div:nth-of-type(1):before':{backgroundColor:e.primary.disable}};return r==="start"&&(g={fontWeight:700,color:te.default(e.primary.main,[n.white,n[100]]),overflow:"hidden","& > div:nth-of-type(1):before":{content:'""',position:"absolute",top:"50%",left:"50%",width:30,height:30,transform:"translate(-50%, -50%)",backgroundColor:e.primary.main,borderTopLeftRadius:100,borderBottomLeftRadius:100},'&[aria-disabled="true"] > div:nth-of-type(1):before':{backgroundColor:e.primary.disable},"& > div:nth-of-type(1):after":{content:'""',position:"absolute",top:"50%",left:"50%",width:"100%",height:30,transform:"translateY(-50%)",backgroundColor:e.primary.main},'&[aria-disabled="true"] > div:nth-of-type(1):after':{backgroundColor:e.primary.disable}}),r==="end"&&(g={fontWeight:700,color:te.default(e.primary.main,[n.white,n[100]]),overflow:"hidden","& > div:nth-of-type(1):before":{content:'""',position:"absolute",top:"50%",left:"50%",width:30,height:30,transform:"translate(-50%, -50%)",backgroundColor:e.primary.main,borderTopRightRadius:100,borderBottomRightRadius:100},'&[aria-disabled="true"] > div:nth-of-type(1):before':{backgroundColor:e.primary.disable},"& > div:nth-of-type(1):after":{content:'""',position:"absolute",top:"50%",right:"50%",width:"100%",height:30,transform:"translateY(-50%)",backgroundColor:e.primary.main},'&[aria-disabled="true"] > div:nth-of-type(1):after':{backgroundColor:e.primary.disable}}),r==="middle"&&(g={fontWeight:700,color:te.default(e.primary.main,[n.white,n[100]]),overflow:"hidden","& > div:nth-of-type(1):after":{content:'""',position:"absolute",top:"50%",left:"50%",width:"calc(100% + 1px)",height:30,transform:"translate(-50%, -50%)",backgroundColor:e.primary.main},'&[aria-disabled="true"] > div:nth-of-type(1):after':{backgroundColor:e.primary.disable}}),g}return f?{"& > div:nth-of-type(1):after":{content:'""',position:"absolute",top:"50%",left:"50%",width:30,height:30,transform:"translate(-50%, -50%)",border:`1px solid ${e.primary.main}`,borderRadius:"50%"}}:null}};
 
-  ${({theme:{palette:{pink:e,brand:n}},holiday:r,selected:c})=>{let l=null;return r&&(l={color:te.default(c?n.primary.main:"transparent",[e[30],e[100]]),'&[aria-disabled="true"]':{color:e[30]}}),l}}
-`,Ue=M.default.div`
+  ${({theme:{palette:{pink:e,brand:n}},holiday:r,selected:f})=>{let o=null;return r&&(o={color:te.default(f?n.primary.main:"transparent",[e[30],e[100]]),'&[aria-disabled="true"]':{color:e[30]}}),o}}
+`,Ge=S.default.div`
   display: flex;
   align-items: center;
   justify-content: center;
 
   cursor: ${({clickable:e})=>e?"pointer":"default"};
-`,Ge=M.default.span`
+`,Pe=S.default.span`
   width: 100%;
   min-width: 100%;
   height: 6px;
   min-height: 6px;
-`,Dt=30,$t=d.forwardRef(function({children:n,onChange:r,value:c,date:l,minDate:m,maxDate:h,holidayDates:g,disableDates:P,showWeekHead:he=!1,multiple:A=!1,period:re=!1,enableMonthSelect:V=!1,showToday:Ae=!1,edgeSpacing:me=0,renderEvent:F,inlineCSS:Je,monthProps:ne,...Qe},Ze){const{spacing:Te}=ut.default(),[R,pe]=d.useState((typeof l=="string"||typeof l=="number"?new Date(l):l)||new Date),[x,J]=d.useState(()=>Array.isArray(c)&&c.length>0?D(c[0]):D(c)),[z,ie]=d.useState(()=>Array.isArray(c)&&c.length>1?D(c[c.length-1]):null),[k,ve]=d.useState(0),[w,_]=d.useState(1),[Re,We]=d.useState(!1),[ge,ye]=d.useState(!1),Q=d.useRef(null),y=d.useRef(null),se=d.useRef(0),W=d.useRef(0),T=d.useRef(!1),Z=d.useRef(w),De=d.useRef(),oe=d.useRef(null),$e=d.useRef(null),S=R.getFullYear(),ae=R.getMonth(),He=je(S,ae),Y=E(ae),X=D(c),C=D(g),N=D(P),xe=U(R,m)||de(R,m),we=O(R,h)||de(R,h),ce=new Date(S,ae-1),le=new Date(S,ae+1),L=`${S}. ${Y}`,q=`${S}년 ${Y}월`,B=re&&!!x&&!!z,Fe=[{year:ce.getFullYear(),month:E(ce.getMonth()),weeks:je(ce.getFullYear(),ce.getMonth())},{year:S,month:Y,weeks:He},{year:le.getFullYear(),month:E(le.getMonth()),weeks:je(le.getFullYear(),le.getMonth())}],be=typeof F=="function",et=Fe[1].weeks.length*(Dt+(be?10:0)+Te.content(2))+Te.content(2),ze=t=>()=>{A&&(y.current&&(y.current.style.transition="none",y.current.style.cursor="grabbing"),se.current=t,T.current=!0)},I=d.useCallback(()=>{if(!T.current)return;const t=k-W.current,f=Math.abs(k-t),s=k*.1;y.current&&(y.current.style.transform=`translate3d(-${k*w}px, 0, 0)`,y.current.style.cursor="grab",y.current.style.transition="transform 0.2s"),se.current=0,W.current=0,T.current=!1,!(f<=s)&&(k<t?_(a=>a+1):k>t&&_(a=>a-1))},[k,w]),Me=(t,f)=>()=>{if(!(T.current||w!==1)&&!f){if(!re){r==null||r(t,D);return}if(v(t,x)&&Array.isArray(c)&&c.length===1){J(null),ie(null),r==null||r([],D);return}else if(v(t,x)&&!Array.isArray(c)&&v(t,c)){J(null),ie(null),r==null||r([],D);return}if(!x){J(t),r==null||r(t,D);return}if(!z&&x){const[s,a]=O(t,x)?[x,t]:[t,x];J(s),ie(a);const i=Ve([s,a],P);r==null||r(i,D);return}x&&z&&(J(t),ie(null),r==null||r(t,D))}},tt=t=>ze(t.clientX)(),rt=t=>ze(t.touches[0].clientX)(),Ye=()=>{Re||(y.current&&(y.current.style.transition="transform 0.2s"),_(t=>t-1))},Le=()=>{Re||(y.current&&(y.current.style.transition="transform 0.2s"),_(t=>t+1))},ue=t=>{t.stopPropagation(),ye(f=>!f)},nt=()=>ye(!1),it=t=>{if(!t)return;const[f,s]=t.toString().split(".").map(Number);pe(new Date(f,s-1)),ye(!1)},qe=(t,f)=>s=>{const a=new Date(t);let i=null;if(s.stopPropagation(),s.key==="ArrowRight")i=new Date(a),i.setDate(a.getDate()+1);else if(s.key==="ArrowLeft")i=new Date(a),i.setDate(a.getDate()-1);else if(s.key==="ArrowDown")i=new Date(a),i.setDate(a.getDate()+7);else if(s.key==="ArrowUp")i=new Date(a),i.setDate(a.getDate()-7);else if(s.key==="Home")i=new Date(a),i.setDate(a.getDate()-a.getDay());else if(s.key==="End")i=new Date(a),i.setDate(a.getDate()+(6-a.getDay()));else if(s.key==="PageUp")i=new Date(a),i.setMonth(a.getMonth()-1);else if(s.key==="PageDown")i=new Date(a),i.setMonth(a.getMonth()+1);else if(s.key==="Enter"||s.key===" "){s.preventDefault(),Me(t,f)();return}else if(s.key==="Escape"){s.preventDefault(),r==null||r([],D);return}if(i&&Q.current){const $=a.getMonth(),p=a.getFullYear(),b=i.getMonth(),u=i.getFullYear(),j=D(i),H=Q.current.querySelector(`[data-date="${j}"]`);if(H){if($!==b||p!==u){i>a?(Le(),setTimeout(()=>{H.focus()},0)):(Ye(),setTimeout(()=>{H.focus()},0));return}H.focus()}}};return d.useLayoutEffect(()=>{var t;ve(((t=Q.current)==null?void 0:t.clientWidth)||0)},[A]),d.useEffect(()=>{const t=()=>{var f;ve(((f=Q.current)==null?void 0:f.clientWidth)||0)};return window.addEventListener("resize",t),window.addEventListener("scroll",t),()=>{window.removeEventListener("resize",t),window.removeEventListener("scroll",t)}},[A]),d.useEffect(()=>{const t=y.current,f=(i,$,p)=>{if(!t||!T.current)return;W.current=i-se.current;const b=$-se.current,u=5;if(T.current=T.current||Math.abs(W.current)>u&&Math.abs(b)<u*2,p.cancelable&&p.preventDefault(),T.current){if(xe&&W.current>0){I();return}if(we&&W.current<0){I();return}Math.abs(W.current)>=10&&(t.style.transform=`translate3d(${W.current-k*w}px, 0, 0)`,t.style.cursor="grabbing")}},s=i=>f(i.touches[0].clientX,i.touches[0].clientY,i),a=i=>{T.current&&f(i.clientX,i.clientY,i)};return t==null||t.addEventListener("mousemove",a),t==null||t.addEventListener("touchmove",s),()=>{t==null||t.removeEventListener("mousemove",a),t==null||t.removeEventListener("touchmove",s)}},[k,w,I,we,xe]),d.useEffect(()=>{We(!0),De.current=setTimeout(()=>{y.current&&(y.current.style.transition="none"),w>Z.current?(_(1),pe(t=>new Date(t.setMonth(t.getMonth()+1))),Z.current=1):w<Z.current?(pe(t=>new Date(t.setMonth(t.getMonth()-1))),_(1),Z.current=1):Z.current=w,We(!1)},200)},[w]),d.useLayoutEffect(()=>{if(!re||!Array.isArray(c))return;const t=Ve(c,P);c.length<t.length&&(r==null||r(t,D))},[re,c,r,P]),d.useEffect(()=>{let t;return ge&&(t=setTimeout(()=>{if($e.current){const f=$e.current.querySelector("ul"),s=f==null?void 0:f.querySelector(`[data-value="${L}"]`);s==null||s.scrollIntoView({block:"start"})}},200)),()=>{clearTimeout(t)}},[ge,L]),d.useEffect(()=>()=>{De.current&&clearTimeout(De.current)},[]),o.jsxs(ht,{ref:Ze,"aria-label":"달력",role:"application",...Qe,css:Je,children:[A?o.jsxs(mt,{children:[o.jsx(_e.default,{name:"ChevronLeftLine",size:"small",onClick:Ye,disabled:xe,"aria-label":`이전 달로 이동, 현재 ${q}`}),V&&o.jsxs(Ue,{ref:oe,clickable:!0,onClick:ue,"aria-label":q,...ne,children:[L,o.jsx(Xe.default,{iconOnly:!0,isMenuOpen:!1,size:"xSmall",variant:"text",menuId:"date-picker-month-menu",onClick:ue,"aria-label":`달 변경, 현재 ${q}`,startAdornment:o.jsx(Ee.default,{name:"ArrowDownFill",size:"xSmall"})})]}),!V&&o.jsx(Ue,{ref:oe,id:"date-picker-title",clickable:!1,"aria-label":q,...ne,children:L}),o.jsx(_e.default,{name:"ChevronRightLine",size:"small",onClick:Le,disabled:we,"aria-label":`다음 달로 이동, 현재 ${q}`})]}):o.jsxs(o.Fragment,{children:[V&&o.jsxs(Ce,{ref:oe,clickable:!0,onClick:ue,"aria-label":q,...ne,children:[L,o.jsx(Xe.default,{iconOnly:!0,isMenuOpen:!1,size:"xSmall",variant:"text",menuId:"date-picker-month-menu",onClick:ue,"aria-label":`달 변경, 현재 ${q}`,startAdornment:o.jsx(Ee.default,{name:"ArrowDownFill",size:"xSmall"})})]}),!V&&o.jsx(Ce,{id:"date-picker-title",clickable:!1,...ne,children:L})]}),V&&o.jsx(ct.default,{id:"date-picker-month-menu",anchorRef:oe,ref:$e,open:ge,onClose:nt,onChange:it,value:L,placement:A?"bottom-center":"bottom-left",width:160,fitToAnchorWidth:!1,maxHeight:368,children:Array.from({length:130},(t,f)=>{const s=1970+f;return Array.from({length:12},(a,i)=>{const $=i+1,p=$<10?`0${$}`:$,b=new Date(s,i+1,0).getDate(),u=`${s}-${p}-${b}`,j=`${s}-${p}-01`;return U(u,m)||O(j,h)?null:o.jsx(lt.default,{value:`${s}. ${p}`,"aria-label":`${s}년 ${p}월 선택`,children:`${s}. ${p}`},`${s}-${p}`)})})}),o.jsxs(at.default,{flexDirection:"column",role:"grid","aria-label":`${S}년 ${Y}월 달력`,children:[he&&o.jsxs(pt,{id:"date-picker-week-head",role:"row",edgeSpacing:me,children:[o.jsx("span",{role:"columnheader",children:"일"}),o.jsx("span",{role:"columnheader",children:"월"}),o.jsx("span",{role:"columnheader",children:"화"}),o.jsx("span",{role:"columnheader",children:"수"}),o.jsx("span",{role:"columnheader",children:"목"}),o.jsx("span",{role:"columnheader",children:"금"}),o.jsx("span",{role:"columnheader",children:"토"})]}),o.jsx(gt,{ref:Q,role:"presentation",children:o.jsxs(yt,{role:"presentation",ref:y,onMouseDown:tt,onMouseUp:I,onMouseLeave:I,onTouchStart:rt,onTouchEnd:I,onTouchCancel:I,style:{transform:A?`translate3d(-${k*w}px, 0, 0)`:void 0,cursor:A?"grab":void 0,maxHeight:et},children:[A&&Fe.map(({year:t,month:f,weeks:s},a)=>o.jsx(Ne,{role:"rowgroup",edgeSpacing:me,className:a===1?"week-body-current":"",children:s.map((i,$)=>o.jsx(Be,{role:"row",children:i.map((p,b)=>{const u=`${t}-${f}-${G(p||0)}`,j=!p,H=v(u,new Date),ke=Array.isArray(C)?C.includes(u):C===u,ee=Array.isArray(X)?X.includes(u):X===u,K=!p||(Array.isArray(N)?N.includes(u):N===u)||O(u,h)||U(u,m),Se=B&&v(u,x),fe=B&&v(u,z),st=B&&O(u,x)&&U(u,z),Ie=de(u,R),ot=Ie&&$===0&&p===1||Ie&&ee,Oe=F==null?void 0:F(u);return o.jsxs(Ke,{as:"button",role:"gridcell",variant:Se?"start":fe?"end":st?"middle":void 0,onClick:Me(u,K),today:Ae&&H,holiday:ke,tabIndex:ot?0:-1,"aria-rowindex":$+1,"aria-colindex":b+1,selected:ee,"aria-selected":ee,"aria-disabled":K,"aria-hidden":p===null,"data-date":u,onKeyDown:qe(u,K),children:[o.jsx("div",{"aria-label":`${Pe(u)}`,children:o.jsx("span",{children:p})}),!j&&Oe,!j&&be&&!Oe&&o.jsx(Ge,{})]},`${t}-${f}-week-row-${b}-${p?u:`${$}-${b}`}`)})},`${t}-${f}-week-row-${String(i)}`))},`week-body-${t}-${f}`)),!A&&o.jsx(Ne,{role:"rowgroup",edgeSpacing:me,children:He.map((t,f)=>o.jsx(Be,{role:"row",children:t.map((s,a)=>{const i=`${S}-${Y}-${G(s||0)}`,$=!s,p=v(i,new Date),b=Array.isArray(C)?C.includes(i):C===i,u=Array.isArray(X)?X.includes(i):X===i,j=!s||(Array.isArray(N)?N.includes(i):N===i)||O(i,h)||U(i,m),H=B&&v(i,x),ke=B&&v(i,z),ee=B&&O(i,x)&&U(i,z),K=de(i,R),Se=K&&f===0&&s===1||K&&u,fe=F==null?void 0:F(i);return o.jsxs(Ke,{as:"button",variant:H?"start":ke?"end":ee?"middle":void 0,role:"gridcell",onClick:Me(i,j),today:Ae&&p,holiday:b,"aria-rowindex":f+1,"aria-colindex":a+1,selected:u,"aria-selected":u,"aria-disabled":j,"aria-hidden":s===null,tabIndex:Se?0:-1,"data-date":i,onKeyDown:qe(i,j),children:[o.jsx("div",{"aria-label":`${Pe(i)}`,children:o.jsx("span",{children:s})}),!$&&fe,!$&&be&&!fe&&o.jsx(Ge,{})]},`${S}-${Y}-week-row-${t}-${s?i:`${f}-${a}`}`)})},`${S}-${Y}-week-row-${String(t)}`))})]})})]}),n]})});function je(e,n){let r=[];const c=new Date(e,n,1),l=new Date(e,n+1,0).getDate(),m=c.getDay();let h=Array.from({length:m}).fill(null);for(let g=1;g<=l;g+=1)h.push(g),(h.length===7||g===l)&&(r.push(h),h=[]);return r=r.map(g=>Array.from({length:7}).map((P,he)=>g[he]||null)),r}function E(e){return String(e+1).length===1?`0${e+1}`:e+1}function G(e){return String(e).length===1?`0${e}`:e}function D(e){if(Array.isArray(e))return e.map(n=>n instanceof Date?`${n.getFullYear()}-${E(n.getMonth())}-${G(n.getDate())}`:n);if(e instanceof Date)return`${e.getFullYear()}-${E(e.getMonth())}-${G(e.getDate())}`;if(typeof e=="number"){const n=new Date(e);return`${n.getFullYear()}-${E(n.getMonth())}-${G(n.getDate())}`}return e}function Pe(e){const[n,r,c]=e.split("-");return`${n}년 ${Number(r)}월 ${Number(c)}일`}function O(e,n){if(!e||!n)return!1;const r=e instanceof Date?e:new Date(e);r.setHours(0),r.setMinutes(0),r.setSeconds(0),r.setMilliseconds(0);const c=r.getTime(),l=n instanceof Date?n:new Date(n);l.setHours(0),l.setMinutes(0),l.setSeconds(0),l.setMilliseconds(0);const m=l.getTime();return c>m}function U(e,n){if(!e||!n)return!1;const r=e instanceof Date?e:new Date(e);r.setHours(0),r.setMinutes(0),r.setSeconds(0),r.setMilliseconds(0);const c=r.getTime(),l=n instanceof Date?n:new Date(n);l.setHours(0),l.setMinutes(0),l.setSeconds(0),l.setMilliseconds(0);const m=l.getTime();return c<m}function de(e,n){if(!e||!n)return!1;const r=e instanceof Date?e:new Date(e),c=n instanceof Date?n:new Date(n);return`${r.getFullYear()}-${r.getMonth()}`==`${c.getFullYear()}-${c.getMonth()}`}function v(e,n){if(!e||!n)return!1;const r=e instanceof Date?e:new Date(e);r.setHours(0),r.setMinutes(0),r.setSeconds(0),r.setMilliseconds(0);const c=r.getTime(),l=n instanceof Date?n:new Date(n);l.setHours(0),l.setMinutes(0),l.setSeconds(0),l.setMilliseconds(0);const m=l.getTime();return c===m}function Ve(e,n){if(!e||!Array.isArray(e)||e.length===0)return[];const r=e.map(g=>g instanceof Date?g:g===null?new Date:new Date(g)),c=new Date(Math.min(...r.map(g=>g.getTime()))),l=new Date(Math.max(...r.map(g=>g.getTime()))),m=[],h=new Date(c);for(;h<=l;){if(Array.isArray(n)&&n.includes(h)){h.setDate(h.getDate()+1);continue}else if(n===h){h.setDate(h.getDate()+1);continue}m.push(`${h.getFullYear()}-${E(h.getMonth())}-${G(h.getDate())}`),h.setDate(h.getDate()+1)}return m}exports.default=$t;
+`,$t=30,wt=d.forwardRef(function({children:n,onChange:r,onChangeMonth:f,value:o,date:g,minDate:h,maxDate:p,holidayDates:je,disableDates:_,showWeekHead:Qe=!1,multiple:v=!1,period:re=!1,enableMonthSelect:J=!1,showToday:Ae=!1,edgeSpacing:he=0,renderEvent:F,inlineCSS:Ze,monthProps:ne,...Ce},et){const{spacing:ve}=ft.default(),[w,pe]=d.useState((typeof g=="string"||typeof g=="number"?new Date(g):g)||new Date),[x,Q]=d.useState(()=>Array.isArray(o)&&o.length>0?y(o[0]):y(o)),[z,ie]=d.useState(()=>Array.isArray(o)&&o.length>1?y(o[o.length-1]):null),[M,Te]=d.useState(0),[b,X]=d.useState(1),[Re,We]=d.useState(!1),[me,ye]=d.useState(!1),Z=d.useRef(null),D=d.useRef(null),se=d.useRef(0),W=d.useRef(0),T=d.useRef(!1),C=d.useRef(b),ge=d.useRef(),oe=d.useRef(null),De=d.useRef(null),j=w.getFullYear(),ae=w.getMonth(),He=Me(j,ae),Y=E(ae),N=y(o),B=y(je),K=y(_),$e=P(w,h)||de(w,h),we=O(w,p)||de(w,p),ce=new Date(j,ae-1),le=new Date(j,ae+1),L=`${j}. ${Y}`,q=`${j}년 ${Y}월`,U=re&&!!x&&!!z,Fe=[{year:ce.getFullYear(),month:E(ce.getMonth()),weeks:Me(ce.getFullYear(),ce.getMonth())},{year:j,month:Y,weeks:He},{year:le.getFullYear(),month:E(le.getMonth()),weeks:Me(le.getFullYear(),le.getMonth())}],xe=typeof F=="function",tt=Fe[1].weeks.length*($t+(xe?10:0)+ve.content(2))+ve.content(2),ze=t=>()=>{v&&(D.current&&(D.current.style.transition="none",D.current.style.cursor="grabbing"),se.current=t,T.current=!0)},I=d.useCallback(()=>{if(!T.current)return;const t=M-W.current,l=Math.abs(M-t),s=M*.1;D.current&&(D.current.style.transform=`translate3d(-${M*b}px, 0, 0)`,D.current.style.cursor="grab",D.current.style.transition="transform 0.2s"),se.current=0,W.current=0,T.current=!1,!(l<=s)&&(M<t?X(c=>c+1):M>t&&X(c=>c-1))},[M,b]),be=(t,l)=>()=>{if(!(T.current||b!==1)&&!l){if(!re){r==null||r(t,y);return}if(R(t,x)&&Array.isArray(o)&&o.length===1){Q(null),ie(null),r==null||r([],y);return}else if(R(t,x)&&!Array.isArray(o)&&R(t,o)){Q(null),ie(null),r==null||r([],y);return}if(!x){Q(t),r==null||r(t,y);return}if(!z&&x){const[s,c]=O(t,x)?[x,t]:[t,x];Q(s),ie(c);const i=Je([s,c],_);r==null||r(i,y);return}x&&z&&(Q(t),ie(null),r==null||r(t,y))}},rt=t=>ze(t.clientX)(),nt=t=>ze(t.touches[0].clientX)(),Ye=()=>{Re||(D.current&&(D.current.style.transition="transform 0.2s"),X(t=>t-1))},Le=()=>{Re||(D.current&&(D.current.style.transition="transform 0.2s"),X(t=>t+1))},ue=t=>{t.stopPropagation(),ye(l=>!l)},it=()=>ye(!1),st=t=>{if(!t)return;const[l,s]=t.toString().split(".").map(Number);pe(new Date(l,s-1)),f&&typeof f=="function"&&f(y(new Date(l,s-1)),y),ye(!1)},qe=(t,l)=>s=>{const c=new Date(t);let i=null;if(s.stopPropagation(),s.key==="ArrowRight")i=new Date(c),i.setDate(c.getDate()+1);else if(s.key==="ArrowLeft")i=new Date(c),i.setDate(c.getDate()-1);else if(s.key==="ArrowDown")i=new Date(c),i.setDate(c.getDate()+7);else if(s.key==="ArrowUp")i=new Date(c),i.setDate(c.getDate()-7);else if(s.key==="Home")i=new Date(c),i.setDate(c.getDate()-c.getDay());else if(s.key==="End")i=new Date(c),i.setDate(c.getDate()+(6-c.getDay()));else if(s.key==="PageUp")i=new Date(c),i.setMonth(c.getMonth()-1);else if(s.key==="PageDown")i=new Date(c),i.setMonth(c.getMonth()+1);else if(s.key==="Enter"||s.key===" "){s.preventDefault(),be(t,l)();return}else if(s.key==="Escape"){s.preventDefault(),r==null||r([],y);return}if(i&&Z.current){const $=c.getMonth(),m=c.getFullYear(),k=i.getMonth(),u=i.getFullYear(),A=y(i),H=Z.current.querySelector(`[data-date="${A}"]`);if(H){if($!==k||m!==u){i>c?(Le(),setTimeout(()=>{H.focus()},0)):(Ye(),setTimeout(()=>{H.focus()},0));return}H.focus()}}};return d.useLayoutEffect(()=>{var t;Te(((t=Z.current)==null?void 0:t.clientWidth)||0)},[v]),d.useEffect(()=>{const t=()=>{var l;Te(((l=Z.current)==null?void 0:l.clientWidth)||0)};return window.addEventListener("resize",t),window.addEventListener("scroll",t),()=>{window.removeEventListener("resize",t),window.removeEventListener("scroll",t)}},[v]),d.useEffect(()=>{const t=D.current,l=(i,$,m)=>{if(!t||!T.current)return;W.current=i-se.current;const k=$-se.current,u=5;if(T.current=T.current||Math.abs(W.current)>u&&Math.abs(k)<u*2,m.cancelable&&m.preventDefault(),T.current){if($e&&W.current>0){I();return}if(we&&W.current<0){I();return}Math.abs(W.current)>=10&&(t.style.transform=`translate3d(${W.current-M*b}px, 0, 0)`,t.style.cursor="grabbing")}},s=i=>l(i.touches[0].clientX,i.touches[0].clientY,i),c=i=>{T.current&&l(i.clientX,i.clientY,i)};return t==null||t.addEventListener("mousemove",c),t==null||t.addEventListener("touchmove",s),()=>{t==null||t.removeEventListener("mousemove",c),t==null||t.removeEventListener("touchmove",s)}},[M,b,I,we,$e]),d.useEffect(()=>{We(!0),ge.current=setTimeout(()=>{if(D.current&&(D.current.style.transition="none"),b>C.current){X(1);const t=new Date(w.setMonth(w.getMonth()+1));pe(t),f&&typeof f=="function"&&f(y(t),y),C.current=1}else if(b<C.current){const t=new Date(w.setMonth(w.getMonth()-1));pe(t),f&&typeof f=="function"&&f(y(t),y),X(1),C.current=1}else C.current=b;We(!1)},200)},[b,w,f]),d.useLayoutEffect(()=>{if(!re||!Array.isArray(o))return;const t=Je(o,_);o.length<t.length&&(r==null||r(t,y))},[re,o,r,_]),d.useEffect(()=>{let t;return me&&(t=setTimeout(()=>{if(De.current){const l=De.current.querySelector("ul"),s=l==null?void 0:l.querySelector(`[data-value="${L}"]`);s==null||s.scrollIntoView({block:"start"})}},200)),()=>{clearTimeout(t)}},[me,L]),d.useEffect(()=>()=>{ge.current&&clearTimeout(ge.current)},[]),a.jsxs(pt,{ref:et,"aria-label":"달력",role:"application",...Ce,css:Ze,children:[v?a.jsxs(mt,{children:[a.jsx(_e.default,{name:"ChevronLeftLine",size:"small",onClick:Ye,disabled:$e,"aria-label":`이전 달로 이동, 현재 ${q}`}),J&&a.jsxs(Ge,{ref:oe,clickable:!0,onClick:ue,"aria-label":q,...ne,children:[L,a.jsx(Xe.default,{iconOnly:!0,isMenuOpen:!1,size:"xSmall",variant:"text",menuId:"date-picker-month-menu",onClick:ue,"aria-label":`달 변경, 현재 ${q}`,startAdornment:a.jsx(Ee.default,{name:"ArrowDownFill",size:"xSmall"})})]}),!J&&a.jsx(Ge,{ref:oe,id:"date-picker-title",clickable:!1,"aria-label":q,...ne,children:L}),a.jsx(_e.default,{name:"ChevronRightLine",size:"small",onClick:Le,disabled:we,"aria-label":`다음 달로 이동, 현재 ${q}`})]}):a.jsxs(a.Fragment,{children:[J&&a.jsxs(Ne,{ref:oe,clickable:!0,onClick:ue,"aria-label":q,...ne,children:[L,a.jsx(Xe.default,{iconOnly:!0,isMenuOpen:!1,size:"xSmall",variant:"text",menuId:"date-picker-month-menu",onClick:ue,"aria-label":`달 변경, 현재 ${q}`,startAdornment:a.jsx(Ee.default,{name:"ArrowDownFill",size:"xSmall"})})]}),!J&&a.jsx(Ne,{id:"date-picker-title",clickable:!1,...ne,children:L})]}),J&&a.jsx(lt.default,{id:"date-picker-month-menu",anchorRef:oe,ref:De,open:me,onClose:it,onChange:st,value:L,placement:v?"bottom-center":"bottom-left",width:160,fitToAnchorWidth:!1,maxHeight:368,children:Array.from({length:130},(t,l)=>{const s=1970+l;return Array.from({length:12},(c,i)=>{const $=i+1,m=$<10?`0${$}`:$,k=new Date(s,i+1,0).getDate(),u=`${s}-${m}-${k}`,A=`${s}-${m}-01`;return P(u,h)||O(A,p)?null:a.jsx(ut.default,{value:`${s}. ${m}`,"aria-label":`${s}년 ${m}월 선택`,children:`${s}. ${m}`},`${s}-${m}`)})})}),a.jsxs(ct.default,{flexDirection:"column",role:"grid","aria-label":`${j}년 ${Y}월 달력`,children:[Qe&&a.jsxs(yt,{id:"date-picker-week-head",role:"row",edgeSpacing:he,children:[a.jsx("span",{role:"columnheader",children:"일"}),a.jsx("span",{role:"columnheader",children:"월"}),a.jsx("span",{role:"columnheader",children:"화"}),a.jsx("span",{role:"columnheader",children:"수"}),a.jsx("span",{role:"columnheader",children:"목"}),a.jsx("span",{role:"columnheader",children:"금"}),a.jsx("span",{role:"columnheader",children:"토"})]}),a.jsx(gt,{ref:Z,role:"presentation",children:a.jsxs(Dt,{role:"presentation",ref:D,onMouseDown:rt,onMouseUp:I,onMouseLeave:I,onTouchStart:nt,onTouchEnd:I,onTouchCancel:I,style:{transform:v?`translate3d(-${M*b}px, 0, 0)`:void 0,cursor:v?"grab":void 0,maxHeight:tt},children:[v&&Fe.map(({year:t,month:l,weeks:s},c)=>a.jsx(Be,{role:"rowgroup",edgeSpacing:he,className:c===1?"week-body-current":"",children:s.map((i,$)=>a.jsx(Ke,{role:"row",children:i.map((m,k)=>{const u=`${t}-${l}-${V(m||0)}`,A=!m,H=R(u,new Date),ke=Array.isArray(B)?B.includes(u):B===u,ee=Array.isArray(N)?N.includes(u):N===u,G=!m||(Array.isArray(K)?K.includes(u):K===u)||O(u,p)||P(u,h),Se=U&&R(u,x),fe=U&&R(u,z),ot=U&&O(u,x)&&P(u,z),Ie=de(u,w),at=Ie&&$===0&&m===1||Ie&&ee,Oe=F==null?void 0:F(u);return a.jsxs(Ue,{as:"button",role:"gridcell",variant:Se?"start":fe?"end":ot?"middle":void 0,onClick:be(u,G),today:Ae&&H,holiday:ke,tabIndex:at?0:-1,"aria-rowindex":$+1,"aria-colindex":k+1,selected:ee,"aria-selected":ee,"aria-disabled":G,"aria-hidden":m===null,"data-date":u,onKeyDown:qe(u,G),children:[a.jsx("div",{"aria-label":`${Ve(u)}`,children:a.jsx("span",{children:m})}),!A&&Oe,!A&&xe&&!Oe&&a.jsx(Pe,{})]},`${t}-${l}-week-row-${k}-${m?u:`${$}-${k}`}`)})},`${t}-${l}-week-row-${String(i)}`))},`week-body-${t}-${l}`)),!v&&a.jsx(Be,{role:"rowgroup",edgeSpacing:he,children:He.map((t,l)=>a.jsx(Ke,{role:"row",children:t.map((s,c)=>{const i=`${j}-${Y}-${V(s||0)}`,$=!s,m=R(i,new Date),k=Array.isArray(B)?B.includes(i):B===i,u=Array.isArray(N)?N.includes(i):N===i,A=!s||(Array.isArray(K)?K.includes(i):K===i)||O(i,p)||P(i,h),H=U&&R(i,x),ke=U&&R(i,z),ee=U&&O(i,x)&&P(i,z),G=de(i,w),Se=G&&l===0&&s===1||G&&u,fe=F==null?void 0:F(i);return a.jsxs(Ue,{as:"button",variant:H?"start":ke?"end":ee?"middle":void 0,role:"gridcell",onClick:be(i,A),today:Ae&&m,holiday:k,"aria-rowindex":l+1,"aria-colindex":c+1,selected:u,"aria-selected":u,"aria-disabled":A,"aria-hidden":s===null,tabIndex:Se?0:-1,"data-date":i,onKeyDown:qe(i,A),children:[a.jsx("div",{"aria-label":`${Ve(i)}`,children:a.jsx("span",{children:s})}),!$&&fe,!$&&xe&&!fe&&a.jsx(Pe,{})]},`${j}-${Y}-week-row-${t}-${s?i:`${l}-${c}`}`)})},`${j}-${Y}-week-row-${String(t)}`))})]})})]}),n]})});function Me(e,n){let r=[];const f=new Date(e,n,1),o=new Date(e,n+1,0).getDate(),g=f.getDay();let h=Array.from({length:g}).fill(null);for(let p=1;p<=o;p+=1)h.push(p),(h.length===7||p===o)&&(r.push(h),h=[]);return r=r.map(p=>Array.from({length:7}).map((je,_)=>p[_]||null)),r}function E(e){return String(e+1).length===1?`0${e+1}`:e+1}function V(e){return String(e).length===1?`0${e}`:e}function y(e){if(Array.isArray(e))return e.map(n=>n instanceof Date?`${n.getFullYear()}-${E(n.getMonth())}-${V(n.getDate())}`:n);if(e instanceof Date)return`${e.getFullYear()}-${E(e.getMonth())}-${V(e.getDate())}`;if(typeof e=="number"){const n=new Date(e);return`${n.getFullYear()}-${E(n.getMonth())}-${V(n.getDate())}`}return e}function Ve(e){const[n,r,f]=e.split("-");return`${n}년 ${Number(r)}월 ${Number(f)}일`}function O(e,n){if(!e||!n)return!1;const r=e instanceof Date?e:new Date(e);r.setHours(0),r.setMinutes(0),r.setSeconds(0),r.setMilliseconds(0);const f=r.getTime(),o=n instanceof Date?n:new Date(n);o.setHours(0),o.setMinutes(0),o.setSeconds(0),o.setMilliseconds(0);const g=o.getTime();return f>g}function P(e,n){if(!e||!n)return!1;const r=e instanceof Date?e:new Date(e);r.setHours(0),r.setMinutes(0),r.setSeconds(0),r.setMilliseconds(0);const f=r.getTime(),o=n instanceof Date?n:new Date(n);o.setHours(0),o.setMinutes(0),o.setSeconds(0),o.setMilliseconds(0);const g=o.getTime();return f<g}function de(e,n){if(!e||!n)return!1;const r=e instanceof Date?e:new Date(e),f=n instanceof Date?n:new Date(n);return`${r.getFullYear()}-${r.getMonth()}`==`${f.getFullYear()}-${f.getMonth()}`}function R(e,n){if(!e||!n)return!1;const r=e instanceof Date?e:new Date(e);r.setHours(0),r.setMinutes(0),r.setSeconds(0),r.setMilliseconds(0);const f=r.getTime(),o=n instanceof Date?n:new Date(n);o.setHours(0),o.setMinutes(0),o.setSeconds(0),o.setMilliseconds(0);const g=o.getTime();return f===g}function Je(e,n){if(!e||!Array.isArray(e)||e.length===0)return[];const r=e.map(p=>p instanceof Date?p:p===null?new Date:new Date(p)),f=new Date(Math.min(...r.map(p=>p.getTime()))),o=new Date(Math.max(...r.map(p=>p.getTime()))),g=[],h=new Date(f);for(;h<=o;){if(Array.isArray(n)&&n.includes(h)){h.setDate(h.getDate()+1);continue}else if(n===h){h.setDate(h.getDate()+1);continue}g.push(`${h.getFullYear()}-${E(h.getMonth())}-${V(h.getDate())}`),h.setDate(h.getDate()+1)}return g}exports.default=wt;

package/DatePicker/DatePicker.d.ts

@@ -6,6 +6,7 @@ export type DatePickerValue = DateValue[] | DateValue;
 export type DateFormatter<T> = typeof formatDate<T>;
 export interface DatePickerProps extends GeneralComponentProps<Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>> {
     onChange?: (date: string | string[], dateFormatter: DateFormatter<string>) => void;
+    onChangeMonth?: (date: string, dateFormatter: DateFormatter<string>) => void;
     value?: DatePickerValue;
     date?: DateValue;
     minDate?: DateValue;