@integration-app/react 2.6.3 → 2.8.0

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

package/dist/cjs/components/AdvancedOptions.cjs

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

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

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

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.6.3
+ * v2.8.0
  */
 '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.6.3
+ * v2.8.0
  */
 'use client';
 
@@ -15,7 +15,7 @@ var OptionsList = require('../OptionsList.cjs');
 function CustomValueCategoryContent({
   onOptionSelect
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.Panel, { children: /* @__PURE__ */ jsxRuntime.jsx(OptionsList.OptionsList, { onOptionSelect }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.Panel, { children: /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.List, { children: /* @__PURE__ */ jsxRuntime.jsx(OptionsList.OptionsList, { onOptionSelect }) }) });
 }
 
 exports.CustomValueCategoryContent = CustomValueCategoryContent;

package/dist/cjs/components/ComboBox/Dropdown/Categories/Formulas/DropdownPanelFormulaConfig.cjs

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

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.6.3
+ * v2.8.0
  */
 'use client';
 
@@ -15,7 +15,7 @@ var OptionsList = require('../../OptionsList.cjs');
 function FormulasCategoryContent({
   onOptionSelect
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.Panel, { children: /* @__PURE__ */ jsxRuntime.jsx(OptionsList.OptionsList, { onOptionSelect }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.Panel, { children: /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.List, { children: /* @__PURE__ */ jsxRuntime.jsx(OptionsList.OptionsList, { onOptionSelect }) }) }) });
 }
 
 exports.FormulasCategoryContent = FormulasCategoryContent;

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

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

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

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

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.6.3
+ * v2.8.0
  */
 'use client';
 
@@ -18,10 +18,8 @@ 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 integrationAppIntegrationContext = require('../../../../../contexts/integration-app-integration-context.cjs');
-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');
+var css = require('../../../../../styled-system/css/css.cjs');
 require('../../../../../styled-system/helpers.cjs');
 var sva = require('../../../../../styled-system/css/sva.cjs');
 require('../../../../../styled-system/jsx/is-valid-prop.cjs');
@@ -35,7 +33,8 @@ 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 NavigationContext = require('../../KeyboardNavigation/NavigationContext.cjs');
+var useKeyboardBinding = require('../../KeyboardNavigation/useKeyboardBinding.cjs');
 var Option = require('../../Option.cjs');
 
 const lookupOptionsRecipe = sva.sva({
@@ -50,7 +49,6 @@ const lookupOptionsRecipe = sva.sva({
   base: {
     container: {
       flexDir: "column",
-      my: "1.5",
       maxW: "md",
       overflowY: "auto"
     },
@@ -97,10 +95,11 @@ const lookupOptionsRecipe = sva.sva({
 });
 const styles = lookupOptionsRecipe();
 function LookupOptionsCategoryContent({
-  onOptionSelect
+  onOptionSelect,
+  children
 }) {
   const [options, setOptions] = React.useState([]);
-  const [loadingOptions, setLoadingOptions] = React.useState(true);
+  const [isLoading, setLoadingOptions] = React.useState(true);
   const [additionalMessage, setAdditionalMessage] = React.useState("");
   const [error, setError] = React.useState();
   const { searchValue } = comboboxDropdownSearch.useComboBoxDropdownSearchContext();
@@ -194,21 +193,23 @@ function LookupOptionsCategoryContent({
   }
   const filteredOptions = utils.filterOptionsByLabel(options, searchValue);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    hasParameters && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(divider.Divider, {}),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        ParametersPanel.ParametersPanel,
-        {
-          onChange: (value) => setParametersValue(value),
-          schema: referenceCollectionSpec?.parametersSchema,
-          value: parametersValue
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(divider.Divider, {})
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(flex.Flex, { className: styles.container, children: [
+    hasParameters && /* @__PURE__ */ jsxRuntime.jsx(
+      ParametersPanel.ParametersPanel,
+      {
+        onChange: (value) => setParametersValue(value),
+        schema: referenceCollectionSpec?.parametersSchema,
+        value: parametersValue
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(divider.Divider, { my: "1.5" }),
+    /* @__PURE__ */ jsxRuntime.jsx(flex.Flex, { className: styles.container, children: /* @__PURE__ */ jsxRuntime.jsxs(index.DropdownUI.List, { children: [
+      children ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        children,
+        /* @__PURE__ */ jsxRuntime.jsx(divider.Divider, { my: "1.5" })
+      ] }) : null,
       /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.ListHeader, { children: "Available options" }),
-      !hasMissingParameters ? loadingOptions ? /* @__PURE__ */ jsxRuntime.jsxs(index.DropdownUI.List, { children: [
+      hasMissingParameters && /* @__PURE__ */ jsxRuntime.jsx(OptionsParametersRequiredAlert, {}),
+      !hasMissingParameters ? isLoading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.LoadingItem, {}),
         /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.LoadingItem, {}),
         /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.LoadingItem, {})
@@ -217,74 +218,31 @@ function LookupOptionsCategoryContent({
         {
           text: error?.message || "Something went wrong"
         }
-      ) : /* @__PURE__ */ jsxRuntime.jsxs(index.DropdownUI.List, { children: [
+      ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           LookupOptionsList,
           {
-            options: filteredOptions,
+            options,
+            filteredOptions,
             onOptionSelect: (value) => onOptionSelect(value?.value)
           }
         ),
         additionalMessage && /* @__PURE__ */ jsxRuntime.jsx(AdditionalMessageAlert, { text: additionalMessage })
-      ] }) : /* @__PURE__ */ jsxRuntime.jsx(OptionsParametersRequiredAlert, {})
-    ] })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {})
+    ] }) })
   ] });
 }
 function LookupOptionsList({
+  filteredOptions,
   options,
   onOptionSelect
 }) {
-  const { isOptionSelected, drillUp } = comboboxDropdownContext.useComboBoxDropdownContext();
-  const { scopedComboboxId } = comboboxContext.useComboBox();
-  const {
-    currentItem,
-    moveToPreviousItem,
-    moveToNextItem,
-    onOptionsListChange
-  } = NavigationContext.useNavigationContext();
-  keyboardEvents.useKeyboardEventSubscribe({
-    scopedComboboxId,
-    event: keyboardEvents.EVENT_TYPE.OPTION_DOWN,
-    callback: () => {
-      moveToPreviousItem(options, [], currentItem);
-    }
-  });
-  keyboardEvents.useKeyboardEventSubscribe({
-    scopedComboboxId,
-    event: keyboardEvents.EVENT_TYPE.OPTION_UP,
-    callback: () => {
-      moveToNextItem(options, [], currentItem);
-    }
-  });
-  keyboardEvents.useKeyboardEventSubscribe({
-    scopedComboboxId,
-    event: keyboardEvents.EVENT_TYPE.OPTION_LEFT,
-    callback: () => {
-      drillUp();
-    }
-  });
-  keyboardEvents.useKeyboardEventSubscribe({
-    scopedComboboxId,
-    event: keyboardEvents.EVENT_TYPE.OPTION_RIGHT,
-    callback: handleKeyEnter
+  const { isOptionSelected } = comboboxDropdownContext.useComboBoxDropdownContext();
+  const { currentItem } = NavigationContext.useNavigationContext(filteredOptions, []);
+  useKeyboardBinding.useKeyboardBinding({
+    options: filteredOptions,
+    fallbackOptions: options
   });
-  keyboardEvents.useKeyboardEventSubscribe({
-    scopedComboboxId,
-    event: keyboardEvents.EVENT_TYPE.OPTION_SELECT,
-    callback: handleKeyEnter
-  });
-  useDeepEffect.useDeepEffect(() => {
-    onOptionsListChange(options, []);
-  }, [options]);
-  function handleKeyEnter() {
-    if (currentItem === "drill-up") {
-      drillUp();
-      return;
-    }
-    if (currentItem) {
-      handleOptionSelect(currentItem);
-    }
-  }
   function handleOptionSelect(option) {
     onOptionSelect(option);
   }
@@ -292,6 +250,8 @@ function LookupOptionsList({
     DropdownListOptions,
     {
       options,
+      filteredOptions,
+      currentItem,
       isOptionSelected,
       handleOptionSelect
     }
@@ -299,26 +259,27 @@ function LookupOptionsList({
 }
 function DropdownListOptions({
   options,
+  filteredOptions,
+  currentItem,
   isOptionSelected,
   handleOptionSelect
 }) {
-  const { currentItem } = NavigationContext.useNavigationContext();
-  if (!options) {
-    return null;
-  }
-  if (options.length === 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.NoOptionsHeading, { text: "No results found" });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: options.map((option, idx) => /* @__PURE__ */ jsxRuntime.jsx(
-    Option.default,
-    {
-      option,
-      selected: isOptionSelected(option),
-      current: deepEqual(option, currentItem),
-      onSelect: () => handleOptionSelect(option)
-    },
-    idx
-  )) });
+  const items = filteredOptions.length ? filteredOptions : options;
+  const isFallback = !filteredOptions.length;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    isFallback && /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.NoOptionsHeading, { text: "No options found" }),
+    isFallback && /* @__PURE__ */ jsxRuntime.jsx("hr", { className: css.css({ my: 2 }) }),
+    items.map((option, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+      Option.default,
+      {
+        option,
+        selected: isOptionSelected(option),
+        current: deepEqual(option, currentItem),
+        onSelect: () => handleOptionSelect(option)
+      },
+      idx
+    ))
+  ] });
 }
 function OptionsParametersRequiredAlert() {
   const styles2 = lookupOptionsRecipe();

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.6.3
+ * v2.8.0
  */
 'use client';
 
@@ -15,7 +15,7 @@ var OptionsList = require('../OptionsList.cjs');
 function OptionsCategoryContent({
   onOptionSelect
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.Panel, { children: /* @__PURE__ */ jsxRuntime.jsx(OptionsList.OptionsList, { onOptionSelect }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.Panel, { children: /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.List, { children: /* @__PURE__ */ jsxRuntime.jsx(OptionsList.OptionsList, { onOptionSelect }) }) });
 }
 
 exports.OptionsCategoryContent = OptionsCategoryContent;

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.6.3
+ * v2.8.0
  */
 'use client';
 
@@ -19,10 +19,7 @@ function RootCategoryContent({
   onOptionSelect
 }) {
   const { availableCategories } = comboboxDropdownContext.useComboBoxDropdownContext();
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.Panel, { children: /* @__PURE__ */ jsxRuntime.jsx(OptionsList.OptionsList, { onOptionSelect }) }),
-    availableCategories?.includes(types.DropdownCategoryType.LOOKUP_OPTIONS) && /* @__PURE__ */ jsxRuntime.jsx(index$1.LookupOptionsCategoryContent, { onOptionSelect })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.Panel, { children: availableCategories?.includes(types.DropdownCategoryType.LOOKUP_OPTIONS) ? /* @__PURE__ */ jsxRuntime.jsx(index$1.LookupOptionsCategoryContent, { onOptionSelect, children: /* @__PURE__ */ jsxRuntime.jsx(OptionsList.OptionsList, { onOptionSelect }) }) : /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.List, { children: /* @__PURE__ */ jsxRuntime.jsx(OptionsList.OptionsList, { onOptionSelect }) }) }) });
 }
 
 exports.RootCategoryContent = RootCategoryContent;

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.6.3
+ * v2.8.0
  */
 'use client';
 
@@ -15,7 +15,7 @@ var OptionsList = require('../OptionsList.cjs');
 function VariablesCategoryContent({
   onOptionSelect
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.Panel, { children: /* @__PURE__ */ jsxRuntime.jsx(OptionsList.OptionsList, { onOptionSelect }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.Panel, { children: /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.List, { children: /* @__PURE__ */ jsxRuntime.jsx(OptionsList.OptionsList, { onOptionSelect }) }) });
 }
 
 exports.VariablesCategoryContent = VariablesCategoryContent;

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

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.6.3
+ * v2.8.0
  */
 'use client';
 
@@ -11,7 +11,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var index = require('../../DropdownUI/index.cjs');
-var NavigationContext = require('./NavigationContext.cjs');
+var NavigationContext = require('./KeyboardNavigation/NavigationContext.cjs');
 var comboboxDropdownContext = require('../context/combobox-dropdown-context.cjs');
 
 const DrillUpButton = React.forwardRef(({ onClick, ...props }, ref) => {

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.6.3
+ * v2.8.0
  */
 'use client';
 
@@ -15,7 +15,7 @@ var comboboxDropdownStack = require('../context/combobox-dropdown-stack.cjs');
 var ActiveCategoryContent = require('./ActiveCategoryContent.cjs');
 var DrillUpButton = require('./DrillUpButton.cjs');
 var index = require('../DropdownPopover/index.cjs');
-var NavigationContext = require('./NavigationContext.cjs');
+var NavigationContext = require('./KeyboardNavigation/NavigationContext.cjs');
 var SearchInput = require('./SearchInput.cjs');
 
 function Dropdown({