@zauru-sdk/components 2.0.65 → 2.0.67

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.
 
+## [2.0.67](https://github.com/intuitiva/zauru-typescript-sdk/compare/v2.0.66...v2.0.67) (2024-11-15)
+
+**Note:** Version bump only for package @zauru-sdk/components
+
+
+
+
+
+## [2.0.66](https://github.com/intuitiva/zauru-typescript-sdk/compare/v2.0.65...v2.0.66) (2024-11-13)
+
+**Note:** Version bump only for package @zauru-sdk/components
+
+
+
+
+
 ## [2.0.65](https://github.com/intuitiva/zauru-typescript-sdk/compare/v2.0.64...v2.0.65) (2024-11-13)
 
 **Note:** Version bump only for package @zauru-sdk/components

package/dist/Form/TextField/index.d.ts

@@ -18,6 +18,7 @@ type Props = {
     style?: React.CSSProperties;
     className?: string;
     required?: boolean;
+    autoComplete?: React.HTMLInputAutoCompleteAttribute;
 };
 export declare const TextField: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -38,18 +38,58 @@ export const SelectField = (props) => {
                 setIsOpen(false);
             }
         };
-        if (defaultValue) {
-            setValue(defaultValue);
-            setInputValue(defaultValue.label);
-            if (setFormValue) {
-                setFormValue(name || "", defaultValue.value);
-            }
-        }
         document.addEventListener("mousedown", handleClickOutside);
         return () => {
             document.removeEventListener("mousedown", handleClickOutside);
         };
     }, []);
+    const handleSetSingleValue = (value) => {
+        if (value) {
+            setValue(value);
+            setInputValue(value.label);
+            if (setFormValue) {
+                setFormValue(name || "", value.value);
+            }
+        }
+        else {
+            setValue(null);
+            setInputValue("");
+            if (setFormValue) {
+                setFormValue(name || "", "");
+            }
+        }
+        onChange && onChange(value ?? null);
+    };
+    const handleAddMultiValue = (value) => {
+        if (value) {
+            const existValue = options.some((v) => v.value === value.value);
+            const noEstaYaSeleccionado = !valueMulti.some((v) => v.value === value.value);
+            if (existValue && noEstaYaSeleccionado) {
+                const newValue = [...valueMulti, value];
+                setValueMulti(newValue);
+                if (setFormValue) {
+                    setFormValue(name || "", newValue.map((v) => v.value));
+                }
+                onChangeMulti && onChangeMulti(newValue);
+            }
+        }
+        else {
+            setValueMulti([]);
+            if (setFormValue) {
+                setFormValue(name || "", []);
+            }
+            setInputValue("");
+            onChangeMulti && onChangeMulti([]);
+        }
+    };
+    const handleRemoveMultiValue = (value) => {
+        const newValue = valueMulti.filter((v) => v.value !== value.value);
+        setValueMulti(newValue);
+        if (setFormValue) {
+            setFormValue(name || "", newValue.map((v) => v.value));
+        }
+        onChangeMulti && onChangeMulti(newValue);
+    };
     const handleInputChange = (e) => {
         const newValue = e.target.value;
         if (register) {
@@ -62,44 +102,23 @@ export const SelectField = (props) => {
     };
     const handleOptionClick = (option) => {
         if (isMulti) {
-            const newValue = valueMulti.some((v) => v.value === option.value)
-                ? valueMulti.filter((v) => v.value !== option.value)
-                : [...valueMulti, option];
-            setValueMulti(newValue);
-            onChangeMulti && onChangeMulti(newValue);
-            if (setFormValue) {
-                setFormValue(name || "", newValue.map((v) => v.value));
-            }
+            handleAddMultiValue(option);
         }
         else {
-            setValue(option);
-            setInputValue(option.label);
-            onChange && onChange(option);
-            if (setFormValue) {
-                setFormValue(name || "", option.value);
-            }
+            handleSetSingleValue(option);
         }
         setHighlightedIndex(-1);
         setIsSearching(false);
-        setFilteredOptions([]);
+        setFilteredOptions(options);
         setIsOpen(false);
     };
     const handleClear = () => {
         if (isMulti) {
-            setValueMulti([]);
-            onChangeMulti && onChangeMulti([]);
-            if (setFormValue) {
-                setFormValue(name || "", []);
-            }
+            handleAddMultiValue();
         }
         else {
-            setValue(null);
-            onChange && onChange(null);
-            if (setFormValue) {
-                setFormValue(name || "", "");
-            }
+            handleSetSingleValue();
         }
-        setInputValue("");
     };
     const handleBlur = () => {
         setTimeout(() => {
@@ -109,6 +128,7 @@ export const SelectField = (props) => {
             else if (isTabPressed && filteredOptions.length > 0 && isSearching) {
                 handleOptionClick(filteredOptions[0]);
             }
+            setHighlightedIndex(-1);
             setIsTabPressed(false);
             setIsSearching(false);
             setIsOpen(false);
@@ -155,13 +175,13 @@ 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("input", { type: "text", id: id, value: inputValue, onFocus: () => setIsOpen(true), 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 pr-10`, placeholder: isMulti ? "Select options..." : "Select an option...", autoComplete: "off", onChange: handleInputChange, onBlur: handleBlur, required: required }), _jsx("input", { type: "hidden", ...(register ?? {}), name: name, value: isMulti
+                    : "text-gray-700 dark:text-gray-500"}`, children: [title, required && _jsx("span", { className: "text-red-500", children: "*" })] })), _jsxs("div", { className: "relative", children: [_jsxs("div", { className: "flex items-center", children: [_jsx("input", { type: "text", id: id, value: inputValue, onFocus: () => setIsOpen(true), 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 pr-10`, placeholder: isMulti ? "Select options..." : "Select an option...", autoComplete: "off", onChange: handleInputChange, onBlur: handleBlur, required: required }), 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" })), helpText && (_jsx("div", { className: "flex items-center relative ml-3", children: _jsxs("div", { className: "relative cursor-pointer", onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), children: [_jsx(IdeaIconSVG, {}), showTooltip && (_jsx("div", { className: "absolute -left-48 top-0 mt-8 p-2 bg-white border rounded shadow text-black z-50", children: helpText }))] }) }))] }), _jsx("input", { type: "hidden", ...(register ?? {}), name: name, value: isMulti
                             ? valueMulti.map((v) => v.value).join(",")
-                            : value?.value || "" }), 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" })), !isClearable && (value || valueMulti.length > 0) && (_jsx("span", { className: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none", children: _jsx("svg", { className: "h-5 w-5 text-green-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }) })), 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
+                            : value?.value || "" }), 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
                                 ? valueMulti.some((v) => v.value === option.value)
                                 : value?.value === option.value)
                                 ? "text-white bg-indigo-600"
                                 : index === highlightedIndex
                                     ? "text-black bg-sky-200"
-                                    : "text-gray-900"}`, onClick: () => handleOptionClick(option), onMouseEnter: () => setHighlightedIndex(index), onMouseLeave: () => setHighlightedIndex(-1), children: option.label }, `${option.value}-${index}`))) }))] }), isMulti && (_jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: valueMulti.map((option, index) => (_jsxs("span", { className: "bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded", children: [option.label, _jsx("button", { type: "button", onClick: () => handleOptionClick(option), className: "ml-1 text-blue-600 hover:text-blue-800", children: "\u00D7" })] }, `${option.value}-${index}`))) })), helpText && (_jsx("div", { className: "flex items-center relative mt-1", children: _jsxs("div", { className: "relative cursor-pointer", onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), children: [_jsx(IdeaIconSVG, {}), showTooltip && (_jsx("div", { className: "absolute -left-48 top-0 mt-8 p-2 bg-white border rounded shadow text-black z-50", children: helpText }))] }) })), error && (_jsxs("p", { className: `mt-2 text-sm text-${color}-600 dark:text-${color}-500`, children: [_jsx("span", { className: "font-medium", children: "Oops!" }), " ", error?.message?.toString() || "Error desconocido"] })), !error && hint && (_jsx("p", { className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: hint }))] }));
+                                    : "text-gray-900"}`, onClick: () => handleOptionClick(option), onMouseEnter: () => setHighlightedIndex(index), onMouseLeave: () => setHighlightedIndex(-1), children: option.label }, `${option.value}-${index}`))) }))] }), isMulti && valueMulti.length > 0 && (_jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: valueMulti.map((option, index) => (_jsxs("span", { className: "bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded", children: [option.label, _jsx("button", { type: "button", onClick: () => handleRemoveMultiValue(option), className: "ml-1 text-blue-600 hover:text-blue-800", children: "\u00D7" })] }, `${option.value}-${index}`))) })), error && (_jsxs("p", { className: `mt-2 text-sm text-${color}-600 dark:text-${color}-500`, children: [_jsx("span", { className: "font-medium", children: "Oops!" }), " ", error?.message?.toString() || "Error desconocido"] })), !error && hint && (_jsx("p", { className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: hint }))] }));
 };

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

@@ -3,7 +3,7 @@ import { IdeaIconSVG } from "@zauru-sdk/icons";
 import { useEffect, useState } from "react";
 import { useFormContext } from "react-hook-form";
 export const TextField = (props) => {
-    const { id, name, defaultValue = "", hidden, type = "text", onChange, onKeyDown, disabled = false, readOnly = false, min, integer = false, stopChangeEvents, style, title, helpText, className = "", hint, required, } = props;
+    const { id, name, defaultValue = "", hidden, type = "text", onChange, onKeyDown, disabled = false, readOnly = false, min, integer = false, stopChangeEvents, style, title, helpText, className = "", hint, required, autoComplete = "off", } = props;
     const [showTooltip, setShowTooltip] = useState(false);
     const [value, setValue] = useState(defaultValue);
     const { register: tempRegister, formState: { errors }, setValue: setOnFormValue, } = useFormContext() || { formState: {} }; // Obtener el contexto solo si existe
@@ -56,13 +56,13 @@ export const TextField = (props) => {
     if (hidden) {
         return (_jsx("input", { type: type, id: id ?? name, value: value, hidden: true, ...(register ?? {}), name: name, onChange: handleInputChange }));
     }
-    const inputComponent = (_jsx("input", { type: type, readOnly: isReadOnly, disabled: disabled, id: id ?? name, autoComplete: "off", value: value, onWheel: (e) => {
+    const inputComponent = (_jsx("input", { type: type, readOnly: isReadOnly, disabled: disabled, id: id ?? name, value: value, onWheel: (e) => {
             e.currentTarget.blur();
         }, step: type === "number" ? 0.01 : undefined, onKeyDown: (event) => {
             handleKeyDown(event);
             onKeyDown && onKeyDown(event);
-        }, min: min, style: style, className: `block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm`, ...(register ?? {}), name: name, onChange: handleInputChange }));
-    if (!error && !title) {
+        }, min: min, style: style, className: `block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm`, ...(register ?? {}), name: name, autoComplete: autoComplete, onChange: handleInputChange }));
+    if (!error && !title && !helpText) {
         return _jsx("div", { className: `${className}`, children: inputComponent });
     }
     return (_jsxs("div", { className: `col-span-6 sm:col-span-3 ${className}`, children: [title && (_jsxs("label", { htmlFor: error ? `${name}-error` : `${name}-success`, className: `block mb-1 text-sm font-medium text-${color}-700 dark:text-${color}-500`, children: [title, required && _jsx("span", { className: "text-red-500", children: "*" })] })), _jsxs("div", { className: "flex relative items-center", children: [inputComponent, helpText && (_jsx("div", { className: "flex items-center relative ml-3", children: _jsxs("div", { className: "relative cursor-pointer", onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), children: [_jsx(IdeaIconSVG, {}), showTooltip && (_jsx("div", { className: "absolute -left-48 top-0 mt-8 p-2 bg-white border rounded shadow text-black z-50", children: helpText }))] }) }))] }), error && (_jsxs("p", { className: `mt-2 text-sm text-${color}-600 dark:text-${color}-500`, children: [_jsx("span", { className: "font-medium", children: "Oops!" }), " ", error.message?.toString()] })), !error && hint && (_jsx("p", { className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: hint }))] }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zauru-sdk/components",
-  "version": "2.0.65",
+  "version": "2.0.67",
   "description": "Componentes reutilizables en las WebApps de Zauru.",
   "main": "./dist/esm/index.js",
   "module": "./dist/esm/index.js",
@@ -34,10 +34,10 @@
     "@reduxjs/toolkit": "^2.2.1",
     "@remix-run/react": "^2.8.1",
     "@zauru-sdk/common": "^2.0.51",
-    "@zauru-sdk/hooks": "^2.0.65",
+    "@zauru-sdk/hooks": "^2.0.66",
     "@zauru-sdk/icons": "^2.0.0",
     "@zauru-sdk/types": "^2.0.51",
-    "@zauru-sdk/utils": "^2.0.64",
+    "@zauru-sdk/utils": "^2.0.67",
     "framer-motion": "^11.7.0",
     "jsonwebtoken": "^9.0.2",
     "react": "^18.2.0",
@@ -49,5 +49,5 @@
     "styled-components": "^5.3.5",
     "zod": "^3.23.8"
   },
-  "gitHead": "07120cef018bea528a3dadf4e77a4776a0b5477e"
+  "gitHead": "375907d0686b86fb116f4831ce7807097179c3f5"
 }

package/src/Form/SelectField/index.tsx

@@ -94,20 +94,68 @@ export const SelectField = (props: Props) => {
       }
     };
 
-    if (defaultValue) {
-      setValue(defaultValue);
-      setInputValue(defaultValue.label);
-      if (setFormValue) {
-        setFormValue(name || "", defaultValue.value);
-      }
-    }
-
     document.addEventListener("mousedown", handleClickOutside);
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, []);
 
+  const handleSetSingleValue = (value?: SelectFieldOption) => {
+    if (value) {
+      setValue(value);
+      setInputValue(value.label);
+      if (setFormValue) {
+        setFormValue(name || "", value.value);
+      }
+    } else {
+      setValue(null);
+      setInputValue("");
+      if (setFormValue) {
+        setFormValue(name || "", "");
+      }
+    }
+    onChange && onChange(value ?? null);
+  };
+
+  const handleAddMultiValue = (value?: SelectFieldOption) => {
+    if (value) {
+      const existValue = options.some((v) => v.value === value.value);
+      const noEstaYaSeleccionado = !valueMulti.some(
+        (v) => v.value === value.value
+      );
+      if (existValue && noEstaYaSeleccionado) {
+        const newValue = [...valueMulti, value];
+        setValueMulti(newValue);
+        if (setFormValue) {
+          setFormValue(
+            name || "",
+            newValue.map((v) => v.value)
+          );
+        }
+        onChangeMulti && onChangeMulti(newValue);
+      }
+    } else {
+      setValueMulti([]);
+      if (setFormValue) {
+        setFormValue(name || "", []);
+      }
+      setInputValue("");
+      onChangeMulti && onChangeMulti([]);
+    }
+  };
+
+  const handleRemoveMultiValue = (value: SelectFieldOption) => {
+    const newValue = valueMulti.filter((v) => v.value !== value.value);
+    setValueMulti(newValue);
+    if (setFormValue) {
+      setFormValue(
+        name || "",
+        newValue.map((v) => v.value)
+      );
+    }
+    onChangeMulti && onChangeMulti(newValue);
+  };
+
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newValue = e.target.value;
     if (register) {
@@ -125,46 +173,22 @@ export const SelectField = (props: Props) => {
 
   const handleOptionClick = (option: SelectFieldOption) => {
     if (isMulti) {
-      const newValue = valueMulti.some((v) => v.value === option.value)
-        ? valueMulti.filter((v) => v.value !== option.value)
-        : [...valueMulti, option];
-      setValueMulti(newValue);
-      onChangeMulti && onChangeMulti(newValue);
-      if (setFormValue) {
-        setFormValue(
-          name || "",
-          newValue.map((v) => v.value)
-        );
-      }
+      handleAddMultiValue(option);
     } else {
-      setValue(option);
-      setInputValue(option.label);
-      onChange && onChange(option);
-      if (setFormValue) {
-        setFormValue(name || "", option.value);
-      }
+      handleSetSingleValue(option);
     }
     setHighlightedIndex(-1);
     setIsSearching(false);
-    setFilteredOptions([]);
+    setFilteredOptions(options);
     setIsOpen(false);
   };
 
   const handleClear = () => {
     if (isMulti) {
-      setValueMulti([]);
-      onChangeMulti && onChangeMulti([]);
-      if (setFormValue) {
-        setFormValue(name || "", []);
-      }
+      handleAddMultiValue();
     } else {
-      setValue(null);
-      onChange && onChange(null);
-      if (setFormValue) {
-        setFormValue(name || "", "");
-      }
+      handleSetSingleValue();
     }
-    setInputValue("");
   };
 
   const handleBlur = () => {
@@ -175,6 +199,7 @@ export const SelectField = (props: Props) => {
         handleOptionClick(filteredOptions[0]);
       }
 
+      setHighlightedIndex(-1);
       setIsTabPressed(false);
       setIsSearching(false);
       setIsOpen(false);
@@ -260,21 +285,48 @@ export const SelectField = (props: Props) => {
         </label>
       )}
       <div className="relative">
-        <input
-          type="text"
-          id={id}
-          value={inputValue}
-          onFocus={() => setIsOpen(true)}
-          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 pr-10`}
-          placeholder={isMulti ? "Select options..." : "Select an option..."}
-          autoComplete="off"
-          onChange={handleInputChange}
-          onBlur={handleBlur}
-          required={required}
-        />
+        <div className="flex items-center">
+          <input
+            type="text"
+            id={id}
+            value={inputValue}
+            onFocus={() => setIsOpen(true)}
+            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 pr-10`}
+            placeholder={isMulti ? "Select options..." : "Select an option..."}
+            autoComplete="off"
+            onChange={handleInputChange}
+            onBlur={handleBlur}
+            required={required}
+          />
+          {isClearable && (value || valueMulti.length > 0) && (
+            <button
+              type="button"
+              onClick={handleClear}
+              className="absolute inset-y-0 right-0 pr-3 flex items-center"
+            >
+              ×
+            </button>
+          )}
+          {helpText && (
+            <div className="flex items-center relative ml-3">
+              <div
+                className="relative cursor-pointer"
+                onMouseEnter={() => setShowTooltip(true)}
+                onMouseLeave={() => setShowTooltip(false)}
+              >
+                <IdeaIconSVG />
+                {showTooltip && (
+                  <div className="absolute -left-48 top-0 mt-8 p-2 bg-white border rounded shadow text-black z-50">
+                    {helpText}
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
         <input
           type="hidden"
           {...(register ?? {})}
@@ -285,33 +337,6 @@ export const SelectField = (props: Props) => {
               : value?.value || ""
           }
         />
-        {isClearable && (value || valueMulti.length > 0) && (
-          <button
-            type="button"
-            onClick={handleClear}
-            className="absolute inset-y-0 right-0 pr-3 flex items-center"
-          >
-            ×
-          </button>
-        )}
-        {!isClearable && (value || valueMulti.length > 0) && (
-          <span className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
-            <svg
-              className="h-5 w-5 text-green-500"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M5 13l4 4L19 7"
-              />
-            </svg>
-          </span>
-        )}
         {isOpen && !isReadOnly && (
           <ul
             ref={optionsRef}
@@ -341,7 +366,7 @@ export const SelectField = (props: Props) => {
           </ul>
         )}
       </div>
-      {isMulti && (
+      {isMulti && valueMulti.length > 0 && (
         <div className="mt-2 flex flex-wrap gap-2">
           {valueMulti.map((option, index) => (
             <span
@@ -351,7 +376,7 @@ export const SelectField = (props: Props) => {
               {option.label}
               <button
                 type="button"
-                onClick={() => handleOptionClick(option)}
+                onClick={() => handleRemoveMultiValue(option)}
                 className="ml-1 text-blue-600 hover:text-blue-800"
               >
                 ×
@@ -360,22 +385,6 @@ export const SelectField = (props: Props) => {
           ))}
         </div>
       )}
-      {helpText && (
-        <div className="flex items-center relative mt-1">
-          <div
-            className="relative cursor-pointer"
-            onMouseEnter={() => setShowTooltip(true)}
-            onMouseLeave={() => setShowTooltip(false)}
-          >
-            <IdeaIconSVG />
-            {showTooltip && (
-              <div className="absolute -left-48 top-0 mt-8 p-2 bg-white border rounded shadow text-black z-50">
-                {helpText}
-              </div>
-            )}
-          </div>
-        </div>
-      )}
       {error && (
         <p className={`mt-2 text-sm text-${color}-600 dark:text-${color}-500`}>
           <span className="font-medium">Oops!</span>{" "}

package/src/Form/TextField/index.tsx

@@ -24,6 +24,7 @@ type Props = {
   style?: React.CSSProperties;
   className?: string;
   required?: boolean;
+  autoComplete?: React.HTMLInputAutoCompleteAttribute;
 };
 
 export const TextField = (props: Props) => {
@@ -46,6 +47,7 @@ export const TextField = (props: Props) => {
     className = "",
     hint,
     required,
+    autoComplete = "off",
   } = props;
 
   const [showTooltip, setShowTooltip] = useState<boolean>(false);
@@ -129,7 +131,6 @@ export const TextField = (props: Props) => {
       readOnly={isReadOnly}
       disabled={disabled}
       id={id ?? name}
-      autoComplete="off"
       value={value}
       onWheel={(e: React.WheelEvent<HTMLInputElement>) => {
         e.currentTarget.blur();
@@ -144,11 +145,12 @@ export const TextField = (props: Props) => {
       className={`block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm`}
       {...(register ?? {})}
       name={name}
+      autoComplete={autoComplete}
       onChange={handleInputChange}
     />
   );
 
-  if (!error && !title) {
+  if (!error && !title && !helpText) {
     return <div className={`${className}`}>{inputComponent}</div>;
   }