@integration-app/react 2.1.2 → 2.1.4

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

@@ -2,19 +2,32 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.4
  */
 'use client';
 
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { DropdownUI } from '../../../DropdownUI/index.mjs';
-import usePromise from '../../../../_modules/react-use-promise.mjs';
+import { useState } from 'react';
 import { getReferenceCollectionPathForSchema, schemaWithTitle, pickFieldsFromSchema, getDataCollectionCreateFields, UNIFIED_DATA_MODELS } from '@integration-app/sdk';
+import { clsx } from 'clsx';
+import { useTimeout } from 'usehooks-ts';
+import usePromise from '../../../../_modules/react-use-promise.mjs';
+import { useComboBox } from '../../context/combobox-context.mjs';
+import { useComboBoxDropdownContext } from '../../context/combobox-dropdown-context.mjs';
+import '../../context/combobox-dropdown-search.mjs';
+import '../../context/combobox-dropdown-stack.mjs';
+import { getLookupCollection } from './getLookupCollection.mjs';
+import { makeDataField } from '../../../DataBuilder/index.mjs';
+import { makeSubField } from '../../../DataBuilder/data-field.mjs';
+import DataBuilderFormField from '../../../DataBuilder/Field.mjs';
+import useDataBuilderField from '../../../DataBuilder/field-context.mjs';
+import { DataBuilderForm } from '../../../DataBuilder/Form.mjs';
+import { DropdownUI } from '../../../DropdownUI/index.mjs';
 import { Radiobutton } from '../../../Radio/index.mjs';
 import { useIntegrationAppClient } from '../../../../contexts/integration-app-client-context.mjs';
 import { useIntegrationAppConnection } from '../../../../contexts/integration-app-connection-context.mjs';
 import { useIntegrationAppIntegration } from '../../../../contexts/integration-app-integration-context.mjs';
-import 'react';
+import { useKeyboardEventSubscribe, EVENT_TYPE } from '../../../../helpers/hooks/keyboard-events.mjs';
 import '../../../../styled-system/css/css.mjs';
 import '../../../../styled-system/helpers.mjs';
 import { sva } from '../../../../styled-system/css/sva.mjs';
@@ -22,18 +35,7 @@ import '../../../../styled-system/jsx/is-valid-prop.mjs';
 import { Box } from '../../../../styled-system/jsx/box.mjs';
 import { Flex } from '../../../../styled-system/jsx/flex.mjs';
 import '../../../../styled-system/patterns/visually-hidden.mjs';
-import { makeSubField } from '../../../DataBuilder/data-field.mjs';
-import useDataBuilderField from '../../../DataBuilder/field-context.mjs';
-import DataBuilderFormField from '../../../DataBuilder/Field.mjs';
-import { makeDataField } from '../../../DataBuilder/index.mjs';
-import { DataBuilderForm } from '../../../DataBuilder/Form.mjs';
-import { useKeyboardEventSubscribe, EVENT_TYPE } from '../../../../hooks/keyboard-events.mjs';
-import { useComboBox } from '../../context/combobox-context.mjs';
-import { useComboBoxDropdownContext } from '../../context/combobox-dropdown-context.mjs';
-import '../../context/combobox-dropdown-search.mjs';
-import '../../context/combobox-dropdown-stack.mjs';
-import { getLookupCollection } from './getLookupCollection.mjs';
-import { useMountDropdownReposition } from '../../DropdownPopover/helpers.mjs';
+import { Skeleton } from '../../../../ui-kit/styled/skeleton.mjs';
 
 function LookupCategoryContent({
   onOptionSelect
@@ -49,12 +51,19 @@ function LookupCategoryContent({
 }
 const lookupConfigRecipe = 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",
@@ -70,11 +79,31 @@ const lookupConfigRecipe = 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] = useState(0.1);
+  const styles = lookupConfigRecipe();
+  useTimeout(() => {
+    setOpacity(1);
+  }, delay);
+  return /* @__PURE__ */ jsx(Skeleton, { className: styles.skeleton, style: { opacity } });
+}
 function DataBuilderDrillDownLookup({ field, onChange }) {
-  useMountDropdownReposition();
   const { client } = useIntegrationAppClient();
   const { integrationId } = useIntegrationAppIntegration();
   const { connectionId } = useIntegrationAppConnection();
@@ -139,16 +168,37 @@ function DataBuilderDrillDownLookup({ field, onChange }) {
     });
   }
   if (error) {
-    return /* @__PURE__ */ jsxs("p", { children: [
-      "Error: ",
-      error.toString()
-    ] });
+    return /* @__PURE__ */ jsx(DropdownUI.ErrorHeading, { text: `Error: ${error?.toString()}` });
   }
   if (state === "pending") {
-    return /* @__PURE__ */ jsx("p", { children: "Loading..." });
+    const dataBuilderField2 = makeDataField({
+      value: lookupValue.query,
+      schema: schemaWithTitle({}, "Query fields"),
+      variablesSchema: field.variablesSchema
+    });
+    return /* @__PURE__ */ jsxs(Flex, { className: clsx(styles.panel, styles["loading-container"]), children: [
+      /* @__PURE__ */ jsx(
+        DataBuilderForm,
+        {
+          showNullValueFields: true,
+          field: dataBuilderField2,
+          onChange: () => {
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(FieldSkeleton, {}),
+      /* @__PURE__ */ jsx(FieldSkeleton, { delay: 500 }),
+      /* @__PURE__ */ jsx(FieldSkeleton, { delay: 700 }),
+      /* @__PURE__ */ jsx(FieldSkeleton, { delay: 900 })
+    ] });
   }
   if (!queryFieldsSchema) {
-    return /* @__PURE__ */ jsx("p", { children: "This collection does not support lookup." });
+    return /* @__PURE__ */ jsx(
+      DropdownUI.InfoHeading,
+      {
+        text: "This collection does not support lookup."
+      }
+    );
   }
   const dataBuilderField = makeDataField({
     value: lookupValue.query,

package/dist/esm/components/ComboBox/Dropdown/Categories/LookupOptions/ParametersPanel.mjs

@@ -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';
 
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useState } from 'react';
+import { clsx } from 'clsx';
 import { toHeaderCase } from 'js-convert-case';
-import clsx from 'clsx';
 import { makeDataField } from '../../../../DataBuilder/index.mjs';
 import { DataBuilderForm } from '../../../../DataBuilder/Form.mjs';
+import { SvgIcon } from '../../../../SvgIcon/index.mjs';
 import { SvgIconType } from '../../../../SvgIcon/svg-icon-type.mjs';
-import { PanelHeader, NoParameters, ParametersList, Parameter, ParameterText, PanelHeaderButton } from './UiComponents.mjs';
 import '../../../../../styled-system/css/css.mjs';
 import '../../../../../styled-system/helpers.mjs';
 import { sva } from '../../../../../styled-system/css/sva.mjs';
@@ -22,7 +22,7 @@ import { Flex } from '../../../../../styled-system/jsx/flex.mjs';
 import '../../../../../styled-system/patterns/visually-hidden.mjs';
 import { Button } from '../../../../../ui-kit/button.mjs';
 import { Icon } from '../../../../../ui-kit/styled/icon.mjs';
-import { SvgIcon } from '../../../../SvgIcon/index.mjs';
+import { PanelHeader, NoParameters, ParametersList, Parameter, ParameterText, PanelHeaderButton } from './UiComponents.mjs';
 
 const parametersConfigRecipe = sva({
   className: "lookup-parameters-config",

package/dist/esm/components/ComboBox/Dropdown/Categories/LookupOptions/UiComponents.mjs

@@ -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';
 
@@ -15,8 +15,8 @@ import '../../../../../styled-system/jsx/is-valid-prop.mjs';
 import { Flex } from '../../../../../styled-system/jsx/flex.mjs';
 import '../../../../../styled-system/patterns/visually-hidden.mjs';
 import { Badge } from '../../../../../ui-kit/styled/badge.mjs';
-import { Text } from '../../../../../ui-kit/styled/text.mjs';
 import { Button } from '../../../../../ui-kit/button.mjs';
+import { Text } from '../../../../../ui-kit/styled/text.mjs';
 
 const panelHeaderRecipe = sva({
   className: "panel-header",
@@ -26,7 +26,12 @@ const panelHeaderRecipe = 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/esm/components/ComboBox/Dropdown/Categories/LookupOptions/index.mjs

@@ -2,30 +2,23 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.4
  */
 'use client';
 
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useState, useRef, useEffect } from 'react';
 import { getReferenceCollectionPointerForSchema, getMissingRequiredFields, extractIntegrationAppErrorData } from '@integration-app/sdk';
+import deepEqual from 'fast-deep-equal';
+import { v4 } from 'uuid';
 import { DropdownUI } from '../../../../DropdownUI/index.mjs';
+import { SvgIconType } from '../../../../SvgIcon/svg-icon-type.mjs';
 import { useIntegrationAppClient } from '../../../../../contexts/integration-app-client-context.mjs';
 import { useIntegrationAppConnection } from '../../../../../contexts/integration-app-connection-context.mjs';
-import { useComboBox } from '../../../context/combobox-context.mjs';
-import { useComboBoxDropdownSearchContext } from '../../../context/combobox-dropdown-search.mjs';
-import { SvgIcon } from '../../../../SvgIcon/index.mjs';
-import { SvgIconType } from '../../../../SvgIcon/svg-icon-type.mjs';
-import { useDataCollectionSpec } from '../../../../../hooks/data-collections/useDataCollectionSpec.mjs';
 import { useIntegrationAppIntegration } from '../../../../../contexts/integration-app-integration-context.mjs';
-import { filterOptionsByLabel } from '../../../options-factories/utils.mjs';
-import { useComboBoxDropdownContext } from '../../../context/combobox-dropdown-context.mjs';
-import { useKeyboardEventSubscribe, EVENT_TYPE } from '../../../../../hooks/keyboard-events.mjs';
-import deepEqual from 'fast-deep-equal';
-import { useDeepEffect } from '../../../../../hooks/useDeepEffect.mjs';
-import DropdownOption from '../../Option.mjs';
-import { ParametersPanel } from './ParametersPanel.mjs';
-import { v4 } from 'uuid';
+import { useKeyboardEventSubscribe, EVENT_TYPE } from '../../../../../helpers/hooks/keyboard-events.mjs';
+import { useDeepEffect } from '../../../../../helpers/hooks/useDeepEffect.mjs';
+import { useDataCollectionSpec } from '../../../../../hooks/data-collections/useDataCollectionSpec.mjs';
 import '../../../../../styled-system/css/css.mjs';
 import '../../../../../styled-system/helpers.mjs';
 import { sva } from '../../../../../styled-system/css/sva.mjs';
@@ -33,6 +26,14 @@ import '../../../../../styled-system/jsx/is-valid-prop.mjs';
 import { Flex } from '../../../../../styled-system/jsx/flex.mjs';
 import '../../../../../styled-system/patterns/visually-hidden.mjs';
 import { Root, Icon, Title } from '../../../../../ui-kit/styled/alert.mjs';
+import { ParametersPanel } from './ParametersPanel.mjs';
+import { SvgIcon } from '../../../../SvgIcon/index.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 { filterOptionsByLabel } from '../../../options-factories/utils.mjs';
+import { useNavigationContext } from '../../NavigationContext.mjs';
+import DropdownOption from '../../Option.mjs';
 
 const lookupOptionsRecipe = sva({
   className: "lookup-config-options",
@@ -227,18 +228,25 @@ function LookupOptionsList({
 }) {
   const { isOptionSelected, drillUp } = useComboBoxDropdownContext();
   const { scopedComboboxId } = useComboBox();
-  const [currentOption, setCurrentOption] = useState(
-    null
-  );
+  const {
+    currentItem,
+    moveToPreviousItem,
+    moveToNextItem,
+    onOptionsListChange
+  } = useNavigationContext();
   useKeyboardEventSubscribe({
     scopedComboboxId,
     event: EVENT_TYPE.OPTION_DOWN,
-    callback: makePreviousOptionCurrent
+    callback: () => {
+      moveToPreviousItem(options, currentItem);
+    }
   });
   useKeyboardEventSubscribe({
     scopedComboboxId,
     event: EVENT_TYPE.OPTION_UP,
-    callback: makeNextOptionCurrent
+    callback: () => {
+      moveToNextItem(options, currentItem);
+    }
   });
   useKeyboardEventSubscribe({
     scopedComboboxId,
@@ -258,55 +266,15 @@ function LookupOptionsList({
     callback: handleKeyEnter
   });
   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) {
@@ -316,7 +284,6 @@ function LookupOptionsList({
     DropdownListOptions,
     {
       options,
-      currentOption,
       isOptionSelected,
       handleOptionSelect
     }
@@ -324,10 +291,10 @@ function LookupOptionsList({
 }
 function DropdownListOptions({
   options,
-  currentOption,
   isOptionSelected,
   handleOptionSelect
 }) {
+  const { currentItem } = useNavigationContext();
   if (!options) {
     return null;
   }
@@ -339,7 +306,7 @@ function DropdownListOptions({
     {
       option,
       selected: isOptionSelected(option),
-      current: deepEqual(option, currentOption),
+      current: deepEqual(option, currentItem),
       onSelect: () => handleOptionSelect(option)
     },
     idx

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

@@ -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/esm/components/ComboBox/Dropdown/Categories/Root.mjs

@@ -2,16 +2,16 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.4
  */
 'use client';
 
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useComboBoxDropdownContext } from '../../context/combobox-dropdown-context.mjs';
 import { DropdownCategoryType } from '../../types.mjs';
 import { DropdownUI } from '../../../DropdownUI/index.mjs';
 import { OptionsList } from '../OptionsList.mjs';
 import { LookupOptionsCategoryContent } from './LookupOptions/index.mjs';
-import { useComboBoxDropdownContext } from '../../context/combobox-dropdown-context.mjs';
 
 function RootCategoryContent({
   onOptionSelect

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

@@ -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/esm/components/ComboBox/Dropdown/Categories/getLookupCollection.mjs

@@ -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/esm/components/ComboBox/Dropdown/DrillUpButton.mjs

@@ -2,17 +2,19 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.4
  */
 'use client';
 
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { DropdownUI } from '../../DropdownUI/index.mjs';
+import { useNavigationContext } from './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;
   }
@@ -24,6 +26,7 @@ const DrillUpButton = forwardRef(({ onClick, ...props }, ref) => {
         drillUp();
         onClick?.(e);
       },
+      "data-current": currentItem === "drill-up" ? true : void 0,
       ...props,
       children: drillDownStackTop.label
     }

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.1.2
+ * v2.1.4
  */
 'use client';
 
@@ -10,10 +10,11 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { DropdownUI } from '../../DropdownUI/index.mjs';
 import { useComboBoxDropdownContext } from '../context/combobox-dropdown-context.mjs';
 import { DropdownStackContextProvider } from '../context/combobox-dropdown-stack.mjs';
-import { SearchInput } from './SearchInput.mjs';
 import { ActiveCategoryContent } from './ActiveCategoryContent.mjs';
 import { DrillUpButton } from './DrillUpButton.mjs';
 import { DropdownPopoverProvider, DropdownAnchor, DropdownPopoverContent } from '../DropdownPopover/index.mjs';
+import { NavigationContextProvider } from './NavigationContext.mjs';
+import { SearchInput } from './SearchInput.mjs';
 
 function Dropdown({
   topDropdownPanelComponent,
@@ -37,12 +38,12 @@ function Dropdown({
   }
   return /* @__PURE__ */ jsx(DropdownStackContextProvider, { children: /* @__PURE__ */ jsxs(DropdownPopoverProvider, { children: [
     /* @__PURE__ */ jsx(DropdownAnchor, { children }),
-    /* @__PURE__ */ jsxs(DropdownPopoverContent, { children: [
+    /* @__PURE__ */ jsx(NavigationContextProvider, { children: /* @__PURE__ */ jsxs(DropdownPopoverContent, { children: [
       /* @__PURE__ */ jsx(DrillUpButton, {}),
       topDropdownPanelComponent && /* @__PURE__ */ jsx(Fragment, { children: topDropdownPanelComponent }),
       /* @__PURE__ */ jsx(SearchInput, { autoFocus: autoFocusOnSearch }),
       /* @__PURE__ */ jsx(ActiveCategoryContent, { onOptionSelect })
-    ] })
+    ] }) })
   ] }) });
 }
 

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

@@ -0,0 +1,108 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.1.4
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext, useState } from 'react';
+import deepEqual from 'fast-deep-equal';
+import { useComboBoxDropdownContext } from '../context/combobox-dropdown-context.mjs';
+
+const NavigationContext = createContext({
+  currentItem: null,
+  moveToNextItem: () => null,
+  moveToPreviousItem: () => null,
+  onOptionsListChange: () => null
+});
+function NavigationContextProvider({
+  children
+}) {
+  const [currentItem, setCurrentItem] = useState(null);
+  const { isOptionSelected, drillDownStackTop } = 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__ */ jsx(
+    NavigationContext.Provider,
+    {
+      value: {
+        currentItem,
+        moveToNextItem,
+        moveToPreviousItem,
+        onOptionsListChange
+      },
+      children
+    }
+  );
+}
+function useNavigationContext() {
+  return 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))
+  );
+}
+
+export { NavigationContextProvider, useNavigationContext };

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

@@ -2,14 +2,14 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.4
  */
 'use client';
 
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { DropdownUI } from '../../DropdownUI/index.mjs';
-import useEventStopPropagation from '../../../hooks/useEventStopPropagation.mjs';
 import { SvgIconType } from '../../SvgIcon/svg-icon-type.mjs';
+import useEventStopPropagation from '../../../helpers/hooks/useEventStopPropagation.mjs';
+import { DropdownUI } from '../../DropdownUI/index.mjs';
 
 function DropdownOption({
   option,