@lifesg/react-design-system 1.1.1 → 1.1.2

package/input-select/index.js

@@ -453,7 +453,7 @@ import e,{jsxs as t,jsx as n,Fragment as r}from"react/jsx-runtime";import*as i f
                 background-color: ${ec.Neutral[7]};
             `}
     }
-`,du=o.forwardRef((({children:e,focusHighlight:t=!0,focusOutline:r="none",...i},o)=>n(uu,{ref:o,$outline:r,$highlight:t,...i,children:e}))),hu=g.li`
+`,du=o.forwardRef((({children:e,focusHighlight:t=!0,focusOutline:r="none",type:i="button",...o},a)=>n(uu,{ref:a,$outline:r,$highlight:t,type:i,...o,children:e}))),hu=g.li`
     background: ${ec.Neutral[7]};
     display: flex;
     border-radius: 4px;
@@ -490,7 +490,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]};
-`,yu=u(((e,r)=>{const{onClear:i,...o}=e;return t(hu,{children:[n(fu,{}),n(pu,{ref:r,...o}),o.value&&n(gu,{"aria-label":"Clear search",focusOutline:"browser",onClick:i,children:n(mu,{})})]},"search")})),vu=({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:$,hideNoResultsDisplay:C,renderCustomCallToAction:k,...F})=>{const[O,B]=l(0),[j,A]=l(""),[I,P]=l(e),[E,z]=l(0),D=Cl({height:E}),H=c(),T=c(),M=c([]),N=c(),L=c(),V=c(O),R=c(I),W=e=>{V.current=e,B(e)},q=e=>{R.current=e,P(e)};a((()=>(document.addEventListener("keydown",K),()=>{document.removeEventListener("keydown",K)})),[]),a((()=>{X(j)}),[j]),a((()=>{A(""),d?(setTimeout((()=>{z(G())})),N&&N.current?(N.current.focus(),W(-1)):M.current[O]&&M.current[O].focus()):z(0)}),[d]),a((()=>{if(d){const e=G();z(e)}}),[I]),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 T&&T.current&&(n=T.current.getBoundingClientRect().width-100),Bc.shouldTruncateToTwoLines("string"==typeof t?t:t.title,n)},Z=e=>!!oo(v,(t=>so(t,e))),X=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)}},G=()=>(T&&T.current?T.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(""),f&&f()},te=()=>{w&&w()},ne=()=>{$&&$()},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(Xc,{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 I.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(Gc,{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&&I.length>0&&!j&&"success"===_)return n(Kc,{children:n(Yc,{onClick:b,children:0===v.length?"Select all":"Unselect all"})},"selectAll")},se=()=>{if(!C&&j&&0===I.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(Oc,{$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(Lc,{style:D,"data-testid":d?"dropdown-container":"dropdown-container-hidden",ref:H,children:[(()=>{if(d)return t(Vc,{ref:T,"data-testid":"dropdown-list",width:u,role:"list",...F,children:[(h||g)&&"success"===_?n(yu,{ref:N,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&&k)return n("div",{ref:L,"data-testid":"custom-cta",children:k(m,I)})})()]})})};var bu,wu={};Object.defineProperty(wu,"__esModule",{value:!0});var _u=e;const Su=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"})});Su.displayName="ChevronDownIcon",bu=wu.ChevronDownIcon=Su;const xu={collections:{base:{InputBoxShadow:y`
+`,yu=u(((e,r)=>{const{onClear:i,...o}=e;return t(hu,{children:[n(fu,{}),n(pu,{ref:r,...o}),o.value&&n(gu,{"aria-label":"Clear search",focusOutline:"browser",onClick:i,children:n(mu,{})})]},"search")})),vu=({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:$,hideNoResultsDisplay:C,renderCustomCallToAction:k,...F})=>{const[O,B]=l(0),[j,A]=l(""),[I,P]=l(e),[E,z]=l(0),D=Cl({height:E}),H=c(),T=c(),M=c([]),N=c(),L=c(),V=c(O),R=c(I),W=e=>{V.current=e,B(e)},q=e=>{R.current=e,P(e)};a((()=>(document.addEventListener("keydown",K),()=>{document.removeEventListener("keydown",K)})),[]),a((()=>{X(j)}),[j]),a((()=>{A(""),d?(setTimeout((()=>{z(G())})),N&&N.current?(N.current.focus(),W(-1)):M.current[O]&&M.current[O].focus()):z(0)}),[d]),a((()=>{if(d){const e=G();z(e)}}),[I]),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 T&&T.current&&(n=T.current.getBoundingClientRect().width-100),Bc.shouldTruncateToTwoLines("string"==typeof t?t:t.title,n)},Z=e=>!!oo(v,(t=>so(t,e))),X=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)}},G=()=>(T&&T.current?T.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(""),f&&f()},te=()=>{w&&w()},ne=()=>{$&&$()},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(Xc,{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 I.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(Gc,{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&&I.length>0&&!j&&"success"===_)return n(Kc,{children:n(Yc,{onClick:b,type:"button",children:0===v.length?"Select all":"Unselect all"})},"selectAll")},se=()=>{if(!C&&j&&0===I.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(Oc,{$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(Lc,{style:D,"data-testid":d?"dropdown-container":"dropdown-container-hidden",ref:H,children:[(()=>{if(d)return t(Vc,{ref:T,"data-testid":"dropdown-list",width:u,role:"list",...F,children:[(h||g)&&"success"===_?n(yu,{ref:N,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&&k)return n("div",{ref:L,"data-testid":"custom-cta",children:k(m,I)})})()]})})};var bu,wu={};Object.defineProperty(wu,"__esModule",{value:!0});var _u=e;const Su=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"})});Su.displayName="ChevronDownIcon",bu=wu.ChevronDownIcon=Su;const xu={collections:{base:{InputBoxShadow:y`
         inset 0 0 6px 1px ${ec.Shadow.Accent}
     `,InputErrorBoxShadow:y`
         inset 0 0 6px 1px ${ec.Shadow.Red}