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

package/input-range-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")})),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:x="end",renderListItem:S,onBlur:$,hideNoResultsDisplay:C,renderCustomCallToAction:F,...k})=>{const[B,j]=l(0),[O,A]=l(""),[E,I]=l(e),[D,P]=l(0),z=$l({height:D}),H=c(),N=c(),M=c([]),T=c(),L=c(),V=c(B),R=c(E),W=e=>{V.current=e,j(e)},q=e=>{R.current=e,I(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),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)+(L.current?L.current.getBoundingClientRect().height:0),K=e=>{if(H&&H.current.contains(e.target))switch(e.code){case"ArrowDown":if(V.current<R.current.length-1){const e=V.current+1;M.current[e].focus(),W(e)}break;case"ArrowUp":if(V.current>0){const e=V.current-1;M.current[e].focus(),W(V.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=()=>{$&&$()},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(Vc,{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"}),S?S(e,{selected:Z(e)}):n(Wc,{truncateType:x,children:"middle"===x&&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(Xc,{children:n(Kc,{onClick:b,type:"button",children:0===v.length?"Select all":"Unselect all"})},"selectAll")},se=()=>{if(!C&&O&&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(Lc,{ref:N,"data-testid":"dropdown-list",width:u,role:"list",...k,children:[(h||g)&&"success"===_?n(_u,{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&&F)return n("div",{ref:L,"data-testid":"custom-cta",children:F(m,E)})})()]})})};var Su,$u={};Object.defineProperty($u,"__esModule",{value:!0});var Cu=e;const Fu=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"})});Fu.displayName="ChevronDownIcon",Su=$u.ChevronDownIcon=Fu;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")})),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:x="end",renderListItem:S,onBlur:$,hideNoResultsDisplay:C,renderCustomCallToAction:F,...k})=>{const[B,j]=l(0),[O,A]=l(""),[E,I]=l(e),[D,P]=l(0),z=$l({height:D}),H=c(),N=c(),M=c([]),T=c(),L=c(),V=c(B),R=c(E),W=e=>{V.current=e,j(e)},q=e=>{R.current=e,I(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),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)+(L.current?L.current.getBoundingClientRect().height:0),K=e=>{if(H&&H.current.contains(e.target))switch(e.code){case"ArrowDown":if(V.current<R.current.length-1){const e=V.current+1;M.current[e].focus(),W(e)}break;case"ArrowUp":if(V.current>0){const e=V.current-1;M.current[e].focus(),W(V.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=()=>{$&&$()},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(Vc,{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"}),S?S(e,{selected:Z(e)}):n(Wc,{truncateType:x,children:"middle"===x&&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(Xc,{children:n(Kc,{onClick:b,type:"button",children:0===v.length?"Select all":"Unselect all"})},"selectAll")},se=()=>{if(!C&&O&&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(Lc,{ref:N,"data-testid":"dropdown-list",width:u,role:"list",...k,children:[(h||g)&&"success"===_?n(_u,{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&&F)return n("div",{ref:L,"data-testid":"custom-cta",children:F(m,E)})})()]})})};var Su,$u={};Object.defineProperty($u,"__esModule",{value:!0});var Cu=e;const Fu=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"})});Fu.displayName="ChevronDownIcon",Su=$u.ChevronDownIcon=Fu;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,7 +682,7 @@ import e,{jsxs as t,jsx as n,Fragment as r}from"react/jsx-runtime";import*as i f
     overflow: hidden;
 `,Pu=g(Du)`
     color: ${Jl.Neutral[3]};
-`,zu=({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})})},Hu=e=>n("svg",{width:"1em",height:"1em",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:n("path",{d:"M9.39601 16.062C9.21534 15.882 9.12167 15.6807 9.11501 15.458C9.10767 15.236 9.19434 15.0347 9.37501 14.854L13.354 10.875H4.20801C3.97201 10.875 3.76734 10.7883 3.59401 10.615C3.42001 10.441 3.33301 10.236 3.33301 10C3.33301 9.764 3.42001 9.559 3.59401 9.385C3.76734 9.21167 3.97201 9.125 4.20801 9.125H13.354L9.37501 5.167C9.19434 4.98633 9.10767 4.78133 9.11501 4.552C9.12167 4.32267 9.21534 4.118 9.39601 3.938C9.57667 3.75733 9.77801 3.667 10 3.667C10.222 3.667 10.4233 3.75733 10.604 3.938L16.042 9.375C16.1393 9.45833 16.2087 9.55567 16.25 9.667C16.2913 9.77767 16.312 9.88867 16.312 10C16.312 10.1113 16.2913 10.219 16.25 10.323C16.2087 10.427 16.1393 10.5277 16.042 10.625L10.604 16.062C10.4233 16.2427 10.222 16.333 10 16.333C9.77801 16.333 9.57667 16.2427 9.39601 16.062Z",fill:"currentColor"})});Hu.displayName="ArrowRightIcon";const Nu=e=>`@media screen and (max-width: ${e}px)`,Mu=g.div`
+`,zu=({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})})},Hu=e=>n("svg",{width:"1em",height:"1em",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:n("path",{d:"M9.39601 16.062C9.21534 15.882 9.12167 15.6807 9.11501 15.458C9.10767 15.236 9.19434 15.0347 9.37501 14.854L13.354 10.875H4.20801C3.97201 10.875 3.76734 10.7883 3.59401 10.615C3.42001 10.441 3.33301 10.236 3.33301 10C3.33301 9.764 3.42001 9.559 3.59401 9.385C3.76734 9.21167 3.97201 9.125 4.20801 9.125H13.354L9.37501 5.167C9.19434 4.98633 9.10767 4.78133 9.11501 4.552C9.12167 4.32267 9.21534 4.118 9.39601 3.938C9.57667 3.75733 9.77801 3.667 10 3.667C10.222 3.667 10.4233 3.75733 10.604 3.938L16.042 9.375C16.1393 9.45833 16.2087 9.55567 16.25 9.667C16.2913 9.77767 16.312 9.88867 16.312 10C16.312 10.1113 16.2913 10.219 16.25 10.323C16.2087 10.427 16.1393 10.5277 16.042 10.625L10.604 16.062C10.4233 16.2427 10.222 16.333 10 16.333C9.77801 16.333 9.57667 16.2427 9.39601 16.062Z",fill:"currentColor"})});Hu.displayName="ArrowRightIcon";const Nu=e=>`@media screen and (max-width: ${e}px)`,Mu=g.div`
     position: relative;
     height: 100%;
     display: flex;