@engagebay/engagebay-form-module 1.0.6 → 1.0.7-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@engagebay/engagebay-form-module",
-    "version": "1.0.6",
+    "version": "1.0.7-beta.1",
     "description": "Provide base form components to reacho",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1"
@@ -16,7 +16,6 @@
         "@heroicons/react": ">=2.1.5",
         "@reduxjs/toolkit": ">=2.2.7",
         "@tippyjs/react": ">=4.2.6",
-        "@types/lodash": ">=4.17.7",
         "@types/react-redux": ">=7.1.33",
         "axios": ">=1.7.2",
         "clsx": ">=2.1.1",
@@ -32,7 +31,6 @@
         "@heroicons/react": ">=2.1.5",
         "@reduxjs/toolkit": ">=2.2.7",
         "@tippyjs/react": ">=4.2.6",
-        "@types/lodash": ">=4.17.7",
         "@types/react-redux": ">=7.1.33",
         "axios": ">=1.7.2",
         "clsx": ">=2.1.1",

package/src/api/index.ts

@@ -1,10 +1,16 @@
 import axios, {AxiosInstance, AxiosRequestConfig} from "axios";
 import {FormFieldSchema} from "../form/schema/FormFieldSchema";
 
+let baseURL;
+try {
+    baseURL = (window as any).DEFAULT_HOST ||
+        (window as any).parent.DEFAULT_HOST
+} catch (error) {
+    
+}
+
 const BASE_API: AxiosRequestConfig = {
-    baseURL:
-        (window as any).REACHO_BASE_URL ||
-        (window as any).parent.REACHO_BASE_URL,
+    baseURL: baseURL ??  "",
     timeout: 30000,
     headers: {
         "Content-Type": "application/json",

package/src/form/FormFieldUtils.ts

@@ -28,13 +28,13 @@ import TimeField from "./formfields/TimeField";
 import Typeahead from "./formfields/Typeahead";
 import TypeaheadMultiSelect from "./formfields/TypeaheadMultiSelect";
 import UrlField from "./formfields/UrlField";
-import Typeahead2 from "./formfields/Typeahead2";
 import {
     FieldOptionsSchema,
     FormFieldComponentPropSchema,
     FormFieldType,
     OptionMappingConfig,
 } from "./schema/FormFieldSchema";
+import Typeahead2 from "./formfields/Typeahead2";
 
 /**
  * @property {React.FC<FormFieldComponentPropSchema>} component - React component for a form field.
@@ -137,12 +137,12 @@ const formFieldComponents: FormComponentSchema = {
     [FormFieldType[FormFieldType.TYPEAHEAD]]: {
         component: Typeahead,
     },
-    [FormFieldType[FormFieldType.TYPEAHEAD_2]]: {
-        component: Typeahead2,
-    },
     [FormFieldType[FormFieldType.TYPEAHEAD_MULTI_SELECT]]: {
         component: TypeaheadMultiSelect,
     },
+    [FormFieldType[FormFieldType.TYPEAHEAD_2]]: {
+        component: Typeahead2,
+    },
     [FormFieldType[FormFieldType.COMBO_SELECT]]: {
         component: ComboSelect,
     },

package/src/form/formfields/BusinessHoursField.tsx

@@ -21,7 +21,6 @@ import FormField from "../FormField";
 import RenderFormField from "../util/RenderFormField";
 import { TrashIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import Tippy from "@tippyjs/react";
-import { set } from "lodash";
 
 const defaultBusinessHours = {
   MONDAY: {
@@ -124,9 +123,8 @@ export const BusinessHoursField: React.FC<FormFieldComponentPropSchema> = (
             <div className="w-full sm:w-full text-end mr-[2.3em]">
               <button
                 type="button"
-                className={`text-end text-primary cursor-pointer font-[13px] font-medium ${
-                  getValues(`${mappedName}.sessions`)?.length > 1 ? "mr-9" : ""
-                }`}
+                className={`text-end text-primary cursor-pointer font-[13px] font-medium ${getValues(`${mappedName}.sessions`)?.length > 1 ? "mr-9" : ""
+                  }`}
                 onClick={() => {
                   const lastEndTime =
                     getValues(`${mappedName}.sessions`)?.[

package/src/form/formfields/DatePickerField.tsx

@@ -8,7 +8,7 @@ import { handleChange, registerFormField } from "../util";
 import moment from "moment";
 
 const DatePicker: React.FC<FormFieldComponentPropSchema> = (
-  props: FormFieldComponentPropSchema
+  props: FormFieldComponentPropSchema,
 ) => {
   const formContext = useContext(FormContext);
   const initialDate = formContext.getValues(props.fieldConfig.name)
@@ -25,13 +25,13 @@ const DatePicker: React.FC<FormFieldComponentPropSchema> = (
     ) {
       formContext.setValue(
         props.fieldConfig.name,
-        props.fieldConfig.defaultValue
+        props.fieldConfig.defaultValue,
       );
     }
   }, [props.fieldConfig.forceUpdate]);
 
   let registerOptions: RegisterOptions = registerFormField(props.fieldConfig);
-
+  //registerOptions.valueAsDate = true;
   let hookProps = formContext.register(props.fieldConfig.name, registerOptions);
 
   function getInput() {

package/src/form/formfields/NumberField.tsx

@@ -28,7 +28,7 @@ const NumberField: React.FC<FormFieldComponentPropSchema> = (
         step={props.fieldConfig.decimalAllowed ? 0.01 : 1}
         defaultValue={props.fieldConfig.defaultValue as string}
         className={`form-input ${
-          props.fieldConfig.customClassNames?.fieldClassName || "flex-1 !w-60"
+          props.fieldConfig.customClassNames?.fieldClassName || "flex-1"
         }`}
         onKeyDown={(e) => {
           props.fieldConfig.onKeyDown && props.fieldConfig.onKeyDown(e);

package/src/form/formfields/Typeahead.tsx

@@ -1,9 +1,9 @@
 import React, {
-    useCallback,
-    useContext,
-    useEffect,
-    useRef,
-    useState,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
 } from "react";
 
 import { Listbox, ListboxButton } from "@headlessui/react";
@@ -12,199 +12,185 @@ import { RegisterOptions } from "react-hook-form";
 import { FormContext } from "../context/FormContext";
 import { getListOption, getListOptions } from "../FormFieldUtils";
 import {
-    FieldOptionsSchema,
-    FormFieldComponentPropSchema,
-    FormFieldType,
-    OutputFormatType,
+  FieldOptionsSchema,
+  FormFieldComponentPropSchema,
+  FormFieldType,
+  OutputFormatType,
 } from "../schema/FormFieldSchema";
 import { handleChange, registerFormField } from "../util";
 import RenderFormField from "../util/RenderFormField";
 import RenderListOptions, {
-    renderListBoxValue,
+  renderListBoxValue,
 } from "../util/RenderListOptions";
 
 const Typeahead: React.FC<FormFieldComponentPropSchema> = (
-    props: FormFieldComponentPropSchema
+  props: FormFieldComponentPropSchema,
 ) => {
-    const dynamicSelectRef = useRef<HTMLUListElement>(null);
-    const formContext = useContext(FormContext);
-    let registerOptions: RegisterOptions = registerFormField(props.fieldConfig);
-    let hookProps = formContext.register(
-        props.fieldConfig.name,
-        registerOptions
-    );
-    const [listOptions, setListOptions] = useState<FieldOptionsSchema[]>([]);
-    const [selectedValues, setSelectedValues] = useState<FieldOptionsSchema[]>(
-        []
-    );
-    const [loading, setLoading] = useState<boolean>(true);
-
-    useEffect(() => {
-        if (
-            !formContext.getValues(props.fieldConfig.name) &&
-            props.fieldConfig.defaultValue
-        ) {
-            formContext.setValue(
-                props.fieldConfig.name,
-                props.fieldConfig.defaultValue
-            );
-        }
-        fetchData(undefined);
-    }, []);
+  const dynamicSelectRef = useRef<HTMLUListElement>(null);
+  const formContext = useContext(FormContext);
+  let registerOptions: RegisterOptions = registerFormField(props.fieldConfig);
+  let hookProps = formContext.register(props.fieldConfig.name, registerOptions);
+  const [listOptions, setListOptions] = useState<FieldOptionsSchema[]>([]);
+  const [selectedValues, setSelectedValues] = useState<FieldOptionsSchema[]>(
+    [],
+  );
+  const [loading, setLoading] = useState<boolean>(true);
 
-    const fetchData = useCallback(
-        async (_query: string | undefined) => {
-            setLoading(true);
-            try {
-                if (!props.fieldConfig.fetchUrl) return;
+  useEffect(() => {
+    if (
+      !formContext.getValues(props.fieldConfig.name) &&
+      props.fieldConfig.defaultValue
+    ) {
+      formContext.setValue(
+        props.fieldConfig.name,
+        props.fieldConfig.defaultValue,
+      );
+    }
+    fetchData(undefined);
+  }, []);
 
-                let url = props.fieldConfig.fetchUrl;
-                if (_query) {
-                    url = url.includes("?")
-                        ? url + "&q=" + _query
-                        : url + "?q=" + _query;
-                }
+  const fetchData = useCallback(
+    async (_query: string | undefined) => {
+      setLoading(true);
+      try {
+        if (!props.fieldConfig.fetchUrl) return;
 
-                let response = await (props.fieldConfig.disableHeaderInFetch
-                    ? axios.get(url)
-                    : formContext.axiosInstance?.get(url));
-                if (response?.data) {
-                    const data: FieldOptionsSchema[] = getListOptions(
-                        response.data,
-                        props.fieldConfig.optionsConfig
-                    );
-                    setListOptions([...data]);
-                    let value = formContext.getValues(props.fieldConfig.name);
-                    if (
-                        value &&
-                        data.find((i) => i.value !== value)
-                    ) {
-                        if (selectedValues.find((i) => i.value !== value))
-                            fetchValue(value);
-                    }
-                    if (props.fieldConfig.fetchCallback) {
-                        props.fieldConfig.fetchCallback(response);
-                    }
-                } else {
-                    console.error(response?.statusText);
-                }
-            } catch (err) {
-            } finally {
-                setLoading(false);
-            }
-        },
-        [props.fieldConfig.fetchUrl]
-    );
+        let url = props.fieldConfig.fetchUrl;
+        if (_query) {
+          url = url.includes("?") ? url + "&q=" + _query : url + "?q=" + _query;
+        }
 
-    const fetchValue = async (value: string) => {
-        try {
-            if (
-                props.fieldConfig.ignoreFetchValue ||
-                !props.fieldConfig.fetchUrl
-            ) {
-                return;
-            }
+        let response = await (props.fieldConfig.disableHeaderInFetch
+          ? axios.get(url)
+          : formContext.axiosInstance?.get(url));
+        if (response?.data) {
+          const data: FieldOptionsSchema[] = getListOptions(
+            response.data,
+            props.fieldConfig.optionsConfig,
+          );
+          setListOptions([...data]);
+          let value = formContext.getValues(props.fieldConfig.name);
+          if (value && data.find((i) => i.value !== value)) {
+            if (selectedValues.find((i) => i.value !== value))
+              fetchValue(value);
+          }
+          if (props.fieldConfig.fetchCallback) {
+            props.fieldConfig.fetchCallback(response);
+          }
+        } else {
+          console.error(response?.statusText);
+        }
+      } catch (err) {
+      } finally {
+        setLoading(false);
+      }
+    },
+    [props.fieldConfig.fetchUrl],
+  );
 
-            let url = props.fieldConfig.fetchUrl;
+  const fetchValue = async (value: string) => {
+    try {
+      if (props.fieldConfig.ignoreFetchValue || !props.fieldConfig.fetchUrl) {
+        return;
+      }
 
-            if (value)
-                url = url.includes("?")
-                    ? url + "&values=" + value
-                    : url + "?values=" + value;
+      let url = props.fieldConfig.fetchUrl;
 
-            let response = await (
-                props.fieldConfig.disableHeaderInFetch
-                    ? axios.get(url)
-                    : formContext.axiosInstance?.get(url)
-            );
-            if (response?.data) {
-                const data: FieldOptionsSchema[] = getListOptions(
-                    response?.data,
-                    props.fieldConfig.optionsConfig
-                );
-                setSelectedValues([...data]);
-            }
-        } catch (err) { }
-    };
+      if (value)
+        url = url.includes("?")
+          ? url + "&values=" + value
+          : url + "?values=" + value;
 
-    const updateListOptions = (data: any) => {
-        const resData: FieldOptionsSchema = getListOption(
-            data,
-            props.fieldConfig.optionsConfig
+      let response = await (props.fieldConfig.disableHeaderInFetch
+        ? axios.get(url)
+        : formContext.axiosInstance?.get(url));
+      if (response?.data) {
+        const data: FieldOptionsSchema[] = getListOptions(
+          response?.data,
+          props.fieldConfig.optionsConfig,
         );
-        setSelectedValues((perv) => [resData]);
-        formContext.setValue(props.fieldConfig.name, resData.value);
-    };
+        setSelectedValues([...data]);
+      }
+    } catch (err) {}
+  };
 
-    function getInput() {
-        return (
-            <Listbox
-                as={"div"}
-                {...hookProps}
-                className={`relative form-listbox flex-1`}
-                value={
-                    formContext.getValues(props.fieldConfig.name)
-                        ? props.fieldConfig.outputFormat ===
-                            OutputFormatType.ARRAY
-                            ? formContext.getValues(props.fieldConfig.name)[0]
-                            : formContext.getValues(props.fieldConfig.name)
-                        : undefined
-                }
-                onChange={(val) => {
-                    const currentValue = formContext.getValues(
-                        props.fieldConfig.name
-                    );
+  const updateListOptions = (data: any) => {
+    const resData: FieldOptionsSchema = getListOption(
+      data,
+      props.fieldConfig.optionsConfig,
+    );
+    setSelectedValues((perv) => [resData]);
+    formContext.setValue(props.fieldConfig.name, resData.value);
+  };
 
-                    // If the value matches, set it to null, otherwise set it to val
-                    const newValue = currentValue === val ? null : val;
+  function getInput() {
+    return (
+      <Listbox
+        as={"div"}
+        {...hookProps}
+        className={`relative form-listbox flex-1`}
+        value={
+          formContext.getValues(props.fieldConfig.name)
+            ? props.fieldConfig.outputFormat === OutputFormatType.ARRAY
+              ? formContext.getValues(props.fieldConfig.name)[0]
+              : formContext.getValues(props.fieldConfig.name)
+            : undefined
+        }
+        onChange={(val) => {
+          const currentValue = formContext.getValues(props.fieldConfig.name);
 
-                    const selected = listOptions.find(o => o.value == newValue);
-                    selected && setSelectedValues([selected]);
-                    handleChange(
-                        newValue,
-                        formContext,
-                        props.fieldConfig,
-                        props.onChange
-                    );
-                }}
-                name={props.fieldConfig.name}
-                disabled={props.fieldConfig.disabled}>
-                <ListboxButton
-                    className={
-                        props.fieldConfig.customClassNames?.fieldClassName
-                            ? "form-listbox-select " +
-                            props.fieldConfig.customClassNames?.fieldClassName
-                            : "form-listbox-select"
-                    }>
-                    {renderListBoxValue(
-                        formContext,
-                        props.fieldConfig,
-                        [...selectedValues, ...listOptions],
-                        props.onChange
-                    )}
-                </ListboxButton>
-                <RenderListOptions
-                    formContext={formContext}
-                    onChange={props.onChange}
-                    formField={FormFieldType.TYPEAHEAD}
-                    ref={dynamicSelectRef}
-                    fieldConfig={props.fieldConfig}
-                    listOptions={[...selectedValues, ...listOptions]}
-                    setListOptions={setListOptions}
-                    loading={loading}
-                    setLoading={setLoading}
-                    createCallback={(data) => updateListOptions(data)}
-                    queryCallback={(query) => fetchData(query)}
-                />
-            </Listbox>
-        );
-    }
-    if (props.fieldConfig.hideWhenNoResults && listOptions.length == 0) {
-        return <></>;
-    }
+          // If the value matches, set it to null, otherwise set it to val
+          const newValue = currentValue === val ? null : val;
 
-    return (
-        <RenderFormField fieldConfig={props.fieldConfig} getInput={getInput} />
+          const selected = listOptions.find((o) => o.value == newValue);
+          selected && setSelectedValues([selected]);
+          handleChange(
+            newValue,
+            formContext,
+            props.fieldConfig,
+            props.onChange,
+          );
+        }}
+        name={props.fieldConfig.name}
+        disabled={props.fieldConfig.disabled}
+      >
+        <ListboxButton
+          className={
+            props.fieldConfig.customClassNames?.fieldClassName
+              ? "form-listbox-select " +
+                props.fieldConfig.customClassNames?.fieldClassName
+              : "form-listbox-select"
+          }
+        >
+          {renderListBoxValue(
+            formContext,
+            props.fieldConfig,
+            [...selectedValues, ...listOptions],
+            props.onChange,
+          )}
+        </ListboxButton>
+        <RenderListOptions
+          formContext={formContext}
+          onChange={props.onChange}
+          formField={FormFieldType.TYPEAHEAD}
+          ref={dynamicSelectRef}
+          fieldConfig={props.fieldConfig}
+          listOptions={[...selectedValues, ...listOptions]}
+          setListOptions={setListOptions}
+          loading={loading}
+          setLoading={setLoading}
+          createCallback={(data) => updateListOptions(data)}
+          queryCallback={(query) => fetchData(query)}
+        />
+      </Listbox>
     );
+  }
+  if (props.fieldConfig.hideWhenNoResults && listOptions.length == 0) {
+    return <></>;
+  }
+
+  return (
+    <RenderFormField fieldConfig={props.fieldConfig} getInput={getInput} />
+  );
 };
 export default Typeahead;

package/src/form/formfields/TypeaheadMultiSelect.tsx

@@ -23,9 +23,10 @@ import RenderListOptions, {
 } from "../util/RenderListOptions";
 // import _ from "lodash";
 import axios from "axios";
+import { getAxiosInstance } from "../../api";
 
 const TypeaheadMultiSelect: React.FC<FormFieldComponentPropSchema> = (
-  props: FormFieldComponentPropSchema
+  props: FormFieldComponentPropSchema,
 ) => {
   const dynamicSelectRef = useRef<HTMLUListElement>(null);
   const formContext = useContext(FormContext);
@@ -33,7 +34,7 @@ const TypeaheadMultiSelect: React.FC<FormFieldComponentPropSchema> = (
   let hookProps = formContext.register(props.fieldConfig.name, registerOptions);
   const [listOptions, setListOptions] = useState<FieldOptionsSchema[]>([]);
   const [selectedValues, setSelectedValues] = useState<FieldOptionsSchema[]>(
-    []
+    [],
   );
   const [loading, setLoading] = useState<boolean>(true);
 
@@ -44,7 +45,7 @@ const TypeaheadMultiSelect: React.FC<FormFieldComponentPropSchema> = (
     ) {
       formContext.setValue(
         props.fieldConfig.name,
-        props.fieldConfig.defaultValue
+        props.fieldConfig.defaultValue,
       );
     }
     fetchData(undefined);
@@ -60,14 +61,16 @@ const TypeaheadMultiSelect: React.FC<FormFieldComponentPropSchema> = (
         if (_query) {
           url = url.includes("?") ? url + "&q=" + _query : url + "?q=" + _query;
         }
+        const axiosInstance = getAxiosInstance(
+          formContext.axiosInstance,
+          props.fieldConfig,
+        );
 
-        let response = await (props.fieldConfig.disableHeaderInFetch
-          ? axios.get(url)
-          : formContext.axiosInstance?.get(url));
+        let response = await axiosInstance.get(url);
         if (response?.data) {
           const data: FieldOptionsSchema[] = getListOptions(
             response?.data,
-            props.fieldConfig.optionsConfig
+            props.fieldConfig.optionsConfig,
           );
           setListOptions([...data]);
           let values = formContext.getValues(props.fieldConfig.name) || [];
@@ -77,7 +80,7 @@ const TypeaheadMultiSelect: React.FC<FormFieldComponentPropSchema> = (
             (data.length === 0 || // If 'data' is empty
               (!values.every((v: string) => data.some((i) => i.value === v)) && // Ensure none of 'values' match 'data'
                 !values.every((v: string) =>
-                  selectedValues.some((i) => i.value === v)
+                  selectedValues.some((i) => i.value === v),
                 ))) // Ensure none of 'values' match 'selectedValues'
           ) {
             fetchValue(values); // Call 'fetchValue()' if all conditions are met
@@ -94,7 +97,7 @@ const TypeaheadMultiSelect: React.FC<FormFieldComponentPropSchema> = (
         setLoading(false);
       }
     },
-    [props.fieldConfig.fetchUrl]
+    [props.fieldConfig.fetchUrl],
   );
 
   const fetchValue = async (value: string) => {
@@ -105,7 +108,7 @@ const TypeaheadMultiSelect: React.FC<FormFieldComponentPropSchema> = (
 
       let url = props.fieldConfig.fetchUrl;
 
-      url = url = url.includes("?")
+      url = url.includes("?")
         ? url + "&values=" + value
         : url + "?values=" + value;
 
@@ -115,7 +118,7 @@ const TypeaheadMultiSelect: React.FC<FormFieldComponentPropSchema> = (
       if (response?.data) {
         const data: FieldOptionsSchema[] = getListOptions(
           response?.data,
-          props.fieldConfig.optionsConfig
+          props.fieldConfig.optionsConfig,
         );
         let values: any[] = formContext.getValues(props.fieldConfig.name) || [];
         setSelectedValues(
@@ -123,22 +126,22 @@ const TypeaheadMultiSelect: React.FC<FormFieldComponentPropSchema> = (
             ...data,
             props.fieldConfig.dropdownFieldConfig?.isSuggestionBox && values
               ? values
-                  .filter(
-                    (value) =>
-                      data.some((d) => d.value !== value) || data.length == 0
-                  )
-                  .map((val) => ({ label: val, value: val }))
+                .filter(
+                  (value) =>
+                    data.some((d) => d.value !== value) || data.length == 0,
+                )
+                .map((val) => ({ label: val, value: val }))
               : [],
-          ].flat()
+          ].flat(),
         );
       }
-    } catch (err) {}
+    } catch (err) { }
   };
 
   const updateListOptions = (data: any) => {
     const resData: FieldOptionsSchema = getListOption(
       data,
-      props.fieldConfig.optionsConfig
+      props.fieldConfig.optionsConfig,
     );
     setSelectedValues((prev) => [...prev, resData]);
     let result = formContext.getValues(props.fieldConfig.name) || [];
@@ -160,14 +163,14 @@ const TypeaheadMultiSelect: React.FC<FormFieldComponentPropSchema> = (
         className={"relative form-listbox flex-1 overflow-hidden"}
         onChange={(selectedOptions) => {
           const chossenOptions = listOptions.filter((op) =>
-            selectedOptions.includes(op.value)
+            selectedOptions.includes(op.value),
           );
           setSelectedValues((prev) => [...prev, ...chossenOptions]);
           handleChange(
             selectedOptions,
             formContext,
             props.fieldConfig,
-            props.onChange
+            props.onChange,
           );
         }}
         multiple
@@ -176,7 +179,7 @@ const TypeaheadMultiSelect: React.FC<FormFieldComponentPropSchema> = (
           className={
             props.fieldConfig.customClassNames?.fieldClassName
               ? "form-listbox-select " +
-                props.fieldConfig.customClassNames?.fieldClassName
+              props.fieldConfig.customClassNames?.fieldClassName
               : "form-listbox-select"
           }
         >
@@ -184,7 +187,7 @@ const TypeaheadMultiSelect: React.FC<FormFieldComponentPropSchema> = (
             formContext,
             props.fieldConfig,
             [...selectedValues, ...listOptions],
-            props.onChange
+            props.onChange,
           )}
         </ListboxButton>
         <RenderListOptions

package/src/form/schema/FormFieldSchema.ts

@@ -106,7 +106,6 @@ export type FormFieldSchema = {
     max?: number;
     min?: number;
     rows?: number;
-    allowedMinQueryLength?: number;
     defaultValue?: string | string[] | {} | boolean;
     options?: FieldOptionsSchema[];
     minDate?: Date | null | undefined;
@@ -129,14 +128,15 @@ export type FormFieldSchema = {
     decimalAllowed?: boolean;
     errorMessage?: string;
     submitOnChange?: boolean;
-    isMultiple?: boolean; 
     formFieldPattern?: FormFieldPatternsImpl[];
     fetchUrl?: string;
-    postUrl?: string;
     fetchSavedDataUrl?: string;
+    postUrl?: string;
     fileAccept?: string;
     icon?: ReactNode;
     outputFormat?: OutputFormatType;
+    isMultiple?: boolean;
+    allowedMinQueryLength?: number;
     children?: FormFieldSchema[];
     defaultOptions?: FieldOptionsSchema[];
     optionsConfig?: OptionMappingConfig;
@@ -205,6 +205,7 @@ export type FieldOptionsSchema = {
     isDisabled?: boolean;
     helpText?: string;
     groupName?: string;
+    tooltip?: string;
     icon?: React.ReactNode;
 };
 

package/src/form/util/RenderListOptions.tsx

@@ -11,13 +11,13 @@ import { handleChange } from ".";
 import { LoaderWithText } from "../../util/LoaderWithText";
 import SVGIcon from "../../util/svg/SVGIcon";
 import { FormContextType } from "../context/FormContext";
-import Tippy from "@tippyjs/react";
 import {
   FieldOptionsSchema,
   FormFieldSchema,
   FormFieldType,
   OutputFormatType,
 } from "../schema/FormFieldSchema";
+import Tippy from "@tippyjs/react";
 
 type RenderListOptionsProps = {
   formContext: FormContextType;
@@ -102,15 +102,15 @@ const RenderListOptions = forwardRef<HTMLUListElement, RenderListOptionsProps>(
 
     const filteredList = query
       ? resultList.filter((item) => {
-          const normalizedLabel = fieldConfig.dropdownFieldConfig
-            ?.isCaseSensitive
-            ? item.label
-            : item.label.toLowerCase();
+        const normalizedLabel = fieldConfig.dropdownFieldConfig
+          ?.isCaseSensitive
+          ? item.label
+          : item.label.toLowerCase();
 
-          return normalizedLabel
-            .replace(/\s+/g, "")
-            .includes(caseSensitive.replace(/\s+/g, ""));
-        })
+        return normalizedLabel
+          .replace(/\s+/g, "")
+          .includes(caseSensitive.replace(/\s+/g, ""));
+      })
       : resultList;
 
     let nullGroupOptions: any[] = [];
@@ -127,7 +127,7 @@ const RenderListOptions = forwardRef<HTMLUListElement, RenderListOptionsProps>(
     }, {});
 
     const handleQueryCallback = useCallback(() => {
-      if (filteredList.length == 0 && isTypeahead) {
+      if (filteredList.length < 5 && isTypeahead) {
         queryCallback && queryCallback(query);
       }
     }, [filteredList]);
@@ -169,11 +169,10 @@ const RenderListOptions = forwardRef<HTMLUListElement, RenderListOptionsProps>(
           key={option.value}
           disabled={option.isDisabled}
           onClick={() => setTimeout(resetToDefault, 300)}
-          className={`form-listbox-option ${
-            selected
-              ? " bg-gray-100 text-gray-900"
-              : "hover:bg-gray-100 text-gray-700"
-          }`}
+          className={`form-listbox-option ${selected
+            ? " bg-gray-100 text-gray-900"
+            : "hover:bg-gray-100 text-gray-700"
+            }`}
           value={option.value}
         >
           {fieldConfig.fieldOptionWrapper ? (
@@ -182,17 +181,30 @@ const RenderListOptions = forwardRef<HTMLUListElement, RenderListOptionsProps>(
             <>
               <div className="flex items-center justify-between gap-x-1.5">
                 <span
-                  className={`block truncate w-full ${fieldConfig.customClassNames?.optionClassName} space-x-2 ${
-                    selected ? "font-medium" : "font-normal"
-                  }`}
+                  className={`block truncate w-full ${fieldConfig.customClassNames?.optionClassName} space-x-2 ${selected ? "font-medium" : "font-normal"
+                    }`}
                 >
                   {option.icon && (
                     <span className="listbox-svg">{option.icon}</span>
                   )}
-                  {option.label}
+                  {option.tooltip ? (
+                    <Tippy
+                      content={
+                        <>
+                          {option.label}
+                          <br />
+                          {option.helpText}
+                        </>
+                      }
+                    >
+                      <div className="truncate">{option.label}</div>
+                    </Tippy>
+                  ) : (
+                    option.label
+                  )}
                 </span>
                 {isTypeahead &&
-                !fieldConfig.dropdownFieldConfig?.isSuggestionBox ? (
+                  !fieldConfig.dropdownFieldConfig?.isSuggestionBox ? (
                   <input
                     type="checkbox"
                     className="form-checkbox"
@@ -208,11 +220,30 @@ const RenderListOptions = forwardRef<HTMLUListElement, RenderListOptionsProps>(
                   )
                 )}
               </div>
-              {option.helpText && (
-                <div className="mt-0 text-xs text-gray-500 font-normal truncate w-full !max-w-[150px]">
-                  {option.helpText}
-                </div>
-              )}
+              {option.helpText &&
+                (option.tooltip ? (
+                  <Tippy
+                    content={
+                      <>
+                        {option.label}
+                        <br />
+                        {option.helpText}
+                      </>
+                    }
+                  >
+                    <div
+                      className={`mt-0 text-xs text-gray-500 font-normal truncate w-full ${fieldConfig.customClassNames?.optionClassName}`}
+                    >
+                      {option.helpText}
+                    </div>
+                  </Tippy>
+                ) : (
+                  <div
+                    className={`mt-0 text-xs text-gray-500 font-normal truncate w-full ${fieldConfig.customClassNames?.optionClassName}`}
+                  >
+                    {option.helpText}
+                  </div>
+                ))}
             </>
           )}
         </ListboxOption>
@@ -372,28 +403,28 @@ export function renderListBoxValue(
           {values.length > 1
             ? `${values.length} selected`
             : listOptions.find((option) => option.value == value[0])?.label ||
-              values[0]}
+            values[0]}
         </span>
         {getDeleteButton()}
       </span>
     ) : (
       Array.isArray(values) &&
-        values.map((opt: any) => {
-          const option = listOptions.find((option) => option.value == opt);
-          if (!option && values.length == 0) return getPlaceholder();
+      values.map((opt: any) => {
+        const option = listOptions.find((option) => option.value == opt);
+        if (!option && values.length == 0) return getPlaceholder();
 
-          return (
-            <span key={option?.value} className="form-selected-badge">
-              <Tippy content={option?.label} delay={500}>
-                <span className="form-selected-badge-name">
-                  {option?.label}
-                </span>
-              </Tippy>
+        return (
+          <span key={option?.value} className="form-selected-badge">
+            <Tippy content={option?.label} delay={500}>
+              <span className="form-selected-badge-name">
+                {option?.label}
+              </span>
+            </Tippy>
 
-              {getDeleteButton(opt)}
-            </span>
-          );
-        })
+            {getDeleteButton(opt)}
+          </span>
+        );
+      })
     );
   };
   const getDeleteButton = (option?: string) => {
@@ -425,9 +456,10 @@ export function renderListBoxValue(
       )
     );
   };
-  let outputFormat = fieldConfig.outputFormat
-    ? fieldConfig.outputFormat === OutputFormatType.ARRAY
-    : false;
+  let outputFormat =
+    fieldConfig.outputFormat != undefined
+      ? fieldConfig.outputFormat === OutputFormatType.STRING
+      : false;
   const getPlaceholder = () => (
     <span className="form-placeholder">
       {fieldConfig.placeholder || "Select any option"}