@integry/sdk 4.5.2 → 4.5.4

package/src/components/MultipurposeField/Dropdown/index.tsx

@@ -0,0 +1,981 @@
+/* eslint-disable no-nested-ternary */
+/* eslint-disable no-use-before-define */
+import { html } from 'htm/preact';
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  useRef,
+} from 'preact/hooks';
+import fuzzysort from 'fuzzysort';
+import { createNewSortInstance } from 'fast-sort';
+import { NestedObject } from '@/interfaces';
+import { Label } from '@/components/Label';
+import { Hint } from '@/components/Tooltip';
+import { useOnClickOutside } from '@/hooks/useOnClickOutside';
+import { ThreeDotLoader } from '@/components/ThreeDotLoader';
+import { IntegryAPI } from '@/modules/api';
+import { ErrorMessage } from '@/components/ErrorMessage';
+import useCustomRef from '@/hooks/useCustomRef';
+import { TagButton } from '@/components/AddTagButton';
+import { ListBoxItemProps } from './ListBoxItem';
+import { FieldDropdown, Tabs } from '../TagMenu';
+
+import styles from './styles.module.scss';
+
+type keyValueMapper = (input: any) => { id: any; value: any }[];
+
+interface ListBoxProps {
+  title: string;
+  description: string;
+  items: Omit<ListBoxItemProps, 'onClick'>[];
+  value?: string;
+  onChange(val: string, stopPropagation?: boolean): void;
+  isOpen?: boolean;
+  isDynamic?: boolean;
+  endpointUrl?: string;
+  isSearchable?: boolean;
+  placeholder: string | null;
+  isRequired?: boolean;
+  isHidden?: boolean;
+  showStepValidation?: boolean;
+  responseMapper?(input: unknown): Omit<ListBoxItemProps, 'onClick'>[];
+  apiHandler: IntegryAPI;
+  endpointData: string;
+  isReadOnly?: boolean;
+  isChanged?: boolean;
+  tagValue?: string;
+  taggedSelect?: boolean;
+  skipOptionFetch?: boolean;
+  onAddTag?: () => void;
+  activityOutputData?: NestedObject;
+  sourceFlowData?: NestedObject;
+  sourceFlowIntegrataionInvocationUrl?: string;
+  isMappable: boolean;
+  type: string;
+  appName: string;
+  fieldId?: string;
+  isConfigMode: boolean;
+  isEditable: boolean;
+  allowTagsInText: boolean;
+  labelTags: string[];
+  hideTabs?: boolean;
+  selectedAuthId?: string;
+  disabled?: boolean;
+  isMultiSelect?: boolean;
+  optionKeyPath?: string;
+  valueKeyPath?: string;
+  dataSourceBody?: any;
+}
+
+const ListBox = (props: ListBoxProps) => {
+  const {
+    title,
+    description,
+    items: passedItems = [],
+    value = null,
+    isOpen = false,
+    isDynamic = false,
+    endpointData,
+    isSearchable = false,
+    isRequired = false,
+    isHidden = false,
+    placeholder,
+    onChange = () => null,
+    showStepValidation = false,
+    responseMapper = (input: { id: string; value: string }[]) => input,
+    isReadOnly = false,
+    isChanged = false,
+    tagValue = '',
+    taggedSelect = false,
+    skipOptionFetch = false,
+    onAddTag,
+    activityOutputData = {},
+    type,
+    appName,
+    fieldId = 'dropdown-field',
+    isConfigMode = false,
+    isMappable = false,
+    isEditable = false,
+    allowTagsInText = false,
+    labelTags = [],
+    endpointUrl,
+    hideTabs = true,
+    sourceFlowData = {},
+    sourceFlowIntegrataionInvocationUrl = '',
+    selectedAuthId = '',
+    disabled = false,
+    isMultiSelect = false,
+    dataSourceBody = {},
+  } = props;
+
+  const [query, setQuery] = useState<string>('');
+
+  const [items, setItems] = useState<Omit<ListBoxItemProps, 'onClick'>[]>(
+    passedItems,
+  );
+
+  const [highlightedIndex, setHighlightedIndex] = useState<number>(-1);
+
+  const [filteredItems, setFilteredItems] = useState<
+    Omit<ListBoxItemProps, 'onClick'>[]
+  >(passedItems);
+
+  const [loading, setLoading] = useState(
+    isDynamic && !passedItems.length && !value && selectedAuthId !== '',
+  );
+
+  const [isDropdownOpen, setIsDropdownOpen] = useState(isOpen);
+
+  const [tempPlaceholder, setTempPlaceholder] = useState('');
+  const [searchValue, setSearchValue] = useState('');
+  const [editableTextValue, setEditableTextValue] = useState(value);
+  const [isErrorOnLoadingOptions, setIsErrorOnLoadingOptions] = useState(false);
+  const [nextPage, setNextPage] = useState('');
+
+  const [selectedTab, setSelectedTab] = useState('');
+
+  const [dropdownRef] = useCustomRef<HTMLDivElement>();
+  const [dropdownMenuRef] = useCustomRef<HTMLDivElement>();
+  const [inputRef] = useCustomRef<HTMLInputElement>();
+  const queryRef = useRef(query);
+
+  useOnClickOutside(dropdownMenuRef, (e) => {
+    const clickedElement = e.target as HTMLElement;
+    const clickedElementIsDropdownField = document
+      .getElementById(fieldId)
+      ?.contains(clickedElement);
+    setTempPlaceholder('');
+
+    if (clickedElementIsDropdownField) {
+      return;
+    }
+    if (isDropdownOpen) {
+      setIsDropdownOpen(false);
+      setHighlightedIndex(-1);
+      setSearchValue('');
+    }
+  });
+
+  useEffect(() => {
+    queryRef.current = query;
+  }, [query]);
+
+  useEffect(() => {
+    if (value) {
+      if (onChange) onChange(value);
+    }
+  }, [fieldId]);
+
+  useEffect(() => {
+    if (highlightedIndex > -1 && isDropdownOpen) {
+      const item = filteredItems[highlightedIndex];
+      if (item) {
+        const domEl = document.querySelector(`[data-value="${item.id}"]`);
+        domEl?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+      }
+    }
+  }, [highlightedIndex, isDropdownOpen]);
+
+  useEffect(() => {
+    if (tagValue && tagValue !== query) {
+      setQuery(tagValue);
+    }
+  }, [tagValue]);
+
+  useEffect(() => {
+    if (dropdownRef && dropdownRef.current && isDropdownOpen === true) {
+      if (dropdownRef && dropdownRef.current) {
+        dropdownRef.current?.addEventListener('keyup', upHandler);
+      }
+    }
+    document.addEventListener('keydown', handleKeyDown);
+    // Remove event listeners on cleanup
+    return () => {
+      if (dropdownRef && dropdownRef.current) {
+        dropdownRef.current.removeEventListener('keyup', upHandler);
+      }
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isDropdownOpen, dropdownRef, highlightedIndex]);
+
+  useEffect(() => {
+    let timer: null | ReturnType<typeof setTimeout> = null;
+    if (!Array.isArray(items)) {
+      setItems([]);
+    }
+    const item = items.find((a) => a.id === value);
+
+    if (!isDropdownOpen && query && !value) {
+      setQuery('');
+      timer = setTimeout(() => {
+        setSortedFilteredItems(items);
+      }, 250);
+    } else if (!isDropdownOpen && value && item) {
+      setQuery(item.value);
+    } else if (!isDropdownOpen && tagValue && !skipOptionFetch) {
+      setQuery(tagValue);
+    }
+    return () => {
+      if (timer) clearTimeout(timer);
+    };
+  }, [isDropdownOpen]);
+
+  useEffect(() => {
+    if (query && isSearchable) {
+      const filtered = fuzzysort
+        .go(query, items, {
+          keys: ['value'],
+          scoreFn: (keysResult) => {
+            const nameResult = keysResult[0];
+            const tagsResult = keysResult[1];
+            // assign higher score to name result
+            const score = Math.max(
+              nameResult ? nameResult.score + 100 : -Infinity,
+              tagsResult ? tagsResult.score : -Infinity,
+            );
+            return score;
+          },
+        })
+        .map((el) => el.obj);
+      setHighlightedIndex(-1);
+      setSortedFilteredItems(filtered);
+      if (filtered.length === 1) setHighlightedIndex(0);
+    } else if (isDropdownOpen) {
+      setHighlightedIndex(-1);
+      setSortedFilteredItems(items);
+    }
+  }, [query]);
+
+  useEffect(() => {
+    const checkboxItems = [
+      { id: '1', value: 'Yes' },
+      { id: '0', value: 'No' },
+    ];
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    if (skipOptionFetch && isDynamic) {
+      // skip option fetch for dynamic dropdowns only. Static dropdowns should always fetch options
+      setLoading(false);
+      setFilteredItems([]);
+      setItems([]);
+      setQuery('');
+      if (inputRef.current) {
+        inputRef.current.value = '';
+      }
+      return;
+    }
+    const { apiHandler } = props;
+
+    if (isDynamic && sourceFlowIntegrataionInvocationUrl && !disabled) {
+      fetchDynamicDataFromSourceFlow();
+    } else if (isDynamic && endpointUrl && !disabled) {
+      setLoading(true);
+      let data;
+      try {
+        data = JSON.parse(endpointData) || {};
+        if (selectedAuthId) {
+          data.connected_account_id = selectedAuthId;
+        }
+      } catch (error) {
+        data = '';
+      }
+      const requestBodyData =
+        typeof dataSourceBody === 'object' &&
+        Object.keys(dataSourceBody).length > 0
+          ? dataSourceBody
+          : activityOutputData;
+      apiHandler
+        .callDynamicDataEndpointWithTags<
+          {
+            id: string;
+            value: string;
+          }[]
+        >(new URL(endpointUrl), data, requestBodyData)
+        .then((res: any) => {
+          if (res) {
+            setItems(dynamicResponseMapper(res));
+            if (res.hasOwnProperty('_cursor') && res._cursor !== null) {
+              let tempFilteredItems = dynamicResponseMapper(res);
+              setFilteredItems(tempFilteredItems);
+              if (tempFilteredItems.length === 1) {
+                setEditableTextValue(tempFilteredItems[0].value);
+                onChange(tempFilteredItems[0].id, true);
+              }
+            } else {
+              setSortedFilteredItems(dynamicResponseMapper(res));
+            }
+            // if value was selected before items were loaded, select it again
+            if (value && isSearchable) {
+              const item = dynamicResponseMapper(res).find(
+                (a) => a.id === value,
+              );
+              if (item) {
+                setQuery(item.value);
+              } else {
+                setQuery('');
+              }
+              setLoading(false);
+            } else {
+              setQuery('');
+              setLoading(false);
+            }
+          } else {
+            setIsErrorOnLoadingOptions(true);
+            setLoading(false);
+          }
+        });
+    } else if (isDynamic && endpointUrl && disabled) {
+      setLoading(false);
+    } else if (!isDynamic && endpointUrl) {
+      // if isDynamic is false, endpointUrl will have JSON data instead of URL
+      try {
+        const data = JSON.parse(endpointUrl);
+        if (type === 'CHECKBOX' && data.length === 1 && data[0].id === '1') {
+          setSortedFilteredItems(responseMapper(checkboxItems));
+          setItems(responseMapper(checkboxItems));
+          setLoading(false);
+        } else {
+          setItems(responseMapper(data));
+          setSortedFilteredItems(responseMapper(data));
+          setLoading(false);
+        }
+      } catch (error) {
+        console.error(error);
+      }
+    } else if (type === 'CHECKBOX') {
+      // in case of single checkbox, we need to set the items(Yes/No) and filteredItems(Yes/No)
+      setSortedFilteredItems(responseMapper(checkboxItems));
+      setItems(responseMapper(checkboxItems));
+      setLoading(false);
+    }
+  }, [endpointData, skipOptionFetch, endpointUrl, selectedAuthId]);
+
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key === 'Tab') {
+      setIsDropdownOpen(false);
+    }
+  };
+
+  const dynamicResponseMapper: keyValueMapper = (input) => {
+    const keyPath = props.optionKeyPath || 'id';
+    const valuePath = props.valueKeyPath || 'value';
+    const inputModified = input.hasOwnProperty('output') ? input.output : input;
+
+    // Check if inputModified is an array, if not, return an empty array
+    if (!Array.isArray(inputModified)) {
+      return [];
+    }
+
+    if (input.hasOwnProperty('_cursor')) {
+      setNextPage(input._cursor);
+    }
+
+    return inputModified.map((item: any) => {
+      // Helper function to resolve value based on plain property or tag
+      const resolveValue = (path: string): any => {
+        // If the path contains template tags, process it
+        if (/{([^}]+)}/.test(path)) {
+          return path.replace(/{([^}]+)}/g, (_, placeholder) => {
+            const keys = placeholder.split('.');
+            return (
+              keys.reduce((acc: any, key: any) => acc && acc[key], item) || ''
+            );
+          });
+        }
+
+        // Otherwise, treat it as a plain property path
+        const keys = path.split('.');
+        return keys.reduce((acc: any, key) => acc && acc[key], item);
+      };
+
+      // Resolve id and value using the helper function
+      let id = resolveValue(keyPath);
+      let value = resolveValue(valuePath);
+
+      // Fallback: If 'value' is undefined or an empty string, use 'id' as the value
+      if (typeof value === 'undefined' || value === '') {
+        value = id;
+      }
+
+      return { id, value };
+    });
+  };
+
+  // If released key is our target key then set to false
+  const upHandler = useCallback(
+    ({ key }: { key: string }): void => {
+      switch (key) {
+        case 'Enter': // item selected
+          onDropdownItemClicked(filteredItems[highlightedIndex]);
+          break;
+        case 'Escape': // cancel selection
+          setIsDropdownOpen(false);
+          inputRef.current?.blur();
+          break;
+        case 'ArrowDown': {
+          if (highlightedIndex < 0) {
+            setHighlightedIndex(0); // first item
+          } else if (highlightedIndex < filteredItems.length - 1) {
+            setHighlightedIndex((idx) => idx + 1); // next item
+          } else {
+            setHighlightedIndex(0); // wrap around
+          }
+          break;
+        }
+        case 'ArrowUp': {
+          if (highlightedIndex < 0) {
+            setHighlightedIndex(filteredItems.length - 1); // last item
+          } else if (
+            highlightedIndex < filteredItems.length &&
+            highlightedIndex > 0
+          ) {
+            setHighlightedIndex((idx) => idx - 1); // previous item
+          } else {
+            setHighlightedIndex(filteredItems.length - 1); // wrap around
+          }
+          break;
+        }
+        default:
+          break;
+      }
+    },
+    [highlightedIndex, filteredItems],
+  );
+
+  const setSortedFilteredItems = (
+    data: { id: string; value: string }[],
+  ): void => {
+    if (type === 'SELECT') {
+      // sort A-Z for dropdowns
+      const naturalSort = createNewSortInstance({
+        comparer: new Intl.Collator(undefined, {
+          numeric: true,
+          sensitivity: 'base',
+        }).compare,
+      });
+      const sorted = naturalSort(data).asc((item) => item.value);
+      setFilteredItems(sorted);
+    } else {
+      setFilteredItems(data);
+    }
+  };
+
+  const toggleDropdown = () => {
+    if (!isReadOnly) {
+      if (!isDropdownOpen) {
+        setQuery('');
+        inputRef.current?.focus();
+      }
+      setIsDropdownOpen((prev) => !prev);
+    }
+  };
+
+  const handleMultipurposeOnChange = (option: string) => {
+    const textField = inputRef.current;
+    let newValue = `${option}`;
+
+    // if the field is editable only, then EU can only eneter text, no tags and tags menu wont show up, so this function wont be called
+    if (textField) {
+      const { selectionStart = 0, selectionEnd = 0 } = textField;
+      const oldValue = textField.value;
+      const textBeforeCursor = oldValue.substring(0, selectionStart || 0);
+      const textAfterCursor = oldValue.substring(selectionEnd || 0);
+      const insertedText = `${option}`;
+      newValue = textBeforeCursor + insertedText + textAfterCursor;
+      textField.selectionStart = (selectionStart || 0) + insertedText.length;
+      textField.selectionEnd = textField.selectionStart;
+      textField.focus();
+    }
+    if (onChange) onChange(newValue);
+  };
+  const onDropdownItemClicked = (el: Omit<ListBoxItemProps, 'onClick'>) => {
+    setTempPlaceholder('');
+    setSearchValue('');
+    let fieldVal = el.value;
+    if (isMultiSelect) {
+      const fieldIds = value ? JSON.parse(value) : [];
+      // check if el.id is already selected and then remove it
+      if (fieldIds.includes(el.id)) {
+        const index = fieldIds.indexOf(el.id);
+        fieldIds.splice(index, 1);
+      } else {
+        fieldIds.push(el.id);
+      }
+      let index = -1;
+      let indexes: number[] = [];
+      const selectedValues = fieldIds.map((val: any) => {
+        index = items.findIndex((el) => el.id === val);
+        indexes.push(index);
+      });
+      if (indexes.length > 0) {
+        fieldVal = indexes.map((i) => items[i].value).join(', ');
+      }
+      onChange(JSON.stringify(fieldIds));
+      setEditableTextValue(JSON.stringify(fieldIds));
+    } else {
+      onChange(el.id);
+      setEditableTextValue(fieldVal);
+    }
+    setIsDropdownOpen(false);
+    if (isSearchable) {
+      setQuery(fieldVal); // set the query to the selected value
+      inputRef.current?.blur();
+    }
+  };
+
+  /*   const onTagSelect = (option: string) => {
+    if (onChange) onChange(`{${option}}`);
+    setIsDropdownOpen(false);
+  }; */
+
+  const onTagSelect = (option: string) => {
+    const textField = inputRef.current;
+    let newValue = `{${option}}`;
+    setTempPlaceholder('');
+    // if (!isEditable) {
+    if (textField) {
+      if (allowTagsInText) {
+        // allowTagsInText will be true only if the field is editable
+        // if the fields is editable and allowTagsInText, then EU can enter text or select muliple tags within the text
+        const { selectionStart = 0, selectionEnd = 0 } = textField;
+        const oldValue = textField.value;
+        const textBeforeCursor = oldValue.substring(0, selectionStart || 0);
+        const textAfterCursor = oldValue.substring(selectionEnd || 0);
+        const insertedText = `{${option}}`;
+        newValue = textBeforeCursor + insertedText + textAfterCursor;
+        textField.selectionStart = (selectionStart || 0) + insertedText.length;
+        textField.selectionEnd = textField.selectionStart;
+      }
+    }
+    // if the field is editable and mappable, then EU can enter text or select a tag
+    // if the fields in mappable only, then select only one tag
+    setIsDropdownOpen(false);
+    setSearchValue('');
+    setEditableTextValue(newValue);
+    if (onChange) onChange(newValue);
+    // } else {
+    //   handleMultipurposeOnChange(newValue);
+    //   setIsDropdownOpen(false);
+    //   setSearchValue('');
+    //   // if the field is editable only, then EU can only eneter text, no tags and tags menu wont show up, so this function wont be called
+    // }
+  };
+
+  const getSelectedItem = useMemo(() => {
+    let index = -1;
+    if (isMultiSelect) {
+      const values = value ? JSON.parse(value) : [];
+      const indexes: any = [];
+      const selectedValues = values.map((val: any) => {
+        index = items.findIndex((el) => el.id === val);
+        indexes.push(index);
+      });
+      if (indexes.length > 0 && items.length > 0) {
+        return indexes.map((i: number) => items[i].value).join(', ');
+      }
+    } else {
+      try {
+        index = items.findIndex((el) => el.id === value);
+      } catch (error) {
+        index = -1;
+      }
+      if (isMappable && selectedTab === 'AppFields') {
+        return index > -1 ? items[index].value : value;
+      }
+    }
+
+    return index > -1 ? items[index].value : '';
+  }, [items, value]);
+
+  const getItemFromText = (
+    textValue: string,
+  ): {
+    id: string;
+    value: string;
+  } => {
+    let tempItem = {
+      id: textValue,
+      value: textValue,
+    };
+    let itemFound = false;
+    items.forEach((item) => {
+      if (item.id === textValue && !itemFound) {
+        tempItem = item;
+        itemFound = true;
+      }
+    });
+    if (!itemFound) {
+      items.forEach((item) => {
+        if (item.value === textValue && !itemFound) {
+          tempItem = item;
+          itemFound = true;
+        }
+      });
+    }
+    return tempItem;
+  };
+
+  const updateValue = (e: InputEvent | any) => {
+    setTempPlaceholder('');
+    if (e.currentTarget instanceof HTMLInputElement) {
+      const { value: newValue } = e.currentTarget;
+      if (isEditable) {
+        const tempItem = getItemFromText(newValue);
+        onChange(tempItem.id);
+        setEditableTextValue(tempItem.value);
+        onSearchChange(e);
+      } else {
+        onChange(newValue);
+        setEditableTextValue(newValue);
+      }
+      if (newValue !== '' && !isEditable) {
+        setSearchValue(newValue.trim());
+      } else {
+        setSearchValue('');
+      }
+    }
+  };
+
+  const onInputClicked = (e: InputEvent) => {
+    e.stopPropagation();
+    if (!isDropdownOpen && !isReadOnly) {
+      setQuery('');
+      setIsDropdownOpen(true);
+    }
+    const isTag =
+      getSelectedItem?.startsWith('{') && getSelectedItem?.endsWith('}');
+
+    let itemsToProcess = items;
+    if (!Array.isArray(items)) {
+      setItems([]);
+      itemsToProcess = [];
+    }
+    const isOption = itemsToProcess.find((el) => el.id === value);
+    if (isEditable && !allowTagsInText && isTag) {
+      setTempPlaceholder(getSelectedItem || '');
+    } else if (isEditable && isOption) {
+      setTempPlaceholder(getSelectedItem || '');
+    }
+  };
+
+  const onSearchChange = (e: InputEvent) => {
+    if (e.currentTarget instanceof HTMLInputElement) {
+      setSearchValue(e.currentTarget.value.trim());
+      setQuery(e.currentTarget.value.trim());
+    }
+  };
+
+  const fetchDynamicDataFromSourceFlow = (
+    isRefresh: boolean = false,
+    callback?: any,
+  ): void => {
+    const { apiHandler } = props;
+    if (!isRefresh) {
+      setLoading(true);
+    }
+    if (selectedAuthId) {
+      apiHandler
+        .callSourceFlowIntegrationInvocationUrl<
+          {
+            id: string;
+            value: string;
+          }[]
+        >(
+          new URL(sourceFlowIntegrataionInvocationUrl),
+          { authorization_id: selectedAuthId },
+          sourceFlowData,
+        )
+        .then((res) => {
+          if (res) {
+            setItems(responseMapper(res));
+            setSortedFilteredItems(responseMapper(res));
+            // if value was selected before items were loaded, select it again
+            if (value && isSearchable) {
+              const item = responseMapper(res).find((a) => a.id === value);
+              if (item && !isRefresh) {
+                setQuery(item.value);
+              } else {
+                setQuery('');
+              }
+              setLoading(false);
+              if (callback) {
+                callback();
+              }
+            } else {
+              setQuery('');
+              setLoading(false);
+              if (callback) {
+                callback();
+              }
+            }
+          } else {
+            setIsErrorOnLoadingOptions(true);
+          }
+        });
+    }
+  };
+
+  const fetchDynamicData = (
+    isRefresh: boolean = false,
+    callback?: any,
+    loadMore?: boolean,
+    params?: any,
+  ): void => {
+    const { apiHandler } = props;
+    if (isDynamic && sourceFlowIntegrataionInvocationUrl) {
+      fetchDynamicDataFromSourceFlow(isRefresh, callback);
+    } else if (endpointUrl) {
+      if (!isRefresh) {
+        setLoading(true);
+      }
+      let data;
+      try {
+        data = JSON.parse(endpointData);
+      } catch (error) {
+        data = '';
+      }
+      apiHandler
+        .callDynamicDataEndpoint<
+          {
+            id: string;
+            value: string;
+          }[]
+        >(new URL(endpointUrl), data, 'POST', params)
+        .then((res) => {
+          if (res) {
+            if (loadMore) {
+              setItems([...items, ...dynamicResponseMapper(res)]);
+              setFilteredItems([...items, ...dynamicResponseMapper(res)]);
+            } else {
+              setItems(dynamicResponseMapper(res));
+              setSortedFilteredItems(dynamicResponseMapper(res));
+            }
+            // if value was selected before items were loaded, select it again
+            if (value && isSearchable) {
+              const item = dynamicResponseMapper(res).find(
+                (a) => a.id === value,
+              );
+              if (item && !isRefresh) {
+                setQuery(item.value);
+              } else {
+                setQuery('');
+              }
+              setLoading(false);
+              if (callback) {
+                callback();
+              }
+            } else {
+              setQuery('');
+              setLoading(false);
+              if (callback) {
+                callback();
+              }
+            }
+          } else {
+            setIsErrorOnLoadingOptions(true);
+          }
+        });
+    }
+  };
+  const handleRefreshClick = (callback?: any, nextPage?: string): void => {
+    const requestBodyData =
+      typeof dataSourceBody === 'object' &&
+      Object.keys(dataSourceBody).length > 0
+        ? dataSourceBody
+        : activityOutputData;
+
+    // Merge nextPage into requestBodyData if it exists
+    const updatedRequestBodyData = nextPage
+      ? { ...requestBodyData, _cursor: nextPage }
+      : requestBodyData;
+    if (nextPage) {
+      fetchDynamicData(true, callback, true, updatedRequestBodyData);
+    } else {
+      setFilteredItems([]);
+      fetchDynamicData(true, callback, false, updatedRequestBodyData);
+    }
+
+    if (isSearchable) {
+      inputRef.current?.blur();
+    }
+  };
+
+  const handleLoadMoreOptions = (callback?: any): void => {
+    if (!loading) {
+      fetchDynamicData(false, callback, true, { _cursor: nextPage });
+      if (isSearchable) {
+        inputRef.current?.blur();
+      }
+    }
+  };
+
+  return html`
+    <${Hint} dismissOnClick=${false} position="top" deltaY=${0}>
+      <div ref=${dropdownRef} class="${styles.listboxGroupWrapper}">
+        <fieldset>
+          ${title &&
+          html`
+            <${Label}
+              title=${title}
+              description=${description}
+              isRequired=${isRequired}
+              isHidden=${isHidden}
+              labelTag=${labelTags}
+              allowRefresh=${false}
+              handleRefreshClick=${handleRefreshClick}
+            />
+          `}
+          <div class=${`${styles.listbox} integry-listbox-field`}>
+            <div
+              class=${`${styles.customSelect} ${
+                isDropdownOpen ? styles.open : ''
+              }`}
+              id="${fieldId}"
+            >
+              ${isReadOnly &&
+              html`<span
+                class=${styles.readonlyHint}
+                data-hint=${isReadOnly ? `Cannot modify user selection` : ''}
+              ></span>`}
+              <div
+                class=${`${styles.customSelectTrigger} ${
+                  showStepValidation &&
+                  !value &&
+                  isRequired &&
+                  (!isDropdownOpen || items.length === 0) &&
+                  styles.error
+                } ${(isSearchable || isEditable) && styles.searchable} ${
+                  isReadOnly ? styles.readonly : ''
+                } ${disabled ? styles.disabled : ''}`}
+                role="button"
+                onclick=${() => !isDropdownOpen && setIsDropdownOpen(true)}
+              >
+                <span class=${value && styles.selected}>
+                  ${false
+                    ? html`<div class=${`${styles.arrow}`}>
+                        <${ThreeDotLoader} color="#ababab" }><//>
+                      </div>`
+                    : html` ${isEditable
+                        ? html`
+                            <input
+                              ref=${inputRef}
+                              class=${styles.searchInput}
+                              placeholder=${tempPlaceholder || placeholder}
+                              value=${getSelectedItem || editableTextValue}
+                              oninput=${updateValue}
+                              onfocus=${onInputClicked}
+                              readonly=${isReadOnly}
+                              tabindex=${0}
+                              disabled=${disabled}
+                            />
+                          `
+                        : isDropdownOpen && !isEditable
+                        ? html`
+                            <input
+                              ref=${(r: any) => {
+                                if (r && isDropdownOpen) {
+                                  r.focus();
+                                }
+                                inputRef.current = r;
+                              }}
+                              class=${styles.searchInput}
+                              placeholder=${getSelectedItem || placeholder}
+                              oninput=${onSearchChange}
+                              onfocus=${onInputClicked}
+                              tabindex=${0}
+                            />
+                          `
+                        : html`
+                            <input
+                              ref=${(r: any) => {
+                                if (r && isDropdownOpen) {
+                                  r.focus();
+                                }
+                                inputRef.current = r;
+                              }}
+                              class=${styles.searchInput}
+                              placeholder=${getSelectedItem ||
+                              placeholder ||
+                              'Please Select...'}
+                              value=${value
+                                ? getSelectedItem !== ''
+                                  ? getSelectedItem
+                                  : null
+                                : null}
+                              tabindex=${0}
+                              onfocus=${onInputClicked}
+                              disabled=${disabled}
+                            />
+                          `}`}
+                </span>
+
+                <div ref=${dropdownRef} style="display: flex;">
+                  ${taggedSelect &&
+                  onAddTag &&
+                  html`
+                    <${TagButton}
+                      onClick=${(e: { stopPropagation: () => void }) => {
+                        e.stopPropagation();
+                        setIsDropdownOpen(false);
+                        onAddTag();
+                      }}
+                    />
+                  `}
+                </div>
+              </div>
+              <div>
+                ${!false &&
+                html`
+                  <div ref=${dropdownMenuRef}>
+                    ${isDropdownOpen &&
+                    html`<${FieldDropdown}
+                      tags=${activityOutputData}
+                      onTagClick=${onTagSelect}
+                      onOptionClick=${onDropdownItemClicked}
+                      options=${filteredItems}
+                      defaultTab=${Tabs.Values}
+                      hideTabs=${!isMappable}
+                      hideTabs=${hideTabs}
+                      appName=${appName}
+                      fieldId=${fieldId}
+                      searchValue=${searchValue}
+                      value=${value}
+                      onTabSelect=${(tab: string) => {
+                        setSelectedTab(tab);
+                        setSearchValue('');
+                        if (!isEditable) {
+                          updateValue({ currentTarget: { value: '' } });
+                          if (inputRef.current) {
+                            inputRef.current.value = '';
+                          }
+                        }
+                        if (inputRef.current) {
+                          inputRef.current.focus();
+                        }
+                      }}
+                      isMappable=${isMappable}
+                      isEditable=${isEditable}
+                      handleRefreshClick=${handleRefreshClick}
+                      isErrorOnLoadingOptions=${isErrorOnLoadingOptions}
+                      isMultiSelect=${isMultiSelect}
+                      loadingOptions=${loading}
+                      nextPage=${nextPage}
+                    />`}
+                  </div>
+                `}
+              </div>
+            </div>
+            ${showStepValidation &&
+            !value &&
+            (!isDropdownOpen || items.length === 0) &&
+            isRequired &&
+            html` <${ErrorMessage}>Please select an option</${ErrorMessage}>`}
+          </div>
+        </fieldset>
+      </div>
+    <//>
+  `;
+};
+
+export { ListBox, ListBoxProps };