@integration-app/react 2.1.2 → 2.1.4

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.1.2
+ * v2.1.4
  */
 '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.1.2
+ * v2.1.4
  */
 'use client';
 
@@ -11,10 +11,12 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var index = require('../../DropdownUI/index.cjs');
+var NavigationContext = require('./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;
   }
@@ -26,6 +28,7 @@ const DrillUpButton = React.forwardRef(({ onClick, ...props }, ref) => {
         drillUp();
         onClick?.(e);
       },
+      "data-current": currentItem === "drill-up" ? true : void 0,
       ...props,
       children: drillDownStackTop.label
     }

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.1.2
+ * v2.1.4
  */
 'use client';
 
@@ -12,10 +12,11 @@ var jsxRuntime = require('react/jsx-runtime');
 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 ActiveCategoryContent = require('./ActiveCategoryContent.cjs');
 var DrillUpButton = require('./DrillUpButton.cjs');
 var index = require('../DropdownPopover/index.cjs');
+var NavigationContext = require('./NavigationContext.cjs');
+var SearchInput = require('./SearchInput.cjs');
 
 function Dropdown({
   topDropdownPanelComponent,
@@ -39,12 +40,12 @@ function Dropdown({
   }
   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(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(ActiveCategoryContent.ActiveCategoryContent, { onOptionSelect })
-    ] })
+    ] }) })
   ] }) });
 }
 

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

@@ -0,0 +1,111 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.1.4
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var deepEqual = require('fast-deep-equal');
+var comboboxDropdownContext = require('../context/combobox-dropdown-context.cjs');
+
+const NavigationContext = React.createContext({
+  currentItem: null,
+  moveToNextItem: () => null,
+  moveToPreviousItem: () => null,
+  onOptionsListChange: () => null
+});
+function NavigationContextProvider({
+  children
+}) {
+  const [currentItem, setCurrentItem] = React.useState(null);
+  const { isOptionSelected, drillDownStackTop } = comboboxDropdownContext.useComboBoxDropdownContext();
+  const moveToPreviousItem = (options, currentItem2) => {
+    if (currentItem2 === "drill-up") {
+      return;
+    }
+    const onlyOptions = getOnlyOptions(options);
+    if (!currentItem2) {
+      setCurrentItem(onlyOptions[0]);
+      return;
+    }
+    const idx = getOptionIndex(currentItem2, onlyOptions);
+    if (idx === 0 && !!drillDownStackTop) {
+      setCurrentItem("drill-up");
+      return;
+    }
+    if (idx > 0) {
+      const currentOption = onlyOptions[idx - 1];
+      setCurrentItem(currentOption);
+    }
+  };
+  const moveToNextItem = (options, currentItem2) => {
+    const onlyOptions = getOnlyOptions(options);
+    if (onlyOptions.length === 0) {
+      setCurrentItem(null);
+      return;
+    }
+    if (!currentItem2 || currentItem2 === "drill-up") {
+      setCurrentItem(onlyOptions[0]);
+      return;
+    }
+    const idx = getOptionIndex(currentItem2, onlyOptions);
+    if (idx < onlyOptions.length - 1) {
+      const currentOption = onlyOptions[idx + 1];
+      setCurrentItem(currentOption);
+    }
+  };
+  const onOptionsListChange = (options) => {
+    const onlyOptions = getOnlyOptions(options);
+    if (!onlyOptions?.length) {
+      return;
+    }
+    if (!currentItem || currentItem === "drill-up") {
+      setCurrentItem(onlyOptions[0]);
+      return;
+    }
+    if (getOptionIndex(currentItem, onlyOptions) == -1) {
+      const selectedOption = options.find(isOptionSelected);
+      if (selectedOption) {
+        setCurrentItem(selectedOption);
+      } else {
+        const onlyOptions2 = getOnlyOptions(options);
+        setCurrentItem(onlyOptions2[0]);
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    NavigationContext.Provider,
+    {
+      value: {
+        currentItem,
+        moveToNextItem,
+        moveToPreviousItem,
+        onOptionsListChange
+      },
+      children
+    }
+  );
+}
+function useNavigationContext() {
+  return React.useContext(NavigationContext);
+}
+const makeOptionComparable = (option) => {
+  return option && {
+    ...option,
+    label: option.searchLabel ?? option.label?.toString()
+  };
+};
+const getOnlyOptions = (options) => options.filter((o) => !o.isSection);
+function getOptionIndex(option, options) {
+  return options.findIndex(
+    (o) => deepEqual(makeOptionComparable(o), makeOptionComparable(option))
+  );
+}
+
+exports.NavigationContextProvider = NavigationContextProvider;
+exports.useNavigationContext = useNavigationContext;

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.1.2
+ * v2.1.4
  */
 'use client';
 
@@ -11,9 +11,9 @@
 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 svgIconType = require('../../SvgIcon/svg-icon-type.cjs');
+var useEventStopPropagation = require('../../../helpers/hooks/useEventStopPropagation.cjs');
+var index = require('../../DropdownUI/index.cjs');
 
 function DropdownOption({
   option,

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

@@ -2,23 +2,23 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.4
  */
 'use client';
 
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
 var deepEqual = require('fast-deep-equal');
+var jsConvertCase = require('js-convert-case');
+var keyboardEvents = require('../../../helpers/hooks/keyboard-events.cjs');
+var useDeepEffect = require('../../../helpers/hooks/useDeepEffect.cjs');
 var index = require('../../DropdownUI/index.cjs');
-var useDeepEffect = require('../../../hooks/useDeepEffect.cjs');
 var comboboxDropdownContext = require('../context/combobox-dropdown-context.cjs');
-var keyboardEvents = require('../../../hooks/keyboard-events.cjs');
+var NavigationContext = require('./NavigationContext.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');
 
 function OptionsList({
@@ -34,18 +34,25 @@ function OptionsList({
     drillUp
   } = comboboxDropdownContext.useComboBoxDropdownContext();
   const { value: parentInputValue, scopedComboboxId } = comboboxContext.useComboBox();
-  const [currentOption, setCurrentOption] = React.useState(
-    null
-  );
+  const {
+    currentItem,
+    moveToNextItem,
+    moveToPreviousItem,
+    onOptionsListChange
+  } = NavigationContext.useNavigationContext();
   keyboardEvents.useKeyboardEventSubscribe({
     scopedComboboxId,
     event: keyboardEvents.EVENT_TYPE.OPTION_DOWN,
-    callback: makePreviousOptionCurrent
+    callback: () => {
+      moveToPreviousItem(options, currentItem);
+    }
   });
   keyboardEvents.useKeyboardEventSubscribe({
     scopedComboboxId,
     event: keyboardEvents.EVENT_TYPE.OPTION_UP,
-    callback: makeNextOptionCurrent
+    callback: () => {
+      moveToNextItem(options, currentItem);
+    }
   });
   keyboardEvents.useKeyboardEventSubscribe({
     scopedComboboxId,
@@ -66,58 +73,18 @@ function OptionsList({
   });
   const [options = [], optionsError, optionsState] = optionsPayload;
   useDeepEffect.useDeepEffect(() => {
-    if (!options?.length) {
-      return;
-    }
-    if (!currentOption || getOptionIndex(currentOption) == -1) {
-      const selectedOption = options.find(isOptionSelected);
-      if (selectedOption) {
-        setCurrentOption(selectedOption);
-      }
-    }
+    onOptionsListChange(options);
   }, [options]);
-  const makeOptionComparable = (option) => {
-    return option && {
-      ...option,
-      label: option.searchLabel ?? option.label?.toString()
-    };
-  };
-  function getOptionIndex(option) {
-    return options.findIndex(
-      (o) => deepEqual(makeOptionComparable(o), makeOptionComparable(option))
-    );
-  }
-  function makeNextOptionCurrent() {
-    let idx = getOptionIndex(currentOption);
-    while (idx < options.length - 1) {
-      idx += 1;
-      const currentOption2 = options[idx];
-      if (optionCanBeSelected(currentOption2)) {
-        setCurrentOption(currentOption2);
-        break;
-      }
-    }
-  }
-  function makePreviousOptionCurrent() {
-    let idx = getOptionIndex(currentOption);
-    while (idx > 0) {
-      idx -= 1;
-      const currentOption2 = options[idx];
-      if (optionCanBeSelected(currentOption2)) {
-        setCurrentOption(currentOption2);
-        break;
-      }
-    }
-  }
-  function optionCanBeSelected(option) {
-    return !option.isSection;
-  }
   function handleKeyEnter() {
-    if (currentOption && !currentOption.isSection) {
-      handleOptionSelect(currentOption);
+    if (currentItem) {
+      handleOptionSelect(currentItem);
     }
   }
   function handleOptionSelect(option) {
+    if (option === "drill-up") {
+      drillUp();
+      return;
+    }
     if (option.addVariable) {
       const objectLocator = option.addVariable;
       const variableLocator = `${objectLocator}.${field.key || jsConvertCase.toSnakeCase(field.name) || jsConvertCase.toSnakeCase(field?.schema?.title)}`;
@@ -136,7 +103,6 @@ function OptionsList({
     {
       searchTerm: canUseParentInputSearchValue ? parentInputValue : void 0,
       options,
-      currentOption,
       isOptionSelected,
       handleOptionSelect
     }
@@ -166,11 +132,11 @@ function DropdownList({
 }
 function DropdownListOptions({
   options,
-  currentOption,
   isOptionSelected,
   handleOptionSelect,
   searchTerm
 }) {
+  const { currentItem } = NavigationContext.useNavigationContext();
   if (!options) {
     return null;
   }
@@ -187,7 +153,7 @@ function DropdownListOptions({
     {
       option,
       selected: isOptionSelected(option),
-      current: deepEqual(option, currentOption),
+      current: deepEqual(option, currentItem),
       onSelect: () => handleOptionSelect(option)
     },
     idx

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

@@ -2,18 +2,18 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.4
  */
 'use client';
 
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var index = require('../../DropdownUI/index.cjs');
-var comboboxDropdownSearch = require('../context/combobox-dropdown-search.cjs');
-var comboboxDropdownContext = require('../context/combobox-dropdown-context.cjs');
 var categoryContentMapping = require('./categoryContentMapping.cjs');
+var index = require('../../DropdownUI/index.cjs');
 var comboboxContext = require('../context/combobox-context.cjs');
+var comboboxDropdownContext = require('../context/combobox-dropdown-context.cjs');
+var comboboxDropdownSearch = require('../context/combobox-dropdown-search.cjs');
 
 function SearchInput({ autoFocus }) {
   const { activeCategory } = comboboxDropdownContext.useComboBoxDropdownContext();

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.1.2
+ * v2.1.4
  */
 'use client';
 
@@ -10,13 +10,13 @@
 
 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 index = require('./Categories/Formulas/index.cjs');
+var DropdownPanelFormulaConfig = require('./Categories/Formulas/DropdownPanelFormulaConfig.cjs');
 var Lookup = require('./Categories/Lookup.cjs');
+var Options = require('./Categories/Options.cjs');
 var Root = require('./Categories/Root.cjs');
-var DropdownPanelFormulaConfig = require('./Categories/Formulas/DropdownPanelFormulaConfig.cjs');
+var Variables = require('./Categories/Variables.cjs');
 
 const renderCategories = {
   [types.DropdownCategoryType.ROOT]: {

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

@@ -0,0 +1,68 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.1.4
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var popover = require('@ark-ui/react/popover');
+var react = require('@floating-ui/react');
+require('react');
+require('../../../styled-system/css/css.cjs');
+require('../../../styled-system/helpers.cjs');
+require('../../../styled-system/jsx/is-valid-prop.cjs');
+var box = require('../../../styled-system/jsx/box.cjs');
+require('../../../styled-system/patterns/visually-hidden.cjs');
+
+const GUTTER = 10;
+const VIEWPORT_PADDING = 8;
+const DropdownPositioner = ({
+  children
+}) => {
+  const context = popover.usePopoverContext();
+  const anchorPops = context.getAnchorProps();
+  const { refs, floatingStyles } = react.useFloating({
+    whileElementsMounted: react.autoUpdate,
+    elements: {
+      reference: anchorPops.id ? document.getElementById(anchorPops.id) : void 0
+    },
+    middleware: [
+      react.offset({ mainAxis: GUTTER }),
+      react.autoPlacement({
+        allowedPlacements: ["bottom-start", "top-start"],
+        crossAxis: true,
+        boundary: "clippingAncestors",
+        padding: GUTTER / 2
+      }),
+      react.size({
+        padding: VIEWPORT_PADDING,
+        apply({ elements, availableHeight, availableWidth }) {
+          const floating = elements.floating;
+          availableWidth = Math.floor(availableWidth);
+          availableHeight = Math.floor(availableHeight);
+          floating.style.setProperty("--available-width", `${availableWidth}px`);
+          floating.style.setProperty(
+            "--available-height",
+            `${availableHeight}px`
+          );
+        }
+      })
+    ]
+  });
+  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.1.2
+ * v2.1.4
  */
 'use client';
 
@@ -10,17 +10,18 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var react = require('@ark-ui/react');
+var index$1 = 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');
 var popover = require('../../../ui-kit/styled/popover.cjs');
 var comboboxContext = require('../context/combobox-context.cjs');
 require('../context/combobox-dropdown-context.cjs');
 require('../context/combobox-dropdown-search.cjs');
 var comboboxDropdownStack = require('../context/combobox-dropdown-stack.cjs');
 require('@integration-app/sdk');
-var useWindowEvent = require('../../../hooks/useWindowEvent.cjs');
-var index = require('../../DropdownUI/index.cjs');
-var keyboardEvents = require('../../../hooks/keyboard-events.cjs');
-var constants = require('../../DropdownUI/constants.cjs');
+var DropdownPositioner = require('./DropdownPositioner.cjs');
+var index = require('../DropdownPortal/index.cjs');
 
 const GUTTER = 10;
 const POSITIONING = {
@@ -29,8 +30,6 @@ const POSITIONING = {
   slide: true,
   fitViewport: true
 };
-const isStorybook = Boolean(globalThis?.__STORYBOOK_PREVIEW__);
-const storybookPortalNode = "#storybook-root";
 function DropdownPopoverProvider({
   children
 }) {
@@ -53,18 +52,12 @@ function DropdownPopoverProvider({
 function DropdownPopoverContent({
   children
 }) {
-  const containerRef = React.useRef(null);
-  React.useEffect(() => {
-    if (isStorybook) {
-      containerRef.current = document.querySelector(storybookPortalNode);
-    }
-  }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx(react.Portal, { container: containerRef, children: /* @__PURE__ */ jsxRuntime.jsx(popover.Positioner, { children: /* @__PURE__ */ jsxRuntime.jsx(DeferredContent, { children }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(index.DropdownPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(DropdownPositioner.DropdownPositioner, { children: /* @__PURE__ */ jsxRuntime.jsx(Content, { children }) }) });
 }
 function DropdownAnchor({ children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(popover.Anchor, { display: "inline", children });
 }
-function DeferredContent({ children }) {
+function Content({ children }) {
   const id = React.useId();
   const ref = React.useRef(null);
   const { scopedComboboxId, closeDropdown } = comboboxContext.useComboBox();
@@ -84,7 +77,7 @@ function DeferredContent({ children }) {
       "data-navigation-emitter-id": constants.DROPDOWN_NAVIGATOR_ID,
       asChild: true,
       "aria-labelledby": id,
-      children: /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI, { children: /* @__PURE__ */ jsxRuntime.jsxs(index.DropdownUI.Content, { children: [
+      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
       ] }) })

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

@@ -0,0 +1,37 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.1.4
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var react = require('@ark-ui/react');
+
+const BoundaryContext = React.createContext(null);
+const BOUNDARY_DATA_KEY = "data-dropdown-portal-boundary";
+function DropdownPortalBoundary({
+  children,
+  id
+}) {
+  const generatedId = React.useId();
+  return /* @__PURE__ */ jsxRuntime.jsx(BoundaryContext.Provider, { value: id || generatedId, children: React.isValidElement(children) ? React.cloneElement(children, {
+    [BOUNDARY_DATA_KEY]: id || generatedId
+  }) : children });
+}
+function DropdownPortal({ children }) {
+  const boundaryId = React.useContext(BoundaryContext);
+  const containerRef = React.useRef(null);
+  const container = boundaryId ? document.querySelector(
+    `[${BOUNDARY_DATA_KEY}="${boundaryId}"]`
+  ) : null;
+  containerRef.current = container;
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Portal, { container: containerRef, children });
+}
+
+exports.DropdownPortal = DropdownPortal;
+exports.DropdownPortalBoundary = DropdownPortalBoundary;

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

@@ -2,15 +2,18 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.4
  */
 'use client';
 
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var clsx = require('clsx');
 var React = require('react');
+var clsx = require('clsx');
+var getRefElement = require('../../../helpers/getRefElement.cjs');
+var OptionSelector_module = require('./OptionSelector.module.css.cjs');
+var FieldWrapper = require('../../ComboBoxElements/FieldWrapper.cjs');
 require('../../ComboBoxElements/TipTapEditor/Editor.cjs');
 require('../../ComboBoxElements/TipTapEditor/EditorStandAlone.cjs');
 var types = require('../types.cjs');
@@ -19,16 +22,13 @@ require('fuse');
 require('../Dropdown/categoryContentMapping.cjs');
 var clicks = require('../../ComboBoxElements/TipTapEditor/helpers/clicks.cjs');
 var index = require('../../DataBuilderUI/index.cjs');
-var getRefElement = require('../../../helpers/getRefElement.cjs');
-var OptionSelector_module = require('./OptionSelector.module.css.cjs');
-var FieldWrapper = require('../../ComboBoxElements/FieldWrapper.cjs');
 var comboboxContext = require('../context/combobox-context.cjs');
 var comboboxDropdownContext = require('../context/combobox-dropdown-context.cjs');
+var Dropdown = require('../Dropdown/Dropdown.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,
@@ -136,7 +136,7 @@ const Value = React.forwardRef(
       isDefinedValue.isDefinedValue(value) && onDelete && /* @__PURE__ */ jsxRuntime.jsx(
         index.ActionBar,
         {
-          className: clsx(
+          className: clsx.clsx(
             OptionSelector_module.default.actionBar,
             isEdited && OptionSelector_module.default.actionBar__visible
           ),

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.1.2
+ * v2.1.4
  */
 'use client';