@engagebay/engagebay-form-module 1.0.8-beta.6 → 1.0.9

package/package.json

@@ -1,11 +1,11 @@
 {
     "name": "@engagebay/engagebay-form-module",
-    "version": "1.0.8-beta.6",
-    "description": "Provide base form components to reacho",
+    "version": "1.0.9",
+    "description": "Provide base form components to engagebay",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1"
     },
-    "author": "Reacho Dev",
+    "author": "Engagebay Developer",
     "license": "ISC",
     "dependencies": {
         "react-phone-input-2": "^2.15.1",
@@ -16,6 +16,7 @@
         "@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",
@@ -31,6 +32,7 @@
         "@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,16 +1,10 @@
 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: baseURL ??  "",
+    baseURL:
+        (window as any).REACHO_BASE_URL ||
+        (window as any).parent.REACHO_BASE_URL,
     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_MULTI_SELECT]]: {
-        component: TypeaheadMultiSelect,
-    },
     [FormFieldType[FormFieldType.TYPEAHEAD_2]]: {
         component: Typeahead2,
     },
+    [FormFieldType[FormFieldType.TYPEAHEAD_MULTI_SELECT]]: {
+        component: TypeaheadMultiSelect,
+    },
     [FormFieldType[FormFieldType.COMBO_SELECT]]: {
         component: ComboSelect,
     },

package/src/form/formfields/BusinessHoursField.tsx

@@ -21,6 +21,7 @@ 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: {
@@ -123,8 +124,9 @@ 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`)?.[
@@ -200,7 +202,7 @@ export const BusinessHoursField: React.FC<FormFieldComponentPropSchema> = (
           disableDefaultWrapper: true,
           defaultValue: "08:30",
           customClassNames: {
-            fieldClassName: "border-none bg-blue-100",
+            fieldClassName: "cursor-pointer bg-blue-100",
           },
         },
         {
@@ -210,7 +212,7 @@ export const BusinessHoursField: React.FC<FormFieldComponentPropSchema> = (
           disableDefaultWrapper: true,
           defaultValue: "18:00",
           customClassNames: {
-            fieldClassName: "border-none bg-blue-100",
+            fieldClassName: "cursor-pointer bg-blue-100",
           },
         },
       ],

package/src/form/formfields/CheckboxField.tsx

@@ -1,46 +1,32 @@
 import { RegisterOptions } from "react-hook-form";
 import { useContext, useEffect, useState } from "react";
 import { FormContext } from "../context/FormContext";
-import {
-  FormFieldComponentPropSchema,
-  OutputFormatType,
-} from "../schema/FormFieldSchema";
+import { FormFieldComponentPropSchema } from "../schema/FormFieldSchema";
 import { Checkbox, Field, Input, Label } from "@headlessui/react";
 import React from "react";
 import RenderFormField from "../util/RenderFormField";
 import { handleChange, registerFormField } from "../util";
-import { normalizeCheckboxBooleanValue, normalizeMultiSelectValue } from "../util/normalizeCustomFieldValues";
 const CheckboxField: React.FC<FormFieldComponentPropSchema> = (
   props: FormFieldComponentPropSchema
 ) => {
   const formContext = useContext(FormContext);
   const [selectedOption, setSelectedOption] = useState<string[]>(
-    normalizeMultiSelectValue(formContext.getValues(props.fieldConfig.name))
+    formContext.getValues(props.fieldConfig.name)
+      ? formContext.getValues(props.fieldConfig.name)
+      : []
   );
   const [isChecked, setIsChecked] = useState<boolean>(
-    normalizeCheckboxBooleanValue(
-      formContext.getValues(props.fieldConfig.name) ?? props.fieldConfig.defaultValue
-    )
+    formContext.getValues(props.fieldConfig.name)
+      ? formContext.getValues(props.fieldConfig.name)
+      : props.fieldConfig.defaultValue
   );
   useEffect(() => {
-    const current = formContext.getValues(props.fieldConfig.name);
-    if (props.fieldConfig.options) {
-      setSelectedOption(normalizeMultiSelectValue(current));
-    } else {
-      setIsChecked(
-        normalizeCheckboxBooleanValue(current ?? props.fieldConfig.defaultValue)
-      );
+    if (formContext.getValues(props.fieldConfig.name)) {
+      setSelectedOption(formContext.getValues(props.fieldConfig.name));
     }
   }, []);
   let registerOptions: RegisterOptions = registerFormField(props.fieldConfig);
   let hookProps = formContext.register(props.fieldConfig.name, registerOptions);
-  const getOutputValue = (value: any) => {
-    if (props.fieldConfig.outputFormat === OutputFormatType.STRING) {
-      if (Array.isArray(value)) return JSON.stringify(value);
-      if (typeof value === "boolean") return String(value);
-    }
-    return value;
-  };
   const handleInput = (option: string) => {
     let tempData: string[] = selectedOption;
     if (selectedOption.includes(option)) {
@@ -50,12 +36,7 @@ const CheckboxField: React.FC<FormFieldComponentPropSchema> = (
       tempData.push(option);
       setSelectedOption([...tempData]);
     }
-    handleChange(
-      getOutputValue(tempData),
-      formContext,
-      props.fieldConfig,
-      props.onChange
-    );
+    handleChange(tempData, formContext, props.fieldConfig, props.onChange);
   };
   function getInput() {
     return props.fieldConfig.options ? (
@@ -106,7 +87,7 @@ const CheckboxField: React.FC<FormFieldComponentPropSchema> = (
           checked={isChecked}
           onChange={(checked) => {
             handleChange(
-              getOutputValue(checked),
+              checked,
               formContext,
               props.fieldConfig,
               props.onChange

package/src/form/formfields/DatePickerField.tsx

@@ -1,17 +1,14 @@
 import { RegisterOptions } from "react-hook-form";
-import React, { useContext, useEffect } from "react";
+import React, { useContext, useEffect, useRef, useState } from "react";
 import Datepicker from "react-tailwindcss-datepicker";
 import { FormContext } from "../context/FormContext";
 import { FormFieldComponentPropSchema } from "../schema/FormFieldSchema";
 import RenderFormField from "../util/RenderFormField";
 import { handleChange, registerFormField } from "../util";
-import { normalizeDateFormat, normalizeDateInputValue } from "../util/normalizeCustomFieldValues";
 import moment from "moment";
 
-
-
 const DatePicker: React.FC<FormFieldComponentPropSchema> = (
-  props: FormFieldComponentPropSchema,
+  props: FormFieldComponentPropSchema
 ) => {
   const formContext = useContext(FormContext);
   const initialDate = formContext.getValues(props.fieldConfig.name)
@@ -28,17 +25,16 @@ 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() {
-    const displayFormat = normalizeDateFormat(props.fieldConfig.dateDisplayFormat);
     const rawStart =
       initialDate?.startDate ||
       props.fieldConfig.defaultValue ||
@@ -47,9 +43,13 @@ const DatePicker: React.FC<FormFieldComponentPropSchema> = (
       initialDate?.endDate ||
       props.fieldConfig.defaultValue ||
       "";
+    const toDate = (v: string | Date | null | undefined): Date | null => {
+      if (v == null || v === "") return null;
+      return moment(v).isValid() ? moment(v).toDate() : null;
+    };
     const value = {
-      startDate: normalizeDateInputValue(rawStart, displayFormat),
-      endDate: normalizeDateInputValue(rawEnd, displayFormat),
+      startDate: toDate(rawStart),
+      endDate: toDate(rawEnd),
     };
     // Calendar opens on selected date's month/year (must be a Date instance)
     const startFrom = value.startDate instanceof Date ? value.startDate : new Date();
@@ -58,11 +58,10 @@ const DatePicker: React.FC<FormFieldComponentPropSchema> = (
         value={value}
         startFrom={startFrom}
         {...hookProps}
-        displayFormat={displayFormat}
         placeholder={
           props.fieldConfig.placeholder
             ? props.fieldConfig.placeholder
-            : displayFormat
+            : "YYYY-MM-DD"
         }
         asSingle={true}
         popoverDirection="down"
@@ -80,7 +79,7 @@ const DatePicker: React.FC<FormFieldComponentPropSchema> = (
         onChange={(dates) => {
           let date = null;
           if (dates?.startDate != null)
-            date = moment(dates?.startDate).format(displayFormat);
+            date = moment(dates?.startDate).format("YYYY-MM-DD");
 
           handleChange(date, formContext, props.fieldConfig, props.onChange);
         }}

package/src/form/formfields/FileUploadField.tsx

@@ -9,8 +9,6 @@ import { Description } from "@headlessui/react";
 import React from "react";
 import RenderFormField from "../util/RenderFormField";
 import clsx from "clsx";
-import { XMarkIcon } from "@heroicons/react/20/solid";
-import { normalizeFileFieldUrls } from "../util/normalizeCustomFieldValues";
 const FileUploadField: React.FC<FormFieldComponentPropSchema> = (
     props: FormFieldComponentPropSchema
 ) => {
@@ -105,7 +103,7 @@ const FileUploadField: React.FC<FormFieldComponentPropSchema> = (
                     <Description>Loading...</Description>
                 ) : (
                     props.fieldConfig.fieldContainer ? <props.fieldConfig.fieldContainer /> :
-                        <div className={"flex flex-col items-center justify-center pt-5 pb-6 px-2"}>
+                        <div className={"flex flex-col items-center justify-center pt-5 pb-6"}>
                             {file ? (
                                 <>
                                     {isImageFile(file) ? (
@@ -127,19 +125,19 @@ const FileUploadField: React.FC<FormFieldComponentPropSchema> = (
                                         </div>
                                     ) : (
                                         <div className="flex">
-                                            <span className="m-2 max-w-xs truncate">
-                                            {normalizeFileFieldUrls(file?.name || file?.toString?.() || '')}
+                                            <span className="m-2">
+                                                {file?.name}
                                             </span>{" "}
                                             <button
                                                 onClick={(e) => {
                                                     e.preventDefault();
                                                     formContext.setValue(
-                                                        props.fieldConfig.name,null
+                                                        props.fieldConfig.name,cnull
                                                     );
                                                     setFile(null);
                                                 }}
-                                                className="btn btn-sm ">
-                                                <XMarkIcon className="w-3.5 h-3.5 text-gray-800"/>
+                                                className="btn btn-outline-dark btn-sm ">
+                                                X
                                             </button>
                                         </div>
                                     )}

package/src/form/formfields/MultipleSelectField.tsx

@@ -13,7 +13,6 @@ import {
   FieldOptionsSchema,
   FormFieldComponentPropSchema,
   FormFieldType,
-  OutputFormatType,
 } from "../schema/FormFieldSchema";
 import { FormContext } from "../context/FormContext";
 import RenderFormField from "../util/RenderFormField";
@@ -21,7 +20,6 @@ import RenderListOptions, {
   renderListBoxValue,
 } from "../util/RenderListOptions";
 import { handleChange, registerFormField } from "../util";
-import { normalizeMultiSelectValue } from "../util/normalizeCustomFieldValues";
 
 const MultipleSelectField: React.FC<FormFieldComponentPropSchema> = ({
   fieldConfig,
@@ -36,11 +34,9 @@ const MultipleSelectField: React.FC<FormFieldComponentPropSchema> = ({
     fieldConfig.options ? fieldConfig.options : []
   );
 
-  const normalizedSelectedValues = normalizeMultiSelectValue(
-    formContext.getValues(fieldConfig.name)
-  );
-
-  const validSelectedValues = normalizedSelectedValues.filter(
+  const validSelectedValues = (
+    formContext.getValues(fieldConfig.name) || []
+  ).filter(
     (selectedValue: any) =>
       fieldConfig.options &&
       fieldConfig.options.some((option) => option.value === selectedValue)
@@ -57,22 +53,14 @@ const MultipleSelectField: React.FC<FormFieldComponentPropSchema> = ({
   }, [fieldConfig.options]);
 
   function getInput() {
-    const getOutputValue = (val: any) => {
-      if (fieldConfig.outputFormat === OutputFormatType.STRING) {
-        const normalized = normalizeMultiSelectValue(val);
-        return JSON.stringify(normalized);
-      }
-      return val;
-    };
-
     return (
       <Listbox
         as={"div"}
         {...hookProps}
         value={validSelectedValues}
         defaultValue={fieldConfig.defaultValue}
-        onChange={(val: any) =>
-          handleChange(getOutputValue(val), formContext, fieldConfig, onChange)
+        onChange={(val) =>
+          handleChange(val, formContext, fieldConfig, onChange)
         }
         disabled={fieldConfig.disabled}
         multiple

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,185 +12,199 @@ 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(
+    const dynamicSelectRef = useRef<HTMLUListElement>(null);
+    const formContext = useContext(FormContext);
+    let registerOptions: RegisterOptions = registerFormField(props.fieldConfig);
+    let hookProps = formContext.register(
         props.fieldConfig.name,
-        props.fieldConfig.defaultValue,
-      );
-    }
-    fetchData(undefined);
-  }, []);
-
-  const fetchData = useCallback(
-    async (_query: string | undefined) => {
-      setLoading(true);
-      try {
-        if (!props.fieldConfig.fetchUrl) return;
+        registerOptions
+    );
+    const [listOptions, setListOptions] = useState<FieldOptionsSchema[]>([]);
+    const [selectedValues, setSelectedValues] = useState<FieldOptionsSchema[]>(
+        []
+    );
+    const [loading, setLoading] = useState<boolean>(true);
 
-        let url = props.fieldConfig.fetchUrl;
-        if (_query) {
-          url = url.includes("?") ? url + "&q=" + _query : url + "?q=" + _query;
+    useEffect(() => {
+        if (
+            !formContext.getValues(props.fieldConfig.name) &&
+            props.fieldConfig.defaultValue
+        ) {
+            formContext.setValue(
+                props.fieldConfig.name,
+                props.fieldConfig.defaultValue
+            );
         }
+        fetchData(undefined);
+    }, []);
 
-        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],
-  );
+    const fetchData = useCallback(
+        async (_query: string | undefined) => {
+            setLoading(true);
+            try {
+                if (!props.fieldConfig.fetchUrl) return;
+
+                let url = props.fieldConfig.fetchUrl;
+                if (_query) {
+                    url = url.includes("?")
+                        ? url + "&q=" + _query
+                        : url + "?q=" + _query;
+                }
+
+                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]
+    );
 
-  const fetchValue = async (value: string) => {
-    try {
-      if (props.fieldConfig.ignoreFetchValue || !props.fieldConfig.fetchUrl) {
-        return;
-      }
+    const fetchValue = async (value: string) => {
+        try {
+            if (
+                props.fieldConfig.ignoreFetchValue ||
+                !props.fieldConfig.fetchUrl
+            ) {
+                return;
+            }
 
-      let url = props.fieldConfig.fetchUrl;
+            let url = props.fieldConfig.fetchUrl;
 
-      if (value)
-        url = url.includes("?")
-          ? url + "&values=" + value
-          : url + "?values=" + value;
+            if (value)
+                url = url.includes("?")
+                    ? url + "&values=" + value
+                    : url + "?values=" + value;
 
-      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,
+            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) { }
+    };
+
+    const updateListOptions = (data: any) => {
+        const resData: FieldOptionsSchema = getListOption(
+            data,
+            props.fieldConfig.optionsConfig
         );
-        setSelectedValues([...data]);
-      }
-    } catch (err) {}
-  };
+        setSelectedValues((perv) => [resData]);
+        formContext.setValue(props.fieldConfig.name, resData.value);
+    };
 
-  const updateListOptions = (data: any) => {
-    const resData: FieldOptionsSchema = getListOption(
-      data,
-      props.fieldConfig.optionsConfig,
-    );
-    setSelectedValues((perv) => [resData]);
-    formContext.setValue(props.fieldConfig.name, resData.value);
-  };
+    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
+                    );
 
-  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);
+                    // If the value matches, set it to null, otherwise set it to val
+                    const newValue = currentValue === val ? null : val;
 
-          // If the value matches, set it to null, otherwise set it to val
-          const newValue = currentValue === val ? null : val;
+                    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 <></>;
+    }
 
-          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>
+    return (
+        <RenderFormField fieldConfig={props.fieldConfig} getInput={getInput} />
     );
-  }
-  if (props.fieldConfig.hideWhenNoResults && listOptions.length == 0) {
-    return <></>;
-  }
-
-  return (
-    <RenderFormField fieldConfig={props.fieldConfig} getInput={getInput} />
-  );
 };
 export default Typeahead;

package/src/form/formfields/Typeahead2.tsx

@@ -199,12 +199,7 @@ const Typeahead2: React.FC<FormFieldComponentPropSchema> = (
       : result.includes(resData.value)
         ? [...result.filter((v: string) => v != resData.value), resData.value]
         : [...result, resData.value];
-    handleChange(
-      result,
-      formContext,
-      props.fieldConfig,
-      props.onChange,
-    );    
+    formContext.setValue(props.fieldConfig.name, result);
   };
 
   const getInput = () => {

package/src/form/formfields/TypeaheadMultiSelect.tsx

@@ -23,10 +23,9 @@ 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);
@@ -34,7 +33,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);
 
@@ -45,7 +44,7 @@ const TypeaheadMultiSelect: React.FC<FormFieldComponentPropSchema> = (
     ) {
       formContext.setValue(
         props.fieldConfig.name,
-        props.fieldConfig.defaultValue,
+        props.fieldConfig.defaultValue
       );
     }
     fetchData(undefined);
@@ -61,16 +60,14 @@ 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 axiosInstance.get(url);
+        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,
+            props.fieldConfig.optionsConfig
           );
           setListOptions([...data]);
           let values = formContext.getValues(props.fieldConfig.name) || [];
@@ -80,7 +77,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
@@ -97,7 +94,7 @@ const TypeaheadMultiSelect: React.FC<FormFieldComponentPropSchema> = (
         setLoading(false);
       }
     },
-    [props.fieldConfig.fetchUrl],
+    [props.fieldConfig.fetchUrl]
   );
 
   const fetchValue = async (value: string) => {
@@ -108,7 +105,7 @@ const TypeaheadMultiSelect: React.FC<FormFieldComponentPropSchema> = (
 
       let url = props.fieldConfig.fetchUrl;
 
-      url = url.includes("?")
+      url = url = url.includes("?")
         ? url + "&values=" + value
         : url + "?values=" + value;
 
@@ -118,7 +115,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(
@@ -126,22 +123,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) || [];
@@ -163,14 +160,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
@@ -179,7 +176,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"
           }
         >
@@ -187,7 +184,7 @@ const TypeaheadMultiSelect: React.FC<FormFieldComponentPropSchema> = (
             formContext,
             props.fieldConfig,
             [...selectedValues, ...listOptions],
-            props.onChange,
+            props.onChange
           )}
         </ListboxButton>
         <RenderListOptions

package/src/form/schema/FormFieldSchema.ts

@@ -106,12 +106,11 @@ export type FormFieldSchema = {
     max?: number;
     min?: number;
     rows?: number;
+    allowedMinQueryLength?: number;
     defaultValue?: string | string[] | {} | boolean;
     options?: FieldOptionsSchema[];
     minDate?: Date | null | undefined;
     maxDate?: Date | null | undefined;
-    /** Input display format for date pickers (e.g. 'MMMM D, YYYY'). */
-    dateDisplayFormat?: string;
     // ref?:any
 
     /**
@@ -130,15 +129,14 @@ export type FormFieldSchema = {
     decimalAllowed?: boolean;
     errorMessage?: string;
     submitOnChange?: boolean;
+    isMultiple?: boolean; 
     formFieldPattern?: FormFieldPatternsImpl[];
     fetchUrl?: string;
-    fetchSavedDataUrl?: string;
     postUrl?: string;
+    fetchSavedDataUrl?: string;
     fileAccept?: string;
     icon?: ReactNode;
     outputFormat?: OutputFormatType;
-    isMultiple?: boolean;
-    allowedMinQueryLength?: number;
     children?: FormFieldSchema[];
     defaultOptions?: FieldOptionsSchema[];
     optionsConfig?: OptionMappingConfig;
@@ -207,7 +205,6 @@ export type FieldOptionsSchema = {
     isDisabled?: boolean;
     helpText?: string;
     groupName?: string;
-    tooltip?: string;
     icon?: React.ReactNode;
 };
 
@@ -243,7 +240,7 @@ export class FormFieldPatternsImpl implements FormFieldPatterns {
     static readonly EMAIL = new FormFieldPatternsImpl(
         "EMAIL",
         "Please enter a valid email address",
-        /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i
+        /^([A-Za-z0-9\._%+\-]+@[A-Za-z0-9\.\-]+\.[A-Za-z]{2,})$/
     );
     // static readonly PASSWORD = new FormFieldPatternsImpl(
     //     "PASSWORD",

package/src/form/util/RenderListOptions.tsx

@@ -18,7 +18,7 @@ import {
   FormFieldType,
   OutputFormatType,
 } from "../schema/FormFieldSchema";
-import { normalizeMultiSelectValue, normalizeMultiSelectValueForStringArrayValues } from "./normalizeCustomFieldValues";
+
 type RenderListOptionsProps = {
   formContext: FormContextType;
   fieldConfig: FormFieldSchema;
@@ -127,7 +127,7 @@ const RenderListOptions = forwardRef<HTMLUListElement, RenderListOptionsProps>(
     }, {});
 
     const handleQueryCallback = useCallback(() => {
-      if (filteredList.length < 5 && isTypeahead) {
+      if (filteredList.length == 0 && isTypeahead) {
         queryCallback && queryCallback(query);
       }
     }, [filteredList]);
@@ -154,17 +154,12 @@ const RenderListOptions = forwardRef<HTMLUListElement, RenderListOptionsProps>(
 
     const renderOption = (option: FieldOptionsSchema) => {
       let selected = false;
-      const formValue = formContext.getValues(fieldConfig.name);
-      if (formField === FormFieldType.MULTI_SELECT) {
-        const normalizedValues = normalizeMultiSelectValue(formValue);
-        const normalizedOptionValue =
-          typeof option.value === "string"
-            ? option.value.trim()
-            : String(option.value).trim();
-        selected = normalizedValues.includes(normalizedOptionValue);
-      } else if (Array.isArray(formValue)) {
-        selected = formValue.includes(option.value);
+      if (Array.isArray(formContext.getValues(fieldConfig.name))) {
+        selected = formContext
+          .getValues(fieldConfig.name)
+          .includes(option.value);
       } else {
+        const formValue = formContext.getValues(fieldConfig.name);
         // const defaultValue = fieldConfig.defaultValue;
         // selected = formValue ? option.value == formValue : defaultValue == option.value;
         selected = option.value == formValue;
@@ -194,21 +189,7 @@ const RenderListOptions = forwardRef<HTMLUListElement, RenderListOptionsProps>(
                   {option.icon && (
                     <span className="listbox-svg">{option.icon}</span>
                   )}
-                  {option.tooltip ? (
-                    <Tippy
-                      content={
-                        <>
-                          {option.label}
-                          <br />
-                          {option.helpText}
-                        </>
-                      }
-                    >
-                      <div className="truncate">{option.label}</div>
-                    </Tippy>
-                  ) : (
-                    option.label
-                  )}
+                  {option.label}
                 </span>
                 {isTypeahead &&
                 !fieldConfig.dropdownFieldConfig?.isSuggestionBox ? (
@@ -227,30 +208,11 @@ const RenderListOptions = forwardRef<HTMLUListElement, RenderListOptionsProps>(
                   )
                 )}
               </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>
-                ))}
+              {option.helpText && (
+                <div className="mt-0 text-xs text-gray-500 font-normal truncate w-full !max-w-[150px]">
+                  {option.helpText}
+                </div>
+              )}
             </>
           )}
         </ListboxOption>
@@ -373,7 +335,7 @@ export function renderListBoxValue(
   listOptions: FieldOptionsSchema[],
   onChange?: (value: any) => void,
 ): JSX.Element {
-  let value = normalizeMultiSelectValueForStringArrayValues(fieldConfig, formContext.getValues(fieldConfig.name));
+  let value = formContext.getValues(fieldConfig.name);
   const renderAsString = () => {
     // if (!listOptions) {
     //     return value;
@@ -463,10 +425,9 @@ export function renderListBoxValue(
       )
     );
   };
-  let outputFormat =
-    fieldConfig.outputFormat != undefined
-      ? fieldConfig.outputFormat === OutputFormatType.STRING
-      : false;
+  let outputFormat = fieldConfig.outputFormat
+    ? fieldConfig.outputFormat === OutputFormatType.ARRAY
+    : false;
   const getPlaceholder = () => (
     <span className="form-placeholder">
       {fieldConfig.placeholder || "Select any option"}
@@ -476,7 +437,7 @@ export function renderListBoxValue(
     if (!value && !listOptions) {
       return getPlaceholder();
     }
-    if (Array.isArray(value)) {
+    if (!outputFormat && Array.isArray(value)) {
       return renderAsArray();
     }
     return renderAsString();

package/src/form/util/normalizeCustomFieldValues.ts

@@ -1,149 +0,0 @@
-import moment from "moment";
-import { FormFieldSchema, OutputFormatType } from "../schema/FormFieldSchema";
-
-const normalizeStringToken = (value: unknown): string => {
-  return typeof value === "string" ? value.trim() : String(value).trim();
-};
-
-const normalizeStringArray = (values: unknown[]): string[] => {
-  return values.map(normalizeStringToken).filter(Boolean);
-};
-
-const parseJsonArrayString = (value: string): string[] | null => {
-  if (!value.startsWith("[")) return null;
-  try {
-    const parsed = JSON.parse(value);
-    return Array.isArray(parsed) ? normalizeStringArray(parsed) : null;
-  } catch {
-    return null;
-  }
-};
-
-export const normalizeCheckboxBooleanValue = (value: any): boolean => {
-  if (value === true || value === 1) return true;
-  if (value === false || value === 0 || value == null || value === "") {
-    return false;
-  }
-
-  if (typeof value === "string") {
-    const s = value.trim().toLowerCase();
-    if (s === "true" || s === "1" || s === "yes") return true;
-    if (s === "false" || s === "0" || s === "no" || s === "") return false;
-  }
-
-  return Boolean(value);
-};
-
-export const normalizeMultiSelectValue = (value: any): string[] => {
-  if (value == null) return [];
-
-  if (Array.isArray(value)) return normalizeStringArray(value);
-
-  if (typeof value === "string") {
-    const s = value.trim();
-    if (!s) return [];
-
-    const jsonArray = parseJsonArrayString(s);
-    if (jsonArray) return jsonArray;
-
-    return normalizeStringArray(s.split(","));
-  }
-
-  return normalizeStringArray([value]);
-};
-
-export const normalizeDateFormat = (format?: string): string => {
-  if (!format) return "YYYY-MM-DD";
-  return format
-    .replace(/yyyy/g, "YYYY")
-    .replace(/yy/g, "YY")
-    .replace(/dd/g, "DD")
-    .replace(/d/g, "D")
-    .replace(/mm/g, "MM");
-};
-
-export const normalizeDateInputValue = (
-  value: any,
-  preferredFormat?: string
-): Date | null => {
-  if (value == null || value === "") return null;
-
-  if (value instanceof Date) {
-    return Number.isNaN(value.getTime()) ? null : value;
-  }
-
-  if (typeof value === "number" && Number.isFinite(value)) {
-    const ms = value < 1_000_000_000_000 ? value * 1000 : value;
-    const date = new Date(ms);
-    return Number.isNaN(date.getTime()) ? null : date;
-  }
-
-  if (typeof value === "string") {
-    const s = value.trim();
-    if (!s) return null;
-
-    const numeric = Number(s);
-    if (Number.isFinite(numeric)) {
-      const ms = numeric < 1_000_000_000_000 ? numeric * 1000 : numeric;
-      const date = new Date(ms);
-      return Number.isNaN(date.getTime()) ? null : date;
-    }
-
-    const preferred = normalizeDateFormat(preferredFormat);
-    const formats = Array.from(
-      new Set([
-        preferred,
-        "YYYY-MM-DD",
-        "DD/MM/YYYY",
-        "MM/DD/YYYY",
-        "DD-MM-YYYY",
-        "MM-DD-YYYY",
-      ])
-    );
-    const parsedWithKnownFormats = moment(s, formats, true);
-    if (parsedWithKnownFormats.isValid()) {
-      return parsedWithKnownFormats.toDate();
-    }
-
-    const date = new Date(s);
-    return Number.isNaN(date.getTime()) ? null : date;
-  }
-
-  const date = new Date(value);
-  return Number.isNaN(date.getTime()) ? null : date;
-};
-
-
-export const normalizeMultiSelectValueForStringArrayValues = (fieldConfig: FormFieldSchema, value: any): string[] => {
-  if (fieldConfig.outputFormat === OutputFormatType.STRING) {
-    return normalizeMultiSelectValue(value);  
-  }
-  return value; 
-};
-
-
-export const normalizeFileFieldUrls = (value: any): string[] => {
-  if (value == null) return [];
-
-  if (Array.isArray(value)) {
-      return value.map((v) => String(v).trim()).filter(Boolean);
-  }
-
-  if (typeof value === 'string') {
-      const s = value.trim();
-      if (!s || s === '[]') return [];
-      if (s.startsWith('[')) {
-          try {
-              const parsed = JSON.parse(s);
-              if (Array.isArray(parsed)) {
-                  return parsed.map((v) => String(v).trim()).filter(Boolean);
-              }
-          } catch {
-              // fall through — treat as single URL
-          }
-      }
-      return [s];
-  }
-
-  return [];
-};