@integry/sdk 4.7.39 → 4.7.41

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

@@ -1,1202 +0,0 @@
-/* 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; icon?: any; description?: 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;
-  parentFieldChanged?: boolean;
-  allowWorkspaceConnectedAccounts: boolean;
-  tagsTree?: any;
-  enableServerSideSearch?: boolean;
-  serverSideSearchParamName?: string;
-  iconKeyPath?: string;
-  optionDescriptionKeyPath?: string;
-  skipInitialLoad?: boolean;
-  showMenuOnLeft?: boolean;
-}
-
-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 = {},
-    parentFieldChanged = false,
-    allowWorkspaceConnectedAccounts = false,
-    tagsTree = null,
-    skipInitialLoad = false,
-    showMenuOnLeft = false,
-  } = 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]);
-
-  const isInitialLoadRef = useRef(true);
-
-  useEffect(() => {
-    if (isInitialLoadRef.current) {
-      isInitialLoadRef.current = false;
-      return;
-    }
-    setEditableTextValue('');
-    setQuery('');
-    setSearchValue('');
-    if (inputRef.current) {
-      inputRef.current.value = '';
-    }
-    onChange('');
-  }, [endpointData, endpointUrl, selectedAuthId, parentFieldChanged]);
-
-  useEffect(() => {
-    if (query && isSearchable) {
-      const filtered = items.filter((item) =>
-        item.value.toLowerCase().includes(query.toLowerCase()),
-      );
-      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 &&
-      !skipInitialLoad
-    ) {
-      fetchDynamicDataFromSourceFlow();
-    } else if (isDynamic && endpointUrl && !disabled && !skipInitialLoad) {
-      setLoading(true);
-      let data;
-      try {
-        if (endpointData) {
-          data = JSON.parse(endpointData) || {};
-        } else {
-          data = {};
-        }
-
-        if (selectedAuthId) {
-          data.connected_account_id = selectedAuthId;
-          data.authorization_id = selectedAuthId;
-        }
-        if (allowWorkspaceConnectedAccounts) {
-          data.allow_workspace_connected_accounts = true;
-        }
-
-        // When server side search is available and results are paginated, then better to search the results as value might be in the next page
-        if (
-          props.enableServerSideSearch &&
-          props.serverSideSearchParamName &&
-          value
-        ) {
-          data[props.serverSideSearchParamName] = value;
-        }
-      } 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) {
-            const tempFilteredItems = dynamicResponseMapper(res);
-            setItems(tempFilteredItems);
-            if (res.hasOwnProperty('_cursor') && res._cursor !== null) {
-              setFilteredItems(tempFilteredItems);
-              setSortedFilteredItems(tempFilteredItems);
-            } else {
-              setSortedFilteredItems(tempFilteredItems);
-            }
-            if (tempFilteredItems.length === 1) {
-              setEditableTextValue(tempFilteredItems[0].value);
-              onChange(tempFilteredItems[0].id, true);
-            } else if (value) {
-              const item = tempFilteredItems.find((a) => a.id === value);
-              if (item) {
-                setEditableTextValue(item.value);
-                onChange(item.id, true);
-              }
-            }
-            // 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('');
-              setSearchValue('');
-              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,
-    parentFieldChanged,
-  ]);
-
-  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 = Object.prototype.hasOwnProperty.call(input, 'output')
-      ? input.output
-      : Object.prototype.hasOwnProperty.call(input, 'functions')
-      ? input.functions
-      : input;
-
-    // Check if inputModified is an array, if not, return an empty array
-    if (!Array.isArray(inputModified)) {
-      console.warn(
-        `Invalid data format for dropdown options for field ${fieldId}`,
-      );
-      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
-      const id = resolveValue(keyPath);
-      let optionValue = resolveValue(valuePath);
-      const icon = resolveValue(props.iconKeyPath || '');
-      const optionDescription = resolveValue(
-        props.optionDescriptionKeyPath || '',
-      );
-
-      // Fallback: If 'value' is undefined or an empty string, use 'id' as the value
-      if (typeof optionValue === 'undefined' || optionValue === '') {
-        optionValue = id;
-      }
-
-      if (id === '') {
-        console.warn(
-          `${keyPath} was not found in the response for field ${fieldId}`,
-        );
-      }
-      if (optionValue === '') {
-        console.warn(
-          `${valuePath} was not found in the response for field ${fieldId}`,
-        );
-      }
-
-      return { id, value: optionValue, icon, description: optionDescription };
-    });
-  };
-
-  // 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) {
-      let fieldIds = [];
-      try {
-        if (value) {
-          fieldIds = JSON.parse(value);
-        }
-      } catch (e) {
-        fieldIds = [];
-      }
-      fieldIds = Array.isArray(fieldIds) ? fieldIds : [String(fieldIds)];
-      // 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(fieldIds.length > 0 ? JSON.stringify(fieldIds) : '');
-      setEditableTextValue(fieldIds.length > 0 ? 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) {
-      let values = [];
-      try {
-        if (value) {
-          values = JSON.parse(value);
-        }
-      } catch (e) {
-        values = [];
-      }
-      values = Array.isArray(values) ? values : [String(values)];
-      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 getSelectedItemIcon = useMemo(() => {
-    let index = -1;
-    if (isMultiSelect) {
-      let values = [];
-      try {
-        if (value) {
-          values = JSON.parse(value);
-        }
-      } catch (e) {
-        values = [];
-      }
-      values = Array.isArray(values) ? values : [String(values)];
-      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) {
-        const firstItem = items[0] as ListBoxItemProps;
-        return firstItem.icon || undefined;
-      }
-    } else {
-      try {
-        index = items.findIndex((el) => el.id === value);
-      } catch (error) {
-        index = -1;
-      }
-      if (isMappable && selectedTab === 'AppFields') {
-        return index > -1 ? items[index].icon : '';
-      }
-    }
-
-    return index > -1 ? items[index].icon : '';
-  }, [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 debounceTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const onSearchChange = async (e: InputEvent) => {
-    if (e.currentTarget instanceof HTMLInputElement) {
-      const searchTerm = e.currentTarget.value.trim();
-      if (!props.enableServerSideSearch) {
-        setSearchValue(searchTerm);
-        setQuery(searchTerm);
-      }
-
-      if (
-        isSearchable &&
-        props.enableServerSideSearch &&
-        props.serverSideSearchParamName &&
-        endpointUrl
-      ) {
-        if (debounceTimeout.current) {
-          clearTimeout(debounceTimeout.current);
-        }
-        debounceTimeout.current = setTimeout(async () => {
-          setLoading(true);
-          setItems([]);
-          setSortedFilteredItems([]);
-          try {
-            const params = new URLSearchParams();
-            params.append(props.serverSideSearchParamName || '', searchTerm);
-            params.append('include', 'meta');
-            params.append('include_private', 'true');
-            params.append('page_size', '20');
-
-            const response = await props.apiHandler.callDynamicDataEndpoint<
-              {
-                id: string;
-                value: string;
-              }[]
-            >(new URL(`${endpointUrl}?${params.toString()}`), {}, 'POST');
-
-            if (response) {
-              const serverFilteredItems = dynamicResponseMapper(response);
-              setItems(serverFilteredItems);
-              setSortedFilteredItems(serverFilteredItems);
-            } else {
-              setItems([]);
-              setSortedFilteredItems([]);
-            }
-          } catch (error) {
-            console.error('Error performing server-side search:', error);
-            setItems([]);
-            setSortedFilteredItems([]);
-          } finally {
-            setLoading(false);
-          }
-        }, 500);
-      }
-    }
-  };
-
-  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) {
-      setLoading(true);
-      let data;
-      try {
-        data = JSON.parse(endpointData);
-      } catch (error) {
-        data = {};
-      }
-      if (!data) {
-        data = {};
-      }
-      if (selectedAuthId) {
-        data.connected_account_id = selectedAuthId;
-        data.authorization_id = selectedAuthId;
-      }
-      if (allowWorkspaceConnectedAccounts) {
-        data.allow_workspace_connected_accounts = true;
-      }
-      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 ? `` : ''}
-              ></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`
-                            ${getSelectedItem &&
-                            props.iconKeyPath &&
-                            html`<img
-                              src="${getSelectedItemIcon || ''}"
-                              alt="icon"
-                              class="${styles.selectedIcon}"
-                            />`}
-                            <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`
-                            ${getSelectedItem &&
-                            props.iconKeyPath &&
-                            html`<img
-                              src="${getSelectedItemIcon || ''}"
-                              alt="icon"
-                              class="${styles.selectedIcon}"
-                            />`}
-                            <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 class=${styles.chevronIcon}>
-                  <svg
-                    class="styles-module_accountFieldDropdownIcon__3161J"
-                    width="20"
-                    height="20"
-                    viewBox="0 0 20 20"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                    style=""
-                  >
-                    <path
-                      d="M15 8L10 13L5 8"
-                      stroke="#999999"
-                      stroke-width="2"
-                      stroke-linecap="round"
-                    ></path>
-                  </svg>
-                </div>
-                <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}
-                      isDynamic=${isDynamic}
-                      tagsTree=${tagsTree}
-                      showMenuOnLeft=${props.showMenuOnLeft || false}
-                    />`}
-                  </div>
-                `}
-              </div>
-            </div>
-            ${showStepValidation &&
-            !value &&
-            (!isDropdownOpen || items.length === 0) &&
-            isRequired &&
-            html` <${ErrorMessage}>Please select an option</${ErrorMessage}>`}
-          </div>
-        </fieldset>
-      </div>
-    <//>
-  `;
-};
-
-export { ListBox, ListBoxProps };