npm - @integration-app/react - Versions diffs - 2.5.4 → 2.5.6 - Mend

@integration-app/react 2.5.4 → 2.5.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (625) hide show

package/README.md CHANGED Viewed

@@ -1,4 +1,33 @@
-# Integration.app / React package
+# [Integration.app](https://integration.app) React Package
-- [Developers documentation](https://console.integration.app/docs)
-- [Rest API](https://api-reference.integration.app)
+[![npm version](https://badge.fury.io/js/@integration-app%2Freact.svg)](https://badge.fury.io/js/@integration-app%2Freact)
+React components and hooks for seamless integration with Integration.app services.
+## 📚 Documentation
+- [Developer Documentation](https://console.integration.app/docs/getting-started/front-end/react)
+- [REST API Reference](https://api-reference.integration.app)
+## 🚀 Installation
+With NPM:
+```bash
+npm install @integration.app/react
+```
+With Yarn:
+```bash
+yarn add @integration.app/react
+```
+## ✨ Features
+- Easy-to-use React hooks
+- Pre-built UI components
+- TypeScript support
+## 🆘 Support
+- For issues and feature requests, please contact us over email: <a href="mailto:support@integration.app">support@integration.app</a>
+- For documentation, visit our [docs portal](https://console.integration.app/docs/getting-started/front-end/react)

package/dist/cjs/_modules/awesome-debounce-promise.cjs CHANGED Viewed

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

package/dist/cjs/_modules/react-use-promise.cjs CHANGED Viewed

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

package/dist/cjs/components/AdvancedOptions.cjs CHANGED Viewed

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

package/dist/cjs/components/Button/Button.cjs CHANGED Viewed

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

package/dist/cjs/components/Button/Button.module.css.cjs CHANGED Viewed

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

package/dist/cjs/components/ComboBox/ComboBox.cjs CHANGED Viewed

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

package/dist/cjs/components/ComboBox/Dropdown/ActiveCategoryContent.cjs CHANGED Viewed

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

package/dist/cjs/components/ComboBox/Dropdown/Categories/CustomValue.cjs CHANGED Viewed

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

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

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

package/dist/cjs/components/ComboBox/Dropdown/Categories/Formulas/index.cjs CHANGED Viewed

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

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

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

package/dist/cjs/components/ComboBox/Dropdown/Categories/LookupOptions/ParametersPanel.cjs CHANGED Viewed

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

package/dist/cjs/components/ComboBox/Dropdown/Categories/LookupOptions/UiComponents.cjs CHANGED Viewed

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

package/dist/cjs/components/ComboBox/Dropdown/Categories/LookupOptions/index.cjs CHANGED Viewed

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.5.4
+ * v2.5.6
  */
 'use client';
@@ -242,14 +242,14 @@ function LookupOptionsList({
     scopedComboboxId,
     event: keyboardEvents.EVENT_TYPE.OPTION_DOWN,
     callback: () => {
-      moveToPreviousItem(options, currentItem);
+      moveToPreviousItem(options, [], currentItem);
     }
   });
   keyboardEvents.useKeyboardEventSubscribe({
     scopedComboboxId,
     event: keyboardEvents.EVENT_TYPE.OPTION_UP,
     callback: () => {
-      moveToNextItem(options, currentItem);
+      moveToNextItem(options, [], currentItem);
     }
   });
   keyboardEvents.useKeyboardEventSubscribe({
@@ -270,7 +270,7 @@ function LookupOptionsList({
     callback: handleKeyEnter
   });
   useDeepEffect.useDeepEffect(() => {
-    onOptionsListChange(options);
+    onOptionsListChange(options, []);
   }, [options]);
   function handleKeyEnter() {
     if (currentItem === "drill-up") {

package/dist/cjs/components/ComboBox/Dropdown/Categories/Options.cjs CHANGED Viewed

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

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

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

package/dist/cjs/components/ComboBox/Dropdown/Categories/Variables.cjs CHANGED Viewed

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

package/dist/cjs/components/ComboBox/Dropdown/Categories/getLookupCollection.cjs CHANGED Viewed

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

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

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

package/dist/cjs/components/ComboBox/Dropdown/Dropdown.cjs CHANGED Viewed

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

package/dist/cjs/components/ComboBox/Dropdown/NavigationContext.cjs CHANGED Viewed

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.5.4
+ * v2.5.6
  */
 'use client';
@@ -24,57 +24,61 @@ function NavigationContextProvider({
 }) {
   const [currentItem, setCurrentItem] = React.useState(null);
   const { isOptionSelected, drillDownStackTop } = comboboxDropdownContext.useComboBoxDropdownContext();
-  const moveToPreviousItem = (options, currentItem2) => {
+  const moveToPreviousItem = (options, fallbackOptions, currentItem2) => {
     if (currentItem2 === "drill-up") {
       return;
     }
-    const onlyOptions = getOnlyOptions(options);
+    const itemOptions = getUnifiedOptionsList(options, fallbackOptions);
     if (!currentItem2) {
-      setCurrentItem(onlyOptions[0]);
+      setCurrentItem(itemOptions[0]);
       return;
     }
-    const idx = getOptionIndex(currentItem2, onlyOptions);
+    const idx = getOptionIndex(currentItem2, itemOptions);
     if (idx === 0 && !!drillDownStackTop) {
       setCurrentItem("drill-up");
       return;
     }
     if (idx > 0) {
-      const currentOption = onlyOptions[idx - 1];
+      const currentOption = itemOptions[idx - 1];
       setCurrentItem(currentOption);
     }
   };
-  const moveToNextItem = (options, currentItem2) => {
-    const onlyOptions = getOnlyOptions(options);
-    if (onlyOptions.length === 0) {
+  const moveToNextItem = (options, fallbackOptions, currentItem2) => {
+    const itemOptions = getUnifiedOptionsList(options, fallbackOptions);
+    if (itemOptions.length === 0) {
       setCurrentItem(null);
       return;
     }
     if (!currentItem2 || currentItem2 === "drill-up") {
-      setCurrentItem(onlyOptions[0]);
+      setCurrentItem(itemOptions[0]);
       return;
     }
-    const idx = getOptionIndex(currentItem2, onlyOptions);
-    if (idx < onlyOptions.length - 1) {
-      const currentOption = onlyOptions[idx + 1];
+    const idx = getOptionIndex(currentItem2, itemOptions);
+    if (idx < itemOptions.length - 1) {
+      const currentOption = itemOptions[idx + 1];
       setCurrentItem(currentOption);
     }
   };
-  const onOptionsListChange = (options) => {
-    const onlyOptions = getOnlyOptions(options);
-    if (!onlyOptions?.length) {
+  const onOptionsListChange = (options, fallbackOptions) => {
+    const itemOptions = getUnifiedOptionsList(options, fallbackOptions);
+    if (!itemOptions.length) {
       return;
     }
-    if (!currentItem || currentItem === "drill-up") {
-      setCurrentItem(onlyOptions[0]);
+    if (currentItem === "drill-up") {
+      setCurrentItem(itemOptions[0]);
       return;
     }
-    if (getOptionIndex(currentItem, onlyOptions) == -1) {
+    if (!currentItem || itemOptions.indexOf(currentItem) == -1) {
+      setCurrentItem(itemOptions[0]);
+      return;
+    }
+    if (getOptionIndex(currentItem, itemOptions) == -1) {
       const selectedOption = options.find(isOptionSelected);
       if (selectedOption) {
         setCurrentItem(selectedOption);
       } else {
-        const onlyOptions2 = getOnlyOptions(options);
-        setCurrentItem(onlyOptions2[0]);
+        const onlyOptions = getOnlyItemOptions(options);
+        setCurrentItem(onlyOptions[0]);
       }
     }
   };
@@ -100,12 +104,17 @@ const makeOptionComparable = (option) => {
     label: option.searchLabel ?? option.label?.toString()
   };
 };
-const getOnlyOptions = (options) => options.filter((o) => !o.isSection);
+const getOnlyItemOptions = (options) => options.filter((o) => !o.isSection);
 function getOptionIndex(option, options) {
   return options.findIndex(
     (o) => deepEqual(makeOptionComparable(o), makeOptionComparable(option))
   );
 }
+const getUnifiedOptionsList = (options, fallbackOptions) => {
+  const itemOptions = getOnlyItemOptions(options);
+  const fallbackItemOptions = getOnlyItemOptions(fallbackOptions);
+  return itemOptions.length ? itemOptions : fallbackItemOptions;
+};
 exports.NavigationContextProvider = NavigationContextProvider;
 exports.useNavigationContext = useNavigationContext;

package/dist/cjs/components/ComboBox/Dropdown/Option.cjs CHANGED Viewed

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

package/dist/cjs/components/ComboBox/Dropdown/OptionsList.cjs CHANGED Viewed

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.5.4
+ * v2.5.6
  */
 'use client';
@@ -13,6 +13,8 @@ var deepEqual = require('fast-deep-equal');
 var jsConvertCase = require('js-convert-case');
 var keyboardEvents = require('../../../helpers/hooks/keyboard-events.cjs');
 var useDeepEffect = require('../../../helpers/hooks/useDeepEffect.cjs');
+var css = require('../../../styled-system/css/css.cjs');
+require('../../../styled-system/helpers.cjs');
 var index = require('../../DropdownUI/index.cjs');
 var comboboxDropdownContext = require('../context/combobox-dropdown-context.cjs');
 var NavigationContext = require('./NavigationContext.cjs');
@@ -21,37 +23,26 @@ var dataBuilderContext = require('../../DataBuilder/data-builder-context.cjs');
 var fieldContext = require('../../DataBuilder/field-context.cjs');
 var comboboxContext = require('../context/combobox-context.cjs');
-function OptionsList({
-  onOptionSelect
-}) {
-  const { onAddVariable } = dataBuilderContext.default();
-  const { field } = fieldContext.default();
-  const {
-    isOptionSelected,
-    canUseParentInputSearchValue,
-    drillDown,
-    optionsPayload,
-    drillUp
-  } = comboboxDropdownContext.useComboBoxDropdownContext();
-  const { value: parentInputValue, scopedComboboxId } = comboboxContext.useComboBox();
-  const {
-    currentItem,
-    moveToNextItem,
-    moveToPreviousItem,
-    onOptionsListChange
-  } = NavigationContext.useNavigationContext();
+const useKeyboardBinding = ({
+  options,
+  fallbackOptions,
+  onEnter
+}) => {
+  const { scopedComboboxId } = comboboxContext.useComboBox();
+  const { drillUp } = comboboxDropdownContext.useComboBoxDropdownContext();
+  const { currentItem, moveToNextItem, moveToPreviousItem } = NavigationContext.useNavigationContext();
   keyboardEvents.useKeyboardEventSubscribe({
     scopedComboboxId,
     event: keyboardEvents.EVENT_TYPE.OPTION_DOWN,
     callback: () => {
-      moveToPreviousItem(options, currentItem);
+      moveToPreviousItem(options, fallbackOptions, currentItem);
     }
   });
   keyboardEvents.useKeyboardEventSubscribe({
     scopedComboboxId,
     event: keyboardEvents.EVENT_TYPE.OPTION_UP,
     callback: () => {
-      moveToNextItem(options, currentItem);
+      moveToNextItem(options, fallbackOptions, currentItem);
     }
   });
   keyboardEvents.useKeyboardEventSubscribe({
@@ -64,22 +55,42 @@ function OptionsList({
   keyboardEvents.useKeyboardEventSubscribe({
     scopedComboboxId,
     event: keyboardEvents.EVENT_TYPE.OPTION_RIGHT,
-    callback: handleKeyEnter
+    callback: () => {
+      if (currentItem) {
+        onEnter(currentItem);
+      }
+    }
   });
   keyboardEvents.useKeyboardEventSubscribe({
     scopedComboboxId,
     event: keyboardEvents.EVENT_TYPE.OPTION_SELECT,
-    callback: handleKeyEnter
+    callback: () => {
+      if (currentItem) {
+        onEnter(currentItem);
+      }
+    }
   });
-  const [options = [], optionsError, optionsState] = optionsPayload;
+};
+function OptionsList({
+  onOptionSelect
+}) {
+  const { onAddVariable } = dataBuilderContext.default();
+  const { field } = fieldContext.default();
+  const {
+    isOptionSelected,
+    canUseParentInputSearchValue,
+    drillDown,
+    optionsPayload,
+    drillUp
+  } = comboboxDropdownContext.useComboBoxDropdownContext();
+  const { currentItem, onOptionsListChange } = NavigationContext.useNavigationContext();
+  const { value: parentInputValue } = comboboxContext.useComboBox();
+  const [result, optionsError, optionsState] = optionsPayload;
+  const { options = [], fallbackOptions = [] } = result || {};
+  useKeyboardBinding({ options, fallbackOptions, onEnter: handleOptionSelect });
   useDeepEffect.useDeepEffect(() => {
-    onOptionsListChange(options);
-  }, [options]);
-  function handleKeyEnter() {
-    if (currentItem) {
-      handleOptionSelect(currentItem);
-    }
-  }
+    onOptionsListChange(options, fallbackOptions);
+  }, [options, fallbackOptions]);
   function handleOptionSelect(option) {
     if (option === "drill-up") {
       drillUp();
@@ -103,6 +114,7 @@ function OptionsList({
     {
       searchTerm: canUseParentInputSearchValue ? parentInputValue : void 0,
       options,
+      fallbackOptions,
       isOptionSelected,
       handleOptionSelect
     }
@@ -132,32 +144,41 @@ function DropdownList({
 }
 function DropdownListOptions({
   options,
+  fallbackOptions,
   isOptionSelected,
   handleOptionSelect,
   searchTerm
 }) {
   const { currentItem } = NavigationContext.useNavigationContext();
-  if (!options) {
-    return null;
-  }
-  if (options.length === 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    !options.length && /* @__PURE__ */ jsxRuntime.jsx(
       index.DropdownUI.NoOptionsHeading,
       {
         text: searchTerm ? `No results found for: ${searchTerm}` : "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
-  )) });
+    ),
+    options.map((option, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+      Option.default,
+      {
+        option,
+        selected: isOptionSelected(option),
+        current: deepEqual(option, currentItem),
+        onSelect: () => handleOptionSelect(option)
+      },
+      idx
+    )),
+    fallbackOptions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("hr", { className: css.css({ my: 2 }) }),
+    fallbackOptions.map((option, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+      Option.default,
+      {
+        option,
+        selected: isOptionSelected(option),
+        current: deepEqual(option, currentItem),
+        onSelect: () => handleOptionSelect(option)
+      },
+      idx
+    ))
+  ] });
 }
 exports.OptionsList = OptionsList;

package/dist/cjs/components/ComboBox/Dropdown/SearchInput.cjs CHANGED Viewed

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

package/dist/cjs/components/ComboBox/Dropdown/categoryContentMapping.cjs CHANGED Viewed

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

package/dist/cjs/components/ComboBox/DropdownPopover/DropdownPositioner.cjs CHANGED Viewed

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

package/dist/cjs/components/ComboBox/DropdownPopover/index.cjs CHANGED Viewed

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

package/dist/cjs/components/ComboBox/DropdownPortal/index.cjs CHANGED Viewed

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

package/dist/cjs/components/ComboBox/Edit/OptionSelector.cjs CHANGED Viewed

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

package/dist/cjs/components/ComboBox/Edit/OptionSelector.module.css.cjs CHANGED Viewed

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

package/dist/cjs/components/ComboBox/Edit/TextInput.cjs CHANGED Viewed

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

package/dist/cjs/components/ComboBox/Value/ComboBoxValue.cjs CHANGED Viewed

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