@engagebay/engagebay-form-module 1.0.2-beta.5 → 1.0.2-beta.6

package/README.md

@@ -124,3 +124,22 @@ const fieldSchema: FormFieldSchema = {
 
 - **`FormFieldPatternsImpl`**  
   Class providing validation patterns and messages for fields (e.g., `REQUIRED`, `EMAIL`, `URL`).
+
+---
+
+## Context and providers (this package only)
+
+These contexts are used **inside this package** (and by other packages in the eb-ui-components repo that depend on it). Consuming applications (other projects) have their own context trees and may wrap this package differently.
+
+- **FormContext** — Provided by `<Form>`. Required for all field components used via `FormField` / `FormFields` (they use `useContext(FormContext)`).
+- **AxiosConfigProvider** — Optional. Only needed for components that call APIs (e.g. dynamic options). Use `useAxiosConfig()` or `useAxiosConfigOptional()`.
+
+---
+
+## Implementing base components (this package)
+
+When adding or changing form field components **in this package**:
+
+- **Form-context components** — Must run inside `<Form>`. Use `useContext(FormContext)` for `register`, `setValue`, `control`, `errors`, etc. Register the component in `FormFieldUtils.ts` and export it from the package’s main entry (`index.js`).
+- **Context-free components** — If a component does not need form or API context, note it in JSDoc (e.g. “Does not require FormContext”).
+- **New contexts** — If you add a new React context in this package, document it in this README and list which components use it.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@engagebay/engagebay-form-module",
-    "version": "1.0.2-beta.5",
+    "version": "1.0.2-beta.6",
     "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/form/FormFieldUtils.ts

@@ -34,6 +34,7 @@ import {
     FormFieldType,
     OptionMappingConfig,
 } from "./schema/FormFieldSchema";
+import Typeahead2 from "./formfields/Typeahead2";
 
 /**
  * @property {React.FC<FormFieldComponentPropSchema>} component - React component for a form field.
@@ -139,6 +140,9 @@ const formFieldComponents: FormComponentSchema = {
     [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/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/Typeahead2.tsx

@@ -0,0 +1,283 @@
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+
+import { Listbox, ListboxButton } from "@headlessui/react";
+import { RegisterOptions } from "react-hook-form";
+
+import { FormContext } from "../context/FormContext";
+import { getListOption, getListOptions } from "../FormFieldUtils";
+import {
+  FieldOptionsSchema,
+  FormFieldComponentPropSchema,
+  FormFieldType,
+} from "../schema/FormFieldSchema";
+import { handleChange, registerFormField } from "../util";
+import RenderFormField from "../util/RenderFormField";
+import RenderListOptions, {
+  renderListBoxValue,
+} from "../util/RenderListOptions";
+import axios from "axios";
+import { getAxiosInstance } from "../../api";
+
+const Typeahead2: React.FC<FormFieldComponentPropSchema> = (
+  props: FormFieldComponentPropSchema,
+) => {
+  const dynamicSelectRef = useRef<HTMLUListElement>(null);
+  const abortControllerRef = useRef<AbortController | null>(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>(false);
+
+  useEffect(() => {
+    if (
+      !formContext.getValues(props.fieldConfig.name) &&
+      props.fieldConfig.defaultValue
+    ) {
+      formContext.setValue(
+        props.fieldConfig.name,
+        props.fieldConfig.defaultValue,
+      );
+    }
+    let values: any | any[] | undefined =
+      formContext.getValues(props.fieldConfig.name) ||
+      props.fieldConfig.defaultValue;
+
+    if (values && selectedValues.length < 1) {
+      if (props.fieldConfig.fetchSavedDataUrl) {
+        fetchValue(values);
+      } else {
+        setSelectedValues(
+          Array.isArray(values)
+            ? values.map((val: any) => ({ label: val, value: val }))
+            : [values],
+        );
+      }
+    }
+  }, []);
+
+
+
+  const fetchData = useMemo(() => {
+    let timeoutId: ReturnType<typeof setTimeout>;
+
+    return (_query: string | undefined) => {
+      // Clear the previous timer
+      if (timeoutId) clearTimeout(timeoutId);
+
+      // Set a new timer
+      timeoutId = setTimeout(async () => {
+        // 1. Cancel the previous request if it's still pending
+        if (abortControllerRef.current) {
+          abortControllerRef.current.abort();
+        }
+
+        // 2. Create a new controller for the current request
+        const controller = new AbortController();
+        abortControllerRef.current = controller;
+
+        if (!_query || _query.length < 3) {
+          setListOptions([]);
+          setLoading(false);
+          return;
+        }
+        setLoading(true);
+        try {
+          if (!props.fieldConfig.fetchUrl) return;
+
+          let url = props.fieldConfig.fetchUrl;
+
+          url = url.includes("?") ? url + "&q=" + _query : url + "?q=" + _query;
+
+          const axiosInstance = getAxiosInstance(
+            formContext.axiosInstance,
+            props.fieldConfig,
+          );
+          const response = await axiosInstance.get(url);
+
+          if (controller === abortControllerRef.current) {
+            if (response?.data) {
+              const data: FieldOptionsSchema[] = getListOptions(
+                response?.data,
+                props.fieldConfig.optionsConfig,
+              );
+              setListOptions([...data]);
+
+              if (props.fieldConfig.fetchCallback) {
+                props.fieldConfig.fetchCallback(response);
+              }
+            }
+          }
+        } catch (err) {
+          console.error("Fetch error:", err);
+        } finally {
+          // Only stop loading if this was the "active" request
+          if (controller === abortControllerRef.current) {
+            setLoading(false);
+          }
+        }
+      }, 250);
+    };
+  }, []);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      abortControllerRef.current?.abort();
+    };
+  }, []);
+
+  const fetchValue = async (value: string | any | any[]) => {
+    try {
+      if (
+        props.fieldConfig.ignoreFetchValue ||
+        !props.fieldConfig.fetchSavedDataUrl
+      ) {
+        return;
+      }
+
+      let url = props.fieldConfig.fetchSavedDataUrl;
+
+      // url = url.includes("?")
+      //   ? url + "&values=" + value
+      //   : url + "?values=" + value;
+
+      let response = await (props.fieldConfig.disableHeaderInFetch
+        ? axios.post(url, Array.isArray(value) ? value : [value])
+        : formContext.axiosInstance?.post(
+          url,
+          Array.isArray(value) ? value : [value],
+        ));
+      if (response?.data) {
+        const data: FieldOptionsSchema[] = getListOptions(
+          response?.data,
+          props.fieldConfig.optionsConfig,
+        );
+        let values: any[] = formContext.getValues(props.fieldConfig.name) || [];
+        setSelectedValues(
+          [
+            ...data,
+            props.fieldConfig.dropdownFieldConfig?.isSuggestionBox &&
+              values &&
+              Array.isArray(values)
+              ? values
+                .filter(
+                  (value) =>
+                    data.some((d) => d.value !== value) || data.length == 0,
+                )
+                .map((val) => ({ label: val, value: val }))
+              : [],
+          ].flat(),
+        );
+      }
+    } catch (err) { }
+  };
+
+  const updateListOptions = (data: any) => {
+    const resData: FieldOptionsSchema = getListOption(
+      data,
+      props.fieldConfig.optionsConfig,
+    );
+    setListOptions([]);
+    setSelectedValues((prev) =>
+      props.fieldConfig.isMultiple ? [...prev, resData] : [resData],
+    );
+    let result = formContext.getValues(props.fieldConfig.name) || [];
+    result = !props.fieldConfig.isMultiple
+      ? resData.value
+      : result.includes(resData.value)
+        ? [...result.filter((v: string) => v != resData.value), resData.value]
+        : [...result, resData.value];
+    formContext.setValue(props.fieldConfig.name, result);
+  };
+
+  const getInput = () => {
+    return (
+      <Listbox
+        as={"div"}
+        {...hookProps}
+        value={
+          props.fieldConfig.isMultiple
+            ? formContext.getValues(props.fieldConfig.name)
+              ? formContext.getValues(props.fieldConfig.name)
+              : []
+            : formContext.getValues(props.fieldConfig.name)
+        }
+        name={props.fieldConfig.name}
+        defaultValue={props.fieldConfig.defaultValue}
+        key={props.fieldConfig.name}
+        className={"relative form-listbox flex-1 overflow-hidden"}
+        onChange={(selectedOptions) => {
+          let currentValue = formContext.getValues(props.fieldConfig.name);
+          const newValue =
+            currentValue === selectedOptions ? null : selectedOptions;
+
+          if (props.fieldConfig.isMultiple) {
+            currentValue = listOptions.filter((op) =>
+              selectedOptions.includes(op.value),
+            );
+            setSelectedValues((prev) => [...prev, ...currentValue]);
+          } else {
+            const selected = listOptions.find((o) => o.value == newValue);
+            selected && setSelectedValues([selected]);
+          }
+          setListOptions([]);
+          handleChange(
+            newValue,
+            formContext,
+            props.fieldConfig,
+            props.onChange,
+          );
+        }}
+        multiple={props.fieldConfig.isMultiple}
+      >
+        <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_2}
+          ref={dynamicSelectRef}
+          fieldConfig={props.fieldConfig}
+          listOptions={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 Typeahead2;

package/src/form/formfields/TypeaheadMultiSelect.tsx

@@ -60,8 +60,6 @@ const TypeaheadMultiSelect: React.FC<FormFieldComponentPropSchema> = (
         let url = props.fieldConfig.fetchUrl;
         if (_query) {
           url = url.includes("?") ? url + "&q=" + _query : url + "?q=" + _query;
-        } else {
-          url = url.includes("?") ? url + "&q=" + null : url + "?q=" + null;
         }
         const axiosInstance = getAxiosInstance(
           formContext.axiosInstance,
@@ -128,16 +126,16 @@ 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(),
         );
       }
-    } catch (err) {}
+    } catch (err) { }
   };
 
   const updateListOptions = (data: any) => {
@@ -181,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"
           }
         >

package/src/form/schema/FormFieldSchema.ts

@@ -37,6 +37,7 @@ export enum FormFieldType {
     DYNAMIC_MULTI_SELECT = "DYNAMIC_MULTI_SELECT",
 
     TYPEAHEAD = "TYPEAHEAD",
+    TYPEAHEAD_2 = "TYPEAHEAD_2",
     TYPEAHEAD_MULTI_SELECT = "TYPEAHEAD_MULTI_SELECT",
     PHONE_NUMBER_INPUT = "PHONE_NUMBER_INPUT",
     SWITCH = "SWITCH",
@@ -129,10 +130,12 @@ export type FormFieldSchema = {
     submitOnChange?: boolean;
     formFieldPattern?: FormFieldPatternsImpl[];
     fetchUrl?: string;
+    fetchSavedDataUrl?: string;
     postUrl?: string;
     fileAccept?: string;
     icon?: ReactNode;
     outputFormat?: OutputFormatType;
+    isMultiple?: boolean;
     children?: FormFieldSchema[];
     defaultOptions?: FieldOptionsSchema[];
     optionsConfig?: OptionMappingConfig;

package/src/form/util/RenderListOptions.tsx

@@ -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,13 +127,15 @@ const RenderListOptions = forwardRef<HTMLUListElement, RenderListOptionsProps>(
     }, {});
 
     const handleQueryCallback = useCallback(() => {
-      if (filteredList.length == 0 && isTypeahead) {
+      if (filteredList.length < 5 && isTypeahead) {
         queryCallback && queryCallback(query);
       }
     }, [filteredList]);
 
     useEffect(() => {
-      handleQueryCallback();
+      if (formField == FormFieldType.TYPEAHEAD_2)
+        queryCallback && queryCallback(query);
+      else handleQueryCallback();
     }, [query]);
 
     let enableCreateFlag =
@@ -143,6 +145,7 @@ const RenderListOptions = forwardRef<HTMLUListElement, RenderListOptionsProps>(
 
     let validTypeaheadFields = [
       FormFieldType.TYPEAHEAD,
+      FormFieldType.TYPEAHEAD_2,
       FormFieldType.TYPEAHEAD_MULTI_SELECT,
     ];
     let isTypeahead: boolean = validTypeaheadFields.indexOf(formField) > -1;
@@ -166,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 ? (
@@ -179,9 +181,8 @@ 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>
@@ -203,7 +204,7 @@ const RenderListOptions = forwardRef<HTMLUListElement, RenderListOptionsProps>(
                   )}
                 </span>
                 {isTypeahead &&
-                !fieldConfig.dropdownFieldConfig?.isSuggestionBox ? (
+                  !fieldConfig.dropdownFieldConfig?.isSuggestionBox ? (
                   <input
                     type="checkbox"
                     className="form-checkbox"
@@ -399,28 +400,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) => {
@@ -452,9 +453,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"}