@lifesg/react-design-system 1.0.0-alpha.8 → 1.0.0-alpha.9

package/input-group/index.js

@@ -29,7 +29,7 @@ import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import*as r from
     border: 1px solid ${zt.Neutral[5]};
     border-radius: 4px;
     display: block;
-    padding: 0.2rem 1rem 0.3rem 1rem; // Somehow the input text appears lower
+    padding: 0.2rem 1rem 0.3rem; // Somehow the input text appears lower
     height: 3rem;
     width: 100%;
     background: ${zt.Neutral[8]};
@@ -61,7 +61,7 @@ import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import*as r from
 
     ${e=>e.readOnly?C`
                 border: none;
-                padding-left: 0rem;
+                padding: 0.2rem 0 0.3rem;
                 background: transparent !important;
 
                 :focus,
@@ -88,7 +88,7 @@ import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import*as r from
                     box-shadow: inset 0 0 4px 1px rgba(221, 102, 102, 0.8);
                 }
             `:void 0}
-`,rn=i.forwardRef((({value:e,spacing:n,type:r,error:i,disabled:o,onChange:a,...s},l)=>{const d=()=>"tel"===r&&n,u=e=>{const t=e.target,n=t.value,r=t.value.replace(/\s/g,"");t.value=r,a(e),t.value=n},c=e?(e=>e?d()?qt.transformWithSpaces(e,n):e:"")(e):e;return t(nn,{"data-testid":"input",ref:l,disabled:o,value:c,error:i,onChange:a?e=>{d()?u(e):a(e)}:void 0,type:r,readOnly:"readonly"===r,...s})}));var on;!function(e){e.D1=h.h1`
+`,rn=i.forwardRef((({value:e,spacing:n,type:r,error:i,disabled:o,onChange:a,...s},l)=>{const d=()=>"tel"===r&&n,u=e=>{const t=e.target,n=t.value,r=t.value.replace(/\s/g,"");t.value=r,a(e),t.value=n},c=e?(e=>e?d()?qt.transformWithSpaces(e,n):e:"")(e):e;return t(nn,{"data-testid":"input",ref:l,disabled:o,value:c,error:i,onChange:a?e=>{d()?u(e):a(e)}:void 0,type:r,...s})}));var on;!function(e){e.D1=h.h1`
         ${e=>C`
                 ${en("D1",e.weight,e.paragraph)}
                 color: ${zt.Neutral[1]};
@@ -244,11 +244,7 @@ import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import*as r from
         box-shadow: none;
     }
 
-    padding: 0.2rem 1rem 0.3rem; // Input text appears lower hence the higher lower padding
-
-    ${e=>e.$readOnly?C`
-                padding-left: 0;
-            `:"right"===e.$position?C`
+    ${e=>"right"===e.$position?C`
                     :not(:only-child) {
                         padding-right: 0;
                     }
@@ -784,5 +780,5 @@ import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import*as r from
     margin: 1rem 1rem 1rem 0;
     width: 1px;
     background: ${zt.Neutral[5]};
-`,au=({addon:r,error:i,...l})=>{const{value:d,placeholder:u,options:c,enableSearch:h,searchFunction:C,searchPlaceholder:p,valueExtractor:f,listExtractor:g,displayValueExtractor:m,onSelectOption:v,onHideOptions:y,onShowOptions:b,"data-selector-testid":L}=r.attributes,[w,H]=a(d),[V,_]=a(!1),$=s(),x=s();o((()=>{H(d)}),[d]),o((()=>(document.addEventListener("mousedown",S),()=>{document.removeEventListener("mousedown",S)})),[]);const M=e=>{!e&&y&&y(),e&&b&&b()},S=e=>{if(!l.disabled){if($&&$.current.contains(e.target))return;_(!1),M(!1)}},k=e=>{e.preventDefault(),l.disabled||(_(!V),M(!V))},Z=(e,t)=>{H(e),_(!1),M(!1),x&&x.current.focus(),v&&v(e,t)};return t(Xd,{children:e(Kd,{ref:$,disabled:l.disabled,error:i&&!V,expanded:V,children:[e(Yd,{$expanded:V,children:[t(Jd,{ref:x,type:"button","data-testid":L||"addon-selector",onClick:k,children:e(n,{children:[e(nu,{children:[u&&!w&&t(iu,{children:u}),w&&t(ru,{"data-testid":"selector-label",children:m?m(w):f?f(w):w.toString()})]}),t(eu,{$expanded:V,children:t(tu,{type:"chevron-down"})})]})}),t(ou,{}),t(cn,{...l,"data-testid":l["data-testid"]||"input"})]}),c&&c.length>0?t(Id,{listItems:c,onSelectItem:Z,valueExtractor:f,listExtractor:g,visible:V,enableSearch:h,searchFunction:C,searchPlaceholder:p,"data-testid":"dropdown-list"}):null]})})},su=i.forwardRef((({addon:n,error:r,...i},o)=>{const a=()=>t(un,{disabled:i.disabled,$error:r,$readOnly:"readonly"===i.type,"data-testid":i["data-testid"],children:t(cn,{ref:o,...i,"data-testid":"input"})});if(!n)return a();{const{type:o="label",position:s="left"}=n;switch(o){case"list":{const e=n.attributes;return e.options&&e.options.length>0?t(au,{addon:n,error:r,...i}):a()}case"custom":{const o=n.attributes;return o.children?e(un,{$error:r,disabled:i.disabled,$readOnly:"readonly"===i.type,"data-testid":i["data-testid"],$position:s,children:[t(hn,{"data-testid":"addon",disabled:i.disabled,$readOnly:"readonly"===i.type,children:o.children}),t(cn,{...i,$position:s,$readOnly:"readonly"===i.type,"data-testid":"input"})]}):a()}default:{const o=n.attributes;return o.value?e(un,{disabled:i.disabled,$error:r,$readOnly:"readonly"===i.type,"data-testid":i["data-testid"],$position:s,children:[t(hn,{"data-testid":"addon",disabled:i.disabled,$readOnly:"readonly"===i.type,children:o.value}),t(cn,{...i,$position:s,$readOnly:"readonly"===i.type,"data-testid":"input"})]}):a()}}}}));export{su as InputGroup};
+`,au=({addon:r,error:i,...l})=>{const{value:d,placeholder:u,options:c,enableSearch:h,searchFunction:C,searchPlaceholder:p,valueExtractor:f,listExtractor:g,displayValueExtractor:m,onSelectOption:v,onHideOptions:y,onShowOptions:b,"data-selector-testid":L}=r.attributes,[w,H]=a(d),[V,_]=a(!1),$=s(),x=s();o((()=>{H(d)}),[d]),o((()=>(document.addEventListener("mousedown",S),()=>{document.removeEventListener("mousedown",S)})),[]);const M=e=>{!e&&y&&y(),e&&b&&b()},S=e=>{if(!l.disabled){if($&&$.current.contains(e.target))return;_(!1),M(!1)}},k=e=>{e.preventDefault(),l.disabled||(_(!V),M(!V))},Z=(e,t)=>{H(e),_(!1),M(!1),x&&x.current.focus(),v&&v(e,t)};return t(Xd,{children:e(Kd,{ref:$,disabled:l.disabled,error:i&&!V,expanded:V,children:[e(Yd,{$expanded:V,children:[t(Jd,{ref:x,type:"button","data-testid":L||"addon-selector",onClick:k,children:e(n,{children:[e(nu,{children:[u&&!w&&t(iu,{children:u}),w&&t(ru,{"data-testid":"selector-label",children:m?m(w):f?f(w):w.toString()})]}),t(eu,{$expanded:V,children:t(tu,{type:"chevron-down"})})]})}),t(ou,{}),t(cn,{...l,"data-testid":l["data-testid"]||"input"})]}),c&&c.length>0?t(Id,{listItems:c,onSelectItem:Z,valueExtractor:f,listExtractor:g,visible:V,enableSearch:h,searchFunction:C,searchPlaceholder:p,"data-testid":"dropdown-list"}):null]})})},su=i.forwardRef((({addon:n,error:r,...i},o)=>{const a=()=>t(un,{disabled:i.disabled,$error:r,$readOnly:i.readOnly,"data-testid":i["data-testid"],children:t(cn,{ref:o,...i,"data-testid":"input"})});if(!n)return a();{const{type:o="label",position:s="left"}=n;switch(o){case"list":{const e=n.attributes;return e.options&&e.options.length>0?t(au,{addon:n,error:r,...i}):a()}case"custom":{const o=n.attributes;return o.children?e(un,{$error:r,disabled:i.disabled,$readOnly:i.readOnly,"data-testid":i["data-testid"],$position:s,children:[t(hn,{"data-testid":"addon",disabled:i.disabled,$readOnly:i.readOnly,children:o.children}),t(cn,{...i,$position:s,"data-testid":"input"})]}):a()}default:{const o=n.attributes;return o.value?e(un,{disabled:i.disabled,$error:r,$readOnly:i.readOnly,"data-testid":i["data-testid"],$position:s,children:[t(hn,{"data-testid":"addon",disabled:i.disabled,$readOnly:i.readOnly,children:o.value}),t(cn,{...i,$position:s,"data-testid":"input"})]}):a()}}}}));export{su as InputGroup};
 //# sourceMappingURL=index.js.map