react-core-ts 1.9.17 → 2.0.0

package/src/ReactTextField.tsx

@@ -47,6 +47,8 @@ const TextField: React.FC<TextFieldProps> = ({
   labelTitle,
   hideLabel = false,
   isModern = true,
+  enableSearch = false,
+  onSearchClick,
   ///
 }) => {
   // const [editState, setEditState] = useState<boolean>(false)
@@ -58,7 +60,7 @@ const TextField: React.FC<TextFieldProps> = ({
   const intervalRef = useRef<any>(null);
   const clickTimeoutRef = useRef<any>(null);
   const [isHolding, setIsHolding] = useState<boolean>(false);
-
+  const searchBtnRef = useRef<HTMLButtonElement>(null);  
   const onLabelClick = () => {
     if (!isDisabled) {
       inputRef?.current?.focus();
@@ -75,7 +77,7 @@ const TextField: React.FC<TextFieldProps> = ({
   useEffect(() => {
     const innerwidth = adorementRef.current
       ? adorementRef.current.offsetWidth
-      : 15;
+      : enableSearch ? searchBtnRef.current?.offsetWidth || 38 : 15;
     setWidth(innerwidth);
   }, [adorement, infoTitle, showInfo]);
   const getErrors = (err?: any) => {
@@ -109,7 +111,7 @@ const TextField: React.FC<TextFieldProps> = ({
   };
   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" | "search"
   ): string => {
     let className = `${propsClassName} `;
 
@@ -119,7 +121,7 @@ const TextField: React.FC<TextFieldProps> = ({
           size === "xxs" ? " text-xxs" : "text-common"
         }  text-input-text font-normal ${
           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 ${
+        } ${enableSearch ? "search-btn-input" : ""} w-full text-sm text-gray-900 ${getBg()} border appearance-none peer rounded-[4px] disabled:text-input-disabled bg-white disabled:bg-disabled ${
           hideLabel ? "" : label && isModern ? "placeholder-transparent" : ""
         } focus:placeholder-grey-secondary ${
           adorementPosition === "start" && " !pl-[45px] "
@@ -166,6 +168,10 @@ const TextField: React.FC<TextFieldProps> = ({
         } absolute right-0 adorement gap-1 flex items-center`;
         break;
 
+      case "search":
+          className += `absolute inner-search-button gap-1 flex items-center cursor-pointer`;
+          break;
+
       default:
         break;
     }
@@ -350,6 +356,19 @@ const TextField: React.FC<TextFieldProps> = ({
                 </label>
               )}
             </div>
+            {enableSearch && (
+               <button
+                  disabled={disabled ?? readOnly}
+                  onClick={() => onSearchClick?.(inputRef.current?.value || value || '')} 
+                  className={`${generateClassName("search")}`}
+                  data-testid="tools-drop-arrow"
+                  type="button"
+                  id="search-btn-textfield"
+                  ref={searchBtnRef}
+              >
+                <CustomIcons name="search" type="medium" />
+              </button>
+            )}
             {(adorement ||
               (showInfo && infoTitle) ||
               step ||

package/src/commontypes.ts

@@ -1,7 +1,7 @@
 import { FieldErrors, UseFormRegister } from 'react-hook-form';
 
 export type ValueProps = {
-  [key: string]: string;
+  [key: string]: string | number | any;
 };
 export type TabPops = {
   id: number | string;
@@ -85,6 +85,18 @@ export interface AutoSuggestionInputProps {
   matchFromStart?: boolean // match data's from the starting position
   autoDropdown?: boolean; // enable all items list items
   enableSelectAll?: boolean // enable select all option
+
+  tabName?: string;
+  tabDesc?: string;
+  tabDescId?: string;
+  tabSelectedItems?: any[];
+  getTabData?: (key?: string) => Promise<any>;
+  tabData?: any[];
+  enableToolsTab?: boolean;
+  toolTabs?: TabPops[];
+  toolTabClearSwitch?: boolean;
+  onToolTabChange?: (value?: ValueProps | ValueProps[]) => void;
+  autoRefreshMainDropdown?: boolean;
 }
 export interface IconsProps {
   name: any;
@@ -162,6 +174,8 @@ export interface TextFieldProps {
   showInfo?: boolean;
   inputType?: 'text' | 'textarea';
   isModern?: boolean; // added for modern text field
+  enableSearch?: boolean; // enable search button in text field 
+  onSearchClick?: (value: string) => void; // on search click event
 }
 
 export interface TextAreaProps {