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

package/input-select/index.js

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