react-core-ts 1.3.44 → 1.3.46

package/src/ExpandableAutoComplete.tsx

@@ -5,18 +5,18 @@ import React, {
   useImperativeHandle,
   useRef,
   useState,
-} from "react";
-import ReactDOM from "react-dom";
-
-import { AutoSuggestionInputProps } from "./commontypes";
-import DropdownList from "./components/DropdownList";
-import InputActions from "./components/InputActions";
-import { useSuggestions } from "./utilities/autosuggestions";
-import { debounce } from "./utilities/debounce";
-import { deepEqual } from "./utilities/deepEqual";
-import { default as Tooltip } from "./utilities/expandableTootltip";
-import { filterSuggestions } from "./utilities/filterSuggestions";
-import { Search, Spinner } from "./utilities/icons";
+} from 'react';
+import ReactDOM from 'react-dom';
+
+import { AutoSuggestionInputProps } from './commontypes';
+import DropdownList from './components/DropdownList';
+import InputActions from './components/InputActions';
+import { useSuggestions } from './utilities/autosuggestions';
+import { debounce } from './utilities/debounce';
+import { deepEqual } from './utilities/deepEqual';
+import { default as Tooltip } from './utilities/expandableTootltip';
+import { filterSuggestions } from './utilities/filterSuggestions';
+import { Search, Spinner } from './utilities/icons';
 
 type ValueProps = {
   [key: string]: string;
@@ -37,14 +37,14 @@ const ExpandableAutoComplete = forwardRef<
       fullWidth = false,
       placeholder,
       id,
-      type = "custom_select",
+      type = 'custom_select',
       selectedItems: propsSeelctedItems = [],
       readOnly = false,
       disabled = false,
       value,
       isMultiple = false,
-      desc = "name",
-      descId = "id",
+      desc = 'name',
+      descId = 'id',
       singleSelect,
       className,
       async = false,
@@ -68,7 +68,7 @@ const ExpandableAutoComplete = forwardRef<
     const [isInitialRender, setIsInitialRender] = useState(true);
 
     const [inputValue, setInputValue] = useState<string>(value);
-    const [searchValue, setSearchValue] = useState<string>("");
+    const [searchValue, setSearchValue] = useState<string>('');
     const [nextPage, setNextPage] = useState<number | undefined>(1);
     const [dropOpen, setDropOpen] = useState<boolean>(false);
     const [selectedItems, setSelectedItems] = useState<ValueProps[]>([]);
@@ -110,11 +110,11 @@ const ExpandableAutoComplete = forwardRef<
     };
 
     useEffect(() => {
-      window.addEventListener("resize", adjustDropdownPosition);
+      window.addEventListener('resize', adjustDropdownPosition);
       adjustDropdownPosition();
 
       return () => {
-        window.removeEventListener("resize", adjustDropdownPosition);
+        window.removeEventListener('resize', adjustDropdownPosition);
       };
     }, [dropOpen, selectedItems]);
 
@@ -147,7 +147,7 @@ const ExpandableAutoComplete = forwardRef<
         });
       } else {
         setInputValue(suggestion[desc]);
-        setSearchValue("");
+        setSearchValue('');
         onChange(suggestion);
         setDropOpen(false);
       }
@@ -155,7 +155,7 @@ const ExpandableAutoComplete = forwardRef<
 
     // Adding debounce to avoid making API calls on every keystroke
     const handleChangeWithDebounce = debounce((value) => {
-      if ((type === "auto_complete" || type === "auto_suggestion") && async) {
+      if ((type === 'auto_complete' || type === 'auto_suggestion') && async) {
         handlePickSuggestions(value, 1);
       }
     }, 1000);
@@ -177,7 +177,7 @@ const ExpandableAutoComplete = forwardRef<
           setInputValue(suggestion[desc]);
           onChange(suggestion);
         } else {
-          setInputValue("");
+          setInputValue('');
         }
       }
     };
@@ -187,7 +187,7 @@ const ExpandableAutoComplete = forwardRef<
     }, [propsSeelctedItems]);
     // Effect to set the input value whenever `value` prop changes
     useEffect(() => {
-      setInputValue(value ?? "");
+      setInputValue(value ?? '');
     }, [value]);
 
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -196,7 +196,7 @@ const ExpandableAutoComplete = forwardRef<
       setSearchValue(value);
       handleChangeWithDebounce(value);
       if (!value) {
-        setInputValue("");
+        setInputValue('');
         // onChange({ [descId]: '', [desc]: '' });
       }
     };
@@ -215,19 +215,19 @@ const ExpandableAutoComplete = forwardRef<
 
     const handleClear = () => {
       if (searchValue) {
-        setSearchValue("");
+        setSearchValue('');
         setDropOpen(false);
       } else {
-        setInputValue("");
-        onChange({ [descId]: "", [desc]: "" });
+        setInputValue('');
+        onChange({ [descId]: '', [desc]: '' });
         setDropOpen(false);
       }
     };
 
     const generateClassName = useCallback(() => {
       return `qbs-textfield-default ${className} ${
-        errors && errors?.message ? "textfield-error" : "textfield"
-      } ${expandable ? "expandable" : ""}`;
+        errors && errors?.message ? 'textfield-error' : 'textfield'
+      } ${expandable ? 'expandable' : ''}`;
     }, [errors, name]);
     const handleRemoveSelectedItem = (index: number) => {
       setSelectedItems((prev) => {
@@ -248,37 +248,36 @@ const ExpandableAutoComplete = forwardRef<
         if (
           dropRef.current &&
           event.target instanceof Node &&
-          !dropRef.current.contains(event.target)
-          // &&
-          // event.target.nodeName !== "svg"
+          !dropRef.current.contains(event.target) &&
+          event.target?.id !== 'drop-arrow-icon'
         ) {
           setTimeout(() => {
             setDropOpen(false);
-            setSearchValue("");
+            setSearchValue('');
           }, 200);
         }
       };
-      document.addEventListener("mousedown", handleClickOutside as any);
-      window.addEventListener("scroll", handleClickOutside as any);
+      document.addEventListener('mousedown', handleClickOutside as any);
+      window.addEventListener('scroll', handleClickOutside as any);
 
       const scrollableDivs = document.querySelectorAll(
         'div[style*="overflow"], .overflow-auto, .overflow-y-auto, .overflow-x-auto'
       );
       scrollableDivs.forEach((div) =>
-        div.addEventListener("scroll", handleClickOutside as any)
+        div.addEventListener('scroll', handleClickOutside as any)
       );
       if (scrollRef && scrollRef.current && scrollRef.current !== null) {
-        scrollRef.current.addEventListener("scroll", handleClickOutside as any);
+        scrollRef.current.addEventListener('scroll', handleClickOutside as any);
       }
       return () => {
-        document.removeEventListener("mousedown", handleClickOutside as any);
-        window.removeEventListener("scroll", handleClickOutside as any);
+        document.removeEventListener('mousedown', handleClickOutside as any);
+        window.removeEventListener('scroll', handleClickOutside as any);
         scrollableDivs.forEach((div) =>
-          div.removeEventListener("scroll", handleClickOutside as any)
+          div.removeEventListener('scroll', handleClickOutside as any)
         );
         if (scrollRef && scrollRef.current && scrollRef.current !== null) {
           scrollRef.current.removeEventListener(
-            "scroll",
+            'scroll',
             handleClickOutside as any
           );
         }
@@ -317,7 +316,7 @@ const ExpandableAutoComplete = forwardRef<
     };
 
     const handleOnClick = () => {
-      !disabled && !readOnly ? setDropOpen(true) : "";
+      !disabled && !readOnly ? setDropOpen(true) : '';
     };
     const onInputFocus = () => {
       if (inputRef.current) inputRef.current.focus();
@@ -329,8 +328,8 @@ const ExpandableAutoComplete = forwardRef<
         ? selectedItems
             ?.slice(itemCount)
             .map((item) => item[desc])
-            .join(", ")
-        : "";
+            .join(', ')
+        : '';
 
     const handleDropOpen = (e: any) => {
       if (!dropOpen) setDropOpen(true);
@@ -347,13 +346,13 @@ const ExpandableAutoComplete = forwardRef<
     };
 
     return (
-      <div className={fullWidth ? "fullWidth" : "autoWidth"} ref={dropdownRef}>
+      <div className={fullWidth ? 'fullWidth' : 'autoWidth'} ref={dropdownRef}>
         {label && (
           <div
             style={{
               marginBottom: 5,
-              display: "flex",
-              justifyContent: "space-between",
+              display: 'flex',
+              justifyContent: 'space-between',
             }}
           >
             <label className={`labels label-text`}>
@@ -369,9 +368,9 @@ const ExpandableAutoComplete = forwardRef<
 
         <div
           className={`${
-            expandable ? "qbs-expandable-container" : "qbs-container"
+            expandable ? 'qbs-expandable-container' : 'qbs-container'
           }`}
-          style={{ position: "relative" }}
+          style={{ position: 'relative' }}
         >
           {selectedItems?.length > 0 && (
             <>
@@ -418,12 +417,12 @@ const ExpandableAutoComplete = forwardRef<
 
           <div
             className={`qbs-textfield-expandable ${
-              !expandable ? "qbs-normal" : ""
+              !expandable ? 'qbs-normal' : ''
             }`}
             data-value={
               selectedItems?.length > 0 || searchValue
                 ? searchValue
-                : placeholder ?? ""
+                : placeholder ?? ''
             }
             onClick={() => onInputFocus()}
           >
@@ -432,7 +431,7 @@ const ExpandableAutoComplete = forwardRef<
               ref={inputRef}
               type="text"
               value={
-                type === "auto_suggestion" && !expandable
+                type === 'auto_suggestion' && !expandable
                   ? inputValue
                   : searchValue || inputValue
               }
@@ -441,11 +440,11 @@ const ExpandableAutoComplete = forwardRef<
               onFocus={onFocus}
               onClick={() => handleOnClick()}
               className={generateClassName()}
-              placeholder={selectedItems?.length > 0 ? "" : placeholder ?? ""}
+              placeholder={selectedItems?.length > 0 ? '' : placeholder ?? ''}
               readOnly={
                 readOnly ||
-                type === "custom_select" ||
-                (type == "auto_suggestion" && !expandable)
+                type === 'custom_select' ||
+                (type == 'auto_suggestion' && !expandable)
               }
               disabled={disabled}
               data-testid="custom-autocomplete"
@@ -485,9 +484,9 @@ const ExpandableAutoComplete = forwardRef<
                 style={{ ...dropdownStyle, minHeight: 192 }}
                 className={`qbs-autocomplete-suggestions`}
               >
-                {type == "auto_suggestion" && !expandable && (
+                {type == 'auto_suggestion' && !expandable && (
                   <div
-                    style={{ position: "relative" }}
+                    style={{ position: 'relative' }}
                     className="react-core-ts-search-container"
                   >
                     <span className="dropdown-search-icon">
@@ -521,7 +520,7 @@ const ExpandableAutoComplete = forwardRef<
                     <>
                       {isLoading ? (
                         <div
-                          style={{ display: "flex", justifyContent: "center" }}
+                          style={{ display: 'flex', justifyContent: 'center' }}
                           className="qbs-autocomplete-loader"
                         >
                           <span>
@@ -533,7 +532,7 @@ const ExpandableAutoComplete = forwardRef<
                           className="qbs-autocomplete-notfound"
                           onClick={handleBlur}
                         >
-                          {notDataMessage ?? "No Results Found"}
+                          {notDataMessage ?? 'No Results Found'}
                         </li>
                       )}
                     </>

package/src/ReactTextField.tsx

@@ -1,28 +1,28 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from "react";
 
-import { TextFieldProps } from './commontypes';
-import CustomIcons from './components/customIcons';
-import ModernAutoComplete from './ReactAutoComplete';
-import { applyPositionClass } from './utilities/getPosition';
+import { TextFieldProps } from "./commontypes";
+import CustomIcons from "./components/customIcons";
+import ModernAutoComplete from "./ReactAutoComplete";
+import { applyPositionClass } from "./utilities/getPosition";
 
 const TextField: React.FC<TextFieldProps> = ({
   name,
   id,
   label,
-  type = 'text',
+  type = "text",
   disabled = false,
   readOnly = false,
   fullwidth = true,
   uppercase = false,
-  adorementPosition = 'end',
+  adorementPosition = "end",
   register,
   adorement,
   className: propsClassName,
   value,
-  placeholder = '',
+  placeholder = "",
   min,
   max,
-  size = 'md',
+  size = "md",
   required = false,
   autoComplete = false,
   isValid,
@@ -77,9 +77,9 @@ const TextField: React.FC<TextFieldProps> = ({
       ? adorementRef.current.offsetWidth
       : 15;
     setWidth(innerwidth);
-  }, [adorement]);
+  }, [adorement, infoTitle, showInfo]);
   const getErrors = (err?: any) => {
-    let errMsg = '';
+    let errMsg = "";
     if (err?.message) {
       errMsg = err?.message;
     }
@@ -93,76 +93,76 @@ const TextField: React.FC<TextFieldProps> = ({
 
   const getHeight = () => {
     switch (size) {
-      case 'xs':
-        return ' h-10 ';
-      case 'xxs':
-        return ' h-[25px] ';
-      case 'sm':
-        return ' h-[34px] ';
-      case 'md':
-        return ' h-10 ';
-      case 'lg':
-        return ' h-10 ';
+      case "xs":
+        return " h-10 ";
+      case "xxs":
+        return " h-[25px] ";
+      case "sm":
+        return " h-[34px] ";
+      case "md":
+        return " h-10 ";
+      case "lg":
+        return " h-10 ";
       default:
-        return ' h-10 ';
+        return " h-10 ";
     }
   };
-  const getBg = () => backGround || 'bg-transparent'; //added for set background colour according to the form
+  const getBg = () => backGround || "bg-transparent"; //added for set background colour according to the form
   const generateClassName = (
-    from: 'input' | 'label' | 'message' | 'adorement'
+    from: "input" | "label" | "message" | "adorement"
   ): string => {
     let className = `${propsClassName} `;
 
     switch (from) {
-      case 'input':
+      case "input":
         className += `block ${
-          size === 'xxs' ? ' text-xxs' : 'text-common'
+          size === "xxs" ? " text-xxs" : "text-common"
         }  text-input-text font-normal ${
-          step && adorement ? 'px-2.5' : 'px-3.5'
+          step && adorement ? "px-2.5" : "px-3.5"
         } w-full text-sm text-gray-900 ${getBg()} border appearance-none peer rounded-[4px] disabled:text-input-disabled bg-white disabled:bg-disabled ${
-          hideLabel ? '' : 'placeholder-transparent'
+          hideLabel ? "" : "placeholder-transparent"
         } focus:placeholder-grey-secondary ${
-          adorementPosition === 'start' && ' !pl-[45px] '
+          adorementPosition === "start" && " !pl-[45px] "
         }  ${getHeight()}`;
 
         if (errors && errors[name]) {
           className +=
-            ' border-[#FDA29B] focus:border-error-[#FDA29B] focus:ring-[#FDA29B] focus:ring-3 focus:outline-[#FDA29B] input-outline';
+            " border-[#FDA29B] focus:border-error-[#FDA29B] focus:ring-[#FDA29B] focus:ring-3 focus:outline-[#FDA29B] input-outline";
         } else {
           className +=
-            ' text-grey-dark border-input-light focus:border-blue-navy  focus:outline-none  focus:ring-0';
+            " text-grey-dark border-input-light focus:border-blue-navy  focus:outline-none  focus:ring-0";
         }
 
         break;
-      case 'label': // changes made for remove bg-white from placeolder is field disable and or with data
+      case "label": // changes made for remove bg-white from placeolder is field disable and or with data
         className += ` modern-input-label peer-focus:modern-input-peer-focus-label-size absolute duration-300 transform -translate-y-4 top-2 z-1 origin-[0] px-0 
     peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 
     peer-focus:-translate-y-4 start-[14px] rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto  ${
-      isDisabled ? 'cursor-pointer' : 'cursor-text peer-focus:cursor-pointer'
+      isDisabled ? "cursor-pointer" : "cursor-text peer-focus:cursor-pointer"
     } ${
           isDisabled && !checkIsEmptyField()
-            ? 'disabled-input-label-bg'
+            ? "disabled-input-label-bg"
             : !isDisabled || !checkIsEmptyField()
-            ? 'active-input-label-bg'
-            :  ''
+            ? "active-input-label-bg"
+            : ""
         } ${
           checkIsEmptyField()
-            ? 'modern-input-label-size'
-            : 'modern-input-peer-focus-label-size'
+            ? "modern-input-label-size"
+            : "modern-input-peer-focus-label-size"
         }`;
 
         if (errors && errors[name]) {
-          className += ' text-error-light ';
+          className += " text-error-light ";
         } else {
-          className += ' text-grey-dark peer-focus:text-blue-navy';
+          className += " text-grey-dark peer-focus:text-blue-navy";
         }
         break;
-      case 'message':
-        className = ' text-error-icon ';
+      case "message":
+        className = " text-error-icon ";
         break;
-      case 'adorement':
+      case "adorement":
         className += `${
-          isDisabled ? 'bg-bodyBG' : 'bg-white'
+          isDisabled ? "bg-bodyBG" : "bg-white"
         } absolute right-0 adorement gap-1 flex items-center`;
         break;
 
@@ -174,18 +174,18 @@ const TextField: React.FC<TextFieldProps> = ({
 
   const handleError = (data: any) => {
     if (
-      getErrors(data[name]) === 'required' ||
-      getErrors(data[name]) === 'Required'
+      getErrors(data[name]) === "required" ||
+      getErrors(data[name]) === "Required"
     ) {
       return `${label ?? labelTitle} is ${getErrors(data[name])}`;
     } else {
-      return getErrors(data[name]) ?? '';
+      return getErrors(data[name]) ?? "";
     }
   };
 
   // Added handle key press function on textfield to restrict typing letter 'e' on number type
   const handleKeyPress = (e: any) => {
-    if (type === 'number' && e.key === 'e') e.preventDefault();
+    if (type === "number" && e.key === "e") e.preventDefault();
   };
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -201,14 +201,14 @@ const TextField: React.FC<TextFieldProps> = ({
   const renderPrefix = () => {
     if (prefixes) {
       switch (prefixes?.type) {
-        case 'custom_select':
+        case "custom_select":
           return (
             <ModernAutoComplete
               key={prefixes.name}
               placeholder={prefixes.placeholder}
               onChange={(e: any) => onPrefixChange?.(e)}
               name={prefixes.name}
-              value={prefixValue ?? { id: '', name: '' }}
+              value={prefixValue ?? { id: "", name: "" }}
               type="custom_select"
               isCustomPlaceholder
               fullWidth={false}
@@ -240,7 +240,7 @@ const TextField: React.FC<TextFieldProps> = ({
     return undefined;
   };
 
-  const handleMouseDown = (type: 'up' | 'down') => {
+  const handleMouseDown = (type: "up" | "down") => {
     setIsHolding(true);
     //handleAction(type)
     intervalRef.current = setInterval(() => handleAction(type), 100);
@@ -249,8 +249,8 @@ const TextField: React.FC<TextFieldProps> = ({
     }
   };
 
-  const handleAction = (type: 'up' | 'down') => {
-    if (type === 'up') onStepUp?.();
+  const handleAction = (type: "up" | "down") => {
+    if (type === "up") onStepUp?.();
     else onStepDown?.();
   };
 
@@ -261,7 +261,7 @@ const TextField: React.FC<TextFieldProps> = ({
     }
   }
 
-  const handleClick = (type: 'up' | 'down') => {
+  const handleClick = (type: "up" | "down") => {
     if (!isHolding) {
       clickTimeoutRef.current = setTimeout(() => {
         handleAction(type);
@@ -274,7 +274,7 @@ const TextField: React.FC<TextFieldProps> = ({
     applyPositionClass(textFieldRef, isHovered);
   }, [isHovered]);
   return (
-    <div ref={textFieldRef} className={` ${fullwidth ? 'w-full' : 'w-auto'}`}>
+    <div ref={textFieldRef} className={` ${fullwidth ? "w-full" : "w-auto"}`}>
       <div className="tooltip-container ">
         {isHovered && errors && errors[name] && (
           <span className="tooltip">{handleError(errors)} </span>
@@ -282,10 +282,10 @@ const TextField: React.FC<TextFieldProps> = ({
         {isHovered && infoTitle && (
           <span className="tooltip-info">{infoTitle} </span>
         )}
-        <div className={`w-full ${prefixes ? 'flex' : ''}`}>
+        <div className={`w-full ${prefixes ? "flex" : ""}`}>
           {prefixes && renderPrefix()}
           <div
-            className={`flex relative ${fullwidth ? 'w-full' : 'w-auto'}`}
+            className={`flex relative ${fullwidth ? "w-full" : "w-auto"}`}
             style={{ width: width }}
           >
             <div className="relative w-full ">
@@ -312,15 +312,15 @@ const TextField: React.FC<TextFieldProps> = ({
                       }
                     : {}),
                 }}
-                className={` ${generateClassName('input')} ${
-                  uppercase ? 'uppercase placeholder:normal-case' : ''
+                className={` ${generateClassName("input")} ${
+                  uppercase ? "uppercase placeholder:normal-case" : ""
                 } ''}`}
                 placeholder={placeholder}
                 onChange={(e) => {
                   handleChange(e);
                 }}
                 onKeyDown={handleKeyPress}
-                autoComplete={autoComplete ? 'on' : 'off'}
+                autoComplete={autoComplete ? "on" : "off"}
                 onBlur={(e) => onBlur?.(e)}
                 // autoFocus={autoFocus}
                 value={value}
@@ -329,7 +329,7 @@ const TextField: React.FC<TextFieldProps> = ({
                 <label
                   htmlFor={id}
                   onClick={() => onLabelClick()}
-                  className={generateClassName('label')}
+                  className={generateClassName("label")}
                 >
                   {label}
                   {required ? <span className="text-error"> *</span> : <></>}
@@ -342,10 +342,10 @@ const TextField: React.FC<TextFieldProps> = ({
               (!isValid && isTooltip && errors && errors[name]) ||
               isValid) && (
               <div className="flex items-center justify-center gap-1 ">
-                {adorement && adorementPosition === 'start' && (
+                {adorement && adorementPosition === "start" && (
                   <div
                     className={`  ${
-                      isDisabled ? 'text-zinc-500' : 'text-grey-medium'
+                      isDisabled ? "text-zinc-500" : "text-grey-medium"
                     } absolute adorement left-0  `} // adorement  position added for start
                   >
                     <>{adorement}</>
@@ -354,14 +354,14 @@ const TextField: React.FC<TextFieldProps> = ({
 
                 <div
                   className={`${generateClassName(
-                    'adorement'
+                    "adorement"
                   )} h-[20px] right-[1px]`} //added adorment bg color
                   ref={adorementRef}
                 >
-                  {adorement && adorementPosition === 'end' && (
+                  {adorement && adorementPosition === "end" && (
                     <div
                       className={`  ${
-                        isDisabled ? 'text-zinc-500' : 'text-grey-medium'
+                        isDisabled ? "text-zinc-500" : "text-grey-medium"
                       } `} // changed for adorment text blurness while disabled
                     >
                       <>{adorement}</>
@@ -373,13 +373,13 @@ const TextField: React.FC<TextFieldProps> = ({
                       <CustomIcons
                         name="TreeUp_Arrow"
                         className={`text-gray-500 hover:text-dark cursor-pointer ${
-                          isDisabled ? 'hidden' : 'block'
+                          isDisabled ? "hidden" : "block"
                         }`}
                         type="medium"
                         onClick={() => {
-                          handleClick('up');
+                          handleClick("up");
                         }}
-                        onMouseDown={() => handleMouseDown('up')}
+                        onMouseDown={() => handleMouseDown("up")}
                         onMouseUp={handleMouseUp}
                         onMouseLeave={handleMouseUp}
                         viewBox={true}
@@ -387,13 +387,13 @@ const TextField: React.FC<TextFieldProps> = ({
                       <CustomIcons
                         name="TreeDown_Arrow"
                         className={`text-gray-500 hover:text-dark cursor-pointer ${
-                          isDisabled ? 'hidden' : 'block'
+                          isDisabled ? "hidden" : "block"
                         }`}
                         type="medium"
                         onClick={() => {
-                          handleClick('down');
+                          handleClick("down");
                         }}
-                        onMouseDown={() => handleMouseDown('down')}
+                        onMouseDown={() => handleMouseDown("down")}
                         onMouseUp={handleMouseUp}
                         onMouseLeave={handleMouseUp}
                         viewBox={true}
@@ -404,7 +404,7 @@ const TextField: React.FC<TextFieldProps> = ({
                   {!isValid && isTooltip && errors && errors[name] && (
                     <div
                       className={` text-error-label relative bg-white cursor-pointer ${generateClassName(
-                        'message'
+                        "message"
                       )}`}
                       onMouseEnter={() => setIsHovered(true)}
                       onMouseLeave={() => setIsHovered(false)}