@kvdbil/components 8.4.2 → 8.4.3

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.
Files changed (6) hide show
  1. package/cjs/components/CheckBox/index.js +12 -11
  2. package/cjs/components/TextArea/index.js +21 -22
  3. package/esm/components/CheckBox/index.js +5 -4
  4. package/esm/components/TextArea/index.js +21 -22
  5. package/package.json +1 -1
  6. package/types/components/TextArea/index.d.ts +7 -3
package/cjs/components/CheckBox/index.js CHANGED
@@ -1,4 +1,4 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("styled-components"),t=require("../../shared/helpers.js"),o=require("../../theme.js"),s=require("../../typography/BodyText/index.js"),i=require("../../icons/components/CheckmarkIcon.js"),a=require("../IconButton.js");function l(m){return m&&typeof m=="object"&&"default"in m?m:{default:m}}require("../../shared/media-queries.js");var d=l(e),c=l(r);const n={regular:r.css`
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("styled-components"),t=require("../../icons/components/CheckmarkIcon.js"),o=require("../../shared/helpers.js"),s=require("../../theme.js"),i=require("../../typography/BodyText/index.js"),a=require("../IconButton.js");function l(m){return m&&typeof m=="object"&&"default"in m?m:{default:m}}require("../../shared/media-queries.js");var d=l(e),c=l(r);const n={regular:r.css`
2
2
  width: 24px;
3
3
  height: 24px;
4
4
 
@@ -16,14 +16,14 @@
16
16
  }
17
17
  `},u=r.css`
18
18
  cursor: default;
19
- border: 2px solid ${o.default.colors.gray.light2};
19
+ border: 2px solid ${s.default.colors.gray.light2};
20
20
  `,h=r.css`
21
- background: ${o.default.colors.gray.light2};
21
+ background: ${s.default.colors.gray.light2};
22
22
  `,p=c.default.div`
23
23
  display: flex;
24
- align-items: center;
24
+ align-items: flex-start;
25
25
  box-sizing: border-box;
26
- `,b=c.default.input.attrs({type:"checkbox"})`
26
+ `,x=c.default.input.attrs({type:"checkbox"})`
27
27
  position: absolute;
28
28
  appearance: none;
29
29
  width: 100%;
@@ -39,7 +39,7 @@
39
39
  transition: background-color 400ms;
40
40
  ${a.BackgroundStyles}
41
41
  }
42
- `,x=c.default.span`
42
+ `,b=c.default.span`
43
43
  box-sizing: border-box;
44
44
  cursor: pointer;
45
45
  display: flex;
@@ -48,7 +48,7 @@
48
48
  justify-content: center;
49
49
  z-index: 0;
50
50
 
51
- border: 2px solid ${o.default.colors.gray.dark5};
51
+ border: 2px solid ${s.default.colors.gray.dark5};
52
52
 
53
53
  ${m=>n[m.size]};
54
54
 
@@ -65,15 +65,16 @@
65
65
  :hover {
66
66
  }
67
67
 
68
- background: ${o.default.colors[y].main};
69
- border: 2px solid ${o.default.colors[y].main};
68
+ background: ${s.default.colors[y].main};
69
+ border: 2px solid ${s.default.colors[y].main};
70
70
  `);var y}};
71
71
  ${m=>m.isDisabled&&u};
72
72
 
73
73
  ${m=>m.isChecked&&m.isDisabled&&h};
74
- `,g=c.default(s.BodyText)`
74
+ `,f=c.default(i.BodyText)`
75
+ flex: 1;
75
76
  cursor: ${({isDisabled:m})=>m?"default":"pointer"};
76
77
  user-select: none;
77
78
  color: ${({theme:m,isDisabled:y})=>y?m.colors.text.disabled:m.colors.text.dark};
78
79
  margin-left: 0.5rem;
79
- `,f=({name:m=t.generateNameHash("check-box"),isDisabled:y=!1,size:k="regular",checked:$=!1,color:v="secondary",label:j,...q})=>d.default.createElement(p,null,d.default.createElement(b,{...q,type:"checkbox",checked:$,"data-validate":"checked",name:m,id:m,color:v,disabled:y,isDisabled:y,boxSize:k}),d.default.createElement(x,{size:k,color:v,isChecked:$,isDisabled:y},d.default.createElement(i.default,null)),j&&d.default.createElement(g,{as:"label",htmlFor:m,isDisabled:y},j));exports.CheckBox=f,exports.default=f;
80
+ `,g=({name:m=o.generateNameHash("check-box"),isDisabled:y=!1,size:k="regular",checked:$=!1,color:v="secondary",label:j,...q})=>d.default.createElement(p,null,d.default.createElement(x,{...q,type:"checkbox",checked:$,"data-validate":"checked",name:m,id:m,color:v,disabled:y,isDisabled:y,boxSize:k}),d.default.createElement(b,{size:k,color:v,isChecked:$,isDisabled:y},d.default.createElement(t.default,null)),j&&d.default.createElement(f,{as:"label",htmlFor:m,isDisabled:y},j));exports.CheckBox=g,exports.default=g;
package/cjs/components/TextArea/index.js CHANGED
@@ -1,10 +1,10 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("styled-components"),l=require("../../theme.js"),t=require("../FieldLabel.js"),a=require("../../typography/BodyText/index.js");function o(b){return b&&typeof b=="object"&&"default"in b?b:{default:b}}require("../../shared/media-queries.js");var d=o(e),s=o(r);const i=r.css`
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("styled-components"),l=require("../../theme.js"),t=require("../FieldLabel.js"),a=require("../../typography/BodyText/index.js");function o(x){return x&&typeof x=="object"&&"default"in x?x:{default:x}}require("../../shared/media-queries.js");var d=o(e),s=o(r);const i=r.css`
2
2
  border: 1px solid ${l.default.colors.gray.light1};
3
3
  color: ${l.default.colors.gray.dark1};
4
4
  fill: ${l.default.colors.gray.light1};
5
- `,n=r.css`
6
- border: 1px solid ${l.default.colors.error.main};
7
5
  `,c=r.css`
6
+ border: 1px solid ${l.default.colors.error.main};
7
+ `,n=r.css`
8
8
  color: ${l.default.colors.text.dark};
9
9
  border: 1px solid ${l.default.colors.text.dark};
10
10
  fill: ${l.default.colors.text.dark};
@@ -20,16 +20,15 @@
20
20
  background-color: ${l.default.colors.background.light};
21
21
 
22
22
  border: 1px solid ${l.default.colors.gray.light1};
23
- border-radius: 0.25em;
24
23
  transition: all 150ms;
25
24
 
26
25
  padding: 0.7rem 0.75rem;
27
26
 
28
- ${({hasError:b,isFocused:x})=>!b&&x&&c}
29
- ${({disabled:b})=>b&&i}
30
- ${({hasError:b})=>b&&n}
31
- ${({centered:b})=>b&&"text-align: center;"}
32
- `,h=s.default.textarea`
27
+ ${({hasError:x,isFocused:$})=>!x&&$&&n}
28
+ ${({disabled:x})=>x&&i}
29
+ ${({hasError:x})=>x&&c}
30
+ ${({centered:x})=>x&&"text-align: center;"}
31
+ `,m=s.default.textarea`
33
32
  ${a.BodyTextStyle}
34
33
 
35
34
  width: 100%;
@@ -38,18 +37,18 @@
38
37
  border: none;
39
38
  background-color: transparent;
40
39
 
41
- ${({resize:b})=>!b&&"resize: none;"}
42
- `,m=s.default.div`
43
- font-family: ${({theme:b})=>b.typography.fontBaseFamily};
44
- `,p=s.default.span`
45
- display: block;
46
- font-family: ${({theme:b})=>b.typography.fontBaseFamily};
47
- font-size: 0.81rem;
48
-
40
+ ${({resize:x})=>!x&&"resize: none;"}
41
+ `,p=s.default.div`
42
+ font-family: ${({theme:x})=>x.typography.fontBaseFamily};
43
+ `,h=s.default.div`
44
+ ${a.CaptionStyle}
49
45
  margin-top: 0.25rem;
50
- margin-left: 0.85rem;
51
-
52
- color: ${({hasError:b})=>b?l.default.colors.error.main:l.default.colors.text.dark};
53
46
 
54
- ${({centered:b})=>b&&"width: 100%; text-align: center; display: block;"}
55
- `,y=({placeholder:b="",isDisabled:x=!1,centered:g=!1,hasError:E=!1,className:j,helperText:q,label:k="",resize:B=!0,...$})=>{const[v,F]=e.useState(!1),z=Boolean($.value);return d.default.createElement(u,{className:j},d.default.createElement(f,{isFocused:v,disabled:x,centered:g,hasError:E,hasPlaceholder:!!b},d.default.createElement(h,{...$,resize:B,onFocus:()=>F(!0),onBlur:()=>F(!1),disabled:x,theme:l.default,placeholder:k&&!v?"":b}),$.suffix&&d.default.createElement(m,null,$.suffix)),k&&d.default.createElement(t.Label,{isFocused:v,centered:g,hasError:E,hasValue:z,disabled:x,theme:l.default},k),q&&d.default.createElement(p,{centered:g,hasError:E},q))};exports.TextArea=y,exports.default=y;
47
+ ${({centered:x})=>x&&"width: 100%; text-align: center;"}
48
+ `,b=s.default.span`
49
+ display: block;
50
+ color: ${({theme:x})=>x.colors.text.disabled};
51
+ `,y=s.default.span`
52
+ display: block;
53
+ color: ${({theme:x})=>x.colors.error.dark};
54
+ `,g=({placeholder:x="",isDisabled:$=!1,centered:v=!1,hasError:z=!1,className:w,helperText:q,label:E="",resize:L=!0,name:F,errors:j,...k})=>{const[B,T]=e.useState(!1),N=Boolean(k.value);return d.default.createElement(u,{className:w},d.default.createElement(f,{isFocused:B,disabled:$,centered:v,hasError:z,hasPlaceholder:!!x},d.default.createElement(m,{...k,name:F,"aria-label":E||F,resize:L,onFocus:()=>T(!0),onBlur:()=>T(!1),disabled:$,theme:l.default,placeholder:E&&!B?"":x}),k.suffix&&d.default.createElement(p,null,k.suffix)),E&&d.default.createElement(t.Label,{htmlFor:F,isFocused:B,centered:v,hasError:z,hasValue:N,disabled:$,theme:l.default},E),(q||j)&&d.default.createElement(h,{centered:v},q&&d.default.createElement(b,null,q),j&&j.map(S=>d.default.createElement(y,{key:S},S))))};exports.TextArea=g,exports.default=g;
package/esm/components/CheckBox/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import t from"react";import i,{css as r}from"styled-components";import{generateNameHash as m}from"../../shared/helpers.js";import s from"../../theme.js";import{BodyText as x}from"../../typography/BodyText/index.js";import g from"../../icons/components/CheckmarkIcon.js";import{BackgroundStyles as u}from"../IconButton.js";import"../../shared/media-queries.js";const b=r`
1
+ import t from"react";import i,{css as r}from"styled-components";import m from"../../icons/components/CheckmarkIcon.js";import{generateNameHash as x}from"../../shared/helpers.js";import s from"../../theme.js";import{BodyText as g}from"../../typography/BodyText/index.js";import{BackgroundStyles as u}from"../IconButton.js";import"../../shared/media-queries.js";const b=r`
2
2
  width: 24px;
3
3
  height: 24px;
4
4
 
@@ -31,7 +31,7 @@ import t from"react";import i,{css as r}from"styled-components";import{generateN
31
31
  background: ${s.colors.gray.light2};
32
32
  `,v=i.div`
33
33
  display: flex;
34
- align-items: center;
34
+ align-items: flex-start;
35
35
  box-sizing: border-box;
36
36
  `,z=i.input.attrs({type:"checkbox"})`
37
37
  position: absolute;
@@ -71,9 +71,10 @@ import t from"react";import i,{css as r}from"styled-components";import{generateN
71
71
  ${e=>e.isDisabled&&y};
72
72
 
73
73
  ${e=>e.isChecked&&e.isDisabled&&$};
74
- `,S=i(x)`
74
+ `,S=i(g)`
75
+ flex: 1;
75
76
  cursor: ${({isDisabled:e})=>e?"default":"pointer"};
76
77
  user-select: none;
77
78
  color: ${({theme:e,isDisabled:o})=>o?e.colors.text.disabled:e.colors.text.dark};
78
79
  margin-left: 0.5rem;
79
- `,h=({name:e=m("check-box"),isDisabled:o=!1,size:c="regular",checked:n=!1,color:a="secondary",label:l,...p})=>t.createElement(v,null,t.createElement(z,{...p,type:"checkbox",checked:n,"data-validate":"checked",name:e,id:e,color:a,disabled:o,isDisabled:o,boxSize:c}),t.createElement(C,{size:c,color:a,isChecked:n,isDisabled:o},t.createElement(g,null)),l&&t.createElement(S,{as:"label",htmlFor:e,isDisabled:o},l));export{h as CheckBox,h as default};
80
+ `,h=({name:e=x("check-box"),isDisabled:o=!1,size:c="regular",checked:n=!1,color:a="secondary",label:l,...p})=>t.createElement(v,null,t.createElement(z,{...p,type:"checkbox",checked:n,"data-validate":"checked",name:e,id:e,color:a,disabled:o,isDisabled:o,boxSize:c}),t.createElement(C,{size:c,color:a,isChecked:n,isDisabled:o},t.createElement(m,null)),l&&t.createElement(S,{as:"label",htmlFor:e,isDisabled:o},l));export{h as CheckBox,h as default};
package/esm/components/TextArea/index.js CHANGED
@@ -1,18 +1,18 @@
1
- import t,{useState as x}from"react";import l,{css as d}from"styled-components";import o from"../../theme.js";import{Label as $}from"../FieldLabel.js";import{BodyTextStyle as h}from"../../typography/BodyText/index.js";import"../../shared/media-queries.js";const b=d`
1
+ import t,{useState as b}from"react";import r,{css as p}from"styled-components";import o from"../../theme.js";import{Label as k}from"../FieldLabel.js";import{BodyTextStyle as E,CaptionStyle as S}from"../../typography/BodyText/index.js";import"../../shared/media-queries.js";const v=p`
2
2
  border: 1px solid ${o.colors.gray.light1};
3
3
  color: ${o.colors.gray.dark1};
4
4
  fill: ${o.colors.gray.light1};
5
- `,k=d`
5
+ `,F=p`
6
6
  border: 1px solid ${o.colors.error.main};
7
- `,B=d`
7
+ `,T=p`
8
8
  color: ${o.colors.text.dark};
9
9
  border: 1px solid ${o.colors.text.dark};
10
10
  fill: ${o.colors.text.dark};
11
- `,F=l.div`
11
+ `,B=r.div`
12
12
  position: relative;
13
13
  padding: 0;
14
14
  display: inline-block;
15
- `,S=l.div`
15
+ `,j=r.div`
16
16
  display: inline-black;
17
17
 
18
18
  color: ${o.colors.gray.light1};
@@ -20,17 +20,16 @@ import t,{useState as x}from"react";import l,{css as d}from"styled-components";i
20
20
  background-color: ${o.colors.background.light};
21
21
 
22
22
  border: 1px solid ${o.colors.gray.light1};
23
- border-radius: 0.25em;
24
23
  transition: all 150ms;
25
24
 
26
25
  padding: 0.7rem 0.75rem;
27
26
 
28
- ${({hasError:e,isFocused:r})=>!e&&r&&B}
29
- ${({disabled:e})=>e&&b}
30
- ${({hasError:e})=>e&&k}
27
+ ${({hasError:e,isFocused:l})=>!e&&l&&T}
28
+ ${({disabled:e})=>e&&v}
29
+ ${({hasError:e})=>e&&F}
31
30
  ${({centered:e})=>e&&"text-align: center;"}
32
- `,v=l.textarea`
33
- ${h}
31
+ `,A=r.textarea`
32
+ ${E}
34
33
 
35
34
  width: 100%;
36
35
  cursor: text;
@@ -39,17 +38,17 @@ import t,{useState as x}from"react";import l,{css as d}from"styled-components";i
39
38
  background-color: transparent;
40
39
 
41
40
  ${({resize:e})=>!e&&"resize: none;"}
42
- `,T=l.div`
41
+ `,I=r.div`
43
42
  font-family: ${({theme:e})=>e.typography.fontBaseFamily};
44
- `,j=l.span`
45
- display: block;
46
- font-family: ${({theme:e})=>e.typography.fontBaseFamily};
47
- font-size: 0.81rem;
48
-
43
+ `,w=r.div`
44
+ ${S}
49
45
  margin-top: 0.25rem;
50
- margin-left: 0.85rem;
51
46
 
52
- color: ${({hasError:e})=>e?o.colors.error.main:o.colors.text.dark};
53
-
54
- ${({centered:e})=>e&&"width: 100%; text-align: center; display: block;"}
55
- `,p=({placeholder:e="",isDisabled:r=!1,centered:s=!1,hasError:i=!1,className:y,helperText:m,label:n="",resize:u=!0,...a})=>{const[c,f]=x(!1),g=Boolean(a.value);return t.createElement(F,{className:y},t.createElement(S,{isFocused:c,disabled:r,centered:s,hasError:i,hasPlaceholder:!!e},t.createElement(v,{...a,resize:u,onFocus:()=>f(!0),onBlur:()=>f(!1),disabled:r,theme:o,placeholder:n&&!c?"":e}),a.suffix&&t.createElement(T,null,a.suffix)),n&&t.createElement($,{isFocused:c,centered:s,hasError:i,hasValue:g,disabled:r,theme:o},n),m&&t.createElement(j,{centered:s,hasError:i},m))};export{p as TextArea,p as default};
47
+ ${({centered:e})=>e&&"width: 100%; text-align: center;"}
48
+ `,C=r.span`
49
+ display: block;
50
+ color: ${({theme:e})=>e.colors.text.disabled};
51
+ `,H=r.span`
52
+ display: block;
53
+ color: ${({theme:e})=>e.colors.error.dark};
54
+ `,x=({placeholder:e="",isDisabled:l=!1,centered:n=!1,hasError:u=!1,className:g,helperText:i,label:a="",resize:$=!0,name:c,errors:d,...s})=>{const[m,y]=b(!1),h=Boolean(s.value);return t.createElement(B,{className:g},t.createElement(j,{isFocused:m,disabled:l,centered:n,hasError:u,hasPlaceholder:!!e},t.createElement(A,{...s,name:c,"aria-label":a||c,resize:$,onFocus:()=>y(!0),onBlur:()=>y(!1),disabled:l,theme:o,placeholder:a&&!m?"":e}),s.suffix&&t.createElement(I,null,s.suffix)),a&&t.createElement(k,{htmlFor:c,isFocused:m,centered:n,hasError:u,hasValue:h,disabled:l,theme:o},a),(i||d)&&t.createElement(w,{centered:n},i&&t.createElement(C,null,i),d&&d.map(f=>t.createElement(H,{key:f},f))))};export{x as TextArea,x as default};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kvdbil/components",
3
- "version": "8.4.2",
3
+ "version": "8.4.3",
4
4
  "sideEffects": false,
5
5
  "main": "cjs/index.js",
6
6
  "module": "esm/index.js",
package/types/components/TextArea/index.d.ts CHANGED
@@ -1,14 +1,18 @@
1
- import { ComponentProps, ReactNode, RefObject } from 'react';
2
- export interface TextAreaProps extends ComponentProps<'textarea'> {
1
+ import { ComponentPropsWithoutRef } from 'react';
2
+ import { ReactNode, RefObject } from 'react';
3
+ export interface TextAreaProps extends ComponentPropsWithoutRef<'textarea'> {
4
+ name?: string;
3
5
  label?: string;
4
6
  resize?: boolean;
5
7
  centered?: boolean;
6
8
  hasError?: boolean;
7
9
  helperText?: string;
8
10
  isDisabled?: boolean;
11
+ errors?: string[];
9
12
  suffix?: ReactNode;
10
13
  ref?: RefObject<HTMLTextAreaElement>;
14
+ forwardRef?: RefObject<HTMLInputElement>;
11
15
  }
12
16
  /** The main text field used */
13
- export declare const TextArea: ({ placeholder, isDisabled, centered, hasError, className, helperText, label, resize, ...props }: TextAreaProps) => JSX.Element;
17
+ export declare const TextArea: ({ placeholder, isDisabled, centered, hasError, className, helperText, label, resize, name, errors, ...props }: TextAreaProps) => JSX.Element;
14
18
  export default TextArea;