@volvo-cars/react-forms - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

dist/checkbox.d.ts

@@ -37,3 +37,3 @@ /// <reference types="react" />
      */
-    onChange: React.FormEventHandler<HTMLInputElement>;
+    onChange: React.ChangeEventHandler<HTMLInputElement>;
     /**
@@ -57,3 +57,3 @@ * Set the error message of a controlled checkbox. Will mark the input invalid.
      */
-    onChange?: React.FormEventHandler<HTMLInputElement>;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
     'aria-invalid'?: never;
@@ -66,3 +66,3 @@ errorMessage?: never;
 export type CheckboxProps = BaseCheckboxProps & (ControlledProps | UncontrolledProps);
-export declare function Checkbox({ label, id, hint, hidden, dir, lang, translate, slot, errorMessage, ...props }: CheckboxProps): JSX.Element;
+export declare function Checkbox({ label, id, hint, hidden, dir, lang, translate, slot, errorMessage, isValid, ...props }: CheckboxProps): JSX.Element;
 export {};

dist/date-input.d.ts

@@ -31,3 +31,3 @@ /// <reference types="react" />
      */
-    onChange: React.FormEventHandler<HTMLInputElement>;
+    onChange: React.ChangeEventHandler<HTMLInputElement>;
     /**
@@ -51,3 +51,3 @@ * Set the error message of a controlled input. Will mark the input invalid.
      */
-    onChange?: React.FormEventHandler<HTMLInputElement>;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
     'aria-invalid'?: never;
@@ -60,3 +60,3 @@ errorMessage?: never;
 export type DateInputProps = BaseDateInputProps & (ControlledProps | UncontrolledProps);
-export declare function DateInput({ hint, id, label, hidden, dir, errorMessage, lang, translate, slot, value, defaultValue, ...props }: DateInputProps): JSX.Element;
+export declare function DateInput({ hint, id, label, hidden, dir, errorMessage, lang, translate, slot, value, defaultValue, isValid, ...props }: DateInputProps): JSX.Element;
 export {};

dist/esm/index.js

@@ -1,2 +0,2 @@
-import{useState as A}from"react";import{jsx as V}from"react/jsx-runtime";function v({children:e,id:o,className:r=""}){return V("p",{id:o,className:`micro text-feedback-red empty:hidden ${r}`.trim(),role:"alert",children:e})}import{jsx as D}from"react/jsx-runtime";function u({children:e,id:o,className:r=""}){return D("p",{id:o,className:`micro text-secondary ${r}`.trim(),children:e})}import{useId as q}from"react";function c(e){let o=q();return{inputId:e||o+"-input",errorId:o+"-error",hintId:o+"-hint"}}import{jsx as E,jsxs as $}from"react/jsx-runtime";function w({hint:e,id:o,label:r,hidden:m,dir:f,errorMessage:t,lang:P,translate:g,slot:i,value:s,defaultValue:n,...a}){let[l,d]=A(!s&&!n);function x(p){let{validity:y}=p.currentTarget,R=p.currentTarget.required;R||(p.currentTarget.required=!0),d(y.valueMissing&&!y.badInput),R||(p.currentTarget.required=!1)}let{inputId:b,errorId:I,hintId:C}=c(o),h=a["aria-invalid"]||!!t;return $("div",{className:"v-input-floating-label",hidden:m,dir:f,lang:P,translate:g,slot:i,children:[E("label",{htmlFor:b,children:r}),E("input",{...a,type:"date",id:b,value:s,defaultValue:n,onBlur:p=>{a.onBlur?.(p),x(p)},onChange:p=>{a.onChange?.(p),x(p)},"data-blank":l?"":void 0,"aria-invalid":h?!0:void 0,"aria-errormessage":t?I:void 0,"aria-describedby":e?C:void 0}),E(v,{id:I,className:"mt-4",children:t}),e&&E(u,{id:C,className:"mt-4",children:e})]})}import{jsx as T,jsxs as z}from"react/jsx-runtime";function K({hint:e,id:o,label:r,hidden:m,dir:f,errorMessage:t,lang:P,translate:g,slot:i,...s}){let{inputId:n,errorId:a,hintId:l}=c(o),d=s["aria-invalid"]||!!t;return z("div",{className:"v-input-floating-label",hidden:m,dir:f,lang:P,translate:g,slot:i,children:[T("label",{htmlFor:n,children:r}),T("input",{placeholder:" ",...s,id:n,type:"text","aria-invalid":d?!0:void 0,"aria-errormessage":t?a:void 0,"aria-describedby":e?l:void 0}),T(v,{id:a,className:"mt-4",children:t}),e&&T(u,{id:l,className:"mt-4",children:e})]})}import{Children as J,isValidElement as O,useState as Q}from"react";import{jsx as k,jsxs as L}from"react/jsx-runtime";function W({hint:e,id:o,label:r,hidden:m,dir:f,errorMessage:t,lang:P,translate:g,slot:i,value:s,defaultValue:n,children:a,...l}){let d=!1;J.forEach(a,H=>{O(H)&&H.type==="option"&&H.props.value===""&&(d=!0)});let[x,b]=Q(!n),I=typeof s=="string",{inputId:C,errorId:h,hintId:p}=c(o),y=l["aria-invalid"]||!!t,R=!d&&(I?!s:x);return L("div",{className:"v-input-floating-label",hidden:m,dir:f,lang:P,translate:g,slot:i,children:[k("label",{htmlFor:C,children:r}),L("select",{...l,id:C,onChange:I||d?l.onChange:H=>{l.onChange?.(H),b(!H.target.value)},value:s,defaultValue:n,"data-blank":R?"":void 0,"aria-invalid":y?"true":void 0,"aria-errormessage":t?h:void 0,"aria-describedby":e?p:void 0,children:[!n&&!d&&k("option",{value:"",hidden:!R,disabled:!R}),a]}),k(v,{id:h,className:"mt-4",children:t}),e&&k(u,{id:p,className:"mt-4",children:e})]})}import{jsx as M,jsxs as U}from"react/jsx-runtime";function X({label:e,id:o,hint:r,hidden:m,dir:f,lang:t,translate:P,slot:g,errorMessage:i,...s}){let{inputId:n,hintId:a,errorId:l}=c(o),d=s["aria-invalid"]||!!i;return U("div",{className:"flex-row",hidden:m,dir:f,lang:t,translate:P,slot:g,children:[M("input",{...s,type:"checkbox",id:n,"aria-invalid":d?!0:void 0,"aria-errormessage":i?l:void 0,"aria-describedby":r?a:void 0}),U("div",{className:"flex-col stack-4 ml-8",children:[M("label",{htmlFor:n,children:e}),M(v,{id:l,children:i}),r&&M(u,{id:a,children:r})]})]})}import{useContext as _}from"react";import{createContext as Y}from"react";import{jsx as B,jsxs as F}from"react/jsx-runtime";function Z({legend:e,id:o,hint:r,name:m,children:f,required:t,defaultValue:P,value:g,hidden:i,dir:s,lang:n,translate:a,slot:l,onChange:d,errorMessage:x,...b}){let{inputId:I,hintId:C,errorId:h}=c(o),p=b["aria-invalid"]||!!x;return F("fieldset",{...b,hidden:i,dir:s,lang:n,translate:a,slot:l,id:I,role:"radiogroup","aria-invalid":p?!0:void 0,"aria-errormessage":x?h:void 0,"aria-describedby":r?C:void 0,"aria-required":t?!0:void 0,children:[B("legend",{className:"mb-4",children:e}),r&&B(u,{id:C,className:"mb-16",children:r}),F("div",{className:"stack-8",hidden:i,children:[B(v,{id:h,className:"mb-16",children:x}),B(N.Provider,{value:{name:m,required:t,value:g,defaultValue:P,onChange:d},children:f})]})]})}var N=Y({});import{jsx as G,jsxs as S}from"react/jsx-runtime";function j({label:e,id:o,hint:r,hidden:m,dir:f,lang:t,translate:P,slot:g,value:i,...s}){let{inputId:n,hintId:a}=c(o),{value:l,defaultValue:d,...x}=_(N),b,I;return typeof l<"u"?b=i===l:typeof d<"u"&&i===d&&(I=!0),S("div",{className:"flex-row",hidden:m,dir:f,lang:t,translate:P,slot:g,children:[G("input",{...s,...x,checked:b,defaultChecked:I,type:"radio",id:n,value:i}),r?S("div",{className:"flex-col stack-4 ml-8",children:[G("label",{htmlFor:n,children:e}),G(u,{id:a,children:r})]}):G("label",{htmlFor:n,className:"ml-8",children:e})]})}export{X as Checkbox,w as DateInput,v as ErrorMessage,u as Hint,j as Radio,Z as RadioGroup,N as RadioGroupContext,W as Select,K as TextInput};
+import{useState as w}from"react";import{jsx as F}from"react/jsx-runtime";function x({children:e,id:t,className:r=""}){return F("p",{id:t,className:`micro text-feedback-red empty:hidden ${r}`.trim(),role:"alert",children:e})}import{jsx as q}from"react/jsx-runtime";function c({children:e,id:t,className:r=""}){return q("p",{id:t,className:`micro text-secondary ${r}`.trim(),children:e})}import{useId as A}from"react";function m(e){let t=A();return{inputId:e||t+"-input",errorId:t+"-error",hintId:t+"-hint"}}import{jsx as T,jsxs as K}from"react/jsx-runtime";function $({hint:e,id:t,label:r,hidden:f,dir:g,errorMessage:o,lang:P,translate:v,slot:i,value:p,defaultValue:n,isValid:u,...a}){let[l,s]=w(!p&&!n);function I(d){let{validity:E}=d.currentTarget,H=d.currentTarget.required;H||(d.currentTarget.required=!0),s(E.valueMissing&&!E.badInput),H||(d.currentTarget.required=!1)}let{inputId:b,errorId:h,hintId:C}=m(t),R=a["aria-invalid"]||u===!1||!!o;return K("div",{className:"v-input-floating-label",hidden:f,dir:g,lang:P,translate:v,slot:i,children:[T("label",{htmlFor:b,children:r}),T("input",{...a,type:"date",id:b,value:p,defaultValue:n,onBlur:d=>{a.onBlur?.(d),I(d)},onChange:d=>{a.onChange?.(d),I(d)},"data-blank":l?"":void 0,"aria-invalid":R?!0:void 0,"aria-errormessage":o?h:void 0,"aria-describedby":e?C:void 0}),T(x,{id:h,className:"mt-4",children:o}),e&&T(c,{id:C,className:"mt-4",children:e})]})}import{jsx as k,jsxs as J}from"react/jsx-runtime";function z({hint:e,id:t,label:r,hidden:f,dir:g,errorMessage:o,lang:P,translate:v,slot:i,isValid:p,...n}){let{inputId:u,errorId:a,hintId:l}=m(t),s=n["aria-invalid"]||p===!1||!!o;return J("div",{className:"v-input-floating-label",hidden:f,dir:g,lang:P,translate:v,slot:i,children:[k("label",{htmlFor:u,children:r}),k("input",{placeholder:" ",...n,id:u,type:"text","aria-invalid":s?!0:void 0,"aria-errormessage":o?a:void 0,"aria-describedby":e?l:void 0}),k(x,{id:a,className:"mt-4",children:o}),e&&k(c,{id:l,className:"mt-4",children:e})]})}import{Children as O,isValidElement as Q,useState as W}from"react";import{jsx as M,jsxs as U}from"react/jsx-runtime";function X({hint:e,id:t,label:r,hidden:f,dir:g,errorMessage:o,lang:P,translate:v,slot:i,value:p,defaultValue:n,children:u,isValid:a,...l}){let s=!1;O.forEach(u,y=>{Q(y)&&y.type==="option"&&y.props.value===""&&(s=!0)});let[I,b]=W(!n),h=typeof p=="string",{inputId:C,errorId:R,hintId:d}=m(t),E=l["aria-invalid"]||a===!1||!!o,H=!s&&(h?!p:I);return U("div",{className:"v-input-floating-label",hidden:f,dir:g,lang:P,translate:v,slot:i,children:[M("label",{htmlFor:C,children:r}),U("select",{...l,id:C,onChange:h||s?l.onChange:y=>{l.onChange?.(y),b(!y.target.value)},value:p,defaultValue:n,"data-blank":H?"":void 0,"aria-invalid":E?"true":void 0,"aria-errormessage":o?R:void 0,"aria-describedby":e?d:void 0,children:[!n&&!s&&M("option",{value:"",hidden:!H,disabled:!H}),u]}),M(x,{id:R,className:"mt-4",children:o}),e&&M(c,{id:d,className:"mt-4",children:e})]})}import{jsx as B,jsxs as S}from"react/jsx-runtime";function Y({label:e,id:t,hint:r,hidden:f,dir:g,lang:o,translate:P,slot:v,errorMessage:i,isValid:p,...n}){let{inputId:u,hintId:a,errorId:l}=m(t),s=n["aria-invalid"]||p===!1||!!i;return S("div",{className:"flex-row",hidden:f,dir:g,lang:o,translate:P,slot:v,children:[B("input",{...n,type:"checkbox",id:u,"aria-invalid":s?!0:void 0,"aria-errormessage":i?l:void 0,"aria-describedby":r?a:void 0}),S("div",{className:"flex-col stack-4 ml-8",children:[B("label",{htmlFor:u,children:e}),B(x,{id:l,children:i}),r&&B(c,{id:a,children:r})]})]})}import{useContext as j}from"react";import{createContext as Z}from"react";import{jsx as N,jsxs as V}from"react/jsx-runtime";function _({legend:e,id:t,hint:r,name:f,children:g,required:o,defaultValue:P,value:v,hidden:i,dir:p,lang:n,translate:u,slot:a,onChange:l,errorMessage:s,isValid:I,...b}){let{inputId:h,hintId:C,errorId:R}=m(t),d=b["aria-invalid"]||I===!1||!!s;return V("fieldset",{...b,hidden:i,dir:p,lang:n,translate:u,slot:a,id:h,role:"radiogroup","aria-invalid":d?!0:void 0,"aria-errormessage":s?R:void 0,"aria-describedby":r?C:void 0,"aria-required":o?!0:void 0,children:[N("legend",{className:"mb-4",children:e}),r&&N(c,{id:C,className:"mb-16",children:r}),V("div",{className:"stack-8",hidden:i,children:[N(x,{id:R,className:"mb-16",children:s}),N(G.Provider,{value:{name:f,required:o,value:v,defaultValue:P,onChange:l},children:g})]})]})}var G=Z({});import{jsx as L,jsxs as D}from"react/jsx-runtime";function ee({label:e,id:t,hint:r,hidden:f,dir:g,lang:o,translate:P,slot:v,value:i,...p}){let{inputId:n,hintId:u}=m(t),{value:a,defaultValue:l,...s}=j(G),I,b;return typeof a<"u"?I=i===a:typeof l<"u"&&i===l&&(b=!0),D("div",{className:"flex-row",hidden:f,dir:g,lang:o,translate:P,slot:v,children:[L("input",{...p,...s,checked:I,defaultChecked:b,type:"radio",id:n,value:i}),r?D("div",{className:"flex-col stack-4 ml-8",children:[L("label",{htmlFor:n,children:e}),L(c,{id:u,children:r})]}):L("label",{htmlFor:n,className:"ml-8",children:e})]})}export{Y as Checkbox,$ as DateInput,x as ErrorMessage,c as Hint,ee as Radio,_ as RadioGroup,G as RadioGroupContext,X as Select,z as TextInput};
 //# sourceMappingURL=index.js.map

dist/index.js

@@ -1,2 +0,2 @@
-var U=Object.defineProperty;var Q=Object.getOwnPropertyDescriptor;var W=Object.getOwnPropertyNames;var X=Object.prototype.hasOwnProperty;var Y=(e,r)=>{for(var o in r)U(e,o,{get:r[o],enumerable:!0})},Z=(e,r,o,c)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of W(r))!X.call(e,a)&&a!==o&&U(e,a,{get:()=>r[a],enumerable:!(c=Q(r,a))||c.enumerable});return e};var _=e=>Z(U({},"__esModule",{value:!0}),e);var j={};Y(j,{Checkbox:()=>$,DateInput:()=>q,ErrorMessage:()=>f,Hint:()=>m,Radio:()=>O,RadioGroup:()=>z,RadioGroupContext:()=>G,Select:()=>w,TextInput:()=>A});module.exports=_(j);var D=require("react");var F=require("react/jsx-runtime");function f({children:e,id:r,className:o=""}){return(0,F.jsx)("p",{id:r,className:`micro text-feedback-red empty:hidden ${o}`.trim(),role:"alert",children:e})}var S=require("react/jsx-runtime");function m({children:e,id:r,className:o=""}){return(0,S.jsx)("p",{id:r,className:`micro text-secondary ${o}`.trim(),children:e})}var V=require("react");function P(e){let r=(0,V.useId)();return{inputId:e||r+"-input",errorId:r+"-error",hintId:r+"-hint"}}var T=require("react/jsx-runtime");function q({hint:e,id:r,label:o,hidden:c,dir:a,errorMessage:t,lang:g,translate:v,slot:s,value:d,defaultValue:n,...l}){let[i,p]=(0,D.useState)(!d&&!n);function x(u){let{validity:L}=u.currentTarget,M=u.currentTarget.required;M||(u.currentTarget.required=!0),p(L.valueMissing&&!L.badInput),M||(u.currentTarget.required=!1)}let{inputId:b,errorId:I,hintId:C}=P(r),E=l["aria-invalid"]||!!t;return(0,T.jsxs)("div",{className:"v-input-floating-label",hidden:c,dir:a,lang:g,translate:v,slot:s,children:[(0,T.jsx)("label",{htmlFor:b,children:o}),(0,T.jsx)("input",{...l,type:"date",id:b,value:d,defaultValue:n,onBlur:u=>{l.onBlur?.(u),x(u)},onChange:u=>{l.onChange?.(u),x(u)},"data-blank":i?"":void 0,"aria-invalid":E?!0:void 0,"aria-errormessage":t?I:void 0,"aria-describedby":e?C:void 0}),(0,T.jsx)(f,{id:I,className:"mt-4",children:t}),e&&(0,T.jsx)(m,{id:C,className:"mt-4",children:e})]})}var k=require("react/jsx-runtime");function A({hint:e,id:r,label:o,hidden:c,dir:a,errorMessage:t,lang:g,translate:v,slot:s,...d}){let{inputId:n,errorId:l,hintId:i}=P(r),p=d["aria-invalid"]||!!t;return(0,k.jsxs)("div",{className:"v-input-floating-label",hidden:c,dir:a,lang:g,translate:v,slot:s,children:[(0,k.jsx)("label",{htmlFor:n,children:o}),(0,k.jsx)("input",{placeholder:" ",...d,id:n,type:"text","aria-invalid":p?!0:void 0,"aria-errormessage":t?l:void 0,"aria-describedby":e?i:void 0}),(0,k.jsx)(f,{id:l,className:"mt-4",children:t}),e&&(0,k.jsx)(m,{id:i,className:"mt-4",children:e})]})}var N=require("react");var h=require("react/jsx-runtime");function w({hint:e,id:r,label:o,hidden:c,dir:a,errorMessage:t,lang:g,translate:v,slot:s,value:d,defaultValue:n,children:l,...i}){let p=!1;N.Children.forEach(l,B=>{(0,N.isValidElement)(B)&&B.type==="option"&&B.props.value===""&&(p=!0)});let[x,b]=(0,N.useState)(!n),I=typeof d=="string",{inputId:C,errorId:E,hintId:u}=P(r),L=i["aria-invalid"]||!!t,M=!p&&(I?!d:x);return(0,h.jsxs)("div",{className:"v-input-floating-label",hidden:c,dir:a,lang:g,translate:v,slot:s,children:[(0,h.jsx)("label",{htmlFor:C,children:o}),(0,h.jsxs)("select",{...i,id:C,onChange:I||p?i.onChange:B=>{i.onChange?.(B),b(!B.target.value)},value:d,defaultValue:n,"data-blank":M?"":void 0,"aria-invalid":L?"true":void 0,"aria-errormessage":t?E:void 0,"aria-describedby":e?u:void 0,children:[!n&&!p&&(0,h.jsx)("option",{value:"",hidden:!M,disabled:!M}),l]}),(0,h.jsx)(f,{id:E,className:"mt-4",children:t}),e&&(0,h.jsx)(m,{id:u,className:"mt-4",children:e})]})}var R=require("react/jsx-runtime");function $({label:e,id:r,hint:o,hidden:c,dir:a,lang:t,translate:g,slot:v,errorMessage:s,...d}){let{inputId:n,hintId:l,errorId:i}=P(r),p=d["aria-invalid"]||!!s;return(0,R.jsxs)("div",{className:"flex-row",hidden:c,dir:a,lang:t,translate:g,slot:v,children:[(0,R.jsx)("input",{...d,type:"checkbox",id:n,"aria-invalid":p?!0:void 0,"aria-errormessage":s?i:void 0,"aria-describedby":o?l:void 0}),(0,R.jsxs)("div",{className:"flex-col stack-4 ml-8",children:[(0,R.jsx)("label",{htmlFor:n,children:e}),(0,R.jsx)(f,{id:i,children:s}),o&&(0,R.jsx)(m,{id:l,children:o})]})]})}var J=require("react");var K=require("react");var H=require("react/jsx-runtime");function z({legend:e,id:r,hint:o,name:c,children:a,required:t,defaultValue:g,value:v,hidden:s,dir:d,lang:n,translate:l,slot:i,onChange:p,errorMessage:x,...b}){let{inputId:I,hintId:C,errorId:E}=P(r),u=b["aria-invalid"]||!!x;return(0,H.jsxs)("fieldset",{...b,hidden:s,dir:d,lang:n,translate:l,slot:i,id:I,role:"radiogroup","aria-invalid":u?!0:void 0,"aria-errormessage":x?E:void 0,"aria-describedby":o?C:void 0,"aria-required":t?!0:void 0,children:[(0,H.jsx)("legend",{className:"mb-4",children:e}),o&&(0,H.jsx)(m,{id:C,className:"mb-16",children:o}),(0,H.jsxs)("div",{className:"stack-8",hidden:s,children:[(0,H.jsx)(f,{id:E,className:"mb-16",children:x}),(0,H.jsx)(G.Provider,{value:{name:c,required:t,value:v,defaultValue:g,onChange:p},children:a})]})]})}var G=(0,K.createContext)({});var y=require("react/jsx-runtime");function O({label:e,id:r,hint:o,hidden:c,dir:a,lang:t,translate:g,slot:v,value:s,...d}){let{inputId:n,hintId:l}=P(r),{value:i,defaultValue:p,...x}=(0,J.useContext)(G),b,I;return typeof i<"u"?b=s===i:typeof p<"u"&&s===p&&(I=!0),(0,y.jsxs)("div",{className:"flex-row",hidden:c,dir:a,lang:t,translate:g,slot:v,children:[(0,y.jsx)("input",{...d,...x,checked:b,defaultChecked:I,type:"radio",id:n,value:s}),o?(0,y.jsxs)("div",{className:"flex-col stack-4 ml-8",children:[(0,y.jsx)("label",{htmlFor:n,children:e}),(0,y.jsx)(m,{id:l,children:o})]}):(0,y.jsx)("label",{htmlFor:n,className:"ml-8",children:e})]})}0&&(module.exports={Checkbox,DateInput,ErrorMessage,Hint,Radio,RadioGroup,RadioGroupContext,Select,TextInput});
+var S=Object.defineProperty;var W=Object.getOwnPropertyDescriptor;var X=Object.getOwnPropertyNames;var Y=Object.prototype.hasOwnProperty;var Z=(e,r)=>{for(var t in r)S(e,t,{get:r[t],enumerable:!0})},_=(e,r,t,u)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of X(r))!Y.call(e,a)&&a!==t&&S(e,a,{get:()=>r[a],enumerable:!(u=W(r,a))||u.enumerable});return e};var j=e=>_(S({},"__esModule",{value:!0}),e);var ee={};Z(ee,{Checkbox:()=>K,DateInput:()=>A,ErrorMessage:()=>g,Hint:()=>f,Radio:()=>Q,RadioGroup:()=>J,RadioGroupContext:()=>L,Select:()=>$,TextInput:()=>w});module.exports=j(ee);var q=require("react");var V=require("react/jsx-runtime");function g({children:e,id:r,className:t=""}){return(0,V.jsx)("p",{id:r,className:`micro text-feedback-red empty:hidden ${t}`.trim(),role:"alert",children:e})}var D=require("react/jsx-runtime");function f({children:e,id:r,className:t=""}){return(0,D.jsx)("p",{id:r,className:`micro text-secondary ${t}`.trim(),children:e})}var F=require("react");function P(e){let r=(0,F.useId)();return{inputId:e||r+"-input",errorId:r+"-error",hintId:r+"-hint"}}var k=require("react/jsx-runtime");function A({hint:e,id:r,label:t,hidden:u,dir:a,errorMessage:o,lang:v,translate:x,slot:s,value:c,defaultValue:n,isValid:m,...l}){let[i,d]=(0,q.useState)(!c&&!n);function I(p){let{validity:U}=p.currentTarget,B=p.currentTarget.required;B||(p.currentTarget.required=!0),d(U.valueMissing&&!U.badInput),B||(p.currentTarget.required=!1)}let{inputId:b,errorId:E,hintId:C}=P(r),T=l["aria-invalid"]||m===!1||!!o;return(0,k.jsxs)("div",{className:"v-input-floating-label",hidden:u,dir:a,lang:v,translate:x,slot:s,children:[(0,k.jsx)("label",{htmlFor:b,children:t}),(0,k.jsx)("input",{...l,type:"date",id:b,value:c,defaultValue:n,onBlur:p=>{l.onBlur?.(p),I(p)},onChange:p=>{l.onChange?.(p),I(p)},"data-blank":i?"":void 0,"aria-invalid":T?!0:void 0,"aria-errormessage":o?E:void 0,"aria-describedby":e?C:void 0}),(0,k.jsx)(g,{id:E,className:"mt-4",children:o}),e&&(0,k.jsx)(f,{id:C,className:"mt-4",children:e})]})}var M=require("react/jsx-runtime");function w({hint:e,id:r,label:t,hidden:u,dir:a,errorMessage:o,lang:v,translate:x,slot:s,isValid:c,...n}){let{inputId:m,errorId:l,hintId:i}=P(r),d=n["aria-invalid"]||c===!1||!!o;return(0,M.jsxs)("div",{className:"v-input-floating-label",hidden:u,dir:a,lang:v,translate:x,slot:s,children:[(0,M.jsx)("label",{htmlFor:m,children:t}),(0,M.jsx)("input",{placeholder:" ",...n,id:m,type:"text","aria-invalid":d?!0:void 0,"aria-errormessage":o?l:void 0,"aria-describedby":e?i:void 0}),(0,M.jsx)(g,{id:l,className:"mt-4",children:o}),e&&(0,M.jsx)(f,{id:i,className:"mt-4",children:e})]})}var G=require("react");var h=require("react/jsx-runtime");function $({hint:e,id:r,label:t,hidden:u,dir:a,errorMessage:o,lang:v,translate:x,slot:s,value:c,defaultValue:n,children:m,isValid:l,...i}){let d=!1;G.Children.forEach(m,N=>{(0,G.isValidElement)(N)&&N.type==="option"&&N.props.value===""&&(d=!0)});let[I,b]=(0,G.useState)(!n),E=typeof c=="string",{inputId:C,errorId:T,hintId:p}=P(r),U=i["aria-invalid"]||l===!1||!!o,B=!d&&(E?!c:I);return(0,h.jsxs)("div",{className:"v-input-floating-label",hidden:u,dir:a,lang:v,translate:x,slot:s,children:[(0,h.jsx)("label",{htmlFor:C,children:t}),(0,h.jsxs)("select",{...i,id:C,onChange:E||d?i.onChange:N=>{i.onChange?.(N),b(!N.target.value)},value:c,defaultValue:n,"data-blank":B?"":void 0,"aria-invalid":U?"true":void 0,"aria-errormessage":o?T:void 0,"aria-describedby":e?p:void 0,children:[!n&&!d&&(0,h.jsx)("option",{value:"",hidden:!B,disabled:!B}),m]}),(0,h.jsx)(g,{id:T,className:"mt-4",children:o}),e&&(0,h.jsx)(f,{id:p,className:"mt-4",children:e})]})}var R=require("react/jsx-runtime");function K({label:e,id:r,hint:t,hidden:u,dir:a,lang:o,translate:v,slot:x,errorMessage:s,isValid:c,...n}){let{inputId:m,hintId:l,errorId:i}=P(r),d=n["aria-invalid"]||c===!1||!!s;return(0,R.jsxs)("div",{className:"flex-row",hidden:u,dir:a,lang:o,translate:v,slot:x,children:[(0,R.jsx)("input",{...n,type:"checkbox",id:m,"aria-invalid":d?!0:void 0,"aria-errormessage":s?i:void 0,"aria-describedby":t?l:void 0}),(0,R.jsxs)("div",{className:"flex-col stack-4 ml-8",children:[(0,R.jsx)("label",{htmlFor:m,children:e}),(0,R.jsx)(g,{id:i,children:s}),t&&(0,R.jsx)(f,{id:l,children:t})]})]})}var O=require("react");var z=require("react");var H=require("react/jsx-runtime");function J({legend:e,id:r,hint:t,name:u,children:a,required:o,defaultValue:v,value:x,hidden:s,dir:c,lang:n,translate:m,slot:l,onChange:i,errorMessage:d,isValid:I,...b}){let{inputId:E,hintId:C,errorId:T}=P(r),p=b["aria-invalid"]||I===!1||!!d;return(0,H.jsxs)("fieldset",{...b,hidden:s,dir:c,lang:n,translate:m,slot:l,id:E,role:"radiogroup","aria-invalid":p?!0:void 0,"aria-errormessage":d?T:void 0,"aria-describedby":t?C:void 0,"aria-required":o?!0:void 0,children:[(0,H.jsx)("legend",{className:"mb-4",children:e}),t&&(0,H.jsx)(f,{id:C,className:"mb-16",children:t}),(0,H.jsxs)("div",{className:"stack-8",hidden:s,children:[(0,H.jsx)(g,{id:T,className:"mb-16",children:d}),(0,H.jsx)(L.Provider,{value:{name:u,required:o,value:x,defaultValue:v,onChange:i},children:a})]})]})}var L=(0,z.createContext)({});var y=require("react/jsx-runtime");function Q({label:e,id:r,hint:t,hidden:u,dir:a,lang:o,translate:v,slot:x,value:s,...c}){let{inputId:n,hintId:m}=P(r),{value:l,defaultValue:i,...d}=(0,O.useContext)(L),I,b;return typeof l<"u"?I=s===l:typeof i<"u"&&s===i&&(b=!0),(0,y.jsxs)("div",{className:"flex-row",hidden:u,dir:a,lang:o,translate:v,slot:x,children:[(0,y.jsx)("input",{...c,...d,checked:I,defaultChecked:b,type:"radio",id:n,value:s}),t?(0,y.jsxs)("div",{className:"flex-col stack-4 ml-8",children:[(0,y.jsx)("label",{htmlFor:n,children:e}),(0,y.jsx)(f,{id:m,children:t})]}):(0,y.jsx)("label",{htmlFor:n,className:"ml-8",children:e})]})}0&&(module.exports={Checkbox,DateInput,ErrorMessage,Hint,Radio,RadioGroup,RadioGroupContext,Select,TextInput});
 //# sourceMappingURL=index.js.map

dist/radio-group.d.ts

@@ -41,3 +41,3 @@ /// <reference types="react" />
      */
-    onChange?: React.FormEventHandler<HTMLInputElement>;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
     onInput?: React.FormEventHandler<HTMLFieldSetElement>;
@@ -51,3 +51,3 @@ /**
     value: string;
-    onChange: React.FormEventHandler<HTMLInputElement>;
+    onChange: React.ChangeEventHandler<HTMLInputElement>;
     /**
@@ -75,3 +75,3 @@ * Set the error message of a controlled checkbox. Will mark the input invalid.
 export type RadioGroupProps = BaseRadioGroupProps & (ControlledProps | UncontrolledProps);
-export declare function RadioGroup({ legend, id, hint, name, children, required, defaultValue, value, hidden, dir, lang, translate, slot, onChange, errorMessage, ...props }: RadioGroupProps): JSX.Element;
+export declare function RadioGroup({ legend, id, hint, name, children, required, defaultValue, value, hidden, dir, lang, translate, slot, onChange, errorMessage, isValid, ...props }: RadioGroupProps): JSX.Element;
 export interface RadioGroupContextValue {
@@ -78,0 +78,0 @@ name?: string;

dist/select.d.ts

@@ -29,3 +29,3 @@ /// <reference types="react" />
      */
-    onChange: React.FormEventHandler<HTMLSelectElement>;
+    onChange: React.ChangeEventHandler<HTMLSelectElement>;
     /**
@@ -49,3 +49,3 @@ * Set the error message of a controlled select. Will mark the input invalid.
      */
-    onChange?: React.FormEventHandler<HTMLSelectElement>;
+    onChange?: React.ChangeEventHandler<HTMLSelectElement>;
     'aria-invalid'?: never;
@@ -58,3 +58,3 @@ errorMessage?: never;
 export type SelectProps = BaseSelectProps & (ControlledProps | UncontrolledProps);
-export declare function Select({ hint, id, label, hidden, dir, errorMessage, lang, translate, slot, value, defaultValue, children, ...props }: SelectProps): JSX.Element;
+export declare function Select({ hint, id, label, hidden, dir, errorMessage, lang, translate, slot, value, defaultValue, children, isValid, ...props }: SelectProps): JSX.Element;
 export {};

dist/text-input.d.ts

@@ -23,3 +23,3 @@ /// <reference types="react" />
      */
-    onChange: React.FormEventHandler<HTMLInputElement>;
+    onChange: React.ChangeEventHandler<HTMLInputElement>;
     /**
@@ -43,3 +43,3 @@ * Set the error message of a controlled input. Will mark the input invalid.
      */
-    onChange?: React.FormEventHandler<HTMLInputElement>;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
     'aria-invalid'?: never;
@@ -52,3 +52,3 @@ errorMessage?: never;
 export type TextInputProps = BaseTextInputProps & (ControlledProps | UncontrolledProps);
-export declare function TextInput({ hint, id, label, hidden, dir, errorMessage, lang, translate, slot, ...props }: TextInputProps): JSX.Element;
+export declare function TextInput({ hint, id, label, hidden, dir, errorMessage, lang, translate, slot, isValid, ...props }: TextInputProps): JSX.Element;
 export {};

package.json

 {
   "name": "@volvo-cars/react-forms",
   "description": "React form components",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "license": "UNLICENSED",
@@ -36,7 +36,7 @@ "sideEffects": false,
   "devDependencies": {
-    "@types/react": "18.0.29",
+    "@types/react": "18.0.34",
     "@volvo-cars/browserslist-config": "workspace:*",
     "react": "18.2.0",
     "tsup": "6.7.0",
-    "typescript": "4.9.5"
+    "typescript": "5.0.3"
   },
@@ -43,0 +43,0 @@ "browserslist": [

No alert changes

Improved metrics

Total package byte prevSize

91018

increased by3.34%

No dependency changes