@ttoss/forms 0.14.27 → 0.14.28

package/dist/esm/index.js

@@ -39,7 +39,8 @@ import { HelpText } from "@ttoss/ui";
 import { ErrorMessage as HookFormErrorMessage } from "@hookform/error-message";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var ErrorMessage = ({
-  name
+  name,
+  disabled
 }) => {
   const {
     formState: {
@@ -50,7 +51,8 @@ var ErrorMessage = ({
     errors,
     name,
     as: /* @__PURE__ */jsx2(HelpText, {
-      negative: true
+      negative: true,
+      disabled
     })
   });
 };
@@ -139,15 +141,14 @@ var FormFieldCheckbox = ({
 };
 
 // src/FormFieldInput.tsx
-import { Box as Box4, Icon, Input, Label as Label3, Text } from "@ttoss/ui";
+import { Box as Box4, Input, Label as Label3 } from "@ttoss/ui";
 import { useController as useController3 } from "react-hook-form";
-import React3 from "react";
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var FormFieldInput = ({
   label,
   name,
-  tooltipIcon,
-  showCharacterCounter,
+  tooltip,
+  onTooltipClick,
   ...inputProps
 }) => {
   const {
@@ -164,42 +165,15 @@ var FormFieldInput = ({
     name,
     defaultValue: ""
   });
-  const characterCounter = React3.useMemo(() => {
-    if (!value) {
-      return 0;
-    }
-    return String(value).length;
-  }, [value]);
   const id = `form-field-input-${name}`;
   const hasError = !!errors[name]?.message;
   return /* @__PURE__ */jsxs3(Box4, {
-    children: [label && /* @__PURE__ */jsxs3(Label3, {
-      sx: {
-        display: "flex",
-        alignItems: "center"
-      },
+    children: [label && /* @__PURE__ */jsx5(Label3, {
       "aria-disabled": inputProps.disabled,
       htmlFor: id,
-      children: [label, tooltipIcon && /* @__PURE__ */jsx5(Text, {
-        sx: {
-          marginLeft: "md",
-          fontSize: "xs",
-          lineHeight: 0
-        },
-        variant: "tooltip-icon",
-        children: /* @__PURE__ */jsx5(Icon, {
-          icon: tooltipIcon
-        })
-      }), showCharacterCounter && /* @__PURE__ */jsx5(Text, {
-        sx: {
-          marginLeft: "auto",
-          fontSize: "xs",
-          lineHeight: 0,
-          color: "underemphasize"
-        },
-        variant: "character-counter",
-        children: characterCounter
-      })]
+      tooltip,
+      onTooltipClick,
+      children: label
     }), /* @__PURE__ */jsx5(Input, {
       ref,
       onChange,

package/dist/index.d.ts

@@ -5,7 +5,8 @@ export * from 'react-hook-form';
 import * as yup from 'yup';
 export { yup };
 import * as React from 'react';
-import { BoxProps, CheckboxProps, IconType, RadioProps, TextareaProps } from '@ttoss/ui';
+import * as _ttoss_ui from '@ttoss/ui';
+import { BoxProps, CheckboxProps, LabelProps, RadioProps, TextareaProps } from '@ttoss/ui';
 import * as theme_ui from 'theme-ui';
 
 declare const Form: <TFieldValues extends FieldValues = FieldValues>({ children, onSubmit, sx, ...formMethods }: {
@@ -29,15 +30,13 @@ declare const FormFieldCheckbox: <TFieldValues extends FieldValues = FieldValues
     name: FieldPath<TFieldValues>;
 } & CheckboxProps) => JSX.Element;
 
-declare const FormFieldInput: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, name, tooltipIcon, showCharacterCounter, ...inputProps }: {
+declare const FormFieldInput: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, name, tooltip, onTooltipClick, ...inputProps }: {
     label?: string | undefined;
     name: TName;
-    tooltipIcon?: IconType | undefined;
-    showCharacterCounter?: boolean | undefined;
 } & theme_ui.InputProps & {
-    leadingIcon?: IconType | undefined;
-    trailingIcon?: IconType | undefined;
-}) => JSX.Element;
+    leadingIcon?: _ttoss_ui.IconType | undefined;
+    trailingIcon?: _ttoss_ui.IconType | undefined;
+} & Pick<LabelProps, "tooltip" | "onTooltipClick">) => JSX.Element;
 
 type FormRadioOption$1 = {
     value: string | number;

package/dist/index.js

@@ -88,7 +88,8 @@ var import_ui2 = require("@ttoss/ui");
 var import_error_message = require("@hookform/error-message");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var ErrorMessage = ({
-  name
+  name,
+  disabled
 }) => {
   const {
     formState: {
@@ -99,7 +100,8 @@ var ErrorMessage = ({
     errors,
     name,
     as: /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_ui2.HelpText, {
-      negative: true
+      negative: true,
+      disabled
     })
   });
 };
@@ -190,13 +192,12 @@ var FormFieldCheckbox = ({
 // src/FormFieldInput.tsx
 var import_ui5 = require("@ttoss/ui");
 var import_react_hook_form5 = require("react-hook-form");
-var import_react = __toESM(require("react"));
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var FormFieldInput = ({
   label,
   name,
-  tooltipIcon,
-  showCharacterCounter,
+  tooltip,
+  onTooltipClick,
   ...inputProps
 }) => {
   const {
@@ -213,42 +214,15 @@ var FormFieldInput = ({
     name,
     defaultValue: ""
   });
-  const characterCounter = import_react.default.useMemo(() => {
-    if (!value) {
-      return 0;
-    }
-    return String(value).length;
-  }, [value]);
   const id = `form-field-input-${name}`;
   const hasError = !!errors[name]?.message;
   return /* @__PURE__ */(0, import_jsx_runtime5.jsxs)(import_ui5.Box, {
-    children: [label && /* @__PURE__ */(0, import_jsx_runtime5.jsxs)(import_ui5.Label, {
-      sx: {
-        display: "flex",
-        alignItems: "center"
-      },
+    children: [label && /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_ui5.Label, {
       "aria-disabled": inputProps.disabled,
       htmlFor: id,
-      children: [label, tooltipIcon && /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_ui5.Text, {
-        sx: {
-          marginLeft: "md",
-          fontSize: "xs",
-          lineHeight: 0
-        },
-        variant: "tooltip-icon",
-        children: /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_ui5.Icon, {
-          icon: tooltipIcon
-        })
-      }), showCharacterCounter && /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_ui5.Text, {
-        sx: {
-          marginLeft: "auto",
-          fontSize: "xs",
-          lineHeight: 0,
-          color: "underemphasize"
-        },
-        variant: "character-counter",
-        children: characterCounter
-      })]
+      tooltip,
+      onTooltipClick,
+      children: label
     }), /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_ui5.Input, {
       ref,
       onChange,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/forms",
-  "version": "0.14.27",
+  "version": "0.14.28",
   "license": "UNLICENSED",
   "author": "ttoss",
   "contributors": [
@@ -31,7 +31,7 @@
   "devDependencies": {
     "@ttoss/config": "^1.29.3",
     "@ttoss/test-utils": "^1.21.2",
-    "@ttoss/ui": "^1.31.14",
+    "@ttoss/ui": "^1.31.15",
     "@types/jest": "^29.5.0",
     "jest": "^29.5.0",
     "react": "^18.2.0",
@@ -41,5 +41,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8572bc7e98343a9780146a604b0d2f04ca4388e6"
+  "gitHead": "93e161a8af481b0a74c48331c5d193566f3878dc"
 }

package/src/ErrorMessage.tsx

@@ -4,8 +4,10 @@ import { ErrorMessage as HookFormErrorMessage } from '@hookform/error-message';
 
 export const ErrorMessage = <TFieldValues extends FieldValues = FieldValues>({
   name,
+  disabled,
 }: {
   name: FieldName<TFieldValues>;
+  disabled?: boolean;
 }) => {
   const {
     formState: { errors },
@@ -15,7 +17,7 @@ export const ErrorMessage = <TFieldValues extends FieldValues = FieldValues>({
     <HookFormErrorMessage
       errors={errors}
       name={name as any}
-      as={<HelpText negative />}
+      as={<HelpText negative disabled={disabled} />}
     />
   );
 };

package/src/FormFieldInput.tsx

@@ -1,15 +1,6 @@
-import {
-  Box,
-  Icon,
-  type IconType,
-  Input,
-  type InputProps,
-  Label,
-  Text,
-} from '@ttoss/ui';
+import { Box, Input, type InputProps, Label, type LabelProps } from '@ttoss/ui';
 import { ErrorMessage } from './ErrorMessage';
 import { FieldPath, FieldValues, useController } from 'react-hook-form';
-import React from 'react';
 
 export const FormFieldInput = <
   TFieldValues extends FieldValues = FieldValues,
@@ -17,15 +8,14 @@ export const FormFieldInput = <
 >({
   label,
   name,
-  tooltipIcon,
-  showCharacterCounter,
+  tooltip,
+  onTooltipClick,
   ...inputProps
 }: {
   label?: string;
   name: TName;
-  tooltipIcon?: IconType;
-  showCharacterCounter?: boolean;
-} & InputProps) => {
+} & InputProps &
+  Pick<LabelProps, 'tooltip' | 'onTooltipClick'>) => {
   const {
     field: { onChange, onBlur, value, ref },
     formState: { errors },
@@ -34,14 +24,6 @@ export const FormFieldInput = <
     defaultValue: '',
   });
 
-  const characterCounter = React.useMemo(() => {
-    if (!value) {
-      return 0;
-    }
-
-    return String(value).length;
-  }, [value]);
-
   const id = `form-field-input-${name}`;
 
   const hasError = !!errors[name]?.message;
@@ -50,33 +32,12 @@ export const FormFieldInput = <
     <Box>
       {label && (
         <Label
-          sx={{ display: 'flex', alignItems: 'center' }}
           aria-disabled={inputProps.disabled}
           htmlFor={id}
+          tooltip={tooltip}
+          onTooltipClick={onTooltipClick}
         >
           {label}
-          {tooltipIcon && (
-            <Text
-              sx={{ marginLeft: 'md', fontSize: 'xs', lineHeight: 0 }}
-              variant="tooltip-icon"
-            >
-              <Icon icon={tooltipIcon} />
-            </Text>
-          )}
-
-          {showCharacterCounter && (
-            <Text
-              sx={{
-                marginLeft: 'auto',
-                fontSize: 'xs',
-                lineHeight: 0,
-                color: 'underemphasize',
-              }}
-              variant="character-counter"
-            >
-              {characterCounter}
-            </Text>
-          )}
         </Label>
       )}