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

package/input-group/index.js

@@ -261,7 +261,7 @@ import e,{jsxs as t,jsx as r,Fragment as n}from"react/jsx-runtime";import*as i f
 `,vr=g(pr)`
     height: 1.25rem;
     width: 1.25rem;
-`,wr=o.forwardRef((({value:e,spacing:n,type:i,error:o,disabled:l,readOnly:c,onChange:u,onClear:d,allowClear:h=!1,className:p,...f},g)=>{const m=a();s(g,(()=>m.current),[]);const y=()=>"tel"===i&&n,b=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?y()?hr.transformWithSpaces(e,n):e:"")(e):e;return t(ur,{$disabled:l,$error:o,$readOnly:c,className:p,children:[r(yr,{"data-testid":"input",ref:m,disabled:l,value:v,onChange:e=>{u&&(y()?b(e):u(e))},type:i,readOnly:c,...f}),h&&!l&&!c&&!!e&&r(br,{onClick:()=>{d&&d(),m&&m.current&&m.current.focus()},type:"button",children:r(vr,{})})]})})),$r=g.div`
+`,wr=o.forwardRef((({value:e,spacing:n,type:i,error:o,disabled:l,readOnly:c,onChange:u,onClear:d,allowClear:h=!1,className:p,...f},g)=>{const m=a();s(g,(()=>m.current),[]);const y=()=>"tel"===i&&n,b=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?y()?hr.transformWithSpaces(e,n):e:"")(e):e;return t(ur,{$disabled:l,$error:o,$readOnly:c,className:p,children:[r(yr,{"data-testid":"input",ref:m,disabled:l,value:v,onChange:e=>{u&&(y()?b(e):u(e))},type:i,readOnly:c,...f}),h&&!l&&!c&&!!e&&r(br,{onClick:()=>{d&&d(),m&&m.current&&m.current.focus()},type:"button",children:r(vr,{"aria-hidden":!0})})]})})),$r=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 i f
     height: 1.375rem;
     width: 1.375rem;
     color: ${Vt.Neutral[3]};
-`,Fu=d(((e,n)=>{const{onClear:i,...o}=e;return t(wu,{children:[r(xu,{}),r($u,{ref:n,...o}),o.value&&r(_u,{"aria-label":"Clear search",focusOutline:"browser",onClick:i,children:r(Su,{})})]},"search")})),Cu=({listItems:e,listExtractor:i,valueExtractor:o,onSelectItem:s,listStyleWidth:c,visible:d,enableSearch:h,searchPlaceholder:p="Search",onSearch:f,searchFunction:g,onDismiss:m,multiSelect:y,selectedItems:b,onSelectAll:v,onRetry:w,itemsLoadState:$="success",itemTruncationType:x="end",renderListItem:_,onBlur:S,hideNoResultsDisplay:F,renderCustomCallToAction:C,...k})=>{const[B,O]=u(0),[j,A]=u(""),[E,D]=u(e),[I,P]=u(0),N=lc({height:I}),z=a(),H=a(),M=a([]),T=a(),V=a(),L=a(B),R=a(E),W=e=>{L.current=e,O(e)},q=e=>{R.current=e,D(e)};l((()=>(document.addEventListener("keydown",K),()=>{document.removeEventListener("keydown",K)})),[]),l((()=>{Z(j)}),[j]),l((()=>{A(""),d?(setTimeout((()=>{P(X())})),T&&T.current?(T.current.focus(),W(-1)):M.current[B]&&M.current[B].focus()):P(0)}),[d]),l((()=>{if(d){const e=X();P(e)}}),[E]),l((()=>{q(e),A(""),W(0)}),[e]);const U=e=>i?i(e):e.toString(),Q=e=>{const t=i?i(e):e.toString();let r=0;return H&&H.current&&(r=H.current.getBoundingClientRect().width-100),hr.shouldTruncateToTwoLines("string"==typeof t?t:t.title,r)},G=e=>!!Ro(b,(t=>qo(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)}},X=()=>(H&&H.current?H.current.getBoundingClientRect().height:0)+(V.current?V.current.getBoundingClientRect().height:0),K=e=>{if(z&&z.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()},re=()=>{S&&S()},ne=e=>{const n=U(e),i="string"==typeof n?n:n.title;return t(ou,{"data-testid":"truncate-middle-container",children:[r(au,{children:i}),t(su,{children:[" ",i]})]})},ie=e=>{const i=U(e);return"string"==typeof i?r(n,{children:i}):t(n,{children:[i.title,i.secondaryLabel&&r(iu,{children:i.secondaryLabel})]})},oe=()=>{if(!w||w&&"success"===$)return E.map(((e,n)=>r(tu,{checked:G(e)&&!y,children:t(ru,{onClick:t=>{Y(t,e)},ref:e=>M.current[n]=e,"data-testid":"list-item",type:"button",tabIndex:d?0:-1,multiSelect:y,onBlur:re,children:[y&&r(lu,{checked:G(e),displaySize:"small"}),_?_(e,{selected:G(e)}):r(nu,{truncateType:x,children:"middle"===x&&Q(e)?ne(e):ie(e)})]})},((e,t)=>`item_${t}__${o?o(e):e}`)(e,n))))},ae=()=>{if(y&&E.length>0&&!j&&"success"===$)return r(cu,{children:r(uu,{onClick:v,type:"button",children:0===b.length?"Select all":"Unselect all"})},"selectAll")},se=()=>{if(!F&&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"===$)return t(du,{"data-testid":"list-loading",children:[r(Vc,{$buttonStyle:"secondary",size:24}),r(hu,{children:"Loading..."})]},"loading")},ce=()=>{if(w&&"fail"===$)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(Jc,{style:N,"data-testid":d?"dropdown-container":"dropdown-container-hidden",ref:z,children:[(()=>{if(d)return t(eu,{ref:H,"data-testid":"dropdown-list",width:c,role:"list",...k,children:[(h||g)&&"success"===$?r(Fu,{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 r("div",{ref:V,"data-testid":"custom-cta",children:C(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`
+`,Fu=d(((e,n)=>{const{onClear:i,...o}=e;return t(wu,{children:[r(xu,{}),r($u,{ref:n,...o}),o.value&&r(_u,{"aria-label":"Clear search",focusOutline:"browser",onClick:i,children:r(Su,{})})]},"search")})),Cu=({listItems:e,listExtractor:i,valueExtractor:o,onSelectItem:s,listStyleWidth:c,visible:d,enableSearch:h,searchPlaceholder:p="Search",onSearch:f,searchFunction:g,onDismiss:m,multiSelect:y,selectedItems:b,onSelectAll:v,onRetry:w,itemsLoadState:$="success",itemTruncationType:x="end",renderListItem:_,onBlur:S,hideNoResultsDisplay:F,renderCustomCallToAction:C,...k})=>{const[B,O]=u(0),[j,A]=u(""),[E,D]=u(e),[I,P]=u(0),N=lc({height:I}),z=a(),H=a(),M=a([]),T=a(),V=a(),L=a(B),R=a(E),W=e=>{L.current=e,O(e)},q=e=>{R.current=e,D(e)};l((()=>(document.addEventListener("keydown",K),()=>{document.removeEventListener("keydown",K)})),[]),l((()=>{Z(j)}),[j]),l((()=>{A(""),d?(setTimeout((()=>{P(X())})),T&&T.current?(T.current.focus(),W(-1)):M.current[B]&&M.current[B].focus()):P(0)}),[d]),l((()=>{if(d){const e=X();P(e)}}),[E]),l((()=>{q(e),A(""),W(0)}),[e]);const U=e=>i?i(e):e.toString(),Q=e=>{const t=i?i(e):e.toString();let r=0;return H&&H.current&&(r=H.current.getBoundingClientRect().width-100),hr.shouldTruncateToTwoLines("string"==typeof t?t:t.title,r)},G=e=>!!Ro(b,(t=>qo(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)}},X=()=>(H&&H.current?H.current.getBoundingClientRect().height:0)+(V.current?V.current.getBoundingClientRect().height:0),K=e=>{if(z&&z.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()},re=()=>{S&&S()},ne=e=>{const n=U(e),i="string"==typeof n?n:n.title;return t(ou,{"data-testid":"truncate-middle-container",children:[r(au,{children:i}),t(su,{children:[" ",i]})]})},ie=e=>{const i=U(e);return"string"==typeof i?r(n,{children:i}):t(n,{children:[i.title,i.secondaryLabel&&r(iu,{children:i.secondaryLabel})]})},oe=()=>{if(!w||w&&"success"===$)return E.map(((e,n)=>r(tu,{checked:G(e)&&!y,children:t(ru,{onClick:t=>{Y(t,e)},ref:e=>M.current[n]=e,"data-testid":"list-item",type:"button",tabIndex:d?0:-1,multiSelect:y,onBlur:re,children:[y&&r(lu,{checked:G(e),displaySize:"small"}),_?_(e,{selected:G(e)}):r(nu,{truncateType:x,children:"middle"===x&&Q(e)?ne(e):ie(e)})]})},((e,t)=>`item_${t}__${o?o(e):e}`)(e,n))))},ae=()=>{if(y&&E.length>0&&!j&&"success"===$)return r(cu,{children:r(uu,{onClick:v,type:"button",children:0===b.length?"Select all":"Unselect all"})},"selectAll")},se=()=>{if(!F&&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"===$)return t(du,{"data-testid":"list-loading",children:[r(Vc,{$buttonStyle:"secondary",size:24}),r(hu,{children:"Loading..."})]},"loading")},ce=()=>{if(w&&"fail"===$)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(Jc,{style:N,"data-testid":d?"dropdown-container":"dropdown-container-hidden",ref:z,children:[(()=>{if(d)return t(eu,{ref:H,"data-testid":"dropdown-list",width:c,role:"list",...k,children:[(h||g)&&"success"===$?r(Fu,{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 r("div",{ref:V,"data-testid":"custom-cta",children:C(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 i f
     overflow: hidden;
 `;g(Nu)`
     color: ${Vt.Neutral[3]};
-`;const zu=({children:e,show:t,error:n,disabled:i,testId:o,onBlur:s,readOnly:c})=>{const u=a();return((e,t,r=window)=>{const n=a();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(!i){if(u&&u.current.contains(e.target))return;t&&s()}}),document),r(Eu,{children:r(Pu,{ref:u,error:n&&!t,disabled:i,$readOnly:c,expanded:t,"data-testid":o,children:e})})},Hu=g.div`
+`;const zu=({children:e,show:t,error:n,disabled:i,testId:o,onBlur:s,readOnly:c})=>{const u=a();return((e,t,r="window",n)=>{const i=a();l((()=>{i.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 o=e=>i.current(e);return t.addEventListener(e,o,n),()=>{t.removeEventListener(e,o,n)}}),[e,r])})("mousedown",(function(e){if(!i){if(u&&u.current.contains(e.target))return;t&&s()}}),"document"),r(Eu,{children:r(Pu,{ref:u,error:n&&!t,disabled:i,$readOnly:c,expanded:t,"data-testid":o,children:e})})},Hu=g.div`
     position: relative;
     display: flex;
     align-items: center;