@ttoss/forms 0.32.6 → 0.32.8

package/README.md

@@ -232,7 +232,6 @@ All form field components share common props:
 - `disabled`: Disables the field
 - `defaultValue`: Initial field value
 - `tooltip`: Label tooltip configuration
-- `inputTooltip`: Input field tooltip configuration
 - `warning`: Warning message displayed below the field
 - `sx`: Theme-UI styling object
 

package/dist/Brazil/index.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { FieldValues, FieldPath } from 'react-hook-form';
 import { PatternFormatProps } from 'react-number-format';
-import { F as FormFieldProps, a as FormFieldPatternFormatProps } from '../FormFieldPatternFormat-SKHmLjAO.js';
+import { F as FormFieldProps, a as FormFieldPatternFormatProps } from '../FormFieldPatternFormat-CMYof3db.js';
 import '@ttoss/ui';
 import 'react';
 

package/dist/{FormFieldPatternFormat-SKHmLjAO.d.ts → FormFieldPatternFormat-CMYof3db.d.ts}

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { FieldValues, FieldPath, UseControllerReturn, FieldPathValue, RegisterOptions } from 'react-hook-form';
 import { PatternFormatProps } from 'react-number-format';
-import { ThemeUIStyleObject, Theme, SxProp } from '@ttoss/ui';
+import { TooltipProps, SxProp } from '@ttoss/ui';
 import * as React from 'react';
 
 type Rules<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = Omit<RegisterOptions<TFieldValues, TName>, 'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'>;
@@ -11,27 +11,14 @@ type FormFieldProps<TFieldValues extends FieldValues = FieldValues, TName extend
     name: TName;
     defaultValue?: FieldPathValue<TFieldValues, TName>;
     disabled?: boolean;
-    tooltip?: {
-        render: string | React.ReactNode;
-        place: 'top';
-        openOnClick?: boolean;
-        clickable?: boolean;
-    };
-    inputTooltip?: {
-        render: string | React.ReactNode;
-        place: 'bottom' | 'top' | 'left' | 'right';
-        openOnClick?: boolean;
-        clickable?: boolean;
-        variant?: 'info' | 'warning' | 'success' | 'error';
-        sx?: ThemeUIStyleObject<Theme>;
-    };
+    tooltip?: TooltipProps;
     warning?: string | React.ReactNode;
     rules?: Rules<TFieldValues, TName>;
 } & SxProp;
 type FormFieldCompleteProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
     render: (props: UseControllerReturn<TFieldValues, TName>) => React.ReactElement;
 } & FormFieldProps<TFieldValues, TName>;
-declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, id: idProp, name, defaultValue, disabled: propsDisabled, tooltip, inputTooltip, sx, css, render, warning, rules, }: 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: propsDisabled, tooltip, sx, css, render, warning, rules, }: FormFieldCompleteProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
 
 type FormFieldPatternFormatProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = FormFieldProps<TFieldValues, TName> & Omit<PatternFormatProps, 'name'>;
 declare const FormFieldPatternFormat: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ disabled, ...props }: FormFieldPatternFormatProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;

package/dist/esm/Brazil/index.js

@@ -1,6 +1,6 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 import * as React from 'react';
-import { FormField, FormFieldCNPJ, FormFieldPatternFormat, __name, isCnpjValid } from "../chunk-A5YD5USY.js";
+import { FormField, FormFieldCNPJ, FormFieldPatternFormat, __name, isCnpjValid } from "../chunk-VOT2YVQW.js";
 
 // src/Brazil/FormFieldPhone.tsx
 import { Input } from "@ttoss/ui";
@@ -13,7 +13,6 @@ var FormFieldPhone = /* @__PURE__ */__name(({
     label,
     name,
     tooltip,
-    inputTooltip,
     warning,
     sx,
     css,
@@ -28,7 +27,6 @@ var FormFieldPhone = /* @__PURE__ */__name(({
     label,
     name,
     tooltip,
-    inputTooltip,
     warning,
     sx,
     css,

package/dist/esm/MultistepForm/index.js

@@ -1,7 +1,7 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 import * as React from 'react';
-import { Form, useForm, yupResolver } from "../chunk-474RNBAE.js";
-import { __name } from "../chunk-A5YD5USY.js";
+import { Form, useForm, yupResolver } from "../chunk-3RZVOUP4.js";
+import { __name } from "../chunk-VOT2YVQW.js";
 
 // src/MultistepForm/MultistepForm.tsx
 import { Flex as Flex6 } from "@ttoss/ui";

package/dist/esm/{chunk-474RNBAE.js → chunk-3RZVOUP4.js}

@@ -1,6 +1,6 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 import * as React from 'react';
-import { FormErrorMessage, FormField, FormFieldPatternFormat, __name, isCnpjValid } from "./chunk-A5YD5USY.js";
+import { FormErrorMessage, FormField, FormFieldPatternFormat, __name, isCnpjValid } from "./chunk-VOT2YVQW.js";
 
 // src/Form.tsx
 import { Box } from "@ttoss/ui";
@@ -33,7 +33,6 @@ var FormFieldCheckbox = /* @__PURE__ */__name(({
     label,
     name,
     tooltip,
-    inputTooltip,
     warning,
     sx,
     css,
@@ -46,7 +45,6 @@ var FormFieldCheckbox = /* @__PURE__ */__name(({
     label,
     name,
     tooltip,
-    inputTooltip,
     warning,
     sx,
     css,
@@ -99,7 +97,6 @@ var FormFieldNumericFormat = /* @__PURE__ */__name(({
     label,
     name,
     tooltip,
-    inputTooltip,
     warning,
     sx,
     css,
@@ -113,7 +110,6 @@ var FormFieldNumericFormat = /* @__PURE__ */__name(({
     label,
     name,
     tooltip,
-    inputTooltip,
     warning,
     sx,
     css,
@@ -189,7 +185,6 @@ var FormFieldInput = /* @__PURE__ */__name(({
     label,
     name,
     tooltip,
-    inputTooltip,
     warning,
     sx,
     css,
@@ -202,7 +197,6 @@ var FormFieldInput = /* @__PURE__ */__name(({
     label,
     name,
     tooltip,
-    inputTooltip,
     warning,
     sx,
     css,
@@ -234,7 +228,6 @@ var FormFieldPassword = /* @__PURE__ */__name(({
     label,
     name,
     tooltip,
-    inputTooltip,
     warning,
     sx,
     css,
@@ -247,7 +240,6 @@ var FormFieldPassword = /* @__PURE__ */__name(({
     label,
     name,
     tooltip,
-    inputTooltip,
     warning,
     sx,
     css,
@@ -279,7 +271,6 @@ var FormFieldRadio = /* @__PURE__ */__name(({
     label,
     name,
     tooltip,
-    inputTooltip,
     warning,
     sx,
     css,
@@ -293,7 +284,6 @@ var FormFieldRadio = /* @__PURE__ */__name(({
     label,
     name,
     tooltip,
-    inputTooltip,
     warning,
     sx,
     css,
@@ -340,7 +330,6 @@ var FormFieldRadioCard = /* @__PURE__ */__name(({
     label,
     name,
     tooltip,
-    inputTooltip,
     warning,
     sx,
     css,
@@ -357,7 +346,6 @@ var FormFieldRadioCard = /* @__PURE__ */__name(({
     label,
     name,
     tooltip,
-    inputTooltip,
     warning,
     sx,
     css,
@@ -424,7 +412,6 @@ var FormFieldRadioCardIcony = /* @__PURE__ */__name(({
     label,
     name,
     tooltip,
-    inputTooltip,
     warning,
     sx,
     css,
@@ -440,7 +427,6 @@ var FormFieldRadioCardIcony = /* @__PURE__ */__name(({
     label,
     name,
     tooltip,
-    inputTooltip,
     warning,
     sx,
     css,
@@ -535,7 +521,6 @@ var FormFieldSelect = /* @__PURE__ */__name(({
     label,
     name,
     tooltip,
-    inputTooltip,
     warning,
     sx,
     css,
@@ -549,7 +534,6 @@ var FormFieldSelect = /* @__PURE__ */__name(({
     label,
     name,
     tooltip,
-    inputTooltip,
     warning,
     sx,
     css,
@@ -580,7 +564,6 @@ var FormFieldSwitch = /* @__PURE__ */__name(({
     label,
     name,
     tooltip,
-    inputTooltip,
     warning,
     sx,
     css,
@@ -594,7 +577,6 @@ var FormFieldSwitch = /* @__PURE__ */__name(({
     label,
     name,
     tooltip,
-    inputTooltip,
     warning,
     sx,
     css,
@@ -626,7 +608,6 @@ var FormFieldTextarea = /* @__PURE__ */__name(({
     label,
     name,
     tooltip,
-    inputTooltip,
     warning,
     sx,
     css,
@@ -639,7 +620,6 @@ var FormFieldTextarea = /* @__PURE__ */__name(({
     label,
     name,
     tooltip,
-    inputTooltip,
     warning,
     sx,
     css,

package/dist/esm/{chunk-A5YD5USY.js → chunk-VOT2YVQW.js}

@@ -46,7 +46,7 @@ var FormErrorMessage = /* @__PURE__ */__name(({
 }, "FormErrorMessage");
 
 // src/FormField.tsx
-import { Checkbox, Flex, Label, Switch, Tooltip } from "@ttoss/ui";
+import { Checkbox, Flex, Label, Switch } from "@ttoss/ui";
 import * as React2 from "react";
 import { useController, useFormContext as useFormContext2 } from "react-hook-form";
 var FormField = /* @__PURE__ */__name(({
@@ -56,7 +56,6 @@ var FormField = /* @__PURE__ */__name(({
   defaultValue,
   disabled: propsDisabled,
   tooltip,
-  inputTooltip,
   sx,
   css,
   render,
@@ -77,63 +76,6 @@ var FormField = /* @__PURE__ */__name(({
   const hasError = !!errors[name];
   const uniqueId = React2.useId();
   const id = idProp || `form-field-${name}-${uniqueId}`;
-  const tooltipId = `${id}-tooltip`;
-  const [showInputTooltip, setShowInputTooltip] = React2.useState(false);
-  const inputRef = React2.useRef(null);
-  const handleClickOutside = React2.useCallback(event => {
-    if (inputRef.current && !inputRef.current.contains(event.target)) {
-      setShowInputTooltip(false);
-    }
-  }, []);
-  const handleEscapeKey = React2.useCallback(event => {
-    if (event.key === "Escape") {
-      setShowInputTooltip(false);
-    }
-  }, []);
-  React2.useEffect(() => {
-    if (!inputTooltip || !showInputTooltip) {
-      return;
-    }
-    document.addEventListener("mousedown", handleClickOutside);
-    document.addEventListener("keydown", handleEscapeKey);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-      document.removeEventListener("keydown", handleEscapeKey);
-    };
-  }, [showInputTooltip, inputTooltip, handleClickOutside, handleEscapeKey]);
-  const handleInputClick = React2.useCallback(() => {
-    if (inputTooltip) {
-      setShowInputTooltip(true);
-    }
-  }, [inputTooltip]);
-  const handleInputFocus = React2.useCallback(() => {
-    if (inputTooltip && !inputTooltip.openOnClick) {
-      setShowInputTooltip(true);
-    }
-  }, [inputTooltip]);
-  const handleInputBlur = React2.useCallback(() => {
-    if (inputTooltip && !inputTooltip.openOnClick) {
-      setShowInputTooltip(false);
-    }
-  }, [inputTooltip]);
-  const tooltipElement = React2.useMemo(() => {
-    if (!inputTooltip || !showInputTooltip) {
-      return null;
-    }
-    return /* @__PURE__ */React2.createElement(Flex, {
-      sx: {
-        width: "full",
-        fontSize: "sm"
-      }
-    }, /* @__PURE__ */React2.createElement(Tooltip, {
-      id: tooltipId,
-      place: inputTooltip.place,
-      clickable: inputTooltip.clickable,
-      isOpen: showInputTooltip,
-      variant: inputTooltip.variant,
-      sx: inputTooltip.sx
-    }, inputTooltip.render));
-  }, [inputTooltip, showInputTooltip, tooltipId]);
   const isCheckboxOrSwitch = /* @__PURE__ */__name(element => {
     return [Checkbox, Switch].some(component => {
       return element.type === component;
@@ -154,41 +96,28 @@ var FormField = /* @__PURE__ */__name(({
         return null;
       }
       const childProps = child.props;
-      const inputProps = {
-        ...childProps,
-        ref: inputRef,
-        onClick: /* @__PURE__ */__name(e => {
-          childProps.onClick?.(e);
-          handleInputClick();
-        }, "onClick"),
-        onFocus: /* @__PURE__ */__name(e => {
-          childProps.onFocus?.(e);
-          handleInputFocus();
-        }, "onFocus"),
-        onBlur: /* @__PURE__ */__name(e => {
-          childProps.onBlur?.(e);
-          handleInputBlur();
-        }, "onBlur"),
-        ...(inputTooltip && showInputTooltip ? {
-          "data-tooltip-id": tooltipId
-        } : {})
-      };
       const elementProps = {
         id,
-        ...inputProps,
+        ...childProps,
         ...(warning && {
           trailingIcon: "warning-alt"
         })
       };
       if (label && isCheckboxOrSwitch(child)) {
-        return /* @__PURE__ */React2.createElement(React2.Fragment, null, /* @__PURE__ */React2.createElement(Label, {
-          "aria-disabled": disabled,
-          tooltip
+        return /* @__PURE__ */React2.createElement(Flex, {
+          sx: {
+            flexDirection: "row",
+            alignItems: "center"
+          }
         }, /* @__PURE__ */React2.createElement(Flex, {
           sx: {
             position: "relative"
           }
-        }, /* @__PURE__ */React2.createElement(child.type, elementProps)), label), tooltipElement);
+        }, /* @__PURE__ */React2.createElement(child.type, elementProps)), /* @__PURE__ */React2.createElement(Label, {
+          "aria-disabled": disabled,
+          htmlFor: id,
+          tooltip
+        }, label));
       }
       return /* @__PURE__ */React2.createElement(Flex, {
         sx: {
@@ -200,9 +129,9 @@ var FormField = /* @__PURE__ */__name(({
         "aria-disabled": disabled,
         htmlFor: id,
         tooltip
-      }, label), /* @__PURE__ */React2.createElement(child.type, elementProps), tooltipElement);
+      }, label), /* @__PURE__ */React2.createElement(child.type, elementProps));
     });
-  }, [render, controllerReturnWithDisabled, label, disabled, id, tooltip, warning, inputTooltip, showInputTooltip, tooltipId, handleInputClick, handleInputFocus, handleInputBlur, tooltipElement]);
+  }, [render, controllerReturnWithDisabled, label, disabled, id, tooltip, warning]);
   return /* @__PURE__ */React2.createElement(Flex, {
     sx: {
       flexDirection: "column",
@@ -236,7 +165,6 @@ var FormFieldPatternFormat = /* @__PURE__ */__name(({
     label,
     name,
     tooltip,
-    inputTooltip,
     warning,
     sx,
     css,
@@ -250,7 +178,6 @@ var FormFieldPatternFormat = /* @__PURE__ */__name(({
     label,
     name,
     tooltip,
-    inputTooltip,
     warning,
     sx,
     css,
@@ -326,7 +253,6 @@ var FormFieldCNPJ = /* @__PURE__ */__name(({
     label,
     name,
     tooltip,
-    inputTooltip,
     warning,
     sx,
     css,
@@ -341,7 +267,6 @@ var FormFieldCNPJ = /* @__PURE__ */__name(({
     label,
     name,
     tooltip,
-    inputTooltip,
     warning,
     sx,
     css,

package/dist/esm/index.js

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

package/dist/index.d.ts

@@ -4,8 +4,8 @@ import * as React from 'react';
 import { FieldValues, FormProviderProps, FieldName, FieldPath } 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 FormFieldProps, a as FormFieldPatternFormatProps } from './FormFieldPatternFormat-SKHmLjAO.js';
-export { b as FormField, c as FormFieldPatternFormat } from './FormFieldPatternFormat-SKHmLjAO.js';
+import { F as FormFieldProps, a as FormFieldPatternFormatProps } from './FormFieldPatternFormat-CMYof3db.js';
+export { b as FormField, c as FormFieldPatternFormat } from './FormFieldPatternFormat-CMYof3db.js';
 import { NumericFormatProps } from 'react-number-format';
 import './typings.d-HZBqJJjn.js';
 import * as yup from 'yup';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/forms",
-  "version": "0.32.6",
+  "version": "0.32.8",
   "license": "MIT",
   "author": "ttoss",
   "contributors": [
@@ -40,7 +40,7 @@
   "peerDependencies": {
     "react": ">=16.8.0",
     "@ttoss/react-i18n": "^2.0.22",
-    "@ttoss/ui": "^5.10.8"
+    "@ttoss/ui": "^5.11.1"
   },
   "devDependencies": {
     "@types/jest": "^30.0.0",
@@ -51,11 +51,11 @@
     "tsup": "^8.5.1",
     "yup": "^1.7.1",
     "@ttoss/config": "^1.35.12",
+    "@ttoss/i18n-cli": "^0.7.38",
     "@ttoss/react-i18n": "^2.0.22",
     "@ttoss/test-utils": "^3.0.4",
-    "@ttoss/ui": "^5.10.8",
     "@ttoss/react-icons": "^0.5.3",
-    "@ttoss/i18n-cli": "^0.7.38"
+    "@ttoss/ui": "^5.11.1"
   },
   "publishConfig": {
     "access": "public",