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

package/dist/cjs/components/ComboBox/Dropdown/DrillUpButton.cjs

@@ -0,0 +1,35 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.4-beta.0
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var index = require('../../DropdownUI/index.cjs');
+var comboboxDropdownContext = require('../context/combobox-dropdown-context.cjs');
+
+const DrillUpButton = React.forwardRef(({ onClick, ...props }, ref) => {
+  const { drillUp, drillDownStackTop } = comboboxDropdownContext.useComboBoxDropdownContext();
+  if (!drillDownStackTop) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index.DropdownUI.BackButton,
+    {
+      ref,
+      onClick: (e) => {
+        drillUp();
+        onClick?.(e);
+      },
+      ...props,
+      children: drillDownStackTop.label
+    }
+  );
+});
+
+exports.DrillUpButton = DrillUpButton;

package/dist/cjs/components/ComboBox/Dropdown/Dropdown.cjs

@@ -2,92 +2,50 @@
 /*
  * 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';
 
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var Popper = require('../../ComboBoxElements/Popper.cjs');
-var index = require('../../DropdownUI/index.cjs');
-var useWindowEvent = require('../../../hooks/useWindowEvent.cjs');
+var index$1 = require('../../DropdownUI/index.cjs');
 var comboboxDropdownContext = require('../context/combobox-dropdown-context.cjs');
 var comboboxDropdownStack = require('../context/combobox-dropdown-stack.cjs');
 var SearchInput = require('./SearchInput.cjs');
-var ActiveTab = require('./ActiveTab.cjs');
-var tabs = require('./tabs.cjs');
-var DropdownUIElements = require('../../DropdownUI/DropdownUIElements.cjs');
+var ActiveCategoryContent = require('./ActiveCategoryContent.cjs');
+var DrillUpButton = require('./DrillUpButton.cjs');
+var index = require('../DropdownPopover/index.cjs');
 
-const Dropdown = React.forwardRef(
-  ({
-    referenceElement,
-    topDropdownPanelComponent,
-    autoFocusOnSearch,
-    onSelect,
-    onClose
-  }, ref) => {
-    const { isClickInsideRefsAndChildren } = comboboxDropdownStack.useDropdownStackContext(
-      ref
-    );
-    useClick((event) => {
-      if (!isClickInsideRefsAndChildren(event)) {
-        onClose();
-      }
-    });
-    useWindowEvent.useWindowEvent("keydown", (e) => {
-      e.key === "Escape" && onClose();
-    });
-    const { availableTabs } = comboboxDropdownContext.useComboBoxDropdownContext();
-    if (availableTabs === null) {
-      return null;
-    }
-    if (availableTabs?.length < 1) {
-      return /* @__PURE__ */ jsxRuntime.jsx(comboboxDropdownStack.DropdownStackContextProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(Popper.DropdownUIPopper, { referenceElement, children: /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI, { ref, children: /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.LoadingPanel, { children: "Loading options" }) }) }) });
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(comboboxDropdownStack.DropdownStackContextProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(Popper.DropdownUIPopper, { referenceElement, children: /* @__PURE__ */ jsxRuntime.jsxs(index.DropdownUI, { ref, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(DropdownTabs, {}),
+function Dropdown({
+  topDropdownPanelComponent,
+  autoFocusOnSearch,
+  onOptionSelect,
+  children
+}) {
+  const { availableCategories } = comboboxDropdownContext.useComboBoxDropdownContext();
+  if (availableCategories === null) {
+    return children;
+  }
+  if (availableCategories?.length < 1) {
+    return /* @__PURE__ */ jsxRuntime.jsx(comboboxDropdownStack.DropdownStackContextProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(index.DropdownPopoverProvider, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(index.DropdownAnchor, { children }),
+      /* @__PURE__ */ jsxRuntime.jsx(index.DropdownPopoverContent, { children: /* @__PURE__ */ jsxRuntime.jsxs(index$1.DropdownUI.List, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(index$1.DropdownUI.LoadingItem, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(index$1.DropdownUI.LoadingItem, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(index$1.DropdownUI.LoadingItem, {})
+      ] }) })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(comboboxDropdownStack.DropdownStackContextProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(index.DropdownPopoverProvider, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(index.DropdownAnchor, { children }),
+    /* @__PURE__ */ jsxRuntime.jsxs(index.DropdownPopoverContent, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DrillUpButton.DrillUpButton, {}),
       topDropdownPanelComponent && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: topDropdownPanelComponent }),
       /* @__PURE__ */ jsxRuntime.jsx(SearchInput.SearchInput, { autoFocus: autoFocusOnSearch }),
-      /* @__PURE__ */ jsxRuntime.jsx(ActiveTab.ActiveTab, { onSelect })
-    ] }) }) });
-  }
-);
-function DropdownTabs() {
-  const { activeTab, availableTabs, setActiveTab } = comboboxDropdownContext.useComboBoxDropdownContext();
-  if (!availableTabs || availableTabs.length === 0) return null;
-  if (availableTabs.length === 1 && hideTabIfSingle(availableTabs[0]))
-    return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.Tabs, { children: availableTabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
-    Tab,
-    {
-      selected: activeTab === tab,
-      onClick: () => setActiveTab(tab),
-      title: tabs.renderTabs[tab].title,
-      icon: tabs.renderTabs[tab]?.icon
-    },
-    tab
-  )) });
-}
-function Tab({
-  selected,
-  onClick,
-  title,
-  icon
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(index.DropdownUI.Tab, { selected, onClick, children: [
-    title,
-    icon && /* @__PURE__ */ jsxRuntime.jsx(DropdownUIElements.TabIcon, { type: icon })
-  ] });
-}
-function hideTabIfSingle(tab) {
-  return !tabs.renderTabs[tab]?.showIfSingle;
-}
-function useClick(cb) {
-  useWindowEvent.useWindowEvent("mouseup", cb);
-  useWindowEvent.useWindowEvent("touchend", cb);
+      /* @__PURE__ */ jsxRuntime.jsx(ActiveCategoryContent.ActiveCategoryContent, { onOptionSelect })
+    ] })
+  ] }) });
 }
 
 exports.Dropdown = Dropdown;
-exports.DropdownTabs = DropdownTabs;

package/dist/cjs/components/ComboBox/Dropdown/Option.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';
 
@@ -13,57 +13,50 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var index = require('../../DropdownUI/index.cjs');
 var useEventStopPropagation = require('../../../hooks/useEventStopPropagation.cjs');
-var DropdownUIElements = require('../../DropdownUI/DropdownUIElements.cjs');
+var svgIconType = require('../../SvgIcon/svg-icon-type.cjs');
 
-function ComboBoxOption({
+function DropdownOption({
   option,
   selected,
   current = false,
   onSelect
 }) {
   const handleOnSelect = useEventStopPropagation.default(() => {
-    if (option.isSection && !option.drilldownOptionFactories) {
+    if (option.isSection && !option.drillDownOptionFactory) {
       return;
     }
     onSelect?.();
   });
   const iconProps = getIconProps(option);
   const valueProps = getValueProps(option);
-  const hasChild = !!option.drilldownOptionFactories;
-  const Component = option.isSection ? index.DropdownUI.HeaderItem : index.DropdownUI.Item;
+  const hasChild = !!option.drillDownOptionFactory;
+  if (option.isSection) {
+    return /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.ListHeader, { children: valueProps.label });
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    Component,
+    index.DropdownUI.Item,
     {
-      selected,
-      active: current,
+      current,
       onClick: handleOnSelect,
-      isHighlighted: option.isHighlighted,
+      "aria-selected": selected,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(DropdownUIElements.ItemIcon, { ...iconProps }),
-        /* @__PURE__ */ jsxRuntime.jsx(OptionTitle, { ...valueProps }),
-        hasChild && /* @__PURE__ */ jsxRuntime.jsx(DropdownUIElements.ItemChevronIcon, {})
+        /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.ItemIcon, { ...iconProps, framed: true }),
+        /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.ItemTitle, { children: option.label }),
+        hasChild && /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.ItemNestingIndicator, { count: option.childrenCount, children: /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.ItemIcon, { type: svgIconType.SvgIconType.ChevronRight }) }),
+        selected && /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.ItemIcon, { type: svgIconType.SvgIconType.Check })
       ]
     }
   );
 }
-function OptionTitle({ isCustomValue, label, hint }) {
-  if (!label && !hint) {
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: "Please provide label for an option" });
-  }
-  const Component = isCustomValue ? DropdownUIElements.ItemCustomValue : DropdownUIElements.ItemTitle;
-  return /* @__PURE__ */ jsxRuntime.jsx(Component, { hint, children: label });
-}
 function getIconProps(option) {
   const { iconType: type, iconUri: src } = option;
   return { type, src };
 }
 function getValueProps(option) {
-  const { label, hint, isCustomValue } = option;
+  const { label } = option;
   return {
-    label: label ? label : hint,
-    hint: label ? hint : void 0,
-    isCustomValue
+    label: label ?? "Missing label"
   };
 }
 
-exports.default = ComboBoxOption;
+exports.default = DropdownOption;

package/dist/cjs/components/ComboBox/Dropdown/OptionsList.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,42 +12,59 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var deepEqual = require('fast-deep-equal');
 var index = require('../../DropdownUI/index.cjs');
-var index$1 = require('../../SvgIcon/index.cjs');
 var useDeepEffect = require('../../../hooks/useDeepEffect.cjs');
 var comboboxDropdownContext = require('../context/combobox-dropdown-context.cjs');
-var comboboxDropdownSearch = require('../context/combobox-dropdown-search.cjs');
 var keyboardEvents = require('../../../hooks/keyboard-events.cjs');
 var Option = require('./Option.cjs');
 var dataBuilderContext = require('../../DataBuilder/data-builder-context.cjs');
 var fieldContext = require('../../DataBuilder/field-context.cjs');
 var jsConvertCase = require('js-convert-case');
 var comboboxContext = require('../context/combobox-context.cjs');
-var DropdownUIElements = require('../../DropdownUI/DropdownUIElements.cjs');
 
-function OptionsList({ onSelect }) {
+function OptionsList({
+  onOptionSelect
+}) {
   const { onAddVariable } = dataBuilderContext.default();
   const { field } = fieldContext.default();
-  const { isOptionSelected, generateOptions } = comboboxDropdownContext.useComboBoxDropdownContext();
   const {
-    searchValue,
-    setSearchValue,
-    drillDownDepth,
-    setDrillDownDepth,
-    searchSource
-  } = comboboxDropdownSearch.useComboBoxDropdownSearchContext();
+    isOptionSelected,
+    canUseParentInputSearchValue,
+    drillDown,
+    optionsPayload,
+    drillUp
+  } = comboboxDropdownContext.useComboBoxDropdownContext();
+  const { value: parentInputValue, scopedComboboxId } = comboboxContext.useComboBox();
   const [currentOption, setCurrentOption] = React.useState(
     null
   );
-  keyboardEvents.useKeyboardEventSubscribe(keyboardEvents.EVENT_TYPE.OPTION_DOWN, makePreviousOptionCurrent);
-  keyboardEvents.useKeyboardEventSubscribe(keyboardEvents.EVENT_TYPE.OPTION_UP, makeNextOptionCurrent);
-  keyboardEvents.useKeyboardEventSubscribe(keyboardEvents.EVENT_TYPE.OPTION_SELECT, handleKeyEnter);
-  const [drilldownStack, setDrilldownStack] = React.useState([]);
-  const { value: parentInputValue } = comboboxContext.useComboBox();
-  const canUseParentInputSearchValue = !searchValue && typeof parentInputValue === "string" && !!parentInputValue && drillDownDepth === 0 && searchSource === "editor";
-  const [options, optionsError, optionsState] = generateOptions(
-    canUseParentInputSearchValue ? parentInputValue : searchValue,
-    drilldownStack
-  );
+  keyboardEvents.useKeyboardEventSubscribe({
+    scopedComboboxId,
+    event: keyboardEvents.EVENT_TYPE.OPTION_DOWN,
+    callback: makePreviousOptionCurrent
+  });
+  keyboardEvents.useKeyboardEventSubscribe({
+    scopedComboboxId,
+    event: keyboardEvents.EVENT_TYPE.OPTION_UP,
+    callback: makeNextOptionCurrent
+  });
+  keyboardEvents.useKeyboardEventSubscribe({
+    scopedComboboxId,
+    event: keyboardEvents.EVENT_TYPE.OPTION_LEFT,
+    callback: () => {
+      drillUp();
+    }
+  });
+  keyboardEvents.useKeyboardEventSubscribe({
+    scopedComboboxId,
+    event: keyboardEvents.EVENT_TYPE.OPTION_RIGHT,
+    callback: handleKeyEnter
+  });
+  keyboardEvents.useKeyboardEventSubscribe({
+    scopedComboboxId,
+    event: keyboardEvents.EVENT_TYPE.OPTION_SELECT,
+    callback: handleKeyEnter
+  });
+  const [options = [], optionsError, optionsState] = optionsPayload;
   useDeepEffect.useDeepEffect(() => {
     if (!options?.length) {
       return;
@@ -59,17 +76,6 @@ function OptionsList({ onSelect }) {
       }
     }
   }, [options]);
-  function drillDown(option) {
-    setSearchValue("");
-    const newStack = [...drilldownStack, option];
-    setDrilldownStack(newStack);
-    setDrillDownDepth(newStack.length);
-  }
-  function drillUp() {
-    const newStack = drilldownStack.slice(0, drilldownStack.length - 2);
-    setDrilldownStack(newStack);
-    setDrillDownDepth(newStack.length);
-  }
   const makeOptionComparable = (option) => {
     return option && {
       ...option,
@@ -107,7 +113,7 @@ function OptionsList({ onSelect }) {
     return !option.isSection;
   }
   function handleKeyEnter() {
-    if (currentOption) {
+    if (currentOption && !currentOption.isSection) {
       handleOptionSelect(currentOption);
     }
   }
@@ -116,15 +122,13 @@ function OptionsList({ onSelect }) {
       const objectLocator = option.addVariable;
       const variableLocator = `${objectLocator}.${field.key || jsConvertCase.toSnakeCase(field.name) || jsConvertCase.toSnakeCase(field?.schema?.title)}`;
       onAddVariable?.(variableLocator, field.schema ?? {});
-      onSelect({
+      onOptionSelect({
         $var: variableLocator
       });
-    } else if (option.drilldownOptionFactories) {
+    } else if (option.drillDownOptionFactory || option.childCategory && !option.value) {
       drillDown(option);
-    } else if (option.drillup) {
-      drillUp();
     } else {
-      onSelect(option.value);
+      onOptionSelect(option.value);
     }
   }
   return /* @__PURE__ */ jsxRuntime.jsx(DropdownList, { state: optionsState, error: optionsError, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -144,16 +148,19 @@ function DropdownList({
   children
 }) {
   if (state === "rejected" || error) {
-    return /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.List, { children: /* @__PURE__ */ jsxRuntime.jsxs(index.DropdownUI.Item, { hasError: true, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(DropdownUIElements.ItemIcon, { type: index$1.SvgIconType.AlertTriangle }),
-      /* @__PURE__ */ jsxRuntime.jsx(DropdownUIElements.ItemTitle, { children: error?.message || "Something went wrong" })
-    ] }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.List, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      index.DropdownUI.ErrorHeading,
+      {
+        text: error?.message || "Something went wrong"
+      }
+    ) });
   }
   if (state === "pending") {
-    return /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.List, { children: /* @__PURE__ */ jsxRuntime.jsxs(index.DropdownUI.Item, { readonly: true, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(DropdownUIElements.ItemIcon, { type: index$1.SvgIconType.Loader }),
-      /* @__PURE__ */ jsxRuntime.jsx(DropdownUIElements.ItemTitle, { children: "Loading" })
-    ] }) });
+    return /* @__PURE__ */ jsxRuntime.jsxs(index.DropdownUI.List, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.LoadingItem, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.LoadingItem, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.LoadingItem, {})
+    ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.List, { children });
 }
@@ -168,10 +175,12 @@ function DropdownListOptions({
     return null;
   }
   if (options.length === 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.Item, { readonly: true, children: /* @__PURE__ */ jsxRuntime.jsxs(DropdownUIElements.ItemTitle, { children: [
-      "No results found ",
-      searchTerm ? `for: ${searchTerm}` : ""
-    ] }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      index.DropdownUI.NoOptionsHeading,
+      {
+        text: searchTerm ? `No results found for: ${searchTerm}` : "No results found"
+      }
+    );
   }
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: options.map((option, idx) => /* @__PURE__ */ jsxRuntime.jsx(
     Option.default,

package/dist/cjs/components/ComboBox/Dropdown/SearchInput.cjs

@@ -2,25 +2,23 @@
 /*
  * 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';
 
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
 var index = require('../../DropdownUI/index.cjs');
-var keyboardEvents = require('../../../hooks/keyboard-events.cjs');
 var comboboxDropdownSearch = require('../context/combobox-dropdown-search.cjs');
 var comboboxDropdownContext = require('../context/combobox-dropdown-context.cjs');
-var tabs = require('./tabs.cjs');
+var categoryContentMapping = require('./categoryContentMapping.cjs');
 var comboboxContext = require('../context/combobox-context.cjs');
 
 function SearchInput({ autoFocus }) {
-  const { activeTab } = comboboxDropdownContext.useComboBoxDropdownContext();
+  const { activeCategory } = comboboxDropdownContext.useComboBoxDropdownContext();
   const { hideSearch } = comboboxDropdownSearch.useComboBoxDropdownSearchContext();
-  if (activeTab && tabs.renderTabs[activeTab]?.hideSearchInput) {
+  if (activeCategory && categoryContentMapping.renderCategories[activeCategory]?.hideSearchInput) {
     return null;
   }
   if (hideSearch) {
@@ -32,24 +30,15 @@ function DropdownSearchComponent({
   autoFocus
 }) {
   const { value: parentInputValue } = comboboxContext.useComboBox();
-  const [searchInputElement, setSearchInputElement] = React.useState(null);
-  const {
-    searchValue,
-    setSearchValue,
-    drillDownDepth,
-    searchSource,
-    setSearchSource
-  } = comboboxDropdownSearch.useComboBoxDropdownSearchContext();
-  const canUseParentInputAsPlaceholder = !searchValue && typeof parentInputValue === "string" && !!parentInputValue && drillDownDepth === 0 && searchSource === "editor";
-  keyboardEvents.useOptionListKeyNavDispatch(searchInputElement);
+  const { canUseParentInputSearchValue } = comboboxDropdownContext.useComboBoxDropdownContext();
+  const { searchValue, setSearchValue, setSearchSource } = comboboxDropdownSearch.useComboBoxDropdownSearchContext();
   return /* @__PURE__ */ jsxRuntime.jsx(
     index.DropdownUI.Search,
     {
-      ref: setSearchInputElement,
       value: searchValue,
       onChange: setSearchValue,
       autoFocus,
-      placeholder: canUseParentInputAsPlaceholder ? parentInputValue : void 0,
+      placeholder: canUseParentInputSearchValue ? parentInputValue : void 0,
       onFocus: () => setSearchSource("combobox")
     }
   );

package/dist/cjs/components/ComboBox/Dropdown/categoryContentMapping.cjs

@@ -0,0 +1,71 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.4-beta.0
+ */
+'use client';
+
+'use strict';
+
+var svgIconType = require('../../SvgIcon/svg-icon-type.cjs');
+var types = require('../types.cjs');
+var Options = require('./Categories/Options.cjs');
+var Variables = require('./Categories/Variables.cjs');
+var index = require('./Categories/Formulas/index.cjs');
+var CustomValue = require('./Categories/CustomValue.cjs');
+var Lookup = require('./Categories/Lookup.cjs');
+var Root = require('./Categories/Root.cjs');
+var DropdownPanelFormulaConfig = require('./Categories/Formulas/DropdownPanelFormulaConfig.cjs');
+
+const renderCategories = {
+  [types.DropdownCategoryType.ROOT]: {
+    title: "Root",
+    hideSearchInput: false
+  },
+  [types.DropdownCategoryType.CUSTOM]: {
+    title: "Custom Value",
+    icon: svgIconType.SvgIconType.SchemaType_object,
+    hideSearchInput: true
+  },
+  [types.DropdownCategoryType.VARIABLE]: {
+    title: "Variables",
+    icon: svgIconType.SvgIconType.Variable
+  },
+  [types.DropdownCategoryType.OPTIONS]: {
+    title: "Option"
+  },
+  [types.DropdownCategoryType.FORMULA]: {
+    title: "Formulas",
+    icon: svgIconType.SvgIconType.Function,
+    hideSearchInput: false
+  },
+  [types.DropdownCategoryType.FORMULA_CONFIG]: {
+    title: "Formulas",
+    icon: svgIconType.SvgIconType.Function,
+    hideSearchInput: true
+  },
+  [types.DropdownCategoryType.LOOKUP_OPTIONS]: {
+    title: "Lookup Options",
+    hideSearchInput: false
+  },
+  [types.DropdownCategoryType.SELECT_FROM_UDM_DYNAMICALLY]: {
+    title: "Select Dynamically",
+    hideSearchInput: true,
+    hasConfigUI: true,
+    icon: svgIconType.SvgIconType.Search
+  }
+};
+const CATEGORY_COMPONENTS = {
+  [types.DropdownCategoryType.ROOT]: Root.RootCategoryContent,
+  [types.DropdownCategoryType.OPTIONS]: Options.OptionsCategoryContent,
+  [types.DropdownCategoryType.VARIABLE]: Variables.VariablesCategoryContent,
+  [types.DropdownCategoryType.FORMULA]: index.FormulasCategoryContent,
+  [types.DropdownCategoryType.FORMULA_CONFIG]: DropdownPanelFormulaConfig.DropdownPanelFormulaConfig,
+  [types.DropdownCategoryType.CUSTOM]: CustomValue.CustomValueCategoryContent,
+  [types.DropdownCategoryType.SELECT_FROM_UDM_DYNAMICALLY]: Lookup.LookupCategoryContent,
+  [types.DropdownCategoryType.LOOKUP_OPTIONS]: Root.RootCategoryContent
+};
+
+exports.CATEGORY_COMPONENTS = CATEGORY_COMPONENTS;
+exports.renderCategories = renderCategories;

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

@@ -0,0 +1,22 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.4-beta.0
+ */
+'use client';
+
+'use strict';
+
+var React = require('react');
+require('../../../ui-kit/styled/popover.cjs');
+var popover = require('@ark-ui/react/popover');
+
+const useMountDropdownReposition = () => {
+  const context = popover.usePopoverContext();
+  React.useEffect(() => {
+    context.reposition();
+  }, [context.reposition]);
+};
+
+exports.useMountDropdownReposition = useMountDropdownReposition;