@kvdbil/components 12.3.5 → 12.4.1
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.
|
@@ -10,13 +10,9 @@
|
|
|
10
10
|
fill: ${a.default.colors.gray.dark5};
|
|
11
11
|
transition: ${t.DEFAULT_TRANSITION_MS};
|
|
12
12
|
|
|
13
|
-
${$=>$.isDisabled&&`
|
|
14
|
-
fill: ${a.default.colors.gray.light1};
|
|
15
|
-
`}
|
|
13
|
+
${$=>$.isDisabled&&` fill: ${a.default.colors.gray.light1}; `}
|
|
16
14
|
|
|
17
|
-
${$=>$.isFocused&&`
|
|
18
|
-
fill: ${$.theme.colors.text.dark};
|
|
19
|
-
`}
|
|
15
|
+
${$=>$.isFocused&&` fill: ${$.theme.colors.text.dark}; `}
|
|
20
16
|
`,g=u.default.span`
|
|
21
17
|
${l.CaptionStyle}
|
|
22
18
|
display: block;
|
|
@@ -38,5 +34,6 @@
|
|
|
38
34
|
transition: transform ${t.DEFAULT_TRANSITION_MS};
|
|
39
35
|
|
|
40
36
|
transform: ${$=>$.$isMenuOpen?"rotate(-180deg)":"rotate(0deg)"};
|
|
37
|
+
|
|
41
38
|
transform-origin: 50% 60%;
|
|
42
|
-
`,y=({selectProps:{menuIsOpen:$=!1},isFocused:
|
|
39
|
+
`,y=({selectProps:{menuIsOpen:$=!1},isFocused:B=!1,isDisabled:C})=>s.default.createElement(b,{$isDisabled:C,$isFocused:B,$isMenuOpen:$,$theme:a.default});function x({className:$,color:B="primary",forwardRef:C,hasError:D=!1,height:E,helperText:T,isDisabled:I=!1,onBlur:_=()=>null,onFocus:R=()=>null,onInputChange:A=()=>null,placeholder:z="",name:w,...F}){var j;const[L,S]=e.useState(!1),[W,H]=e.useState(""),M=({isSelected:k,isFocused:v,isDisabled:q})=>k?a.default.colors[B].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),N=Boolean(F.label)===!1;return s.default.createElement(c,{className:$},!N&&F.label&&s.default.createElement(d.Label,{htmlFor:w,height:E,isFocused:L,hasValue:Boolean(F.value||W),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:w,name:w,ref:C,isDisabled:I,onInputChange:(k,v)=>{A(k,v),H(k)},placeholder:z,onFocus:k=>{S(!0),R(k)},onBlur:k=>{S(!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.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=>N?{...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:"8px 0"}),menu:k=>({...k,borderRadius:0,boxShadow:a.default.elevations.elevation2,zIndex:2,padding:"0"}),option:(k,{isSelected:v,isFocused:q,isDisabled:O})=>({...k,padding:"1rem",cursor:O?"not-allowed":"pointer","&:hover":{background:M({isSelected:v,isFocused:!0,isDisabled:O})},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,...(j=F.components)!=null?j:{}}}),T&&s.default.createElement(g,{hasError:D},T))}exports.Select=x,exports.default=x;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components"),
|
|
2
|
-
${
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components"),l=require("../../shared/media-queries.js"),a=require("../../theme.js");function r(s){return s&&typeof s=="object"&&"default"in s?s:{default:s}}var d=r(e),o=r(t);const n=o.default.div`
|
|
2
|
+
${l.mq("mobileS","tablet")} {
|
|
3
3
|
display: block;
|
|
4
4
|
max-width: -moz-fit-content;
|
|
5
5
|
max-width: fit-content;
|
|
@@ -7,17 +7,17 @@
|
|
|
7
7
|
overflow-x: auto;
|
|
8
8
|
white-space: nowrap;
|
|
9
9
|
}
|
|
10
|
-
`,
|
|
10
|
+
`,u=o.default.table`
|
|
11
11
|
border-collapse: collapse;
|
|
12
|
-
border: 1px solid ${
|
|
13
|
-
font-family: ${
|
|
12
|
+
border: 1px solid ${a.default.colors.gray.light3};
|
|
13
|
+
font-family: ${a.default.typography.fontBaseFamily};
|
|
14
14
|
text-align: left;
|
|
15
15
|
`,i=o.default.thead``,f=o.default.th`
|
|
16
|
-
border: 1px solid ${
|
|
16
|
+
border: 1px solid ${a.default.colors.gray.light3};
|
|
17
17
|
padding: ${.5}rem ${.3}rem;
|
|
18
18
|
vertical-align: top;
|
|
19
|
-
`,
|
|
20
|
-
border: 1px solid ${
|
|
19
|
+
`,m=o.default.tbody``,c=o.default.tr``,p=o.default.td`
|
|
20
|
+
border: 1px solid ${a.default.colors.gray.light3};
|
|
21
21
|
padding: ${.5}rem ${.3}rem;
|
|
22
22
|
vertical-align: top;
|
|
23
|
-
`;exports.default=({columns:
|
|
23
|
+
`;exports.default=({columns:s,data:v})=>{return d.default.createElement(n,null,d.default.createElement(u,null,s&&d.default.createElement(i,null,(h=>d.default.createElement(c,{key:"RowHead"},e.Children.toArray(h.map((y,g)=>d.default.createElement(f,{key:g},y)))))(s)),v&&d.default.createElement(m,null,(x=((h,y)=>y.length?h.map(g=>y==null?void 0:y.map(b=>d.default.createElement(p,{key:b},g[b]))):h.map(g=>Object.entries(g).map(([b,E])=>d.default.createElement(p,{key:b},E))))(v,s!=null?s:[]),e.Children.toArray(x.map((h,y)=>d.default.createElement(c,{key:y},e.Children.toArray(h))))))));var x};
|
|
@@ -1,28 +1,24 @@
|
|
|
1
|
-
import
|
|
1
|
+
import n,{useState as k}from"react";import _ from"react-select";import m from"styled-components";import{DEFAULT_TRANSITION_MS as F}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
|
+
`,C=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: ${F};
|
|
12
12
|
|
|
13
|
-
${e=>e.isDisabled&&`
|
|
14
|
-
fill: ${r.colors.gray.light1};
|
|
15
|
-
`}
|
|
13
|
+
${e=>e.isDisabled&&` fill: ${r.colors.gray.light1}; `}
|
|
16
14
|
|
|
17
|
-
${e=>e.isFocused&&`
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
`,V=m.span`
|
|
21
|
-
${_}
|
|
15
|
+
${e=>e.isFocused&&` fill: ${e.theme.colors.text.dark}; `}
|
|
16
|
+
`,W=m.span`
|
|
17
|
+
${A}
|
|
22
18
|
display: block;
|
|
23
19
|
margin-top: 0.25rem;
|
|
24
20
|
color: ${({hasError:e})=>e?r.colors.error.dark:r.colors.text.disabled};
|
|
25
|
-
`,N=e=>
|
|
21
|
+
`,N=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"})),P=m(N)`
|
|
26
22
|
width: 0.8rem;
|
|
27
23
|
height: 0.8rem;
|
|
28
24
|
margin: 0 0.5rem;
|
|
@@ -35,8 +31,9 @@ import t,{useState as x}from"react";import T from"react-select";import m from"st
|
|
|
35
31
|
stroke: currentColor;
|
|
36
32
|
}
|
|
37
33
|
|
|
38
|
-
transition: transform ${
|
|
34
|
+
transition: transform ${F};
|
|
39
35
|
|
|
40
36
|
transform: ${e=>e.$isMenuOpen?"rotate(-180deg)":"rotate(0deg)"};
|
|
37
|
+
|
|
41
38
|
transform-origin: 50% 60%;
|
|
42
|
-
`,
|
|
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 v({className:e,color:a="primary",forwardRef:u,hasError:i=!1,height:s,helperText:p,isDisabled:c=!1,onBlur:B=()=>null,onFocus:L=()=>null,onInputChange:S=()=>null,placeholder:w="",name:f,...t}){var h;const[d,b]=k(!1),[I,E]=k(""),D=(o,l)=>{S(o,l),E(o)},y=({isSelected:o,isFocused:l,isDisabled:g})=>o?r.colors[a].main:g?r.colors.background.light:l?r.colors.background.gray:r.colors.background.light,j=o=>{b(!0),L(o)},R=o=>{b(!1),B(o)},T=q(d,i),$=Boolean(t.label)===!1;return n.createElement(O,{className:e},!$&&t.label&&n.createElement(M,{htmlFor:f,height:s,isFocused:d,hasValue:Boolean(t.value||I),disabled:c,theme:r,hasError:i},t.label),t.prefix&&n.createElement(V,{isDisabled:c,isFocused:d},t.prefix),n.createElement(_,{...t,inputId:f,name:f,ref:u,isDisabled:c,onInputChange:D,placeholder:w,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:T,boxShadow:"none",minHeight:"3rem","&:hover":{borderColor:"none"},...z(c),...H(i),...C(Boolean(t.prefix))}),placeholder:o=>$?{...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:"8px 0"}),menu:o=>({...o,borderRadius:0,boxShadow:r.elevations.elevation2,zIndex:2,padding:"0"}),option:(o,{isSelected:l,isFocused:g,isDisabled:x})=>({...o,padding:"1rem",cursor:x?"not-allowed":"pointer","&:hover":{background:y({isSelected:l,isFocused:!0,isDisabled:x})},background:y({isSelected:l,isFocused:g}),...C(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{v as Select,v as default};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import
|
|
2
|
-
${
|
|
1
|
+
import l,{Children as c}from"react";import a from"styled-components";import{mq as y}from"../../shared/media-queries.js";import o from"../../theme.js";const d=.5,m=.3,g=a.div`
|
|
2
|
+
${y("mobileS","tablet")} {
|
|
3
3
|
display: block;
|
|
4
4
|
max-width: -moz-fit-content;
|
|
5
5
|
max-width: fit-content;
|
|
@@ -7,17 +7,17 @@ import a,{Children as n}from"react";import l from"styled-components";import{mq a
|
|
|
7
7
|
overflow-x: auto;
|
|
8
8
|
white-space: nowrap;
|
|
9
9
|
}
|
|
10
|
-
`,
|
|
10
|
+
`,f=a.table`
|
|
11
11
|
border-collapse: collapse;
|
|
12
|
-
border: 1px solid ${
|
|
13
|
-
font-family: ${
|
|
12
|
+
border: 1px solid ${o.colors.gray.light3};
|
|
13
|
+
font-family: ${o.typography.fontBaseFamily};
|
|
14
14
|
text-align: left;
|
|
15
|
-
`,
|
|
16
|
-
border: 1px solid ${
|
|
17
|
-
padding: ${
|
|
15
|
+
`,h=a.thead``,T=a.th`
|
|
16
|
+
border: 1px solid ${o.colors.gray.light3};
|
|
17
|
+
padding: ${d}rem ${m}rem;
|
|
18
18
|
vertical-align: top;
|
|
19
|
-
`,
|
|
20
|
-
border: 1px solid ${
|
|
21
|
-
padding: ${
|
|
19
|
+
`,w=a.tbody``,p=a.tr``,b=a.td`
|
|
20
|
+
border: 1px solid ${o.colors.gray.light3};
|
|
21
|
+
padding: ${d}rem ${m}rem;
|
|
22
22
|
vertical-align: top;
|
|
23
|
-
`,
|
|
23
|
+
`,u=e=>l.createElement(p,{key:"RowHead"},c.toArray(e.map((t,r)=>l.createElement(T,{key:r},t)))),E=(e,t)=>t.length?e.map(n=>t==null?void 0:t.map(s=>l.createElement(b,{key:s},n[s]))):e.map(r=>Object.entries(r).map(([n,i])=>l.createElement(b,{key:n},i))),$=e=>c.toArray(e.map((t,r)=>l.createElement(p,{key:r},c.toArray(t)))),x=({columns:e,data:t})=>l.createElement(g,null,l.createElement(f,null,e&&l.createElement(h,null,u(e)),t&&l.createElement(w,null,$(E(t,e!=null?e:[])))));export{x as default};
|
package/package.json
CHANGED
|
@@ -9,28 +9,48 @@ export interface DropdownIndicatorProps extends IndicatorProps<OptionTypeBase, f
|
|
|
9
9
|
isFocused: boolean;
|
|
10
10
|
isDisabled: boolean;
|
|
11
11
|
}
|
|
12
|
-
/**
|
|
13
|
-
* This component is a thin wrapper around react-select, as it handles a lot of functionality smoothly.
|
|
14
|
-
* Simply with our kvdbil styling applied to it.
|
|
15
|
-
**/
|
|
16
12
|
declare type OptionType = {
|
|
17
13
|
label: string | ReactNode;
|
|
18
14
|
value: string;
|
|
19
15
|
};
|
|
20
|
-
export interface SelectProps extends NamedProps<
|
|
16
|
+
export interface SelectProps<Option extends OptionType = OptionType, IsMulti extends boolean = false> extends NamedProps<Option, IsMulti> {
|
|
21
17
|
autoFocus?: boolean;
|
|
22
18
|
className?: string;
|
|
23
19
|
color?: Color;
|
|
24
|
-
forwardRef?: RefObject<ReactSelect<
|
|
20
|
+
forwardRef?: RefObject<ReactSelect<Option, IsMulti>>;
|
|
25
21
|
hasError?: boolean;
|
|
26
22
|
height?: number;
|
|
27
23
|
helperText?: string;
|
|
28
24
|
isDisabled?: boolean;
|
|
29
25
|
label?: string;
|
|
30
|
-
onChange(value: ValueType<
|
|
26
|
+
onChange(value: ValueType<Option, IsMulti>, actionMeta: ActionMeta<Option>): void;
|
|
31
27
|
placeholder?: string;
|
|
32
28
|
prefix?: ReactNode;
|
|
33
29
|
name: string;
|
|
34
30
|
}
|
|
35
|
-
|
|
31
|
+
/**
|
|
32
|
+
* @description
|
|
33
|
+
* This component is a thin wrapper around react-select, as it handles a lot of functionality smoothly.
|
|
34
|
+
* Simply with our kvdbil styling applied to it.
|
|
35
|
+
*
|
|
36
|
+
* @example
|
|
37
|
+
* // Example on how to create a custom option type
|
|
38
|
+
*
|
|
39
|
+
* interface OptionType {
|
|
40
|
+
* label: string;
|
|
41
|
+
* value: number | string;
|
|
42
|
+
* }
|
|
43
|
+
*
|
|
44
|
+
* const Component = () => {
|
|
45
|
+
* const [value, setValue] = useState(args.value);
|
|
46
|
+
*
|
|
47
|
+
* return (
|
|
48
|
+
* <Select<OptionType>
|
|
49
|
+
* onChange={setValue}
|
|
50
|
+
* value={value}
|
|
51
|
+
* />
|
|
52
|
+
* );
|
|
53
|
+
* };
|
|
54
|
+
*/
|
|
55
|
+
export declare function Select<Option extends OptionType = OptionType, IsMulti extends boolean = false>({ className, color, forwardRef, hasError, height, helperText, isDisabled, onBlur, onFocus, onInputChange, placeholder, name, ...props }: SelectProps<Option, IsMulti>): JSX.Element;
|
|
36
56
|
export default Select;
|