@ttoss/forms 0.18.9 → 0.18.11

package/dist/esm/index.js

@@ -257,13 +257,12 @@ var FormFieldInput = ({
     defaultValue,
     render: ({
       field,
-      formState
+      fieldState
     }) => {
-      const hasError = !!formState.errors[name]?.message;
       return /* @__PURE__ */jsx5(Input, {
         ...inputProps,
         ...field,
-        "aria-invalid": hasError.valueOf()
+        "aria-invalid": fieldState.error ? "true" : void 0
       });
     }
   });
@@ -291,13 +290,12 @@ var FormFieldPassword = ({
     defaultValue,
     render: ({
       field,
-      formState
+      fieldState
     }) => {
-      const hasError = !!formState.errors[name]?.message;
       return /* @__PURE__ */jsx6(InputPassword, {
         ...inputProps,
         ...field,
-        "aria-invalid": hasError.valueOf()
+        "aria-invalid": fieldState.error ? "true" : void 0
       });
     }
   });
@@ -451,11 +449,13 @@ var FormFieldTextarea = ({
     id,
     sx,
     render: ({
-      field
+      field,
+      fieldState
     }) => {
       return /* @__PURE__ */jsx9(Textarea, {
         ...field,
-        ...textareaProps
+        ...textareaProps,
+        "aria-invalid": fieldState.error ? "true" : void 0
       });
     }
   });

package/dist/index.d.mts

@@ -0,0 +1,93 @@
+export { yupResolver } from '@hookform/resolvers/yup';
+import * as react_hook_form 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 };
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { BoxProps, FlexProps, CheckboxProps, InputProps, InputPasswordProps, RadioProps, SelectProps, TextareaProps } from '@ttoss/ui';
+
+declare const Form: <TFieldValues extends FieldValues = FieldValues>({ children, onSubmit, sx, ...formMethods }: {
+    children?: React.ReactNode;
+    onSubmit?: ((data: TFieldValues) => Promise<void> | void) | undefined;
+    sx?: BoxProps['sx'];
+} & {
+    children: React.ReactNode | React.ReactNode[];
+} & react_hook_form.UseFormReturn<TFieldValues, any, undefined>) => react_jsx_runtime.JSX.Element;
+
+type FormFieldProps = {
+    sx?: FlexProps['sx'];
+    disabled?: boolean;
+    tooltip?: boolean;
+    onTooltipClick?: () => void;
+};
+type FormFieldCompleteProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
+    label?: string;
+    id?: string;
+    name: TName;
+    defaultValue?: FieldPathValue<TFieldValues, TName>;
+    render: (props: UseControllerReturn<TFieldValues, TName>) => React.ReactElement;
+} & FormFieldProps;
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, id: idProp, name, defaultValue, sx, render, ...formFieldProps }: FormFieldCompleteProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
+
+declare const FormFieldCheckbox: <TFieldValues extends FieldValues = FieldValues>({ label, name, sx, ...checkboxProps }: {
+    label?: string | undefined;
+    name: FieldPath<TFieldValues>;
+} & CheckboxProps) => react_jsx_runtime.JSX.Element;
+
+type FormFieldInputProps<TName> = {
+    label?: string;
+    name: TName;
+} & InputProps & FormFieldProps;
+declare const FormFieldInput: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, name, tooltip, onTooltipClick, sx, defaultValue, ...inputProps }: FormFieldInputProps<TName>) => react_jsx_runtime.JSX.Element;
+
+type FormFieldPasswordProps<TName> = {
+    label?: string;
+    name: TName;
+} & InputPasswordProps & FormFieldProps;
+declare const FormFieldPassword: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, name, tooltip, onTooltipClick, sx, defaultValue, ...inputProps }: FormFieldPasswordProps<TName>) => react_jsx_runtime.JSX.Element;
+
+type FormRadioOption$1 = {
+    value: string | number;
+    label: string;
+};
+declare const FormFieldRadio: <TFieldValues extends FieldValues = FieldValues>({ label, name, options, sx, ...radioProps }: {
+    label?: string | undefined;
+    name: FieldPath<TFieldValues>;
+    options: FormRadioOption$1[];
+} & RadioProps) => react_jsx_runtime.JSX.Element;
+
+type FormRadioOption = {
+    value: string | number;
+    label: string;
+};
+type SelectSwitchProps = (SelectProps & {
+    placeholder?: never;
+}) | (SelectProps & {
+    defaultValue?: never;
+});
+type FormFieldSelectProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = SelectSwitchProps & FormFieldProps & {
+    label?: string;
+    name: FieldPath<TFieldValues>;
+    options: FormRadioOption[];
+    defaultValue?: FieldPathValue<TFieldValues, TName>;
+};
+declare const FormFieldSelect: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, name, options, sx, ...selectProps }: FormFieldSelectProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
+
+declare const FormFieldTextarea: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, name, sx, ...textareaProps }: {
+    label?: string | undefined;
+    name: TName;
+} & TextareaProps) => react_jsx_runtime.JSX.Element;
+
+declare const useFormGroup: () => {
+    level: number | undefined;
+    levelsLength: number;
+};
+type FormGroupProps = {
+    title?: string;
+    direction?: 'column' | 'row';
+} & BoxProps;
+declare const FormGroup: (props: FormGroupProps) => react_jsx_runtime.JSX.Element;
+
+export { Form, FormField, FormFieldCheckbox, FormFieldInput, FormFieldPassword, FormFieldRadio, FormFieldSelect, FormFieldTextarea, FormGroup, useFormGroup };

package/dist/index.js

@@ -293,13 +293,12 @@ var FormFieldInput = ({
     defaultValue,
     render: ({
       field,
-      formState
+      fieldState
     }) => {
-      const hasError = !!formState.errors[name]?.message;
       return /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_ui5.Input, {
         ...inputProps,
         ...field,
-        "aria-invalid": hasError.valueOf()
+        "aria-invalid": fieldState.error ? "true" : void 0
       });
     }
   });
@@ -327,13 +326,12 @@ var FormFieldPassword = ({
     defaultValue,
     render: ({
       field,
-      formState
+      fieldState
     }) => {
-      const hasError = !!formState.errors[name]?.message;
       return /* @__PURE__ */(0, import_jsx_runtime6.jsx)(import_ui6.InputPassword, {
         ...inputProps,
         ...field,
-        "aria-invalid": hasError.valueOf()
+        "aria-invalid": fieldState.error ? "true" : void 0
       });
     }
   });
@@ -487,11 +485,13 @@ var FormFieldTextarea = ({
     id,
     sx,
     render: ({
-      field
+      field,
+      fieldState
     }) => {
       return /* @__PURE__ */(0, import_jsx_runtime9.jsx)(import_ui9.Textarea, {
         ...field,
-        ...textareaProps
+        ...textareaProps,
+        "aria-invalid": fieldState.error ? "true" : void 0
       });
     }
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/forms",
-  "version": "0.18.9",
+  "version": "0.18.11",
   "license": "UNLICENSED",
   "author": "ttoss",
   "contributors": [
@@ -27,24 +27,24 @@
   },
   "peerDependencies": {
     "react": ">=16.8.0",
-    "@ttoss/react-i18n": "^1.23.5",
-    "@ttoss/ui": "^2.0.2"
+    "@ttoss/react-i18n": "^1.23.6",
+    "@ttoss/ui": "^2.0.3"
   },
   "devDependencies": {
-    "@types/jest": "^29.5.2",
+    "@types/jest": "^29.5.3",
     "@types/react": "^18.2.12",
-    "jest": "^29.5.0",
+    "jest": "^29.6.1",
     "react": "^18.2.0",
     "react-error-boundary": "^4.0.9",
     "react-hook-form": "^7.44.3",
     "theme-ui": "^0.16.0",
-    "tsup": "^7.0.0",
+    "tsup": "^7.1.0",
     "yup": "^1.2.0",
-    "@ttoss/config": "^1.30.4",
-    "@ttoss/i18n-cli": "^0.6.3",
-    "@ttoss/react-i18n": "^1.23.5",
-    "@ttoss/test-utils": "^1.23.5",
-    "@ttoss/ui": "^2.0.2"
+    "@ttoss/config": "^1.30.5",
+    "@ttoss/i18n-cli": "^0.6.4",
+    "@ttoss/react-i18n": "^1.23.6",
+    "@ttoss/test-utils": "^1.23.6",
+    "@ttoss/ui": "^2.0.3"
   },
   "publishConfig": {
     "access": "public",

package/src/FormFieldInput.tsx

@@ -29,11 +29,13 @@ export const FormFieldInput = <
       onTooltipClick={onTooltipClick}
       sx={sx}
       defaultValue={defaultValue as FieldPathValue<TFieldValues, TName>}
-      render={({ field, formState }) => {
-        const hasError = !!formState.errors[name]?.message;
-
+      render={({ field, fieldState }) => {
         return (
-          <Input {...inputProps} {...field} aria-invalid={hasError.valueOf()} />
+          <Input
+            {...inputProps}
+            {...field}
+            aria-invalid={fieldState.error ? 'true' : undefined}
+          />
         );
       }}
     />

package/src/FormFieldPassword.tsx

@@ -29,14 +29,12 @@ export const FormFieldPassword = <
       onTooltipClick={onTooltipClick}
       sx={sx}
       defaultValue={defaultValue as FieldPathValue<TFieldValues, TName>}
-      render={({ field, formState }) => {
-        const hasError = !!formState.errors[name]?.message;
-
+      render={({ field, fieldState }) => {
         return (
           <InputPassword
             {...inputProps}
             {...field}
-            aria-invalid={hasError.valueOf()}
+            aria-invalid={fieldState.error ? 'true' : undefined}
           />
         );
       }}

package/src/FormFieldTextarea.tsx

@@ -22,8 +22,14 @@ export const FormFieldTextarea = <
       name={name}
       id={id}
       sx={sx}
-      render={({ field }) => {
-        return <Textarea {...field} {...textareaProps} />;
+      render={({ field, fieldState }) => {
+        return (
+          <Textarea
+            {...field}
+            {...textareaProps}
+            aria-invalid={fieldState.error ? 'true' : undefined}
+          />
+        );
       }}
     />
   );