@ttoss/forms 0.14.19 → 0.14.21

package/dist/esm/index.js

@@ -103,12 +103,16 @@ var FormFieldCheckbox = ({
       onBlur,
       value,
       ref
+    },
+    formState: {
+      errors
     }
   } = useController2({
     name,
     defaultValue: false
   });
   const id = `form-field-checkbox-${name}`;
+  const error = !!errors[name]?.message;
   return /* @__PURE__ */jsxs2(Box3, {
     children: [/* @__PURE__ */jsx4(Flex, {
       sx: {
@@ -124,6 +128,7 @@ var FormFieldCheckbox = ({
           onChange,
           onBlur,
           name,
+          "aria-invalid": error ? "true" : "false",
           ...checkboxProps
         }), label]
       })

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export { yupResolver } from '@hookform/resolvers/yup';
 import * as react_hook_form from 'react-hook-form';
-import { FieldValues, UseControllerReturn } from 'react-hook-form';
+import { FieldValues, FieldPath, FieldPathValue, UseControllerReturn } from 'react-hook-form';
 export * from 'react-hook-form';
 import * as yup from 'yup';
 export { yup };
@@ -16,20 +16,20 @@ declare const Form: <TFieldValues extends FieldValues = FieldValues>({ children,
     children: React.ReactNode | React.ReactNode[];
 } & react_hook_form.UseFormReturn<TFieldValues, any>) => JSX.Element;
 
-declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends react_hook_form.Path<TFieldValues> = react_hook_form.Path<TFieldValues>>({ label, id: idProp, name, defaultValue, render, }: {
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, id: idProp, name, defaultValue, render, }: {
     label?: string | undefined;
     id?: string | undefined;
     name: TName;
-    defaultValue?: react_hook_form.PathValue<TFieldValues, TName> | undefined;
+    defaultValue?: FieldPathValue<TFieldValues, TName> | undefined;
     render: (props: UseControllerReturn<TFieldValues, TName>) => React.ReactElement;
 }) => JSX.Element;
 
 declare const FormFieldCheckbox: <TFieldValues extends FieldValues = FieldValues>({ label, name, ...checkboxProps }: {
     label?: string | undefined;
-    name: react_hook_form.Path<TFieldValues>;
+    name: FieldPath<TFieldValues>;
 } & CheckboxProps) => JSX.Element;
 
-declare const FormFieldInput: <TFieldValues extends FieldValues = FieldValues, TName extends react_hook_form.Path<TFieldValues> = react_hook_form.Path<TFieldValues>>({ label, name, tooltipIcon, showCharacterCounter, ...inputProps }: {
+declare const FormFieldInput: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, name, tooltipIcon, showCharacterCounter, ...inputProps }: {
     label?: string | undefined;
     name: TName;
     tooltipIcon?: IconType | undefined;
@@ -45,7 +45,7 @@ type FormRadioOption$1 = {
 };
 declare const FormFieldRadio: <TFieldValues extends FieldValues = FieldValues>({ label, name, options, ...radioProps }: {
     label?: string | undefined;
-    name: react_hook_form.Path<TFieldValues>;
+    name: FieldPath<TFieldValues>;
     options: FormRadioOption$1[];
 } & RadioProps) => JSX.Element;
 
@@ -55,11 +55,11 @@ type FormRadioOption = {
 };
 declare const FormFieldSelect: <TFieldValues extends FieldValues = FieldValues>({ label, name, options, ...selectProps }: {
     label?: string | undefined;
-    name: react_hook_form.Path<TFieldValues>;
+    name: FieldPath<TFieldValues>;
     options: FormRadioOption[];
 } & SelectProps) => JSX.Element;
 
-declare const FormFieldTextarea: <TFieldValues extends FieldValues = FieldValues, TName extends react_hook_form.Path<TFieldValues> = react_hook_form.Path<TFieldValues>>({ label, name, ...textareaProps }: {
+declare const FormFieldTextarea: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, name, ...textareaProps }: {
     label?: string | undefined;
     name: TName;
 } & TextareaProps) => JSX.Element;

package/dist/index.js

@@ -152,12 +152,16 @@ var FormFieldCheckbox = ({
       onBlur,
       value,
       ref
+    },
+    formState: {
+      errors
     }
   } = (0, import_react_hook_form4.useController)({
     name,
     defaultValue: false
   });
   const id = `form-field-checkbox-${name}`;
+  const error = !!errors[name]?.message;
   return /* @__PURE__ */(0, import_jsx_runtime4.jsxs)(import_ui4.Box, {
     children: [/* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_ui4.Flex, {
       sx: {
@@ -173,6 +177,7 @@ var FormFieldCheckbox = ({
           onChange,
           onBlur,
           name,
+          "aria-invalid": error ? "true" : "false",
           ...checkboxProps
         }), label]
       })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/forms",
-  "version": "0.14.19",
+  "version": "0.14.21",
   "license": "UNLICENSED",
   "author": "ttoss",
   "contributors": [
@@ -30,8 +30,8 @@
   },
   "devDependencies": {
     "@ttoss/config": "^1.29.2",
-    "@ttoss/test-utils": "^1.20.9",
-    "@ttoss/ui": "^1.31.6",
+    "@ttoss/test-utils": "^1.21.0",
+    "@ttoss/ui": "^1.31.8",
     "@types/jest": "^29.5.0",
     "jest": "^29.5.0",
     "react": "^18.2.0",
@@ -41,5 +41,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ce34db105b7f475a90660d77b194d6ea33b71960"
+  "gitHead": "01701f2c03d9872297d85af0a33d1ca4c2a6eb6b"
 }

package/src/FormFieldCheckbox.tsx

@@ -14,6 +14,7 @@ export const FormFieldCheckbox = <
 } & CheckboxProps) => {
   const {
     field: { onChange, onBlur, value, ref },
+    formState: { errors },
   } = useController<any>({
     name,
     defaultValue: false,
@@ -21,6 +22,8 @@ export const FormFieldCheckbox = <
 
   const id = `form-field-checkbox-${name}`;
 
+  const error = !!errors[name]?.message;
+
   return (
     <Box>
       <Flex sx={{ alignItems: 'center' }}>
@@ -32,6 +35,7 @@ export const FormFieldCheckbox = <
             onChange={onChange}
             onBlur={onBlur}
             name={name}
+            aria-invalid={error ? 'true' : 'false'}
             {...checkboxProps}
           />
           {label}