@lifesg/react-design-system 1.1.1 → 1.1.2

package/calendar/index.js

@@ -492,7 +492,7 @@ import e,{jsxs as t,jsx as n,Fragment as r}from"react/jsx-runtime";import i,{css
                 background-color: ${Ca.Neutral[7]};
             `}
     }
-`,Hs=l.forwardRef((({children:e,focusHighlight:t=!0,focusOutline:r="none",...i},o)=>n(As,{ref:o,$outline:r,$highlight:t,...i,children:e}))),Ps=o`
+`,Hs=l.forwardRef((({children:e,focusHighlight:t=!0,focusOutline:r="none",type:i="button",...o},a)=>n(As,{ref:a,$outline:r,$highlight:t,type:i,...o,children:e}))),Ps=o`
     color: ${Ca.Neutral[3]};
     height: 1rem;
     width: 1rem;
@@ -627,7 +627,7 @@ import e,{jsxs as t,jsx as n,Fragment as r}from"react/jsx-runtime";import i,{css
                 `:o`
                     margin: auto 0 auto 0.625rem; // to counter the padding
                 `}
-`,Ks=l.forwardRef((({disabledDates:e,onYearMonthDisplayChange:i,onCalendarView:o,onSelect:a,onHover:s,onDismiss:l,actionComponent:c,isOpen:h,value:p,endValue:f,currentFocus:m,withButton:y,variant:v,between:b,type:$="standalone",...S},_)=>{const[x,D]=d(k()),[F,C]=d("default"),[B,M]=d(),[A,H]=d(),[P,j]=d(),[z,E]=d(!0),I=u(null),N=u(null),T=function(e){void 0===e&&(e={});var t=e.skipOnMount,n=void 0!==t&&t,r=e.refreshMode,i=e.refreshRate,o=void 0===i?1e3:i,a=e.refreshOptions,s=e.handleWidth,l=void 0===s||s,c=e.handleHeight,h=void 0===c||c,p=e.targetRef,f=e.observerOptions,g=e.onResize,m=u(n),y=u(null),v=null!=p?p:y,b=u(),$=d({width:void 0,height:void 0}),w=$[0],S=$[1];return $e((function(){if(!ye()){var e=be(g,S,l,h);b.current=ge((function(t){(l||h)&&t.forEach((function(t){var n=t&&t.contentRect||{},r=n.width,i=n.height;!m.current&&!ye()&&e({width:r,height:i}),m.current=!1}))}),r,o,a);var t=new window.ResizeObserver(b.current);return v.current&&t.observe(v.current,f),function(){t.disconnect();var e=b.current;e&&e.cancel&&e.cancel()}}}),[r,o,a,l,h,g,f,v.current]),O({ref:v},w)}();w(_,(()=>({defaultView(){C("default"),o("default")}})),[]),g((()=>{h&&(D(k()),C("default"),"range"===v&&p?.length&&f?.length&&E(!1))}),[h]),g((()=>{const e="end"===m?f:p;j(k(e)),e&&D(k(e))}),[m]),g((()=>{E(!0),p?("input"===c&&D(k(p)),M(p),D(k(p))):M(void 0)}),[p]),g((()=>{E(!0),f?("input"===c&&D(k(f)),H(f)):H(void 0)}),[f]);const R=()=>{switch(F){case"default":j((e=>e.subtract(1,"month"))),D((e=>{const t=e.subtract(1,"month");return G(t),t}));break;case"month-options":D((e=>e.subtract(1,"year")));break;case"year-options":D((e=>e.subtract(10,"year")))}},V=()=>{switch(F){case"default":j((e=>e.add(1,"month"))),D((e=>{const t=e.add(1,"month");return G(t),t}));break;case"month-options":D((e=>e.add(1,"year")));break;case"year-options":D((e=>e.add(10,"year")))}},L=e=>{const t=e.format("YYYY-MM-DD");D(e),j(e),X(t),U(t)},W=e=>{D(e),j(e),G(e)},Y=()=>{D(k("end"===m?f:p)),Z("reset")},q=e=>{Q(e)},U=e=>{a&&a(e)},Q=e=>{s&&s(e)},G=e=>{if(i){const t={month:e.month()+1,year:e.year()};i(t)}},Z=e=>{l&&l(e)},X=e=>{if(m)switch(m){case"start":default:M(e);break;case"end":H(e)}else M(e)},J=()=>{"month-options"!==F?(C("month-options"),te("month-options"),T.ref.current.focus()):(C("default"),D(P),te("default"))},K=()=>{"default"!==F?(C("default"),D(P),te("default")):(C("year-options"),te("year-options"))},ee=()=>{if("year-options"===F){const{beginDecade:e,endDecade:t}=li.getStartEndDecade(x);return`${e} to ${t}`}return k(x).format("YYYY")},te=e=>{o&&o(e)},ne=()=>t(r,{children:[t(qs,{type:"button",tabIndex:-1,$type:$,$expandedDisplay:"month-options"===F,$visible:"default"===F,id:"month-dropdown",onClick:J,children:[n(Us,{$type:$,children:k(x).format("MMM")}),n(Es,{})]}),t(qs,{type:"button",tabIndex:-1,$type:$,$expandedDisplay:"default"!==F,id:"year-dropdown",onClick:K,children:[n(Us,{$type:$,children:ee()}),n(Es,{})]})]}),re=()=>{switch(F){case"month-options":return n(rs,{type:$,calendarDate:x,currentFocus:m,selectedStartDate:B,selectedEndDate:A,viewCalendarDate:P,between:b,isNewSelection:z,onMonthSelect:W});case"year-options":return n(ss,{type:$,calendarDate:x,currentFocus:m,selectedStartDate:B,selectedEndDate:A,viewCalendarDate:P,between:b,isNewSelection:z,onYearSelect:W});default:return null}},ie=()=>{switch($){case"standalone":default:return n(Ys,{children:ne()});case"input":return t(Ls,{children:[n(Ws,{children:ne()}),t(Qs,{children:[n(Gs,{tabIndex:-1,onClick:R,children:n(js,{})}),n(Gs,{tabIndex:-1,onClick:V,children:n(zs,{})})]})]})}},oe=()=>{if("standalone"===$||!y)return;let e=!0;const r=["default"].includes(F);switch(v){case"single":e=!B;break;case"range":e=!B||!A}const i=!!r&&e;return t(Zs,{children:[n(Xs,{ref:N,"data-testid":"cancel-button",styleType:"light",onClick:Y,children:"Cancel"}),n(Xs,{"data-testid":"done-button",ref:I,onClick:()=>(e=>{e||(D(P),Z("confirmed"))})(i),disabled:i,children:"Done"})]})},ae=()=>t(Ns,{ref:T.ref,tabIndex:-1,"data-id":"calendar-container",$type:$,...S,children:["standalone"===$&&n(Js,{$direction:"left",onClick:R,children:n(js,{})}),t(Ts,{children:[ie(),t(Rs,{children:[n(Ka,{type:$,calendarDate:x,currentFocus:m,disabledDates:e,selectedStartDate:B,selectedEndDate:A,variant:v,between:b,isNewSelection:z,onSelect:L,onHover:q}),n(Vs,{$visible:"default"!==F,children:re()})]}),oe()]}),"standalone"===$&&n(Js,{$direction:"right",onClick:V,children:n(zs,{})})]}),se=Ir({height:h?T.height+64:0});return"input"===$?n(Is,{style:se,children:ae()}):n(r,{children:ae()})})),el=({className:e,...t})=>n(tl,{className:e,children:n(Ks,{type:"standalone",...t})}),tl=i.div`
+`,Ks=l.forwardRef((({disabledDates:e,onYearMonthDisplayChange:i,onCalendarView:o,onSelect:a,onHover:s,onDismiss:l,actionComponent:c,isOpen:h,value:p,endValue:f,currentFocus:m,withButton:y,variant:v,between:b,type:$="standalone",...S},_)=>{const[x,D]=d(k()),[F,C]=d("default"),[B,M]=d(),[A,H]=d(),[P,j]=d(),[z,E]=d(!0),I=u(null),N=u(null),T=function(e){void 0===e&&(e={});var t=e.skipOnMount,n=void 0!==t&&t,r=e.refreshMode,i=e.refreshRate,o=void 0===i?1e3:i,a=e.refreshOptions,s=e.handleWidth,l=void 0===s||s,c=e.handleHeight,h=void 0===c||c,p=e.targetRef,f=e.observerOptions,g=e.onResize,m=u(n),y=u(null),v=null!=p?p:y,b=u(),$=d({width:void 0,height:void 0}),w=$[0],S=$[1];return $e((function(){if(!ye()){var e=be(g,S,l,h);b.current=ge((function(t){(l||h)&&t.forEach((function(t){var n=t&&t.contentRect||{},r=n.width,i=n.height;!m.current&&!ye()&&e({width:r,height:i}),m.current=!1}))}),r,o,a);var t=new window.ResizeObserver(b.current);return v.current&&t.observe(v.current,f),function(){t.disconnect();var e=b.current;e&&e.cancel&&e.cancel()}}}),[r,o,a,l,h,g,f,v.current]),O({ref:v},w)}();w(_,(()=>({defaultView(){C("default"),o("default")}})),[]),g((()=>{h&&(D(k()),C("default"),"range"===v&&p?.length&&f?.length&&E(!1))}),[h]),g((()=>{const e="end"===m?f:p;j(k(e)),e&&D(k(e))}),[m]),g((()=>{E(!0),p?("input"===c&&D(k(p)),M(p),D(k(p))):M(void 0)}),[p]),g((()=>{E(!0),f?("input"===c&&D(k(f)),H(f)):H(void 0)}),[f]);const R=()=>{switch(F){case"default":j((e=>e.subtract(1,"month"))),D((e=>{const t=e.subtract(1,"month");return G(t),t}));break;case"month-options":D((e=>e.subtract(1,"year")));break;case"year-options":D((e=>e.subtract(10,"year")))}},V=()=>{switch(F){case"default":j((e=>e.add(1,"month"))),D((e=>{const t=e.add(1,"month");return G(t),t}));break;case"month-options":D((e=>e.add(1,"year")));break;case"year-options":D((e=>e.add(10,"year")))}},L=e=>{const t=e.format("YYYY-MM-DD");D(e),j(e),X(t),U(t)},W=e=>{D(e),j(e),G(e)},Y=()=>{D(k("end"===m?f:p)),Z("reset")},q=e=>{Q(e)},U=e=>{a&&a(e)},Q=e=>{s&&s(e)},G=e=>{if(i){const t={month:e.month()+1,year:e.year()};i(t)}},Z=e=>{l&&l(e)},X=e=>{if(m)switch(m){case"start":default:M(e);break;case"end":H(e)}else M(e)},J=()=>{"month-options"!==F?(C("month-options"),te("month-options"),T.ref.current.focus()):(C("default"),D(P),te("default"))},K=()=>{"default"!==F?(C("default"),D(P),te("default")):(C("year-options"),te("year-options"))},ee=()=>{if("year-options"===F){const{beginDecade:e,endDecade:t}=li.getStartEndDecade(x);return`${e} to ${t}`}return k(x).format("YYYY")},te=e=>{o&&o(e)},ne=()=>t(r,{children:[t(qs,{type:"button",tabIndex:-1,$type:$,$expandedDisplay:"month-options"===F,$visible:"default"===F,id:"month-dropdown",onClick:J,children:[n(Us,{$type:$,children:k(x).format("MMM")}),n(Es,{})]}),t(qs,{type:"button",tabIndex:-1,$type:$,$expandedDisplay:"default"!==F,id:"year-dropdown",onClick:K,children:[n(Us,{$type:$,children:ee()}),n(Es,{})]})]}),re=()=>{switch(F){case"month-options":return n(rs,{type:$,calendarDate:x,currentFocus:m,selectedStartDate:B,selectedEndDate:A,viewCalendarDate:P,between:b,isNewSelection:z,onMonthSelect:W});case"year-options":return n(ss,{type:$,calendarDate:x,currentFocus:m,selectedStartDate:B,selectedEndDate:A,viewCalendarDate:P,between:b,isNewSelection:z,onYearSelect:W});default:return null}},ie=()=>{switch($){case"standalone":default:return n(Ys,{children:ne()});case"input":return t(Ls,{children:[n(Ws,{children:ne()}),t(Qs,{children:[n(Gs,{tabIndex:-1,onClick:R,children:n(js,{})}),n(Gs,{tabIndex:-1,onClick:V,children:n(zs,{})})]})]})}},oe=()=>{if("standalone"===$||!y)return;let e=!0;const r=["default"].includes(F);switch(v){case"single":e=!B;break;case"range":e=!B||!A}const i=!!r&&e;return t(Zs,{children:[n(Xs,{ref:N,type:"button","data-testid":"cancel-button",styleType:"light",onClick:Y,children:"Cancel"}),n(Xs,{"data-testid":"done-button",type:"button",ref:I,onClick:()=>(e=>{e||(D(P),Z("confirmed"))})(i),disabled:i,children:"Done"})]})},ae=()=>t(Ns,{ref:T.ref,tabIndex:-1,"data-id":"calendar-container",$type:$,...S,children:["standalone"===$&&n(Js,{$direction:"left",onClick:R,children:n(js,{})}),t(Ts,{children:[ie(),t(Rs,{children:[n(Ka,{type:$,calendarDate:x,currentFocus:m,disabledDates:e,selectedStartDate:B,selectedEndDate:A,variant:v,between:b,isNewSelection:z,onSelect:L,onHover:q}),n(Vs,{$visible:"default"!==F,children:re()})]}),oe()]}),"standalone"===$&&n(Js,{$direction:"right",onClick:V,children:n(zs,{})})]}),se=Ir({height:h?T.height+64:0});return"input"===$?n(Is,{style:se,children:ae()}):n(r,{children:ae()})})),el=({className:e,...t})=>n(tl,{className:e,children:n(Ks,{type:"standalone",...t})}),tl=i.div`
     width: 41rem;
     border: 1px solid ${Ca.Neutral[5]};
     border-radius: 12px;