@lifesg/react-design-system 1.0.0-alpha.17 → 1.0.0-alpha.18

package/input-group/index.js

@@ -563,7 +563,7 @@ import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import*as r from
         outline-color: ${Pt.Accent.Light[3]};
         color: ${Pt.Neutral[1]};
     }
-`;const Rd=C((({className:n,checked:r,disabled:i,onClick:a,onKeyPress:l,displaySize:d="default",...u})=>{const[c,h]=s(r);o((()=>{h(r)}),[r]);const C=e=>{i||(a&&a(e),l&&l(e))};return e(Hd,{selected:c,disabled:i,className:n,"data-testid":"checkbox",onKeyPress:C,tabIndex:i?-1:0,role:"checkbox",$displaySize:d,children:[t(Vd,{type:"checkbox","data-testid":"checkbox-input",onClick:C,disabled:i,tabIndex:-1,...u}),c&&t(_d,{type:"tick",id:"checkmark","data-testid":"checkmark",disabled:i,$displaySize:d})]})}))`
+`;const Rd=C((({className:n,checked:r,disabled:i,onChange:a,onKeyPress:l,displaySize:d="default",...u})=>{const[c,h]=s(r);o((()=>{h(r)}),[r]);const C=e=>{if(!i){const t=e;if(!(" "===t.key||"change"===e.type))return;a&&a(e),l&&l(t)}};return e(Hd,{selected:c,disabled:i,className:n,"data-testid":"checkbox",$displaySize:d,role:"checkbox","aria-checked":c,"aria-labelledby":"checkbox-input",tabIndex:i?-1:0,onKeyDown:C,children:[t(Vd,{id:"checkbox-input","data-testid":"checkbox-input","aria-hidden":"true",type:"checkbox",tabIndex:-1,onChange:C,disabled:i,checked:c,...u}),c&&t(_d,{type:"tick",id:"checkmark","data-testid":"checkmark",disabled:i,$displaySize:d})]})}))`
     flex: 0 0 1.5rem;
     margin-right: 1rem;
 `,jd=C.div`
@@ -626,7 +626,7 @@ import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import*as r from
     width: 1.5rem;
     margin: 0 0.5rem;
     color: ${Pt.Neutral[3]};
-`,Ed=d(((n,r)=>e(Dd,{children:[t(Id,{type:"search"}),t(Nd,{ref:r,...n})]},"search"))),Td=({listItems:n,listExtractor:r,valueExtractor:i,onSelectItem:a,listStyleWidth:d,visible:u,enableSearch:c,searchPlaceholder:h="Search",onSearch:C,searchFunction:p,onDismiss:f,multiSelect:g,selectedItems:m,onSelectAll:v,onRetry:y,itemsLoadState:b="success",itemTruncationType:L="end",renderListItem:w,...H})=>{const[V,_]=s(0),[$,x]=s(""),[M,S]=s(n),[k,Z]=s(0),F=function(e,t){const n=Uo.fun(e),[[r],i]=El(1,n?e:[e],n?t||[]:t);return n||2==arguments.length?[r,i]:r}({height:k}),O=l(),R=l(),j=l([]),B=l(),A=l(V),z=l(M),P=e=>{A.current=e,_(e)},D=e=>{z.current=e,S(e)};o((()=>(document.addEventListener("keydown",q),()=>{document.removeEventListener("keydown",q)})),[]),o((()=>{T($)}),[$]),o((()=>{x(""),u?(Z(W()),B&&B.current?(B.current.focus(),P(-1)):j.current[V]&&j.current[V].focus()):Z(0)}),[u]),o((()=>{if(u){const e=W();Z(e)}}),[M]),o((()=>{D(n),x(""),P(0)}),[n]);const N=e=>r?r(e):e.toString(),I=e=>{const t=r?r(e):e.toString();let n=0;return R&&R.current&&(n=R.current.getBoundingClientRect().width-100),Ut.shouldTruncateToTwoLines(t,n)},E=e=>yo(m,e)>-1,T=e=>{if(""===e)D(n);else if(p){const t=p(e);D(t)}else{const t=n.filter((t=>N(t).toLowerCase().includes(e.trim().toLowerCase())));D(t)}},W=()=>R&&R.current?R.current.getBoundingClientRect().height:0,q=e=>{if(O&&O.current.contains(e.target))switch(e.code){case"ArrowDown":if(A.current<z.current.length-1){const e=A.current+1;j.current[e].focus(),P(e)}break;case"ArrowUp":if(A.current>0){const e=A.current-1;j.current[e].focus(),P(A.current-1)}break;case"Escape":f&&f()}},U=(e,t)=>{e.preventDefault(),a&&a(t,(e=>i?i(e):e)(t))},Q=()=>{y&&y()},G=n=>{const i=r?r(n):n.toString();return e(Zd,{"data-testid":"truncate-middle-container",children:[t(Fd,{children:i}),e(Od,{children:[" ",i]})]})};return t($d,{style:F,"data-testid":u?"dropdown-container":"dropdown-container-hidden",ref:O,children:e(xd,{ref:R,"data-testid":"dropdown-list",width:d,role:"list",...H,children:[(c||p)&&"success"===b?t(Ed,{ref:B,onChange:e=>{const t=e.target.value;x(t),C&&C()},value:$,placeholder:h,"data-testid":"search-input","aria-label":"search-input",tabIndex:u?0:-1}):null,(()=>{if(g&&M.length>0&&!$&&"success"===b)return t(jd,{children:t(Bd,{onClick:v,children:0===m.length?"Select all":"Unselect all"})},"selectAll")})(),(()=>{if($&&0===M.length)return e(Ad,{"data-testid":"list-no-results",children:[t(Pd,{"data-testid":"no-result-icon",children:t(xo,{})}),t(zd,{children:"No results found."})]},"noResults")})(),(()=>{if(y&&"loading"===b)return e(Ad,{"data-testid":"list-loading",children:[t(wd,{$buttonStyle:"secondary",size:24}),t(zd,{children:"Loading..."})]},"loading")})(),(()=>{if(y&&"fail"===b)return e(Ad,{"data-testid":"list-fail",children:[t(Pd,{"data-testid":"load-error-icon",children:t(xo,{})}),t(zd,{children:"Failed to load."}),t(Bd,{onClick:Q,children:"Try again."})]},"noResults")})(),(()=>{if(!y||y&&"success"===b)return M.map(((n,r)=>t(Md,{checked:E(n)&&!g,children:e(Sd,{onClick:e=>{U(e,n)},ref:e=>j.current[r]=e,"data-testid":"list-item",type:"button",tabIndex:u?0:-1,multiSelect:g,children:[g&&t(Rd,{checked:E(n),displaySize:"small"}),w?w(n,{selected:E(n)}):t(kd,{truncateType:L,children:"middle"===L&&I(n)?G(n):N(n)})]})},((e,t)=>`item_${t}__${i?i(e):e}`)(n,r))))})()]})})},Wd="all 300ms cubic-bezier(0.21, 0.79, 0.53, 1)",qd=C.div`
+`,Ed=d(((n,r)=>e(Dd,{children:[t(Id,{type:"search"}),t(Nd,{ref:r,...n})]},"search"))),Td=({listItems:n,listExtractor:r,valueExtractor:i,onSelectItem:a,listStyleWidth:d,visible:u,enableSearch:c,searchPlaceholder:h="Search",onSearch:C,searchFunction:p,onDismiss:f,multiSelect:g,selectedItems:m,onSelectAll:v,onRetry:y,itemsLoadState:b="success",itemTruncationType:L="end",renderListItem:w,...H})=>{const[V,_]=s(0),[$,x]=s(""),[M,S]=s(n),[k,Z]=s(0),F=function(e,t){const n=Uo.fun(e),[[r],i]=El(1,n?e:[e],n?t||[]:t);return n||2==arguments.length?[r,i]:r}({height:k}),O=l(),R=l(),j=l([]),B=l(),A=l(V),z=l(M),P=e=>{A.current=e,_(e)},D=e=>{z.current=e,S(e)};o((()=>(document.addEventListener("keydown",q),()=>{document.removeEventListener("keydown",q)})),[]),o((()=>{T($)}),[$]),o((()=>{x(""),u?(Z(W()),B&&B.current?(B.current.focus(),P(-1)):j.current[V]&&j.current[V].focus()):Z(0)}),[u]),o((()=>{if(u){const e=W();Z(e)}}),[M]),o((()=>{D(n),x(""),P(0)}),[n]);const N=e=>r?r(e):e.toString(),I=e=>{const t=r?r(e):e.toString();let n=0;return R&&R.current&&(n=R.current.getBoundingClientRect().width-100),Ut.shouldTruncateToTwoLines(t,n)},E=e=>yo(m,e)>-1,T=e=>{if(""===e)D(n);else if(p){const t=p(e);D(t)}else{const t=n.filter((t=>N(t).toLowerCase().includes(e.trim().toLowerCase())));D(t)}},W=()=>R&&R.current?R.current.getBoundingClientRect().height:0,q=e=>{if(O&&O.current.contains(e.target))switch(e.code){case"ArrowDown":if(A.current<z.current.length-1){const e=A.current+1;j.current[e].focus(),P(e)}break;case"ArrowUp":if(A.current>0){const e=A.current-1;j.current[e].focus(),P(A.current-1)}break;case"Escape":f&&f()}},U=(e,t)=>{e.preventDefault(),a&&a(t,(e=>i?i(e):e)(t))},Q=e=>{const t=e.target.value;x(t),C&&C()},G=()=>{y&&y()},X=n=>{const i=r?r(n):n.toString();return e(Zd,{"data-testid":"truncate-middle-container",children:[t(Fd,{children:i}),e(Od,{children:[" ",i]})]})},K=()=>{if(!y||y&&"success"===b)return M.map(((n,r)=>t(Md,{checked:E(n)&&!g,children:e(Sd,{onClick:e=>{U(e,n)},ref:e=>j.current[r]=e,"data-testid":"list-item",type:"button",tabIndex:u?0:-1,multiSelect:g,children:[g&&t(Rd,{checked:E(n),displaySize:"small"}),w?w(n,{selected:E(n)}):t(kd,{truncateType:L,children:"middle"===L&&I(n)?X(n):N(n)})]})},((e,t)=>`item_${t}__${i?i(e):e}`)(n,r))))},Y=()=>{if(g&&M.length>0&&!$&&"success"===b)return t(jd,{children:t(Bd,{onClick:v,children:0===m.length?"Select all":"Unselect all"})},"selectAll")},J=()=>{if($&&0===M.length)return e(Ad,{"data-testid":"list-no-results",children:[t(Pd,{"data-testid":"no-result-icon",children:t(xo,{})}),t(zd,{children:"No results found."})]},"noResults")},ee=()=>{if(y&&"loading"===b)return e(Ad,{"data-testid":"list-loading",children:[t(wd,{$buttonStyle:"secondary",size:24}),t(zd,{children:"Loading..."})]},"loading")},te=()=>{if(y&&"fail"===b)return e(Ad,{"data-testid":"list-fail",children:[t(Pd,{"data-testid":"load-error-icon",children:t(xo,{})}),t(zd,{children:"Failed to load."}),t(Bd,{onClick:G,children:"Try again."})]},"noResults")};return t($d,{style:F,"data-testid":u?"dropdown-container":"dropdown-container-hidden",ref:O,children:(()=>{if(u)return e(xd,{ref:R,"data-testid":"dropdown-list",width:d,role:"list",...H,children:[(c||p)&&"success"===b?t(Ed,{ref:B,onChange:Q,value:$,placeholder:h,"data-testid":"search-input","aria-label":"search-input",tabIndex:u?0:-1}):null,Y(),J(),ee(),te(),K()]})})()})},Wd="all 300ms cubic-bezier(0.21, 0.79, 0.53, 1)",qd=C.div`
     position: relative;
     min-height: 3rem;
     height: 3rem;
@@ -695,6 +695,18 @@ import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import*as r from
                     border: 1px solid ${Pt.Neutral[5](e)};
                     box-shadow: none;
                 }
+            `:e.$readOnly?p`
+                border: none;
+                background: transparent !important;
+
+                ${Ud} {
+                    padding-left: 0rem;
+                }
+
+                :focus-within {
+                    border: none;
+                    box-shadow: none;
+                }
             `:e.error?p`
                 border: 1px solid ${Pt.Validation.Red.Border(e)};