@kvdbil/components 8.6.2 → 8.6.3

package/cjs/components/Select/index.js

@@ -1,7 +1,7 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("react-select"),o=require("styled-components"),t=require("../../shared/constants.js"),a=require("../../theme.js"),l=require("../FieldLabel.js");function i(y){return y&&typeof y=="object"&&"default"in y?y:{default:y}}require("../../typography/BodyText/index.js"),require("../../shared/media-queries.js");var d=i(e),s=i(r),n=i(o);const u=n.default.div`
-  font-family: ${({theme:y})=>y.typography.fontBaseFamily};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("react-select"),o=require("styled-components"),t=require("../../shared/constants.js"),a=require("../../theme.js"),l=require("../FieldLabel.js");function d(x){return x&&typeof x=="object"&&"default"in x?x:{default:x}}require("../../typography/BodyText/index.js"),require("../../shared/media-queries.js");var i=d(e),s=d(r),n=d(o);const u=n.default.div`
+  font-family: ${({theme:x})=>x.typography.fontBaseFamily};
   position: relative;
-`,c=y=>y&&{paddingLeft:"2.5rem"},f=y=>y&&{border:`1px solid ${a.default.colors.gray.light1}`,color:a.default.colors.gray.dark1,fill:a.default.colors.gray.light1},m=n.default.div`
+`,c=x=>x&&{paddingLeft:"2.5rem"},f=x=>x&&{border:`1px solid ${a.default.colors.gray.light1}`,color:a.default.colors.gray.dark1,fill:a.default.colors.gray.light1},m=x=>x&&{border:`2px solid ${a.default.colors.error.dark}`},p=n.default.div`
   position: absolute;
   z-index: 1;
   top: 0.5rem;
@@ -10,26 +10,25 @@
   fill: ${a.default.colors.gray.dark5};
   transition: ${t.DEFAULT_TRANSITION_MS};
 
-  ${y=>y.isDisabled&&`
+  ${x=>x.isDisabled&&`
     fill: ${a.default.colors.gray.light1};
 `}
 
-  ${y=>y.isFocused&&`
-    fill: ${y.theme.colors.text.dark};
+  ${x=>x.isFocused&&`
+    fill: ${x.theme.colors.text.dark};
 `}
-`,p=n.default.span`
+`,h=n.default.span`
   display: block;
-  font-family: ${({theme:y})=>y.typography.fontBaseFamily};
+  font-family: ${({theme:x})=>x.typography.fontBaseFamily};
   font-size: 0.81rem;
   margin-top: 0.25rem;
-  margin-left: 0.85rem;
-  color: ${({hasError:y})=>y?a.default.colors.error.main:a.default.colors.text.disabled};
-`,h=n.default(y=>d.default.createElement("svg",{...y},d.default.createElement("symbol",{id:"icon-arrow",viewBox:"0 0 19 19"},d.default.createElement("path",{d:"M2.03039 7.95496L9.80856 15.7331C9.90619 15.8308 10.0645 15.8308 10.1621 15.7331L17.9403 7.95496L19.0009 9.01562L11.2228 16.7938C10.5394 17.4772 9.43132 17.4772 8.7479 16.7938L0.969727 9.01562L2.03039 7.95496Z"})),d.default.createElement("use",{xlinkHref:"#icon-arrow"})))`
+  color: ${({hasError:x})=>x?a.default.colors.error.dark:a.default.colors.text.disabled};
+`,g=n.default(x=>i.default.createElement("svg",{...x},i.default.createElement("symbol",{id:"icon-arrow",viewBox:"0 0 19 19"},i.default.createElement("path",{d:"M2.03039 7.95496L9.80856 15.7331C9.90619 15.8308 10.0645 15.8308 10.1621 15.7331L17.9403 7.95496L19.0009 9.01562L11.2228 16.7938C10.5394 17.4772 9.43132 17.4772 8.7479 16.7938L0.969727 9.01562L2.03039 7.95496Z"})),i.default.createElement("use",{xlinkHref:"#icon-arrow"})))`
   width: 0.8rem;
   height: 0.8rem;
   margin: 0 0.5rem;
-  ${y=>y.$isFocused&&`color: ${y.$theme.colors.text.dark}`}
-  ${y=>y.$isDisabled&&`color: ${y.$theme.colors.gray.dark1}`}
+  ${x=>x.$isFocused&&`color: ${x.$theme.colors.text.dark}`}
+  ${x=>x.$isDisabled&&`color: ${x.$theme.colors.gray.dark1}`}
 
 
   path {
@@ -39,6 +38,6 @@
 
   transition: transform ${t.DEFAULT_TRANSITION_MS};
 
-  transform: ${y=>y.$isMenuOpen?"rotate(-180deg)":"rotate(0deg)"};
+  transform: ${x=>x.$isMenuOpen?"rotate(-180deg)":"rotate(0deg)"};
   transform-origin: 50% 60%;
-`,g=({selectProps:{menuIsOpen:y=!1},isFocused:D=!1,isDisabled:I})=>d.default.createElement(h,{$isDisabled:I,$isFocused:D,$isMenuOpen:y,$theme:a.default}),b=({className:y,color:D="primary",forwardRef:I,hasError:L=!1,height:v,helperText:C,isDisabled:S=!1,onBlur:M=()=>null,onFocus:N=()=>null,onInputChange:O=()=>null,placeholder:_="",name:B,...$})=>{var q;const[k,T]=e.useState(!1),[R,z]=e.useState(""),E=({isSelected:x,isFocused:F,isDisabled:w})=>x?a.default.colors[D].main:w?a.default.colors.background.light:F?a.default.colors.background.gray:a.default.colors.background.light,A=((x,F)=>F?a.default.colors.error.main:x?a.default.colors.text.dark:a.default.colors.gray.light1)(k,L);return d.default.createElement(u,{className:y},$.label&&d.default.createElement(l.Label,{htmlFor:B,height:v,isFocused:k,hasValue:Boolean($.value||R),disabled:S,theme:a.default,hasError:L},$.label),$.prefix&&d.default.createElement(m,{isDisabled:S,isFocused:k},$.prefix),d.default.createElement(s.default,{...$,inputId:B,name:B,ref:I,isDisabled:S,onInputChange:(x,F)=>{O(x,F),z(x)},placeholder:_,onFocus:x=>{T(!0),N(x)},onBlur:x=>{T(!1),M(x)},styles:{control:x=>({...x,borderRadius:0,color:a.default.colors.text.dark,fontFamily:a.default.typography.fontBaseFamily,fontSize:"1rem",fontWeight:400,cursor:"pointer",padding:"0.7rem 0.75rem",backgroundColor:a.default.colors.background.light,borderColor:A,boxShadow:"none",minHeight:"3rem","&:hover":{borderColor:"none"},...f(S),...c(Boolean($.prefix))}),placeholder:x=>({...x,display:k?"static":"none"}),singleValue:x=>({...x,maxWidth:"calc(100% - 3.3rem)",width:"calc(100% - 3.3rem)"}),menuList:x=>({...x,padding:"8px 0"}),menu:x=>({...x,borderRadius:0,boxShadow:a.default.elevations.elevation2,zIndex:2,padding:"0"}),option:(x,{isSelected:F,isFocused:w,isDisabled:j})=>({...x,padding:"1rem",cursor:j?"not-allowed":"pointer","&:hover":{background:E({isSelected:F,isFocused:!0,isDisabled:j})},background:E({isSelected:F,isFocused:w}),...c(Boolean($.prefix))}),valueContainer:x=>({...x,position:"static",padding:v?v-1+"rem 0 ":0,height:v?"auto":"21px"}),clearIndicator:x=>({...x,paddingTop:0,paddingBottom:0})},components:{IndicatorSeparator:()=>null,DropdownIndicator:g,...(q=$.components)!=null?q:{}}}),C&&d.default.createElement(p,{hasError:L},C))};exports.Select=b,exports.default=b;
+`,b=({selectProps:{menuIsOpen:x=!1},isFocused:L=!1,isDisabled:B})=>i.default.createElement(g,{$isDisabled:B,$isFocused:L,$isMenuOpen:x,$theme:a.default}),y=({className:x,color:L="primary",forwardRef:B,hasError:S=!1,height:D,helperText:q,isDisabled:E=!1,onBlur:N=()=>null,onFocus:O=()=>null,onInputChange:_=()=>null,placeholder:R="",name:w,...F})=>{var T;const[I,j]=e.useState(!1),[z,A]=e.useState(""),v=({isSelected:$,isFocused:k,isDisabled:C})=>$?a.default.colors[L].main:C?a.default.colors.background.light:k?a.default.colors.background.gray:a.default.colors.background.light,H=(($,k)=>k?a.default.colors.error.main:$?a.default.colors.text.dark:a.default.colors.gray.light1)(I,S);return i.default.createElement(u,{className:x},F.label&&i.default.createElement(l.Label,{htmlFor:w,height:D,isFocused:I,hasValue:Boolean(F.value||z),disabled:E,theme:a.default,hasError:S},F.label),F.prefix&&i.default.createElement(p,{isDisabled:E,isFocused:I},F.prefix),i.default.createElement(s.default,{...F,inputId:w,name:w,ref:B,isDisabled:E,onInputChange:($,k)=>{_($,k),A($)},placeholder:R,onFocus:$=>{j(!0),O($)},onBlur:$=>{j(!1),N($)},styles:{control:$=>({...$,borderRadius:0,color:a.default.colors.text.dark,fontFamily:a.default.typography.fontBaseFamily,fontSize:"1rem",fontWeight:400,cursor:"pointer",padding:"0.7rem 0.75rem",backgroundColor:a.default.colors.background.light,borderColor:H,boxShadow:"none",minHeight:"3rem","&:hover":{borderColor:"none"},...f(E),...m(S),...c(Boolean(F.prefix))}),placeholder:$=>({...$,display:I?"static":"none"}),singleValue:$=>({...$,maxWidth:"calc(100% - 3.3rem)",width:"calc(100% - 3.3rem)"}),menuList:$=>({...$,padding:"8px 0"}),menu:$=>({...$,borderRadius:0,boxShadow:a.default.elevations.elevation2,zIndex:2,padding:"0"}),option:($,{isSelected:k,isFocused:C,isDisabled:M})=>({...$,padding:"1rem",cursor:M?"not-allowed":"pointer","&:hover":{background:v({isSelected:k,isFocused:!0,isDisabled:M})},background:v({isSelected:k,isFocused:C}),...c(Boolean(F.prefix))}),valueContainer:$=>({...$,position:"static",padding:D?D-1+"rem 0 ":0,height:D?"auto":"21px"}),clearIndicator:$=>({...$,paddingTop:0,paddingBottom:0})},components:{IndicatorSeparator:()=>null,DropdownIndicator:b,...(T=F.components)!=null?T:{}}}),q&&i.default.createElement(h,{hasError:S},q))};exports.Select=y,exports.default=y;

package/esm/components/Select/index.js

@@ -1,14 +1,14 @@
-import t,{useState as x}from"react";import T from"react-select";import d from"styled-components";import{DEFAULT_TRANSITION_MS as F}from"../../shared/constants.js";import r from"../../theme.js";import{Label as _}from"../FieldLabel.js";import"../../typography/BodyText/index.js";import"../../shared/media-queries.js";const z=d.div`
+import t,{useState as x}from"react";import T from"react-select";import m from"styled-components";import{DEFAULT_TRANSITION_MS as k}from"../../shared/constants.js";import r from"../../theme.js";import{Label as _}from"../FieldLabel.js";import"../../typography/BodyText/index.js";import"../../shared/media-queries.js";const z=m.div`
   font-family: ${({theme:e})=>e.typography.fontBaseFamily};
   position: relative;
-`,k=e=>e&&{paddingLeft:"2.5rem"},A=e=>e&&{border:`1px solid ${r.colors.gray.light1}`,color:r.colors.gray.dark1,fill:r.colors.gray.light1},M=d.div`
+`,F=e=>e&&{paddingLeft:"2.5rem"},A=e=>e&&{border:`1px solid ${r.colors.gray.light1}`,color:r.colors.gray.dark1,fill:r.colors.gray.light1},M=e=>e&&{border:`2px solid ${r.colors.error.dark}`},O=m.div`
   position: absolute;
   z-index: 1;
   top: 0.5rem;
   margin: 0.35rem 0.75rem;
 
   fill: ${r.colors.gray.dark5};
-  transition: ${F};
+  transition: ${k};
 
   ${e=>e.isDisabled&&`
     fill: ${r.colors.gray.light1};
@@ -17,14 +17,13 @@ import t,{useState as x}from"react";import T from"react-select";import d from"st
   ${e=>e.isFocused&&`
     fill: ${e.theme.colors.text.dark};
 `}
-`,O=d.span`
+`,H=m.span`
   display: block;
   font-family: ${({theme:e})=>e.typography.fontBaseFamily};
   font-size: 0.81rem;
   margin-top: 0.25rem;
-  margin-left: 0.85rem;
-  color: ${({hasError:e})=>e?r.colors.error.main:r.colors.text.disabled};
-`,H=e=>t.createElement("svg",{...e},t.createElement("symbol",{id:"icon-arrow",viewBox:"0 0 19 19"},t.createElement("path",{d:"M2.03039 7.95496L9.80856 15.7331C9.90619 15.8308 10.0645 15.8308 10.1621 15.7331L17.9403 7.95496L19.0009 9.01562L11.2228 16.7938C10.5394 17.4772 9.43132 17.4772 8.7479 16.7938L0.969727 9.01562L2.03039 7.95496Z"})),t.createElement("use",{xlinkHref:"#icon-arrow"})),V=d(H)`
+  color: ${({hasError:e})=>e?r.colors.error.dark:r.colors.text.disabled};
+`,V=e=>t.createElement("svg",{...e},t.createElement("symbol",{id:"icon-arrow",viewBox:"0 0 19 19"},t.createElement("path",{d:"M2.03039 7.95496L9.80856 15.7331C9.90619 15.8308 10.0645 15.8308 10.1621 15.7331L17.9403 7.95496L19.0009 9.01562L11.2228 16.7938C10.5394 17.4772 9.43132 17.4772 8.7479 16.7938L0.969727 9.01562L2.03039 7.95496Z"})),t.createElement("use",{xlinkHref:"#icon-arrow"})),N=m(V)`
   width: 0.8rem;
   height: 0.8rem;
   margin: 0 0.5rem;
@@ -37,8 +36,8 @@ import t,{useState as x}from"react";import T from"react-select";import d from"st
     stroke: currentColor;
   }
 
-  transition: transform ${F};
+  transition: transform ${k};
 
   transform: ${e=>e.$isMenuOpen?"rotate(-180deg)":"rotate(0deg)"};
   transform-origin: 50% 60%;
-`,N=(e,l)=>l?r.colors.error.main:e?r.colors.text.dark:r.colors.gray.light1,P=({selectProps:{menuIsOpen:e=!1},isFocused:l=!1,isDisabled:m})=>t.createElement(V,{$isDisabled:m,$isFocused:l,$isMenuOpen:e,$theme:r}),C=({className:e,color:l="primary",forwardRef:m,hasError:u=!1,height:i,helperText:p,isDisabled:s=!1,onBlur:v=()=>null,onFocus:B=()=>null,onInputChange:w=()=>null,placeholder:I="",name:g,...n})=>{var h;const[c,y]=x(!1),[L,S]=x(""),E=(o,a)=>{w(o,a),S(o)},b=({isSelected:o,isFocused:a,isDisabled:f})=>o?r.colors[l].main:f?r.colors.background.light:a?r.colors.background.gray:r.colors.background.light,j=o=>{y(!0),B(o)},D=o=>{y(!1),v(o)},R=N(c,u);return t.createElement(z,{className:e},n.label&&t.createElement(_,{htmlFor:g,height:i,isFocused:c,hasValue:Boolean(n.value||L),disabled:s,theme:r,hasError:u},n.label),n.prefix&&t.createElement(M,{isDisabled:s,isFocused:c},n.prefix),t.createElement(T,{...n,inputId:g,name:g,ref:m,isDisabled:s,onInputChange:E,placeholder:I,onFocus:j,onBlur:D,styles:{control:o=>({...o,borderRadius:0,color:r.colors.text.dark,fontFamily:r.typography.fontBaseFamily,fontSize:"1rem",fontWeight:400,cursor:"pointer",padding:"0.7rem 0.75rem",backgroundColor:r.colors.background.light,borderColor:R,boxShadow:"none",minHeight:"3rem","&:hover":{borderColor:"none"},...A(s),...k(Boolean(n.prefix))}),placeholder:o=>({...o,display:c?"static":"none"}),singleValue:o=>({...o,maxWidth:"calc(100% - 3.3rem)",width:"calc(100% - 3.3rem)"}),menuList:o=>({...o,padding:"8px 0"}),menu:o=>({...o,borderRadius:0,boxShadow:r.elevations.elevation2,zIndex:2,padding:"0"}),option:(o,{isSelected:a,isFocused:f,isDisabled:$})=>({...o,padding:"1rem",cursor:$?"not-allowed":"pointer","&:hover":{background:b({isSelected:a,isFocused:!0,isDisabled:$})},background:b({isSelected:a,isFocused:f}),...k(Boolean(n.prefix))}),valueContainer:o=>({...o,position:"static",padding:i?`${i-1}rem 0 `:0,height:i?"auto":"21px"}),clearIndicator:o=>({...o,paddingTop:0,paddingBottom:0})},components:{IndicatorSeparator:()=>null,DropdownIndicator:P,...(h=n.components)!=null?h:{}}}),p&&t.createElement(O,{hasError:u},p))};export{C as Select,C as default};
+`,P=(e,a)=>a?r.colors.error.main:e?r.colors.text.dark:r.colors.gray.light1,W=({selectProps:{menuIsOpen:e=!1},isFocused:a=!1,isDisabled:u})=>t.createElement(N,{$isDisabled:u,$isFocused:a,$isMenuOpen:e,$theme:r}),C=({className:e,color:a="primary",forwardRef:u,hasError:i=!1,height:s,helperText:p,isDisabled:c=!1,onBlur:v=()=>null,onFocus:B=()=>null,onInputChange:w=()=>null,placeholder:I="",name:g,...n})=>{var h;const[d,y]=x(!1),[L,S]=x(""),E=(o,l)=>{w(o,l),S(o)},b=({isSelected:o,isFocused:l,isDisabled:f})=>o?r.colors[a].main:f?r.colors.background.light:l?r.colors.background.gray:r.colors.background.light,j=o=>{y(!0),B(o)},D=o=>{y(!1),v(o)},R=P(d,i);return t.createElement(z,{className:e},n.label&&t.createElement(_,{htmlFor:g,height:s,isFocused:d,hasValue:Boolean(n.value||L),disabled:c,theme:r,hasError:i},n.label),n.prefix&&t.createElement(O,{isDisabled:c,isFocused:d},n.prefix),t.createElement(T,{...n,inputId:g,name:g,ref:u,isDisabled:c,onInputChange:E,placeholder:I,onFocus:j,onBlur:D,styles:{control:o=>({...o,borderRadius:0,color:r.colors.text.dark,fontFamily:r.typography.fontBaseFamily,fontSize:"1rem",fontWeight:400,cursor:"pointer",padding:"0.7rem 0.75rem",backgroundColor:r.colors.background.light,borderColor:R,boxShadow:"none",minHeight:"3rem","&:hover":{borderColor:"none"},...A(c),...M(i),...F(Boolean(n.prefix))}),placeholder:o=>({...o,display:d?"static":"none"}),singleValue:o=>({...o,maxWidth:"calc(100% - 3.3rem)",width:"calc(100% - 3.3rem)"}),menuList:o=>({...o,padding:"8px 0"}),menu:o=>({...o,borderRadius:0,boxShadow:r.elevations.elevation2,zIndex:2,padding:"0"}),option:(o,{isSelected:l,isFocused:f,isDisabled:$})=>({...o,padding:"1rem",cursor:$?"not-allowed":"pointer","&:hover":{background:b({isSelected:l,isFocused:!0,isDisabled:$})},background:b({isSelected:l,isFocused:f}),...F(Boolean(n.prefix))}),valueContainer:o=>({...o,position:"static",padding:s?`${s-1}rem 0 `:0,height:s?"auto":"21px"}),clearIndicator:o=>({...o,paddingTop:0,paddingBottom:0})},components:{IndicatorSeparator:()=>null,DropdownIndicator:W,...(h=n.components)!=null?h:{}}}),p&&t.createElement(H,{hasError:i},p))};export{C as Select,C as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kvdbil/components",
-  "version": "8.6.2",
+  "version": "8.6.3",
   "sideEffects": false,
   "main": "cjs/index.js",
   "module": "esm/index.js",