@ttoss/forms 0.29.15 → 0.30.0

package/dist/Brazil/index.d.ts

@@ -1,11 +1,20 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ThemeUIStyleObject, Theme, SxProp } from '@ttoss/ui';
 import { PatternFormatProps } from 'react-number-format';
-import { F as FormFieldPatternFormatProps } from '../FormFieldPatternFormat-CXU5e0oh.js';
+import { F as FormFieldPatternFormatProps } from '../FormFieldPatternFormat-3gBOUVd9.js';
 
 type FormFieldCNPJProps = {
     label: string;
     name: string;
     warning?: string | React.ReactNode;
+    inputTooltip?: {
+        render: string | React.ReactNode;
+        place: 'bottom' | 'top' | 'left' | 'right';
+        openOnClick?: boolean;
+        clickable?: boolean;
+        variant?: 'info' | 'warning' | 'success' | 'error';
+        sx?: ThemeUIStyleObject<Theme>;
+    } & SxProp;
 } & Partial<PatternFormatProps>;
 declare const isCnpjValid: (cnpj: any) => boolean;
 declare const FormFieldCNPJ: ({ label, name, ...patternFormatProps }: FormFieldCNPJProps) => react_jsx_runtime.JSX.Element;
@@ -14,6 +23,14 @@ type FormFieldPhoneProps = {
     label: string;
     name: string;
     warning?: string | React.ReactNode;
+    inputTooltip?: {
+        render: string | React.ReactNode;
+        place: 'bottom' | 'top' | 'left' | 'right';
+        openOnClick?: boolean;
+        clickable?: boolean;
+        variant?: 'info' | 'warning' | 'success' | 'error';
+        sx?: ThemeUIStyleObject<Theme>;
+    } & SxProp;
 } & Partial<PatternFormatProps>;
 declare const FormFieldPhone: ({ label, name, ...patternFormatProps }: FormFieldPhoneProps) => react_jsx_runtime.JSX.Element;
 

package/dist/FormFieldPatternFormat-3gBOUVd9.d.ts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ThemeUIStyleObject, Theme } from '@ttoss/ui';
+import { PatternFormatProps } from 'react-number-format';
+
+type FormFieldPatternFormatProps = {
+    label?: string;
+    name: string;
+    warning?: string | React.ReactNode;
+    inputTooltip?: {
+        render: string | React.ReactNode;
+        place: 'bottom' | 'top' | 'left' | 'right';
+        openOnClick?: boolean;
+        clickable?: boolean;
+        variant?: 'info' | 'warning' | 'success' | 'error';
+        sx?: ThemeUIStyleObject<Theme>;
+    };
+} & PatternFormatProps;
+declare const FormFieldPatternFormat: ({ label, name, warning, inputTooltip, ...patternFormatProps }: FormFieldPatternFormatProps) => react_jsx_runtime.JSX.Element;
+
+export { type FormFieldPatternFormatProps as F, FormFieldPatternFormat as a };

package/dist/esm/Brazil/index.js

@@ -1,5 +1,5 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { FormField, FormFieldCNPJ, FormFieldPatternFormat, isCnpjValid } from "../chunk-CK3E7LSM.js";
+import { FormField, FormFieldCNPJ, FormFieldPatternFormat, isCnpjValid } from "../chunk-AZFECRBC.js";
 
 // src/Brazil/FormFieldPhone.tsx
 import { Input } from "@ttoss/ui";
@@ -14,6 +14,7 @@ var FormFieldPhone = ({
     name,
     label,
     warning: patternFormatProps.warning,
+    inputTooltip: patternFormatProps.inputTooltip,
     render: ({
       field
     }) => {

package/dist/esm/MultistepForm/index.js

@@ -1,5 +1,5 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { Form, useForm, yupResolver } from "../chunk-CK3E7LSM.js";
+import { Form, useForm, yupResolver } from "../chunk-AZFECRBC.js";
 
 // src/MultistepForm/MultistepForm.tsx
 import { Flex as Flex6 } from "@ttoss/ui";

package/dist/esm/{chunk-CK3E7LSM.js → chunk-AZFECRBC.js}

@@ -68,10 +68,10 @@ var FormErrorMessage = ({
 };
 
 // src/FormField.tsx
-import { Checkbox, Flex, Label, Switch } from "@ttoss/ui";
+import { Checkbox, Flex, Label, Switch, Tooltip } from "@ttoss/ui";
 import * as React from "react";
 import { useController, useFormContext as useFormContext2 } from "react-hook-form";
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
 var FormField = ({
   label,
   id: idProp,
@@ -79,6 +79,7 @@ var FormField = ({
   defaultValue,
   disabled,
   tooltip,
+  inputTooltip,
   sx,
   css,
   render,
@@ -96,37 +97,100 @@ var FormField = ({
   const hasError = !!errors[name];
   const uniqueId = React.useId();
   const id = idProp || `form-field-${name}-${uniqueId}`;
+  const tooltipId = `${id}-tooltip`;
+  const [showInputTooltip, setShowInputTooltip] = React.useState(false);
+  const inputRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!inputTooltip) return;
+    const handleClickOutside = event => {
+      if (inputRef.current && !inputRef.current.contains(event.target)) {
+        setShowInputTooltip(false);
+      }
+    };
+    const handleEscapeKey = event => {
+      if (event.key === "Escape") {
+        setShowInputTooltip(false);
+      }
+    };
+    if (showInputTooltip) {
+      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("keydown", handleEscapeKey);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEscapeKey);
+    };
+  }, [showInputTooltip, inputTooltip]);
   const memoizedRender = React.useMemo(() => {
     return React.Children.map(render(controllerReturn), child => {
       if (!React.isValidElement(child)) {
         return null;
       }
       const childProps = child.props;
+      const inputProps = {
+        ...childProps,
+        ref: inputRef,
+        onClick: e => {
+          childProps.onClick?.(e);
+          if (inputTooltip) {
+            setShowInputTooltip(true);
+          }
+        },
+        onFocus: e => {
+          childProps.onFocus?.(e);
+          if (inputTooltip && !inputTooltip.openOnClick) {
+            setShowInputTooltip(true);
+          }
+        },
+        onBlur: e => {
+          childProps.onBlur?.(e);
+          if (inputTooltip && !inputTooltip.openOnClick) {
+            setShowInputTooltip(false);
+          }
+        },
+        ...(inputTooltip && showInputTooltip ? {
+          "data-tooltip-id": tooltipId
+        } : {})
+      };
       if (label && [Checkbox, Switch].some(component => {
         return child.type === component;
       })) {
-        return /* @__PURE__ */jsxs(Label, {
-          "aria-disabled": disabled,
-          tooltip,
-          children: [/* @__PURE__ */jsx3(Flex, {
-            children: warning ? React.createElement(child.type, {
-              id,
-              ...childProps,
-              ...(warning ? {
-                trailingIcon: "warning-alt"
-              } : {})
-            }) : React.createElement(child.type, {
-              id,
-              ...childProps
+        return /* @__PURE__ */jsxs(Fragment, {
+          children: [/* @__PURE__ */jsxs(Label, {
+            "aria-disabled": disabled,
+            tooltip,
+            children: [/* @__PURE__ */jsx3(Flex, {
+              children: warning ? React.createElement(child.type, {
+                id,
+                ...inputProps,
+                ...(warning ? {
+                  trailingIcon: "warning-alt"
+                } : {})
+              }) : React.createElement(child.type, {
+                id,
+                ...inputProps
+              })
+            }), label]
+          }), inputTooltip && showInputTooltip && /* @__PURE__ */jsx3(Flex, {
+            sx: {
+              width: "full",
+              fontSize: "sm"
+            },
+            children: /* @__PURE__ */jsx3(Tooltip, {
+              id: tooltipId,
+              place: inputTooltip.place,
+              clickable: inputTooltip.clickable,
+              isOpen: showInputTooltip,
+              variant: inputTooltip.variant,
+              children: inputTooltip.render
             })
-          }), label]
+          })]
         });
       }
       return /* @__PURE__ */jsxs(Flex, {
         sx: {
-          width: "100%",
-          flexDirection: "column",
-          gap: "1"
+          width: "full",
+          flexDirection: "column"
         },
         children: [label && /* @__PURE__ */jsx3(Label, {
           "aria-disabled": disabled,
@@ -135,17 +199,31 @@ var FormField = ({
           children: label
         }), warning ? React.createElement(child.type, {
           id,
-          ...childProps,
+          ...inputProps,
           ...(warning ? {
             trailingIcon: "warning-alt"
           } : {})
         }) : React.createElement(child.type, {
           id,
-          ...childProps
+          ...inputProps
+        }), inputTooltip && showInputTooltip && /* @__PURE__ */jsx3(Flex, {
+          sx: {
+            width: "full",
+            fontSize: "sm"
+          },
+          children: /* @__PURE__ */jsx3(Tooltip, {
+            id: tooltipId,
+            place: inputTooltip.place,
+            clickable: inputTooltip.clickable,
+            isOpen: showInputTooltip,
+            variant: inputTooltip.variant,
+            sx: inputTooltip.sx,
+            children: inputTooltip.render
+          })
         })]
       });
     });
-  }, [render, controllerReturn, label, disabled, id, tooltip, warning]);
+  }, [render, controllerReturn, label, disabled, id, tooltip, warning, inputTooltip, showInputTooltip, tooltipId]);
   return /* @__PURE__ */jsxs(Flex, {
     sx: {
       flexDirection: "column",
@@ -206,12 +284,14 @@ var FormFieldPatternFormat = ({
   label,
   name,
   warning,
+  inputTooltip,
   ...patternFormatProps
 }) => {
   return /* @__PURE__ */jsx5(FormField, {
     name,
     label,
     warning,
+    inputTooltip,
     render: ({
       field,
       fieldState
@@ -257,6 +337,7 @@ var FormFieldNumericFormat = ({
   name,
   warning,
   tooltip,
+  inputTooltip,
   ...numericFormatProps
 }) => {
   return /* @__PURE__ */jsx7(FormField, {
@@ -264,6 +345,7 @@ var FormFieldNumericFormat = ({
     name,
     warning,
     tooltip,
+    inputTooltip,
     render: ({
       field
     }) => {
@@ -323,6 +405,7 @@ var FormFieldInput = ({
     disabled: inputProps.disabled,
     tooltip,
     warning: inputProps.warning,
+    inputTooltip: inputProps.inputTooltip,
     sx,
     defaultValue,
     render: ({
@@ -355,6 +438,7 @@ var FormFieldPassword = ({
     disabled: inputProps.disabled,
     tooltip,
     warning: inputProps.warning,
+    inputTooltip: inputProps.inputTooltip,
     sx,
     defaultValue,
     render: ({
@@ -437,6 +521,7 @@ var FormFieldSelect = ({
     defaultValue,
     disabled,
     tooltip,
+    inputTooltip: selectProps.inputTooltip,
     warning: selectProps.warning,
     sx,
     css,
@@ -489,6 +574,7 @@ var FormFieldTextarea = ({
   label,
   name,
   warning,
+  inputTooltip,
   sx,
   ...textareaProps
 }) => {
@@ -499,6 +585,7 @@ var FormFieldTextarea = ({
     id,
     sx,
     warning,
+    inputTooltip,
     render: ({
       field,
       fieldState
@@ -733,6 +820,7 @@ var FormFieldCNPJ = ({
     name,
     label,
     warning: patternFormatProps.warning,
+    inputTooltip: patternFormatProps.inputTooltip,
     render: ({
       field
     }) => {

package/dist/esm/index.js

@@ -1,3 +1,3 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { Controller, Form, FormErrorMessage, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldPatternFormat, FormFieldRadio, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, FormGroup, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormGroup, useFormState, useWatch, yup, yupResolver } from "./chunk-CK3E7LSM.js";
+import { Controller, Form, FormErrorMessage, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldPatternFormat, FormFieldRadio, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, FormGroup, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormGroup, useFormState, useWatch, yup, yupResolver } from "./chunk-AZFECRBC.js";
 export { Controller, Form, FormErrorMessage, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldPatternFormat, FormFieldRadio, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, FormGroup, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormGroup, useFormState, useWatch, yup, yupResolver };

package/dist/index.d.ts

@@ -1,11 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { BoxProps, SxProp, CheckboxProps, InputProps, InputPasswordProps, RadioProps, SelectProps, SwitchProps, TextareaProps } from '@ttoss/ui';
+import { BoxProps, ThemeUIStyleObject, Theme, SxProp, CheckboxProps, InputProps, InputPasswordProps, RadioProps, SelectProps, SwitchProps, TextareaProps } from '@ttoss/ui';
 import * as React$1 from 'react';
 import { FieldValues, FormProviderProps, FieldName, FieldPath, FieldPathValue, UseControllerReturn } from 'react-hook-form';
 export * from 'react-hook-form';
 export { Controller, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch } from 'react-hook-form';
-import { F as FormFieldPatternFormatProps } from './FormFieldPatternFormat-CXU5e0oh.js';
-export { a as FormFieldPatternFormat } from './FormFieldPatternFormat-CXU5e0oh.js';
+import { F as FormFieldPatternFormatProps } from './FormFieldPatternFormat-3gBOUVd9.js';
+export { a as FormFieldPatternFormat } from './FormFieldPatternFormat-3gBOUVd9.js';
 import { NumericFormatProps } from 'react-number-format';
 import './typings.d-HZBqJJjn.js';
 import * as yup from 'yup';
@@ -35,12 +35,20 @@ type FormFieldProps<TFieldValues extends FieldValues = FieldValues, TName extend
         openOnClick?: boolean;
         clickable?: boolean;
     };
+    inputTooltip?: {
+        render: string | React$1.ReactNode;
+        place: 'bottom' | 'top' | 'left' | 'right';
+        openOnClick?: boolean;
+        clickable?: boolean;
+        variant?: 'info' | 'warning' | 'success' | 'error';
+        sx?: ThemeUIStyleObject<Theme>;
+    } & SxProp;
     warning?: string | React$1.ReactNode;
 } & SxProp;
 type FormFieldCompleteProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
     render: (props: UseControllerReturn<TFieldValues, TName>) => React$1.ReactElement;
 } & FormFieldProps<TFieldValues, TName>;
-declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, id: idProp, name, defaultValue, disabled, tooltip, sx, css, render, warning, }: FormFieldCompleteProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, id: idProp, name, defaultValue, disabled, tooltip, inputTooltip, sx, css, render, warning, }: FormFieldCompleteProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
 
 declare const FormFieldCheckbox: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, name, sx, tooltip, ...checkboxProps }: FormFieldProps<TFieldValues, TName> & CheckboxProps) => react_jsx_runtime.JSX.Element;
 
@@ -60,8 +68,16 @@ type FormFieldNumericFormatProps = {
         openOnClick?: boolean;
         clickable?: boolean;
     };
+    inputTooltip?: {
+        render: string | React$1.ReactNode;
+        place: 'bottom' | 'top' | 'left' | 'right';
+        openOnClick?: boolean;
+        clickable?: boolean;
+        variant?: 'info' | 'warning' | 'success' | 'error';
+        sx?: ThemeUIStyleObject<Theme>;
+    } & SxProp;
 } & NumericFormatProps;
-declare const FormFieldNumericFormat: ({ label, name, warning, tooltip, ...numericFormatProps }: FormFieldNumericFormatProps) => react_jsx_runtime.JSX.Element;
+declare const FormFieldNumericFormat: ({ label, name, warning, tooltip, inputTooltip, ...numericFormatProps }: FormFieldNumericFormatProps) => react_jsx_runtime.JSX.Element;
 
 type FormFieldCurrencyInputProps = {
     label?: string;
@@ -95,10 +111,18 @@ declare const FormFieldSelect: <TFieldValues extends FieldValues = FieldValues>(
 
 declare const FormFieldSwitch: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, name, sx, tooltip, ...switchProps }: FormFieldProps<TFieldValues, TName> & SwitchProps) => react_jsx_runtime.JSX.Element;
 
-declare const FormFieldTextarea: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, name, warning, sx, ...textareaProps }: {
+declare const FormFieldTextarea: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, name, warning, inputTooltip, sx, ...textareaProps }: {
     label?: string;
     name: TName;
     warning?: string | React.ReactNode;
+    inputTooltip?: {
+        render: string | React.ReactNode;
+        place: "bottom" | "top" | "left" | "right";
+        openOnClick?: boolean;
+        clickable?: boolean;
+        variant?: "info" | "warning" | "success" | "error";
+        sx?: ThemeUIStyleObject<Theme>;
+    };
 } & TextareaProps) => react_jsx_runtime.JSX.Element;
 
 declare const useFormGroup: () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/forms",
-  "version": "0.29.15",
+  "version": "0.30.0",
   "license": "MIT",
   "author": "ttoss",
   "contributors": [
@@ -40,7 +40,7 @@
   "peerDependencies": {
     "react": ">=16.8.0",
     "@ttoss/react-i18n": "^2.0.11",
-    "@ttoss/ui": "^5.6.1"
+    "@ttoss/ui": "^5.8.0"
   },
   "devDependencies": {
     "@types/jest": "^29.5.14",
@@ -50,12 +50,12 @@
     "react-error-boundary": "^5.0.0",
     "tsup": "^8.3.5",
     "yup": "^1.6.1",
-    "@ttoss/i18n-cli": "^0.7.28",
-    "@ttoss/test-utils": "^2.1.23",
     "@ttoss/config": "^1.35.3",
-    "@ttoss/ui": "^5.6.1",
+    "@ttoss/react-i18n": "^2.0.11",
     "@ttoss/react-icons": "^0.4.11",
-    "@ttoss/react-i18n": "^2.0.11"
+    "@ttoss/i18n-cli": "^0.7.28",
+    "@ttoss/test-utils": "^2.1.23",
+    "@ttoss/ui": "^5.8.0"
   },
   "publishConfig": {
     "access": "public",

package/dist/FormFieldPatternFormat-CXU5e0oh.d.ts

@@ -1,11 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { PatternFormatProps } from 'react-number-format';
-
-type FormFieldPatternFormatProps = {
-    label?: string;
-    name: string;
-    warning?: string | React.ReactNode;
-} & PatternFormatProps;
-declare const FormFieldPatternFormat: ({ label, name, warning, ...patternFormatProps }: FormFieldPatternFormatProps) => react_jsx_runtime.JSX.Element;
-
-export { type FormFieldPatternFormatProps as F, FormFieldPatternFormat as a };