@kvdbil/components 14.2.2 → 14.2.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,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("styled-components"),t=require("../../shared/media-queries.js");function i(o){return o&&typeof o=="object"&&"default"in o?o:{default:o}}var s=i(e);const
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("styled-components"),t=require("../../shared/media-queries.js");function i(o){return o&&typeof o=="object"&&"default"in o?o:{default:o}}var s=i(e);const n=(o,l)=>l!=="gap"&&l!=="row-gap"||typeof o!="number"?o:`${o}rem`,a=i(r).default.div(({$direction:o,$justify:l,$align:$,$gap:c,$rowGap:f,$wrap:d,$basis:g,$grow:w,$shrink:m})=>r.css`
|
|
2
2
|
display: flex;
|
|
3
3
|
|
|
4
4
|
${o&&["column","column-reverse"].includes(String(o))&&r.css`
|
|
@@ -7,11 +7,13 @@
|
|
|
7
7
|
}
|
|
8
8
|
`}
|
|
9
9
|
|
|
10
|
-
${[[o,"flex-direction"],[l,"justify-content"],[
|
|
11
|
-
${
|
|
12
|
-
|
|
13
|
-
${
|
|
14
|
-
|
|
10
|
+
${[[o,"flex-direction"],[l,"justify-content"],[$,"align-items"],[c,"gap"],[f,"row-gap"],[f,"row-gap"],[d,"flex-wrap"],[g,"flex-basis"],[w,"flex-grow"],[m,"flex-shrink"]].map(([u,p])=>{if(typeof u=="string"||typeof u=="number")return r.css`
|
|
11
|
+
${p}: ${n(u,p)};
|
|
12
|
+
`;if(typeof u=="object"){const y=[],{initial:b,...h}=u;return b&&y.push(r.css`
|
|
13
|
+
${p}: ${n(b,p)};
|
|
14
|
+
`),Object.entries(h).forEach(([j,x])=>{y.push(r.css`
|
|
15
|
+
${t.mq(j)} {
|
|
16
|
+
${p}: ${n(x,p)};
|
|
15
17
|
}
|
|
16
|
-
`)
|
|
17
|
-
`);exports.default=({direction:o,justify:l,align:
|
|
18
|
+
`)}),y}return""})}
|
|
19
|
+
`);exports.default=({direction:o,justify:l,align:$,gap:c,rowGap:f,wrap:d,basis:g,grow:w,shrink:m,...u})=>s.default.createElement(a,{$direction:o!=null?o:"row",$justify:l!=null?l:"center",$align:$!=null?$:"center",$gap:c!=null?c:"1rem",$rowGap:f,$wrap:d,$basis:g,$grow:w,$shrink:m,...u});
|
|
@@ -1,7 +1,7 @@
|
|
|
1
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"),i=require("../FieldLabel.js");function d($){return $&&typeof $=="object"&&"default"in $?$:{default:$}}require("../../shared/media-queries.js");var n=d(e),s=d(r),u=d(o);const c=u.default.div`
|
|
2
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}`},g=u.default.div`
|
|
5
5
|
position: absolute;
|
|
6
6
|
z-index: 1;
|
|
7
7
|
top: 0.5rem;
|
|
@@ -36,4 +36,4 @@
|
|
|
36
36
|
transform: ${$=>$.$isMenuOpen?"rotate(-180deg)":"rotate(0deg)"};
|
|
37
37
|
|
|
38
38
|
transform-origin: 50% 60%;
|
|
39
|
-
`,
|
|
39
|
+
`,y=({selectProps:{menuIsOpen:$=!1},isFocused:B=!1,isDisabled:I})=>n.default.createElement(b,{$isDisabled:I,$isFocused:B,$isMenuOpen:$,$theme:a.default});function x({className:$,color:B="primary",forwardRef:I,hasError:v=!1,height:D,helperText:q,isDisabled:w=!1,onBlur:_=()=>null,onFocus:z=()=>null,onInputChange:A=()=>null,placeholder:H="",name:T,...S}){var j;const[L,E]=e.useState(!1),[W,P]=e.useState(""),O=({isSelected:k,isFocused:F,isDisabled:C})=>k?a.default.colors[B].main:C?a.default.colors.background.light:F?a.default.colors.background.gray:a.default.colors.background.light,M=((k,F)=>F?a.default.colors.error.main:k?a.default.colors.text.dark:a.default.colors.gray.light1)(L,v),N=Boolean(S.label)===!1;return n.default.createElement(c,{className:$},!N&&S.label&&n.default.createElement(i.Label,{htmlFor:T,height:D,isFocused:L,hasValue:Boolean(S.value||W),disabled:w,theme:a.default,hasError:v},S.label),S.prefix&&n.default.createElement(g,{isDisabled:w,isFocused:L},S.prefix),n.default.createElement(s.default,{...S,inputId:T,name:T,ref:I,isDisabled:w,onInputChange:(k,F)=>{A(k,F),P(k)},placeholder:H,onFocus:k=>{E(!0),z(k)},onBlur:k=>{E(!1),_(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.5rem",backgroundColor:a.default.colors.background.light,borderColor:M,boxShadow:"none",minHeight:"3rem","&:hover":{borderColor:"none"},...m(w),...p(v),...f(Boolean(S.prefix))}),input:k=>({...k,height:"auto",margin:0,padding:0}),placeholder:k=>{const F={...k,fontSize:"1rem",lineHeight:"1.5rem",whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden",margin:0};return N?{...F,color:a.default.colors.text.dark,fontWeight:600}:{...F,display:L?"static":"none"}},menuList:k=>({...k,padding:"0.5rem 0",paddingBottom:"5rem",marginTop:0,border:`1px solid ${M}`,borderTop:"none",display:"flex",flexDirection:"column",gap:"0.5rem"}),menu:k=>({...k,borderRadius:0,boxShadow:"none",zIndex:5,padding:"0",marginTop:"-0.1rem"}),option:(k,{isSelected:F,isFocused:C,isDisabled:R})=>({...k,padding:"0.5rem",lineHeight:"1.5rem",fontSize:"1rem",fontWeight:400,cursor:R?"not-allowed":"pointer","&:hover":{background:O({isSelected:F,isFocused:!0,isDisabled:R})},background:O({isSelected:F,isFocused:C}),...f(Boolean(S.prefix))}),valueContainer:k=>({...k,position:"static",padding:D?D-1+"rem 0 ":0,height:D?"auto":"1.5rem"}),clearIndicator:k=>({...k,paddingTop:0,paddingBottom:0,paddingLeft:0,paddingRight:"0.2rem"})},components:{IndicatorSeparator:()=>null,DropdownIndicator:y,...(j=S.components)!=null?j:{}}}),q&&n.default.createElement(h,{hasError:v},q))}exports.Select=x,exports.default=x;
|
|
@@ -1,17 +1,19 @@
|
|
|
1
|
-
import
|
|
1
|
+
import p from"react";import b,{css as r}from"styled-components";import{mq as j}from"../../shared/media-queries.js";const y="row",k="1rem",g="center",$=(e,t)=>(t==="gap"||t==="row-gap")&&typeof e=="number"?`${e}rem`:e,q=({$direction:e,$justify:t,$align:a,$gap:i,$rowGap:s,$wrap:o,$basis:f,$grow:u,$shrink:m})=>r`
|
|
2
2
|
display: flex;
|
|
3
3
|
|
|
4
|
-
${e&&["column","column-reverse"].includes(String(e))&&
|
|
4
|
+
${e&&["column","column-reverse"].includes(String(e))&&r`
|
|
5
5
|
& > * {
|
|
6
6
|
width: 100%;
|
|
7
7
|
}
|
|
8
8
|
`}
|
|
9
9
|
|
|
10
|
-
${[[e,"flex-direction"],[t,"justify-content"],[
|
|
11
|
-
${
|
|
12
|
-
|
|
13
|
-
${
|
|
14
|
-
|
|
10
|
+
${[[e,"flex-direction"],[t,"justify-content"],[a,"align-items"],[i,"gap"],[s,"row-gap"],[s,"row-gap"],[o,"flex-wrap"],[f,"flex-basis"],[u,"flex-grow"],[m,"flex-shrink"]].map(([n,l])=>{if(typeof n=="string"||typeof n=="number")return r`
|
|
11
|
+
${l}: ${$(n,l)};
|
|
12
|
+
`;if(typeof n=="object"){const c=[],{initial:d,...w}=n;return d&&c.push(r`
|
|
13
|
+
${l}: ${$(d,l)};
|
|
14
|
+
`),Object.entries(w).forEach(([x,h])=>{c.push(r`
|
|
15
|
+
${j(x)} {
|
|
16
|
+
${l}: ${$(h,l)};
|
|
15
17
|
}
|
|
16
|
-
`)
|
|
17
|
-
`,
|
|
18
|
+
`)}),c}else return""})}
|
|
19
|
+
`,E=b.div(q),F=({direction:e,justify:t,align:a,gap:i,rowGap:s,wrap:o,basis:f,grow:u,shrink:m,...n})=>p.createElement(E,{$direction:e!=null?e:y,$justify:t!=null?t:g,$align:a!=null?a:g,$gap:i!=null?i:k,$rowGap:s,$wrap:o,$basis:f,$grow:u,$shrink:m,...n});export{F as default};
|
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
import n,{useState as F}from"react";import z from"react-select";import m from"styled-components";import{DEFAULT_TRANSITION_MS as
|
|
1
|
+
import n,{useState as F}from"react";import z from"react-select";import m from"styled-components";import{DEFAULT_TRANSITION_MS as S}from"../../shared/constants.js";import r from"../../theme.js";import{CaptionStyle as H}from"../../typography/BodyText/index.js";import{Label as O}from"../FieldLabel.js";import"../../shared/media-queries.js";const _=m.div`
|
|
2
2
|
font-family: ${({theme:e})=>e.typography.fontBaseFamily};
|
|
3
3
|
position: relative;
|
|
4
|
-
`,
|
|
4
|
+
`,w=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}`},W=m.div`
|
|
5
5
|
position: absolute;
|
|
6
6
|
z-index: 1;
|
|
7
7
|
top: 0.5rem;
|
|
8
8
|
margin: 0.35rem 0.75rem;
|
|
9
9
|
|
|
10
10
|
fill: ${r.colors.gray.dark5};
|
|
11
|
-
transition: ${
|
|
11
|
+
transition: ${S};
|
|
12
12
|
|
|
13
13
|
${e=>e.isDisabled&&` fill: ${r.colors.gray.light1}; `}
|
|
14
14
|
|
|
15
15
|
${e=>e.isFocused&&` fill: ${e.theme.colors.text.dark}; `}
|
|
16
|
-
`,
|
|
16
|
+
`,N=m.span`
|
|
17
17
|
${H}
|
|
18
18
|
display: block;
|
|
19
19
|
margin-top: 0.25rem;
|
|
20
20
|
color: ${({hasError:e})=>e?r.colors.error.dark:r.colors.text.disabled};
|
|
21
|
-
`,
|
|
21
|
+
`,P=e=>n.createElement("svg",{...e},n.createElement("symbol",{id:"icon-arrow",viewBox:"0 0 19 19"},n.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"})),n.createElement("use",{xlinkHref:"#icon-arrow"})),V=m(P)`
|
|
22
22
|
width: 0.75rem;
|
|
23
23
|
height: 0.75rem;
|
|
24
24
|
margin: 0;
|
|
@@ -31,9 +31,9 @@ import n,{useState as F}from"react";import z from"react-select";import m from"st
|
|
|
31
31
|
stroke: currentColor;
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
-
transition: transform ${
|
|
34
|
+
transition: transform ${S};
|
|
35
35
|
|
|
36
36
|
transform: ${e=>e.$isMenuOpen?"rotate(-180deg)":"rotate(0deg)"};
|
|
37
37
|
|
|
38
38
|
transform-origin: 50% 60%;
|
|
39
|
-
`,q=(e,a)=>a?r.colors.error.main:e?r.colors.text.dark:r.colors.gray.light1,U=({selectProps:{menuIsOpen:e=!1},isFocused:a=!1,isDisabled:u})=>n.createElement(
|
|
39
|
+
`,q=(e,a)=>a?r.colors.error.main:e?r.colors.text.dark:r.colors.gray.light1,U=({selectProps:{menuIsOpen:e=!1},isFocused:a=!1,isDisabled:u})=>n.createElement(V,{$isDisabled:u,$isFocused:a,$isMenuOpen:e,$theme:r});function C({className:e,color:a="primary",forwardRef:u,hasError:i=!1,height:s,helperText:p,isDisabled:d=!1,onBlur:B=()=>null,onFocus:L=()=>null,onInputChange:v=()=>null,placeholder:I="",name:g,...t}){var h;const[c,b]=F(!1),[E,T]=F(""),D=(o,l)=>{v(o,l),T(o)},y=({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,R=o=>{b(!0),L(o)},j=o=>{b(!1),B(o)},$=q(c,i),x=Boolean(t.label)===!1;return n.createElement(_,{className:e},!x&&t.label&&n.createElement(O,{htmlFor:g,height:s,isFocused:c,hasValue:Boolean(t.value||E),disabled:d,theme:r,hasError:i},t.label),t.prefix&&n.createElement(W,{isDisabled:d,isFocused:c},t.prefix),n.createElement(z,{...t,inputId:g,name:g,ref:u,isDisabled:d,onInputChange:D,placeholder:I,onFocus:R,onBlur:j,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.5rem",backgroundColor:r.colors.background.light,borderColor:$,boxShadow:"none",minHeight:"3rem","&:hover":{borderColor:"none"},...A(d),...M(i),...w(Boolean(t.prefix))}),input:o=>({...o,height:"auto",margin:0,padding:0}),placeholder:o=>{const l={...o,fontSize:"1rem",lineHeight:"1.5rem",whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden",margin:0};return x?{...l,color:r.colors.text.dark,fontWeight:600}:{...l,display:c?"static":"none"}},menuList:o=>({...o,padding:"0.5rem 0",paddingBottom:"5rem",marginTop:0,border:`1px solid ${$}`,borderTop:"none",display:"flex",flexDirection:"column",gap:"0.5rem"}),menu:o=>({...o,borderRadius:0,boxShadow:"none",zIndex:5,padding:"0",marginTop:"-0.1rem"}),option:(o,{isSelected:l,isFocused:f,isDisabled:k})=>({...o,padding:"0.5rem",lineHeight:"1.5rem",fontSize:"1rem",fontWeight:400,cursor:k?"not-allowed":"pointer","&:hover":{background:y({isSelected:l,isFocused:!0,isDisabled:k})},background:y({isSelected:l,isFocused:f}),...w(Boolean(t.prefix))}),valueContainer:o=>({...o,position:"static",padding:s?`${s-1}rem 0 `:0,height:s?"auto":"1.5rem"}),clearIndicator:o=>({...o,paddingTop:0,paddingBottom:0,paddingLeft:0,paddingRight:"0.2rem"})},components:{IndicatorSeparator:()=>null,DropdownIndicator:U,...(h=t.components)!=null?h:{}}}),p&&n.createElement(N,{hasError:i},p))}export{C as Select,C as default};
|
package/package.json
CHANGED
|
@@ -10,7 +10,7 @@ import { SCREEN_SIZE } from '../../shared/media-queries';
|
|
|
10
10
|
* direction: 'row' | 'column' | 'row-reverse' | 'column-reverse'
|
|
11
11
|
* direction: { mobileS: 'column', tablet: 'row' }
|
|
12
12
|
*/
|
|
13
|
-
declare type CSSPropertyWithResponsive<P extends keyof CSSProperties> = CSSProperties[P] | Partial<Record<Partial<SCREEN_SIZE
|
|
13
|
+
declare type CSSPropertyWithResponsive<P extends keyof CSSProperties> = CSSProperties[P] | Partial<Record<Partial<SCREEN_SIZE> | 'initial', CSSProperties[P]>>;
|
|
14
14
|
export interface FlexProps {
|
|
15
15
|
direction?: CSSPropertyWithResponsive<'flexDirection'>;
|
|
16
16
|
justify?: CSSPropertyWithResponsive<'justifyContent'>;
|