@integration-app/react 2.1.2 → 2.1.4

package/dist/cjs/_modules/awesome-debounce-promise.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/_modules/react-use-promise.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/AdvancedOptions.cjs

@@ -2,15 +2,15 @@
 /*
  * 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 Button = require('./Button/Button.cjs');
 var React = require('react');
+var Button = require('./Button/Button.cjs');
 
 function AdvancedOptions({
   title = "advanced options",

package/dist/cjs/components/Button/Button.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,8 +11,8 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
-var index$1 = require('../SvgIcon/index.cjs');
 var svgIconType = require('../SvgIcon/svg-icon-type.cjs');
+var index$1 = require('../SvgIcon/index.cjs');
 var index = require('../Tooltip/index.cjs');
 var Button_module = require('./Button.module.css.cjs');
 
@@ -75,7 +75,7 @@ const Button = React.forwardRef(
     children,
     ...restProps
   }, ref) => {
-    const buttonClass = clsx([
+    const buttonClass = clsx.clsx([
       Button_module.default["uikit-button"],
       getButtonClassesByVariant(variant),
       getButtonClassesBySize(size),
@@ -94,7 +94,7 @@ const IconButton = React.forwardRef(
     tooltip,
     ...restProps
   }, ref) => {
-    const buttonIconClass = clsx([
+    const buttonIconClass = clsx.clsx([
       Button_module.default["uikit-button"],
       Button_module.default["uikit-button--icon"],
       isActive && Button_module.default["uikit-button--icon__active"],
@@ -118,7 +118,7 @@ function ButtonSvgIcon({
     index$1.SvgIcon,
     {
       type,
-      className: clsx(
+      className: clsx.clsx(
         Button_module.default.uikitButtonSvgIcon,
         className,
         size === "small" ? Button_module.default.uikitButtonSvgIcon_small : Button_module.default.uikitButtonSvgIcon_normal,

package/dist/cjs/components/Button/Button.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';
 

package/dist/cjs/components/ComboBox/ComboBox.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,12 +10,12 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var comboboxContext = require('./context/combobox-context.cjs');
-var valueSpec = require('./value-spec.cjs');
 var comboboxDropdownContext = require('./context/combobox-dropdown-context.cjs');
 var comboboxDropdownSearch = require('./context/combobox-dropdown-search.cjs');
 var helpers = require('./context/helpers.cjs');
 var OptionSelector = require('./Edit/OptionSelector.cjs');
 var TextInput = require('./Edit/TextInput.cjs');
+var valueSpec = require('./value-spec.cjs');
 
 function ComboBox({
   value,

package/dist/cjs/components/ComboBox/Dropdown/ActiveCategoryContent.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/Categories/CustomValue.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/Categories/Formulas/DropdownPanelFormulaConfig.cjs

@@ -2,29 +2,29 @@
 /*
  * 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 sdk = require('@integration-app/sdk');
 var React = require('react');
-var index = require('../../../../DataBuilder/Formula/index.cjs');
+var sdk = require('@integration-app/sdk');
 var comboboxContext = require('../../../context/combobox-context.cjs');
-var keyboardEvents = require('../../../../../hooks/keyboard-events.cjs');
 var comboboxDropdownContext = require('../../../context/combobox-dropdown-context.cjs');
 require('../../../context/combobox-dropdown-search.cjs');
 require('../../../context/combobox-dropdown-stack.cjs');
+var index = require('../../../../DataBuilder/Formula/index.cjs');
+var keyboardEvents = require('../../../../../helpers/hooks/keyboard-events.cjs');
 require('../../../../../styled-system/css/css.cjs');
 require('../../../../../styled-system/helpers.cjs');
 var sva = require('../../../../../styled-system/css/sva.cjs');
-var button = require('../../../../../ui-kit/button.cjs');
 require('../../../../../styled-system/jsx/is-valid-prop.cjs');
 var box = require('../../../../../styled-system/jsx/box.cjs');
 var flex = require('../../../../../styled-system/jsx/flex.cjs');
 require('../../../../../styled-system/patterns/visually-hidden.cjs');
+var button = require('../../../../../ui-kit/button.cjs');
 
 const formulaConfigRecipe = sva.sva({
   className: "formula-config",
@@ -33,14 +33,14 @@ const formulaConfigRecipe = sva.sva({
     container: {
       flexDir: "column",
       p: "1.5",
-      gap: "2"
+      gap: "2",
+      overflowY: "scroll"
     },
     form: {
       flex: "1",
-      minH: "0",
       overflowX: "auto",
-      // TODO: reconsider this when we agreed on the max sizes for dropdown
-      width: "min(30rem, 70vw)"
+      width: "min(30rem, 70vw)",
+      minH: "14"
     },
     "save-button": {
       w: "fit-content",

package/dist/cjs/components/ComboBox/Dropdown/Categories/Formulas/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';
 

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

@@ -2,21 +2,34 @@
 /*
  * 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$1 = require('../../../DropdownUI/index.cjs');
-var reactUsePromise = require('../../../../_modules/react-use-promise.cjs');
+var React = require('react');
 var sdk = require('@integration-app/sdk');
+var clsx = require('clsx');
+var usehooksTs = require('usehooks-ts');
+var reactUsePromise = require('../../../../_modules/react-use-promise.cjs');
+var comboboxContext = require('../../context/combobox-context.cjs');
+var comboboxDropdownContext = require('../../context/combobox-dropdown-context.cjs');
+require('../../context/combobox-dropdown-search.cjs');
+require('../../context/combobox-dropdown-stack.cjs');
+var getLookupCollection = require('./getLookupCollection.cjs');
+var index$1 = require('../../../DataBuilder/index.cjs');
+var dataField = require('../../../DataBuilder/data-field.cjs');
+var Field = require('../../../DataBuilder/Field.cjs');
+var fieldContext = require('../../../DataBuilder/field-context.cjs');
+var Form = require('../../../DataBuilder/Form.cjs');
+var index = require('../../../DropdownUI/index.cjs');
 var index$2 = require('../../../Radio/index.cjs');
 var integrationAppClientContext = require('../../../../contexts/integration-app-client-context.cjs');
 var integrationAppConnectionContext = require('../../../../contexts/integration-app-connection-context.cjs');
 var integrationAppIntegrationContext = require('../../../../contexts/integration-app-integration-context.cjs');
-require('react');
+var keyboardEvents = require('../../../../helpers/hooks/keyboard-events.cjs');
 require('../../../../styled-system/css/css.cjs');
 require('../../../../styled-system/helpers.cjs');
 var sva = require('../../../../styled-system/css/sva.cjs');
@@ -24,18 +37,7 @@ require('../../../../styled-system/jsx/is-valid-prop.cjs');
 var box = require('../../../../styled-system/jsx/box.cjs');
 var flex = require('../../../../styled-system/jsx/flex.cjs');
 require('../../../../styled-system/patterns/visually-hidden.cjs');
-var dataField = require('../../../DataBuilder/data-field.cjs');
-var fieldContext = require('../../../DataBuilder/field-context.cjs');
-var Field = require('../../../DataBuilder/Field.cjs');
-var index = require('../../../DataBuilder/index.cjs');
-var Form = require('../../../DataBuilder/Form.cjs');
-var keyboardEvents = require('../../../../hooks/keyboard-events.cjs');
-var comboboxContext = require('../../context/combobox-context.cjs');
-var comboboxDropdownContext = require('../../context/combobox-dropdown-context.cjs');
-require('../../context/combobox-dropdown-search.cjs');
-require('../../context/combobox-dropdown-stack.cjs');
-var getLookupCollection = require('./getLookupCollection.cjs');
-var helpers = require('../../DropdownPopover/helpers.cjs');
+var skeleton = require('../../../../ui-kit/styled/skeleton.cjs');
 
 function LookupCategoryContent({
   onOptionSelect
@@ -51,12 +53,19 @@ function LookupCategoryContent({
 }
 const lookupConfigRecipe = sva.sva({
   className: "lookup-config",
-  slots: ["panel", "nothing-found-selector", "nothing-found-form"],
+  slots: [
+    "panel",
+    "nothing-found-selector",
+    "nothing-found-form",
+    "loading-container",
+    "skeleton"
+  ],
   base: {
     panel: {
       p: "1.5",
       flexDir: "column",
-      gap: "4"
+      gap: "4",
+      minH: "16"
     },
     "nothing-found-selector": {
       display: "flex",
@@ -72,11 +81,31 @@ const lookupConfigRecipe = sva.sva({
     },
     "nothing-found-form": {
       flexDir: "column"
+    },
+    "loading-container": {
+      flexDir: "column",
+      gap: "2.5",
+      pointerEvents: "none"
+    },
+    skeleton: {
+      height: "10",
+      minH: "10",
+      rounded: "md",
+      w: "5/6",
+      opacity: "0.1",
+      transition: "opacity 0.1s"
     }
   }
 });
+function FieldSkeleton({ delay = 300 }) {
+  const [opacity, setOpacity] = React.useState(0.1);
+  const styles = lookupConfigRecipe();
+  usehooksTs.useTimeout(() => {
+    setOpacity(1);
+  }, delay);
+  return /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: styles.skeleton, style: { opacity } });
+}
 function DataBuilderDrillDownLookup({ field, onChange }) {
-  helpers.useMountDropdownReposition();
   const { client } = integrationAppClientContext.useIntegrationAppClient();
   const { integrationId } = integrationAppIntegrationContext.useIntegrationAppIntegration();
   const { connectionId } = integrationAppConnectionContext.useIntegrationAppConnection();
@@ -141,23 +170,44 @@ function DataBuilderDrillDownLookup({ field, onChange }) {
     });
   }
   if (error) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
-      "Error: ",
-      error.toString()
-    ] });
+    return /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.ErrorHeading, { text: `Error: ${error?.toString()}` });
   }
   if (state === "pending") {
-    return /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Loading..." });
+    const dataBuilderField2 = index$1.makeDataField({
+      value: lookupValue.query,
+      schema: sdk.schemaWithTitle({}, "Query fields"),
+      variablesSchema: field.variablesSchema
+    });
+    return /* @__PURE__ */ jsxRuntime.jsxs(flex.Flex, { className: clsx.clsx(styles.panel, styles["loading-container"]), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Form.DataBuilderForm,
+        {
+          showNullValueFields: true,
+          field: dataBuilderField2,
+          onChange: () => {
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(FieldSkeleton, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(FieldSkeleton, { delay: 500 }),
+      /* @__PURE__ */ jsxRuntime.jsx(FieldSkeleton, { delay: 700 }),
+      /* @__PURE__ */ jsxRuntime.jsx(FieldSkeleton, { delay: 900 })
+    ] });
   }
   if (!queryFieldsSchema) {
-    return /* @__PURE__ */ jsxRuntime.jsx("p", { children: "This collection does not support lookup." });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      index.DropdownUI.InfoHeading,
+      {
+        text: "This collection does not support lookup."
+      }
+    );
   }
-  const dataBuilderField = index.makeDataField({
+  const dataBuilderField = index$1.makeDataField({
     value: lookupValue.query,
     schema: sdk.schemaWithTitle(queryFieldsSchema, "Query fields"),
     variablesSchema: field.variablesSchema
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(box.Box, { maxH: "full", overflow: "scroll", children: /* @__PURE__ */ jsxRuntime.jsx(index$1.DropdownUI.Panel, { children: /* @__PURE__ */ jsxRuntime.jsxs(flex.Flex, { className: styles.panel, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(box.Box, { maxH: "full", overflow: "scroll", children: /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.Panel, { children: /* @__PURE__ */ jsxRuntime.jsxs(flex.Flex, { className: styles.panel, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       Form.DataBuilderForm,
       {

package/dist/cjs/components/ComboBox/Dropdown/Categories/LookupOptions/ParametersPanel.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,12 +10,12 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var jsConvertCase = require('js-convert-case');
 var clsx = require('clsx');
+var jsConvertCase = require('js-convert-case');
 var index = require('../../../../DataBuilder/index.cjs');
 var Form = require('../../../../DataBuilder/Form.cjs');
+var index$1 = require('../../../../SvgIcon/index.cjs');
 var svgIconType = require('../../../../SvgIcon/svg-icon-type.cjs');
-var UiComponents = require('./UiComponents.cjs');
 require('../../../../../styled-system/css/css.cjs');
 require('../../../../../styled-system/helpers.cjs');
 var sva = require('../../../../../styled-system/css/sva.cjs');
@@ -24,7 +24,7 @@ var flex = require('../../../../../styled-system/jsx/flex.cjs');
 require('../../../../../styled-system/patterns/visually-hidden.cjs');
 var button = require('../../../../../ui-kit/button.cjs');
 var icon = require('../../../../../ui-kit/styled/icon.cjs');
-var index$1 = require('../../../../SvgIcon/index.cjs');
+var UiComponents = require('./UiComponents.cjs');
 
 const parametersConfigRecipe = sva.sva({
   className: "lookup-parameters-config",
@@ -64,7 +64,7 @@ function ParametersPanel({
   function handleOnClose() {
     setIsEditing(false);
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(flex.Flex, { className: clsx(container, className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(flex.Flex, { className: clsx.clsx(container, className), children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       UiComponents.PanelHeader,
       {

package/dist/cjs/components/ComboBox/Dropdown/Categories/LookupOptions/UiComponents.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';
 
@@ -17,8 +17,8 @@ require('../../../../../styled-system/jsx/is-valid-prop.cjs');
 var flex = require('../../../../../styled-system/jsx/flex.cjs');
 require('../../../../../styled-system/patterns/visually-hidden.cjs');
 var badge = require('../../../../../ui-kit/styled/badge.cjs');
-var text = require('../../../../../ui-kit/styled/text.cjs');
 var button = require('../../../../../ui-kit/button.cjs');
+var text = require('../../../../../ui-kit/styled/text.cjs');
 
 const panelHeaderRecipe = sva.sva({
   className: "panel-header",
@@ -28,7 +28,12 @@ const panelHeaderRecipe = sva.sva({
       justifyContent: "space-between",
       alignItems: "center"
     },
-    title: { textStyle: "xs", color: "slate.11", fontWeight: "medium" },
+    title: {
+      textStyle: "xs",
+      color: "slate.11",
+      fontWeight: "medium",
+      margin: "0"
+    },
     actions: {
       gap: "2"
     },

package/dist/cjs/components/ComboBox/Dropdown/Categories/LookupOptions/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';
 
@@ -11,23 +11,16 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var sdk = require('@integration-app/sdk');
+var deepEqual = require('fast-deep-equal');
+var uuid = require('uuid');
 var index = require('../../../../DropdownUI/index.cjs');
+var svgIconType = require('../../../../SvgIcon/svg-icon-type.cjs');
 var integrationAppClientContext = require('../../../../../contexts/integration-app-client-context.cjs');
 var integrationAppConnectionContext = require('../../../../../contexts/integration-app-connection-context.cjs');
-var comboboxContext = require('../../../context/combobox-context.cjs');
-var comboboxDropdownSearch = require('../../../context/combobox-dropdown-search.cjs');
-var index$1 = require('../../../../SvgIcon/index.cjs');
-var svgIconType = require('../../../../SvgIcon/svg-icon-type.cjs');
-var useDataCollectionSpec = require('../../../../../hooks/data-collections/useDataCollectionSpec.cjs');
 var integrationAppIntegrationContext = require('../../../../../contexts/integration-app-integration-context.cjs');
-var utils = require('../../../options-factories/utils.cjs');
-var comboboxDropdownContext = require('../../../context/combobox-dropdown-context.cjs');
-var keyboardEvents = require('../../../../../hooks/keyboard-events.cjs');
-var deepEqual = require('fast-deep-equal');
-var useDeepEffect = require('../../../../../hooks/useDeepEffect.cjs');
-var Option = require('../../Option.cjs');
-var ParametersPanel = require('./ParametersPanel.cjs');
-var uuid = require('uuid');
+var keyboardEvents = require('../../../../../helpers/hooks/keyboard-events.cjs');
+var useDeepEffect = require('../../../../../helpers/hooks/useDeepEffect.cjs');
+var useDataCollectionSpec = require('../../../../../hooks/data-collections/useDataCollectionSpec.cjs');
 require('../../../../../styled-system/css/css.cjs');
 require('../../../../../styled-system/helpers.cjs');
 var sva = require('../../../../../styled-system/css/sva.cjs');
@@ -35,6 +28,14 @@ require('../../../../../styled-system/jsx/is-valid-prop.cjs');
 var flex = require('../../../../../styled-system/jsx/flex.cjs');
 require('../../../../../styled-system/patterns/visually-hidden.cjs');
 var alert = require('../../../../../ui-kit/styled/alert.cjs');
+var ParametersPanel = require('./ParametersPanel.cjs');
+var index$1 = require('../../../../SvgIcon/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');
+var utils = require('../../../options-factories/utils.cjs');
+var NavigationContext = require('../../NavigationContext.cjs');
+var Option = require('../../Option.cjs');
 
 const lookupOptionsRecipe = sva.sva({
   className: "lookup-config-options",
@@ -229,18 +230,25 @@ function LookupOptionsList({
 }) {
   const { isOptionSelected, drillUp } = comboboxDropdownContext.useComboBoxDropdownContext();
   const { scopedComboboxId } = comboboxContext.useComboBox();
-  const [currentOption, setCurrentOption] = React.useState(
-    null
-  );
+  const {
+    currentItem,
+    moveToPreviousItem,
+    moveToNextItem,
+    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,
@@ -260,55 +268,15 @@ function LookupOptionsList({
     callback: handleKeyEnter
   });
   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) {
-      handleOptionSelect(currentOption);
+    if (currentItem === "drill-up") {
+      drillUp();
+      return;
+    }
+    if (currentItem) {
+      handleOptionSelect(currentItem);
     }
   }
   function handleOptionSelect(option) {
@@ -318,7 +286,6 @@ function LookupOptionsList({
     DropdownListOptions,
     {
       options,
-      currentOption,
       isOptionSelected,
       handleOptionSelect
     }
@@ -326,10 +293,10 @@ function LookupOptionsList({
 }
 function DropdownListOptions({
   options,
-  currentOption,
   isOptionSelected,
   handleOptionSelect
 }) {
+  const { currentItem } = NavigationContext.useNavigationContext();
   if (!options) {
     return null;
   }
@@ -341,7 +308,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/Categories/Options.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/Categories/Root.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 comboboxDropdownContext = require('../../context/combobox-dropdown-context.cjs');
 var types = require('../../types.cjs');
 var index = require('../../../DropdownUI/index.cjs');
 var OptionsList = require('../OptionsList.cjs');
 var index$1 = require('./LookupOptions/index.cjs');
-var comboboxDropdownContext = require('../../context/combobox-dropdown-context.cjs');
 
 function RootCategoryContent({
   onOptionSelect

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