@lifesg/react-design-system 1.1.1 → 1.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifesg/react-design-system",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "A component design system for LifeSG web apps",
   "main": "./cjs/index.js",
   "module": "./index.js",

package/phone-number-input/index.js

@@ -116,7 +116,7 @@ import e,{jsxs as t,jsx as r,Fragment as n}from"react/jsx-runtime";import*as a f
 `,cr=g(Qt)`
     height: 1.25rem;
     width: 1.25rem;
-`,ur=i.forwardRef((({value:e,spacing:n,type:a,error:i,disabled:l,readOnly:c,onChange:u,onClear:d,allowClear:h=!1,className:p,...f},g)=>{const m=o();s(g,(()=>m.current),[]);const b=()=>"tel"===a&&n,y=e=>{const t=e.target,r=t.value,n=t.value.replace(/\s/g,"");t.value=n,u(e),t.value=r},v=e?(e=>e?b()?Gt.transformWithSpaces(e,n):e:"")(e):e;return t(Ut,{disabled:l,$error:i,$readOnly:c,className:p,children:[r(sr,{"data-testid":"input",ref:m,disabled:l,value:v,onChange:e=>{u&&(b()?y(e):u(e))},type:a,readOnly:c,...f}),h&&!l&&!c&&!!e&&r(lr,{onClick:()=>{d&&d(),m&&m.current&&m.current.focus()},children:r(cr,{})})]})}));var dr,hr={};Object.defineProperty(hr,"__esModule",{value:!0});var pr=e;const fr=e=>pr.jsx("svg",{width:"1em",height:"1em",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:pr.jsx("path",{d:"M4.25 17.5C3.764 17.5 3.35067 17.33 3.01 16.99C2.67 16.6493 2.5 16.236 2.5 15.75V4.25C2.5 3.764 2.67 3.35067 3.01 3.01C3.35067 2.67 3.764 2.5 4.25 2.5H9.208C9.444 2.5 9.649 2.58667 9.823 2.76C9.99633 2.934 10.083 3.139 10.083 3.375C10.083 3.611 9.99633 3.816 9.823 3.99C9.649 4.16333 9.444 4.25 9.208 4.25H4.25V15.75H15.75V10.792C15.75 10.556 15.8367 10.351 16.01 10.177C16.184 10.0037 16.389 9.917 16.625 9.917C16.861 9.917 17.066 10.0037 17.24 10.177C17.4133 10.351 17.5 10.556 17.5 10.792V15.75C17.5 16.236 17.33 16.6493 16.99 16.99C16.6493 17.33 16.236 17.5 15.75 17.5H4.25ZM7.5 12.5C7.33333 12.3333 7.25 12.1283 7.25 11.885C7.25 11.6423 7.33333 11.4377 7.5 11.271L14.521 4.25H12.708C12.472 4.25 12.2673 4.16333 12.094 3.99C11.92 3.816 11.833 3.611 11.833 3.375C11.833 3.139 11.92 2.934 12.094 2.76C12.2673 2.58667 12.472 2.5 12.708 2.5H16.625C16.861 2.5 17.066 2.58667 17.24 2.76C17.4133 2.934 17.5 3.139 17.5 3.375V7.292C17.5 7.528 17.4133 7.73267 17.24 7.906C17.066 8.08 16.861 8.167 16.625 8.167C16.389 8.167 16.184 8.08 16.01 7.906C15.8367 7.73267 15.75 7.528 15.75 7.292V5.479L8.708 12.521C8.54133 12.6877 8.34367 12.771 8.115 12.771C7.88567 12.771 7.68067 12.6807 7.5 12.5Z",fill:"currentColor"})});var gr;fr.displayName="ExternalIcon",dr=hr.ExternalIcon=fr,function(e){e.D1=g.h1`
+`,ur=i.forwardRef((({value:e,spacing:n,type:a,error:i,disabled:l,readOnly:c,onChange:u,onClear:d,allowClear:h=!1,className:p,...f},g)=>{const m=o();s(g,(()=>m.current),[]);const b=()=>"tel"===a&&n,y=e=>{const t=e.target,r=t.value,n=t.value.replace(/\s/g,"");t.value=n,u(e),t.value=r},v=e?(e=>e?b()?Gt.transformWithSpaces(e,n):e:"")(e):e;return t(Ut,{disabled:l,$error:i,$readOnly:c,className:p,children:[r(sr,{"data-testid":"input",ref:m,disabled:l,value:v,onChange:e=>{u&&(b()?y(e):u(e))},type:a,readOnly:c,...f}),h&&!l&&!c&&!!e&&r(lr,{onClick:()=>{d&&d(),m&&m.current&&m.current.focus()},type:"button",children:r(cr,{})})]})}));var dr,hr={};Object.defineProperty(hr,"__esModule",{value:!0});var pr=e;const fr=e=>pr.jsx("svg",{width:"1em",height:"1em",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:pr.jsx("path",{d:"M4.25 17.5C3.764 17.5 3.35067 17.33 3.01 16.99C2.67 16.6493 2.5 16.236 2.5 15.75V4.25C2.5 3.764 2.67 3.35067 3.01 3.01C3.35067 2.67 3.764 2.5 4.25 2.5H9.208C9.444 2.5 9.649 2.58667 9.823 2.76C9.99633 2.934 10.083 3.139 10.083 3.375C10.083 3.611 9.99633 3.816 9.823 3.99C9.649 4.16333 9.444 4.25 9.208 4.25H4.25V15.75H15.75V10.792C15.75 10.556 15.8367 10.351 16.01 10.177C16.184 10.0037 16.389 9.917 16.625 9.917C16.861 9.917 17.066 10.0037 17.24 10.177C17.4133 10.351 17.5 10.556 17.5 10.792V15.75C17.5 16.236 17.33 16.6493 16.99 16.99C16.6493 17.33 16.236 17.5 15.75 17.5H4.25ZM7.5 12.5C7.33333 12.3333 7.25 12.1283 7.25 11.885C7.25 11.6423 7.33333 11.4377 7.5 11.271L14.521 4.25H12.708C12.472 4.25 12.2673 4.16333 12.094 3.99C11.92 3.816 11.833 3.611 11.833 3.375C11.833 3.139 11.92 2.934 12.094 2.76C12.2673 2.58667 12.472 2.5 12.708 2.5H16.625C16.861 2.5 17.066 2.58667 17.24 2.76C17.4133 2.934 17.5 3.139 17.5 3.375V7.292C17.5 7.528 17.4133 7.73267 17.24 7.906C17.066 8.08 16.861 8.167 16.625 8.167C16.389 8.167 16.184 8.08 16.01 7.906C15.8367 7.73267 15.75 7.528 15.75 7.292V5.479L8.708 12.521C8.54133 12.6877 8.34367 12.771 8.115 12.771C7.88567 12.771 7.68067 12.6807 7.5 12.5Z",fill:"currentColor"})});var gr;fr.displayName="ExternalIcon",dr=hr.ExternalIcon=fr,function(e){e.D1=g.h1`
         ${e=>m`
                 ${ir("D1",e.weight,e.paragraph)}
                 color: ${Vt.Neutral[1]};
@@ -638,7 +638,7 @@ import e,{jsxs as t,jsx as r,Fragment as n}from"react/jsx-runtime";import*as a f
                 background-color: ${Vt.Neutral[7]};
             `}
     }
-`,yu=i.forwardRef((({children:e,focusHighlight:t=!0,focusOutline:n="none",...a},i)=>r(bu,{ref:i,$outline:n,$highlight:t,...a,children:e}))),vu=g.li`
+`,yu=i.forwardRef((({children:e,focusHighlight:t=!0,focusOutline:n="none",type:a="button",...i},o)=>r(bu,{ref:o,$outline:n,$highlight:t,type:a,...i,children:e}))),vu=g.li`
     background: ${Vt.Neutral[7]};
     display: flex;
     border-radius: 4px;
@@ -675,7 +675,7 @@ import e,{jsxs as t,jsx as r,Fragment as n}from"react/jsx-runtime";import*as a f
     height: 1.375rem;
     width: 1.375rem;
     color: ${Vt.Neutral[3]};
-`,_u=d(((e,n)=>{const{onClear:a,...i}=e;return t(vu,{children:[r(xu,{}),r(wu,{ref:n,...i}),i.value&&r($u,{"aria-label":"Clear search",focusOutline:"browser",onClick:a,children:r(Su,{})})]},"search")})),Cu=({listItems:e,listExtractor:a,valueExtractor:i,onSelectItem:s,listStyleWidth:c,visible:d,enableSearch:h,searchPlaceholder:p="Search",onSearch:f,searchFunction:g,onDismiss:m,multiSelect:b,selectedItems:y,onSelectAll:v,onRetry:w,itemsLoadState:x="success",itemTruncationType:$="end",renderListItem:S,onBlur:_,hideNoResultsDisplay:C,renderCustomCallToAction:k,...B})=>{const[O,F]=u(0),[j,A]=u(""),[z,P]=u(e),[N,I]=u(0),E=sc({height:N}),M=o(),D=o(),H=o([]),T=o(),V=o(),L=o(O),R=o(z),W=e=>{L.current=e,F(e)},q=e=>{R.current=e,P(e)};l((()=>(document.addEventListener("keydown",X),()=>{document.removeEventListener("keydown",X)})),[]),l((()=>{Z(j)}),[j]),l((()=>{A(""),d?(setTimeout((()=>{I(K())})),T&&T.current?(T.current.focus(),W(-1)):H.current[O]&&H.current[O].focus()):I(0)}),[d]),l((()=>{if(d){const e=K();I(e)}}),[z]),l((()=>{q(e),A(""),W(0)}),[e]);const U=e=>a?a(e):e.toString(),G=e=>{const t=a?a(e):e.toString();let r=0;return D&&D.current&&(r=D.current.getBoundingClientRect().width-100),Gt.shouldTruncateToTwoLines("string"==typeof t?t:t.title,r)},Q=e=>!!Vi(y,(t=>Ri(t,e))),Z=t=>{if(""===t)q(e);else if(g){const e=g(t);q(e)}else{const r=e.filter((e=>{const r=U(e),n="object"==typeof r?r.title.toLowerCase():r.toLowerCase();return"object"==typeof r&&r.secondaryLabel?n.includes(t.trim().toLowerCase())||r.secondaryLabel.includes(t.trim().toLowerCase()):n.includes(t.trim().toLowerCase())}));q(r)}},K=()=>(D&&D.current?D.current.getBoundingClientRect().height:0)+(V.current?V.current.getBoundingClientRect().height:0),X=e=>{if(M&&M.current.contains(e.target))switch(e.code){case"ArrowDown":if(L.current<R.current.length-1){const e=L.current+1;H.current[e].focus(),W(e)}break;case"ArrowUp":if(L.current>0){const e=L.current-1;H.current[e].focus(),W(L.current-1)}break;case"Escape":m&&m(!0)}},J=(e,t)=>{e.preventDefault(),s&&s(t,(e=>i?i(e):e)(t))},Y=e=>{const t=e.target.value;A(t),f&&f()},ee=()=>{A(""),f&&f()},te=()=>{w&&w()},re=()=>{_&&_()},ne=e=>{const n=U(e),a="string"==typeof n?n:n.title;return t(au,{"data-testid":"truncate-middle-container",children:[r(iu,{children:a}),t(ou,{children:[" ",a]})]})},ae=e=>{const a=U(e);return"string"==typeof a?r(n,{children:a}):t(n,{children:[a.title,a.secondaryLabel&&r(nu,{children:a.secondaryLabel})]})},ie=()=>{if(!w||w&&"success"===x)return z.map(((e,n)=>r(eu,{checked:Q(e)&&!b,children:t(tu,{onClick:t=>{J(t,e)},ref:e=>H.current[n]=e,"data-testid":"list-item",type:"button",tabIndex:d?0:-1,multiSelect:b,onBlur:re,children:[b&&r(su,{checked:Q(e),displaySize:"small"}),S?S(e,{selected:Q(e)}):r(ru,{truncateType:$,children:"middle"===$&&G(e)?ne(e):ae(e)})]})},((e,t)=>`item_${t}__${i?i(e):e}`)(e,n))))},oe=()=>{if(b&&z.length>0&&!j&&"success"===x)return r(lu,{children:r(cu,{onClick:v,children:0===y.length?"Select all":"Unselect all"})},"selectAll")},se=()=>{if(!C&&j&&0===z.length)return t(uu,{"data-testid":"list-no-results",children:[r(hu,{"data-testid":"no-result-icon"}),r(du,{children:"No results found."})]},"noResults")},le=()=>{if(w&&"loading"===x)return t(uu,{"data-testid":"list-loading",children:[r(Tc,{$buttonStyle:"secondary",size:24}),r(du,{children:"Loading..."})]},"loading")},ce=()=>{if(w&&"fail"===x)return t(uu,{"data-testid":"list-fail",children:[r(hu,{"data-testid":"load-error-icon"}),r(du,{children:"Failed to load."}),r(cu,{onClick:te,children:"Try again."})]},"noResults")};return r(n,{children:t(Jc,{style:E,"data-testid":d?"dropdown-container":"dropdown-container-hidden",ref:M,children:[(()=>{if(d)return t(Yc,{ref:D,"data-testid":"dropdown-list",width:c,role:"list",...B,children:[(h||g)&&"success"===x?r(_u,{ref:T,onChange:Y,value:j,placeholder:p,"data-testid":"search-input","aria-label":"search-input",tabIndex:d?0:-1,onClear:ee}):null,oe(),se(),le(),ce(),ie()]})})(),(()=>{if(d&&k)return r("div",{ref:V,"data-testid":"custom-cta",children:k(m,z)})})()]})})};var ku,Bu={};Object.defineProperty(Bu,"__esModule",{value:!0});var Ou=e;const Fu=e=>Ou.jsx("svg",{width:"1em",height:"1em",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:Ou.jsx("path",{d:"M2.62611 5.81312C2.84811 5.59112 3.10478 5.48012 3.39611 5.48012C3.68811 5.48012 3.94511 5.59112 4.16711 5.81312L10.1881 11.8341L16.2301 5.79212C16.4381 5.58412 16.6881 5.48012 16.9801 5.48012C17.2714 5.48012 17.5281 5.59112 17.7501 5.81312C17.9588 6.02179 18.0631 6.27545 18.0631 6.57412C18.0631 6.87279 17.9588 7.12612 17.7501 7.33412L10.8131 14.2721C10.7158 14.3688 10.6151 14.4381 10.5111 14.4801C10.4071 14.5215 10.2994 14.5421 10.1881 14.5421C10.0768 14.5421 9.96911 14.5215 9.86511 14.4801C9.76111 14.4381 9.66044 14.3688 9.56311 14.2721L2.60511 7.31312C2.38244 7.09112 2.27811 6.83779 2.29211 6.55312C2.30611 6.26845 2.41744 6.02179 2.62611 5.81312Z",fill:"currentColor"})});Fu.displayName="ChevronDownIcon",ku=Bu.ChevronDownIcon=Fu;const ju="all 300ms cubic-bezier(0.21, 0.79, 0.53, 1)",Au=g.div`
+`,_u=d(((e,n)=>{const{onClear:a,...i}=e;return t(vu,{children:[r(xu,{}),r(wu,{ref:n,...i}),i.value&&r($u,{"aria-label":"Clear search",focusOutline:"browser",onClick:a,children:r(Su,{})})]},"search")})),Cu=({listItems:e,listExtractor:a,valueExtractor:i,onSelectItem:s,listStyleWidth:c,visible:d,enableSearch:h,searchPlaceholder:p="Search",onSearch:f,searchFunction:g,onDismiss:m,multiSelect:b,selectedItems:y,onSelectAll:v,onRetry:w,itemsLoadState:x="success",itemTruncationType:$="end",renderListItem:S,onBlur:_,hideNoResultsDisplay:C,renderCustomCallToAction:k,...B})=>{const[O,F]=u(0),[j,A]=u(""),[z,P]=u(e),[N,I]=u(0),E=sc({height:N}),M=o(),D=o(),H=o([]),T=o(),V=o(),L=o(O),R=o(z),W=e=>{L.current=e,F(e)},q=e=>{R.current=e,P(e)};l((()=>(document.addEventListener("keydown",X),()=>{document.removeEventListener("keydown",X)})),[]),l((()=>{Z(j)}),[j]),l((()=>{A(""),d?(setTimeout((()=>{I(K())})),T&&T.current?(T.current.focus(),W(-1)):H.current[O]&&H.current[O].focus()):I(0)}),[d]),l((()=>{if(d){const e=K();I(e)}}),[z]),l((()=>{q(e),A(""),W(0)}),[e]);const U=e=>a?a(e):e.toString(),G=e=>{const t=a?a(e):e.toString();let r=0;return D&&D.current&&(r=D.current.getBoundingClientRect().width-100),Gt.shouldTruncateToTwoLines("string"==typeof t?t:t.title,r)},Q=e=>!!Vi(y,(t=>Ri(t,e))),Z=t=>{if(""===t)q(e);else if(g){const e=g(t);q(e)}else{const r=e.filter((e=>{const r=U(e),n="object"==typeof r?r.title.toLowerCase():r.toLowerCase();return"object"==typeof r&&r.secondaryLabel?n.includes(t.trim().toLowerCase())||r.secondaryLabel.includes(t.trim().toLowerCase()):n.includes(t.trim().toLowerCase())}));q(r)}},K=()=>(D&&D.current?D.current.getBoundingClientRect().height:0)+(V.current?V.current.getBoundingClientRect().height:0),X=e=>{if(M&&M.current.contains(e.target))switch(e.code){case"ArrowDown":if(L.current<R.current.length-1){const e=L.current+1;H.current[e].focus(),W(e)}break;case"ArrowUp":if(L.current>0){const e=L.current-1;H.current[e].focus(),W(L.current-1)}break;case"Escape":m&&m(!0)}},J=(e,t)=>{e.preventDefault(),s&&s(t,(e=>i?i(e):e)(t))},Y=e=>{const t=e.target.value;A(t),f&&f()},ee=()=>{A(""),f&&f()},te=()=>{w&&w()},re=()=>{_&&_()},ne=e=>{const n=U(e),a="string"==typeof n?n:n.title;return t(au,{"data-testid":"truncate-middle-container",children:[r(iu,{children:a}),t(ou,{children:[" ",a]})]})},ae=e=>{const a=U(e);return"string"==typeof a?r(n,{children:a}):t(n,{children:[a.title,a.secondaryLabel&&r(nu,{children:a.secondaryLabel})]})},ie=()=>{if(!w||w&&"success"===x)return z.map(((e,n)=>r(eu,{checked:Q(e)&&!b,children:t(tu,{onClick:t=>{J(t,e)},ref:e=>H.current[n]=e,"data-testid":"list-item",type:"button",tabIndex:d?0:-1,multiSelect:b,onBlur:re,children:[b&&r(su,{checked:Q(e),displaySize:"small"}),S?S(e,{selected:Q(e)}):r(ru,{truncateType:$,children:"middle"===$&&G(e)?ne(e):ae(e)})]})},((e,t)=>`item_${t}__${i?i(e):e}`)(e,n))))},oe=()=>{if(b&&z.length>0&&!j&&"success"===x)return r(lu,{children:r(cu,{onClick:v,type:"button",children:0===y.length?"Select all":"Unselect all"})},"selectAll")},se=()=>{if(!C&&j&&0===z.length)return t(uu,{"data-testid":"list-no-results",children:[r(hu,{"data-testid":"no-result-icon"}),r(du,{children:"No results found."})]},"noResults")},le=()=>{if(w&&"loading"===x)return t(uu,{"data-testid":"list-loading",children:[r(Tc,{$buttonStyle:"secondary",size:24}),r(du,{children:"Loading..."})]},"loading")},ce=()=>{if(w&&"fail"===x)return t(uu,{"data-testid":"list-fail",children:[r(hu,{"data-testid":"load-error-icon"}),r(du,{children:"Failed to load."}),r(cu,{onClick:te,type:"button",children:"Try again."})]},"noResults")};return r(n,{children:t(Jc,{style:E,"data-testid":d?"dropdown-container":"dropdown-container-hidden",ref:M,children:[(()=>{if(d)return t(Yc,{ref:D,"data-testid":"dropdown-list",width:c,role:"list",...B,children:[(h||g)&&"success"===x?r(_u,{ref:T,onChange:Y,value:j,placeholder:p,"data-testid":"search-input","aria-label":"search-input",tabIndex:d?0:-1,onClear:ee}):null,oe(),se(),le(),ce(),ie()]})})(),(()=>{if(d&&k)return r("div",{ref:V,"data-testid":"custom-cta",children:k(m,z)})})()]})})};var ku,Bu={};Object.defineProperty(Bu,"__esModule",{value:!0});var Ou=e;const Fu=e=>Ou.jsx("svg",{width:"1em",height:"1em",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:Ou.jsx("path",{d:"M2.62611 5.81312C2.84811 5.59112 3.10478 5.48012 3.39611 5.48012C3.68811 5.48012 3.94511 5.59112 4.16711 5.81312L10.1881 11.8341L16.2301 5.79212C16.4381 5.58412 16.6881 5.48012 16.9801 5.48012C17.2714 5.48012 17.5281 5.59112 17.7501 5.81312C17.9588 6.02179 18.0631 6.27545 18.0631 6.57412C18.0631 6.87279 17.9588 7.12612 17.7501 7.33412L10.8131 14.2721C10.7158 14.3688 10.6151 14.4381 10.5111 14.4801C10.4071 14.5215 10.2994 14.5421 10.1881 14.5421C10.0768 14.5421 9.96911 14.5215 9.86511 14.4801C9.76111 14.4381 9.66044 14.3688 9.56311 14.2721L2.60511 7.31312C2.38244 7.09112 2.27811 6.83779 2.29211 6.55312C2.30611 6.26845 2.41744 6.02179 2.62611 5.81312Z",fill:"currentColor"})});Fu.displayName="ChevronDownIcon",ku=Bu.ChevronDownIcon=Fu;const ju="all 300ms cubic-bezier(0.21, 0.79, 0.53, 1)",Au=g.div`
     position: relative;
     min-height: 3rem;
     height: 3rem; // Need this to persist the height when expanding or collapsing list