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

package/input-multi-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: ${ec.Neutral[3]};
-`,Su=u(((e,r)=>{const{onClear:i,...o}=e;return t(yu,{children:[n(bu,{}),n(vu,{ref:r,...o}),o.value&&n(wu,{"aria-label":"Clear search",focusOutline:"browser",onClick:i,children:n(_u,{})})]},"search")})),xu=({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,j]=l(0),[O,A]=l(""),[E,D]=l(e),[I,P]=l(0),z=$l({height:I}),H=c(),N=c(),M=c([]),T=c(),V=c(),L=c(B),R=c(E),W=e=>{L.current=e,j(e)},q=e=>{R.current=e,D(e)};a((()=>(document.addEventListener("keydown",K),()=>{document.removeEventListener("keydown",K)})),[]),a((()=>{G(O)}),[O]),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),jc.shouldTruncateToTwoLines("string"==typeof t?t:t.title,n)},Z=e=>!!oo(v,(t=>so(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(Qc,{"data-testid":"truncate-middle-container",children:[n(Zc,{children:i}),t(Gc,{children:[" ",i]})]})},ie=e=>{const i=U(e);return"string"==typeof i?n(r,{children:i}):t(r,{children:[i.title,i.secondaryLabel&&n(Uc,{children:i.secondaryLabel})]})},oe=()=>{if(!w||w&&"success"===_)return E.map(((e,r)=>n(Rc,{checked:Z(e)&&!y,children:t(Wc,{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(Xc,{checked:Z(e),displaySize:"small"}),x?x(e,{selected:Z(e)}):n(qc,{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&&!O&&"success"===_)return n(Kc,{children:n(Yc,{onClick:b,type:"button",children:0===v.length?"Select all":"Unselect all"})},"selectAll")},se=()=>{if(!$&&O&&0===E.length)return t(Jc,{"data-testid":"list-no-results",children:[n(tu,{"data-testid":"no-result-icon"}),n(eu,{children:"No results found."})]},"noResults")},le=()=>{if(w&&"loading"===_)return t(Jc,{"data-testid":"list-loading",children:[n(Bc,{$buttonStyle:"secondary",size:24}),n(eu,{children:"Loading..."})]},"loading")},ce=()=>{if(w&&"fail"===_)return t(Jc,{"data-testid":"list-fail",children:[n(tu,{"data-testid":"load-error-icon"}),n(eu,{children:"Failed to load."}),n(Yc,{onClick:te,children:"Try again."})]},"noResults")};return n(r,{children:t(Vc,{style:z,"data-testid":d?"dropdown-container":"dropdown-container-hidden",ref:H,children:[(()=>{if(d)return t(Lc,{ref:N,"data-testid":"dropdown-list",width:u,role:"list",...k,children:[(h||g)&&"success"===_?n(Su,{ref:T,onChange:J,value:O,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 Fu,$u={};Object.defineProperty($u,"__esModule",{value:!0});var Cu=e;const ku=e=>Cu.jsx("svg",{width:"1em",height:"1em",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:Cu.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"})});ku.displayName="ChevronDownIcon",Fu=$u.ChevronDownIcon=ku;const Bu="all 300ms cubic-bezier(0.21, 0.79, 0.53, 1)",ju=g.div`
+`,Su=u(((e,r)=>{const{onClear:i,...o}=e;return t(yu,{children:[n(bu,{}),n(vu,{ref:r,...o}),o.value&&n(wu,{"aria-label":"Clear search",focusOutline:"browser",onClick:i,children:n(_u,{})})]},"search")})),xu=({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,j]=l(0),[O,A]=l(""),[E,D]=l(e),[I,P]=l(0),z=$l({height:I}),H=c(),N=c(),M=c([]),T=c(),V=c(),L=c(B),R=c(E),W=e=>{L.current=e,j(e)},q=e=>{R.current=e,D(e)};a((()=>(document.addEventListener("keydown",K),()=>{document.removeEventListener("keydown",K)})),[]),a((()=>{G(O)}),[O]),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),jc.shouldTruncateToTwoLines("string"==typeof t?t:t.title,n)},Z=e=>!!oo(v,(t=>so(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(Qc,{"data-testid":"truncate-middle-container",children:[n(Zc,{children:i}),t(Gc,{children:[" ",i]})]})},ie=e=>{const i=U(e);return"string"==typeof i?n(r,{children:i}):t(r,{children:[i.title,i.secondaryLabel&&n(Uc,{children:i.secondaryLabel})]})},oe=()=>{if(!w||w&&"success"===_)return E.map(((e,r)=>n(Rc,{checked:Z(e)&&!y,children:t(Wc,{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(Xc,{checked:Z(e),displaySize:"small"}),x?x(e,{selected:Z(e)}):n(qc,{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&&!O&&"success"===_)return n(Kc,{children:n(Yc,{onClick:b,type:"button",children:0===v.length?"Select all":"Unselect all"})},"selectAll")},se=()=>{if(!$&&O&&0===E.length)return t(Jc,{"data-testid":"list-no-results",children:[n(tu,{"data-testid":"no-result-icon"}),n(eu,{children:"No results found."})]},"noResults")},le=()=>{if(w&&"loading"===_)return t(Jc,{"data-testid":"list-loading",children:[n(Bc,{$buttonStyle:"secondary",size:24}),n(eu,{children:"Loading..."})]},"loading")},ce=()=>{if(w&&"fail"===_)return t(Jc,{"data-testid":"list-fail",children:[n(tu,{"data-testid":"load-error-icon"}),n(eu,{children:"Failed to load."}),n(Yc,{onClick:te,type:"button",children:"Try again."})]},"noResults")};return n(r,{children:t(Vc,{style:z,"data-testid":d?"dropdown-container":"dropdown-container-hidden",ref:H,children:[(()=>{if(d)return t(Lc,{ref:N,"data-testid":"dropdown-list",width:u,role:"list",...k,children:[(h||g)&&"success"===_?n(Su,{ref:T,onChange:J,value:O,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 Fu,$u={};Object.defineProperty($u,"__esModule",{value:!0});var Cu=e;const ku=e=>Cu.jsx("svg",{width:"1em",height:"1em",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:Cu.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"})});ku.displayName="ChevronDownIcon",Fu=$u.ChevronDownIcon=ku;const Bu="all 300ms cubic-bezier(0.21, 0.79, 0.53, 1)",ju=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;
 `,Nu=g(Hu)`
     color: ${ec.Neutral[3]};
-`,Mu=({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(ju,{children:n(Eu,{ref:u,error:r&&!t,disabled:i,$readOnly:l,expanded:t,"data-testid":o,children:e})})},Tu=({selectedOptions:e,placeholder:i="Select",options:o,className:s,disabled:u,error:d,"data-testid":h,enableSearch:p=!1,searchFunction:f,searchPlaceholder:g,valueExtractor:m,listExtractor:y,onSelectOptions:v,listStyleWidth:b,onShowOptions:w,onHideOptions:_,onRetry:S,optionsLoadState:x="success",optionTruncationType:F="end",...$})=>{const[C,k]=l(e||[]),[B,j]=l(!1),O=c();a((()=>{k(e||[])}),[e]);const A=(e,t)=>{const n=[...C],r=to(C,(e=>(m?m(e):e)===t));r>-1?n.splice(r,1):n.push(e),k(n),I(!1),O&&O.current.focus(),P(n)},E=()=>{B&&(j(!1),I(!1)),O&&O.current.focus()},D=()=>{C&&C.length>0?(k([]),P([])):(k(o),P(o))},I=e=>{!e&&_&&_(),e&&w&&w()},P=e=>{v&&v(e)};return t(Mu,{show:B,error:d&&!B,disabled:u,testId:h,className:s,onBlur:()=>{j(!1),I(!1)},children:[n(Ou,{ref:O,type:"button","data-testid":"selector",onClick:e=>{e.preventDefault(),u||(j(!B),I(!B))},...$,children:t(r,{children:[n(zu,{children:C&&0!==C.length?n(Hu,{children:C&&0!=C.length?`${C.length} selected`:i}):n(Nu,{truncateType:F,children:i})}),n(Du,{expanded:B,children:n(Iu,{})})]})}),B&&n(Pu,{}),o&&o.length>0||S?n(xu,{listItems:o,onSelectItem:A,onDismiss:E,valueExtractor:m,listExtractor:y,listStyleWidth:b,visible:B,enableSearch:p,searchFunction:f,searchPlaceholder:g,"data-testid":"dropdown-list",multiSelect:!0,selectedItems:C,onSelectAll:D,onRetry:S,itemsLoadState:x,itemTruncationType:F}):null]})};export{Tu as InputMultiSelect};
+`,Mu=({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(ju,{children:n(Eu,{ref:u,error:r&&!t,disabled:i,$readOnly:l,expanded:t,"data-testid":o,children:e})})},Tu=({selectedOptions:e,placeholder:i="Select",options:o,className:s,disabled:u,error:d,"data-testid":h,enableSearch:p=!1,searchFunction:f,searchPlaceholder:g,valueExtractor:m,listExtractor:y,onSelectOptions:v,listStyleWidth:b,onShowOptions:w,onHideOptions:_,onRetry:S,optionsLoadState:x="success",optionTruncationType:F="end",...$})=>{const[C,k]=l(e||[]),[B,j]=l(!1),O=c();a((()=>{k(e||[])}),[e]);const A=(e,t)=>{const n=[...C],r=to(C,(e=>(m?m(e):e)===t));r>-1?n.splice(r,1):n.push(e),k(n),I(!1),O&&O.current.focus(),P(n)},E=()=>{B&&(j(!1),I(!1)),O&&O.current.focus()},D=()=>{C&&C.length>0?(k([]),P([])):(k(o),P(o))},I=e=>{!e&&_&&_(),e&&w&&w()},P=e=>{v&&v(e)};return t(Mu,{show:B,error:d&&!B,disabled:u,testId:h,className:s,onBlur:()=>{j(!1),I(!1)},children:[n(Ou,{ref:O,type:"button","data-testid":"selector",onClick:e=>{e.preventDefault(),u||(j(!B),I(!B))},...$,children:t(r,{children:[n(zu,{children:C&&0!==C.length?n(Hu,{children:C&&0!=C.length?`${C.length} selected`:i}):n(Nu,{truncateType:F,children:i})}),n(Du,{expanded:B,children:n(Iu,{})})]})}),B&&n(Pu,{}),o&&o.length>0||S?n(xu,{listItems:o,onSelectItem:A,onDismiss:E,valueExtractor:m,listExtractor:y,listStyleWidth:b,visible:B,enableSearch:p,searchFunction:f,searchPlaceholder:g,"data-testid":"dropdown-list",multiSelect:!0,selectedItems:C,onSelectAll:D,onRetry:S,itemsLoadState:x,itemTruncationType:F}):null]})};export{Tu as InputMultiSelect};
 //# sourceMappingURL=index.js.map