@kvdbil/components 17.12.2 → 17.12.3

package/cjs/components/FieldLabel.js

@@ -8,11 +8,11 @@
   right: 0;
   margin-right: auto;
   margin-left: auto;
-`,n=t.default.label`
+`,l=t.default.label`
   ${r.BodyTextStyle}
   pointer-events: none;
   position: absolute;
-  max-width: calc(100% - 2rem);
+  max-width: ${({suffixWidth:e,hasValue:r,isFocused:o})=>!e||r||o?"calc(100% - 2rem)":`calc(100% - 2rem - ${e}px)`};
   z-index: 1;
   top: ${({height:e})=>e?`calc(${e}rem - 5px)`:"12px"};
   left: calc(0.75rem + 2px);
@@ -23,7 +23,7 @@
   text-overflow: ellipsis;
   background: transparent;
 
-  ${({theme:e,hasValue:r,isFocused:o})=>(r||o)&&`\n  span {\n    display: block;\n    width: 100%;\n    height: 8px;\n    position: absolute;\n    top: 6px;\n    left: 0;\n    background-color: ${e.colors.background.light};\n    z-index: -1;\n  }\n  `}
+  ${({theme:e,hasValue:r,isFocused:o})=>(r||o)&&`\n  span {\n    display: block;\n    width: 100%;\n    height: 4px;\n    position: absolute;\n    top: 5px;\n    left: 0;\n    background-color: ${e.colors.background.light};\n    z-index: -1;\n  }\n  `}
 
   ${({hasValue:r,isFocused:o,height:t,hasError:s})=>(r||o)&&((r,o)=>e.css`
   transform: translateY(${r});
@@ -37,4 +37,4 @@
   ${({centered:e,hasValue:r,isFocused:o})=>(r||o)&&e&&i}
   ${({isFocused:e})=>e&&s}
   ${({disabled:e})=>e&&a}
-`;exports.Label=n;
+`;exports.Label=l;

package/cjs/components/Textfield/index.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),l=require("styled-components"),o=require("../FieldLabel.js"),s=require("../../typography/BodyText/index.js"),a=require("../../hooks/useNameAndId.js");require("../../shared/media-queries.js"),require("../../shared/helpers.js");var d,t=(d=l)&&d.__esModule?d:{default:d};const i=l.css`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),l=require("styled-components"),s=require("../FieldLabel.js"),o=require("../../typography/BodyText/index.js"),t=require("../../hooks/useNameAndId.js");require("../../shared/media-queries.js"),require("../../shared/helpers.js");var a,d=(a=l)&&a.__esModule?a:{default:a};const i=l.css`
   border: 1px solid ${({theme:e})=>e.colors.grayscaleToned.light2};
   color: ${({theme:e})=>e.colors.text.disabled};
   fill: ${({theme:e})=>e.colors.text.disabled};
@@ -8,11 +8,11 @@
   border: 2px solid ${({theme:e})=>e.colors.grayscaleToned.dark5};
   color: ${({theme:e})=>e.colors.text.dark};
   fill: ${({theme:e})=>e.colors.text.dark};
-`,h=t.default.div`
+`,u=d.default.div`
   position: relative;
   padding: 0;
   display: block;
-`,u=t.default.div`
+`,h=d.default.div`
   display: flex;
   text-align: center;
   align-items: center;
@@ -30,8 +30,8 @@
   ${({disabled:e})=>e&&i}
   ${({hasError:e})=>e&&n}
   ${({centered:e})=>e&&"text-align: center;"}
-`,m=t.default.input`
-  ${s.BodyTextStyle}
+`,m=d.default.input`
+  ${o.BodyTextStyle}
   width: 100%;
   cursor: text;
   outline: none;
@@ -42,25 +42,26 @@
     color: ${({theme:e})=>e.colors.text.disabled};
     fill: ${({theme:e})=>e.colors.text.disabled};
   }
-`,x=t.default.span`
+`,x=d.default.span`
   display: flex;
   font-family: ${({theme:e})=>e.typography.fontBaseFamily};
   font-size: 1.25rem;
   line-height: 1.5rem;
+  white-space: nowrap;
 
   svg {
     width: 1.375rem;
     height: 1.375rem;
   }
-`,p=t.default.div`
-  ${s.CaptionStyle}
+`,p=d.default.div`
+  ${o.CaptionStyle}
   margin-top: 0.25rem;
 
   ${({centered:e})=>e&&"width: 100%; text-align: center;"}
-`,b=t.default.span`
+`,b=d.default.span`
   display: block;
   color: ${({theme:e})=>e.colors.text.disabled};
-`,$=t.default.span`
+`,f=d.default.span`
   display: block;
   color: ${({theme:e})=>e.colors.error.dark};
-`,f=({placeholder:l="",isDisabled:s=!1,centered:d=!1,hasError:t=!1,className:i,helperText:n,label:c="",onBlur:f=(()=>null),onFocus:g=(()=>null),forwardRef:y,suffix:j,name:v,errors:k,isAutoFocused:F=!1,...q})=>{const[T,B]=r.useState(!1),A=!!q.value,E=k&&Array.isArray(k)&&k?.length>0,{name:w,id:N}=a.useNameAndId("text-input",v),_=k?.map(((e,r)=>`${N}-error-${r}`))??[],S=[n?`${N}-helper`:null,..._].filter(Boolean).join(" ");return e.jsxs(h,{className:i,children:[e.jsxs(u,{isFocused:T,disabled:s,centered:d,hasError:t,hasPlaceholder:!!l,children:[e.jsx(m,{...q,id:N,name:w,"aria-labelledby":c?`${N}-label`:void 0,"aria-describedby":S||void 0,"aria-invalid":E||t,ref:y,onFocus:e=>{B(!0),g(e)},onBlur:e=>{B(!1),f(e)},disabled:s,placeholder:c&&!T?"":l,autoFocus:F}),j&&e.jsx(x,{children:j})]}),c&&e.jsx(o.Label,{id:`${N}-label`,htmlFor:N,isFocused:T,centered:d,hasError:t,hasValue:A,disabled:s,children:e.jsxs(e.Fragment,{children:[c,e.jsx("span",{})]})}),(n||E)&&e.jsxs(p,{centered:d,children:[n&&e.jsx(b,{id:`${N}-helper`,children:n}),E&&k.map(((r,l)=>e.jsx($,{id:`${N}-error-${l}`,role:"alert","aria-live":"assertive",children:r},`${N}-error-${l}`)))]})]})};exports.TextField=f,exports.default=f;
+`,$=({placeholder:l="",isDisabled:o=!1,centered:a=!1,hasError:d=!1,className:i,helperText:n,label:c="",onBlur:$=(()=>null),onFocus:g=(()=>null),forwardRef:y,suffix:j,name:v,errors:k,isAutoFocused:F=!1,...q})=>{const[T,w]=r.useState(!1),[B,E]=r.useState(void 0),A=r.useRef(null),N=!!q.value,S=k&&Array.isArray(k)&&k?.length>0,{name:_,id:z}=t.useNameAndId("text-input",v),I=k?.map(((e,r)=>`${z}-error-${r}`))??[],L=[n?`${z}-helper`:null,...I].filter(Boolean).join(" ");return r.useEffect((()=>{A.current&&E(A.current.offsetWidth)}),[A.current]),e.jsxs(u,{className:i,children:[e.jsxs(h,{isFocused:T,disabled:o,centered:a,hasError:d,hasPlaceholder:!!l,children:[e.jsx(m,{...q,id:z,name:_,"aria-labelledby":c?`${z}-label`:void 0,"aria-describedby":L||void 0,"aria-invalid":S||d,ref:y,onFocus:e=>{w(!0),g(e)},onBlur:e=>{w(!1),$(e)},disabled:o,placeholder:c&&!T?"":l,autoFocus:F}),j&&e.jsx(x,{ref:A,children:j})]}),c&&e.jsx(s.Label,{id:`${z}-label`,htmlFor:z,isFocused:T,centered:a,hasError:d,hasValue:N,disabled:o,suffixWidth:B,children:e.jsxs(e.Fragment,{children:[c,e.jsx("span",{})]})}),(n||S)&&e.jsxs(p,{centered:a,children:[n&&e.jsx(b,{id:`${z}-helper`,children:n}),S&&k.map(((r,l)=>e.jsx(f,{id:`${z}-error-${l}`,role:"alert","aria-live":"assertive",children:r},`${z}-error-${l}`)))]})]})};exports.TextField=$,exports.default=$;

package/esm/components/FieldLabel.js

@@ -1,51 +1,51 @@
-import s,{css as t}from"styled-components";import{BodyTextStyle as i}from"../typography/BodyText/index.js";import"react/jsx-runtime";import"../shared/media-queries.js";const l=(o,e)=>t`
-  transform: translateY(${o});
+import a,{css as t}from"styled-components";import{BodyTextStyle as i}from"../typography/BodyText/index.js";import"react/jsx-runtime";import"../shared/media-queries.js";const l=(e,o)=>t`
+  transform: translateY(${e});
   line-height: 0.875rem;
   font-size: 0.75rem;
   transform-origin: 0 0;
   padding: 0 5px;
   left: 0.5rem;
-  color: ${({theme:r})=>e?r.colors.error.dark:r.colors.text.dark};
+  color: ${({theme:r})=>o?r.colors.error.dark:r.colors.text.dark};
 `,c=t`
-  color: ${({theme:o,hasError:e})=>e?o.colors.error.dark:o.colors.text.dark};
+  color: ${({theme:e,hasError:o})=>o?e.colors.error.dark:e.colors.text.dark};
 `,n=t`
-  color: ${({theme:o})=>o.colors.text.disabled};
+  color: ${({theme:e})=>e.colors.text.disabled};
 `,d=t`
   width: max-content;
   left: 0;
   right: 0;
   margin-right: auto;
   margin-left: auto;
-`,h=s.label`
+`,h=a.label`
   ${i}
   pointer-events: none;
   position: absolute;
-  max-width: calc(100% - 2rem);
+  max-width: ${({suffixWidth:e,hasValue:o,isFocused:r})=>e&&!o&&!r?`calc(100% - 2rem - ${e}px)`:"calc(100% - 2rem)"};
   z-index: 1;
-  top: ${({height:o})=>o?`calc(${o}rem - 5px)`:"12px"};
+  top: ${({height:e})=>e?`calc(${e}rem - 5px)`:"12px"};
   left: calc(0.75rem + 2px);
   transition: 150ms;
-  color: ${({theme:o})=>o.colors.text.dark};
+  color: ${({theme:e})=>e.colors.text.dark};
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   background: transparent;
 
-  ${({theme:o,hasValue:e,isFocused:r})=>(e||r)&&`
+  ${({theme:e,hasValue:o,isFocused:r})=>(o||r)&&`
   span {
     display: block;
     width: 100%;
-    height: 8px;
+    height: 4px;
     position: absolute;
-    top: 6px;
+    top: 5px;
     left: 0;
-    background-color: ${o.colors.background.light};
+    background-color: ${e.colors.background.light};
     z-index: -1;
   }
   `}
 
-  ${({hasValue:o,isFocused:e,height:r,hasError:a})=>(o||e)&&l(`${r?`calc(-${r}rem - 2px)`:"-18px"}`,a)}
-  ${({centered:o,hasValue:e,isFocused:r})=>(e||r)&&o&&d}
-  ${({isFocused:o})=>o&&c}
-  ${({disabled:o})=>o&&n}
+  ${({hasValue:e,isFocused:o,height:r,hasError:s})=>(e||o)&&l(`${r?`calc(-${r}rem - 2px)`:"-18px"}`,s)}
+  ${({centered:e,hasValue:o,isFocused:r})=>(o||r)&&e&&d}
+  ${({isFocused:e})=>e&&c}
+  ${({disabled:e})=>e&&n}
 `;export{h as Label};

package/esm/components/Textfield/index.js

@@ -1,18 +1,18 @@
-import{jsxs as c,jsx as t,Fragment as z}from"react/jsx-runtime";import{useState as I}from"react";import o,{css as $}from"styled-components";import{Label as R}from"../FieldLabel.js";import{BodyTextStyle as V,CaptionStyle as q}from"../../typography/BodyText/index.js";import{useNameAndId as C}from"../../hooks/useNameAndId.js";import"../../shared/media-queries.js";import"../../shared/helpers.js";const D=$`
+import{jsxs as m,jsx as t,Fragment as V}from"react/jsx-runtime";import{useState as y,useRef as q,useEffect as C}from"react";import o,{css as u}from"styled-components";import{Label as D}from"../FieldLabel.js";import{BodyTextStyle as G,CaptionStyle as H}from"../../typography/BodyText/index.js";import{useNameAndId as I}from"../../hooks/useNameAndId.js";import"../../shared/media-queries.js";import"../../shared/helpers.js";const J=u`
   border: 1px solid ${({theme:e})=>e.colors.grayscaleToned.light2};
   color: ${({theme:e})=>e.colors.text.disabled};
   fill: ${({theme:e})=>e.colors.text.disabled};
-`,G=$`
+`,K=u`
   border: 2px solid ${({theme:e})=>e.colors.error.dark};
-`,H=$`
+`,O=u`
   border: 2px solid ${({theme:e})=>e.colors.grayscaleToned.dark5};
   color: ${({theme:e})=>e.colors.text.dark};
   fill: ${({theme:e})=>e.colors.text.dark};
-`,L=o.div`
+`,P=o.div`
   position: relative;
   padding: 0;
   display: block;
-`,M=o.div`
+`,Q=o.div`
   display: flex;
   text-align: center;
   align-items: center;
@@ -26,12 +26,12 @@ import{jsxs as c,jsx as t,Fragment as z}from"react/jsx-runtime";import{useState
 
   padding: 0.75rem 0.6rem;
 
-  ${({hasError:e,isFocused:a})=>!e&&a&&H}
-  ${({disabled:e})=>e&&D}
-  ${({hasError:e})=>e&&G}
+  ${({hasError:e,isFocused:i})=>!e&&i&&O}
+  ${({disabled:e})=>e&&J}
+  ${({hasError:e})=>e&&K}
   ${({centered:e})=>e&&"text-align: center;"}
-`,O=o.input`
-  ${V}
+`,U=o.input`
+  ${G}
   width: 100%;
   cursor: text;
   outline: none;
@@ -42,25 +42,26 @@ import{jsxs as c,jsx as t,Fragment as z}from"react/jsx-runtime";import{useState
     color: ${({theme:e})=>e.colors.text.disabled};
     fill: ${({theme:e})=>e.colors.text.disabled};
   }
-`,P=o.span`
+`,X=o.span`
   display: flex;
   font-family: ${({theme:e})=>e.typography.fontBaseFamily};
   font-size: 1.25rem;
   line-height: 1.5rem;
+  white-space: nowrap;
 
   svg {
     width: 1.375rem;
     height: 1.375rem;
   }
 `,_=o.div`
-  ${q}
+  ${H}
   margin-top: 0.25rem;
 
   ${({centered:e})=>e&&"width: 100%; text-align: center;"}
-`,J=o.span`
+`,M=o.span`
   display: block;
   color: ${({theme:e})=>e.colors.text.disabled};
-`,K=o.span`
+`,Y=o.span`
   display: block;
   color: ${({theme:e})=>e.colors.error.dark};
-`,g=({placeholder:e="",isDisabled:a=!1,centered:m=!1,hasError:h=!1,className:y,helperText:s,label:d="",onBlur:k=()=>null,onFocus:v=()=>null,forwardRef:F,suffix:f,name:B,errors:i,isAutoFocused:T=!1,...u})=>{const[p,x]=I(!1),w=!!u.value,b=i&&Array.isArray(i)&&i?.length>0,{name:E,id:r}=C("text-input",B),j=i?.map((l,n)=>`${r}-error-${n}`)??[],A=[s?`${r}-helper`:null,...j].filter(Boolean).join(" "),N=l=>{x(!0),v(l)},S=l=>{x(!1),k(l)};return c(L,{className:y,children:[c(M,{isFocused:p,disabled:a,centered:m,hasError:h,hasPlaceholder:!!e,children:[t(O,{...u,id:r,name:E,"aria-labelledby":d?`${r}-label`:void 0,"aria-describedby":A||void 0,"aria-invalid":b||h,ref:F,onFocus:N,onBlur:S,disabled:a,placeholder:d&&!p?"":e,autoFocus:T}),f&&t(P,{children:f})]}),d&&t(R,{id:`${r}-label`,htmlFor:r,isFocused:p,centered:m,hasError:h,hasValue:w,disabled:a,children:c(z,{children:[d,t("span",{})]})}),(s||b)&&c(_,{centered:m,children:[s&&t(J,{id:`${r}-helper`,children:s}),b&&i.map((l,n)=>t(K,{id:`${r}-error-${n}`,role:"alert","aria-live":"assertive",children:l},`${r}-error-${n}`))]})]})};export{g as TextField,g as default};
+`,k=({placeholder:e="",isDisabled:i=!1,centered:h=!1,hasError:p=!1,className:v,helperText:s,label:d="",onBlur:F=()=>null,onFocus:w=()=>null,forwardRef:B,suffix:$,name:E,errors:a,isAutoFocused:T=!1,...x})=>{const[b,g]=y(!1),[A,S]=y(void 0),n=q(null),j=!!x.value,f=a&&Array.isArray(a)&&a?.length>0,{name:N,id:r}=I("text-input",E),R=a?.map((l,c)=>`${r}-error-${c}`)??[],W=[s?`${r}-helper`:null,...R].filter(Boolean).join(" "),z=l=>{g(!0),w(l)},L=l=>{g(!1),F(l)};return C(()=>{n.current&&S(n.current.offsetWidth)},[n.current]),m(P,{className:v,children:[m(Q,{isFocused:b,disabled:i,centered:h,hasError:p,hasPlaceholder:!!e,children:[t(U,{...x,id:r,name:N,"aria-labelledby":d?`${r}-label`:void 0,"aria-describedby":W||void 0,"aria-invalid":f||p,ref:B,onFocus:z,onBlur:L,disabled:i,placeholder:d&&!b?"":e,autoFocus:T}),$&&t(X,{ref:n,children:$})]}),d&&t(D,{id:`${r}-label`,htmlFor:r,isFocused:b,centered:h,hasError:p,hasValue:j,disabled:i,suffixWidth:A,children:m(V,{children:[d,t("span",{})]})}),(s||f)&&m(_,{centered:h,children:[s&&t(M,{id:`${r}-helper`,children:s}),f&&a.map((l,c)=>t(Y,{id:`${r}-error-${c}`,role:"alert","aria-live":"assertive",children:l},`${r}-error-${c}`))]})]})};export{k as TextField,k as default};

package/package.json

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

package/package.json.tmp

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

package/types/components/FieldLabel.d.ts

@@ -5,4 +5,5 @@ export declare const Label: import("styled-components/dist/types").IStyledCompon
     centered?: boolean;
     hasError: boolean;
     height?: number;
+    suffixWidth?: number;
 }>> & string;