@zauru-sdk/components 1.0.104 → 1.0.106

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.106](https://github.com/intuitiva/zauru-typescript-sdk/compare/v1.0.105...v1.0.106) (2024-09-18)
+
+**Note:** Version bump only for package @zauru-sdk/components
+
+
+
+
+
+## [1.0.105](https://github.com/intuitiva/zauru-typescript-sdk/compare/v1.0.104...v1.0.105) (2024-09-18)
+
+**Note:** Version bump only for package @zauru-sdk/components
+
+
+
+
+
 ## [1.0.104](https://github.com/intuitiva/zauru-typescript-sdk/compare/v1.0.103...v1.0.104) (2024-09-17)
 
 **Note:** Version bump only for package @zauru-sdk/components

package/dist/Buttons/Button.d.ts

@@ -10,6 +10,7 @@ type Props = {
     children?: React.ReactNode;
     className?: string;
     disabled?: boolean;
+    enableFormErrorsValidation?: boolean;
 };
 export declare const Button: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Footer/Footer.d.ts

@@ -2,6 +2,7 @@ type FooterProps = {
     href: string;
     showConnection?: boolean;
     selectedColor: "purple" | "pink" | "indigo" | "cyan" | "slate" | "green" | "red" | "sky";
+    version?: string;
 };
-export declare const Footer: ({ href, selectedColor, showConnection, }: FooterProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Footer: ({ href, selectedColor, showConnection, version, }: FooterProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/Buttons/Button.js

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Button = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const WithTooltip_js_1 = require("../WithTooltip/WithTooltip.js");
 const react_hook_form_1 = require("react-hook-form");
-const index_js_1 = require("../index.js");
 const Button = (props) => {
-    const { type = "submit", loading = false, loadingText = "Guardando...", title = "Guardar", name = "save", onClickSave, selectedColor = "indigo", children, className = "", disabled = false, } = props;
+    const { type = "submit", loading = false, loadingText = "Guardando...", title = "Guardar", name = "save", onClickSave, selectedColor = "indigo", children, className = "", disabled = false, enableFormErrorsValidation = true, } = props;
     const formContext = (0, react_hook_form_1.useFormContext)();
     const formHasErrors = formContext ? !formContext.formState.isValid : false;
     const formErrors = formContext ? formContext.formState.errors : {};
@@ -45,14 +45,18 @@ const Button = (props) => {
     };
     const color = COLORS[selectedColor];
     const inside = children ?? title;
-    const errorMessage = formHasErrors
+    const errorMessage = enableFormErrorsValidation && formHasErrors
         ? Object.values(formErrors)
             .map((error) => error?.message?.toString())
             .join(", ")
         : "";
-    const buttonContent = ((0, jsx_runtime_1.jsx)("button", { type: type, name: "action", disabled: loading || disabled || formHasErrors, value: name, onClick: onClickSave, className: `ml-2 ${loading || disabled || formHasErrors ? " bg-opacity-25 " : ""} ${loading
+    const buttonContent = ((0, jsx_runtime_1.jsx)("button", { type: type, name: "action", disabled: loading || disabled || (enableFormErrorsValidation && formHasErrors), value: name, onClick: onClickSave, className: `ml-2 ${loading || disabled || (enableFormErrorsValidation && formHasErrors)
+            ? " bg-opacity-25 "
+            : ""} ${loading
             ? " cursor-progress"
-            : `${disabled || formHasErrors ? "" : `hover:${color.bg700}`}`} inline-flex justify-center rounded-md border border-transparent ${color.bg600} py-2 px-4 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:${color.ring500} focus:ring-offset-2 ${className}`, children: loading ? loadingText : inside }));
-    return formHasErrors ? ((0, jsx_runtime_1.jsx)(index_js_1.WithTooltip, { text: errorMessage, children: buttonContent })) : (buttonContent);
+            : `${disabled || (enableFormErrorsValidation && formHasErrors)
+                ? ""
+                : `hover:${color.bg700}`}`} inline-flex justify-center rounded-md border border-transparent ${color.bg600} py-2 px-4 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:${color.ring500} focus:ring-offset-2 ${className}`, children: loading ? loadingText : inside }));
+    return enableFormErrorsValidation && formHasErrors ? ((0, jsx_runtime_1.jsx)(WithTooltip_js_1.WithTooltip, { text: errorMessage, children: buttonContent })) : (buttonContent);
 };
 exports.Button = Button;

package/dist/cjs/Footer/Footer.js

@@ -13,8 +13,8 @@ const COLORS = {
     red: "bg-red-500",
     sky: "bg-sky-500",
 };
-const Footer = ({ href, selectedColor, showConnection = false, }) => {
+const Footer = ({ href, selectedColor, showConnection = false, version = "2.0.5", }) => {
     const color = COLORS[selectedColor];
-    return ((0, jsx_runtime_1.jsx)("footer", { className: `inset-x-0 bottom-0 px-2 py-[20px] ${color}`, children: (0, jsx_runtime_1.jsxs)("div", { className: "px-4 mx-auto flex flex-wrap items-center justify-center", children: [(0, jsx_runtime_1.jsxs)("p", { className: "text-white text-[1.2rem]", children: [`Creado en `, " ", (0, jsx_runtime_1.jsx)("a", { href: href, children: "Zauru" }), " ", `con ❤️ ${new Date().getFullYear()} v.2.0.0`] }), showConnection && ((0, jsx_runtime_1.jsx)("div", { className: "ml-5", children: (0, jsx_runtime_1.jsx)(index_js_1.ConnectionState, {}) }))] }) }));
+    return ((0, jsx_runtime_1.jsx)("footer", { className: `inset-x-0 bottom-0 px-2 py-[20px] ${color}`, children: (0, jsx_runtime_1.jsxs)("div", { className: "px-4 mx-auto flex flex-wrap items-center justify-center", children: [(0, jsx_runtime_1.jsxs)("p", { className: "text-white text-[1.2rem]", children: [`Creado en `, " ", (0, jsx_runtime_1.jsx)("a", { href: href, children: "Zauru" }), " ", `con ❤️ ${new Date().getFullYear()} v.${version}`] }), showConnection && ((0, jsx_runtime_1.jsx)("div", { className: "ml-5", children: (0, jsx_runtime_1.jsx)(index_js_1.ConnectionState, {}) }))] }) }));
 };
 exports.Footer = Footer;

package/dist/cjs/Form/SelectField/index.js

@@ -90,7 +90,12 @@ const SelectField = (props) => {
                 filteredOptions.length > 0 &&
                 !isEnterPressed &&
                 isSearching) {
-                handleOptionClick(filteredOptions[0]);
+                if (highlightedIndex >= 0) {
+                    handleOptionClick(filteredOptions[highlightedIndex]);
+                }
+                else {
+                    handleOptionClick(filteredOptions[0]);
+                }
             }
             setIsTabPressed(false);
             setIsEnterPressed(false);
@@ -133,7 +138,7 @@ const SelectField = (props) => {
     }
     return ((0, jsx_runtime_1.jsxs)("div", { className: `col-span-6 sm:col-span-3 ${className}`, ref: selectRef, children: [title && ((0, jsx_runtime_1.jsxs)("label", { htmlFor: error ? `${name}-error` : `${name}-success`, className: `block text-sm font-medium ${color === "red"
                     ? "text-red-700 dark:text-red-500"
-                    : "text-gray-700 dark:text-gray-500"}`, children: [title, required && (0, jsx_runtime_1.jsx)("span", { className: "text-red-500", children: "*" })] })), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: name || "", control: control, rules: { required }, defaultValue: defaultValue || (isMulti ? [] : null), render: ({ field }) => ((0, jsx_runtime_1.jsx)("input", { ...field, type: "text", id: id, value: inputValue, onFocus: () => setIsOpen(true), onBlur: handleBlur, onKeyDown: handleKeyDown, readOnly: isReadOnly, disabled: disabled, className: `block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm`, placeholder: isMulti ? "Select options..." : "Select an option...", onChange: (e) => {
+                    : "text-gray-700 dark:text-gray-500"}`, children: [title, required && (0, jsx_runtime_1.jsx)("span", { className: "text-red-500", children: "*" })] })), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: name || "", control: control, rules: { required }, defaultValue: defaultValue || (isMulti ? [] : null), render: ({ field }) => ((0, jsx_runtime_1.jsx)("input", { ...field, type: "text", id: id, autoComplete: "off", value: inputValue, onFocus: () => setIsOpen(true), onBlur: handleBlur, onKeyDown: handleKeyDown, readOnly: isReadOnly, disabled: disabled, className: `block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm`, placeholder: isMulti ? "Select options..." : "Select an option...", onChange: (e) => {
                                 field.onChange(e);
                                 handleInputChange(e);
                             } })) }), isClearable && (value || valueMulti.length > 0) && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: handleClear, className: "absolute inset-y-0 right-0 pr-3 flex items-center", children: "\u00D7" })), isOpen && !isReadOnly && ((0, jsx_runtime_1.jsx)("ul", { ref: optionsRef, className: "absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm", children: filteredOptions.map((option, index) => ((0, jsx_runtime_1.jsx)("li", { className: `cursor-pointer select-none relative py-2 pl-3 pr-9 ${(isMulti

package/dist/cjs/Form/TextField/index.js

@@ -25,9 +25,6 @@ const TextField = (props) => {
     (0, react_1.useEffect)(() => {
         setValue(defaultValue);
     }, [defaultValue]);
-    if (hidden) {
-        return ((0, jsx_runtime_1.jsx)("input", { type: type, id: id ?? name, value: defaultValue, readOnly: true, hidden: true, ...(register ?? {}), name: name }));
-    }
     const handleInputChange = (event) => {
         if (register) {
             register.onChange(event);
@@ -65,6 +62,9 @@ const TextField = (props) => {
             }
         }
     };
+    if (hidden) {
+        return ((0, jsx_runtime_1.jsx)("input", { type: "hidden", id: id ?? name, value: value, readOnly: true, hidden: true, ...(register ?? {}), name: name, onChange: handleInputChange }));
+    }
     const inputComponent = ((0, jsx_runtime_1.jsx)("input", { type: type, readOnly: readOnly, disabled: disabled, id: id ?? name, autoComplete: "given-name", value: value, onWheel: (e) => {
             e.currentTarget.blur();
         }, step: type === "number" ? 0.01 : undefined, onKeyDown: (event) => {

package/dist/esm/Buttons/Button.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { WithTooltip } from "../WithTooltip/WithTooltip.js";
 import { useFormContext } from "react-hook-form";
-import { WithTooltip } from "../index.js";
 export const Button = (props) => {
-    const { type = "submit", loading = false, loadingText = "Guardando...", title = "Guardar", name = "save", onClickSave, selectedColor = "indigo", children, className = "", disabled = false, } = props;
+    const { type = "submit", loading = false, loadingText = "Guardando...", title = "Guardar", name = "save", onClickSave, selectedColor = "indigo", children, className = "", disabled = false, enableFormErrorsValidation = true, } = props;
     const formContext = useFormContext();
     const formHasErrors = formContext ? !formContext.formState.isValid : false;
     const formErrors = formContext ? formContext.formState.errors : {};
@@ -42,13 +42,17 @@ export const Button = (props) => {
     };
     const color = COLORS[selectedColor];
     const inside = children ?? title;
-    const errorMessage = formHasErrors
+    const errorMessage = enableFormErrorsValidation && formHasErrors
         ? Object.values(formErrors)
             .map((error) => error?.message?.toString())
             .join(", ")
         : "";
-    const buttonContent = (_jsx("button", { type: type, name: "action", disabled: loading || disabled || formHasErrors, value: name, onClick: onClickSave, className: `ml-2 ${loading || disabled || formHasErrors ? " bg-opacity-25 " : ""} ${loading
+    const buttonContent = (_jsx("button", { type: type, name: "action", disabled: loading || disabled || (enableFormErrorsValidation && formHasErrors), value: name, onClick: onClickSave, className: `ml-2 ${loading || disabled || (enableFormErrorsValidation && formHasErrors)
+            ? " bg-opacity-25 "
+            : ""} ${loading
             ? " cursor-progress"
-            : `${disabled || formHasErrors ? "" : `hover:${color.bg700}`}`} inline-flex justify-center rounded-md border border-transparent ${color.bg600} py-2 px-4 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:${color.ring500} focus:ring-offset-2 ${className}`, children: loading ? loadingText : inside }));
-    return formHasErrors ? (_jsx(WithTooltip, { text: errorMessage, children: buttonContent })) : (buttonContent);
+            : `${disabled || (enableFormErrorsValidation && formHasErrors)
+                ? ""
+                : `hover:${color.bg700}`}`} inline-flex justify-center rounded-md border border-transparent ${color.bg600} py-2 px-4 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:${color.ring500} focus:ring-offset-2 ${className}`, children: loading ? loadingText : inside }));
+    return enableFormErrorsValidation && formHasErrors ? (_jsx(WithTooltip, { text: errorMessage, children: buttonContent })) : (buttonContent);
 };

package/dist/esm/Footer/Footer.js

@@ -10,7 +10,7 @@ const COLORS = {
     red: "bg-red-500",
     sky: "bg-sky-500",
 };
-export const Footer = ({ href, selectedColor, showConnection = false, }) => {
+export const Footer = ({ href, selectedColor, showConnection = false, version = "2.0.5", }) => {
     const color = COLORS[selectedColor];
-    return (_jsx("footer", { className: `inset-x-0 bottom-0 px-2 py-[20px] ${color}`, children: _jsxs("div", { className: "px-4 mx-auto flex flex-wrap items-center justify-center", children: [_jsxs("p", { className: "text-white text-[1.2rem]", children: [`Creado en `, " ", _jsx("a", { href: href, children: "Zauru" }), " ", `con ❤️ ${new Date().getFullYear()} v.2.0.0`] }), showConnection && (_jsx("div", { className: "ml-5", children: _jsx(ConnectionState, {}) }))] }) }));
+    return (_jsx("footer", { className: `inset-x-0 bottom-0 px-2 py-[20px] ${color}`, children: _jsxs("div", { className: "px-4 mx-auto flex flex-wrap items-center justify-center", children: [_jsxs("p", { className: "text-white text-[1.2rem]", children: [`Creado en `, " ", _jsx("a", { href: href, children: "Zauru" }), " ", `con ❤️ ${new Date().getFullYear()} v.${version}`] }), showConnection && (_jsx("div", { className: "ml-5", children: _jsx(ConnectionState, {}) }))] }) }));
 };

package/dist/esm/Form/SelectField/index.js

@@ -87,7 +87,12 @@ export const SelectField = (props) => {
                 filteredOptions.length > 0 &&
                 !isEnterPressed &&
                 isSearching) {
-                handleOptionClick(filteredOptions[0]);
+                if (highlightedIndex >= 0) {
+                    handleOptionClick(filteredOptions[highlightedIndex]);
+                }
+                else {
+                    handleOptionClick(filteredOptions[0]);
+                }
             }
             setIsTabPressed(false);
             setIsEnterPressed(false);
@@ -130,7 +135,7 @@ export const SelectField = (props) => {
     }
     return (_jsxs("div", { className: `col-span-6 sm:col-span-3 ${className}`, ref: selectRef, children: [title && (_jsxs("label", { htmlFor: error ? `${name}-error` : `${name}-success`, className: `block text-sm font-medium ${color === "red"
                     ? "text-red-700 dark:text-red-500"
-                    : "text-gray-700 dark:text-gray-500"}`, children: [title, required && _jsx("span", { className: "text-red-500", children: "*" })] })), _jsxs("div", { className: "relative", children: [_jsx(Controller, { name: name || "", control: control, rules: { required }, defaultValue: defaultValue || (isMulti ? [] : null), render: ({ field }) => (_jsx("input", { ...field, type: "text", id: id, value: inputValue, onFocus: () => setIsOpen(true), onBlur: handleBlur, onKeyDown: handleKeyDown, readOnly: isReadOnly, disabled: disabled, className: `block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm`, placeholder: isMulti ? "Select options..." : "Select an option...", onChange: (e) => {
+                    : "text-gray-700 dark:text-gray-500"}`, children: [title, required && _jsx("span", { className: "text-red-500", children: "*" })] })), _jsxs("div", { className: "relative", children: [_jsx(Controller, { name: name || "", control: control, rules: { required }, defaultValue: defaultValue || (isMulti ? [] : null), render: ({ field }) => (_jsx("input", { ...field, type: "text", id: id, autoComplete: "off", value: inputValue, onFocus: () => setIsOpen(true), onBlur: handleBlur, onKeyDown: handleKeyDown, readOnly: isReadOnly, disabled: disabled, className: `block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm`, placeholder: isMulti ? "Select options..." : "Select an option...", onChange: (e) => {
                                 field.onChange(e);
                                 handleInputChange(e);
                             } })) }), isClearable && (value || valueMulti.length > 0) && (_jsx("button", { type: "button", onClick: handleClear, className: "absolute inset-y-0 right-0 pr-3 flex items-center", children: "\u00D7" })), isOpen && !isReadOnly && (_jsx("ul", { ref: optionsRef, className: "absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm", children: filteredOptions.map((option, index) => (_jsx("li", { className: `cursor-pointer select-none relative py-2 pl-3 pr-9 ${(isMulti

package/dist/esm/Form/TextField/index.js

@@ -22,9 +22,6 @@ export const TextField = (props) => {
     useEffect(() => {
         setValue(defaultValue);
     }, [defaultValue]);
-    if (hidden) {
-        return (_jsx("input", { type: type, id: id ?? name, value: defaultValue, readOnly: true, hidden: true, ...(register ?? {}), name: name }));
-    }
     const handleInputChange = (event) => {
         if (register) {
             register.onChange(event);
@@ -62,6 +59,9 @@ export const TextField = (props) => {
             }
         }
     };
+    if (hidden) {
+        return (_jsx("input", { type: "hidden", id: id ?? name, value: value, readOnly: true, hidden: true, ...(register ?? {}), name: name, onChange: handleInputChange }));
+    }
     const inputComponent = (_jsx("input", { type: type, readOnly: readOnly, disabled: disabled, id: id ?? name, autoComplete: "given-name", value: value, onWheel: (e) => {
             e.currentTarget.blur();
         }, step: type === "number" ? 0.01 : undefined, onKeyDown: (event) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zauru-sdk/components",
-  "version": "1.0.104",
+  "version": "1.0.106",
   "description": "Componentes reutilizables en las WebApps de Zauru.",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
@@ -34,11 +34,11 @@
     "@hookform/resolvers": "^3.9.0",
     "@reduxjs/toolkit": "^2.2.1",
     "@remix-run/react": "^2.8.1",
-    "@zauru-sdk/common": "^1.0.99",
-    "@zauru-sdk/hooks": "^1.0.104",
+    "@zauru-sdk/common": "^1.0.105",
+    "@zauru-sdk/hooks": "^1.0.106",
     "@zauru-sdk/icons": "^1.0.60",
     "@zauru-sdk/types": "^1.0.98",
-    "@zauru-sdk/utils": "^1.0.99",
+    "@zauru-sdk/utils": "^1.0.105",
     "framer-motion": "^11.0.8",
     "jsonwebtoken": "^9.0.2",
     "react": "^18.2.0",
@@ -50,5 +50,5 @@
     "styled-components": "^5.3.5",
     "zod": "^3.23.8"
   },
-  "gitHead": "98dc3dfc6b85afae4bbf0ac21ecb8d03d5c107ef"
+  "gitHead": "664e7ee59830cf458ea3e47b597a89867b65b66b"
 }

package/src/Buttons/Button.tsx

@@ -1,6 +1,6 @@
+import { WithTooltip } from "../WithTooltip/WithTooltip.js";
 import type { ColorInterface } from "../NavBar/NavBar.types.js";
 import { useFormContext } from "react-hook-form";
-import { WithTooltip } from "../index.js";
 
 type Props = {
   type?: "reset" | "button" | "submit" | undefined;
@@ -14,6 +14,7 @@ type Props = {
   children?: React.ReactNode;
   className?: string;
   disabled?: boolean;
+  enableFormErrorsValidation?: boolean;
 };
 
 export const Button = (props: Props) => {
@@ -28,6 +29,7 @@ export const Button = (props: Props) => {
     children,
     className = "",
     disabled = false,
+    enableFormErrorsValidation = true,
   } = props;
 
   const formContext = useFormContext();
@@ -73,25 +75,34 @@ export const Button = (props: Props) => {
 
   const inside = children ?? title;
 
-  const errorMessage = formHasErrors
-    ? Object.values(formErrors)
-        .map((error) => error?.message?.toString())
-        .join(", ")
-    : "";
+  const errorMessage =
+    enableFormErrorsValidation && formHasErrors
+      ? Object.values(formErrors)
+          .map((error) => error?.message?.toString())
+          .join(", ")
+      : "";
 
   const buttonContent = (
     <button
       type={type}
       name="action"
-      disabled={loading || disabled || formHasErrors}
+      disabled={
+        loading || disabled || (enableFormErrorsValidation && formHasErrors)
+      }
       value={name}
       onClick={onClickSave}
       className={`ml-2 ${
-        loading || disabled || formHasErrors ? " bg-opacity-25 " : ""
+        loading || disabled || (enableFormErrorsValidation && formHasErrors)
+          ? " bg-opacity-25 "
+          : ""
       } ${
         loading
           ? " cursor-progress"
-          : `${disabled || formHasErrors ? "" : `hover:${color.bg700}`}`
+          : `${
+              disabled || (enableFormErrorsValidation && formHasErrors)
+                ? ""
+                : `hover:${color.bg700}`
+            }`
       } inline-flex justify-center rounded-md border border-transparent ${
         color.bg600
       } py-2 px-4 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:${
@@ -102,7 +113,7 @@ export const Button = (props: Props) => {
     </button>
   );
 
-  return formHasErrors ? (
+  return enableFormErrorsValidation && formHasErrors ? (
     <WithTooltip text={errorMessage}>{buttonContent}</WithTooltip>
   ) : (
     buttonContent

package/src/Footer/Footer.tsx

@@ -12,6 +12,7 @@ type FooterProps = {
     | "green"
     | "red"
     | "sky";
+  version?: string;
 };
 
 const COLORS = {
@@ -29,6 +30,7 @@ export const Footer = ({
   href,
   selectedColor,
   showConnection = false,
+  version = "2.0.5",
 }: FooterProps) => {
   const color = COLORS[selectedColor];
 
@@ -37,7 +39,7 @@ export const Footer = ({
       <div className="px-4 mx-auto flex flex-wrap items-center justify-center">
         <p className="text-white text-[1.2rem]">
           {`Creado en `} <a href={href}>Zauru</a>{" "}
-          {`con ❤️ ${new Date().getFullYear()} v.2.0.0`}
+          {`con ❤️ ${new Date().getFullYear()} v.${version}`}
         </p>
         {showConnection && (
           <div className="ml-5">

package/src/Form/SelectField/index.tsx

@@ -152,7 +152,11 @@ export const SelectField = (props: Props) => {
         !isEnterPressed &&
         isSearching
       ) {
-        handleOptionClick(filteredOptions[0]);
+        if (highlightedIndex >= 0) {
+          handleOptionClick(filteredOptions[highlightedIndex]);
+        } else {
+          handleOptionClick(filteredOptions[0]);
+        }
       }
       setIsTabPressed(false);
       setIsEnterPressed(false);
@@ -245,6 +249,7 @@ export const SelectField = (props: Props) => {
               {...field}
               type="text"
               id={id}
+              autoComplete="off"
               value={inputValue}
               onFocus={() => setIsOpen(true)}
               onBlur={handleBlur}

package/src/Form/TextField/index.tsx

@@ -1,5 +1,5 @@
 import { IdeaIconSVG } from "@zauru-sdk/icons";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { useFormContext } from "react-hook-form";
 
 type Props = {
@@ -73,20 +73,6 @@ export const TextField = (props: Props) => {
     setValue(defaultValue);
   }, [defaultValue]);
 
-  if (hidden) {
-    return (
-      <input
-        type={type}
-        id={id ?? name}
-        value={defaultValue}
-        readOnly={true}
-        hidden={true}
-        {...(register ?? {})}
-        name={name}
-      />
-    );
-  }
-
   const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (register) {
       register.onChange(event);
@@ -125,6 +111,21 @@ export const TextField = (props: Props) => {
     }
   };
 
+  if (hidden) {
+    return (
+      <input
+        type={"hidden"}
+        id={id ?? name}
+        value={value}
+        readOnly={true}
+        hidden={true}
+        {...(register ?? {})}
+        name={name}
+        onChange={handleInputChange}
+      />
+    );
+  }
+
   const inputComponent = (
     <input
       type={type}