@kvdbil/components 8.6.3 → 8.6.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
"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
|
|
2
|
-
font-family: ${({theme
|
|
1
|
+
"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("../../typography/BodyText/index.js"),d=require("../FieldLabel.js");function i($){return $&&typeof $=="object"&&"default"in $?$:{default:$}}require("../../shared/media-queries.js");var s=i(e),n=i(r),u=i(o);const c=u.default.div`
|
|
2
|
+
font-family: ${({theme:$})=>$.typography.fontBaseFamily};
|
|
3
3
|
position: relative;
|
|
4
|
-
`,
|
|
4
|
+
`,f=$=>$&&{paddingLeft:"2.5rem"},m=$=>$&&{border:`1px solid ${a.default.colors.gray.light1}`,color:a.default.colors.gray.dark1,fill:a.default.colors.gray.light1},p=$=>$&&{border:`2px solid ${a.default.colors.error.dark}`},h=u.default.div`
|
|
5
5
|
position: absolute;
|
|
6
6
|
z-index: 1;
|
|
7
7
|
top: 0.5rem;
|
|
@@ -10,25 +10,24 @@
|
|
|
10
10
|
fill: ${a.default.colors.gray.dark5};
|
|
11
11
|
transition: ${t.DEFAULT_TRANSITION_MS};
|
|
12
12
|
|
|
13
|
-
${
|
|
13
|
+
${$=>$.isDisabled&&`
|
|
14
14
|
fill: ${a.default.colors.gray.light1};
|
|
15
15
|
`}
|
|
16
16
|
|
|
17
|
-
${
|
|
18
|
-
fill: ${
|
|
17
|
+
${$=>$.isFocused&&`
|
|
18
|
+
fill: ${$.theme.colors.text.dark};
|
|
19
19
|
`}
|
|
20
|
-
`,
|
|
20
|
+
`,g=u.default.span`
|
|
21
|
+
${l.CaptionStyle}
|
|
21
22
|
display: block;
|
|
22
|
-
font-family: ${({theme:x})=>x.typography.fontBaseFamily};
|
|
23
|
-
font-size: 0.81rem;
|
|
24
23
|
margin-top: 0.25rem;
|
|
25
|
-
color: ${({hasError
|
|
26
|
-
`,
|
|
24
|
+
color: ${({hasError:$})=>$?a.default.colors.error.dark:a.default.colors.text.disabled};
|
|
25
|
+
`,b=u.default($=>s.default.createElement("svg",{...$},s.default.createElement("symbol",{id:"icon-arrow",viewBox:"0 0 19 19"},s.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"})),s.default.createElement("use",{xlinkHref:"#icon-arrow"})))`
|
|
27
26
|
width: 0.8rem;
|
|
28
27
|
height: 0.8rem;
|
|
29
28
|
margin: 0 0.5rem;
|
|
30
|
-
${
|
|
31
|
-
${
|
|
29
|
+
${$=>$.$isFocused&&`color: ${$.$theme.colors.text.dark}`}
|
|
30
|
+
${$=>$.$isDisabled&&`color: ${$.$theme.colors.gray.dark1}`}
|
|
32
31
|
|
|
33
32
|
|
|
34
33
|
path {
|
|
@@ -38,6 +37,6 @@
|
|
|
38
37
|
|
|
39
38
|
transition: transform ${t.DEFAULT_TRANSITION_MS};
|
|
40
39
|
|
|
41
|
-
transform: ${
|
|
40
|
+
transform: ${$=>$.$isMenuOpen?"rotate(-180deg)":"rotate(0deg)"};
|
|
42
41
|
transform-origin: 50% 60%;
|
|
43
|
-
`,
|
|
42
|
+
`,y=({selectProps:{menuIsOpen:$=!1},isFocused:C=!1,isDisabled:w})=>s.default.createElement(b,{$isDisabled:w,$isFocused:C,$isMenuOpen:$,$theme:a.default}),x=({className:$,color:C="primary",forwardRef:w,hasError:D=!1,height:E,helperText:T,isDisabled:I=!1,onBlur:O=()=>null,onFocus:_=()=>null,onInputChange:R=()=>null,placeholder:A="",name:B,...F})=>{var S;const[L,j]=e.useState(!1),[z,H]=e.useState(""),M=({isSelected:k,isFocused:v,isDisabled:q})=>k?a.default.colors[C].main:q?a.default.colors.background.light:v?a.default.colors.background.gray:a.default.colors.background.light,P=((k,v)=>v?a.default.colors.error.main:k?a.default.colors.text.dark:a.default.colors.gray.light1)(L,D);return s.default.createElement(c,{className:$},F.label&&s.default.createElement(d.Label,{htmlFor:B,height:E,isFocused:L,hasValue:Boolean(F.value||z),disabled:I,theme:a.default,hasError:D},F.label),F.prefix&&s.default.createElement(h,{isDisabled:I,isFocused:L},F.prefix),s.default.createElement(n.default,{...F,inputId:B,name:B,ref:w,isDisabled:I,onInputChange:(k,v)=>{R(k,v),H(k)},placeholder:A,onFocus:k=>{j(!0),_(k)},onBlur:k=>{j(!1),O(k)},styles:{control:k=>({...k,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:P,boxShadow:"none",minHeight:"3rem","&:hover":{borderColor:"none"},...m(I),...p(D),...f(Boolean(F.prefix))}),placeholder:k=>({...k,display:L?"static":"none"}),singleValue:k=>({...k,maxWidth:"calc(100% - 3.3rem)",width:"calc(100% - 3.3rem)"}),menuList:k=>({...k,padding:"8px 0"}),menu:k=>({...k,borderRadius:0,boxShadow:a.default.elevations.elevation2,zIndex:2,padding:"0"}),option:(k,{isSelected:v,isFocused:q,isDisabled:N})=>({...k,padding:"1rem",cursor:N?"not-allowed":"pointer","&:hover":{background:M({isSelected:v,isFocused:!0,isDisabled:N})},background:M({isSelected:v,isFocused:q}),...f(Boolean(F.prefix))}),valueContainer:k=>({...k,position:"static",padding:E?E-1+"rem 0 ":0,height:E?"auto":"21px"}),clearIndicator:k=>({...k,paddingTop:0,paddingBottom:0})},components:{IndicatorSeparator:()=>null,DropdownIndicator:y,...(S=F.components)!=null?S:{}}}),T&&s.default.createElement(g,{hasError:D},T))};exports.Select=x,exports.default=x;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
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{
|
|
1
|
+
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{CaptionStyle as _}from"../../typography/BodyText/index.js";import{Label as A}from"../FieldLabel.js";import"../../shared/media-queries.js";const M=m.div`
|
|
2
2
|
font-family: ${({theme:e})=>e.typography.fontBaseFamily};
|
|
3
3
|
position: relative;
|
|
4
|
-
`,F=e=>e&&{paddingLeft:"2.5rem"},
|
|
4
|
+
`,F=e=>e&&{paddingLeft:"2.5rem"},O=e=>e&&{border:`1px solid ${r.colors.gray.light1}`,color:r.colors.gray.dark1,fill:r.colors.gray.light1},z=e=>e&&{border:`2px solid ${r.colors.error.dark}`},H=m.div`
|
|
5
5
|
position: absolute;
|
|
6
6
|
z-index: 1;
|
|
7
7
|
top: 0.5rem;
|
|
@@ -17,13 +17,12 @@ import t,{useState as x}from"react";import T from"react-select";import m from"st
|
|
|
17
17
|
${e=>e.isFocused&&`
|
|
18
18
|
fill: ${e.theme.colors.text.dark};
|
|
19
19
|
`}
|
|
20
|
-
`,
|
|
20
|
+
`,V=m.span`
|
|
21
|
+
${_}
|
|
21
22
|
display: block;
|
|
22
|
-
font-family: ${({theme:e})=>e.typography.fontBaseFamily};
|
|
23
|
-
font-size: 0.81rem;
|
|
24
23
|
margin-top: 0.25rem;
|
|
25
24
|
color: ${({hasError:e})=>e?r.colors.error.dark:r.colors.text.disabled};
|
|
26
|
-
`,
|
|
25
|
+
`,N=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"})),P=m(N)`
|
|
27
26
|
width: 0.8rem;
|
|
28
27
|
height: 0.8rem;
|
|
29
28
|
margin: 0 0.5rem;
|
|
@@ -40,4 +39,4 @@ import t,{useState as x}from"react";import T from"react-select";import m from"st
|
|
|
40
39
|
|
|
41
40
|
transform: ${e=>e.$isMenuOpen?"rotate(-180deg)":"rotate(0deg)"};
|
|
42
41
|
transform-origin: 50% 60%;
|
|
43
|
-
`,
|
|
42
|
+
`,W=(e,a)=>a?r.colors.error.main:e?r.colors.text.dark:r.colors.gray.light1,q=({selectProps:{menuIsOpen:e=!1},isFocused:a=!1,isDisabled:u})=>t.createElement(P,{$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:S=()=>null,onInputChange:w=()=>null,placeholder:B="",name:g,...n})=>{var h;const[d,y]=x(!1),[I,L]=x(""),E=(o,l)=>{w(o,l),L(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),S(o)},D=o=>{y(!1),v(o)},R=W(d,i);return t.createElement(M,{className:e},n.label&&t.createElement(A,{htmlFor:g,height:s,isFocused:d,hasValue:Boolean(n.value||I),disabled:c,theme:r,hasError:i},n.label),n.prefix&&t.createElement(H,{isDisabled:c,isFocused:d},n.prefix),t.createElement(T,{...n,inputId:g,name:g,ref:u,isDisabled:c,onInputChange:E,placeholder:B,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"},...O(c),...z(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:q,...(h=n.components)!=null?h:{}}}),p&&t.createElement(V,{hasError:i},p))};export{C as Select,C as default};
|