@kvdbil/components 12.2.1 → 12.3.0

package/cjs/components/Textfield/index.js

@@ -1,11 +1,11 @@
 "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("styled-components"),t=require("../FieldLabel.js"),l=require("../../typography/BodyText/index.js"),a=require("../../shared/helpers.js");function o(y){return y&&typeof y=="object"&&"default"in y?y:{default:y}}require("../../shared/media-queries.js");var d=o(e),s=o(r);const i=r.css`
-  border: 1px solid ${({theme:y})=>y.colors.gray.light2}};
+  border: 1px solid ${({theme:y})=>y.colors.gray.light2};
   color: ${({theme:y})=>y.colors.text.disabled};
   fill: ${({theme:y})=>y.colors.text.disabled};
 `,n=r.css`
   border: 2px solid ${({theme:y})=>y.colors.error.dark};
 `,c=r.css`
-  border: 2px solid ${({theme:y})=>y.colors.gray.dark5}};
+  border: 2px solid ${({theme:y})=>y.colors.gray.dark5};
   color: ${({theme:y})=>y.colors.text.dark};
   fill: ${({theme:y})=>y.colors.text.dark};
 `,u=s.default.div`
@@ -63,4 +63,4 @@
 `,x=s.default.span`
   display: block;
   color: ${({theme:y})=>y.colors.error.dark};
-`,g=({placeholder:y="",isDisabled:k=!1,centered:F=!1,hasError:w=!1,className:z,helperText:j,label:E="",onBlur:L=()=>null,onFocus:P=()=>null,forwardRef:_,suffix:T,name:q=a.generateNameHash("text-input"),errors:v,...N})=>{const[B,S]=e.useState(!1),C=Boolean(N.value);return d.default.createElement(u,{className:z},d.default.createElement(m,{isFocused:B,disabled:k,centered:F,hasError:w,hasPlaceholder:!!y},d.default.createElement(h,{...N,id:q,name:q,"aria-label":E||q,ref:_,onFocus:$=>{S(!0),P($)},onBlur:$=>{S(!1),L($)},disabled:k,placeholder:E&&!B?"":y}),T&&d.default.createElement(f,null,T)),E&&d.default.createElement(t.Label,{htmlFor:q,isFocused:B,centered:F,hasError:w,hasValue:C,disabled:k},E),(j||v)&&d.default.createElement(p,{centered:F},j&&d.default.createElement(b,null,j),v&&v.map($=>d.default.createElement(x,{key:$},$))))};exports.TextField=g,exports.default=g;
+`,g=({placeholder:y="",isDisabled:k=!1,centered:F=!1,hasError:w=!1,className:z,helperText:j,label:E="",onBlur:L=()=>null,onFocus:P=()=>null,forwardRef:_,suffix:T,name:v=a.generateNameHash("text-input"),errors:B,isAutoFocused:A=!1,...N})=>{const[q,S]=e.useState(!1),C=Boolean(N.value);return d.default.createElement(u,{className:z},d.default.createElement(m,{isFocused:q,disabled:k,centered:F,hasError:w,hasPlaceholder:!!y},d.default.createElement(h,{...N,id:v,name:v,"aria-label":E||v,ref:_,onFocus:$=>{S(!0),P($)},onBlur:$=>{S(!1),L($)},disabled:k,placeholder:E&&!q?"":y,autoFocus:A}),T&&d.default.createElement(f,null,T)),E&&d.default.createElement(t.Label,{htmlFor:v,isFocused:q,centered:F,hasError:w,hasValue:C,disabled:k},E),(j||B)&&d.default.createElement(p,{centered:F},j&&d.default.createElement(b,null,j),B&&B.map($=>d.default.createElement(x,{key:$},$))))};exports.TextField=g,exports.default=g;

package/esm/components/Textfield/index.js

@@ -1,18 +1,18 @@
-import t,{useState as S}from"react";import o,{css as p}from"styled-components";import{Label as v}from"../FieldLabel.js";import{BodyTextStyle as B,CaptionStyle as T}from"../../typography/BodyText/index.js";import{generateNameHash as j}from"../../shared/helpers.js";import"../../shared/media-queries.js";const w=p`
-  border: 1px solid ${({theme:e})=>e.colors.gray.light2}};
+import o,{useState as v}from"react";import t,{css as p}from"styled-components";import{Label as B}from"../FieldLabel.js";import{BodyTextStyle as T,CaptionStyle as j}from"../../typography/BodyText/index.js";import{generateNameHash as w}from"../../shared/helpers.js";import"../../shared/media-queries.js";const H=p`
+  border: 1px solid ${({theme:e})=>e.colors.gray.light2};
   color: ${({theme:e})=>e.colors.text.disabled};
   fill: ${({theme:e})=>e.colors.text.disabled};
-`,H=p`
-  border: 2px solid ${({theme:e})=>e.colors.error.dark};
 `,I=p`
-  border: 2px solid ${({theme:e})=>e.colors.gray.dark5}};
+  border: 2px solid ${({theme:e})=>e.colors.error.dark};
+`,z=p`
+  border: 2px solid ${({theme:e})=>e.colors.gray.dark5};
   color: ${({theme:e})=>e.colors.text.dark};
   fill: ${({theme:e})=>e.colors.text.dark};
-`,z=o.div`
+`,C=t.div`
   position: relative;
   padding: 0;
   display: block;
-`,C=o.div`
+`,L=t.div`
   display: flex;
   text-align: center;
   align-items: center;
@@ -26,12 +26,12 @@ import t,{useState as S}from"react";import o,{css as p}from"styled-components";i
 
   padding: 0.75rem 0.6rem;
 
-  ${({hasError:e,isFocused:l})=>!e&&l&&I}
-  ${({disabled:e})=>e&&w}
-  ${({hasError:e})=>e&&H}
+  ${({hasError:e,isFocused:l})=>!e&&l&&z}
+  ${({disabled:e})=>e&&H}
+  ${({hasError:e})=>e&&I}
   ${({centered:e})=>e&&"text-align: center;"}
-`,L=o.input`
-  ${B}
+`,W=t.input`
+  ${T}
   width: 100%;
   cursor: text;
   outline: none;
@@ -42,7 +42,7 @@ import t,{useState as S}from"react";import o,{css as p}from"styled-components";i
     color: ${({theme:e})=>e.colors.text.disabled};
     fill: ${({theme:e})=>e.colors.text.disabled};
   }
-`,W=o.span`
+`,_=t.span`
   display: flex;
   font-family: ${({theme:e})=>e.typography.fontBaseFamily};
   font-size: 1.25rem;
@@ -52,15 +52,15 @@ import t,{useState as S}from"react";import o,{css as p}from"styled-components";i
     width: 1.375rem;
     height: 1.375rem;
   }
-`,_=o.div`
-  ${T}
+`,q=t.div`
+  ${j}
   margin-top: 0.25rem;
 
   ${({centered:e})=>e&&"width: 100%; text-align: center;"}
-`,q=o.span`
+`,A=t.span`
   display: block;
   color: ${({theme:e})=>e.colors.text.disabled};
-`,A=o.span`
+`,N=t.span`
   display: block;
   color: ${({theme:e})=>e.colors.error.dark};
-`,f=({placeholder:e="",isDisabled:l=!1,centered:n=!1,hasError:m=!1,className:g,helperText:d,label:s="",onBlur:b=()=>null,onFocus:$=()=>null,forwardRef:h,suffix:u,name:a=j("text-input"),errors:i,...x})=>{const[c,y]=S(!1),k=Boolean(x.value),E=r=>{y(!0),$(r)},F=r=>{y(!1),b(r)};return t.createElement(z,{className:g},t.createElement(C,{isFocused:c,disabled:l,centered:n,hasError:m,hasPlaceholder:!!e},t.createElement(L,{...x,id:a,name:a,"aria-label":s||a,ref:h,onFocus:E,onBlur:F,disabled:l,placeholder:s&&!c?"":e}),u&&t.createElement(W,null,u)),s&&t.createElement(v,{htmlFor:a,isFocused:c,centered:n,hasError:m,hasValue:k,disabled:l},s),(d||i)&&t.createElement(_,{centered:n},d&&t.createElement(q,null,d),i&&i.map(r=>t.createElement(A,{key:r},r))))};export{f as TextField,f as default};
+`,y=({placeholder:e="",isDisabled:l=!1,centered:n=!1,hasError:m=!1,className:g,helperText:d,label:s="",onBlur:b=()=>null,onFocus:$=()=>null,forwardRef:h,suffix:u,name:a=w("text-input"),errors:i,isAutoFocused:k=!1,...x})=>{const[c,f]=v(!1),F=Boolean(x.value),E=r=>{f(!0),$(r)},S=r=>{f(!1),b(r)};return o.createElement(C,{className:g},o.createElement(L,{isFocused:c,disabled:l,centered:n,hasError:m,hasPlaceholder:!!e},o.createElement(W,{...x,id:a,name:a,"aria-label":s||a,ref:h,onFocus:E,onBlur:S,disabled:l,placeholder:s&&!c?"":e,autoFocus:k}),u&&o.createElement(_,null,u)),s&&o.createElement(B,{htmlFor:a,isFocused:c,centered:n,hasError:m,hasValue:F,disabled:l},s),(d||i)&&o.createElement(q,{centered:n},d&&o.createElement(A,null,d),i&&i.map(r=>o.createElement(N,{key:r},r))))};export{y as TextField,y as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kvdbil/components",
-  "version": "12.2.1",
+  "version": "12.3.0",
   "sideEffects": false,
   "main": "cjs/index.js",
   "module": "esm/index.js",

package/types/components/Textfield/index.d.ts

@@ -8,7 +8,8 @@ export interface TextFieldProps extends ComponentPropsWithoutRef<'input'> {
     suffix?: ReactNode;
     forwardRef?: RefObject<HTMLInputElement>;
     errors?: string[];
+    isAutoFocused?: boolean;
 }
 /** The main text field used */
-export declare const TextField: ({ placeholder, isDisabled, centered, hasError, className, helperText, label, onBlur, onFocus, forwardRef, suffix, name, errors, ...props }: TextFieldProps) => JSX.Element;
+export declare const TextField: ({ placeholder, isDisabled, centered, hasError, className, helperText, label, onBlur, onFocus, forwardRef, suffix, name, errors, isAutoFocused, ...props }: TextFieldProps) => JSX.Element;
 export default TextField;