@kvdbil/components 12.4.1 → 13.0.0
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
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
2
|
font-family: ${({theme:$})=>$.typography.fontBaseFamily};
|
|
3
3
|
position: relative;
|
|
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}`},
|
|
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;
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
${$=>$.isDisabled&&` fill: ${a.default.colors.gray.light1}; `}
|
|
14
14
|
|
|
15
15
|
${$=>$.isFocused&&` fill: ${$.theme.colors.text.dark}; `}
|
|
16
|
-
`,
|
|
16
|
+
`,h=u.default.span`
|
|
17
17
|
${l.CaptionStyle}
|
|
18
18
|
display: block;
|
|
19
19
|
margin-top: 0.25rem;
|
|
@@ -36,4 +36,4 @@
|
|
|
36
36
|
transform: ${$=>$.$isMenuOpen?"rotate(-180deg)":"rotate(0deg)"};
|
|
37
37
|
|
|
38
38
|
transform-origin: 50% 60%;
|
|
39
|
-
`,y=({selectProps:{menuIsOpen:$=!1},isFocused:
|
|
39
|
+
`,y=({selectProps:{menuIsOpen:$=!1},isFocused:T=!1,isDisabled:B})=>s.default.createElement(b,{$isDisabled:B,$isFocused:T,$isMenuOpen:$,$theme:a.default});function x({className:$,color:T="primary",forwardRef:B,hasError:D=!1,height:E,helperText:q,isDisabled:I=!1,onBlur:R=()=>null,onFocus:A=()=>null,onInputChange:z=()=>null,placeholder:W="",name:C,...F}){var j;const[L,S]=e.useState(!1),[H,P]=e.useState(""),M=({isSelected:k,isFocused:v,isDisabled:w})=>k?a.default.colors[T].main:w?a.default.colors.background.light:v?a.default.colors.background.gray:a.default.colors.background.light,N=((k,v)=>v?a.default.colors.error.main:k?a.default.colors.text.dark:a.default.colors.gray.light1)(L,D),O=Boolean(F.label)===!1;return s.default.createElement(c,{className:$},!O&&F.label&&s.default.createElement(d.Label,{htmlFor:C,height:E,isFocused:L,hasValue:Boolean(F.value||H),disabled:I,theme:a.default,hasError:D},F.label),F.prefix&&s.default.createElement(g,{isDisabled:I,isFocused:L},F.prefix),s.default.createElement(n.default,{...F,inputId:C,name:C,ref:B,isDisabled:I,onInputChange:(k,v)=>{z(k,v),P(k)},placeholder:W,onFocus:k=>{S(!0),A(k)},onBlur:k=>{S(!1),R(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:N,boxShadow:"none",minHeight:"3rem","&:hover":{borderColor:"none"},...m(I),...p(D),...f(Boolean(F.prefix))}),placeholder:k=>O?{...k,color:a.default.colors.text.dark,fontWeight:600}:{...k,display:L?"static":"none"},singleValue:k=>({...k,maxWidth:"calc(100% - 3.3rem)",width:"calc(100% - 3.3rem)"}),menuList:k=>({...k,padding:"0.5rem 0",marginTop:0,border:`1px solid ${N}`,borderTop:"none"}),menu:k=>({...k,borderRadius:0,boxShadow:"none",zIndex:5,padding:"0",marginTop:"-0.1rem"}),option:(k,{isSelected:v,isFocused:w,isDisabled:_})=>({...k,padding:"1rem",cursor:_?"not-allowed":"pointer","&:hover":{background:M({isSelected:v,isFocused:!0,isDisabled:_})},background:M({isSelected:v,isFocused:w}),...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,...(j=F.components)!=null?j:{}}}),q&&s.default.createElement(h,{hasError:D},q))}exports.Select=x,exports.default=x;
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import n,{useState as
|
|
1
|
+
import n,{useState as F}from"react";import _ from"react-select";import m from"styled-components";import{DEFAULT_TRANSITION_MS as C}from"../../shared/constants.js";import r from"../../theme.js";import{CaptionStyle as A}from"../../typography/BodyText/index.js";import{Label as M}from"../FieldLabel.js";import"../../shared/media-queries.js";const O=m.div`
|
|
2
2
|
font-family: ${({theme:e})=>e.typography.fontBaseFamily};
|
|
3
3
|
position: relative;
|
|
4
|
-
`,
|
|
4
|
+
`,B=e=>e&&{paddingLeft:"2.5rem"},z=e=>e&&{border:`1px solid ${r.colors.gray.light1}`,color:r.colors.gray.dark1,fill:r.colors.gray.light1},H=e=>e&&{border:`2px solid ${r.colors.error.dark}`},V=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: ${C};
|
|
12
12
|
|
|
13
13
|
${e=>e.isDisabled&&` fill: ${r.colors.gray.light1}; `}
|
|
14
14
|
|
|
@@ -31,9 +31,9 @@ import n,{useState as k}from"react";import _ from"react-select";import m from"st
|
|
|
31
31
|
stroke: currentColor;
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
-
transition: transform ${
|
|
34
|
+
transition: transform ${C};
|
|
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(P,{$isDisabled:u,$isFocused:a,$isMenuOpen:e,$theme:r});function
|
|
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(P,{$isDisabled:u,$isFocused:a,$isMenuOpen:e,$theme:r});function L({className:e,color:a="primary",forwardRef:u,hasError:i=!1,height:s,helperText:p,isDisabled:c=!1,onBlur:S=()=>null,onFocus:w=()=>null,onInputChange:I=()=>null,placeholder:v="",name:g,...t}){var h;const[d,b]=F(!1),[E,T]=F(""),D=(o,l)=>{I(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,j=o=>{b(!0),w(o)},R=o=>{b(!1),S(o)},$=q(d,i),x=Boolean(t.label)===!1;return n.createElement(O,{className:e},!x&&t.label&&n.createElement(M,{htmlFor:g,height:s,isFocused:d,hasValue:Boolean(t.value||E),disabled:c,theme:r,hasError:i},t.label),t.prefix&&n.createElement(V,{isDisabled:c,isFocused:d},t.prefix),n.createElement(_,{...t,inputId:g,name:g,ref:u,isDisabled:c,onInputChange:D,placeholder:v,onFocus:j,onBlur:R,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:$,boxShadow:"none",minHeight:"3rem","&:hover":{borderColor:"none"},...z(c),...H(i),...B(Boolean(t.prefix))}),placeholder:o=>x?{...o,color:r.colors.text.dark,fontWeight:600}:{...o,display:d?"static":"none"},singleValue:o=>({...o,maxWidth:"calc(100% - 3.3rem)",width:"calc(100% - 3.3rem)"}),menuList:o=>({...o,padding:"0.5rem 0",marginTop:0,border:`1px solid ${$}`,borderTop:"none"}),menu:o=>({...o,borderRadius:0,boxShadow:"none",zIndex:5,padding:"0",marginTop:"-0.1rem"}),option:(o,{isSelected:l,isFocused:f,isDisabled:k})=>({...o,padding:"1rem",cursor:k?"not-allowed":"pointer","&:hover":{background:y({isSelected:l,isFocused:!0,isDisabled:k})},background:y({isSelected:l,isFocused:f}),...B(Boolean(t.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:U,...(h=t.components)!=null?h:{}}}),p&&n.createElement(W,{hasError:i},p))}export{L as Select,L as default};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kvdbil/components",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "13.0.0",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"main": "cjs/index.js",
|
|
6
6
|
"module": "esm/index.js",
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
"react-collapse": ">= 5.0.1",
|
|
32
32
|
"react-day-picker": ">= 7.4.8",
|
|
33
33
|
"react-dom": ">= 17.0.0",
|
|
34
|
-
"react-select": "
|
|
34
|
+
"react-select": "5.7.3",
|
|
35
35
|
"react-transition-group": ">= 4.0.0",
|
|
36
36
|
"styled-components": ">= 5.1.17"
|
|
37
37
|
},
|
|
@@ -69,7 +69,6 @@
|
|
|
69
69
|
"@types/react": "^16.9.49",
|
|
70
70
|
"@types/react-collapse": "^5.0.0",
|
|
71
71
|
"@types/react-dom": "^16.9.8",
|
|
72
|
-
"@types/react-select": "^3.0.22",
|
|
73
72
|
"@types/react-transition-group": "^4.4.0",
|
|
74
73
|
"@types/styled-components": "^5.1.13",
|
|
75
74
|
"@types/uuid": "^8.3.0",
|
|
@@ -97,7 +96,7 @@
|
|
|
97
96
|
"react-dom": "^17.0.2",
|
|
98
97
|
"react-is": "^16.13.1",
|
|
99
98
|
"react-scripts": "^4.0.3",
|
|
100
|
-
"react-select": "
|
|
99
|
+
"react-select": "5.7.3",
|
|
101
100
|
"react-select-event": "^5.3.0",
|
|
102
101
|
"react-transition-group": "^4.0.0",
|
|
103
102
|
"rollup": "^2.56.3",
|
|
@@ -1,11 +1,7 @@
|
|
|
1
1
|
import { ReactNode, RefObject } from 'react';
|
|
2
|
-
import
|
|
2
|
+
import { ActionMeta, GroupBase, Props, SelectInstance, DropdownIndicatorProps as SelectDropdownIndicatorProps, OnChangeValue } from 'react-select';
|
|
3
3
|
import { Color } from '../../Types';
|
|
4
|
-
export interface DropdownIndicatorProps extends
|
|
5
|
-
selectProps: {
|
|
6
|
-
menuIsOpen?: boolean;
|
|
7
|
-
lol?: string;
|
|
8
|
-
};
|
|
4
|
+
export interface DropdownIndicatorProps extends SelectDropdownIndicatorProps {
|
|
9
5
|
isFocused: boolean;
|
|
10
6
|
isDisabled: boolean;
|
|
11
7
|
}
|
|
@@ -13,17 +9,17 @@ declare type OptionType = {
|
|
|
13
9
|
label: string | ReactNode;
|
|
14
10
|
value: string;
|
|
15
11
|
};
|
|
16
|
-
export interface SelectProps<Option
|
|
12
|
+
export interface SelectProps<Option = OptionType, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> extends Props<Option, IsMulti, Group> {
|
|
17
13
|
autoFocus?: boolean;
|
|
18
14
|
className?: string;
|
|
19
15
|
color?: Color;
|
|
20
|
-
forwardRef?: RefObject<
|
|
16
|
+
forwardRef?: RefObject<SelectInstance<Option, IsMulti, Group>>;
|
|
21
17
|
hasError?: boolean;
|
|
22
18
|
height?: number;
|
|
23
19
|
helperText?: string;
|
|
24
20
|
isDisabled?: boolean;
|
|
25
21
|
label?: string;
|
|
26
|
-
onChange(value:
|
|
22
|
+
onChange(value: OnChangeValue<Option, IsMulti>, actionMeta: ActionMeta<Option>): void;
|
|
27
23
|
placeholder?: string;
|
|
28
24
|
prefix?: ReactNode;
|
|
29
25
|
name: string;
|
|
@@ -52,5 +48,5 @@ export interface SelectProps<Option extends OptionType = OptionType, IsMulti ext
|
|
|
52
48
|
* );
|
|
53
49
|
* };
|
|
54
50
|
*/
|
|
55
|
-
export declare function Select<Option
|
|
51
|
+
export declare function Select<Option = OptionType, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ className, color, forwardRef, hasError, height, helperText, isDisabled, onBlur, onFocus, onInputChange, placeholder, name, ...props }: SelectProps<Option, IsMulti, Group>): JSX.Element;
|
|
56
52
|
export default Select;
|