npm - @integration-app/react - Versions diffs - 2.9.0 → 2.10.0 - Mend

@integration-app/react 2.9.0 → 2.10.0

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 (630) hide show

package/dist/cjs/styled-system/recipes/menu.cjs CHANGED Viewed

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

package/dist/cjs/styled-system/recipes/popover.cjs CHANGED Viewed

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

package/dist/cjs/styled-system/recipes/skeleton.cjs CHANGED Viewed

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

package/dist/cjs/styled-system/recipes/spinner.cjs CHANGED Viewed

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

package/dist/cjs/styled-system/recipes/switch-recipe.cjs CHANGED Viewed

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

package/dist/cjs/styled-system/recipes/text.cjs CHANGED Viewed

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

package/dist/cjs/styled-system/recipes/tooltip.cjs CHANGED Viewed

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

package/dist/cjs/styled-system/tokens/index.cjs CHANGED Viewed

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

package/dist/cjs/ui-kit/avatar.cjs CHANGED Viewed

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

package/dist/cjs/ui-kit/button.cjs CHANGED Viewed

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

package/dist/cjs/ui-kit/spinner.cjs CHANGED Viewed

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

package/dist/cjs/ui-kit/styled/alert.cjs CHANGED Viewed

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

package/dist/cjs/ui-kit/styled/avatar.cjs CHANGED Viewed

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

package/dist/cjs/ui-kit/styled/badge.cjs CHANGED Viewed

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

package/dist/cjs/ui-kit/styled/button.cjs CHANGED Viewed

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

package/dist/cjs/ui-kit/styled/icon-button.cjs CHANGED Viewed

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/cjs/ui-kit/styled/switch.cjs CHANGED Viewed

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

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

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

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

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

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

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

package/dist/cjs/ui-kit/switch.cjs CHANGED Viewed

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

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

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

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

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

package/dist/esm/components/AdvancedOptions.mjs CHANGED Viewed

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.9.0
+ * v2.10.0
  */
 'use client';
@@ -10,12 +10,13 @@ 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 { useIntegrationAppIntegration } from '../../../../../contexts/integration-app-integration-context.mjs';
+import { useThrottle } from '../../../../../helpers/hooks/useThrottle.mjs';
+import { simpleUniqueId } from '../../../../../helpers/simple-unique-id.mjs';
 import { useDataCollectionSpec } from '../../../../../hooks/data-collections/useDataCollectionSpec.mjs';
 import { css } from '../../../../../styled-system/css/css.mjs';
 import '../../../../../styled-system/helpers.mjs';
@@ -97,11 +98,13 @@ function LookupOptionsCategoryContent({
   children
 }) {
   const [options, setOptions] = useState([]);
+  const [findByIdOption, setFindByIdOption] = useState();
   const [isLoading, setLoadingOptions] = useState(true);
   const [additionalMessage, setAdditionalMessage] = useState("");
   const [error, setError] = useState();
   const { searchValue } = useComboBoxDropdownSearchContext();
   const { schema } = useComboBox();
+  const throttledSearchValue = useThrottle(searchValue, 250);
   const pointer = getReferenceCollectionPointerForSchema(schema);
   const [parametersValue, setParametersValue] = useState(
     pointer?.parameters || {}
@@ -121,9 +124,10 @@ function LookupOptionsCategoryContent({
   }, [JSON.stringify(pointer)]);
   useEffect(() => {
     if (schema && connectionId) {
-      void loadOptions();
+      void loadOptions(throttledSearchValue);
     }
   }, [
+    throttledSearchValue,
     connectionId,
     JSON.stringify(schema),
     JSON.stringify(parametersValue),
@@ -135,11 +139,12 @@ function LookupOptionsCategoryContent({
     referenceCollectionSpec?.parametersSchema,
     parametersValue
   )?.length > 0;
-  async function loadOptions() {
-    const loadOptionsId = v4();
+  async function loadOptions(searchValue2) {
+    const loadOptionsId = simpleUniqueId();
     currentLoadOptionsId.current = loadOptionsId;
     setLoadingOptions(true);
     setError(void 0);
+    setFindByIdOption(void 0);
     setAdditionalMessage("");
     if (hasMissingParameters) return;
     try {
@@ -152,19 +157,43 @@ function LookupOptionsCategoryContent({
       }
       const connectionAccessor = client.connection(connectionId);
       let response;
-      const collectionAccessor = await connectionAccessor.dataCollection(
+      const collectionAccessor = connectionAccessor.dataCollection(
         pointer?.key,
         parametersValue
       );
-      if (referenceCollectionSpec?.list) {
-        response = await collectionAccessor.list();
-      } else {
+      if (referenceCollectionSpec.findById) {
+        try {
+          const itemById = await collectionAccessor.findById({
+            id: searchValue2
+          });
+          setFindByIdOption({
+            label: itemById.record.name ?? itemById.record.id,
+            value: itemById.record.id,
+            hint: itemById.record.id,
+            hintPrefix: "ID:"
+          });
+        } catch {
+        }
+      }
+      if (!referenceCollectionSpec?.list) {
         throw new Error(
-          `Collection ${referenceCollectionSpec.key} does not support listing options.`
+          `Collection "${referenceCollectionSpec.key}" does not support listing options.`
         );
       }
+      if (searchValue2 && referenceCollectionSpec.search) {
+        try {
+          response = await collectionAccessor.search({
+            query: searchValue2
+          });
+          response.cursor = void 0;
+        } catch {
+        }
+      }
+      if (!searchValue2 && !response && referenceCollectionSpec?.list) {
+        response = await collectionAccessor.list();
+      }
       if (currentLoadOptionsId.current === loadOptionsId) {
-        const options2 = response.records.map((record) => {
+        const options2 = response?.records.map((record) => {
           return {
             label: record.name ?? record.id,
             value: record.id,
@@ -172,12 +201,12 @@ function LookupOptionsCategoryContent({
             hintPrefix: "ID:"
           };
         });
-        if (response.cursor) {
+        if (response?.cursor && !!options2) {
           setAdditionalMessage(
             `Only the first ${options2.length} options are loaded. If your option is not in the list, please type its ID manually.`
           );
         }
-        setOptions(options2);
+        setOptions(options2 || []);
       }
     } catch (e) {
       if (currentLoadOptionsId.current === loadOptionsId) {
@@ -189,7 +218,14 @@ function LookupOptionsCategoryContent({
       }
     }
   }
-  const filteredOptions = filterOptionsByLabel(options, searchValue);
+  const filteredOptions = filterOptionsByLabel(options, searchValue, true, [
+    "value"
+  ]);
+  const aggregatedOptions = aggregateOptions(
+    filteredOptions,
+    searchValue,
+    findByIdOption
+  );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     hasParameters && /* @__PURE__ */ jsx(
       ParametersPanel,
@@ -207,39 +243,41 @@ function LookupOptionsCategoryContent({
       ] }) : null,
       /* @__PURE__ */ jsx(DropdownUI.ListHeader, { children: "Available options" }),
       hasMissingParameters && /* @__PURE__ */ jsx(OptionsParametersRequiredAlert, {}),
-      !hasMissingParameters ? isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(DropdownUI.LoadingItem, {}),
-        /* @__PURE__ */ jsx(DropdownUI.LoadingItem, {}),
-        /* @__PURE__ */ jsx(DropdownUI.LoadingItem, {})
-      ] }) : error ? /* @__PURE__ */ jsx(
-        DropdownUI.ErrorHeading,
-        {
-          text: error?.message || "Something went wrong"
-        }
-      ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      !hasMissingParameters && !error && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(
           LookupOptionsList,
           {
-            options,
-            filteredOptions,
+            fallbackOptions: options,
+            options: aggregatedOptions,
             onOptionSelect: (value) => onOptionSelect(value?.value)
           }
         ),
         additionalMessage && /* @__PURE__ */ jsx(AdditionalMessageAlert, { text: additionalMessage })
-      ] }) : /* @__PURE__ */ jsx(Fragment, {})
+      ] }),
+      !hasMissingParameters && isLoading && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(DropdownUI.LoadingItem, {}),
+        /* @__PURE__ */ jsx(DropdownUI.LoadingItem, {}),
+        /* @__PURE__ */ jsx(DropdownUI.LoadingItem, {})
+      ] }),
+      !hasMissingParameters && !isLoading && error && /* @__PURE__ */ jsx(
+        DropdownUI.ErrorHeading,
+        {
+          text: error?.message || "Something went wrong"
+        }
+      )
     ] }) })
   ] });
 }
 function LookupOptionsList({
-  filteredOptions,
   options,
+  fallbackOptions,
   onOptionSelect
 }) {
   const { isOptionSelected } = useComboBoxDropdownContext();
-  const { currentItem } = useNavigationContext(filteredOptions, []);
+  const { currentItem } = useNavigationContext(options, []);
   useKeyboardBinding({
-    options: filteredOptions,
-    fallbackOptions: options
+    options,
+    fallbackOptions
   });
   function handleOptionSelect(option) {
     onOptionSelect(option);
@@ -247,8 +285,8 @@ function LookupOptionsList({
   return /* @__PURE__ */ jsx(DropdownUI.List, { children: /* @__PURE__ */ jsx(
     DropdownListOptions,
     {
+      fallbackOptions,
       options,
-      filteredOptions,
       currentItem,
       isOptionSelected,
       handleOptionSelect
@@ -257,13 +295,13 @@ function LookupOptionsList({
 }
 function DropdownListOptions({
   options,
-  filteredOptions,
+  fallbackOptions,
   currentItem,
   isOptionSelected,
   handleOptionSelect
 }) {
-  const items = filteredOptions.length ? filteredOptions : options;
-  const isFallback = !filteredOptions.length;
+  const items = options.length ? options : fallbackOptions;
+  const isFallback = !options.length;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     isFallback && /* @__PURE__ */ jsx(DropdownUI.NoOptionsHeading, { text: "No options found" }),
     isFallback && /* @__PURE__ */ jsx("hr", { className: css({ my: 2 }) }),
@@ -293,5 +331,30 @@ function AdditionalMessageAlert({ text }) {
     /* @__PURE__ */ jsx(Title, { className: styles2["additional-message-title"], children: text })
   ] });
 }
+function aggregateOptions(options, searchValue, findByIdOption) {
+  const result = [];
+  if (searchValue) {
+    if (findByIdOption) {
+      result.push(findByIdOption);
+    } else {
+      result.push({
+        label: searchValue,
+        value: searchValue,
+        hint: "custom",
+        hintPrefix: "ID:"
+      });
+    }
+  }
+  result.push(...options);
+  return deduplicateOptions(result);
+}
+function deduplicateOptions(options) {
+  const uniqueOptions = /* @__PURE__ */ new Set();
+  return options.filter((option) => {
+    if (uniqueOptions.has(option.value)) return false;
+    uniqueOptions.add(option.value);
+    return true;
+  });
+}
 export { AdditionalMessageAlert, LookupOptionsCategoryContent, OptionsParametersRequiredAlert };