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

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3-beta.2
+ * v2.0.3
  */
 'use client';
 
@@ -16,16 +16,15 @@ var useWindowEvent = require('../../../hooks/useWindowEvent.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');
 
 const Dropdown = React.forwardRef(
   ({
     referenceElement,
     topDropdownPanelComponent,
     autoFocusOnSearch,
-    onSelect,
+    onOptionSelect,
     onClose
   }, ref) => {
     const { isClickInsideRefsAndChildren } = comboboxDropdownStack.useDropdownStackContext(
@@ -39,55 +38,28 @@ const Dropdown = React.forwardRef(
     useWindowEvent.useWindowEvent("keydown", (e) => {
       e.key === "Escape" && onClose();
     });
-    const { availableTabs } = comboboxDropdownContext.useComboBoxDropdownContext();
-    if (availableTabs === null) {
+    const { availableCategories } = comboboxDropdownContext.useComboBoxDropdownContext();
+    if (availableCategories === 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" }) }) }) });
+    if (availableCategories?.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.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(comboboxDropdownStack.DropdownStackContextProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(Popper.DropdownUIPopper, { referenceElement, children: /* @__PURE__ */ jsxRuntime.jsxs(index.DropdownUI, { ref, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(DropdownTabs, {}),
+      /* @__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 })
+      /* @__PURE__ */ jsxRuntime.jsx(ActiveCategoryContent.ActiveCategoryContent, { onOptionSelect })
     ] }) }) });
   }
 );
-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);
 }
 
 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.2
+ * v2.0.3
  */
 '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.2
+ * v2.0.3
  */
 'use client';
 
@@ -12,42 +12,39 @@ 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 [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_LEFT, () => {
+    drillUp();
+  });
+  keyboardEvents.useKeyboardEventSubscribe(keyboardEvents.EVENT_TYPE.OPTION_RIGHT, handleKeyEnter);
   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
-  );
+  const [options = [], optionsError, optionsState] = optionsPayload;
   useDeepEffect.useDeepEffect(() => {
     if (!options?.length) {
       return;
@@ -59,17 +56,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 +93,7 @@ function OptionsList({ onSelect }) {
     return !option.isSection;
   }
   function handleKeyEnter() {
-    if (currentOption) {
+    if (currentOption && !currentOption.isSection) {
       handleOptionSelect(currentOption);
     }
   }
@@ -116,15 +102,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 +128,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 +155,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.2
+ * v2.0.3
  */
 '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,78 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3
+ */
+'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.UDMEntity
+  },
+  [types.DropdownCategoryType.SELECT_FROM_COLLECTION_DYNAMICALLY]: {
+    title: "Select Dynamically",
+    hideSearchInput: true,
+    hasConfigUI: true,
+    icon: svgIconType.SvgIconType.UDMEntity
+  }
+};
+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.SELECT_FROM_COLLECTION_DYNAMICALLY]: Lookup.LookupCategoryContent,
+  [types.DropdownCategoryType.LOOKUP_OPTIONS]: Root.RootCategoryContent
+};
+
+exports.CATEGORY_COMPONENTS = CATEGORY_COMPONENTS;
+exports.renderCategories = renderCategories;

package/dist/cjs/components/ComboBox/Edit/OptionSelector.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3-beta.2
+ * v2.0.3
  */
 'use client';
 
@@ -13,24 +13,22 @@ var clsx = require('clsx');
 var React = require('react');
 require('../../ComboBoxElements/TipTapEditor/Editor.cjs');
 require('../../ComboBoxElements/TipTapEditor/EditorStandAlone.cjs');
-require('../../ComboBoxElements/TipTapEditor/TagComponent.cjs');
-require('../../SvgIcon/index.cjs');
+var types = require('../types.cjs');
 require('@integration-app/sdk');
 require('fuse');
+require('../Dropdown/categoryContentMapping.cjs');
 var clicks = require('../../ComboBoxElements/TipTapEditor/helpers/clicks.cjs');
-var index$1 = require('../../DataBuilderUI/index.cjs');
+var index = require('../../DataBuilderUI/index.cjs');
 var getRefElement = require('../../../helpers/getRefElement.cjs');
 var OptionSelector_module = require('./OptionSelector.module.css.cjs');
-var types = require('../types.cjs');
-var Dropdown = require('../Dropdown/Dropdown.cjs');
-require('../../DropdownUI/index.cjs');
-require('../context/combobox-dropdown-search.cjs');
-var comboboxDropdownContext = require('../context/combobox-dropdown-context.cjs');
-require('../Dropdown/tabs.cjs');
-var comboboxContext = require('../context/combobox-context.cjs');
 var FieldWrapper = require('../../ComboBoxElements/FieldWrapper.cjs');
-var index = require('../Value/index.cjs');
-var Schema = require('../Value/Schema.cjs');
+var comboboxContext = require('../context/combobox-context.cjs');
+var comboboxDropdownContext = require('../context/combobox-dropdown-context.cjs');
+require('../Value/Formula.cjs');
+require('../Value/Schema.cjs');
+var ComboBoxValue = require('../Value/ComboBoxValue.cjs');
+var isDefinedValue = require('../Value/isDefinedValue.cjs');
+var Dropdown = require('../Dropdown/Dropdown.cjs');
 
 function OptionSelector({
   placeholder,
@@ -52,7 +50,7 @@ function OptionSelector({
     closeDropdown,
     topDropdownPanelComponent
   } = comboboxContext.useComboBox();
-  const { activeTab } = comboboxDropdownContext.useComboBoxDropdownContext();
+  const { activeCategory } = comboboxDropdownContext.useComboBoxDropdownContext();
   function handleOpenDropdown() {
     if (disabled) return;
     openDropdown();
@@ -69,10 +67,10 @@ function OptionSelector({
     }
   };
   function handleOptionSelect(option) {
-    const keepDropdownOpen = activeTab && [
-      types.ComboBoxTabType.SELECT_FROM_COLLECTION_DYNAMICALLY,
-      types.ComboBoxTabType.SELECT_FROM_UDM_DYNAMICALLY
-    ].includes(activeTab);
+    const keepDropdownOpen = activeCategory && [
+      types.DropdownCategoryType.SELECT_FROM_COLLECTION_DYNAMICALLY,
+      types.DropdownCategoryType.SELECT_FROM_UDM_DYNAMICALLY
+    ].includes(activeCategory);
     onChange(option);
     if (!keepDropdownOpen) {
       handleCloseDropdown();
@@ -82,7 +80,7 @@ function OptionSelector({
     onChange(void 0);
     handleCloseDropdown();
   };
-  const requiredAndEmptyField = required && Schema.isDefinedValue(value);
+  const requiredAndEmptyField = required && isDefinedValue.isDefinedValue(value);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     FieldWrapper.FieldWrapper,
     {
@@ -113,7 +111,7 @@ function OptionSelector({
             referenceElement: fieldValueRef,
             topDropdownPanelComponent,
             autoFocusOnSearch: true,
-            onSelect: handleOptionSelect,
+            onOptionSelect: handleOptionSelect,
             onClose: handleCloseDropdown
           }
         )
@@ -135,7 +133,7 @@ const Value = React.forwardRef(
     const { value } = comboboxContext.useComboBox();
     return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: OptionSelector_module.default.valueWrapper, ref, children: [
       !!valueComponent ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: valueComponent }) : /* @__PURE__ */ jsxRuntime.jsx(
-        index.ComboBoxValue,
+        ComboBoxValue.ComboBoxValue,
         {
           className,
           placeholder,
@@ -145,14 +143,14 @@ const Value = React.forwardRef(
           isEdited
         }
       ),
-      Schema.isDefinedValue(value) && onDelete && /* @__PURE__ */ jsxRuntime.jsx(
-        index$1.ActionBar,
+      isDefinedValue.isDefinedValue(value) && onDelete && /* @__PURE__ */ jsxRuntime.jsx(
+        index.ActionBar,
         {
           className: clsx(
             OptionSelector_module.default.actionBar,
             isEdited && OptionSelector_module.default.actionBar__visible
           ),
-          children: /* @__PURE__ */ jsxRuntime.jsx(index$1.ActionBar.DeleteButton, { onClick: onDelete })
+          children: /* @__PURE__ */ jsxRuntime.jsx(index.ActionBar.DeleteButton, { onClick: onDelete })
         }
       )
     ] });

package/dist/cjs/components/ComboBox/Edit/OptionSelector.module.css.cjs

@@ -1,7 +1,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3-beta.2
+ * v2.0.3
  */
 'use client';