@integration-app/react 2.0.3-beta.3 → 2.0.4-beta.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.0.3-beta.3
+ * v2.0.4-beta.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.0.3-beta.3
+ * v2.0.4-beta.0
  */
 'use client';
 
@@ -12,6 +12,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var usePromiseImport = require('react-use-promise');
 
-const usePromise = usePromiseImport?.default ?? usePromiseImport;
+const defaultExported = usePromiseImport?.default;
+const usePromise = defaultExported ?? usePromiseImport;
 
 exports.default = usePromise;

package/dist/cjs/components/AdvancedOptions.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3-beta.3
+ * v2.0.4-beta.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.0.3-beta.3
+ * v2.0.4-beta.0
  */
 'use client';
 
@@ -11,8 +11,9 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
-var index = require('../SvgIcon/index.cjs');
-var index$1 = require('../Tooltip/index.cjs');
+var index$1 = require('../SvgIcon/index.cjs');
+var svgIconType = require('../SvgIcon/svg-icon-type.cjs');
+var index = require('../Tooltip/index.cjs');
 var Button_module = require('./Button.module.css.cjs');
 
 function getButtonClassesByVariant(variant) {
@@ -54,13 +55,13 @@ const GenericButton = React.forwardRef(
         ref,
         "aria-busy": loading ? "true" : void 0,
         children: [
-          loading && /* @__PURE__ */ jsxRuntime.jsx(ButtonSvgIcon, { type: index.SvgIconType.Loader }),
+          loading && /* @__PURE__ */ jsxRuntime.jsx(ButtonSvgIcon, { type: svgIconType.SvgIconType.Loader }),
           children
         ]
       }
     );
     if (tooltip) {
-      return /* @__PURE__ */ jsxRuntime.jsx(index$1.Tooltip, { tooltip, ...tooltipProps, children: button });
+      return /* @__PURE__ */ jsxRuntime.jsx(index.Tooltip, { tooltip, ...tooltipProps, children: button });
     }
     return button;
   }
@@ -102,7 +103,7 @@ const IconButton = React.forwardRef(
     ]);
     const button = /* @__PURE__ */ jsxRuntime.jsx("button", { className: buttonIconClass, ...restProps, ref, children });
     if (tooltip) {
-      return /* @__PURE__ */ jsxRuntime.jsx(index$1.Tooltip, { tooltip, children: button });
+      return /* @__PURE__ */ jsxRuntime.jsx(index.Tooltip, { tooltip, children: button });
     }
     return button;
   }
@@ -114,7 +115,7 @@ function ButtonSvgIcon({
   position = "start"
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    index.SvgIcon,
+    index$1.SvgIcon,
     {
       type,
       className: clsx(

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.0.3-beta.3
+ * v2.0.4-beta.0
  */
 'use client';
 

package/dist/cjs/components/ComboBox/{index.cjs → ComboBox.cjs}

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3-beta.3
+ * v2.0.4-beta.0
  */
 'use client';
 
@@ -16,14 +16,6 @@ var comboboxDropdownSearch = require('./context/combobox-dropdown-search.cjs');
 var helpers = require('./context/helpers.cjs');
 var OptionSelector = require('./Edit/OptionSelector.cjs');
 var TextInput = require('./Edit/TextInput.cjs');
-require('fuse');
-require('../SvgIcon/index.cjs');
-require('js-convert-case');
-require('@integration-app/sdk');
-require('react');
-require('../Tag/styles.module.css.cjs');
-var comboboxDropdownStack = require('./context/combobox-dropdown-stack.cjs');
-var index$1 = require('./Value/index.cjs');
 
 function ComboBox({
   value,
@@ -89,19 +81,4 @@ function ComboBox({
   );
 }
 
-exports.ComboBoxProvider = comboboxContext.ComboBoxProvider;
-exports.useComboBox = comboboxContext.useComboBox;
-exports.ValueType = valueSpec.ValueType;
-exports.doesSchemaMatchValueType = valueSpec.doesSchemaMatchValueType;
-exports.getValueSpecFromSchema = valueSpec.getValueSpecFromSchema;
-exports.ComboBoxDropdownContextProvider = comboboxDropdownContext.ComboBoxDropdownContextProvider;
-exports.useComboBoxDropdownContext = comboboxDropdownContext.useComboBoxDropdownContext;
-exports.ComboBoxDropdownSearchProvider = comboboxDropdownSearch.ComboBoxDropdownSearchProvider;
-exports.useComboBoxDropdownSearchContext = comboboxDropdownSearch.useComboBoxDropdownSearchContext;
-exports.canUserEnterValueFromKeyboard = helpers.canUserEnterValueFromKeyboard;
-exports.getAvailableTabs = helpers.getAvailableTabs;
-exports.getCurrentTab = helpers.getCurrentTab;
-exports.DropdownStackContextProvider = comboboxDropdownStack.DropdownStackContextProvider;
-exports.useDropdownStackContext = comboboxDropdownStack.useDropdownStackContext;
-exports.ComboBoxValue = index$1.ComboBoxValue;
 exports.ComboBox = ComboBox;

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

@@ -0,0 +1,23 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.4-beta.0
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var comboboxDropdownContext = require('../context/combobox-dropdown-context.cjs');
+var categoryContentMapping = require('./categoryContentMapping.cjs');
+
+function ActiveCategoryContent({
+  onOptionSelect
+}) {
+  const { activeCategory } = comboboxDropdownContext.useComboBoxDropdownContext();
+  const CategoryContainer = (activeCategory ? categoryContentMapping.CATEGORY_COMPONENTS[activeCategory] : void 0) ?? (() => /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Unknown category" }));
+  return /* @__PURE__ */ jsxRuntime.jsx(CategoryContainer, { onOptionSelect });
+}
+
+exports.ActiveCategoryContent = ActiveCategoryContent;

package/dist/cjs/components/ComboBox/Dropdown/{Tabs → Categories}/CustomValue.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3-beta.3
+ * v2.0.4-beta.0
  */
 'use client';
 
@@ -12,8 +12,10 @@ var jsxRuntime = require('react/jsx-runtime');
 var index = require('../../../DropdownUI/index.cjs');
 var OptionsList = require('../OptionsList.cjs');
 
-function CustomValueTab({ onSelect }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.Panel, { children: /* @__PURE__ */ jsxRuntime.jsx(OptionsList.OptionsList, { onSelect }) });
+function CustomValueCategoryContent({
+  onOptionSelect
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.Panel, { children: /* @__PURE__ */ jsxRuntime.jsx(OptionsList.OptionsList, { onOptionSelect }) });
 }
 
-exports.CustomValueTab = CustomValueTab;
+exports.CustomValueCategoryContent = CustomValueCategoryContent;

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

@@ -0,0 +1,111 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.4-beta.0
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var sdk = require('@integration-app/sdk');
+var React = require('react');
+var index = require('../../../../DataBuilder/Formula/index.cjs');
+var comboboxContext = require('../../../context/combobox-context.cjs');
+var keyboardEvents = require('../../../../../hooks/keyboard-events.cjs');
+var comboboxDropdownContext = require('../../../context/combobox-dropdown-context.cjs');
+require('../../../context/combobox-dropdown-search.cjs');
+require('../../../context/combobox-dropdown-stack.cjs');
+require('../../../../../styled-system/css/css.cjs');
+require('../../../../../styled-system/helpers.cjs');
+var sva = require('../../../../../styled-system/css/sva.cjs');
+var button = require('../../../../../ui-kit/button.cjs');
+require('../../../../../styled-system/jsx/is-valid-prop.cjs');
+var box = require('../../../../../styled-system/jsx/box.cjs');
+var flex = require('../../../../../styled-system/jsx/flex.cjs');
+require('../../../../../styled-system/patterns/visually-hidden.cjs');
+
+const formulaConfigRecipe = sva.sva({
+  className: "formula-config",
+  slots: ["container", "form", "save-button"],
+  base: {
+    container: {
+      flexDir: "column",
+      p: "1.5",
+      gap: "2"
+    },
+    form: {
+      flex: "1",
+      minH: "0",
+      overflowX: "auto",
+      // TODO: reconsider this when we agreed on the max sizes for dropdown
+      width: "min(30rem, 70vw)"
+    },
+    "save-button": {
+      w: "fit-content",
+      h: "fit-content",
+      rounded: "xl",
+      color: "slate.11",
+      px: "2",
+      py: "1",
+      mt: "1"
+    }
+  }
+});
+function DropdownPanelFormulaConfig({
+  onOptionSelect
+}) {
+  const styles = formulaConfigRecipe();
+  const formulas = index.getFormulas();
+  const { value, schema, variablesSchema, scopedComboboxId } = comboboxContext.useComboBox();
+  const { drillUp } = comboboxDropdownContext.useComboBoxDropdownContext();
+  const [localValue, setLocalValue] = React.useState(value);
+  React.useEffect(() => {
+    setLocalValue(value);
+  }, [JSON.stringify(value)]);
+  keyboardEvents.useKeyboardEventSubscribe({
+    scopedComboboxId,
+    event: keyboardEvents.EVENT_TYPE.OPTION_LEFT,
+    callback: () => {
+      drillUp();
+    }
+  });
+  const formula = sdk.getFormula(localValue);
+  const formulaSpec = formula?.type && formulas[formula?.type];
+  function handleOnChange(newValue) {
+    setLocalValue(newValue);
+  }
+  function handleOnSaveAndClose() {
+    onOptionSelect(localValue);
+  }
+  if (!formulaSpec?.DropdownComponent) {
+    return null;
+  }
+  const FormulaInDropdownPanelComponent = formulaSpec?.DropdownComponent;
+  return /* @__PURE__ */ jsxRuntime.jsxs(flex.Flex, { className: styles.container, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(box.Box, { className: styles.form, children: /* @__PURE__ */ jsxRuntime.jsx(
+      FormulaInDropdownPanelComponent,
+      {
+        formula,
+        schema,
+        variablesSchema,
+        onChange: handleOnChange
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx("hr", {}),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      button.Button,
+      {
+        onClick: handleOnSaveAndClose,
+        variant: "outline",
+        colorPalette: "gray",
+        size: "sm",
+        className: styles["save-button"],
+        children: "Save and Close"
+      }
+    )
+  ] });
+}
+
+exports.DropdownPanelFormulaConfig = DropdownPanelFormulaConfig;

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

@@ -0,0 +1,21 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.4-beta.0
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var index = require('../../../../DropdownUI/index.cjs');
+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 }) }) });
+}
+
+exports.FormulasCategoryContent = FormulasCategoryContent;

package/dist/cjs/components/ComboBox/Dropdown/{Tabs → Categories}/Lookup.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3-beta.3
+ * v2.0.4-beta.0
  */
 'use client';
 
@@ -16,28 +16,74 @@ var index$2 = require('../../../Radio/index.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');
+require('react');
+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');
+var box = require('../../../../styled-system/jsx/box.cjs');
+var flex = require('../../../../styled-system/jsx/flex.cjs');
+require('../../../../styled-system/patterns/visually-hidden.cjs');
 var dataField = require('../../../DataBuilder/data-field.cjs');
 var fieldContext = require('../../../DataBuilder/field-context.cjs');
 var Field = require('../../../DataBuilder/Field.cjs');
 var index = require('../../../DataBuilder/index.cjs');
 var Form = require('../../../DataBuilder/Form.cjs');
-var Collections_module = require('./Collections.module.css.cjs');
+var keyboardEvents = require('../../../../hooks/keyboard-events.cjs');
+var comboboxContext = require('../../context/combobox-context.cjs');
+var comboboxDropdownContext = require('../../context/combobox-dropdown-context.cjs');
+require('../../context/combobox-dropdown-search.cjs');
+require('../../context/combobox-dropdown-stack.cjs');
+var getLookupCollection = require('./getLookupCollection.cjs');
+var helpers = require('../../DropdownPopover/helpers.cjs');
 
-function LookupTab({ onSelect }) {
+function LookupCategoryContent({
+  onOptionSelect
+}) {
   const { field } = fieldContext.default();
   if (!field) {
     return null;
   }
   function handleSelect(value) {
-    onSelect?.(value);
+    onOptionSelect?.(value);
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(DataBuilderDrilldownLookup, { field, onChange: handleSelect });
+  return /* @__PURE__ */ jsxRuntime.jsx(DataBuilderDrillDownLookup, { field, onChange: handleSelect });
 }
-function DataBuilderDrilldownLookup({ field, onChange }) {
+const lookupConfigRecipe = sva.sva({
+  className: "lookup-config",
+  slots: ["panel", "nothing-found-selector", "nothing-found-form"],
+  base: {
+    panel: {
+      p: "1.5",
+      flexDir: "column",
+      gap: "4"
+    },
+    "nothing-found-selector": {
+      display: "flex",
+      pl: "2",
+      flexDir: "column",
+      gap: "2.5",
+      "& > span": {
+        fontWeight: "medium"
+      },
+      "& label": {
+        fontWeight: "medium"
+      }
+    },
+    "nothing-found-form": {
+      flexDir: "column"
+    }
+  }
+});
+function DataBuilderDrillDownLookup({ field, onChange }) {
+  helpers.useMountDropdownReposition();
   const { client } = integrationAppClientContext.useIntegrationAppClient();
   const { integrationId } = integrationAppIntegrationContext.useIntegrationAppIntegration();
   const { connectionId } = integrationAppConnectionContext.useIntegrationAppConnection();
+  const { drillUp } = comboboxDropdownContext.useComboBoxDropdownContext();
+  const { scopedComboboxId } = comboboxContext.useComboBox();
   const lookupValue = field.value?.$lookup ?? {};
+  const styles = lookupConfigRecipe();
   const [
     { queryFieldsSchema, createFieldsSchema } = {
       queryFieldsSchema: null,
@@ -49,6 +95,13 @@ function DataBuilderDrilldownLookup({ field, onChange }) {
     () => getLookupSchemas({ field, client, connectionId, integrationId }),
     [sdk.getReferenceCollectionPathForSchema(field.schema)]
   );
+  keyboardEvents.useKeyboardEventSubscribe({
+    scopedComboboxId,
+    event: keyboardEvents.EVENT_TYPE.OPTION_LEFT,
+    callback: () => {
+      drillUp();
+    }
+  });
   function handleLookupChange(value) {
     onChange?.({
       $lookup: {
@@ -104,66 +157,53 @@ function DataBuilderDrilldownLookup({ field, onChange }) {
     schema: sdk.schemaWithTitle(queryFieldsSchema, "Query fields"),
     variablesSchema: field.variablesSchema
   });
-  return /* @__PURE__ */ jsxRuntime.jsxs(index$1.DropdownUI.Panel, { className: Collections_module.default.wrapper, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(index$1.DropdownUI.Panel, { withPaddings: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(box.Box, { maxH: "full", overflow: "scroll", children: /* @__PURE__ */ jsxRuntime.jsx(index$1.DropdownUI.Panel, { children: /* @__PURE__ */ jsxRuntime.jsxs(flex.Flex, { className: styles.panel, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
       Form.DataBuilderForm,
       {
         showNullValueFields: true,
         field: dataBuilderField,
         onChange: (query) => handleLookupChange({ query })
       }
-    ) }),
-    createFieldsSchema && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        index$1.DropdownUI.Panel,
-        {
-          withPaddings: true,
-          className: Collections_module.default.createFieldSchemaForm,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "If nothing found" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                index$2.Radiobutton,
-                {
-                  checked: !lookupValue.createIfNotFound,
-                  onChange: () => handleLeaveEmptyClicked(),
-                  inline: true
-                }
-              ),
-              " ",
-              "Leave empty"
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                index$2.Radiobutton,
-                {
-                  checked: !!lookupValue.createIfNotFound,
-                  onChange: () => handleCreateNewClicked(),
-                  inline: true
-                }
-              ),
-              " ",
-              "Create new"
-            ] })
-          ]
-        }
-      ),
-      lookupValue.createIfNotFound && /* @__PURE__ */ jsxRuntime.jsx(
-        index$1.DropdownUI.Panel,
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("hr", {}),
+    /* @__PURE__ */ jsxRuntime.jsx(flex.Flex, { className: styles.panel, children: createFieldsSchema && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(flex.Flex, { className: styles["nothing-found-selector"], children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "If nothing found" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(flex.Flex, { flexDir: "column", gap: "1", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              index$2.Radiobutton,
+              {
+                checked: !lookupValue.createIfNotFound,
+                onChange: () => handleLeaveEmptyClicked(),
+                inline: true
+              }
+            ),
+            "Leave empty"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              index$2.Radiobutton,
+              {
+                checked: !!lookupValue.createIfNotFound,
+                onChange: () => handleCreateNewClicked(),
+                inline: true
+              }
+            ),
+            "Create new"
+          ] })
+        ] })
+      ] }),
+      lookupValue.createIfNotFound && /* @__PURE__ */ jsxRuntime.jsx(flex.Flex, { className: styles["nothing-found-form"], children: /* @__PURE__ */ jsxRuntime.jsx(
+        Field.default,
         {
-          withPaddings: true,
-          className: Collections_module.default.createFieldSchema,
-          children: /* @__PURE__ */ jsxRuntime.jsx(
-            Field.default,
-            {
-              field: makeNewRecordField(),
-              onChange: handleNewRecordChange
-            }
-          )
+          field: makeNewRecordField(),
+          onChange: handleNewRecordChange
         }
-      )
-    ] })
-  ] });
+      ) })
+    ] }) })
+  ] }) }) });
 }
 async function getLookupSchemas({
   field,
@@ -174,7 +214,7 @@ async function getLookupSchemas({
   const referencePath = sdk.getReferenceCollectionPathForSchema(field?.schema);
   const referenceUdm = field.schema?.referenceUdm;
   if (referencePath && field.schema) {
-    const collection = await getLookupCollection({
+    const collection = await getLookupCollection.getLookupCollection({
       schema: field.schema,
       client,
       connectionId,
@@ -207,34 +247,5 @@ async function getLookupSchemas({
     return {};
   }
 }
-async function getLookupCollection({
-  schema,
-  client,
-  connectionId,
-  integrationId
-}) {
-  if (!schema) {
-    return void 0;
-  }
-  const { key, parameters } = sdk.getReferenceCollectionPointerForSchema(schema) ?? {};
-  if (!key) {
-    return void 0;
-  }
-  if (!connectionId && !integrationId) {
-    return void 0;
-  }
-  let result = void 0;
-  try {
-    if (connectionId) {
-      result = await client.connection(connectionId).dataCollection(key, parameters).get();
-    } else if (integrationId && key) {
-      result = await client.integration(integrationId).getDataCollection(key);
-    }
-  } catch (e) {
-    console.error(`fetching collection '${key}' returns error`, e);
-  }
-  return result;
-}
 
-exports.LookupTab = LookupTab;
-exports.getLookupCollection = getLookupCollection;
+exports.LookupCategoryContent = LookupCategoryContent;