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

Comparing version 0.0.3 to 0.0.4

dist/checkbox.d.ts

 import * as React from 'react';
-import { BaseInputHTMLAttributes, GlobalHTMLAttributes } from './types';
-interface BaseCheckboxProps extends GlobalHTMLAttributes, BaseInputHTMLAttributes {
+import { BaseInputProps, BaseValidationProps, GlobalHTMLAttributes } from './types';
+interface BaseCheckboxProps extends GlobalHTMLAttributes, BaseInputProps, BaseValidationProps {
     /**
@@ -13,6 +13,2 @@ * The name of the input to use when submitting the form.
     /**
-     * Additional hint or description for the checkbox.
-     */
-    hint?: React.ReactNode;
-    /**
      * The value of the checkbox that will be submitted with the form data.
@@ -49,3 +45,3 @@ *
 export type CheckboxProps = BaseCheckboxProps & (ControlledCheckboxProps | UncontrolledCheckboxProps);
-export declare function Checkbox({ label, id, hint, hidden, dir, lang, translate, slot, ...props }: CheckboxProps): JSX.Element;
+export declare function Checkbox({ label, id, hint, hidden, dir, lang, translate, slot, customError, validationMessage, customErrorMessage, valueMissingMessage, ...props }: CheckboxProps): JSX.Element;
 export {};

dist/esm/index.js

@@ -1,2 +0,2 @@
-import*as x from"react";function C({hint:r,id:t,label:e,type:s="text",hidden:p,dir:l,lang:d,translate:u,slot:o,...a}){return x.createElement("div",{className:"flex-col stack-4",hidden:p,dir:l,lang:d,translate:u,slot:o},x.createElement("input",{id:t,placeholder:" ",type:s,...a}),x.createElement("label",{htmlFor:t},e),r&&x.createElement("p",{className:"micro text-secondary"},r))}import*as c from"react";function k({label:r,id:t,hint:e,hidden:s,dir:p,lang:l,translate:d,slot:u,...o}){return c.createElement("div",{className:"flex-row",hidden:s,dir:p,lang:l,translate:d,slot:u},c.createElement("input",{type:"checkbox",id:t,...o}),c.createElement("div",{className:"flex-col stack-4 ml-8"},c.createElement("label",{htmlFor:t},r),e&&c.createElement("p",{className:"micro text-secondary"},e)))}import*as n from"react";import*as i from"react";function T({legend:r,id:t,hint:e,name:s,children:p,required:l,defaultValue:d,value:u,hidden:o,dir:a,lang:h,translate:f,slot:g,onChange:b,...m}){return i.createElement("fieldset",{...m,hidden:o,dir:a,lang:h,translate:f,slot:g,role:"radiogroup",...l?{"aria-required":!0}:{}},i.createElement("legend",{className:"mb-4"},r),e&&i.createElement("p",{className:"micro text-secondary mb-16"},e),i.createElement("div",{className:"stack-8"},i.createElement(R.Provider,{value:{name:s,required:l,value:u,defaultValue:d,onChange:b,"aria-invalid":m["aria-invalid"]}},p)))}var R=i.createContext({});function I({label:r,id:t,hint:e,hidden:s,dir:p,lang:l,translate:d,slot:u,value:o,...a}){let{name:h=a.name,required:f=a.required,"aria-invalid":g=a["aria-invalid"],value:b,defaultValue:m,onChange:P}=n.useContext(R),v={};return typeof b<"u"?v.checked=o===b:typeof m<"u"&&o===m&&(v.defaultChecked=!0),n.createElement("div",{className:"flex-row",hidden:s,dir:p,lang:l,translate:d,slot:u},n.createElement("input",{type:"radio",id:t,...v,...a,onChange:P||a.onChange,value:o,name:h,required:f,"aria-invalid":g}),e?n.createElement("div",{className:"flex-col stack-4 ml-8"},n.createElement("label",{htmlFor:t},r),e&&n.createElement("p",{className:"micro text-secondary"},e)):n.createElement("label",{htmlFor:t,className:"ml-8"},r))}export{k as Checkbox,I as Radio,T as RadioGroup,C as TextInput};
+import*as f from"react";function H({hint:t,id:n,label:a,type:c="text",hidden:m,dir:p,lang:g,translate:x,slot:e,customError:o,validationMessage:i,customErrorMessage:d,badInputMessage:u,patternMismatchMessage:b,rangeOverflowMessage:h,rangeUnderflowMessage:r,stepMismatchMessage:P,tooLongMessage:R,tooShortMessage:C,typeMismatchMessage:y,valueMissingMessage:T,...L}){return f.createElement("validated-input",{class:"flex-col stack-4",hidden:m,dir:p,lang:g,translate:x,slot:e,validationMessage:i,customError:o,customErrorMessage:d,badInputMessage:u,patternMismatchMessage:b,rangeOverflowMessage:h,rangeUnderflowMessage:r,stepMismatchMessage:P,tooLongMessage:R,tooShortMessage:C,typeMismatchMessage:y,valueMissingMessage:T},f.createElement("input",{id:n,placeholder:" ",type:c,...o?{"aria-invalid":!0}:{},...L}),f.createElement("label",{htmlFor:n},a),f.createElement("p",{className:"micro text-feedback-red empty:hidden",role:"alert"},o?d:null),t&&f.createElement("p",{className:"micro text-secondary"},t))}import*as v from"react";import*as k from"react";function M(){k.useEffect(()=>{import("@volvo-cars/web-aria-components/dist/validated-input.js").then(({ValidatedInput:t})=>{customElements.get("validated-input")||customElements.define("validated-input",t)})},[])}function E({label:t,id:n,hint:a,hidden:c,dir:m,lang:p,translate:g,slot:x,customError:e,validationMessage:o,customErrorMessage:i,valueMissingMessage:d,...u}){return M(),v.createElement("validated-input",{class:"flex-row",hidden:c,validationMessage:o,customError:e,customErrorMessage:i,valueMissingMessage:d,dir:m,lang:p,translate:g,slot:x},v.createElement("input",{type:"checkbox",id:n,...e?{"aria-invalid":!0}:{},...u}),v.createElement("div",{className:"flex-col stack-4 ml-8"},v.createElement("label",{htmlFor:n},t),v.createElement("p",{className:"micro text-feedback-red empty:hidden",role:"alert"},e?i:null),a&&v.createElement("p",{className:"micro text-secondary"},a)))}import*as l from"react";import*as s from"react";function B({legend:t,id:n,hint:a,name:c,children:m,required:p,defaultValue:g,value:x,hidden:e,dir:o,lang:i,translate:d,slot:u,onChange:b,validationMessage:h,customError:r,customErrorMessage:P,valueMissingMessage:R,...C}){return M(),s.createElement("fieldset",{...C,hidden:e,dir:o,lang:i,translate:d,slot:u,role:"radiogroup",...r?{"aria-invalid":!0}:{},...p?{"aria-required":!0}:{}},s.createElement("legend",{className:"mb-4"},t),a&&s.createElement("p",{className:"micro text-secondary mb-16"},a),s.createElement("validated-input",{class:"block stack-8",hidden:e,validationMessage:h,customError:r,customErrorMessage:P,valueMissingMessage:R},s.createElement(I.Provider,{value:{name:c,required:p,value:x,defaultValue:g,onChange:b,...r?{"aria-invalid":!0}:{}}},s.createElement("p",{className:"micro text-feedback-red mb-16 empty:hidden",role:"alert"},r?P:null),m)))}var I=s.createContext({});function G({label:t,id:n,hint:a,hidden:c,dir:m,lang:p,translate:g,slot:x,value:e,...o}){let{name:i=o.name,onChange:d=o.onChange,value:u,defaultValue:b,...h}=l.useContext(I),r={};return typeof u<"u"?r.checked=e===u:typeof b<"u"&&e===b&&(r.defaultChecked=!0),l.createElement("div",{className:"flex-row",hidden:c,dir:m,lang:p,translate:g,slot:x},l.createElement("input",{type:"radio",id:n,...r,...o,...h,onChange:d,value:e,name:i}),a?l.createElement("div",{className:"flex-col stack-4 ml-8"},l.createElement("label",{htmlFor:n},t),a&&l.createElement("p",{className:"micro text-secondary"},a)):l.createElement("label",{htmlFor:n,className:"ml-8"},t))}export{E as Checkbox,G as Radio,B as RadioGroup,H as TextInput};
 //# sourceMappingURL=index.js.map

dist/index.js

@@ -1,2 +0,2 @@
-var M=Object.create;var h=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var B=(e,t)=>{for(var r in t)h(e,r,{get:t[r],enumerable:!0})},k=(e,t,r,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of G(t))!F.call(e,o)&&o!==r&&h(e,o,{get:()=>t[o],enumerable:!(a=E(t,o))||a.enumerable});return e};var f=(e,t,r)=>(r=e!=null?M(N(e)):{},k(t||!e||!e.__esModule?h(r,"default",{value:e,enumerable:!0}):r,e)),A=e=>k(h({},"__esModule",{value:!0}),e);var U={};B(U,{Checkbox:()=>I,Radio:()=>H,RadioGroup:()=>L,TextInput:()=>T});module.exports=A(U);var x=f(require("react"));function T({hint:e,id:t,label:r,type:a="text",hidden:o,dir:s,lang:d,translate:u,slot:n,...l}){return x.createElement("div",{className:"flex-col stack-4",hidden:o,dir:s,lang:d,translate:u,slot:n},x.createElement("input",{id:t,placeholder:" ",type:a,...l}),x.createElement("label",{htmlFor:t},r),e&&x.createElement("p",{className:"micro text-secondary"},e))}var c=f(require("react"));function I({label:e,id:t,hint:r,hidden:a,dir:o,lang:s,translate:d,slot:u,...n}){return c.createElement("div",{className:"flex-row",hidden:a,dir:o,lang:s,translate:d,slot:u},c.createElement("input",{type:"checkbox",id:t,...n}),c.createElement("div",{className:"flex-col stack-4 ml-8"},c.createElement("label",{htmlFor:t},e),r&&c.createElement("p",{className:"micro text-secondary"},r)))}var i=f(require("react"));var p=f(require("react"));function L({legend:e,id:t,hint:r,name:a,children:o,required:s,defaultValue:d,value:u,hidden:n,dir:l,lang:g,translate:v,slot:R,onChange:b,...m}){return p.createElement("fieldset",{...m,hidden:n,dir:l,lang:g,translate:v,slot:R,role:"radiogroup",...s?{"aria-required":!0}:{}},p.createElement("legend",{className:"mb-4"},e),r&&p.createElement("p",{className:"micro text-secondary mb-16"},r),p.createElement("div",{className:"stack-8"},p.createElement(C.Provider,{value:{name:a,required:s,value:u,defaultValue:d,onChange:b,"aria-invalid":m["aria-invalid"]}},o)))}var C=p.createContext({});function H({label:e,id:t,hint:r,hidden:a,dir:o,lang:s,translate:d,slot:u,value:n,...l}){let{name:g=l.name,required:v=l.required,"aria-invalid":R=l["aria-invalid"],value:b,defaultValue:m,onChange:y}=i.useContext(C),P={};return typeof b<"u"?P.checked=n===b:typeof m<"u"&&n===m&&(P.defaultChecked=!0),i.createElement("div",{className:"flex-row",hidden:a,dir:o,lang:s,translate:d,slot:u},i.createElement("input",{type:"radio",id:t,...P,...l,onChange:y||l.onChange,value:n,name:g,required:v,"aria-invalid":R}),r?i.createElement("div",{className:"flex-col stack-4 ml-8"},i.createElement("label",{htmlFor:t},e),r&&i.createElement("p",{className:"micro text-secondary"},r)):i.createElement("label",{htmlFor:t,className:"ml-8"},e))}0&&(module.exports={Checkbox,Radio,RadioGroup,TextInput});
+var U=Object.create;var R=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,q=Object.prototype.hasOwnProperty;var D=(e,t)=>{for(var a in t)R(e,a,{get:t[a],enumerable:!0})},T=(e,t,a,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of A(t))!q.call(e,o)&&o!==a&&R(e,o,{get:()=>t[o],enumerable:!(s=w(t,o))||s.enumerable});return e};var f=(e,t,a)=>(a=e!=null?U(S(e)):{},T(t||!e||!e.__esModule?R(a,"default",{value:e,enumerable:!0}):a,e)),O=e=>T(R({},"__esModule",{value:!0}),e);var W={};D(W,{Checkbox:()=>E,Radio:()=>G,RadioGroup:()=>B,TextInput:()=>L});module.exports=O(W);var h=f(require("react"));function L({hint:e,id:t,label:a,type:s="text",hidden:o,dir:d,lang:g,translate:x,slot:n,customError:r,validationMessage:u,customErrorMessage:c,badInputMessage:m,patternMismatchMessage:b,rangeOverflowMessage:P,rangeUnderflowMessage:l,stepMismatchMessage:M,tooLongMessage:I,tooShortMessage:k,typeMismatchMessage:N,valueMissingMessage:V,...F}){return h.createElement("validated-input",{class:"flex-col stack-4",hidden:o,dir:d,lang:g,translate:x,slot:n,validationMessage:u,customError:r,customErrorMessage:c,badInputMessage:m,patternMismatchMessage:b,rangeOverflowMessage:P,rangeUnderflowMessage:l,stepMismatchMessage:M,tooLongMessage:I,tooShortMessage:k,typeMismatchMessage:N,valueMissingMessage:V},h.createElement("input",{id:t,placeholder:" ",type:s,...r?{"aria-invalid":!0}:{},...F}),h.createElement("label",{htmlFor:t},a),h.createElement("p",{className:"micro text-feedback-red empty:hidden",role:"alert"},r?c:null),e&&h.createElement("p",{className:"micro text-secondary"},e))}var v=f(require("react"));var H=f(require("react"));function C(){H.useEffect(()=>{import("@volvo-cars/web-aria-components/dist/validated-input.js").then(({ValidatedInput:e})=>{customElements.get("validated-input")||customElements.define("validated-input",e)})},[])}function E({label:e,id:t,hint:a,hidden:s,dir:o,lang:d,translate:g,slot:x,customError:n,validationMessage:r,customErrorMessage:u,valueMissingMessage:c,...m}){return C(),v.createElement("validated-input",{class:"flex-row",hidden:s,validationMessage:r,customError:n,customErrorMessage:u,valueMissingMessage:c,dir:o,lang:d,translate:g,slot:x},v.createElement("input",{type:"checkbox",id:t,...n?{"aria-invalid":!0}:{},...m}),v.createElement("div",{className:"flex-col stack-4 ml-8"},v.createElement("label",{htmlFor:t},e),v.createElement("p",{className:"micro text-feedback-red empty:hidden",role:"alert"},n?u:null),a&&v.createElement("p",{className:"micro text-secondary"},a)))}var i=f(require("react"));var p=f(require("react"));function B({legend:e,id:t,hint:a,name:s,children:o,required:d,defaultValue:g,value:x,hidden:n,dir:r,lang:u,translate:c,slot:m,onChange:b,validationMessage:P,customError:l,customErrorMessage:M,valueMissingMessage:I,...k}){return C(),p.createElement("fieldset",{...k,hidden:n,dir:r,lang:u,translate:c,slot:m,role:"radiogroup",...l?{"aria-invalid":!0}:{},...d?{"aria-required":!0}:{}},p.createElement("legend",{className:"mb-4"},e),a&&p.createElement("p",{className:"micro text-secondary mb-16"},a),p.createElement("validated-input",{class:"block stack-8",hidden:n,validationMessage:P,customError:l,customErrorMessage:M,valueMissingMessage:I},p.createElement(y.Provider,{value:{name:s,required:d,value:x,defaultValue:g,onChange:b,...l?{"aria-invalid":!0}:{}}},p.createElement("p",{className:"micro text-feedback-red mb-16 empty:hidden",role:"alert"},l?M:null),o)))}var y=p.createContext({});function G({label:e,id:t,hint:a,hidden:s,dir:o,lang:d,translate:g,slot:x,value:n,...r}){let{name:u=r.name,onChange:c=r.onChange,value:m,defaultValue:b,...P}=i.useContext(y),l={};return typeof m<"u"?l.checked=n===m:typeof b<"u"&&n===b&&(l.defaultChecked=!0),i.createElement("div",{className:"flex-row",hidden:s,dir:o,lang:d,translate:g,slot:x},i.createElement("input",{type:"radio",id:t,...l,...r,...P,onChange:c,value:n,name:u}),a?i.createElement("div",{className:"flex-col stack-4 ml-8"},i.createElement("label",{htmlFor:t},e),a&&i.createElement("p",{className:"micro text-secondary"},a)):i.createElement("label",{htmlFor:t,className:"ml-8"},e))}0&&(module.exports={Checkbox,Radio,RadioGroup,TextInput});
 //# sourceMappingURL=index.js.map

dist/radio-group.d.ts

 import * as React from 'react';
-import { GlobalHTMLAttributes } from './types';
-interface BaseRadioGroupProps extends GlobalHTMLAttributes {
+import { BaseValidationProps, GlobalHTMLAttributes } from './types';
+interface BaseRadioGroupProps extends GlobalHTMLAttributes, BaseValidationProps<HTMLFieldSetElement> {
     /**
@@ -29,6 +29,2 @@ * The legend to show above the radio group.
     /**
-     * Makes all radios in the group invalid.
-     */
-    'aria-invalid'?: boolean;
-    /**
      * Select the radio with this value.
@@ -48,3 +44,2 @@ *
     onInput?: React.FormEventHandler<HTMLFieldSetElement>;
-    onInvalid?: React.FormEventHandler<HTMLFieldSetElement>;
 }
@@ -64,3 +59,3 @@ export type RadioGroupProps = BaseRadioGroupProps & (ControlledRadioGroupProps | UncontrolledRadioGroupProps);
 };
-export declare function RadioGroup({ legend, id, hint, name, children, required, defaultValue, value, hidden, dir, lang, translate, slot, onChange, ...props }: BaseRadioGroupProps & (ControlledRadioGroupProps | UncontrolledRadioGroupProps)): JSX.Element;
+export declare function RadioGroup({ legend, id, hint, name, children, required, defaultValue, value, hidden, dir, lang, translate, slot, onChange, validationMessage, customError, customErrorMessage, valueMissingMessage, ...props }: BaseRadioGroupProps & (ControlledRadioGroupProps | UncontrolledRadioGroupProps)): JSX.Element;
 export declare const RadioContext: React.Context<{
@@ -67,0 +62,0 @@ name?: string;

dist/radio.d.ts

 import * as React from 'react';
-import { BaseInputHTMLAttributes, GlobalHTMLAttributes } from './types';
-interface BaseRadioProps extends GlobalHTMLAttributes, BaseInputHTMLAttributes {
+import { BaseInputProps, GlobalHTMLAttributes } from './types';
+interface BaseRadioProps extends GlobalHTMLAttributes, BaseInputProps {
     /**
@@ -15,6 +15,2 @@ * The name of the input to use when submitting the form.
     /**
-     * Additional hint or description for the radio.
-     */
-    hint?: React.ReactNode;
-    /**
      * The value of the radio that will be submitted with the form data.
@@ -50,3 +46,12 @@ *
 export type RadioProps = BaseRadioProps & (ControlledRadioProps | UncontrolledRadioProps);
+/**
+ * Radios allow the user to select a single option from a group.
+ *
+ * Radios are designed to be used with the RadioGroup component and only support validation within
+ * a RadioGroup.
+ *
+ * A Radio is a controlled component if the `checked` prop is set on the Radio, or if `value` is
+ * set on the parent RadioGroup.
+ */
 export declare function Radio({ label, id, hint, hidden, dir, lang, translate, slot, value, ...props }: RadioProps): JSX.Element;
 export {};

dist/text-input.d.ts

 import * as React from 'react';
-import { BaseInputHTMLAttributes, GlobalHTMLAttributes } from './types';
-export type LabelledInputType = TextInputProps['type'];
+import { BaseInputProps, BaseValidationProps, GlobalHTMLAttributes } from './types';
+export type TextInputType = TextInputProps['type'];
 interface TextLikeProps {
@@ -14,16 +14,33 @@ /**
     /**
-     * Regular expression that the input value must match.
+     * Regular expression that the input value must match. Set `patternMismatchMessage` to customize
+     * the error message.
      */
     pattern?: string;
     /**
-     * Minimum length of the input value.
+     * Message for when the input value does not match the specified pattern.
      */
+    patternMismatchMessage?: string;
+    /**
+     * Minimum length of the input value. Set `tooShortMessage` to customize the error message.
+     */
     minLength?: number;
     /**
-     * Maximum length of the input value.
+     * Message for when the input value is shorter than the specified minimum length.
      */
+    tooShortMessage?: string;
+    /**
+     * Maximum length of the input value. Set `tooLongMessage` to customize the error message.
+     */
     maxLength?: number;
+    /**
+     * Message for when the input value is longer than the specified maximum length.
+     */
+    tooLongMessage?: string;
     min?: never;
+    rangeUnderflowMessage?: never;
     max?: never;
+    rangeOverflowMessage?: never;
     step?: never;
+    stepMismatchMessage?: never;
+    badInputMessage?: never;
 }
@@ -36,3 +53,12 @@ interface RangeLikeProps {
     /**
-     * The stepping interval when clicking up and down spinner buttons.
+     * Message for when the input value is less than the minimum value.
+     */
+    rangeUnderflowMessage?: string;
+    /**
+     * Message for when the input value is greater than the maximum value.
+     */
+    rangeOverflowMessage?: string;
+    /**
+     * The stepping interval when clicking up and down spinner buttons. Set `stepMismatchMessage` to
+     * customize the error message shown if the input value is not divisible by the specified step.
      *
@@ -42,5 +68,13 @@ * @default 1
     step?: string;
+    /**
+     * Message for when the input value is not divisible by the specified step value.
+     */
+    stepMismatchMessage?: string;
     pattern?: never;
+    patternMismatchMessage?: never;
     minLength?: never;
+    tooShortMessage?: never;
     maxLength?: never;
+    tooLongMessage?: never;
+    typeMismatchMessage?: never;
     multiple?: never;
@@ -51,2 +85,6 @@ }
     /**
+     * Message for when the user enters a value that is not a valid URL or email address.
+     */
+    typeMismatchMessage?: string;
+    /**
      * Whether the input should allow multiple values.
@@ -57,3 +95,4 @@ */
 interface InputTextProps extends TextLikeProps {
-    type: 'text' | 'search' | 'tel';
+    type?: 'text' | 'search' | 'tel';
+    typeMismatchMessage?: never;
     multiple?: never;
@@ -63,2 +102,3 @@ }
     type: 'password';
+    typeMismatchMessage?: never;
     multiple?: never;
@@ -68,11 +108,26 @@ list?: never;
 interface InputDateProps extends RangeLikeProps {
-    type: 'date' | 'datetime-local' | 'month' | 'time' | 'week';
+    type: 'date' | 'datetime-local' | 'time';
     /**
-     * Earliest date/time that the input will accept.
+     * The earliest date/time to accept.
+     *
+     * - date: {yyyy}-{mm}-{dd}
+     * - time: {hh}:{mm}
+     * - datetime-local: {yyyy}-{mm}-{dd}T{hh}:{mm}
+     *
+     * Set `rangeUnderflowMessage` to customize the error message.
      */
     min?: string;
     /**
-     * Latest date/time that the input will accept.
+     * The latest date/time to accept.
+     *
+     * - date: {yyyy}-{mm}-{dd}
+     * - month: {yyyy}-{mm}
+     * - week: {yyyy}-W{ww}
+     * - time: {hh}:{mm}
+     * - datetime-local: {yyyy}-{mm}-{dd}T{hh}:{mm}
+     *
+     * Set `rangeOverflowMessage` to customize the error message.
      */
     max?: string;
+    badInputMessage?: never;
 }
@@ -82,12 +137,16 @@ interface InputNumberProps extends RangeLikeProps {
     /**
-     * Minimum value of the input.
+     * Minimum value of the input. Set `rangeUnderflowMessage` to customize the error message.
      */
     min?: number;
     /**
-     * Maximum value of the input.
+     * Maximum value of the input. Set `rangeOverflowMessage` to customize the error message.
      */
     max?: number;
+    /**
+     * Message for when the user enters a value that is not a number.
+     */
+    badInputMessage?: string;
 }
-export type TextInputProps = BaseTextInputProps & (InputUrlEmailProps | InputTextProps | InputPasswordProps | InputDateProps | InputNumberProps);
-interface BaseTextInputProps extends GlobalHTMLAttributes, BaseInputHTMLAttributes {
+export type TextInputProps = BaseTextInputProps & (InputUrlEmailProps | InputTextProps | InputPasswordProps | InputDateProps | InputNumberProps) & (ControlledInputProps | UncontrolledInputProps);
+interface BaseTextInputProps extends GlobalHTMLAttributes, BaseInputProps, BaseValidationProps {
     /**
@@ -101,6 +160,2 @@ * The name of the input to use when submitting the form.
     label: string;
-    /**
-     * Additional hint or description for the input.
-     */
-    hint?: React.ReactNode;
     spellCheck?: boolean | 'true' | 'false';
@@ -110,2 +165,4 @@ inputMode?: 'decimal' | 'email' | 'none' | 'numeric' | 'search' | 'tel' | 'text' | 'url';
     enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+}
+type ControlledInputProps = {
     /**
@@ -116,4 +173,10 @@ * Value of the input.
      */
-    value?: number | string;
+    value: number | string;
     /**
+     * Fires immediately when the input’s value is changed by the user (for example, it fires on every keystroke).
+     */
+    onChange: React.FormEventHandler<HTMLInputElement>;
+};
+type UncontrolledInputProps = {
+    /**
      * Default value of an uncontrolled input.
@@ -123,10 +186,8 @@ */
     /**
-     * Required for controlled inputs.
-     *
      * Fires immediately when the input’s value is changed by the user (for example, it fires on every keystroke).
-     * Behaves like the browser input event.
      */
     onChange?: React.FormEventHandler<HTMLInputElement>;
-}
-export declare function TextInput({ hint, id, label, type, hidden, dir, lang, translate, slot, ...props }: TextInputProps): JSX.Element;
+    value?: never;
+};
+export declare function TextInput({ hint, id, label, type, hidden, dir, lang, translate, slot, customError, validationMessage, customErrorMessage, badInputMessage, patternMismatchMessage, rangeOverflowMessage, rangeUnderflowMessage, stepMismatchMessage, tooLongMessage, tooShortMessage, typeMismatchMessage, valueMissingMessage, ...props }: TextInputProps): JSX.Element;
 export {};

dist/types.d.ts

@@ -16,25 +16,56 @@ /// <reference types="react" />
  */
-export interface BaseInputHTMLAttributes {
+export interface BaseInputProps {
+    /**
+     * Disables the input. Use sparingly as it can be non-obvious to users why an input has been
+     * disabled. Prefer showing validation messages and hints instead.
+     */
     disabled?: boolean;
+    /**
+     * Gives the input focus on page load. Use sparingly as it can be confusing to screen-reader and
+     * mobile users.
+     */
     autoFocus?: boolean;
     /**
-     * Id of a form element that this input should be associated with. Defaults to the
-     * containing form element.
+     * Makes the input read-only. Use sparingly, it's often preferred to present the data as regular
+     * text or in a table instead.
      */
-    form?: string;
     readOnly?: boolean;
     /**
-     * Makes the input required.
+     * Id of a form element that this input should be associated with. Defaults to the containing
+     * form element.
      */
-    required?: boolean;
+    form?: string;
+    /**
+     * Additional hint or description.
+     */
+    hint?: React.ReactNode;
     onFocus?: React.FocusEventHandler<HTMLInputElement>;
     onBlur?: React.FocusEventHandler<HTMLInputElement>;
+}
+export interface BaseValidationProps<T = HTMLInputElement> {
     /**
      * Fires if an input fails validation on form submit.
      */
-    onInvalid?: React.FormEventHandler<HTMLInputElement>;
+    onInvalid?: React.FormEventHandler<T>;
     /**
-     * Makes the input invalid.
+     * Force the input to be invalid based on custom validation. Set `customErrorMessage` to customize
+     * the error message.
      */
-    'aria-invalid'?: boolean;
+    customError?: boolean;
+    /**
+     * Message for when the input value is invalid due to a custom error.
+     */
+    customErrorMessage?: string;
+    /**
+     * Catch-all message for when no specific error message was provided for the current error.
+     */
+    validationMessage?: string;
+    /**
+     * Makes the input required. Set `valueMissingMessage` to customize the error message.
+     */
+    required?: boolean;
+    /**
+     * Message for when an input is required but the user has not entered a value.
+     */
+    valueMissingMessage?: string;
 }

package.json

 {
   "name": "@volvo-cars/react-forms",
   "description": "React form components",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "license": "UNLICENSED",
@@ -31,2 +31,5 @@ "sideEffects": false,
   },
+  "dependencies": {
+    "@volvo-cars/web-aria-components": "^0.0.2"
+  },
   "peerDependencies": {
@@ -37,6 +40,6 @@ "@volvo-cars/css": "<1.0.0",
   "devDependencies": {
-    "@types/react": "18.0.27",
+    "@types/react": "18.0.28",
     "@volvo-cars/browserslist-config": "workspace:*",
     "react": "18.2.0",
-    "tsup": "6.5.0",
+    "tsup": "6.6.2",
     "typescript": "4.9.5"
@@ -43,0 +46,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

68621

increased by41.62%

Number of package files

13

increased by8.33%

Lines of code

459

increased by28.21%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

3

increased by50%

Dependency changes

• + Added@volvo-cars/web-aria-components@^0.0.2

• + Added@types/prop-types@15.7.13(transitive)

• + Added@types/react@18.3.12(transitive)

• + Added@volvo-cars/web-aria-components@0.0.2(transitive)

• + Addedcsstype@3.1.3(transitive)