@integration-app/react 2.18.0 → 2.20.0

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.18.0
+ * v2.20.0
  */
 'use client';
 
@@ -12,25 +12,27 @@ import { DropdownUI } from '../../DropdownUI/index.mjs';
 import { useNavigationContext } from './KeyboardNavigation/NavigationContext.mjs';
 import { useComboBoxDropdownContext } from '../context/combobox-dropdown-context.mjs';
 
-const DrillUpButton = forwardRef(({ onClick, ...props }, ref) => {
-  const { drillUp, drillDownStackTop } = useComboBoxDropdownContext();
-  const { currentItem } = useNavigationContext();
-  if (!drillDownStackTop) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    DropdownUI.BackButton,
-    {
-      ref,
-      onClick: (e) => {
-        drillUp();
-        onClick?.(e);
-      },
-      "data-current": currentItem === "drill-up" ? true : void 0,
-      ...props,
-      children: drillDownStackTop.label
+const DrillUpButton = forwardRef(
+  ({ onClick, ...props }, ref) => {
+    const { drillUp, drillDownStackTop } = useComboBoxDropdownContext();
+    const { currentItem } = useNavigationContext();
+    if (!drillDownStackTop) {
+      return null;
     }
-  );
-});
+    return /* @__PURE__ */ jsx(
+      DropdownUI.BackButton,
+      {
+        ref,
+        onClick: (e) => {
+          drillUp();
+          onClick?.(e);
+        },
+        "data-current": currentItem === "drill-up" ? true : void 0,
+        ...props,
+        children: drillDownStackTop.label
+      }
+    );
+  }
+);
 
 export { DrillUpButton };

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.18.0
+ * v2.20.0
  */
 'use client';
 
@@ -21,6 +21,7 @@ function Dropdown({
   autoFocusOnSearch,
   onOptionSelect,
   editorRef,
+  searchInputRef,
   children
 }) {
   const { availableCategories } = useComboBoxDropdownContext();
@@ -42,7 +43,7 @@ function Dropdown({
     /* @__PURE__ */ jsx(NavigationContextProvider, { children: /* @__PURE__ */ jsxs(DropdownPopoverContent, { children: [
       /* @__PURE__ */ jsx(DrillUpButton, {}),
       topDropdownPanelComponent && /* @__PURE__ */ jsx(Fragment, { children: topDropdownPanelComponent }),
-      /* @__PURE__ */ jsx(SearchInput, { autoFocus: autoFocusOnSearch }),
+      /* @__PURE__ */ jsx(SearchInput, { ref: searchInputRef, autoFocus: autoFocusOnSearch }),
       /* @__PURE__ */ jsx(ActiveCategoryContent, { onOptionSelect })
     ] }) })
   ] }) });

package/dist/esm/components/ComboBox/Dropdown/KeyboardNavigation/NavigationContext.mjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.18.0
+ * v2.20.0
  */
 'use client';
 
@@ -19,18 +19,15 @@ const NavigationContext = createContext({
   onOptionsListChange: () => null
 });
 function payloadReducer(state, action) {
-  const compactState = Object.entries(state).reduce(
-    (acc, [orderId, payload]) => {
-      if (!payload.options.length && !payload.fallbackOptions.length) {
-        return acc;
-      }
-      return {
-        ...acc,
-        [Number(orderId)]: payload
-      };
-    },
-    {}
-  );
+  const compactState = Object.entries(state).reduce((acc, [orderId, payload]) => {
+    if (!payload.options.length && !payload.fallbackOptions.length) {
+      return acc;
+    }
+    return {
+      ...acc,
+      [Number(orderId)]: payload
+    };
+  }, {});
   return {
     ...compactState,
     [action.orderId]: {
@@ -39,9 +36,7 @@ function payloadReducer(state, action) {
     }
   };
 }
-function NavigationContextProvider({
-  children
-}) {
+function NavigationContextProvider({ children }) {
   const [currentItem, setCurrentItem] = useState(null);
   const [payload, dispatch] = useReducer(payloadReducer, {});
   const { isOptionSelected, drillDownStackTop } = useComboBoxDropdownContext();
@@ -114,11 +109,7 @@ function NavigationContextProvider({
       setCurrentItem(currentOption);
     }
   };
-  const onOptionsListChange = ({
-    orderId,
-    options,
-    fallbackOptions
-  }) => {
+  const onOptionsListChange = ({ orderId, options, fallbackOptions }) => {
     dispatch({
       orderId,
       options,
@@ -140,12 +131,7 @@ function NavigationContextProvider({
 }
 function useNavigationContext(options = [], fallbackOptions = []) {
   const orderId = useRef(Date.now());
-  const {
-    currentItem,
-    moveToNextItem,
-    moveToPreviousItem,
-    onOptionsListChange
-  } = useContext(NavigationContext);
+  const { currentItem, moveToNextItem, moveToPreviousItem, onOptionsListChange } = useContext(NavigationContext);
   useDeepEffect(() => {
     onOptionsListChange({
       orderId: orderId.current,
@@ -176,9 +162,7 @@ const makeOptionComparable = (option) => {
 };
 const getOnlyItemOptions = (options) => options.filter((o) => !o.isSection);
 function getOptionIndex(option, options) {
-  return options.findIndex(
-    (o) => deepEqual(makeOptionComparable(o), makeOptionComparable(option))
-  );
+  return options.findIndex((o) => deepEqual(makeOptionComparable(o), makeOptionComparable(option)));
 }
 const getUnifiedOptionsList = (payload) => {
   const { options, fallbackOptions } = Object.entries(payload).sort(([orderId]) => Number(orderId)).reduce(

package/dist/esm/components/ComboBox/Dropdown/KeyboardNavigation/useKeyboardBinding.mjs

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

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.18.0
+ * v2.20.0
  */
 'use client';
 
@@ -29,21 +29,13 @@ function DropdownOption({
   if (option.isSection) {
     return /* @__PURE__ */ jsx(DropdownUI.ListHeader, { children: valueProps.label });
   }
-  return /* @__PURE__ */ jsxs(
-    DropdownUI.Item,
-    {
-      current,
-      onClick: handleOnSelect,
-      "aria-selected": selected,
-      children: [
-        /* @__PURE__ */ jsx(DropdownUI.ItemIcon, { ...iconProps, framed: true }),
-        /* @__PURE__ */ jsx(DropdownUI.ItemTitle, { children: option.label }),
-        option.hint && /* @__PURE__ */ jsx(DropdownUI.ItemHint, { value: option.hint, prefix: option.hintPrefix }),
-        hasChild && /* @__PURE__ */ jsx(DropdownUI.ItemNestingIndicator, { count: option.childrenCount, children: /* @__PURE__ */ jsx(DropdownUI.ItemIcon, { type: SvgIconType.ChevronRight }) }),
-        selected && /* @__PURE__ */ jsx(DropdownUI.ItemIcon, { type: SvgIconType.Check })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs(DropdownUI.Item, { current, onClick: handleOnSelect, "aria-selected": selected, children: [
+    /* @__PURE__ */ jsx(DropdownUI.ItemIcon, { ...iconProps, framed: true }),
+    /* @__PURE__ */ jsx(DropdownUI.ItemTitle, { children: option.label }),
+    option.hint && /* @__PURE__ */ jsx(DropdownUI.ItemHint, { value: option.hint, prefix: option.hintPrefix }),
+    hasChild && /* @__PURE__ */ jsx(DropdownUI.ItemNestingIndicator, { count: option.childrenCount, children: /* @__PURE__ */ jsx(DropdownUI.ItemIcon, { type: SvgIconType.ChevronRight }) }),
+    selected && /* @__PURE__ */ jsx(DropdownUI.ItemIcon, { type: SvgIconType.Check })
+  ] });
 }
 function getIconProps(option) {
   const { iconType: type, iconUri: src } = option;

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.18.0
+ * v2.20.0
  */
 'use client';
 
@@ -20,18 +20,10 @@ import { useNavigationContext } from './KeyboardNavigation/NavigationContext.mjs
 import { useComboBox } from '../context/combobox-context.mjs';
 import { useKeyboardBinding } from './KeyboardNavigation/useKeyboardBinding.mjs';
 
-function OptionsList({
-  onOptionSelect
-}) {
+function OptionsList({ onOptionSelect }) {
   const { onAddVariable } = useDataBuilder();
   const { field } = useDataBuilderField();
-  const {
-    isOptionSelected,
-    canUseParentInputSearchValue,
-    drillDown,
-    optionsPayload,
-    drillUp
-  } = useComboBoxDropdownContext();
+  const { isOptionSelected, canUseParentInputSearchValue, drillDown, optionsPayload, drillUp } = useComboBoxDropdownContext();
   const { value: parentInputValue } = useComboBox();
   const [result, optionsError, optionsState] = optionsPayload;
   const { options = [], fallbackOptions = [] } = result || {};
@@ -71,12 +63,7 @@ function DropdownListState({
   children
 }) {
   if (state === "rejected" || error) {
-    return /* @__PURE__ */ jsx(
-      DropdownUI.ErrorHeading,
-      {
-        text: error?.message || "Something went wrong"
-      }
-    );
+    return /* @__PURE__ */ jsx(DropdownUI.ErrorHeading, { text: error?.message || "Something went wrong" });
   }
   if (state === "pending") {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -96,12 +83,7 @@ function DropdownListOptions({
 }) {
   const { currentItem } = useNavigationContext();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    !options.length && /* @__PURE__ */ jsx(
-      DropdownUI.NoOptionsHeading,
-      {
-        text: searchTerm ? `No results found for: ${searchTerm}` : "No results found"
-      }
-    ),
+    !options.length && /* @__PURE__ */ jsx(DropdownUI.NoOptionsHeading, { text: searchTerm ? `No results found for: ${searchTerm}` : "No results found" }),
     options.map((option, idx) => /* @__PURE__ */ jsx(
       DropdownOption,
       {

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

@@ -2,18 +2,26 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.18.0
+ * v2.20.0
  */
 'use client';
 
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import '../../../styled-system/css/css.mjs';
+import '../../../styled-system/helpers.mjs';
+import '../../../styled-system/jsx/is-valid-prop.mjs';
+import { Flex } from '../../../styled-system/jsx/flex.mjs';
+import '../../../styled-system/patterns/visually-hidden.mjs';
 import { DropdownUI } from '../../DropdownUI/index.mjs';
+import { SvgIcon } from '../../SvgIcon/index.mjs';
+import { SvgIconType } from '../../SvgIcon/svg-icon-type.mjs';
 import { useComboBox } from '../context/combobox-context.mjs';
 import { useComboBoxDropdownContext } from '../context/combobox-dropdown-context.mjs';
 import { useComboBoxDropdownSearchContext } from '../context/combobox-dropdown-search.mjs';
 import { dropdownCategoryConfig } from '../shared.mjs';
 
-function SearchInput({ autoFocus }) {
+const SearchInput = forwardRef(({ autoFocus }, ref) => {
   const { activeCategory } = useComboBoxDropdownContext();
   const { hideSearch } = useComboBoxDropdownSearchContext();
   if (activeCategory && dropdownCategoryConfig[activeCategory]?.hideSearchInput) {
@@ -22,24 +30,40 @@ function SearchInput({ autoFocus }) {
   if (hideSearch) {
     return null;
   }
-  return /* @__PURE__ */ jsx(DropdownSearchComponent, { autoFocus });
-}
-function DropdownSearchComponent({
-  autoFocus
-}) {
-  const { value: parentInputValue } = useComboBox();
+  return /* @__PURE__ */ jsx(DropdownSearchComponent, { autoFocus, ref });
+});
+const DropdownSearchComponent = forwardRef(({ autoFocus }, ref) => {
+  const { value: parentInputValue, onValueChange: setParentValue } = useComboBox();
   const { canUseParentInputSearchValue } = useComboBoxDropdownContext();
-  const { searchValue, setSearchValue, setSearchSource } = useComboBoxDropdownSearchContext();
-  return /* @__PURE__ */ jsx(
-    DropdownUI.Search,
-    {
-      value: searchValue,
-      onChange: setSearchValue,
-      autoFocus,
-      placeholder: canUseParentInputSearchValue ? parentInputValue : void 0,
-      onFocus: () => setSearchSource("combobox")
+  const { dropdownSearchInputValue, setDropdownSearchInputValue, setSearchSource } = useComboBoxDropdownSearchContext();
+  const hasParentInputSearch = !!parentInputValue && typeof parentInputValue === "string" && canUseParentInputSearchValue;
+  const hasDropdownInputSearch = dropdownSearchInputValue && typeof dropdownSearchInputValue === "string";
+  const hasSearchValue = hasParentInputSearch || hasDropdownInputSearch;
+  const handleClear = () => {
+    if (hasParentInputSearch) {
+      setParentValue?.("");
     }
-  );
-}
+    if (hasDropdownInputSearch) {
+      setDropdownSearchInputValue("");
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Flex, { dir: "row", gap: "0", justifyContent: "space-between", alignItems: "center", children: [
+      /* @__PURE__ */ jsx(
+        DropdownUI.Search,
+        {
+          ref,
+          value: dropdownSearchInputValue,
+          onChange: setDropdownSearchInputValue,
+          autoFocus,
+          placeholder: canUseParentInputSearchValue ? parentInputValue : void 0,
+          onFocus: () => setSearchSource("dropdown-search-input")
+        }
+      ),
+      hasSearchValue && /* @__PURE__ */ jsx(DropdownUI.ClearSearchButton, { onClick: handleClear, children: /* @__PURE__ */ jsx(SvgIcon, { type: SvgIconType.Close }) })
+    ] }),
+    /* @__PURE__ */ jsx(DropdownUI.SearchDivider, {})
+  ] });
+});
 
-export { DropdownSearchComponent, SearchInput };
+export { SearchInput };

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

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

package/dist/esm/components/ComboBox/DropdownPopover/DropdownPositioner.mjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.18.0
+ * v2.20.0
  */
 'use client';
 
@@ -18,9 +18,7 @@ import '../../../styled-system/patterns/visually-hidden.mjs';
 
 const GUTTER = 10;
 const VIEWPORT_PADDING = 8;
-const DropdownPositioner = ({
-  children
-}) => {
+const DropdownPositioner = ({ children }) => {
   const context = usePopoverContext();
   const anchorPops = context.getAnchorProps();
   const { refs, floatingStyles } = useFloating({
@@ -46,24 +44,12 @@ const DropdownPositioner = ({
           availableWidth = Math.floor(availableWidth);
           availableHeight = Math.floor(availableHeight);
           floating.style.setProperty("--available-width", `${availableWidth}px`);
-          floating.style.setProperty(
-            "--available-height",
-            `${availableHeight}px`
-          );
+          floating.style.setProperty("--available-height", `${availableHeight}px`);
         }
       })
     ]
   });
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      ref: refs.setFloating,
-      style: floatingStyles,
-      zIndex: "popover",
-      isolation: "isolate",
-      children
-    }
-  );
+  return /* @__PURE__ */ jsx(Box, { ref: refs.setFloating, style: floatingStyles, zIndex: "popover", isolation: "isolate", children });
 };
 
 export { DropdownPositioner };

package/dist/esm/components/ComboBox/DropdownPopover/index.mjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.18.0
+ * v2.20.0
  */
 'use client';
 
@@ -21,6 +21,7 @@ import '@integration-app/sdk';
 import '../shared.mjs';
 import { DropdownPositioner } from './DropdownPositioner.mjs';
 import { BoundedPortal } from '../../FloatingPortalBoundary/index.mjs';
+import { DropdownFocusTrap } from '../FocusTrap/index.mjs';
 
 const GUTTER = 10;
 const POSITIONING = {
@@ -29,9 +30,7 @@ const POSITIONING = {
   slide: true,
   fitViewport: true
 };
-function DropdownPopoverProvider({
-  children
-}) {
+function DropdownPopoverProvider({ children }) {
   const { isDropdownOpen, closeDropdown } = useComboBox();
   return /* @__PURE__ */ jsx(
     Root,
@@ -44,14 +43,12 @@ function DropdownPopoverProvider({
       portalled: true,
       autoFocus: false,
       positioning: POSITIONING,
-      children
+      children: /* @__PURE__ */ jsx(DropdownFocusTrap, { children })
     }
   );
 }
-function DropdownPopoverContent({
-  children
-}) {
-  return /* @__PURE__ */ jsx(BoundedPortal, { children: /* @__PURE__ */ jsx(DropdownPositioner, { children: /* @__PURE__ */ jsx(Content, { children }) }) });
+function DropdownPopoverContent({ children }) {
+  return /* @__PURE__ */ jsx(BoundedPortal, { children: /* @__PURE__ */ jsx(DropdownPositioner, { children: /* @__PURE__ */ jsx(DropdownFocusTrap, { children: /* @__PURE__ */ jsx(Content, { children }) }) }) });
 }
 function DropdownAnchor({ children }) {
   return /* @__PURE__ */ jsx(Anchor, { display: "inline", children });
@@ -67,19 +64,10 @@ function Content({ children }) {
       closeDropdown();
     }
   });
-  return /* @__PURE__ */ jsx(
-    Content$1,
-    {
-      ref,
-      "data-navigation-emitter-id": DROPDOWN_NAVIGATOR_ID,
-      asChild: true,
-      "aria-labelledby": id,
-      children: /* @__PURE__ */ jsx(DropdownUI, { children: /* @__PURE__ */ jsxs(DropdownUI.Content, { children: [
-        /* @__PURE__ */ jsx(Title, { srOnly: true, id, children: "Options menu" }),
-        children
-      ] }) })
-    }
-  );
+  return /* @__PURE__ */ jsx(Content$1, { ref, "data-navigation-emitter-id": DROPDOWN_NAVIGATOR_ID, asChild: true, "aria-labelledby": id, children: /* @__PURE__ */ jsx(DropdownUI, { children: /* @__PURE__ */ jsxs(DropdownUI.Content, { children: [
+    /* @__PURE__ */ jsx(Title, { srOnly: true, id, children: "Options menu" }),
+    children
+  ] }) }) });
 }
 function useClick(cb) {
   useWindowEvent("mouseup", cb);

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.18.0
+ * v2.20.0
  */
 'use client';
 
@@ -56,9 +56,7 @@ function OptionSelector({
     }
   };
   function handleOptionSelect(option) {
-    const keepDropdownOpen = activeCategory && [DropdownCategoryType.SELECT_FROM_UDM_DYNAMICALLY].includes(
-      activeCategory
-    );
+    const keepDropdownOpen = activeCategory && [DropdownCategoryType.SELECT_FROM_UDM_DYNAMICALLY].includes(activeCategory);
     onChange(option);
     if (!keepDropdownOpen) {
       closeDropdown();
@@ -103,16 +101,7 @@ function OptionSelector({
   );
 }
 const Value = forwardRef(
-  ({
-    className,
-    valueComponent,
-    placeholder,
-    onClick,
-    onChange,
-    onDelete,
-    disabled,
-    isEdited
-  }, ref) => {
+  ({ 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(
@@ -126,16 +115,7 @@ const Value = forwardRef(
           isEdited
         }
       ),
-      isDefinedValue(value) && onDelete && /* @__PURE__ */ jsx(
-        ActionBar,
-        {
-          className: clsx(
-            classes.actionBar,
-            isEdited && classes.actionBar__visible
-          ),
-          children: /* @__PURE__ */ jsx(ActionBar.DeleteButton, { onClick: onDelete })
-        }
-      )
+      isDefinedValue(value) && onDelete && /* @__PURE__ */ jsx(ActionBar, { className: clsx(classes.actionBar, isEdited && classes.actionBar__visible), children: /* @__PURE__ */ jsx(ActionBar.DeleteButton, { onClick: onDelete }) })
     ] });
   }
 );

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

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

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.18.0
+ * v2.20.0
  */
 'use client';
 
@@ -52,10 +52,7 @@ function TextInput({
   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
-    )) {
+    if (isClickInsideAnyOfElements && !isClickOnEditorCustomTagComponent(e?.target, fieldValueRef?.current)) {
       handleOpenDropdown();
       e?.stopPropagation();
     }
@@ -74,7 +71,7 @@ function TextInput({
       pasteTag({
         value: value2,
         autoOpen: openTagCombobox,
-        allowEditorSearchClear: searchSource === "editor"
+        allowEditorSearchClear: searchSource === "parent-input"
       });
     }
   };
@@ -101,7 +98,11 @@ function TextInput({
               ref: textInputRef,
               className,
               onFocus: () => {
-                setSearchSource("editor");
+                if (!value) {
+                  setSearchSource("parent-input");
+                } else {
+                  setSearchSource("indeterminate");
+                }
               },
               disabled,
               value,
@@ -126,11 +127,7 @@ function shouldRewriteValue(category) {
   ].includes(category);
 }
 function shouldCloseDropdown(category) {
-  return category && [
-    DropdownCategoryType.OPTIONS,
-    DropdownCategoryType.CUSTOM,
-    DropdownCategoryType.LOOKUP_OPTIONS
-  ].includes(category);
+  return category && [DropdownCategoryType.OPTIONS, DropdownCategoryType.CUSTOM, DropdownCategoryType.LOOKUP_OPTIONS].includes(category);
 }
 function valueHasDropdownWithFormula(value) {
   if (!isFormula(value)) return false;

package/dist/esm/components/ComboBox/FocusTrap/index.mjs

@@ -0,0 +1,19 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.20.0
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import FocusLock from 'react-focus-lock';
+import { useComboBox } from '../context/combobox-context.mjs';
+
+const TRAP_GROUP = "combobox-dropdown";
+function DropdownFocusTrap({ children }) {
+  const { isDropdownOpen, scopedComboboxId } = useComboBox();
+  return /* @__PURE__ */ jsx(FocusLock, { group: TRAP_GROUP + scopedComboboxId, disabled: !isDropdownOpen, returnFocus: true, autoFocus: false, as: "span", children });
+}
+
+export { DropdownFocusTrap };

package/dist/esm/components/ComboBox/Value/ComboBoxValue.mjs

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

package/dist/esm/components/ComboBox/Value/Formula.mjs

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