@integration-app/react 2.0.3-beta.3 → 2.0.4-beta.0

package/dist/cjs/components/ComboBox/context/combobox-dropdown-context.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3-beta.3
+ * v2.0.4-beta.0
  */
 'use client';
 
@@ -12,33 +12,31 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactUsePromise = require('../../../_modules/react-use-promise.cjs');
 var deepEqual = require('fast-deep-equal');
-var optionsFactory = require('../../DataBuilder/Formula/options-factory.cjs');
-var index = require('../../SvgIcon/index.cjs');
 var integrationAppClientContext = require('../../../contexts/integration-app-client-context.cjs');
 var integrationAppConnectionContext = require('../../../contexts/integration-app-connection-context.cjs');
 var integrationAppIntegrationContext = require('../../../contexts/integration-app-integration-context.cjs');
-require('fuse');
 var boolean = require('../options-factories/boolean.cjs');
 var constant = require('../options-factories/constant.cjs');
-var customField = require('../options-factories/custom-field.cjs');
 var _enum = require('../options-factories/enum.cjs');
-require('js-convert-case');
-require('@integration-app/sdk');
-var schema = require('../options-factories/schema.cjs');
 var referenceRecords = require('../options-factories/reference-records.cjs');
-var referenceUdm = require('../options-factories/reference-udm.cjs');
 var types = require('../types.cjs');
 var helpers = require('./helpers.cjs');
 var comboboxContext = require('./combobox-context.cjs');
 var dataBuilderContext = require('../../DataBuilder/data-builder-context.cjs');
+var root = require('../options-factories/root.cjs');
+var comboboxDropdownSearch = require('./combobox-dropdown-search.cjs');
 
 const ComboBoxDropdownContext = React.createContext({
-  availableTabs: [],
-  activeTab: types.ComboBoxTabType.VARIABLE,
-  setActiveTab: () => null,
-  resetActiveTab: () => null,
+  availableCategories: [],
+  activeCategory: types.DropdownCategoryType.ROOT,
+  drillDown: () => {
+  },
+  drillUp: () => {
+  },
   isOptionSelected: () => false,
-  generateOptions: () => [[]]
+  optionsPayload: [[], void 0, "resolved"],
+  canUseParentInputSearchValue: false,
+  drillDownStackTop: void 0
 });
 ComboBoxDropdownContext.displayName = "ComboBoxDropdownContext";
 const ComboBoxDropdownContextProvider = ({
@@ -52,18 +50,40 @@ const ComboBoxDropdownContextProvider = ({
     variablesSchema,
     variablesOnly,
     options,
-    optionFactories
+    optionFactories,
+    isDropdownOpen
   } = comboboxContext.useComboBox();
   const { client } = integrationAppClientContext.useIntegrationAppClient();
   const { connectionId } = integrationAppConnectionContext.useIntegrationAppConnection();
   const { integrationId } = integrationAppIntegrationContext.useIntegrationAppIntegration();
-  const [currentTab, setCurrentTab] = React.useState(null);
-  const [availableTabs, setAvailableTabs] = React.useState(
-    null
-  );
+  const { setSearchValue, searchValue, searchSource } = comboboxDropdownSearch.useComboBoxDropdownSearchContext();
+  const [drillDownOptionsStack, setDrillDownOptionsStack] = React.useState([]);
+  const [availableCategories, setAvailableCategories] = React.useState(null);
+  const [drillPath, setDrillPath] = React.useState([]);
   const hasVariables = variablesSchema?.type === "object" && Object.keys(variablesSchema.properties ?? {}).length > 0;
+  const recoverStack = (path, availableCategories2) => {
+    void helpers.getStackForPath(
+      path,
+      value,
+      (searchValue2, stack) => getOptions({
+        availableCategories: availableCategories2,
+        schema,
+        variablesSchema,
+        searchValue: searchValue2,
+        valueSpec,
+        drillDownStack: stack,
+        staticOptions: options,
+        optionFactories,
+        editableVariablesSchemaLocators
+      }),
+      [],
+      canUseParentInputSearchValue ? value : searchValue
+    ).then((stack) => {
+      setDrillDownOptionsStack(stack);
+    });
+  };
   React.useEffect(() => {
-    void helpers.getAvailableTabs({
+    void helpers.getAvailableRootCategories({
       schema,
       options,
       optionFactories,
@@ -72,8 +92,13 @@ const ComboBoxDropdownContextProvider = ({
       client,
       connectionId,
       integrationId
-    }).then((tabs) => {
-      setAvailableTabs(tabs);
+    }).then((categories) => {
+      setAvailableCategories(categories);
+      if (!isDropdownOpen) {
+        const currentPath = helpers.getCurrentPath(categories || [], value);
+        setDrillPath(currentPath);
+        recoverStack(currentPath, categories);
+      }
     });
   }, [
     schema,
@@ -85,50 +110,92 @@ const ComboBoxDropdownContextProvider = ({
     integrationId,
     connectionId
   ]);
-  const activeTab = availableTabs ? helpers.getCurrentTab(availableTabs, currentTab, value) : null;
-  const generateOptions = function(searchValue, drilldownStack) {
-    return reactUsePromise.default(
-      () => getOptions({
-        activeTab,
-        // @ts-expect-error TS(2345): Argument of type 'DataSchema | undefined' is not a... Remove this comment to see the full error message
-        schema,
-        variablesSchema,
-        searchValue,
-        valueSpec,
-        drilldownStack,
-        options,
-        optionFactories,
-        editableVariablesSchemaLocators
-      }),
-      [
-        activeTab,
-        JSON.stringify(schema),
-        JSON.stringify(variablesSchema),
-        searchValue,
-        JSON.stringify(valueSpec),
-        drilldownStack.length.toString(),
-        JSON.stringify(options),
-        optionFactories?.length,
-        JSON.stringify(editableVariablesSchemaLocators)
-      ]
-    );
-  };
+  React.useEffect(() => {
+    if (!isDropdownOpen) {
+      resetDrillDown();
+    } else {
+      recoverStack(drillPath, availableCategories);
+    }
+  }, [isDropdownOpen]);
+  const [activeCategory] = drillPath.toReversed();
+  function drillDown(option) {
+    setSearchValue("");
+    const newStack = [...drillDownOptionsStack, option];
+    setDrillDownOptionsStack(newStack);
+    setDrillPath((path) => {
+      if (option.childCategory) {
+        return [...path, option.childCategory];
+      }
+      return path;
+    });
+  }
+  function drillUp() {
+    if (drillDownOptionsStack.length) {
+      const newStack = [...drillDownOptionsStack];
+      newStack.pop();
+      setDrillDownOptionsStack(newStack);
+      const newPath = [...drillPath];
+      newPath.pop();
+      if (!newPath.length) {
+        setDrillPath(helpers.getCurrentPath(availableCategories || [], value));
+      } else {
+        setDrillPath(newPath);
+      }
+    }
+  }
+  function resetDrillDown() {
+    setDrillDownOptionsStack([]);
+    setDrillPath(helpers.getCurrentPath(availableCategories || [], value));
+  }
+  const canUseParentInputSearchValue = !searchValue && typeof value === "string" && !!value && drillDownOptionsStack.length === 0 && searchSource === "editor";
+  const optionsPayload = reactUsePromise.default(() => {
+    return getOptions({
+      availableCategories,
+      schema,
+      variablesSchema,
+      searchValue: canUseParentInputSearchValue ? value : searchValue,
+      valueSpec,
+      drillDownStack: drillDownOptionsStack,
+      staticOptions: options,
+      optionFactories,
+      editableVariablesSchemaLocators
+    });
+  }, [
+    activeCategory,
+    JSON.stringify(availableCategories),
+    JSON.stringify(schema),
+    JSON.stringify(variablesSchema),
+    value,
+    canUseParentInputSearchValue,
+    searchValue,
+    JSON.stringify(valueSpec),
+    drillDownOptionsStack.length,
+    JSON.stringify(options),
+    optionFactories?.length,
+    JSON.stringify(editableVariablesSchemaLocators)
+  ]);
   const isOptionSelected = React.useCallback(
     function(option) {
+      if (value === void 0 || value === null) {
+        return false;
+      }
       return deepEqual(option.value, value);
     },
     [value]
   );
+  const [drillDownStackTop] = drillDownOptionsStack.toReversed();
   return /* @__PURE__ */ jsxRuntime.jsx(
     ComboBoxDropdownContext.Provider,
     {
       value: {
-        availableTabs,
-        activeTab,
-        setActiveTab: setCurrentTab,
-        resetActiveTab: () => setCurrentTab(null),
+        availableCategories,
+        activeCategory,
+        drillDown,
+        drillUp,
         isOptionSelected,
-        generateOptions
+        optionsPayload,
+        canUseParentInputSearchValue,
+        drillDownStackTop
       },
       children
     }
@@ -138,81 +205,70 @@ function useComboBoxDropdownContext() {
   return React.useContext(ComboBoxDropdownContext);
 }
 async function getOptions({
-  activeTab,
-  schema: schema$1,
+  availableCategories,
+  schema,
   variablesSchema,
   searchValue,
   valueSpec,
-  drilldownStack,
-  options: staticOptions,
-  optionFactories,
+  drillDownStack,
+  staticOptions,
+  optionFactories = [],
   editableVariablesSchemaLocators
 }) {
   const factories = [...optionFactories];
-  switch (activeTab) {
-    case types.ComboBoxTabType.OPTIONS:
-      if (schema$1?.referenceUdm) {
-        factories.unshift(new referenceUdm.ReferenceUdmOptionFactory(schema$1));
-      } else if (schema$1?.referenceRecords) {
-        factories.push(new referenceRecords.ReferenceRecordsOptionsFactory({ schema: schema$1 }));
-      } else if (schema$1?.enum) {
-        factories.push(new _enum.EnumOptionFactory({ schema: schema$1 }));
-      } else if (schema$1?.type === "boolean") {
-        factories.push(new boolean.BooleanOptionsFactory());
-      } else if (staticOptions) {
-        factories.push(new constant.ConstantOptionFactory(staticOptions));
-      }
-      break;
-    case types.ComboBoxTabType.VARIABLE:
-      factories.push(
-        new schema.SchemaOptionFactory({
-          schema: variablesSchema,
-          editableSchemaLocators: editableVariablesSchemaLocators
-        })
-      );
-      break;
-    case types.ComboBoxTabType.FORMULA:
-      factories.push(new optionsFactory.FormulaListOptionsFactory());
-      break;
-    case types.ComboBoxTabType.CUSTOM:
-      factories.push(new customField.CustomFieldOptionsFactory());
-      break;
+  if (drillDownStack.length === 0) {
+    factories.push(new root.RootOptionFactory(availableCategories));
+    if (schema?.referenceRecords) {
+      factories.push(new referenceRecords.ReferenceRecordsOptionsFactory({ schema }));
+    } else if (schema?.enum) {
+      factories.push(new _enum.EnumOptionFactory({ schema }));
+    } else if (schema?.type === "boolean") {
+      factories.push(new boolean.BooleanOptionsFactory());
+    } else if (staticOptions) {
+      factories.push(new constant.ConstantOptionFactory(staticOptions));
+    }
   }
   const options = [];
   async function getOptionsFromFactory(factory) {
-    const result = [];
-    result.push(
-      ...await factory.getOptions({ input: searchValue, spec: valueSpec })
+    const options2 = [];
+    options2.push(
+      ...await factory.getOptions({
+        input: searchValue,
+        spec: valueSpec,
+        editableVariablesSchemaLocators,
+        variablesSchema
+      })
     );
     if (searchValue) {
       const unfilteredOptions = await factory.getOptions({
         input: "",
-        spec: valueSpec
+        spec: valueSpec,
+        editableVariablesSchemaLocators,
+        variablesSchema
       });
       for (const option of unfilteredOptions) {
-        if (option.drilldownOptionFactories) {
-          for (const drilldownFactory of option.drilldownOptionFactories) {
-            result.push(...await getOptionsFromFactory(drilldownFactory));
-          }
+        if (option.drillDownOptionFactory) {
+          options2.push(
+            ...await getOptionsFromFactory(option.drillDownOptionFactory)
+          );
         }
       }
     }
-    return result;
+    return options2;
   }
-  if (drilldownStack.length > 0) {
-    options.push({
-      label: "Back",
-      iconType: index.SvgIconType.ChevronLeft,
-      drillup: true
-    });
-    const option = drilldownStack[drilldownStack.length - 1];
-    for (const drilldownFactory of option?.drilldownOptionFactories ?? []) {
-      options.push(...await getOptionsFromFactory(drilldownFactory));
+  if (drillDownStack.length > 0) {
+    const option = drillDownStack[drillDownStack.length - 1];
+    if (option?.drillDownOptionFactory) {
+      options.push(
+        ...await getOptionsFromFactory(option?.drillDownOptionFactory)
+      );
     }
   } else {
+    const localOptions = [];
     for (const optionFactory of [...factories]) {
-      options.push(...await getOptionsFromFactory(optionFactory));
+      localOptions.push(...await getOptionsFromFactory(optionFactory));
     }
+    options.push(...localOptions);
   }
   return options;
 }

package/dist/cjs/components/ComboBox/context/combobox-dropdown-search.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3-beta.3
+ * v2.0.4-beta.0
  */
 'use client';
 
@@ -10,15 +10,13 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var comboboxContext = require('./combobox-context.cjs');
 
 const ComboBoxDropdownSearchContext = React.createContext(
   {
     hideSearch: false,
     searchValue: "",
     setSearchValue: () => null,
-    drillDownDepth: 0,
-    setDrillDownDepth: () => {
-    },
     searchSource: "editor",
     setSearchSource: () => {
     }
@@ -30,20 +28,23 @@ const ComboBoxDropdownSearchProvider = ({
   hideSearch = false
 }) => {
   const [searchValue, setSearchValue] = React.useState("");
-  const [drillDownDepth, setDrillDownDepth] = React.useState(0);
   const [searchSource, setSearchSource] = React.useState("editor");
+  const { isDropdownOpen } = comboboxContext.useComboBox();
   const contextValue = React.useMemo(
     () => ({
       searchValue,
       setSearchValue,
       hideSearch,
-      drillDownDepth,
-      setDrillDownDepth,
       searchSource,
       setSearchSource
     }),
-    [searchValue, hideSearch, drillDownDepth, searchSource]
+    [searchValue, hideSearch, searchSource]
   );
+  React.useEffect(() => {
+    if (!isDropdownOpen && searchValue) {
+      setSearchValue("");
+    }
+  }, [isDropdownOpen]);
   return /* @__PURE__ */ jsxRuntime.jsx(ComboBoxDropdownSearchContext.Provider, { value: contextValue, children });
 };
 function useComboBoxDropdownSearchContext() {

package/dist/cjs/components/ComboBox/context/combobox-dropdown-stack.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3-beta.3
+ * v2.0.4-beta.0
  */
 'use client';
 
@@ -12,35 +12,48 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var getRefElement = require('../../../helpers/getRefElement.cjs');
 
-const DropdownStackContext = React.createContext(false);
-let GLOBAL_DROPDOWN_STACK = [];
+const DropdownStackContext = React.createContext({
+  isNested: false,
+  stack: [],
+  setStack: () => {
+  }
+});
 const DropdownStackContextProvider = ({
   children
 }) => {
-  const hasNestedDropdownsContext = React.useContext(DropdownStackContext);
+  const [stack, setStack] = React.useState([]);
+  const { isNested: hasNestedDropdownsContext } = React.useContext(DropdownStackContext);
   if (hasNestedDropdownsContext) {
     return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(DropdownStackContext.Provider, { value: true, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DropdownStackContext.Provider,
+    {
+      value: {
+        isNested: true,
+        stack,
+        setStack
+      },
+      children
+    }
+  );
 };
 const useDropdownStackContext = (dropdownRef) => {
-  const isNested = React.useContext(DropdownStackContext);
+  const { isNested, stack, setStack } = React.useContext(DropdownStackContext);
   const recordRef = React.useRef(dropdownRef);
   React.useEffect(() => {
     if (isNested) {
-      GLOBAL_DROPDOWN_STACK.push(recordRef?.current);
+      setStack((prev) => [...prev, recordRef?.current]);
     } else {
-      GLOBAL_DROPDOWN_STACK = [recordRef?.current];
+      setStack([recordRef?.current]);
     }
     return () => {
-      GLOBAL_DROPDOWN_STACK = GLOBAL_DROPDOWN_STACK.filter(
-        (record) => record !== recordRef?.current
-      );
+      setStack((prev) => prev.filter((record) => record !== recordRef?.current));
     };
   }, []);
   function isClickInsideRefsAndChildren(event) {
-    const stackStartedFromElement = GLOBAL_DROPDOWN_STACK.slice(
-      GLOBAL_DROPDOWN_STACK.indexOf(recordRef?.current)
+    const stackStartedFromElement = stack.slice(
+      stack.indexOf(recordRef?.current)
     );
     return stackStartedFromElement.some((ref) => {
       return isClickInsideRefRecord(ref, event);

package/dist/cjs/components/ComboBox/context/helpers.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3-beta.3
+ * v2.0.4-beta.0
  */
 'use client';
 
@@ -10,7 +10,7 @@
 
 var sdk = require('@integration-app/sdk');
 var types = require('../types.cjs');
-var Lookup = require('../Dropdown/Tabs/Lookup.cjs');
+var getLookupCollection = require('../Dropdown/Categories/getLookupCollection.cjs');
 
 function isSchemaAllowCustomValue(schema) {
   const schemaHasNoType = !schema?.type;
@@ -18,7 +18,7 @@ function isSchemaAllowCustomValue(schema) {
   const schemaIsArrayWithNoSchemaItems = schema?.type === "array" && !schema?.items?.type;
   return schemaHasNoType || schemaIsObjectWithNoProperties || schemaIsArrayWithNoSchemaItems;
 }
-async function getAvailableTabs({
+async function getAvailableRootCategories({
   schema,
   options,
   optionFactories,
@@ -28,62 +28,62 @@ async function getAvailableTabs({
   connectionId,
   integrationId
 }) {
-  const availableTabs = [];
+  const availableCategories = /* @__PURE__ */ new Set();
   const udm = schema?.referenceUdm;
   const udmSpec = udm ? sdk.UNIFIED_DATA_MODELS[udm] : void 0;
   if (!!udmSpec) {
-    availableTabs.push(types.ComboBoxTabType.SELECT_FROM_UDM_DYNAMICALLY);
-  }
-  const comboboxHasOptions = Array.isArray(options);
-  const comboboxHasOptionFactories = (optionFactories || []).length > 0;
-  const comboboxHasFixedValues = !!schema && sdk.schemaHasFixedValues(schema);
-  const comboboxHasOptionList = comboboxHasOptions || comboboxHasOptionFactories || comboboxHasFixedValues;
-  if (comboboxHasOptionList) {
-    availableTabs.push(types.ComboBoxTabType.OPTIONS);
-  }
-  const comboboxHasReferenceCollection = !!sdk.getReferenceCollectionPathForSchema(schema);
-  if (comboboxHasReferenceCollection && connectionId) {
-    availableTabs.push(types.ComboBoxTabType.LOOKUP_OPTIONS);
+    availableCategories.add(types.DropdownCategoryType.SELECT_FROM_UDM_DYNAMICALLY);
   }
   if (schema && (connectionId || integrationId)) {
-    const collection = await Lookup.getLookupCollection({
+    const collection = await getLookupCollection.getLookupCollection({
       schema,
       client,
       connectionId,
       integrationId
     });
     if (collection?.find?.queryFields || collection?.match?.fields) {
-      availableTabs.push(types.ComboBoxTabType.SELECT_FROM_COLLECTION_DYNAMICALLY);
+      availableCategories.add(types.DropdownCategoryType.SELECT_FROM_UDM_DYNAMICALLY);
     }
   }
+  const comboboxHasOptions = Array.isArray(options);
+  const comboboxHasOptionFactories = (optionFactories || []).length > 0;
+  const comboboxHasFixedValues = !!schema && sdk.schemaHasFixedValues(schema);
+  const comboboxHasOptionList = comboboxHasOptions || comboboxHasOptionFactories || comboboxHasFixedValues;
+  if (comboboxHasOptionList) {
+    availableCategories.add(types.DropdownCategoryType.OPTIONS);
+  }
+  const comboboxHasReferenceCollection = !!sdk.getReferenceCollectionPathForSchema(schema);
+  if (comboboxHasReferenceCollection && connectionId) {
+    availableCategories.add(types.DropdownCategoryType.LOOKUP_OPTIONS);
+  }
   const schemaAllowCustomValue = isSchemaAllowCustomValue(schema);
   if (!variablesOnly && !comboboxHasOptionList && schemaAllowCustomValue) {
-    availableTabs.push(types.ComboBoxTabType.CUSTOM);
+    availableCategories.add(types.DropdownCategoryType.CUSTOM);
   }
   if (hasVariables) {
-    availableTabs.push(types.ComboBoxTabType.VARIABLE);
-    availableTabs.push(types.ComboBoxTabType.FORMULA);
+    availableCategories.add(types.DropdownCategoryType.VARIABLE);
+    availableCategories.add(types.DropdownCategoryType.FORMULA);
   }
-  return availableTabs.length > 0 ? availableTabs : null;
+  return availableCategories.size > 0 ? [...availableCategories] : null;
 }
-function getCurrentTab(availableTabs, possibleCurrentTab, value) {
-  if (possibleCurrentTab && availableTabs.includes(possibleCurrentTab)) {
-    return possibleCurrentTab;
+function getCurrentPath(availableCategories, value) {
+  if (availableCategories.length < 1) {
+    return [types.DropdownCategoryType.ROOT];
   }
-  return getDefaultTab(availableTabs, value);
-}
-function getDefaultTab(availableTabs, value) {
-  if (availableTabs.length <= 1) {
-    return availableTabs[0];
+  if (availableCategories.length === 1) {
+    return availableCategories;
   }
   const formulaType = sdk.getFormula(value)?.type;
-  if (formulaType === sdk.DataBuilderFormulaType.LOOKUP) {
-    if (availableTabs.includes(types.ComboBoxTabType.SELECT_FROM_COLLECTION_DYNAMICALLY)) {
-      return types.ComboBoxTabType.SELECT_FROM_COLLECTION_DYNAMICALLY;
-    }
-    if (availableTabs.includes(types.ComboBoxTabType.SELECT_FROM_UDM_DYNAMICALLY)) {
-      return types.ComboBoxTabType.SELECT_FROM_UDM_DYNAMICALLY;
-    }
+  if (formulaType === sdk.DataBuilderFormulaType.LOOKUP && availableCategories.includes(
+    types.DropdownCategoryType.SELECT_FROM_UDM_DYNAMICALLY
+  )) {
+    return [
+      types.DropdownCategoryType.ROOT,
+      types.DropdownCategoryType.SELECT_FROM_UDM_DYNAMICALLY
+    ];
+  }
+  if (formulaType === sdk.DataBuilderFormulaType.VAR) {
+    return [types.DropdownCategoryType.ROOT, types.DropdownCategoryType.VARIABLE];
   }
   const generalFormulaTypes = Object.values(sdk.DataBuilderFormulaType).filter(
     (x) => ![
@@ -92,19 +92,44 @@ function getDefaultTab(availableTabs, value) {
       sdk.DataBuilderFormulaType.RECORD
     ].includes(x)
   );
-  if (availableTabs.includes(types.ComboBoxTabType.FORMULA) && generalFormulaTypes.includes(formulaType)) {
-    return types.ComboBoxTabType.FORMULA;
+  if (availableCategories.includes(types.DropdownCategoryType.FORMULA) && generalFormulaTypes.includes(formulaType)) {
+    return [
+      types.DropdownCategoryType.ROOT,
+      types.DropdownCategoryType.FORMULA,
+      types.DropdownCategoryType.FORMULA_CONFIG
+    ];
   }
-  if (availableTabs.includes(types.ComboBoxTabType.OPTIONS)) {
-    return types.ComboBoxTabType.OPTIONS;
+  if (availableCategories.includes(types.DropdownCategoryType.LOOKUP_OPTIONS)) {
+    return [types.DropdownCategoryType.ROOT];
   }
-  if (availableTabs.includes(types.ComboBoxTabType.LOOKUP_OPTIONS)) {
-    return types.ComboBoxTabType.LOOKUP_OPTIONS;
+  if (availableCategories.includes(types.DropdownCategoryType.CUSTOM)) {
+    return [types.DropdownCategoryType.ROOT];
   }
-  if (availableTabs.includes(types.ComboBoxTabType.VARIABLE)) {
-    return types.ComboBoxTabType.VARIABLE;
+  return [types.DropdownCategoryType.ROOT];
+}
+async function getStackForPath(path, value, getOptions, stack, searchValue) {
+  const [first, ...rest] = path;
+  if (!first) {
+    return stack;
+  }
+  const options = await getOptions(searchValue, stack);
+  const targetOption = options.find((option) => {
+    const categoryMatched = option.childCategory !== void 0 && option.childCategory === first;
+    if (first === types.DropdownCategoryType.FORMULA_CONFIG) {
+      const valueFormulaType = sdk.getFormula(value)?.type;
+      const optionFormulaType = sdk.getFormula(option.value)?.type;
+      if (!optionFormulaType && !optionFormulaType) {
+        return false;
+      }
+      return categoryMatched && valueFormulaType === optionFormulaType;
+    }
+    return categoryMatched;
+  });
+  const newStack = [...stack];
+  if (targetOption) {
+    newStack.push(targetOption);
   }
-  return availableTabs[0];
+  return await getStackForPath(rest, value, getOptions, newStack, searchValue);
 }
 function canUserEnterValueFromKeyboard(schema, options, optionFactories, variablesOnly, value) {
   const comboboxHasOptions = (options || []).length > 0;
@@ -126,5 +151,6 @@ function canUserEnterValueFromKeyboard(schema, options, optionFactories, variabl
 }
 
 exports.canUserEnterValueFromKeyboard = canUserEnterValueFromKeyboard;
-exports.getAvailableTabs = getAvailableTabs;
-exports.getCurrentTab = getCurrentTab;
+exports.getAvailableRootCategories = getAvailableRootCategories;
+exports.getCurrentPath = getCurrentPath;
+exports.getStackForPath = getStackForPath;