@integration-app/react 2.19.0 → 2.20.0

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.19.0
+ * v2.20.0
  */
 'use client';
 
@@ -12,9 +12,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var index = require('../../../DropdownUI/index.cjs');
 var OptionsList = require('../OptionsList.cjs');
 
-function VariablesCategoryContent({
-  onOptionSelect
-}) {
+function VariablesCategoryContent({ onOptionSelect }) {
   return /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.Panel, { children: /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.List, { children: /* @__PURE__ */ jsxRuntime.jsx(OptionsList.OptionsList, { onOptionSelect }) }) });
 }
 

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

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

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

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

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.19.0
+ * v2.20.0
  */
 'use client';
 
@@ -23,6 +23,7 @@ function Dropdown({
   autoFocusOnSearch,
   onOptionSelect,
   editorRef,
+  searchInputRef,
   children
 }) {
   const { availableCategories } = comboboxDropdownContext.useComboBoxDropdownContext();
@@ -44,7 +45,7 @@ function Dropdown({
     /* @__PURE__ */ jsxRuntime.jsx(NavigationContext.NavigationContextProvider, { 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(SearchInput.SearchInput, { ref: searchInputRef, autoFocus: autoFocusOnSearch }),
       /* @__PURE__ */ jsxRuntime.jsx(ActiveCategoryContent.ActiveCategoryContent, { onOptionSelect })
     ] }) })
   ] }) });

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.19.0
+ * v2.20.0
  */
 'use client';
 
@@ -21,18 +21,15 @@ const NavigationContext = React.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]: {
@@ -41,9 +38,7 @@ function payloadReducer(state, action) {
     }
   };
 }
-function NavigationContextProvider({
-  children
-}) {
+function NavigationContextProvider({ children }) {
   const [currentItem, setCurrentItem] = React.useState(null);
   const [payload, dispatch] = React.useReducer(payloadReducer, {});
   const { isOptionSelected, drillDownStackTop } = comboboxDropdownContext.useComboBoxDropdownContext();
@@ -116,11 +111,7 @@ function NavigationContextProvider({
       setCurrentItem(currentOption);
     }
   };
-  const onOptionsListChange = ({
-    orderId,
-    options,
-    fallbackOptions
-  }) => {
+  const onOptionsListChange = ({ orderId, options, fallbackOptions }) => {
     dispatch({
       orderId,
       options,
@@ -142,12 +133,7 @@ function NavigationContextProvider({
 }
 function useNavigationContext(options = [], fallbackOptions = []) {
   const orderId = React.useRef(Date.now());
-  const {
-    currentItem,
-    moveToNextItem,
-    moveToPreviousItem,
-    onOptionsListChange
-  } = React.useContext(NavigationContext);
+  const { currentItem, moveToNextItem, moveToPreviousItem, onOptionsListChange } = React.useContext(NavigationContext);
   useDeepEffect.useDeepEffect(() => {
     onOptionsListChange({
       orderId: orderId.current,
@@ -178,9 +164,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/cjs/components/ComboBox/Dropdown/KeyboardNavigation/useKeyboardBinding.cjs

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

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.19.0
+ * v2.20.0
  */
 'use client';
 
@@ -33,21 +33,13 @@ function DropdownOption({
   if (option.isSection) {
     return /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.ListHeader, { children: valueProps.label });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    index.DropdownUI.Item,
-    {
-      current,
-      onClick: handleOnSelect,
-      "aria-selected": selected,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.ItemIcon, { ...iconProps, framed: true }),
-        /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.ItemTitle, { children: option.label }),
-        option.hint && /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.ItemHint, { value: option.hint, prefix: option.hintPrefix }),
-        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 })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(index.DropdownUI.Item, { current, onClick: handleOnSelect, "aria-selected": selected, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.ItemIcon, { ...iconProps, framed: true }),
+    /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.ItemTitle, { children: option.label }),
+    option.hint && /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.ItemHint, { value: option.hint, prefix: option.hintPrefix }),
+    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 getIconProps(option) {
   const { iconType: type, iconUri: src } = option;

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.19.0
+ * v2.20.0
  */
 'use client';
 
@@ -22,18 +22,10 @@ var NavigationContext = require('./KeyboardNavigation/NavigationContext.cjs');
 var comboboxContext = require('../context/combobox-context.cjs');
 var useKeyboardBinding = require('./KeyboardNavigation/useKeyboardBinding.cjs');
 
-function OptionsList({
-  onOptionSelect
-}) {
+function OptionsList({ onOptionSelect }) {
   const { onAddVariable } = dataBuilderContext.default();
   const { field } = fieldContext.default();
-  const {
-    isOptionSelected,
-    canUseParentInputSearchValue,
-    drillDown,
-    optionsPayload,
-    drillUp
-  } = comboboxDropdownContext.useComboBoxDropdownContext();
+  const { isOptionSelected, canUseParentInputSearchValue, drillDown, optionsPayload, drillUp } = comboboxDropdownContext.useComboBoxDropdownContext();
   const { value: parentInputValue } = comboboxContext.useComboBox();
   const [result, optionsError, optionsState] = optionsPayload;
   const { options = [], fallbackOptions = [] } = result || {};
@@ -73,12 +65,7 @@ function DropdownListState({
   children
 }) {
   if (state === "rejected" || error) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      index.DropdownUI.ErrorHeading,
-      {
-        text: error?.message || "Something went wrong"
-      }
-    );
+    return /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.ErrorHeading, { text: error?.message || "Something went wrong" });
   }
   if (state === "pending") {
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -98,12 +85,7 @@ function DropdownListOptions({
 }) {
   const { currentItem } = NavigationContext.useNavigationContext();
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    !options.length && /* @__PURE__ */ jsxRuntime.jsx(
-      index.DropdownUI.NoOptionsHeading,
-      {
-        text: searchTerm ? `No results found for: ${searchTerm}` : "No results found"
-      }
-    ),
+    !options.length && /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.NoOptionsHeading, { text: searchTerm ? `No results found for: ${searchTerm}` : "No results found" }),
     options.map((option, idx) => /* @__PURE__ */ jsxRuntime.jsx(
       Option.default,
       {

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

@@ -2,20 +2,28 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.19.0
+ * v2.20.0
  */
 'use client';
 
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+require('../../../styled-system/css/css.cjs');
+require('../../../styled-system/helpers.cjs');
+require('../../../styled-system/jsx/is-valid-prop.cjs');
+var flex = require('../../../styled-system/jsx/flex.cjs');
+require('../../../styled-system/patterns/visually-hidden.cjs');
 var index = require('../../DropdownUI/index.cjs');
+var index$1 = require('../../SvgIcon/index.cjs');
+var svgIconType = require('../../SvgIcon/svg-icon-type.cjs');
 var comboboxContext = require('../context/combobox-context.cjs');
 var comboboxDropdownContext = require('../context/combobox-dropdown-context.cjs');
 var comboboxDropdownSearch = require('../context/combobox-dropdown-search.cjs');
 var shared = require('../shared.cjs');
 
-function SearchInput({ autoFocus }) {
+const SearchInput = React.forwardRef(({ autoFocus }, ref) => {
   const { activeCategory } = comboboxDropdownContext.useComboBoxDropdownContext();
   const { hideSearch } = comboboxDropdownSearch.useComboBoxDropdownSearchContext();
   if (activeCategory && shared.dropdownCategoryConfig[activeCategory]?.hideSearchInput) {
@@ -24,25 +32,40 @@ function SearchInput({ autoFocus }) {
   if (hideSearch) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(DropdownSearchComponent, { autoFocus });
-}
-function DropdownSearchComponent({
-  autoFocus
-}) {
-  const { value: parentInputValue } = comboboxContext.useComboBox();
+  return /* @__PURE__ */ jsxRuntime.jsx(DropdownSearchComponent, { autoFocus, ref });
+});
+const DropdownSearchComponent = React.forwardRef(({ autoFocus }, ref) => {
+  const { value: parentInputValue, onValueChange: setParentValue } = comboboxContext.useComboBox();
   const { canUseParentInputSearchValue } = comboboxDropdownContext.useComboBoxDropdownContext();
-  const { searchValue, setSearchValue, setSearchSource } = comboboxDropdownSearch.useComboBoxDropdownSearchContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    index.DropdownUI.Search,
-    {
-      value: searchValue,
-      onChange: setSearchValue,
-      autoFocus,
-      placeholder: canUseParentInputSearchValue ? parentInputValue : void 0,
-      onFocus: () => setSearchSource("combobox")
+  const { dropdownSearchInputValue, setDropdownSearchInputValue, setSearchSource } = comboboxDropdownSearch.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(flex.Flex, { dir: "row", gap: "0", justifyContent: "space-between", alignItems: "center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        index.DropdownUI.Search,
+        {
+          ref,
+          value: dropdownSearchInputValue,
+          onChange: setDropdownSearchInputValue,
+          autoFocus,
+          placeholder: canUseParentInputSearchValue ? parentInputValue : void 0,
+          onFocus: () => setSearchSource("dropdown-search-input")
+        }
+      ),
+      hasSearchValue && /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.ClearSearchButton, { onClick: handleClear, children: /* @__PURE__ */ jsxRuntime.jsx(index$1.SvgIcon, { type: svgIconType.SvgIconType.Close }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.SearchDivider, {})
+  ] });
+});
 
-exports.DropdownSearchComponent = DropdownSearchComponent;
 exports.SearchInput = SearchInput;

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

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

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.19.0
+ * v2.20.0
  */
 'use client';
 
@@ -20,9 +20,7 @@ require('../../../styled-system/patterns/visually-hidden.cjs');
 
 const GUTTER = 10;
 const VIEWPORT_PADDING = 8;
-const DropdownPositioner = ({
-  children
-}) => {
+const DropdownPositioner = ({ children }) => {
   const context = popover.usePopoverContext();
   const anchorPops = context.getAnchorProps();
   const { refs, floatingStyles } = react.useFloating({
@@ -48,24 +46,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__ */ jsxRuntime.jsx(
-    box.Box,
-    {
-      ref: refs.setFloating,
-      style: floatingStyles,
-      zIndex: "popover",
-      isolation: "isolate",
-      children
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsx(box.Box, { ref: refs.setFloating, style: floatingStyles, zIndex: "popover", isolation: "isolate", children });
 };
 
 exports.DropdownPositioner = DropdownPositioner;

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.19.0
+ * v2.20.0
  */
 'use client';
 
@@ -10,7 +10,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var index$1 = require('../../DropdownUI/index.cjs');
+var index$2 = require('../../DropdownUI/index.cjs');
 var constants = require('../../DropdownUI/constants.cjs');
 var keyboardEvents = require('../../../helpers/hooks/keyboard-events.cjs');
 var useWindowEvent = require('../../../helpers/hooks/useWindowEvent.cjs');
@@ -22,7 +22,8 @@ var comboboxDropdownStack = require('../context/combobox-dropdown-stack.cjs');
 require('@integration-app/sdk');
 require('../shared.cjs');
 var DropdownPositioner = require('./DropdownPositioner.cjs');
-var index = require('../../FloatingPortalBoundary/index.cjs');
+var index$1 = require('../../FloatingPortalBoundary/index.cjs');
+var index = require('../FocusTrap/index.cjs');
 
 const GUTTER = 10;
 const POSITIONING = {
@@ -31,9 +32,7 @@ const POSITIONING = {
   slide: true,
   fitViewport: true
 };
-function DropdownPopoverProvider({
-  children
-}) {
+function DropdownPopoverProvider({ children }) {
   const { isDropdownOpen, closeDropdown } = comboboxContext.useComboBox();
   return /* @__PURE__ */ jsxRuntime.jsx(
     popover.Root,
@@ -46,14 +45,12 @@ function DropdownPopoverProvider({
       portalled: true,
       autoFocus: false,
       positioning: POSITIONING,
-      children
+      children: /* @__PURE__ */ jsxRuntime.jsx(index.DropdownFocusTrap, { children })
     }
   );
 }
-function DropdownPopoverContent({
-  children
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(index.BoundedPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(DropdownPositioner.DropdownPositioner, { children: /* @__PURE__ */ jsxRuntime.jsx(Content, { children }) }) });
+function DropdownPopoverContent({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(index$1.BoundedPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(DropdownPositioner.DropdownPositioner, { children: /* @__PURE__ */ jsxRuntime.jsx(index.DropdownFocusTrap, { children: /* @__PURE__ */ jsxRuntime.jsx(Content, { children }) }) }) });
 }
 function DropdownAnchor({ children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(popover.Anchor, { display: "inline", children });
@@ -69,19 +66,10 @@ function Content({ children }) {
       closeDropdown();
     }
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    popover.Content,
-    {
-      ref,
-      "data-navigation-emitter-id": constants.DROPDOWN_NAVIGATOR_ID,
-      asChild: true,
-      "aria-labelledby": id,
-      children: /* @__PURE__ */ jsxRuntime.jsx(index$1.DropdownUI, { children: /* @__PURE__ */ jsxRuntime.jsxs(index$1.DropdownUI.Content, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(popover.Title, { srOnly: true, id, children: "Options menu" }),
-        children
-      ] }) })
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsx(popover.Content, { ref, "data-navigation-emitter-id": constants.DROPDOWN_NAVIGATOR_ID, asChild: true, "aria-labelledby": id, children: /* @__PURE__ */ jsxRuntime.jsx(index$2.DropdownUI, { children: /* @__PURE__ */ jsxRuntime.jsxs(index$2.DropdownUI.Content, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(popover.Title, { srOnly: true, id, children: "Options menu" }),
+    children
+  ] }) }) });
 }
 function useClick(cb) {
   useWindowEvent.useWindowEvent("mouseup", cb);

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.19.0
+ * v2.20.0
  */
 'use client';
 
@@ -58,9 +58,7 @@ function OptionSelector({
     }
   };
   function handleOptionSelect(option) {
-    const keepDropdownOpen = activeCategory && [shared.DropdownCategoryType.SELECT_FROM_UDM_DYNAMICALLY].includes(
-      activeCategory
-    );
+    const keepDropdownOpen = activeCategory && [shared.DropdownCategoryType.SELECT_FROM_UDM_DYNAMICALLY].includes(activeCategory);
     onChange(option);
     if (!keepDropdownOpen) {
       closeDropdown();
@@ -105,16 +103,7 @@ function OptionSelector({
   );
 }
 const Value = React.forwardRef(
-  ({
-    className,
-    valueComponent,
-    placeholder,
-    onClick,
-    onChange,
-    onDelete,
-    disabled,
-    isEdited
-  }, ref) => {
+  ({ className, valueComponent, placeholder, onClick, onChange, onDelete, disabled, isEdited }, ref) => {
     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(
@@ -128,16 +117,7 @@ const Value = React.forwardRef(
           isEdited
         }
       ),
-      isDefinedValue.isDefinedValue(value) && onDelete && /* @__PURE__ */ jsxRuntime.jsx(
-        index.ActionBar,
-        {
-          className: clsx.clsx(
-            OptionSelector_module.default.actionBar,
-            isEdited && OptionSelector_module.default.actionBar__visible
-          ),
-          children: /* @__PURE__ */ jsxRuntime.jsx(index.ActionBar.DeleteButton, { onClick: onDelete })
-        }
-      )
+      isDefinedValue.isDefinedValue(value) && onDelete && /* @__PURE__ */ jsxRuntime.jsx(index.ActionBar, { className: clsx.clsx(OptionSelector_module.default.actionBar, isEdited && OptionSelector_module.default.actionBar__visible), 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.19.0
+ * v2.20.0
  */
 'use client';
 

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.19.0
+ * v2.20.0
  */
 'use client';
 
@@ -54,10 +54,7 @@ function TextInput({
   const refs = [textInputRef, fieldValueRef, ...refsToIgnoreClick ?? []];
   const handleClick = function(e) {
     const isClickInsideAnyOfElements = refs.map(getRefElement.getRefElement).some((el) => el.contains(e?.target));
-    if (isClickInsideAnyOfElements && !clicks.isClickOnEditorCustomTagComponent(
-      e?.target,
-      fieldValueRef?.current
-    )) {
+    if (isClickInsideAnyOfElements && !clicks.isClickOnEditorCustomTagComponent(e?.target, fieldValueRef?.current)) {
       handleOpenDropdown();
       e?.stopPropagation();
     }
@@ -76,7 +73,7 @@ function TextInput({
       pasteTag({
         value: value2,
         autoOpen: openTagCombobox,
-        allowEditorSearchClear: searchSource === "editor"
+        allowEditorSearchClear: searchSource === "parent-input"
       });
     }
   };
@@ -103,7 +100,11 @@ function TextInput({
               ref: textInputRef,
               className,
               onFocus: () => {
-                setSearchSource("editor");
+                if (!value) {
+                  setSearchSource("parent-input");
+                } else {
+                  setSearchSource("indeterminate");
+                }
               },
               disabled,
               value,
@@ -128,11 +129,7 @@ function shouldRewriteValue(category) {
   ].includes(category);
 }
 function shouldCloseDropdown(category) {
-  return category && [
-    shared.DropdownCategoryType.OPTIONS,
-    shared.DropdownCategoryType.CUSTOM,
-    shared.DropdownCategoryType.LOOKUP_OPTIONS
-  ].includes(category);
+  return category && [shared.DropdownCategoryType.OPTIONS, shared.DropdownCategoryType.CUSTOM, shared.DropdownCategoryType.LOOKUP_OPTIONS].includes(category);
 }
 function valueHasDropdownWithFormula(value) {
   if (!sdk.isFormula(value)) return false;