@integration-app/react 2.6.3 → 2.7.0

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.6.3
+ * v2.7.0
  */
 'use client';
 
@@ -16,10 +16,8 @@ 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 { useIntegrationAppIntegration } from '../../../../../contexts/integration-app-integration-context.mjs';
-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 { css } from '../../../../../styled-system/css/css.mjs';
 import '../../../../../styled-system/helpers.mjs';
 import { sva } from '../../../../../styled-system/css/sva.mjs';
 import '../../../../../styled-system/jsx/is-valid-prop.mjs';
@@ -33,7 +31,8 @@ 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 { useNavigationContext } from '../../KeyboardNavigation/NavigationContext.mjs';
+import { useKeyboardBinding } from '../../KeyboardNavigation/useKeyboardBinding.mjs';
 import DropdownOption from '../../Option.mjs';
 
 const lookupOptionsRecipe = sva({
@@ -48,7 +47,6 @@ const lookupOptionsRecipe = sva({
   base: {
     container: {
       flexDir: "column",
-      my: "1.5",
       maxW: "md",
       overflowY: "auto"
     },
@@ -95,10 +93,11 @@ const lookupOptionsRecipe = sva({
 });
 const styles = lookupOptionsRecipe();
 function LookupOptionsCategoryContent({
-  onOptionSelect
+  onOptionSelect,
+  children
 }) {
   const [options, setOptions] = useState([]);
-  const [loadingOptions, setLoadingOptions] = useState(true);
+  const [isLoading, setLoadingOptions] = useState(true);
   const [additionalMessage, setAdditionalMessage] = useState("");
   const [error, setError] = useState();
   const { searchValue } = useComboBoxDropdownSearchContext();
@@ -192,21 +191,23 @@ function LookupOptionsCategoryContent({
   }
   const filteredOptions = filterOptionsByLabel(options, searchValue);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    hasParameters && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Divider, {}),
-      /* @__PURE__ */ jsx(
-        ParametersPanel,
-        {
-          onChange: (value) => setParametersValue(value),
-          schema: referenceCollectionSpec?.parametersSchema,
-          value: parametersValue
-        }
-      ),
-      /* @__PURE__ */ jsx(Divider, {})
-    ] }),
-    /* @__PURE__ */ jsxs(Flex, { className: styles.container, children: [
+    hasParameters && /* @__PURE__ */ jsx(
+      ParametersPanel,
+      {
+        onChange: (value) => setParametersValue(value),
+        schema: referenceCollectionSpec?.parametersSchema,
+        value: parametersValue
+      }
+    ),
+    /* @__PURE__ */ jsx(Divider, { my: "1.5" }),
+    /* @__PURE__ */ jsx(Flex, { className: styles.container, children: /* @__PURE__ */ jsxs(DropdownUI.List, { children: [
+      children ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        children,
+        /* @__PURE__ */ jsx(Divider, { my: "1.5" })
+      ] }) : null,
       /* @__PURE__ */ jsx(DropdownUI.ListHeader, { children: "Available options" }),
-      !hasMissingParameters ? loadingOptions ? /* @__PURE__ */ jsxs(DropdownUI.List, { children: [
+      hasMissingParameters && /* @__PURE__ */ jsx(OptionsParametersRequiredAlert, {}),
+      !hasMissingParameters ? isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(DropdownUI.LoadingItem, {}),
         /* @__PURE__ */ jsx(DropdownUI.LoadingItem, {}),
         /* @__PURE__ */ jsx(DropdownUI.LoadingItem, {})
@@ -215,74 +216,31 @@ function LookupOptionsCategoryContent({
         {
           text: error?.message || "Something went wrong"
         }
-      ) : /* @__PURE__ */ jsxs(DropdownUI.List, { children: [
+      ) : /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(
           LookupOptionsList,
           {
-            options: filteredOptions,
+            options,
+            filteredOptions,
             onOptionSelect: (value) => onOptionSelect(value?.value)
           }
         ),
         additionalMessage && /* @__PURE__ */ jsx(AdditionalMessageAlert, { text: additionalMessage })
-      ] }) : /* @__PURE__ */ jsx(OptionsParametersRequiredAlert, {})
-    ] })
+      ] }) : /* @__PURE__ */ jsx(Fragment, {})
+    ] }) })
   ] });
 }
 function LookupOptionsList({
+  filteredOptions,
   options,
   onOptionSelect
 }) {
-  const { isOptionSelected, drillUp } = useComboBoxDropdownContext();
-  const { scopedComboboxId } = useComboBox();
-  const {
-    currentItem,
-    moveToPreviousItem,
-    moveToNextItem,
-    onOptionsListChange
-  } = useNavigationContext();
-  useKeyboardEventSubscribe({
-    scopedComboboxId,
-    event: EVENT_TYPE.OPTION_DOWN,
-    callback: () => {
-      moveToPreviousItem(options, [], currentItem);
-    }
-  });
-  useKeyboardEventSubscribe({
-    scopedComboboxId,
-    event: EVENT_TYPE.OPTION_UP,
-    callback: () => {
-      moveToNextItem(options, [], currentItem);
-    }
-  });
-  useKeyboardEventSubscribe({
-    scopedComboboxId,
-    event: EVENT_TYPE.OPTION_LEFT,
-    callback: () => {
-      drillUp();
-    }
-  });
-  useKeyboardEventSubscribe({
-    scopedComboboxId,
-    event: EVENT_TYPE.OPTION_RIGHT,
-    callback: handleKeyEnter
+  const { isOptionSelected } = useComboBoxDropdownContext();
+  const { currentItem } = useNavigationContext(filteredOptions, []);
+  useKeyboardBinding({
+    options: filteredOptions,
+    fallbackOptions: options
   });
-  useKeyboardEventSubscribe({
-    scopedComboboxId,
-    event: EVENT_TYPE.OPTION_SELECT,
-    callback: handleKeyEnter
-  });
-  useDeepEffect(() => {
-    onOptionsListChange(options, []);
-  }, [options]);
-  function handleKeyEnter() {
-    if (currentItem === "drill-up") {
-      drillUp();
-      return;
-    }
-    if (currentItem) {
-      handleOptionSelect(currentItem);
-    }
-  }
   function handleOptionSelect(option) {
     onOptionSelect(option);
   }
@@ -290,6 +248,8 @@ function LookupOptionsList({
     DropdownListOptions,
     {
       options,
+      filteredOptions,
+      currentItem,
       isOptionSelected,
       handleOptionSelect
     }
@@ -297,26 +257,27 @@ function LookupOptionsList({
 }
 function DropdownListOptions({
   options,
+  filteredOptions,
+  currentItem,
   isOptionSelected,
   handleOptionSelect
 }) {
-  const { currentItem } = useNavigationContext();
-  if (!options) {
-    return null;
-  }
-  if (options.length === 0) {
-    return /* @__PURE__ */ jsx(DropdownUI.NoOptionsHeading, { text: "No results found" });
-  }
-  return /* @__PURE__ */ jsx(Fragment, { children: options.map((option, idx) => /* @__PURE__ */ jsx(
-    DropdownOption,
-    {
-      option,
-      selected: isOptionSelected(option),
-      current: deepEqual(option, currentItem),
-      onSelect: () => handleOptionSelect(option)
-    },
-    idx
-  )) });
+  const items = filteredOptions.length ? filteredOptions : options;
+  const isFallback = !filteredOptions.length;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    isFallback && /* @__PURE__ */ jsx(DropdownUI.NoOptionsHeading, { text: "No options found" }),
+    isFallback && /* @__PURE__ */ jsx("hr", { className: css({ my: 2 }) }),
+    items.map((option, idx) => /* @__PURE__ */ jsx(
+      DropdownOption,
+      {
+        option,
+        selected: isOptionSelected(option),
+        current: deepEqual(option, currentItem),
+        onSelect: () => handleOptionSelect(option)
+      },
+      idx
+    ))
+  ] });
 }
 function OptionsParametersRequiredAlert() {
   const styles2 = lookupOptionsRecipe();

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.6.3
+ * v2.7.0
  */
 'use client';
 
@@ -13,7 +13,7 @@ import { OptionsList } from '../OptionsList.mjs';
 function OptionsCategoryContent({
   onOptionSelect
 }) {
-  return /* @__PURE__ */ jsx(DropdownUI.Panel, { children: /* @__PURE__ */ jsx(OptionsList, { onOptionSelect }) });
+  return /* @__PURE__ */ jsx(DropdownUI.Panel, { children: /* @__PURE__ */ jsx(DropdownUI.List, { children: /* @__PURE__ */ jsx(OptionsList, { onOptionSelect }) }) });
 }
 
 export { OptionsCategoryContent };

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

@@ -2,11 +2,11 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.6.3
+ * v2.7.0
  */
 'use client';
 
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsx, Fragment } from 'react/jsx-runtime';
 import { useComboBoxDropdownContext } from '../../context/combobox-dropdown-context.mjs';
 import { DropdownCategoryType } from '../../types.mjs';
 import { DropdownUI } from '../../../DropdownUI/index.mjs';
@@ -17,10 +17,7 @@ function RootCategoryContent({
   onOptionSelect
 }) {
   const { availableCategories } = useComboBoxDropdownContext();
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(DropdownUI.Panel, { children: /* @__PURE__ */ jsx(OptionsList, { onOptionSelect }) }),
-    availableCategories?.includes(DropdownCategoryType.LOOKUP_OPTIONS) && /* @__PURE__ */ jsx(LookupOptionsCategoryContent, { onOptionSelect })
-  ] });
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(DropdownUI.Panel, { children: availableCategories?.includes(DropdownCategoryType.LOOKUP_OPTIONS) ? /* @__PURE__ */ jsx(LookupOptionsCategoryContent, { onOptionSelect, children: /* @__PURE__ */ jsx(OptionsList, { onOptionSelect }) }) : /* @__PURE__ */ jsx(DropdownUI.List, { children: /* @__PURE__ */ jsx(OptionsList, { onOptionSelect }) }) }) });
 }
 
 export { RootCategoryContent };

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.6.3
+ * v2.7.0
  */
 'use client';
 
@@ -13,7 +13,7 @@ import { OptionsList } from '../OptionsList.mjs';
 function VariablesCategoryContent({
   onOptionSelect
 }) {
-  return /* @__PURE__ */ jsx(DropdownUI.Panel, { children: /* @__PURE__ */ jsx(OptionsList, { onOptionSelect }) });
+  return /* @__PURE__ */ jsx(DropdownUI.Panel, { children: /* @__PURE__ */ jsx(DropdownUI.List, { children: /* @__PURE__ */ jsx(OptionsList, { onOptionSelect }) }) });
 }
 
 export { VariablesCategoryContent };

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

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

@@ -2,14 +2,14 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.6.3
+ * v2.7.0
  */
 'use client';
 
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { DropdownUI } from '../../DropdownUI/index.mjs';
-import { useNavigationContext } from './NavigationContext.mjs';
+import { useNavigationContext } from './KeyboardNavigation/NavigationContext.mjs';
 import { useComboBoxDropdownContext } from '../context/combobox-dropdown-context.mjs';
 
 const DrillUpButton = forwardRef(({ onClick, ...props }, ref) => {

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.6.3
+ * v2.7.0
  */
 'use client';
 
@@ -13,7 +13,7 @@ import { DropdownStackContextProvider } from '../context/combobox-dropdown-stack
 import { ActiveCategoryContent } from './ActiveCategoryContent.mjs';
 import { DrillUpButton } from './DrillUpButton.mjs';
 import { DropdownPopoverProvider, DropdownAnchor, DropdownPopoverContent } from '../DropdownPopover/index.mjs';
-import { NavigationContextProvider } from './NavigationContext.mjs';
+import { NavigationContextProvider } from './KeyboardNavigation/NavigationContext.mjs';
 import { SearchInput } from './SearchInput.mjs';
 
 function Dropdown({

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

@@ -0,0 +1,200 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.7.0
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useRef, useContext, useEffect, useState, useReducer } from 'react';
+import deepEqual from 'fast-deep-equal';
+import { useDeepEffect } from '../../../../helpers/hooks/useDeepEffect.mjs';
+import { useComboBoxDropdownContext } from '../../context/combobox-dropdown-context.mjs';
+
+const NavigationContext = createContext({
+  currentItem: null,
+  moveToNextItem: () => null,
+  moveToPreviousItem: () => null,
+  onOptionsListChange: () => null
+});
+function payloadReducer(state, action) {
+  const compactState = Object.entries(state).reduce(
+    (acc, [orderId, payload]) => {
+      if (!payload.options.length && !payload.fallbackOptions.length) {
+        return acc;
+      }
+      return {
+        ...acc,
+        [Number(orderId)]: payload
+      };
+    },
+    {}
+  );
+  return {
+    ...compactState,
+    [action.orderId]: {
+      options: action.options,
+      fallbackOptions: action.fallbackOptions
+    }
+  };
+}
+function NavigationContextProvider({
+  children
+}) {
+  const [currentItem, setCurrentItem] = useState(null);
+  const [payload, dispatch] = useReducer(payloadReducer, {});
+  const { isOptionSelected, drillDownStackTop } = useComboBoxDropdownContext();
+  useDeepEffect(() => {
+    const itemOptions = getUnifiedOptionsList(payload);
+    if (!itemOptions.length) {
+      return;
+    }
+    if (currentItem === "drill-up") {
+      setCurrentItem(itemOptions[0]);
+      return;
+    }
+    if (!currentItem || itemOptions.indexOf(currentItem) == -1) {
+      setCurrentItem(itemOptions[0]);
+      return;
+    }
+    if (getOptionIndex(currentItem, itemOptions) == -1) {
+      const selectedOption = itemOptions.find(isOptionSelected);
+      if (selectedOption) {
+        setCurrentItem(selectedOption);
+      } else {
+        const onlyOptions = getOnlyItemOptions(itemOptions);
+        setCurrentItem(onlyOptions[0]);
+      }
+    }
+  }, [payload]);
+  const moveToPreviousItem = () => {
+    if (currentItem === "drill-up") {
+      return;
+    }
+    const itemOptions = getUnifiedOptionsList(payload);
+    if (!currentItem) {
+      setCurrentItem(itemOptions[itemOptions.length - 1]);
+      return;
+    }
+    const idx = getOptionIndex(currentItem, itemOptions);
+    if (idx === 0 && !!drillDownStackTop) {
+      setCurrentItem("drill-up");
+      return;
+    }
+    if (idx === 0) {
+      return;
+    }
+    if (idx > 0) {
+      const currentOption = itemOptions[idx - 1];
+      setCurrentItem(currentOption);
+      return;
+    }
+    setCurrentItem(itemOptions[itemOptions.length - 1]);
+  };
+  const moveToNextItem = () => {
+    const itemOptions = getUnifiedOptionsList(payload);
+    if (itemOptions.length === 0) {
+      setCurrentItem(null);
+      return;
+    }
+    if (!currentItem || currentItem === "drill-up") {
+      setCurrentItem(itemOptions[0]);
+      return;
+    }
+    const idx = getOptionIndex(currentItem, itemOptions);
+    if (idx === itemOptions.length - 1) {
+      return;
+    }
+    if (idx === -1) {
+      setCurrentItem(itemOptions[0]);
+    }
+    if (idx < itemOptions.length - 1) {
+      const currentOption = itemOptions[idx + 1];
+      setCurrentItem(currentOption);
+    }
+  };
+  const onOptionsListChange = ({
+    orderId,
+    options,
+    fallbackOptions
+  }) => {
+    dispatch({
+      orderId,
+      options,
+      fallbackOptions
+    });
+  };
+  return /* @__PURE__ */ jsx(
+    NavigationContext.Provider,
+    {
+      value: {
+        currentItem,
+        moveToNextItem,
+        moveToPreviousItem,
+        onOptionsListChange
+      },
+      children
+    }
+  );
+}
+function useNavigationContext(options = [], fallbackOptions = []) {
+  const orderId = useRef(Date.now());
+  const {
+    currentItem,
+    moveToNextItem,
+    moveToPreviousItem,
+    onOptionsListChange
+  } = useContext(NavigationContext);
+  useDeepEffect(() => {
+    onOptionsListChange({
+      orderId: orderId.current,
+      options,
+      fallbackOptions
+    });
+  }, [options, fallbackOptions]);
+  useEffect(() => {
+    return () => {
+      onOptionsListChange({
+        orderId: orderId.current,
+        options: [],
+        fallbackOptions: []
+      });
+    };
+  }, []);
+  return {
+    currentItem,
+    moveToNextItem,
+    moveToPreviousItem
+  };
+}
+const makeOptionComparable = (option) => {
+  return option && {
+    ...option,
+    label: option.searchLabel ?? option.label?.toString()
+  };
+};
+const getOnlyItemOptions = (options) => options.filter((o) => !o.isSection);
+function getOptionIndex(option, options) {
+  return options.findIndex(
+    (o) => deepEqual(makeOptionComparable(o), makeOptionComparable(option))
+  );
+}
+const getUnifiedOptionsList = (payload) => {
+  const { options, fallbackOptions } = Object.entries(payload).sort(([orderId]) => Number(orderId)).reduce(
+    (acc, [_, { options: options2, fallbackOptions: fallbackOptions2 }]) => {
+      return {
+        options: [...acc.options, ...options2],
+        fallbackOptions: [...acc.fallbackOptions, ...fallbackOptions2]
+      };
+    },
+    {
+      options: [],
+      fallbackOptions: []
+    }
+  );
+  const itemOptions = getOnlyItemOptions(options);
+  return itemOptions.length ? itemOptions : getOnlyItemOptions(fallbackOptions);
+};
+
+export { NavigationContextProvider, useNavigationContext };

package/dist/esm/components/ComboBox/Dropdown/KeyboardNavigation/useKeyboardBinding.mjs

@@ -0,0 +1,58 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.7.0
+ */
+'use client';
+
+import { useComboBox } from '../../context/combobox-context.mjs';
+import { useComboBoxDropdownContext } from '../../context/combobox-dropdown-context.mjs';
+import { useKeyboardEventSubscribe, EVENT_TYPE } from '../../../../helpers/hooks/keyboard-events.mjs';
+import { useNavigationContext } from './NavigationContext.mjs';
+
+const useKeyboardBinding = ({
+  options,
+  fallbackOptions,
+  onEnter = () => {
+  }
+}) => {
+  const { scopedComboboxId } = useComboBox();
+  const { drillUp } = useComboBoxDropdownContext();
+  const { currentItem, moveToNextItem, moveToPreviousItem } = useNavigationContext(options, fallbackOptions);
+  useKeyboardEventSubscribe({
+    scopedComboboxId,
+    event: EVENT_TYPE.OPTION_DOWN,
+    callback: moveToPreviousItem
+  });
+  useKeyboardEventSubscribe({
+    scopedComboboxId,
+    event: EVENT_TYPE.OPTION_UP,
+    callback: moveToNextItem
+  });
+  useKeyboardEventSubscribe({
+    scopedComboboxId,
+    event: EVENT_TYPE.OPTION_LEFT,
+    callback: drillUp
+  });
+  useKeyboardEventSubscribe({
+    scopedComboboxId,
+    event: EVENT_TYPE.OPTION_RIGHT,
+    callback: () => {
+      if (currentItem) {
+        onEnter(currentItem);
+      }
+    }
+  });
+  useKeyboardEventSubscribe({
+    scopedComboboxId,
+    event: EVENT_TYPE.OPTION_SELECT,
+    callback: () => {
+      if (currentItem) {
+        onEnter(currentItem);
+      }
+    }
+  });
+};
+
+export { useKeyboardBinding };

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

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