@lifesg/react-design-system 2.0.0-canary.3 → 2.0.0-canary.4

package/phone-number-input/index.js

@@ -261,7 +261,7 @@ import e,{jsxs as t,jsx as r,Fragment as n}from"react/jsx-runtime";import*as a f
 `,vr=g(pr)`
     height: 1.25rem;
     width: 1.25rem;
-`,wr=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()?hr.transformWithSpaces(e,n):e:"")(e):e;return t(ur,{$disabled:l,$error:i,$readOnly:c,className:p,children:[r(br,{"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(yr,{onClick:()=>{d&&d(),m&&m.current&&m.current.focus()},type:"button",children:r(vr,{})})]})})),xr=g.div`
+`,wr=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()?hr.transformWithSpaces(e,n):e:"")(e):e;return t(ur,{$disabled:l,$error:i,$readOnly:c,className:p,children:[r(br,{"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(yr,{onClick:()=>{d&&d(),m&&m.current&&m.current.focus()},type:"button",children:r(vr,{"aria-hidden":!0})})]})})),xr=g.div`
     display: flex;
     position: relative;
     border: 1px solid ${Vt.Neutral[5]};
@@ -702,7 +702,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]};
-`,Cu=d(((e,n)=>{const{onClear:a,...i}=e;return t(wu,{children:[r($u,{}),r(xu,{ref:n,...i}),i.value&&r(Su,{"aria-label":"Clear search",focusOutline:"browser",onClick:a,children:r(_u,{})})]},"search")})),Fu=({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:F,...k})=>{const[B,O]=u(0),[j,A]=u(""),[E,z]=u(e),[P,I]=u(0),N=lc({height:P}),D=o(),M=o(),T=o([]),H=o(),V=o(),L=o(B),R=o(E),W=e=>{L.current=e,O(e)},q=e=>{R.current=e,z(e)};l((()=>(document.addEventListener("keydown",X),()=>{document.removeEventListener("keydown",X)})),[]),l((()=>{Z(j)}),[j]),l((()=>{A(""),d?(setTimeout((()=>{I(K())})),H&&H.current?(H.current.focus(),W(-1)):T.current[B]&&T.current[B].focus()):I(0)}),[d]),l((()=>{if(d){const e=K();I(e)}}),[E]),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 M&&M.current&&(r=M.current.getBoundingClientRect().width-100),hr.shouldTruncateToTwoLines("string"==typeof t?t:t.title,r)},Q=e=>!!Li(y,(t=>Wi(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=()=>(M&&M.current?M.current.getBoundingClientRect().height:0)+(V.current?V.current.getBoundingClientRect().height:0),X=e=>{if(D&&D.current.contains(e.target))switch(e.code){case"ArrowDown":if(L.current<R.current.length-1){const e=L.current+1;T.current[e].focus(),W(e)}break;case"ArrowUp":if(L.current>0){const e=L.current-1;T.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(""),H.current.focus(),f&&f()},te=()=>{w&&w()},re=()=>{_&&_()},ne=e=>{const n=U(e),a="string"==typeof n?n:n.title;return t(iu,{"data-testid":"truncate-middle-container",children:[r(ou,{children:a}),t(su,{children:[" ",a]})]})},ae=e=>{const a=U(e);return"string"==typeof a?r(n,{children:a}):t(n,{children:[a.title,a.secondaryLabel&&r(au,{children:a.secondaryLabel})]})},ie=()=>{if(!w||w&&"success"===x)return E.map(((e,n)=>r(tu,{checked:Q(e)&&!b,children:t(ru,{onClick:t=>{J(t,e)},ref:e=>T.current[n]=e,"data-testid":"list-item",type:"button",tabIndex:d?0:-1,multiSelect:b,onBlur:re,children:[b&&r(lu,{checked:Q(e),displaySize:"small"}),S?S(e,{selected:Q(e)}):r(nu,{truncateType:$,children:"middle"===$&&G(e)?ne(e):ae(e)})]})},((e,t)=>`item_${t}__${i?i(e):e}`)(e,n))))},oe=()=>{if(b&&E.length>0&&!j&&"success"===x)return r(cu,{children:r(uu,{onClick:v,type:"button",children:0===y.length?"Select all":"Unselect all"})},"selectAll")},se=()=>{if(!C&&j&&0===E.length)return t(du,{"data-testid":"list-no-results",children:[r(pu,{"data-testid":"no-result-icon"}),r(hu,{children:"No results found."})]},"noResults")},le=()=>{if(w&&"loading"===x)return t(du,{"data-testid":"list-loading",children:[r(Vc,{$buttonStyle:"secondary",size:24}),r(hu,{children:"Loading..."})]},"loading")},ce=()=>{if(w&&"fail"===x)return t(du,{"data-testid":"list-fail",children:[r(pu,{"data-testid":"load-error-icon"}),r(hu,{children:"Failed to load."}),r(uu,{onClick:te,children:"Try again."})]},"noResults")};return r(n,{children:t(Yc,{style:N,"data-testid":d?"dropdown-container":"dropdown-container-hidden",ref:D,children:[(()=>{if(d)return t(eu,{ref:M,"data-testid":"dropdown-list",width:c,role:"list",...k,children:[(h||g)&&"success"===x?r(Cu,{ref:H,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&&F)return r("div",{ref:V,"data-testid":"custom-cta",children:F(m,E)})})()]})})};var ku,Bu={};Object.defineProperty(Bu,"__esModule",{value:!0});var Ou=e;const ju=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"})});ju.displayName="ChevronDownIcon",ku=Bu.ChevronDownIcon=ju;const Au="all 300ms cubic-bezier(0.21, 0.79, 0.53, 1)",Eu=g.div`
+`,Cu=d(((e,n)=>{const{onClear:a,...i}=e;return t(wu,{children:[r($u,{}),r(xu,{ref:n,...i}),i.value&&r(Su,{"aria-label":"Clear search",focusOutline:"browser",onClick:a,children:r(_u,{})})]},"search")})),Fu=({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:F,...k})=>{const[B,O]=u(0),[j,A]=u(""),[E,z]=u(e),[P,I]=u(0),N=lc({height:P}),D=o(),M=o(),T=o([]),H=o(),V=o(),L=o(B),R=o(E),W=e=>{L.current=e,O(e)},q=e=>{R.current=e,z(e)};l((()=>(document.addEventListener("keydown",X),()=>{document.removeEventListener("keydown",X)})),[]),l((()=>{Z(j)}),[j]),l((()=>{A(""),d?(setTimeout((()=>{I(K())})),H&&H.current?(H.current.focus(),W(-1)):T.current[B]&&T.current[B].focus()):I(0)}),[d]),l((()=>{if(d){const e=K();I(e)}}),[E]),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 M&&M.current&&(r=M.current.getBoundingClientRect().width-100),hr.shouldTruncateToTwoLines("string"==typeof t?t:t.title,r)},Q=e=>!!Li(y,(t=>Wi(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=()=>(M&&M.current?M.current.getBoundingClientRect().height:0)+(V.current?V.current.getBoundingClientRect().height:0),X=e=>{if(D&&D.current.contains(e.target))switch(e.code){case"ArrowDown":if(L.current<R.current.length-1){const e=L.current+1;T.current[e].focus(),W(e)}break;case"ArrowUp":if(L.current>0){const e=L.current-1;T.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(""),H.current.focus(),f&&f()},te=()=>{w&&w()},re=()=>{_&&_()},ne=e=>{const n=U(e),a="string"==typeof n?n:n.title;return t(iu,{"data-testid":"truncate-middle-container",children:[r(ou,{children:a}),t(su,{children:[" ",a]})]})},ae=e=>{const a=U(e);return"string"==typeof a?r(n,{children:a}):t(n,{children:[a.title,a.secondaryLabel&&r(au,{children:a.secondaryLabel})]})},ie=()=>{if(!w||w&&"success"===x)return E.map(((e,n)=>r(tu,{checked:Q(e)&&!b,children:t(ru,{onClick:t=>{J(t,e)},ref:e=>T.current[n]=e,"data-testid":"list-item",type:"button",tabIndex:d?0:-1,multiSelect:b,onBlur:re,children:[b&&r(lu,{checked:Q(e),displaySize:"small"}),S?S(e,{selected:Q(e)}):r(nu,{truncateType:$,children:"middle"===$&&G(e)?ne(e):ae(e)})]})},((e,t)=>`item_${t}__${i?i(e):e}`)(e,n))))},oe=()=>{if(b&&E.length>0&&!j&&"success"===x)return r(cu,{children:r(uu,{onClick:v,type:"button",children:0===y.length?"Select all":"Unselect all"})},"selectAll")},se=()=>{if(!C&&j&&0===E.length)return t(du,{"data-testid":"list-no-results",children:[r(pu,{"data-testid":"no-result-icon"}),r(hu,{children:"No results found."})]},"noResults")},le=()=>{if(w&&"loading"===x)return t(du,{"data-testid":"list-loading",children:[r(Vc,{$buttonStyle:"secondary",size:24}),r(hu,{children:"Loading..."})]},"loading")},ce=()=>{if(w&&"fail"===x)return t(du,{"data-testid":"list-fail",children:[r(pu,{"data-testid":"load-error-icon"}),r(hu,{children:"Failed to load."}),r(uu,{onClick:te,type:"button",children:"Try again."})]},"noResults")};return r(n,{children:t(Yc,{style:N,"data-testid":d?"dropdown-container":"dropdown-container-hidden",ref:D,children:[(()=>{if(d)return t(eu,{ref:M,"data-testid":"dropdown-list",width:c,role:"list",...k,children:[(h||g)&&"success"===x?r(Cu,{ref:H,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&&F)return r("div",{ref:V,"data-testid":"custom-cta",children:F(m,E)})})()]})})};var ku,Bu={};Object.defineProperty(Bu,"__esModule",{value:!0});var Ou=e;const ju=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"})});ju.displayName="ChevronDownIcon",ku=Bu.ChevronDownIcon=ju;const Au="all 300ms cubic-bezier(0.21, 0.79, 0.53, 1)",Eu=g.div`
     position: relative;
     min-height: 3rem;
     height: 3rem; // Need this to persist the height when expanding or collapsing list
@@ -819,7 +819,7 @@ import e,{jsxs as t,jsx as r,Fragment as n}from"react/jsx-runtime";import*as a f
     overflow: hidden;
 `;g(Nu)`
     color: ${Vt.Neutral[3]};
-`;const Du=({children:e,show:t,error:n,disabled:a,testId:i,onBlur:s,readOnly:c})=>{const u=o();return((e,t,r=window)=>{const n=o();l((()=>{n.current=t}),[t]),l((()=>{if(!r||!r.addEventListener)return;const t=e=>n.current(e);return r.addEventListener(e,t),()=>{r.removeEventListener(e,t)}}),[e,r])})("mousedown",(function(e){if(!a){if(u&&u.current.contains(e.target))return;t&&s()}}),document),r(Eu,{children:r(Iu,{ref:u,error:n&&!t,disabled:a,$readOnly:c,expanded:t,"data-testid":i,children:e})})},Mu=g.div`
+`;const Du=({children:e,show:t,error:n,disabled:a,testId:i,onBlur:s,readOnly:c})=>{const u=o();return((e,t,r="window",n)=>{const a=o();l((()=>{a.current=t}),[t]),l((()=>{let t;switch(r){case"window":t=window;break;case"document":t=document;break;default:t=r}if(!t||!t.addEventListener)return;const i=e=>a.current(e);return t.addEventListener(e,i,n),()=>{t.removeEventListener(e,i,n)}}),[e,r])})("mousedown",(function(e){if(!a){if(u&&u.current.contains(e.target))return;t&&s()}}),"document"),r(Eu,{children:r(Iu,{ref:u,error:n&&!t,disabled:a,$readOnly:c,expanded:t,"data-testid":i,children:e})})},Mu=g.div`
     position: relative;
     display: flex;
     align-items: center;