@integration-app/react 2.1.2 → 2.1.3

package/dist/cjs/ui-kit/styled/icon.cjs

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

package/dist/cjs/ui-kit/styled/input.cjs

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

package/dist/cjs/ui-kit/styled/menu.cjs

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

package/dist/cjs/ui-kit/styled/popover.cjs

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

package/dist/cjs/ui-kit/styled/skeleton.cjs

@@ -3,15 +3,15 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.3
  */
 'use client';
 
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var factory$1 = require('@ark-ui/react/factory');
 var React = require('react');
+var factory$1 = require('@ark-ui/react/factory');
 var factory = require('../../styled-system/jsx/factory.cjs');
 require('../../styled-system/jsx/is-valid-prop.cjs');
 require('../../styled-system/helpers.cjs');

package/dist/cjs/ui-kit/styled/spinner.cjs

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

package/dist/cjs/ui-kit/styled/text.cjs

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

package/dist/cjs/ui-kit/styled/tooltip.cjs

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

package/dist/cjs/ui-kit/styled/utils/create-style-context.cjs

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

package/dist/esm/_modules/awesome-debounce-promise.mjs

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

package/dist/esm/_modules/react-use-promise.mjs

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

package/dist/esm/components/AdvancedOptions.mjs

@@ -2,13 +2,13 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.3
  */
 'use client';
 
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { Button } from './Button/Button.mjs';
 import { useState } from 'react';
+import { Button } from './Button/Button.mjs';
 
 function AdvancedOptions({
   title = "advanced options",

package/dist/esm/components/Button/Button.mjs

@@ -2,15 +2,15 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.3
  */
 'use client';
 
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import clsx from 'clsx';
-import { SvgIcon } from '../SvgIcon/index.mjs';
+import { clsx } from 'clsx';
 import { SvgIconType } from '../SvgIcon/svg-icon-type.mjs';
+import { SvgIcon } from '../SvgIcon/index.mjs';
 import { Tooltip } from '../Tooltip/index.mjs';
 import classes from './Button.module.css.mjs';
 

package/dist/esm/components/Button/Button.module.css.mjs

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

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

@@ -2,18 +2,18 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.3
  */
 'use client';
 
 import { jsx } from 'react/jsx-runtime';
 import { ComboBoxProvider } from './context/combobox-context.mjs';
-import { ValueType } from './value-spec.mjs';
 import { ComboBoxDropdownContextProvider } from './context/combobox-dropdown-context.mjs';
 import { ComboBoxDropdownSearchProvider } from './context/combobox-dropdown-search.mjs';
 import { canUserEnterValueFromKeyboard } from './context/helpers.mjs';
 import { OptionSelector } from './Edit/OptionSelector.mjs';
 import { TextInput } from './Edit/TextInput.mjs';
+import { ValueType } from './value-spec.mjs';
 
 function ComboBox({
   value,

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

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

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

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

package/dist/esm/components/ComboBox/Dropdown/Categories/Formulas/DropdownPanelFormulaConfig.mjs

@@ -2,27 +2,27 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.3
  */
 'use client';
 
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { getFormula } from '@integration-app/sdk';
 import { useState, useEffect } from 'react';
-import { getFormulas } from '../../../../DataBuilder/Formula/index.mjs';
+import { getFormula } from '@integration-app/sdk';
 import { useComboBox } from '../../../context/combobox-context.mjs';
-import { useKeyboardEventSubscribe, EVENT_TYPE } from '../../../../../hooks/keyboard-events.mjs';
 import { useComboBoxDropdownContext } from '../../../context/combobox-dropdown-context.mjs';
 import '../../../context/combobox-dropdown-search.mjs';
 import '../../../context/combobox-dropdown-stack.mjs';
+import { getFormulas } from '../../../../DataBuilder/Formula/index.mjs';
+import { useKeyboardEventSubscribe, EVENT_TYPE } from '../../../../../hooks/keyboard-events.mjs';
 import '../../../../../styled-system/css/css.mjs';
 import '../../../../../styled-system/helpers.mjs';
 import { sva } from '../../../../../styled-system/css/sva.mjs';
-import { Button } from '../../../../../ui-kit/button.mjs';
 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 { Button } from '../../../../../ui-kit/button.mjs';
 
 const formulaConfigRecipe = sva({
   className: "formula-config",
@@ -31,14 +31,14 @@ const formulaConfigRecipe = 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/esm/components/ComboBox/Dropdown/Categories/Formulas/index.mjs

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

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.3
  */
 '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 '../../../../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.3
  */
 '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.3
  */
 '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.3
  */
 '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 { useDataCollectionSpec } from '../../../../../hooks/data-collections/useDataCollectionSpec.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 '../../../../../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