@lifesg/react-design-system 2.0.0-canary.7 → 2.0.0

package/phone-number-input/index.js

@@ -712,7 +712,7 @@ import{jsxs as e,jsx as t,Fragment as r}from"react/jsx-runtime";import*as n from
     height: 1.375rem;
     width: 1.375rem;
     color: ${qt.Neutral[3]};
-`,Ec=c(((r,n)=>{const{onClear:a,...i}=r;return e(Dc,{children:[t(Ac,{}),t(Mc,{ref:n,...i}),i.value&&t(Cc,{"aria-label":"Clear search",focusOutline:"browser",onClick:a,children:t(zc,{})})]},"search")})),jc=({listItems:n,listExtractor:a,valueExtractor:o,onSelectItem:l,listStyleWidth:c,visible:d,enableSearch:h,searchPlaceholder:f="Search",onSearch:p,searchFunction:m,onDismiss:g,disableItemFocus:y,multiSelect:b,selectedItems:v,onSelectAll:w,onRetry:$,itemsLoadState:x="success",itemTruncationType:S="end",itemMaxLines:_=2,labelDisplayType:k="inline",renderListItem:F,onBlur:B,hideNoResultsDisplay:O,renderCustomCallToAction:D,...M})=>{const[A,C]=u(0),[z,E]=u(""),[j,P]=u(n),[T,N]=u(0),I=Ou({height:T}),H=i(),L=i(),R=i([]),V=i(),W=i(),Y=i(A),q=i(j),U=e=>{Y.current=e,C(e)},G=e=>{q.current=e,P(e)};s((()=>(document.addEventListener("keydown",ee),()=>{document.removeEventListener("keydown",ee)})),[]),s((()=>{K(z)}),[z]),s((()=>{if(E(""),d){if(setTimeout((()=>{N(J())})),y)return;V&&V.current?(V.current.focus(),U(-1)):R.current[A]&&R.current[A].focus()}else N(0)}),[d]),s((()=>{if(d){const e=J();N(e)}}),[j,x]),s((()=>{G(n),E(""),U(0)}),[n]);const Q=e=>a?a(e):e.toString(),Z=e=>{if("inline"!==k)return!1;let t=0;L&&L.current&&(t=L.current.getBoundingClientRect().width-60);return Er.getTextWidth(e,"1.125rem 'Open Sans'")>t*_},X=e=>!!lo(v,(t=>co(t,e))),K=e=>{if(""===e)G(n);else if(m){const t=m(e);G(t)}else{const t=n.filter((t=>{const r=Q(t),n="object"==typeof r?r.title.toLowerCase():r.toLowerCase();return"object"==typeof r&&r.secondaryLabel?n.includes(e.trim().toLowerCase())||r.secondaryLabel.includes(e.trim().toLowerCase()):n.includes(e.trim().toLowerCase())}));G(t)}},J=()=>(L&&L.current?L.current.getBoundingClientRect().height:0)+(W.current?W.current.getBoundingClientRect().height:0),ee=e=>{if(H&&H.current.contains(e.target))switch(e.code){case"ArrowDown":if(Y.current<q.current.length-1){const e=Y.current+1;R.current[e].focus(),U(e)}break;case"ArrowUp":if(Y.current>0){const e=Y.current-1;R.current[e].focus(),U(Y.current-1)}break;case"Escape":g&&g(!0)}},te=(e,t)=>{e.preventDefault(),l&&l(t,(e=>o?o(e):e)(t))},re=e=>{const t=e.target.value;E(t),p&&p()},ne=()=>{E(""),V.current.focus(),p&&p()},ae=()=>{$&&$()},ie=()=>{B&&B()},oe=n=>e(r,{children:[t(vc,{$maxLines:_,"aria-hidden":!0,children:n}),t(wc,{$maxLines:_,"aria-hidden":!0,children:n})]}),se=r=>{const n=Q(r),a="string"==typeof n?n:n.title,i="string"==typeof n?void 0:n.secondaryLabel,o=Z(a),s=i&&Z(i);return e(bc,{$labelDisplayType:o||s?"next-line":k,children:[t(gc,{$truncateType:S,$maxLines:_,"aria-label":a,children:"middle"===S&&o?oe(a):a}),i&&t(yc,{$truncateType:S,$maxLines:_,$labelDisplayType:k,"aria-label":i,children:"middle"===S&&s?oe(i):i})]})},le=()=>{if(!$||$&&"success"===x)return j.map(((r,n)=>t(fc,{$checked:X(r)&&!b,children:e(pc,{$hasNextLineLabel:"next-line"===k&&j.length>0&&a&&"string"!=typeof a(j[0]),onClick:e=>{te(e,r)},ref:e=>R.current[n]=e,"data-testid":"list-item",type:"button",tabIndex:d?0:-1,$multiSelect:b,onBlur:ie,children:[b&&t($c,{checked:X(r),displaySize:"small"}),F?F(r,{selected:X(r)}):se(r)]})},((e,t)=>`item_${t}__${o?o(e):e}`)(r,n))))},ue=()=>{if(b&&j.length>0&&!z&&"success"===x)return t(xc,{children:t(Sc,{onClick:w,type:"button",children:0===v.length?"Select all":"Unselect all"})},"selectAll")},ce=()=>{if(!O&&(z||!h)&&0===j.length&&"success"===x)return e(_c,{"data-testid":"list-no-results",children:[t(Fc,{"data-testid":"no-result-icon"}),t(kc,{children:"No results found."})]},"noResults")},de=()=>{if($&&"loading"===x)return e(_c,{"data-testid":"list-loading",children:[t(sc,{$buttonStyle:"secondary",size:24}),t(kc,{children:"Loading..."})]},"loading")},he=()=>{if($&&"fail"===x)return e(_c,{"data-testid":"list-fail",children:[t(Fc,{"data-testid":"load-error-icon"}),t(kc,{children:"Failed to load."}),t(Sc,{onClick:ae,type:"button",children:"Try again."})]},"noResults")};return t(r,{children:e(dc,{style:I,"data-testid":d?"dropdown-container":"dropdown-container-hidden",ref:H,children:[(()=>{if(d)return e(hc,{ref:L,"data-testid":"dropdown-list",width:c,role:"list",...M,children:[(h||m)&&"success"===x?t(Ec,{ref:V,onChange:re,value:z,placeholder:f,"data-testid":"search-input","aria-label":"search-input",tabIndex:d?0:-1,onClear:ne}):null,ue(),ce(),de(),he(),le()]})})(),(()=>{if(d&&D)return t("div",{ref:W,"data-testid":"custom-cta",children:D(g,j)})})()]})})},Pc="all 300ms cubic-bezier(0.21, 0.79, 0.53, 1)",Tc=p.div`
+`,Ec=c(((r,n)=>{const{onClear:a,...i}=r;return e(Dc,{children:[t(Ac,{}),t(Mc,{ref:n,...i}),i.value&&t(Cc,{"aria-label":"Clear search",focusOutline:"browser",onClick:a,children:t(zc,{})})]},"search")})),jc=({listItems:n,listExtractor:a,valueExtractor:o,onSelectItem:l,listStyleWidth:c,visible:d,enableSearch:h,searchPlaceholder:f="Search",onSearch:p,searchFunction:m,onDismiss:g,disableItemFocus:y,multiSelect:b,selectedItems:v,onSelectAll:w,onRetry:$,itemsLoadState:x="success",itemTruncationType:S="end",itemMaxLines:_=2,labelDisplayType:k="inline",renderListItem:F,onBlur:B,hideNoResultsDisplay:O,renderCustomCallToAction:D,...M})=>{const[A,C]=u(0),[z,E]=u(""),[j,P]=u(n),[T,N]=u(0),I=Ou({height:T}),H=i(),L=i(),R=i([]),V=i(),W=i(),Y=i(A),q=i(j),U=e=>{Y.current=e,C(e)},G=e=>{q.current=e,P(e)};s((()=>(document.addEventListener("keydown",ee),()=>{document.removeEventListener("keydown",ee)})),[]),s((()=>{K(z)}),[z]),s((()=>{if(E(""),d){if(setTimeout((()=>{N(J())})),y)return;V&&V.current?(V.current.focus(),U(-1)):R.current[A]&&R.current[A].focus()}else N(0)}),[d]),s((()=>{if(d){const e=J();N(e)}}),[j,x]),s((()=>{G(n),E(""),U(0)}),[n]);const Q=e=>a?a(e):e.toString(),Z=e=>{if("inline"!==k)return!1;let t=0;L&&L.current&&(t=L.current.getBoundingClientRect().width-60);return Er.getTextWidth(e,"1.125rem 'Open Sans'")>t*_},X=e=>!!lo(v,(t=>co(t,e))),K=e=>{if(""===e)G(n);else if(m){const t=m(e);G(t)}else{const t=n.filter((t=>{const r=Q(t),n="object"==typeof r?r.title.toLowerCase():r.toLowerCase(),a="string"==typeof r?void 0:r.secondaryLabel?.toLowerCase(),i=e.trim().toLowerCase();return n.includes(i)||a&&a.includes(i)}));G(t)}},J=()=>(L&&L.current?L.current.getBoundingClientRect().height:0)+(W.current?W.current.getBoundingClientRect().height:0),ee=e=>{if(H&&H.current.contains(e.target))switch(e.code){case"ArrowDown":if(Y.current<q.current.length-1){const e=Y.current+1;R.current[e].focus(),U(e)}break;case"ArrowUp":if(Y.current>0){const e=Y.current-1;R.current[e].focus(),U(Y.current-1)}break;case"Escape":g&&g(!0)}},te=(e,t)=>{e.preventDefault(),l&&l(t,(e=>o?o(e):e)(t))},re=e=>{const t=e.target.value;E(t),p&&p()},ne=()=>{E(""),V.current.focus(),p&&p()},ae=()=>{$&&$()},ie=()=>{B&&B()},oe=n=>e(r,{children:[t(vc,{$maxLines:_,"aria-hidden":!0,children:n}),t(wc,{$maxLines:_,"aria-hidden":!0,children:n})]}),se=r=>{const n=Q(r),a="string"==typeof n?n:n.title,i="string"==typeof n?void 0:n.secondaryLabel,o=Z(a),s=i&&Z(i);return e(bc,{$labelDisplayType:o||s?"next-line":k,children:[t(gc,{$truncateType:S,$maxLines:_,"aria-label":a,children:"middle"===S&&o?oe(a):a}),i&&t(yc,{$truncateType:S,$maxLines:_,$labelDisplayType:k,"aria-label":i,children:"middle"===S&&s?oe(i):i})]})},le=()=>{if(!$||$&&"success"===x)return j.map(((r,n)=>t(fc,{$checked:X(r)&&!b,children:e(pc,{$hasNextLineLabel:"next-line"===k&&j.length>0&&a&&"string"!=typeof a(j[0]),onClick:e=>{te(e,r)},ref:e=>R.current[n]=e,"data-testid":"list-item",type:"button",tabIndex:d?0:-1,$multiSelect:b,onBlur:ie,children:[b&&t($c,{checked:X(r),displaySize:"small"}),F?F(r,{selected:X(r)}):se(r)]})},((e,t)=>`item_${t}__${o?o(e):e}`)(r,n))))},ue=()=>{if(b&&j.length>0&&!z&&"success"===x)return t(xc,{children:t(Sc,{onClick:w,type:"button",children:0===v.length?"Select all":"Unselect all"})},"selectAll")},ce=()=>{if(!O&&(z||!h)&&0===j.length&&"success"===x)return e(_c,{"data-testid":"list-no-results",children:[t(Fc,{"data-testid":"no-result-icon"}),t(kc,{children:"No results found."})]},"noResults")},de=()=>{if($&&"loading"===x)return e(_c,{"data-testid":"list-loading",children:[t(sc,{$buttonStyle:"secondary",size:24}),t(kc,{children:"Loading..."})]},"loading")},he=()=>{if($&&"fail"===x)return e(_c,{"data-testid":"list-fail",children:[t(Fc,{"data-testid":"load-error-icon"}),t(kc,{children:"Failed to load."}),t(Sc,{onClick:ae,type:"button",children:"Try again."})]},"noResults")};return t(r,{children:e(dc,{style:I,"data-testid":d?"dropdown-container":"dropdown-container-hidden",ref:H,children:[(()=>{if(d)return e(hc,{ref:L,"data-testid":"dropdown-list",width:c,role:"list",...M,children:[(h||m)&&"success"===x?t(Ec,{ref:V,onChange:re,value:z,placeholder:f,"data-testid":"search-input","aria-label":"search-input",tabIndex:d?0:-1,onClear:ne}):null,ue(),ce(),de(),he(),le()]})})(),(()=>{if(d&&D)return t("div",{ref:W,"data-testid":"custom-cta",children:D(g,j)})})()]})})},Pc="all 300ms cubic-bezier(0.21, 0.79, 0.53, 1)",Tc=p.div`
     position: relative;
     min-height: 3rem;
     height: 3rem; // Need this to persist the height when expanding or collapsing list