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

package/input-select/index.js

@@ -565,7 +565,7 @@ import e,{jsxs as t,jsx as n,Fragment as r}from"react/jsx-runtime";import*as i f
     height: 1.375rem;
     width: 1.375rem;
     color: ${Jl.Neutral[3]};
-`,_u=u(((e,r)=>{const{onClear:i,...o}=e;return t(mu,{children:[n(vu,{}),n(yu,{ref:r,...o}),o.value&&n(bu,{"aria-label":"Clear search",focusOutline:"browser",onClick:i,children:n(wu,{})})]},"search")})),Su=({listItems:e,listExtractor:i,valueExtractor:o,onSelectItem:s,listStyleWidth:u,visible:d,enableSearch:h,searchPlaceholder:p="Search",onSearch:f,searchFunction:g,onDismiss:m,multiSelect:y,selectedItems:v,onSelectAll:b,onRetry:w,itemsLoadState:_="success",itemTruncationType:S="end",renderListItem:x,onBlur:F,hideNoResultsDisplay:$,renderCustomCallToAction:C,...k})=>{const[B,O]=l(0),[j,A]=l(""),[E,D]=l(e),[I,P]=l(0),z=Fl({height:I}),H=c(),N=c(),M=c([]),T=c(),V=c(),L=c(B),R=c(E),W=e=>{L.current=e,O(e)},q=e=>{R.current=e,D(e)};a((()=>(document.addEventListener("keydown",K),()=>{document.removeEventListener("keydown",K)})),[]),a((()=>{G(j)}),[j]),a((()=>{A(""),d?(setTimeout((()=>{P(X())})),T&&T.current?(T.current.focus(),W(-1)):M.current[B]&&M.current[B].focus()):P(0)}),[d]),a((()=>{if(d){const e=X();P(e)}}),[E]),a((()=>{q(e),A(""),W(0)}),[e]);const U=e=>i?i(e):e.toString(),Q=e=>{const t=i?i(e):e.toString();let n=0;return N&&N.current&&(n=N.current.getBoundingClientRect().width-100),Bc.shouldTruncateToTwoLines("string"==typeof t?t:t.title,n)},Z=e=>!!io(v,(t=>ao(t,e))),G=t=>{if(""===t)q(e);else if(g){const e=g(t);q(e)}else{const n=e.filter((e=>{const n=U(e),r="object"==typeof n?n.title.toLowerCase():n.toLowerCase();return"object"==typeof n&&n.secondaryLabel?r.includes(t.trim().toLowerCase())||n.secondaryLabel.includes(t.trim().toLowerCase()):r.includes(t.trim().toLowerCase())}));q(n)}},X=()=>(N&&N.current?N.current.getBoundingClientRect().height:0)+(V.current?V.current.getBoundingClientRect().height:0),K=e=>{if(H&&H.current.contains(e.target))switch(e.code){case"ArrowDown":if(L.current<R.current.length-1){const e=L.current+1;M.current[e].focus(),W(e)}break;case"ArrowUp":if(L.current>0){const e=L.current-1;M.current[e].focus(),W(L.current-1)}break;case"Escape":m&&m(!0)}},Y=(e,t)=>{e.preventDefault(),s&&s(t,(e=>o?o(e):e)(t))},J=e=>{const t=e.target.value;A(t),f&&f()},ee=()=>{A(""),T.current.focus(),f&&f()},te=()=>{w&&w()},ne=()=>{F&&F()},re=e=>{const r=U(e),i="string"==typeof r?r:r.title;return t(Uc,{"data-testid":"truncate-middle-container",children:[n(Qc,{children:i}),t(Zc,{children:[" ",i]})]})},ie=e=>{const i=U(e);return"string"==typeof i?n(r,{children:i}):t(r,{children:[i.title,i.secondaryLabel&&n(qc,{children:i.secondaryLabel})]})},oe=()=>{if(!w||w&&"success"===_)return E.map(((e,r)=>n(Lc,{checked:Z(e)&&!y,children:t(Rc,{onClick:t=>{Y(t,e)},ref:e=>M.current[r]=e,"data-testid":"list-item",type:"button",tabIndex:d?0:-1,multiSelect:y,onBlur:ne,children:[y&&n(Gc,{checked:Z(e),displaySize:"small"}),x?x(e,{selected:Z(e)}):n(Wc,{truncateType:S,children:"middle"===S&&Q(e)?re(e):ie(e)})]})},((e,t)=>`item_${t}__${o?o(e):e}`)(e,r))))},ae=()=>{if(y&&E.length>0&&!j&&"success"===_)return n(Xc,{children:n(Kc,{onClick:b,type:"button",children:0===v.length?"Select all":"Unselect all"})},"selectAll")},se=()=>{if(!$&&j&&0===E.length)return t(Yc,{"data-testid":"list-no-results",children:[n(eu,{"data-testid":"no-result-icon"}),n(Jc,{children:"No results found."})]},"noResults")},le=()=>{if(w&&"loading"===_)return t(Yc,{"data-testid":"list-loading",children:[n(kc,{$buttonStyle:"secondary",size:24}),n(Jc,{children:"Loading..."})]},"loading")},ce=()=>{if(w&&"fail"===_)return t(Yc,{"data-testid":"list-fail",children:[n(eu,{"data-testid":"load-error-icon"}),n(Jc,{children:"Failed to load."}),n(Kc,{onClick:te,children:"Try again."})]},"noResults")};return n(r,{children:t(Tc,{style:z,"data-testid":d?"dropdown-container":"dropdown-container-hidden",ref:H,children:[(()=>{if(d)return t(Vc,{ref:N,"data-testid":"dropdown-list",width:u,role:"list",...k,children:[(h||g)&&"success"===_?n(_u,{ref:T,onChange:J,value:j,placeholder:p,"data-testid":"search-input","aria-label":"search-input",tabIndex:d?0:-1,onClear:ee}):null,ae(),se(),le(),ce(),oe()]})})(),(()=>{if(d&&C)return n("div",{ref:V,"data-testid":"custom-cta",children:C(m,E)})})()]})})};var xu,Fu={};Object.defineProperty(Fu,"__esModule",{value:!0});var $u=e;const Cu=e=>$u.jsx("svg",{width:"1em",height:"1em",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:$u.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"})});Cu.displayName="ChevronDownIcon",xu=Fu.ChevronDownIcon=Cu;const ku="all 300ms cubic-bezier(0.21, 0.79, 0.53, 1)",Bu=g.div`
+`,_u=u(((e,r)=>{const{onClear:i,...o}=e;return t(mu,{children:[n(vu,{}),n(yu,{ref:r,...o}),o.value&&n(bu,{"aria-label":"Clear search",focusOutline:"browser",onClick:i,children:n(wu,{})})]},"search")})),Su=({listItems:e,listExtractor:i,valueExtractor:o,onSelectItem:s,listStyleWidth:u,visible:d,enableSearch:h,searchPlaceholder:p="Search",onSearch:f,searchFunction:g,onDismiss:m,multiSelect:y,selectedItems:v,onSelectAll:b,onRetry:w,itemsLoadState:_="success",itemTruncationType:S="end",renderListItem:x,onBlur:F,hideNoResultsDisplay:$,renderCustomCallToAction:C,...k})=>{const[B,O]=l(0),[j,A]=l(""),[E,D]=l(e),[I,P]=l(0),z=Fl({height:I}),H=c(),N=c(),M=c([]),T=c(),V=c(),L=c(B),R=c(E),W=e=>{L.current=e,O(e)},q=e=>{R.current=e,D(e)};a((()=>(document.addEventListener("keydown",K),()=>{document.removeEventListener("keydown",K)})),[]),a((()=>{G(j)}),[j]),a((()=>{A(""),d?(setTimeout((()=>{P(X())})),T&&T.current?(T.current.focus(),W(-1)):M.current[B]&&M.current[B].focus()):P(0)}),[d]),a((()=>{if(d){const e=X();P(e)}}),[E]),a((()=>{q(e),A(""),W(0)}),[e]);const U=e=>i?i(e):e.toString(),Q=e=>{const t=i?i(e):e.toString();let n=0;return N&&N.current&&(n=N.current.getBoundingClientRect().width-100),Bc.shouldTruncateToTwoLines("string"==typeof t?t:t.title,n)},Z=e=>!!io(v,(t=>ao(t,e))),G=t=>{if(""===t)q(e);else if(g){const e=g(t);q(e)}else{const n=e.filter((e=>{const n=U(e),r="object"==typeof n?n.title.toLowerCase():n.toLowerCase();return"object"==typeof n&&n.secondaryLabel?r.includes(t.trim().toLowerCase())||n.secondaryLabel.includes(t.trim().toLowerCase()):r.includes(t.trim().toLowerCase())}));q(n)}},X=()=>(N&&N.current?N.current.getBoundingClientRect().height:0)+(V.current?V.current.getBoundingClientRect().height:0),K=e=>{if(H&&H.current.contains(e.target))switch(e.code){case"ArrowDown":if(L.current<R.current.length-1){const e=L.current+1;M.current[e].focus(),W(e)}break;case"ArrowUp":if(L.current>0){const e=L.current-1;M.current[e].focus(),W(L.current-1)}break;case"Escape":m&&m(!0)}},Y=(e,t)=>{e.preventDefault(),s&&s(t,(e=>o?o(e):e)(t))},J=e=>{const t=e.target.value;A(t),f&&f()},ee=()=>{A(""),T.current.focus(),f&&f()},te=()=>{w&&w()},ne=()=>{F&&F()},re=e=>{const r=U(e),i="string"==typeof r?r:r.title;return t(Uc,{"data-testid":"truncate-middle-container",children:[n(Qc,{children:i}),t(Zc,{children:[" ",i]})]})},ie=e=>{const i=U(e);return"string"==typeof i?n(r,{children:i}):t(r,{children:[i.title,i.secondaryLabel&&n(qc,{children:i.secondaryLabel})]})},oe=()=>{if(!w||w&&"success"===_)return E.map(((e,r)=>n(Lc,{checked:Z(e)&&!y,children:t(Rc,{onClick:t=>{Y(t,e)},ref:e=>M.current[r]=e,"data-testid":"list-item",type:"button",tabIndex:d?0:-1,multiSelect:y,onBlur:ne,children:[y&&n(Gc,{checked:Z(e),displaySize:"small"}),x?x(e,{selected:Z(e)}):n(Wc,{truncateType:S,children:"middle"===S&&Q(e)?re(e):ie(e)})]})},((e,t)=>`item_${t}__${o?o(e):e}`)(e,r))))},ae=()=>{if(y&&E.length>0&&!j&&"success"===_)return n(Xc,{children:n(Kc,{onClick:b,type:"button",children:0===v.length?"Select all":"Unselect all"})},"selectAll")},se=()=>{if(!$&&j&&0===E.length)return t(Yc,{"data-testid":"list-no-results",children:[n(eu,{"data-testid":"no-result-icon"}),n(Jc,{children:"No results found."})]},"noResults")},le=()=>{if(w&&"loading"===_)return t(Yc,{"data-testid":"list-loading",children:[n(kc,{$buttonStyle:"secondary",size:24}),n(Jc,{children:"Loading..."})]},"loading")},ce=()=>{if(w&&"fail"===_)return t(Yc,{"data-testid":"list-fail",children:[n(eu,{"data-testid":"load-error-icon"}),n(Jc,{children:"Failed to load."}),n(Kc,{onClick:te,type:"button",children:"Try again."})]},"noResults")};return n(r,{children:t(Tc,{style:z,"data-testid":d?"dropdown-container":"dropdown-container-hidden",ref:H,children:[(()=>{if(d)return t(Vc,{ref:N,"data-testid":"dropdown-list",width:u,role:"list",...k,children:[(h||g)&&"success"===_?n(_u,{ref:T,onChange:J,value:j,placeholder:p,"data-testid":"search-input","aria-label":"search-input",tabIndex:d?0:-1,onClear:ee}):null,ae(),se(),le(),ce(),oe()]})})(),(()=>{if(d&&C)return n("div",{ref:V,"data-testid":"custom-cta",children:C(m,E)})})()]})})};var xu,Fu={};Object.defineProperty(Fu,"__esModule",{value:!0});var $u=e;const Cu=e=>$u.jsx("svg",{width:"1em",height:"1em",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:$u.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"})});Cu.displayName="ChevronDownIcon",xu=Fu.ChevronDownIcon=Cu;const ku="all 300ms cubic-bezier(0.21, 0.79, 0.53, 1)",Bu=g.div`
     position: relative;
     min-height: 3rem;
     height: 3rem; // Need this to persist the height when expanding or collapsing list
@@ -682,5 +682,5 @@ import e,{jsxs as t,jsx as n,Fragment as r}from"react/jsx-runtime";import*as i f
     overflow: hidden;
 `,Hu=g(zu)`
     color: ${Jl.Neutral[3]};
-`,Nu=({children:e,show:t,error:r,disabled:i,testId:o,onBlur:s,readOnly:l})=>{const u=c();return((e,t,n=window)=>{const r=c();a((()=>{r.current=t}),[t]),a((()=>{if(!n||!n.addEventListener)return;const t=e=>r.current(e);return n.addEventListener(e,t),()=>{n.removeEventListener(e,t)}}),[e,n])})("mousedown",(function(e){if(!i){if(u&&u.current.contains(e.target))return;t&&s()}}),document),n(Bu,{children:n(Au,{ref:u,error:r&&!t,disabled:i,$readOnly:l,expanded:t,"data-testid":o,children:e})})},Mu=({selectedOption:e,placeholder:i="Select",options:o,disabled:s,error:u,className:d,"data-testid":h,id:p,enableSearch:f=!1,searchFunction:g,searchPlaceholder:m,valueExtractor:y,valueToStringFunction:v,listExtractor:b,displayValueExtractor:w,onSelectOption:_,listStyleWidth:S,onShowOptions:x,onHideOptions:F,onRetry:$,optionsLoadState:C="success",optionTruncationType:k="end",renderCustomSelectedOption:B,renderListItem:O,hideNoResultsDisplay:j,renderCustomCallToAction:A,...E})=>{const[D,I]=l(e),[P,z]=l(!1),H=c(),N=c();a((()=>{I(e)}),[e]);const M=(e,t)=>{I(e),z(!1),L(!1),H&&H.current.focus(),_&&_(e,t)},T=e=>{P&&(z(!1),L(!1)),e&&H&&H.current.focus()},V=e=>{if("middle"===k){let t=0;return N&&N.current&&(t=N.current.getBoundingClientRect().width),Bc.truncateOneLine((e=>"string"==typeof e?e:v(e)||e.toString())(e),t,120,8)}return e},L=e=>{!e&&F&&F(),e&&x&&x()};return t(Nu,{className:d,show:P,error:u&&!P,disabled:s,readOnly:E.readOnly,testId:h,onBlur:()=>{z(!1),L(!1)},children:[n(Ou,{ref:H,type:"button","data-testid":p||"selector",disabled:s,onClick:e=>{e.preventDefault(),s||E.readOnly||(z(!P),L(!P))},...E,children:t(r,{children:[n(Pu,{ref:N,children:D?B?B(D):n(zu,{truncateType:k,children:V(w?w(D):y?y(D):D.toString())}):n(Hu,{truncateType:k,children:i})}),!E.readOnly&&n(Eu,{expanded:P,children:n(Du,{})})]})}),P&&n(Iu,{}),o&&o.length>0?n(Su,{listItems:o,onSelectItem:M,onDismiss:T,valueExtractor:y,listExtractor:b,listStyleWidth:S,visible:P,enableSearch:f,searchPlaceholder:m,searchFunction:g,"data-testid":"dropdown-list",selectedItems:D?[D]:[],onRetry:$,itemsLoadState:C,itemTruncationType:k,renderListItem:O,hideNoResultsDisplay:j,renderCustomCallToAction:A}):null]})};export{Mu as InputSelect};
+`,Nu=({children:e,show:t,error:r,disabled:i,testId:o,onBlur:s,readOnly:l})=>{const u=c();return((e,t,n="window",r)=>{const i=c();a((()=>{i.current=t}),[t]),a((()=>{let t;switch(n){case"window":t=window;break;case"document":t=document;break;default:t=n}if(!t||!t.addEventListener)return;const o=e=>i.current(e);return t.addEventListener(e,o,r),()=>{t.removeEventListener(e,o,r)}}),[e,n])})("mousedown",(function(e){if(!i){if(u&&u.current.contains(e.target))return;t&&s()}}),"document"),n(Bu,{children:n(Au,{ref:u,error:r&&!t,disabled:i,$readOnly:l,expanded:t,"data-testid":o,children:e})})},Mu=({selectedOption:e,placeholder:i="Select",options:o,disabled:s,error:u,className:d,"data-testid":h,id:p,enableSearch:f=!1,searchFunction:g,searchPlaceholder:m,valueExtractor:y,valueToStringFunction:v,listExtractor:b,displayValueExtractor:w,onSelectOption:_,listStyleWidth:S,onShowOptions:x,onHideOptions:F,onRetry:$,optionsLoadState:C="success",optionTruncationType:k="end",renderCustomSelectedOption:B,renderListItem:O,hideNoResultsDisplay:j,renderCustomCallToAction:A,...E})=>{const[D,I]=l(e),[P,z]=l(!1),H=c(),N=c();a((()=>{I(e)}),[e]);const M=(e,t)=>{I(e),z(!1),L(!1),H&&H.current.focus(),_&&_(e,t)},T=e=>{P&&(z(!1),L(!1)),e&&H&&H.current.focus()},V=e=>{if("middle"===k){let t=0;return N&&N.current&&(t=N.current.getBoundingClientRect().width),Bc.truncateOneLine((e=>"string"==typeof e?e:v(e)||e.toString())(e),t,120,8)}return e},L=e=>{!e&&F&&F(),e&&x&&x()};return t(Nu,{className:d,show:P,error:u&&!P,disabled:s,readOnly:E.readOnly,testId:h,onBlur:()=>{z(!1),L(!1)},children:[n(Ou,{ref:H,type:"button","data-testid":p||"selector",disabled:s,onClick:e=>{e.preventDefault(),s||E.readOnly||(z(!P),L(!P))},...E,children:t(r,{children:[n(Pu,{ref:N,children:D?B?B(D):n(zu,{truncateType:k,children:V(w?w(D):y?y(D):D.toString())}):n(Hu,{truncateType:k,children:i})}),!E.readOnly&&n(Eu,{expanded:P,children:n(Du,{})})]})}),P&&n(Iu,{}),o&&o.length>0?n(Su,{listItems:o,onSelectItem:M,onDismiss:T,valueExtractor:y,listExtractor:b,listStyleWidth:S,visible:P,enableSearch:f,searchPlaceholder:m,searchFunction:g,"data-testid":"dropdown-list",selectedItems:D?[D]:[],onRetry:$,itemsLoadState:C,itemTruncationType:k,renderListItem:O,hideNoResultsDisplay:j,renderCustomCallToAction:A}):null]})};export{Mu as InputSelect};
 //# sourceMappingURL=index.js.map