@integration-app/react 2.0.3-beta.0 → 2.0.3-beta.2

package/dist/esm/components/ComboBox/Dropdown/Tabs/LookupOptions/index.mjs

@@ -0,0 +1,245 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import { getReferenceCollectionPointerForSchema, getMissingRequiredFields, extractIntegrationAppErrorData } from '@integration-app/sdk';
+import { DropdownUI } from '../../../../DropdownUI/index.mjs';
+import { useIntegrationAppClient } from '../../../../../contexts/integration-app-client-context.mjs';
+import { useIntegrationAppConnection } from '../../../../../contexts/integration-app-connection-context.mjs';
+import { useComboBox } from '../../../context/combobox-context.mjs';
+import { useComboBoxDropdownSearchContext } from '../../../context/combobox-dropdown-search.mjs';
+import { OptionsParametersRequired } from './OptionsList.mjs';
+import { SvgIcon, SvgIconType } from '../../../../SvgIcon/index.mjs';
+import { useDataCollectionSpec } from '../../../../../hooks/data-collections/useDataCollectionSpec.mjs';
+import { useIntegrationAppIntegration } from '../../../../../contexts/integration-app-integration-context.mjs';
+import { filterOptionsByLabel } from '../../../options-factories/base.mjs';
+import { useComboBoxDropdownContext } from '../../../context/combobox-dropdown-context.mjs';
+import { useKeyboardEventSubscribe, EVENT_TYPE } from '../../../../../hooks/keyboard-events.mjs';
+import deepEqual from 'fast-deep-equal';
+import { useDeepEffect } from '../../../../../hooks/useDeepEffect.mjs';
+import ComboBoxOption from '../../Option.mjs';
+import { ParametersPanel } from './ParametersPanel.mjs';
+import { v4 } from 'uuid';
+import { ItemTitle } from '../../../../DropdownUI/DropdownUIElements.mjs';
+
+function LookupOptionsTab({ onSelect }) {
+  const [options, setOptions] = useState([]);
+  const [loadingOptions, setLoadingOptions] = useState(true);
+  const [additionalMessage, setAdditionalMessage] = useState("");
+  const [error, setError] = useState();
+  const { searchValue } = useComboBoxDropdownSearchContext();
+  const [parametersValue, setParametersValue] = useState({});
+  const { schema } = useComboBox();
+  const pointer = getReferenceCollectionPointerForSchema(schema);
+  const { client } = useIntegrationAppClient();
+  const { connectionId } = useIntegrationAppConnection();
+  const { integrationId } = useIntegrationAppIntegration();
+  const currentLoadOptionsId = useRef("");
+  const referenceCollectionSpec = useDataCollectionSpec({
+    key: pointer?.key,
+    integrationId
+  });
+  useEffect(() => {
+    if (pointer?.parameters) {
+      setParametersValue(pointer.parameters);
+    }
+  }, [JSON.stringify(pointer)]);
+  useEffect(() => {
+    if (schema && connectionId) {
+      void loadOptions();
+    }
+  }, [
+    connectionId,
+    JSON.stringify(schema),
+    JSON.stringify(parametersValue),
+    JSON.stringify(referenceCollectionSpec)
+  ]);
+  if (!schema) return null;
+  const hasParameters = Object.keys(referenceCollectionSpec?.parametersSchema?.properties ?? {}).length > 0;
+  const hasMissingParameters = getMissingRequiredFields(
+    referenceCollectionSpec?.parametersSchema,
+    parametersValue
+  )?.length > 0;
+  async function loadOptions() {
+    const loadOptionsId = v4();
+    currentLoadOptionsId.current = loadOptionsId;
+    setLoadingOptions(true);
+    setError(void 0);
+    setAdditionalMessage("");
+    if (hasMissingParameters) return;
+    try {
+      if (!connectionId) {
+        throw new Error("No connection provided. Cannot load options.");
+      }
+      if (!referenceCollectionSpec || !pointer) {
+        setOptions([]);
+        return;
+      }
+      const connectionAccessor = client.connection(connectionId);
+      let response;
+      const collectionAccessor = await connectionAccessor.dataCollection(
+        pointer?.key,
+        parametersValue
+      );
+      if (referenceCollectionSpec?.list) {
+        response = await collectionAccessor.list();
+      } else {
+        throw new Error(
+          `Collection ${referenceCollectionSpec.key} does not support listing options.`
+        );
+      }
+      if (currentLoadOptionsId.current === loadOptionsId) {
+        const options2 = response.records.map((record) => {
+          return {
+            label: record.name ?? record.id,
+            value: record.id
+          };
+        });
+        if (response.cursor) {
+          setAdditionalMessage(
+            `Only the first ${options2.length} options are loaded. If your option is not in the list, please type its ID manually.`
+          );
+        }
+        setOptions(options2);
+      }
+    } catch (e) {
+      if (currentLoadOptionsId.current === loadOptionsId) {
+        setError(extractIntegrationAppErrorData(e));
+      }
+    } finally {
+      if (currentLoadOptionsId.current === loadOptionsId) {
+        setLoadingOptions(false);
+      }
+    }
+  }
+  const filteredOptoins = filterOptionsByLabel(options, searchValue);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    hasParameters && /* @__PURE__ */ jsx(
+      ParametersPanel,
+      {
+        onChange: setParametersValue,
+        schema: referenceCollectionSpec?.parametersSchema,
+        value: parametersValue
+      }
+    ),
+    /* @__PURE__ */ jsx(DropdownUI.Panel, { children: !hasMissingParameters ? loadingOptions ? /* @__PURE__ */ jsx(DropdownUI.LoadingPanel, { children: "Loading list of options..." }) : error ? /* @__PURE__ */ jsx(DropdownUI.ErrorPanel, { children: error?.message || "Something went wrong" }) : /* @__PURE__ */ jsxs(DropdownUI.List, { children: [
+      /* @__PURE__ */ jsx(DropdownUI.Panel, { className: "flex-grow overflow-y-auto", children: /* @__PURE__ */ jsx(
+        OptionsList,
+        {
+          options: filteredOptoins,
+          onSelect: (value) => onSelect(value?.value)
+        }
+      ) }),
+      additionalMessage && /* @__PURE__ */ jsx(DropdownUI.Panel, { children: /* @__PURE__ */ jsxs("div", { className: "p-4 text-warning flex gap-2 items-center", children: [
+        /* @__PURE__ */ jsx(SvgIcon, { type: SvgIconType.AlertCircle }),
+        " ",
+        additionalMessage
+      ] }) })
+    ] }) : /* @__PURE__ */ jsx(OptionsParametersRequired, {}) })
+  ] });
+}
+function OptionsList({
+  options,
+  onSelect
+}) {
+  const { isOptionSelected } = useComboBoxDropdownContext();
+  const [currentOption, setCurrentOption] = useState(null);
+  useKeyboardEventSubscribe(EVENT_TYPE.OPTION_DOWN, makePreviousOptionCurrent);
+  useKeyboardEventSubscribe(EVENT_TYPE.OPTION_UP, makeNextOptionCurrent);
+  useKeyboardEventSubscribe(EVENT_TYPE.OPTION_SELECT, handleKeyEnter);
+  useDeepEffect(() => {
+    if (!options?.length) {
+      return;
+    }
+    if (!currentOption || getOptionIndex(currentOption) == -1) {
+      const selectedOption = options.find(isOptionSelected);
+      if (selectedOption) {
+        setCurrentOption(selectedOption);
+      }
+    }
+  }, [options]);
+  const makeOptionComparable = (option) => {
+    return option && {
+      ...option,
+      label: option.searchLabel ?? option.label?.toString()
+    };
+  };
+  function getOptionIndex(option) {
+    return options.findIndex(
+      (o) => deepEqual(makeOptionComparable(o), makeOptionComparable(option))
+    );
+  }
+  function makeNextOptionCurrent() {
+    let idx = getOptionIndex(currentOption);
+    while (idx < options.length - 1) {
+      idx += 1;
+      const currentOption2 = options[idx];
+      if (optionCanBeSelected(currentOption2)) {
+        setCurrentOption(currentOption2);
+        break;
+      }
+    }
+  }
+  function makePreviousOptionCurrent() {
+    let idx = getOptionIndex(currentOption);
+    while (idx > 0) {
+      idx -= 1;
+      const currentOption2 = options[idx];
+      if (optionCanBeSelected(currentOption2)) {
+        setCurrentOption(currentOption2);
+        break;
+      }
+    }
+  }
+  function optionCanBeSelected(option) {
+    return !option.isSection;
+  }
+  function handleKeyEnter() {
+    if (currentOption) {
+      handleOptionSelect(currentOption);
+    }
+  }
+  function handleOptionSelect(option) {
+    onSelect(option);
+  }
+  return /* @__PURE__ */ jsx(DropdownUI.List, { children: /* @__PURE__ */ jsx(
+    DropdownListOptions,
+    {
+      options,
+      currentOption,
+      isOptionSelected,
+      handleOptionSelect
+    }
+  ) });
+}
+function DropdownListOptions({
+  options,
+  currentOption,
+  isOptionSelected,
+  handleOptionSelect
+}) {
+  if (!options) {
+    return null;
+  }
+  if (options.length === 0) {
+    return /* @__PURE__ */ jsx(DropdownUI.Item, { readonly: true, children: /* @__PURE__ */ jsx(ItemTitle, { children: "No results found" }) });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: options.map((option, idx) => /* @__PURE__ */ jsx(
+    ComboBoxOption,
+    {
+      option,
+      selected: isOptionSelected(option),
+      current: deepEqual(option, currentOption),
+      onSelect: () => handleOptionSelect(option)
+    },
+    idx
+  )) });
+}
+
+export { LookupOptionsTab };

package/dist/esm/components/ComboBox/Dropdown/Tabs/Options.mjs

@@ -0,0 +1,17 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { DropdownUI } from '../../../DropdownUI/index.mjs';
+import { OptionsList } from '../OptionsList.mjs';
+
+function OptionsTab({ onSelect }) {
+  return /* @__PURE__ */ jsx(DropdownUI.Panel, { children: /* @__PURE__ */ jsx(OptionsList, { onSelect }) });
+}
+
+export { OptionsTab };

package/dist/esm/components/ComboBox/Dropdown/Tabs/Variables.mjs

@@ -0,0 +1,17 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { DropdownUI } from '../../../DropdownUI/index.mjs';
+import { OptionsList } from '../OptionsList.mjs';
+
+function VariablesTab({ onSelect }) {
+  return /* @__PURE__ */ jsx(DropdownUI.Panel, { children: /* @__PURE__ */ jsx(OptionsList, { onSelect }) });
+}
+
+export { VariablesTab };

package/dist/esm/components/ComboBox/Dropdown/tabs.mjs

@@ -0,0 +1,72 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { SvgIconType } from '../../SvgIcon/index.mjs';
+import { ComboBoxTabType } from '../types.mjs';
+import { OptionsTab } from './Tabs/Options.mjs';
+import { VariablesTab } from './Tabs/Variables.mjs';
+import { FormulasTab } from './Tabs/Formulas/index.mjs';
+import { CustomValueTab } from './Tabs/CustomValue.mjs';
+import { LookupOptionsTab } from './Tabs/LookupOptions/index.mjs';
+import { LookupTab } from './Tabs/Lookup.mjs';
+
+const renderTabs = {
+  [ComboBoxTabType.CUSTOM]: {
+    title: "Custom Value",
+    showIfSingle: true,
+    hideSearchInput: true
+  },
+  [ComboBoxTabType.VARIABLE]: {
+    title: "Variable",
+    icon: SvgIconType.Variable,
+    showIfSingle: true
+  },
+  [ComboBoxTabType.OPTIONS]: {
+    title: "Option"
+  },
+  [ComboBoxTabType.FORMULA]: {
+    title: "Formula",
+    showIfSingle: true,
+    hideSearchInput: true
+  },
+  [ComboBoxTabType.LOOKUP_OPTIONS]: {
+    title: "Option",
+    showIfSingle: true,
+    hideSearchInput: false
+  },
+  [ComboBoxTabType.SELECT_FROM_UDM_DYNAMICALLY]: {
+    title: "Select Dynamically",
+    showIfSingle: true,
+    hideSearchInput: true
+  },
+  [ComboBoxTabType.SELECT_FROM_COLLECTION_DYNAMICALLY]: {
+    title: "Select Dynamically",
+    showIfSingle: true,
+    hideSearchInput: true
+  }
+};
+const TAB_COMPONENTS = {
+  [ComboBoxTabType.OPTIONS]: OptionsTab,
+  [ComboBoxTabType.VARIABLE]: VariablesTab,
+  [ComboBoxTabType.FORMULA]: FormulasTab,
+  [ComboBoxTabType.CUSTOM]: CustomValueTab,
+  [ComboBoxTabType.SELECT_FROM_UDM_DYNAMICALLY]: LookupTab,
+  [ComboBoxTabType.SELECT_FROM_COLLECTION_DYNAMICALLY]: LookupTab,
+  [ComboBoxTabType.LOOKUP_OPTIONS]: LookupOptionsTab
+  //   [TabType.OPTIONS]: OptionsTab,
+  //   [TabType.VARIABLES]: VariablesTab,
+  //   [TabType.FORMULAS]: FormulasTab,
+  //   [TabType.OPTIONS_ENUM]: OptionsEnumTab,
+  //   [TabType.OPTIONS_REF_RECORDS]: OptionsRefRecordsTab,
+  //   [TabType.OPTIONS_REF_COLLECTION]: OptionsRefCollectionTab,
+  //   [TabType.OPTIONS_BOOLEAN]: BooleanTab,
+  //   [TabType.CUSTOM_OBJECT]: CustomObjectTab,
+  //   [TabType.CUSTOM_LIST]: CustomListTab,
+};
+
+export { TAB_COMPONENTS, renderTabs };

package/dist/esm/components/ComboBox/Edit/OptionSelector.mjs

@@ -0,0 +1,160 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { forwardRef, useRef } from 'react';
+import '../../ComboBoxElements/TipTapEditor/Editor.mjs';
+import '../../ComboBoxElements/TipTapEditor/EditorStandAlone.mjs';
+import '../../ComboBoxElements/TipTapEditor/TagComponent.mjs';
+import '../../SvgIcon/index.mjs';
+import '@integration-app/sdk';
+import 'fuse';
+import { isClickOnEditorComponent } from '../../ComboBoxElements/TipTapEditor/helpers/clicks.mjs';
+import { ActionBar } from '../../DataBuilderUI/index.mjs';
+import { getRefElement } from '../../../helpers/getRefElement.mjs';
+import classes from './OptionSelector.module.css.mjs';
+import { ComboBoxTabType } from '../types.mjs';
+import { Dropdown } from '../Dropdown/Dropdown.mjs';
+import '../../DropdownUI/index.mjs';
+import '../context/combobox-dropdown-search.mjs';
+import { useComboBoxDropdownContext } from '../context/combobox-dropdown-context.mjs';
+import '../Dropdown/tabs.mjs';
+import { useComboBox } from '../context/combobox-context.mjs';
+import { FieldWrapper } from '../../ComboBoxElements/FieldWrapper.mjs';
+import { ComboBoxValue } from '../Value/index.mjs';
+import { isDefinedValue } from '../Value/Schema.mjs';
+
+function OptionSelector({
+  placeholder,
+  className,
+  onChange,
+  disabled,
+  required,
+  valueComponent
+}) {
+  const valueRef = useRef(null);
+  const fieldValueRef = useRef(null);
+  const dropdownRef = useRef(null);
+  const {
+    value,
+    refsToIgnoreClick,
+    // Dropdown related
+    isDropdownOpen,
+    openDropdown,
+    closeDropdown,
+    topDropdownPanelComponent
+  } = useComboBox();
+  const { activeTab } = useComboBoxDropdownContext();
+  function handleOpenDropdown() {
+    if (disabled) return;
+    openDropdown();
+  }
+  function handleCloseDropdown() {
+    closeDropdown();
+  }
+  const refs = [valueRef, fieldValueRef, ...refsToIgnoreClick ?? []];
+  const handleClick = function handleClick2(e) {
+    const isClickInsideAnyOfElements = refs.map(getRefElement).some((el) => el.contains(e?.target));
+    if (isClickInsideAnyOfElements && !isClickOnEditorComponent(e?.target, fieldValueRef?.current)) {
+      handleOpenDropdown();
+      e?.stopPropagation();
+    }
+  };
+  function handleOptionSelect(option) {
+    const keepDropdownOpen = activeTab && [
+      ComboBoxTabType.SELECT_FROM_COLLECTION_DYNAMICALLY,
+      ComboBoxTabType.SELECT_FROM_UDM_DYNAMICALLY
+    ].includes(activeTab);
+    onChange(option);
+    if (!keepDropdownOpen) {
+      handleCloseDropdown();
+    }
+  }
+  const handleOnDelete = () => {
+    onChange(void 0);
+    handleCloseDropdown();
+  };
+  const requiredAndEmptyField = required && isDefinedValue(value);
+  return /* @__PURE__ */ jsxs(
+    FieldWrapper,
+    {
+      role: "combobox",
+      ref: fieldValueRef,
+      "aria-expanded": isDropdownOpen,
+      onClick: handleClick,
+      disabled,
+      requiredAndEmptyField,
+      children: [
+        /* @__PURE__ */ jsx(
+          Value,
+          {
+            ref: valueRef,
+            valueComponent,
+            placeholder,
+            disabled,
+            className,
+            onChange,
+            onDelete: handleOnDelete,
+            isEdited: isDropdownOpen
+          }
+        ),
+        isDropdownOpen && /* @__PURE__ */ jsx(
+          Dropdown,
+          {
+            ref: dropdownRef,
+            referenceElement: fieldValueRef,
+            topDropdownPanelComponent,
+            autoFocusOnSearch: true,
+            onSelect: handleOptionSelect,
+            onClose: handleCloseDropdown
+          }
+        )
+      ]
+    }
+  );
+}
+const Value = forwardRef(
+  ({
+    className,
+    valueComponent,
+    placeholder,
+    onClick,
+    onChange,
+    onDelete,
+    disabled,
+    isEdited
+  }, ref) => {
+    const { value } = useComboBox();
+    return /* @__PURE__ */ jsxs("span", { className: classes.valueWrapper, ref, children: [
+      !!valueComponent ? /* @__PURE__ */ jsx(Fragment, { children: valueComponent }) : /* @__PURE__ */ jsx(
+        ComboBoxValue,
+        {
+          className,
+          placeholder,
+          onClick,
+          onChange,
+          disabled,
+          isEdited
+        }
+      ),
+      isDefinedValue(value) && onDelete && /* @__PURE__ */ jsx(
+        ActionBar,
+        {
+          className: clsx(
+            classes.actionBar,
+            isEdited && classes.actionBar__visible
+          ),
+          children: /* @__PURE__ */ jsx(ActionBar.DeleteButton, { onClick: onDelete })
+        }
+      )
+    ] });
+  }
+);
+
+export { OptionSelector };

package/dist/esm/components/ComboBox/Edit/OptionSelector.module.css.mjs

@@ -0,0 +1,14 @@
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import styleInject from 'style-inject';
+
+var css_248z = ".OptionSelector-module_valueWrapper__bSY1e {\n  position: relative;\n  display: inline-flex;\n  max-width: 100%;\n  --tw-text-opacity: 1;\n  color: rgb(0 0 0 / var(--tw-text-opacity));\n  padding-right: 0.375rem;\n  width: -moz-fit-content;\n  width: fit-content;\n  transition:\n    width 0.5s,\n    height 0.5s\n}\n\n.OptionSelector-module_valueWrapper__bSY1e[role='combobox'] span:empty {\n  --tw-bg-opacity: 1;\n  background-color: rgb(170 170 170 / var(--tw-bg-opacity));\n  min-width: 7rem\n}\n\n.OptionSelector-module_actionBar__YRz10:not(.OptionSelector-module_actionBar__visible__3kDge) {\n  display: none\n}\n\n.OptionSelector-module_actionBar__visible__3kDge {\n  position: absolute;\n  left: 100%;\n  top: 0px;\n  bottom: 0px;\n  margin-right: 0px;\n  width: 0px;\n  z-index: 1\n}\n";
+var classes = {"valueWrapper":"OptionSelector-module_valueWrapper__bSY1e","actionBar":"OptionSelector-module_actionBar__YRz10","actionBar__visible":"OptionSelector-module_actionBar__visible__3kDge"};
+styleInject(css_248z);
+
+export { classes as default };

package/dist/esm/components/ComboBox/Edit/TextInput.mjs

@@ -0,0 +1,157 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { isFormula, getFormula } from '@integration-app/sdk';
+import { useRef, useEffect } from 'react';
+import { getFormulas } from '../../DataBuilder/Formula/index.mjs';
+import { getRefElement } from '../../../helpers/getRefElement.mjs';
+import { ComboBoxTabType } from '../types.mjs';
+import { useComboboxEditor, Editor } from '../../ComboBoxElements/TipTapEditor/Editor.mjs';
+import '../../ComboBoxElements/TipTapEditor/EditorStandAlone.mjs';
+import '../../ComboBoxElements/TipTapEditor/TagComponent.mjs';
+import '../../SvgIcon/index.mjs';
+import 'fuse';
+import { isClickOnEditorCustomTagComponent } from '../../ComboBoxElements/TipTapEditor/helpers/clicks.mjs';
+import { transformEditorSchemaToValue } from '../../ComboBoxElements/TipTapEditor/helpers/transformEditorSchemaToValue.mjs';
+import { useComboBox } from '../context/combobox-context.mjs';
+import { Dropdown } from '../Dropdown/Dropdown.mjs';
+import '../../DropdownUI/index.mjs';
+import { useComboBoxDropdownSearchContext } from '../context/combobox-dropdown-search.mjs';
+import { useComboBoxDropdownContext } from '../context/combobox-dropdown-context.mjs';
+import '../Dropdown/tabs.mjs';
+import { FieldWrapper } from '../../ComboBoxElements/FieldWrapper.mjs';
+import { isDefinedValue } from '../Value/Schema.mjs';
+
+function TextInput({
+  placeholder,
+  className,
+  onChange,
+  disabled,
+  required
+}) {
+  const textInputRef = useRef(null);
+  const fieldValueRef = useRef(null);
+  const dropdownRef = useRef(null);
+  const {
+    value,
+    refsToIgnoreClick,
+    // Dropdown related
+    isDropdownOpen,
+    openDropdown,
+    closeDropdown,
+    topDropdownPanelComponent
+  } = useComboBox();
+  const { setSearchSource, searchSource } = useComboBoxDropdownSearchContext();
+  const { editor, pasteTag } = useComboboxEditor({
+    value,
+    onChange,
+    onEnter: ({ editor: editor2 }) => {
+      onChange(transformEditorSchemaToValue(editor2?.getJSON() ?? {}));
+      resetActiveTab();
+      handleCloseDropdown();
+    },
+    placeholder,
+    allowEditorSearchClear: searchSource === "editor"
+  });
+  useEffect(() => {
+    editor?.setEditable(!disabled, false);
+  }, [disabled, editor]);
+  const { activeTab, resetActiveTab } = useComboBoxDropdownContext();
+  function handleOpenDropdown() {
+    if (disabled) return;
+    openDropdown();
+  }
+  function handleCloseDropdown() {
+    closeDropdown();
+  }
+  const refs = [textInputRef, fieldValueRef, ...refsToIgnoreClick ?? []];
+  const handleClick = function(e) {
+    const isClickInsideAnyOfElements = refs.map(getRefElement).some((el) => el.contains(e?.target));
+    if (isClickInsideAnyOfElements && !isClickOnEditorCustomTagComponent(
+      e?.target,
+      fieldValueRef?.current
+    )) {
+      handleOpenDropdown();
+      e?.stopPropagation();
+    }
+  };
+  const handleOptionSelect = (variable) => {
+    if (shouldRewriteValue(activeTab)) {
+      onChange(variable);
+      if (shouldCloseDropdown(activeTab)) {
+        resetActiveTab();
+        handleCloseDropdown();
+      }
+    } else {
+      const openTagCombobox = valueHasDropdownWithFormula(variable);
+      if (openTagCombobox) {
+        handleCloseDropdown();
+      }
+      pasteTag(variable, { autoOpen: openTagCombobox });
+    }
+  };
+  const requiredAndEmptyField = required && isDefinedValue(value);
+  return /* @__PURE__ */ jsxs(
+    FieldWrapper,
+    {
+      role: "combobox",
+      ref: fieldValueRef,
+      "aria-expanded": isDropdownOpen,
+      onClick: handleClick,
+      disabled,
+      requiredAndEmptyField,
+      children: [
+        /* @__PURE__ */ jsx(
+          Editor,
+          {
+            className,
+            ref: textInputRef,
+            editor,
+            onFocus: () => {
+              setSearchSource("editor");
+            }
+          }
+        ),
+        isDropdownOpen && /* @__PURE__ */ jsx(
+          Dropdown,
+          {
+            ref: dropdownRef,
+            referenceElement: fieldValueRef,
+            topDropdownPanelComponent,
+            onSelect: handleOptionSelect,
+            onClose: handleCloseDropdown,
+            autoFocusOnSearch: false
+          }
+        )
+      ]
+    }
+  );
+}
+function shouldRewriteValue(tab) {
+  return tab && [
+    ComboBoxTabType.OPTIONS,
+    ComboBoxTabType.CUSTOM,
+    ComboBoxTabType.LOOKUP_OPTIONS,
+    ComboBoxTabType.SELECT_FROM_COLLECTION_DYNAMICALLY,
+    ComboBoxTabType.SELECT_FROM_UDM_DYNAMICALLY
+  ].includes(tab);
+}
+function shouldCloseDropdown(tab) {
+  return tab && [
+    ComboBoxTabType.OPTIONS,
+    ComboBoxTabType.CUSTOM,
+    ComboBoxTabType.LOOKUP_OPTIONS
+  ].includes(tab);
+}
+function valueHasDropdownWithFormula(value) {
+  if (!isFormula(value)) return false;
+  return !!getFormulas()[getFormula(value)?.type]?.DropdownComponent;
+}
+
+export { TextInput };