@integry/sdk 4.7.39 → 4.7.41

package/src/components/MultipurposeField/index.tsx

@@ -1,944 +0,0 @@
-'use client';
-
-/* eslint-disable no-nested-ternary */
-import { html } from 'htm/preact';
-import { useState, useRef, useEffect } from 'preact/hooks';
-import { Input } from '@/components/Input';
-import { TextArea } from '@/components/TextArea';
-import { useOnClickOutside } from '@/hooks/useOnClickOutside';
-import { FieldDropdown } from '@/components/MultipurposeField/TagMenu';
-import type { NestedObject } from '@/interfaces';
-import type { TagProps } from '@/components/Tag';
-// import { TagsMenu } from '@/components/TagsMenu';
-// @ts-ignore
-import Tagify from '@yaireo/tagify';
-import '@yaireo/tagify/dist/tagify.css'; // Tagify CSS
-import styles from './styles.module.scss';
-
-interface MultipurposeFieldProps {
-  activityOutputData: NestedObject;
-  title: string;
-  description: string;
-  placeholder: string;
-  value?: string;
-  regex: string | null;
-  regexErrorMessage: string | null;
-  isRequired?: boolean;
-  isHidden?: boolean;
-  showStepValidation?: boolean;
-  onChange?: (val: string, passesRegexTest?: boolean) => void;
-  isChanged?: boolean;
-  className?: string;
-  containerClass: string;
-  type: string;
-  key: string;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  apiHandler: any;
-  isSearchable: boolean;
-  endpointUrl: string;
-  isDynamic: boolean;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  endpointData: any;
-  skipOptionFetch: boolean;
-  isMappable?: boolean;
-  isEditable?: boolean;
-  allowTagsInText?: boolean;
-  accountConnected?: boolean;
-  isConfigMode?: boolean;
-  fieldId?: string;
-  labelTags: TagProps[];
-  activityOutputDataRaw: any;
-  enableTagify?: boolean;
-  refreshRootStepData?: (callback?: any) => void;
-  isArray?: boolean;
-  isButtonEnabled?: boolean;
-  buttonText?: string;
-  onButtonClickScript?: string;
-  buttonScriptRequiresAuthToken?: boolean;
-  tagsComponent?: any;
-  tagsTree?: any;
-  isDisabled?: boolean;
-  showMenuOnLeft?: boolean;
-}
-
-const MultipurposeField = (props: MultipurposeFieldProps) => {
-  const {
-    activityOutputData = {},
-    title,
-    description,
-    placeholder,
-    value,
-    regex,
-    regexErrorMessage,
-    isRequired,
-    showStepValidation,
-    onChange,
-    isChanged,
-    className,
-    type,
-    isMappable,
-    isEditable,
-    allowTagsInText,
-    isHidden,
-    isConfigMode = false,
-    fieldId = 'dropdown-field',
-    labelTags = [],
-    activityOutputDataRaw = [],
-    enableTagify = true,
-    refreshRootStepData,
-    isArray = false,
-    isButtonEnabled = false,
-    buttonText = 'Add',
-    onButtonClickScript = '',
-    buttonScriptRequiresAuthToken = false,
-    tagsComponent = null,
-    tagsTree = null,
-    isDisabled = false,
-    showMenuOnLeft = false,
-  } = props;
-  const [showTagMenu, setShowTagMenu] = useState(false);
-  const [currentValue, setCurrentValue] = useState(value);
-  const [newValue, setNewValue] = useState(value);
-  const [tempPlaceholder, setTempPlaceholder] = useState('');
-  const [searchValue, setSearchValue] = useState('');
-  const [tagify, setTagify] = useState<Tagify | null>(null);
-
-  const menuRef = useRef<HTMLDivElement | null>(null);
-  const inputRef = useRef<HTMLInputElement>();
-  const appIconMapRef = useRef<Record<string, string>>({});
-
-  const handleTabKeyDown = (event: KeyboardEvent) => {
-    if (event.key === 'Tab') {
-      setShowTagMenu(false);
-    }
-  };
-
-  const getFieldValFromActivityOutputRaw = (array: any, val: any) => {
-    const valueToUse = (Array.isArray(val) ? val[val.length - 1] : val) || '';
-    const results = valueToUse.toString().match(/{([^}]+)}/g);
-    let valSubstituded = valueToUse;
-    (results || []).forEach((tag: string) => {
-      const tagCheck = tag.replace(/{|}/g, '');
-      (array || []).forEach((arr: any) => {
-        if (arr.value === tagCheck) {
-          valSubstituded = valSubstituded.replace(tag, `{${arr.text}}`);
-        }
-      });
-    });
-    return valSubstituded;
-  };
-
-  useEffect(() => {
-    const clrearTag = (e: KeyboardEvent) => {
-      if (e.key === 'Backspace' && searchValue === '' && !isEditable) {
-        setCurrentValue('');
-        setNewValue('');
-        if (onChange) onChange('', true);
-      }
-    };
-    inputRef.current?.addEventListener('keydown', clrearTag);
-    // cleanup function
-    return () => {
-      inputRef.current?.removeEventListener('keydown', clrearTag);
-    };
-  }, [inputRef.current, searchValue]);
-
-  // useEffect to update the current value when the value prop changes
-  useEffect(() => {
-    setCurrentValue(value);
-    setNewValue(getFieldValFromActivityOutputRaw(activityOutputDataRaw, value));
-
-    // Attach the event listener when the component mounts
-    document.addEventListener('keydown', handleTabKeyDown);
-
-    // Clean up the event listener when the component unmounts
-    return () => {
-      document.removeEventListener('keydown', handleTabKeyDown);
-    };
-  }, [value, title]);
-
-  // Helper function to extract step name from tag value
-  const getStepNameFromValue = (tagValue: string): string | null => {
-    const parts = tagValue.split('.');
-    // For values like "steps.slack_post_message_1.output.ok", "storage.user_data.value",
-    // "setup_form.api_key.value", "parameters.timeout.value" return the second part
-    if (parts.length >= 2) {
-      if (parts.length === 0) {
-        return null;
-      }
-
-      // Determine if first segment is a known root key from tagsTree
-      const rootKeys = tagsTree
-        ? Object.keys(tagsTree).map((key) => {
-            const node = tagsTree[key];
-            return node?.machineName || key;
-          })
-        : [];
-
-      if (parts.length >= 2 && rootKeys.includes(parts[0])) {
-        return parts[1];
-      }
-      if (parts.length >= 2 && parts[0] === 'meta') {
-        return parts[0];
-      }
-      // If there's no second part, return null
-      return null;
-    }
-    return parts[0] || null;
-  };
-
-  // Build flattened appIcon map when tagsTree changes
-  useEffect(() => {
-    if (!tagsTree) {
-      appIconMapRef.current = {};
-      return;
-    }
-
-    const flattenedMap: Record<string, string> = {};
-
-    // Traverse tagsTree and build flattened map
-    const traverseAndMap = (tags: any[]) => {
-      if (!Array.isArray(tags)) return;
-
-      tags.forEach((tag) => {
-        if (tag.machineName && tag.appIcon) {
-          flattenedMap[tag.machineName] = tag.appIcon;
-        }
-        // Recursively traverse nested tags
-        if (tag.tags && Array.isArray(tag.tags)) {
-          traverseAndMap(tag.tags);
-        }
-      });
-    };
-
-    // Traverse all categories in tagsTree
-    for (const categoryKey in tagsTree) {
-      const category = tagsTree[categoryKey];
-      if (category.tags && Array.isArray(category.tags)) {
-        traverseAndMap(category.tags);
-      }
-    }
-
-    appIconMapRef.current = flattenedMap;
-  }, [tagsTree]);
-
-  // Helper function to get appIcon from precomputed map
-  const getAppIconFromMap = (stepName: string): string | null => {
-    return appIconMapRef.current[stepName] || null;
-  };
-
-  useEffect(() => {
-    const textfield = inputRef.current;
-    const scalarValue = Array.isArray(value) ? value[0] : value;
-    if (textfield && (activityOutputDataRaw.length || tagsTree !== null)) {
-      const el: any = document.getElementById(`tagify_${fieldId}`);
-      if (el && el.dataset.tagifyFieldId !== fieldId) {
-        el.value = getDefaultTagifyValue(value || '');
-        el.dataset.tagifyFieldId = fieldId;
-      }
-      if (el && !el.__tagify) {
-        var tagify = new Tagify(el, {
-          mode: 'mix',
-          duplicates: true,
-          editTags: false,
-          trim: false,
-          tagTextProp: 'text',
-          templates: {
-            tag: tagTemplate,
-          },
-          userInput: allowTagsInText || !isMappable ? true : false,
-        });
-        tagify
-          .on('focus', handleFieldFocus)
-          .on('blur', handleFieldBlur)
-          .on('remove', handleOnTagRemove)
-          .on('change', handleOnTagRemove);
-        setTagify(tagify);
-
-        tagify.on('click', (e: any) => {
-          const tagData = e.detail.data;
-          if (!tagData?.appIcon) {
-            return; // Ignore clicks on tags without appIcon
-          }
-          const tagElm = e.detail.tag;
-
-          // Remove the tag
-          tagify.removeTag(tagElm);
-
-          // Place caret after the removed tag
-          const selection = window.getSelection();
-          const range = document.createRange();
-
-          // Insert editable text node (without appIcon in the text)
-          const editableText = document.createTextNode(`{${tagData.value}} `);
-
-          // Insert text after the removed tag
-          tagElm.parentNode.insertBefore(editableText, tagElm.nextSibling);
-
-          // Move caret to end of inserted text
-          range.setStart(editableText, editableText.length);
-          range.setEnd(editableText, editableText.length);
-          selection?.removeAllRanges();
-          selection?.addRange(range);
-
-          // Optional: trigger input event so Tagify re-parses
-          tagify.DOM.input.dispatchEvent(new Event('input'));
-        });
-
-        tagify.on('keydown', (e: any) => {
-          if (
-            e?.detail?.event?.code === 'Enter' &&
-            tagsTree &&
-            type === 'TEXTAREA'
-          ) {
-            e.preventDefault();
-            document.execCommand('insertHTML', false, '<br><br>');
-            return false;
-          }
-        });
-      }
-    } else if (
-      textfield &&
-      !activityOutputDataRaw.length &&
-      !scalarValue?.startsWith('{') &&
-      !scalarValue?.endsWith('}')
-    ) {
-      const el: any = document.getElementById(`tagify_${fieldId}`);
-      if (el && el.dataset.tagifyFieldId !== fieldId) {
-        el.value = getDefaultTagifyValue(scalarValue || '');
-        el.dataset.tagifyFieldId = fieldId;
-      }
-    }
-  }, [activityOutputDataRaw]);
-
-  const handleTagInputChanged = (e: any) => {
-    const textField = inputRef.current;
-    if (textField) {
-      const oldValue = textField.value;
-      let newValue = oldValue;
-      if (removeWhitespace(oldValue).length === 0) {
-        newValue = '';
-      }
-      if (e.detail.textContent.length === 0) {
-        newValue = '';
-      }
-      setCurrentValue(newValue);
-      setNewValue(newValue);
-      if (onChange) onChange(newValue, true);
-    }
-  };
-  const handleOnTagRemove = (e: any) => {
-    const el: any = document.getElementById(`tagify_${fieldId}`);
-
-    let newValue = el.__tagify.DOM.input.innerText;
-
-    // Process tags being removed
-    el.__tagify.value.forEach((tag: any) => {
-      newValue = newValue
-        .replace(tag.text, `{${tag.value}}`)
-        .replace('Step: ', '')
-        .replace('User variable: ', '')
-        .replace('Setup form: ', '');
-    });
-
-    newValue = newValue.trim();
-    // remove zero width space
-    newValue = newValue.replace(/\u200B/g, '');
-    if (removeWhitespace(newValue).length === 0) {
-      el.value = '';
-      newValue = '';
-    }
-    newValue = newValue.replace(/<br>/g, '\n'); // replace <br> with newlines
-    newValue = newValue.replace(/\n{/g, '{').replace(/}\n/g, '}'); // remove \n before and after tags
-
-    setCurrentValue(newValue);
-    if (onChange) onChange(newValue, true);
-  };
-  //write a function that removes all whitespaces including \s, \u200b, \u00A0
-  const removeWhitespace = (str: string) => {
-    return str
-      .replace(/\s/g, '')
-      .replace(/\u200b/g, '')
-      .replace(/\u00A0/g, '');
-  };
-
-  const capitalize = (text: string) => {
-    if (!text) return '';
-    return text.charAt(0).toUpperCase() + text.slice(1);
-  };
-
-  const tagTemplate = (tagData: any) => {
-    if (tagData.appIcon) {
-      const origin = tagData.value.split('.')[0];
-      let originText = capitalize(origin);
-      switch (origin) {
-        case 'steps':
-          originText = 'Step';
-          break;
-        case 'storage':
-          originText = 'User variable';
-          break;
-        case 'setup_form':
-          originText = 'Setup form';
-          break;
-        default:
-          originText = capitalize(origin);
-      }
-      return `
-        <tag
-                contenteditable='false'
-                spellcheck='false'
-                tabIndex="-1"
-                class="tagify__tag ${tagData.class ? tagData.class : ''}"
-            >
-            <div class="${styles.tagifyTagTemplate}">
-            <img class="${styles.tagifyAppIcon}" src="${
-        tagData.appIcon
-      }" alt="" />
-              <span data-hint="${
-                typeof tagData.title === 'string' ? tagData.title : ''
-              }" class='tagify__tag-text'>${originText}: ${tagData.text}</span>
-            </div>
-        </tag>`;
-    }
-    return `
-        <tag
-                contenteditable='false'
-                spellcheck='false'
-                tabIndex="-1"
-                class="tagify__tag ${tagData.class ? tagData.class : ''}"
-            >
-            <x title='' class='tagify__tag__removeBtn' role='button' aria-label='remove tag'></x>
-            <div>
-              <span data-hint="${
-                typeof tagData.title === 'string' ? tagData.title : ''
-              }" class='tagify__tag-text'>${tagData.text}</span>
-            </div>
-        </tag>`;
-  };
-
-  useEffect(() => {
-    if (value && !isArray) {
-      handleOnChange(value, true);
-    }
-  }, [fieldId]);
-
-  // Returns all those strings which are enclosed in curly braces {}
-  const getTags = (str: string) => {
-    if (typeof str !== 'string') {
-      return [];
-    }
-    return str.match(/{[^{}"'<>:]+}/g) || [];
-  };
-
-  const checkIfTagExists = (AOUElement: string, tagValue: string) => {
-    if (tagValue.includes('out.')) {
-      const tagValuePart = tagValue.split('out.')[1];
-
-      return AOUElement.endsWith(tagValuePart);
-    }
-    return false;
-  };
-
-  const getDefaultTagifyValue = (value: any) => {
-    const tags = getTags(value || '');
-
-    if (tags && tags.length > 0) {
-      let newValue = value;
-
-      if (type === 'TEXTAREA') {
-        newValue = newValue.replace(/\n/g, '<br>');
-      }
-
-      tags.forEach((tag) => {
-        const tagValue = tag.replace(/{|}/g, '');
-        const tagValueParts = tagValue.split('.');
-
-        let tagData = (activityOutputDataRaw || []).find((element: any) => {
-          return (
-            element.value === tagValue ||
-            checkIfTagExists(element.value, tagValue)
-          );
-        }) || {
-          value: tagValue,
-          text:
-            tagValueParts.length > 0
-              ? prettifyString(tagValueParts[tagValueParts.length - 1])
-              : tagValue,
-          title: tagValue,
-        };
-
-        // Try to get appIcon from tagsTree based on step name
-        const stepName = getStepNameFromValue(tagValue);
-        const appIconFromTree = stepName ? getAppIconFromMap(stepName) : null;
-
-        if (appIconFromTree) {
-          tagData.appIcon = appIconFromTree;
-        }
-
-        if (tagsTree) {
-          tagData = {
-            value: tagValue,
-            text:
-              tagValueParts.length > 0
-                ? prettifyString(tagValueParts[tagValueParts.length - 1])
-                : tagValue,
-            title: tagValue,
-            ...(appIconFromTree && { appIcon: appIconFromTree }),
-          };
-        }
-
-        if (tagData) {
-          // Include appIcon in the JSON if it exists
-          const tagDataForJson = {
-            value: tagData.value,
-            text: tagData.text,
-            title: getTagData(tagData.text),
-            ...(tagData.appIcon && { appIcon: tagData.appIcon }),
-          };
-
-          newValue = newValue?.replace(
-            tag,
-            `[[${JSON.stringify(tagDataForJson)}]]`,
-          );
-        }
-      });
-
-      return newValue;
-    }
-
-    return value;
-  };
-
-  useOnClickOutside(menuRef, (e) => {
-    const clickedElement = e.target as HTMLElement;
-
-    if (
-      (clickedElement.tagName === 'INPUT' ||
-        clickedElement.tagName === 'TEXTAREA') &&
-      inputRef.current &&
-      inputRef.current.contains(e.target as Node)
-    )
-      return;
-    setTempPlaceholder('');
-    setSearchValue('');
-    setShowTagMenu(false);
-  });
-
-  const removeSpecificString = (
-    str: string,
-    specificString: string,
-  ): string => {
-    let tempStr = str;
-    if (tempStr.endsWith(specificString)) {
-      tempStr = tempStr.slice(0, -specificString.length);
-    }
-
-    return tempStr;
-  };
-
-  const getTagData = (tag: string) => {
-    if (tag.includes('.')) {
-      const tagParts = tag.split('.');
-      let tagValue: any = activityOutputData;
-      tagParts.forEach((tagPart) => {
-        if (tagValue[tagPart]) {
-          tagValue = tagValue[tagPart];
-        }
-      });
-      return tagValue;
-    }
-    return activityOutputData[tag] || '';
-  };
-
-  const prettifyString = (str: string) => {
-    return str
-      .replace(/_/g, ' ') // Replace underscores with spaces
-      .replace(/\b\w/g, (c) => c.toUpperCase()); // Capitalize first letter of each word
-  };
-
-  const insertTag = (tag: string | any) => {
-    let result = activityOutputDataRaw.find((element: any) => {
-      return element.text === tag;
-    });
-    let isStandardTag = true;
-    if (
-      !result &&
-      tag.hasOwnProperty('value') &&
-      tag.hasOwnProperty('key') &&
-      tag.hasOwnProperty('currentPath')
-    ) {
-      result = {
-        value: tag.currentPath,
-        text: tag.key,
-        title: tag.value,
-        appIcon: tag.parentAppIcon,
-      };
-      isStandardTag = false; // This tag is coming from TagsMenu component
-    }
-    if (tagify) {
-      var tagElm = tagify.createTagElem({
-        value: result.value,
-        text: isStandardTag ? result.text : prettifyString(result.text),
-        title: isStandardTag ? getTagData(tag) : result.title,
-        appIcon: result.appIcon,
-        editable: false,
-      });
-      tagify.injectAtCaret(tagElm);
-      if (allowTagsInText) {
-        var elm = tagify.insertAfterTag(tagElm, ''); //  <- adds space after the tag
-        tagify.placeCaretAfterNode(elm);
-      }
-    }
-  };
-
-  const onTagClick = (tag: string | any) => {
-    if (tagify) {
-      if (!allowTagsInText) {
-        tagify.removeAllTags();
-        setShowTagMenu(false);
-      }
-      insertTag(tag);
-      let newValue = tagify.DOM.input.textContent;
-      tagify.value.forEach((tag: any) => {
-        newValue = (newValue || '').replace(tag.text, `{${tag.value}}`);
-      });
-      newValue = (newValue || '').trim();
-    }
-
-    setCurrentValue(newValue);
-    if (onChange) onChange(newValue || '', true);
-  };
-
-  const onSelect = (option: string) => {
-    const textField = inputRef.current;
-    let newValue = `{${option}}`;
-    setTempPlaceholder('');
-
-    // 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) {
-      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 =
-          searchValue !== ''
-            ? removeSpecificString(textField.value || '', searchValue)
-            : 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 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
-    setCurrentValue(newValue);
-    if (showTagMenu && !isEditable) {
-      setShowTagMenu(false);
-    }
-    setSearchValue('');
-    if (onChange) onChange(newValue, true);
-  };
-
-  const handleFieldFocus = (e: any) => {
-    // open tag menu
-    if (isMappable) {
-      setShowTagMenu(true);
-    }
-    // if allowTagsInText is false, then make current value as temp placeholder to fade it out when user starts typing
-    // current valus is tag when it starts with { and ends with }
-    const vallueToUse = Array.isArray(currentValue)
-      ? currentValue[0]
-      : currentValue;
-    const isTag =
-      typeof vallueToUse === 'string'
-        ? vallueToUse?.startsWith('{') && vallueToUse?.endsWith('}')
-        : false;
-    if (isEditable && !allowTagsInText && isMappable && isTag) {
-      setTempPlaceholder(vallueToUse || '');
-    }
-  };
-
-  const handleFieldBlur = (e: any) => {
-    const el: any = document.getElementById(`tagify_${fieldId}`);
-    const currentTagifyValue = getDefaultTagifyValue(el.value || '');
-    el.value = currentTagifyValue;
-  };
-
-  const getStringFromEnd = (str: string): string => {
-    // eslint-disable-next-line @typescript-eslint/no-shadow
-    const regex = /\{([^{}]+)$/;
-    const matches = typeof str === 'string' ? (str || '').match(regex) : [];
-
-    if (matches && matches.length > 1) {
-      const capturedString = matches[0];
-      return capturedString;
-    }
-    return '';
-  };
-  const handleOnSearch = (val: string) => {
-    setTempPlaceholder(``);
-    const tempSearchValue =
-      showTagMenu && !isEditable ? val.trim() : getStringFromEnd(val);
-    if (val !== '') {
-      setSearchValue(tempSearchValue);
-    } else {
-      setSearchValue('');
-    }
-  };
-  const handleOnChange = (val: string, passedReg: boolean, index?: number) => {
-    setTempPlaceholder('');
-    setCurrentValue(val);
-    if (onChange) onChange(val, passedReg);
-    let valueToUse = index !== undefined ? val[index] : val;
-    if (index === undefined && Array.isArray(valueToUse)) {
-      valueToUse = valueToUse[valueToUse.length - 1];
-    }
-    const tempSearchValue = getStringFromEnd(valueToUse);
-    if (valueToUse !== '') {
-      setSearchValue(tempSearchValue);
-    } else {
-      setSearchValue('');
-    }
-  };
-
-  return html`
-    <div class="${styles.multipurposeFieldContainer}">
-      <div class="${styles.multipurposeField}">
-        ${type === 'TEXTAREA'
-          ? html`
-              ${enableTagify && isMappable && !isDisabled
-                ? html`
-                    <${TextArea}
-                      id="tagify_${fieldId}"
-                      title=${title}
-                      description=${description}
-                      placeholder="${showTagMenu && !isEditable
-                        ? currentValue
-                        : tempPlaceholder || placeholder}"
-                      regex=${regex}
-                      regexErrorMessage=${regexErrorMessage}
-                      showStepValidation="${showStepValidation && !showTagMenu}"
-                      isRequired=${isRequired}
-                      onFocus=${handleFieldFocus}
-                      onChange="${showTagMenu && !isEditable
-                        ? handleOnSearch
-                        : handleOnChange}"
-                      isChanged="${isChanged}"
-                      ref=${inputRef}
-                      isEditable="${isEditable || showTagMenu}"
-                      isHidden=${isHidden}
-                      fieldId=${fieldId}
-                      labelTags=${labelTags}
-                    />
-                    <div style="display:none">
-                      <${TextArea}
-                        id="${fieldId}"
-                        title=${title}
-                        description=${description}
-                        placeholder="${showTagMenu && !isEditable
-                          ? currentValue
-                          : tempPlaceholder || placeholder}"
-                        value="${showTagMenu && !isEditable
-                          ? searchValue
-                          : tempPlaceholder
-                          ? ''
-                          : currentValue}"
-                        regex=${regex}
-                        regexErrorMessage=${regexErrorMessage}
-                        showStepValidation="${showStepValidation &&
-                        !showTagMenu}"
-                        isRequired=${isRequired}
-                        onFocus=${handleFieldFocus}
-                        onChange="${showTagMenu && !isEditable
-                          ? handleOnSearch
-                          : handleOnChange}"
-                        isChanged="${isChanged}"
-                        ref=${inputRef}
-                        isEditable="${isEditable || showTagMenu}"
-                        isHidden=${isHidden}
-                        fieldId=${fieldId}
-                        labelTags=${labelTags}
-                      />
-                    </div>
-                  `
-                : html`
-                    <${TextArea}
-                      id="${fieldId}"
-                      title=${title}
-                      description=${description}
-                      placeholder="${showTagMenu && !isEditable
-                        ? currentValue
-                        : tempPlaceholder || placeholder}"
-                      value="${showTagMenu && !isEditable
-                        ? searchValue
-                        : tempPlaceholder
-                        ? ''
-                        : currentValue}"
-                      regex=${regex}
-                      regexErrorMessage=${regexErrorMessage}
-                      showStepValidation="${showStepValidation && !showTagMenu}"
-                      isRequired=${isRequired}
-                      onFocus=${handleFieldFocus}
-                      onChange="${showTagMenu && !isEditable
-                        ? handleOnSearch
-                        : handleOnChange}"
-                      isChanged="${isChanged}"
-                      ref=${inputRef}
-                      isEditable="${isEditable || showTagMenu}"
-                      isHidden=${isHidden}
-                      fieldId=${fieldId}
-                      labelTags=${labelTags}
-                      isReadOnly=${isDisabled}
-                    />
-                  `}
-            `
-          : html`
-              ${enableTagify && isMappable && !isDisabled
-                ? html`
-                    <${Input}
-                      id="tagify_${fieldId}"
-                      title="${title}"
-                      description="${description}"
-                      placeholder="${showTagMenu && !isEditable
-                        ? currentValue
-                        : tempPlaceholder || placeholder}"
-                      regex="${regex}"
-                      regexErrorMessage="${regexErrorMessage}"
-                      isRequired="${isRequired}"
-                      showStepValidation="${showStepValidation && !showTagMenu}"
-                      handleFocus=${handleFieldFocus}
-                      onChange="${showTagMenu && !isEditable
-                        ? handleOnSearch
-                        : handleOnChange}"
-                      isEditable="${isEditable || showTagMenu}"
-                      isHidden="${isHidden}"
-                      isChanged=${isChanged}
-                      className="${className}"
-                      ref=${inputRef}
-                      fieldId=${fieldId}
-                      labelTags=${labelTags}
-                      hideError=${false}
-                      isArray=${isArray}
-                      isButtonEnabled=${isButtonEnabled}
-                      buttonText=${buttonText}
-                      onButtonClickScript=${onButtonClickScript}
-                      buttonScriptRequiresAuthToken=${buttonScriptRequiresAuthToken}
-                      apiHandler=${props.apiHandler}
-                      ...${isArray
-                        ? {
-                            value:
-                              showTagMenu && !isEditable
-                                ? searchValue
-                                : tempPlaceholder
-                                ? ''
-                                : currentValue,
-                          }
-                        : {}}
-                    />
-                    <div style="display:none">
-                      <${Input}
-                        id="${fieldId}"
-                        title="${title}"
-                        description="${description}"
-                        placeholder="${showTagMenu && !isEditable
-                          ? currentValue
-                          : tempPlaceholder || placeholder}"
-                        value="${showTagMenu && !isEditable
-                          ? searchValue
-                          : tempPlaceholder
-                          ? ''
-                          : currentValue}"
-                        regex="${regex}"
-                        regexErrorMessage="${regexErrorMessage}"
-                        isRequired="${isRequired}"
-                        showStepValidation="${showStepValidation &&
-                        !showTagMenu}"
-                        handleFocus=${handleFieldFocus}
-                        onChange="${showTagMenu && !isEditable
-                          ? handleOnSearch
-                          : handleOnChange}"
-                        isEditable="${isEditable || showTagMenu}"
-                        isHidden="${isHidden}"
-                        isChanged=${isChanged}
-                        className="${className}"
-                        ref=${inputRef}
-                        fieldId=${fieldId}
-                        labelTags=${labelTags}
-                        hideError=${false}
-                        isArray=${isArray}
-                      />
-                    </div>
-                  `
-                : html`
-                    <${Input}
-                      id="${fieldId}"
-                      title="${title}"
-                      description="${description}"
-                      placeholder="${showTagMenu && !isEditable
-                        ? currentValue
-                        : tempPlaceholder || placeholder}"
-                      value="${showTagMenu && !isEditable
-                        ? searchValue
-                        : tempPlaceholder
-                        ? ''
-                        : currentValue}"
-                      regex="${regex}"
-                      regexErrorMessage="${regexErrorMessage}"
-                      isRequired="${isRequired}"
-                      showStepValidation="${showStepValidation && !showTagMenu}"
-                      handleFocus=${handleFieldFocus}
-                      onChange="${showTagMenu && !isEditable
-                        ? handleOnSearch
-                        : handleOnChange}"
-                      isEditable="${isEditable || showTagMenu}"
-                      isHidden="${isHidden}"
-                      isChanged=${isChanged}
-                      className="${className}"
-                      ref=${inputRef}
-                      fieldId=${fieldId}
-                      labelTags=${labelTags}
-                      hideError=${false}
-                      isArray=${isArray}
-                      isButtonEnabled=${isButtonEnabled}
-                      buttonText=${buttonText}
-                      onButtonClickScript=${onButtonClickScript}
-                      buttonScriptRequiresAuthToken=${buttonScriptRequiresAuthToken}
-                      apiHandler=${props.apiHandler}
-                      isReadOnly=${isDisabled}
-                    />
-                  `}
-            `}
-      </div>
-      <div>
-        ${showTagMenu &&
-        (isMappable || allowTagsInText) &&
-        html` <div
-          ref=${menuRef}
-          className=${`${type.toLocaleLowerCase()}_tags_dropdown`}
-        >
-          <${FieldDropdown}
-            tags=${activityOutputData}
-            onTagClick=${enableTagify && isMappable ? onTagClick : onSelect}
-            hideTabs=${true}
-            fieldId=${fieldId}
-            value=${currentValue}
-            enableSearch=${Object.keys(activityOutputData).length > 0
-              ? true
-              : false}
-            refreshRootStepData=${refreshRootStepData}
-            tagsComponent=${tagsComponent}
-            tagsTree=${tagsTree}
-            showMenuOnLeft=${showMenuOnLeft}
-          />
-        </div>`}
-      </div>
-    </div>
-  `;
-};
-
-export { MultipurposeField, MultipurposeFieldProps };