@integration-app/react 2.0.3-beta.3 → 2.0.4-beta.0

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

@@ -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';
 
@@ -10,8 +10,10 @@ import { jsx } from 'react/jsx-runtime';
 import { DropdownUI } from '../../../DropdownUI/index.mjs';
 import { OptionsList } from '../OptionsList.mjs';
 
-function CustomValueTab({ onSelect }) {
-  return /* @__PURE__ */ jsx(DropdownUI.Panel, { children: /* @__PURE__ */ jsx(OptionsList, { onSelect }) });
+function CustomValueCategoryContent({
+  onOptionSelect
+}) {
+  return /* @__PURE__ */ jsx(DropdownUI.Panel, { children: /* @__PURE__ */ jsx(OptionsList, { onOptionSelect }) });
 }
 
-export { CustomValueTab };
+export { CustomValueCategoryContent };

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

@@ -0,0 +1,109 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.4-beta.0
+ */
+'use client';
+
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { getFormula } from '@integration-app/sdk';
+import { useState, useEffect } from 'react';
+import { getFormulas } from '../../../../DataBuilder/Formula/index.mjs';
+import { useComboBox } from '../../../context/combobox-context.mjs';
+import { useKeyboardEventSubscribe, EVENT_TYPE } from '../../../../../hooks/keyboard-events.mjs';
+import { useComboBoxDropdownContext } from '../../../context/combobox-dropdown-context.mjs';
+import '../../../context/combobox-dropdown-search.mjs';
+import '../../../context/combobox-dropdown-stack.mjs';
+import '../../../../../styled-system/css/css.mjs';
+import '../../../../../styled-system/helpers.mjs';
+import { sva } from '../../../../../styled-system/css/sva.mjs';
+import { Button } from '../../../../../ui-kit/button.mjs';
+import '../../../../../styled-system/jsx/is-valid-prop.mjs';
+import { Box } from '../../../../../styled-system/jsx/box.mjs';
+import { Flex } from '../../../../../styled-system/jsx/flex.mjs';
+import '../../../../../styled-system/patterns/visually-hidden.mjs';
+
+const formulaConfigRecipe = 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 = getFormulas();
+  const { value, schema, variablesSchema, scopedComboboxId } = useComboBox();
+  const { drillUp } = useComboBoxDropdownContext();
+  const [localValue, setLocalValue] = useState(value);
+  useEffect(() => {
+    setLocalValue(value);
+  }, [JSON.stringify(value)]);
+  useKeyboardEventSubscribe({
+    scopedComboboxId,
+    event: EVENT_TYPE.OPTION_LEFT,
+    callback: () => {
+      drillUp();
+    }
+  });
+  const formula = 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__ */ jsxs(Flex, { className: styles.container, children: [
+    /* @__PURE__ */ jsx(Box, { className: styles.form, children: /* @__PURE__ */ jsx(
+      FormulaInDropdownPanelComponent,
+      {
+        formula,
+        schema,
+        variablesSchema,
+        onChange: handleOnChange
+      }
+    ) }),
+    /* @__PURE__ */ jsx("hr", {}),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        onClick: handleOnSaveAndClose,
+        variant: "outline",
+        colorPalette: "gray",
+        size: "sm",
+        className: styles["save-button"],
+        children: "Save and Close"
+      }
+    )
+  ] });
+}
+
+export { DropdownPanelFormulaConfig };

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

@@ -0,0 +1,19 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.4-beta.0
+ */
+'use client';
+
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { DropdownUI } from '../../../../DropdownUI/index.mjs';
+import { OptionsList } from '../../OptionsList.mjs';
+
+function FormulasCategoryContent({
+  onOptionSelect
+}) {
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(DropdownUI.Panel, { children: /* @__PURE__ */ jsx(OptionsList, { onOptionSelect }) }) });
+}
+
+export { FormulasCategoryContent };

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

@@ -2,40 +2,86 @@
 /*
  * 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';
 
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { DropdownUI } from '../../../DropdownUI/index.mjs';
 import usePromise from '../../../../_modules/react-use-promise.mjs';
-import { getReferenceCollectionPathForSchema, schemaWithTitle, pickFieldsFromSchema, getDataCollectionCreateFields, UNIFIED_DATA_MODELS, getReferenceCollectionPointerForSchema } from '@integration-app/sdk';
+import { getReferenceCollectionPathForSchema, schemaWithTitle, pickFieldsFromSchema, getDataCollectionCreateFields, UNIFIED_DATA_MODELS } from '@integration-app/sdk';
 import { Radiobutton } from '../../../Radio/index.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 'react';
+import '../../../../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';
+import { Box } from '../../../../styled-system/jsx/box.mjs';
+import { Flex } from '../../../../styled-system/jsx/flex.mjs';
+import '../../../../styled-system/patterns/visually-hidden.mjs';
 import { makeSubField } from '../../../DataBuilder/data-field.mjs';
 import useDataBuilderField from '../../../DataBuilder/field-context.mjs';
 import DataBuilderFormField from '../../../DataBuilder/Field.mjs';
 import { makeDataField } from '../../../DataBuilder/index.mjs';
 import { DataBuilderForm } from '../../../DataBuilder/Form.mjs';
-import classes from './Collections.module.css.mjs';
+import { useKeyboardEventSubscribe, EVENT_TYPE } from '../../../../hooks/keyboard-events.mjs';
+import { useComboBox } from '../../context/combobox-context.mjs';
+import { useComboBoxDropdownContext } from '../../context/combobox-dropdown-context.mjs';
+import '../../context/combobox-dropdown-search.mjs';
+import '../../context/combobox-dropdown-stack.mjs';
+import { getLookupCollection } from './getLookupCollection.mjs';
+import { useMountDropdownReposition } from '../../DropdownPopover/helpers.mjs';
 
-function LookupTab({ onSelect }) {
+function LookupCategoryContent({
+  onOptionSelect
+}) {
   const { field } = useDataBuilderField();
   if (!field) {
     return null;
   }
   function handleSelect(value) {
-    onSelect?.(value);
+    onOptionSelect?.(value);
   }
-  return /* @__PURE__ */ jsx(DataBuilderDrilldownLookup, { field, onChange: handleSelect });
+  return /* @__PURE__ */ jsx(DataBuilderDrillDownLookup, { field, onChange: handleSelect });
 }
-function DataBuilderDrilldownLookup({ field, onChange }) {
+const lookupConfigRecipe = 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 }) {
+  useMountDropdownReposition();
   const { client } = useIntegrationAppClient();
   const { integrationId } = useIntegrationAppIntegration();
   const { connectionId } = useIntegrationAppConnection();
+  const { drillUp } = useComboBoxDropdownContext();
+  const { scopedComboboxId } = useComboBox();
   const lookupValue = field.value?.$lookup ?? {};
+  const styles = lookupConfigRecipe();
   const [
     { queryFieldsSchema, createFieldsSchema } = {
       queryFieldsSchema: null,
@@ -47,6 +93,13 @@ function DataBuilderDrilldownLookup({ field, onChange }) {
     () => getLookupSchemas({ field, client, connectionId, integrationId }),
     [getReferenceCollectionPathForSchema(field.schema)]
   );
+  useKeyboardEventSubscribe({
+    scopedComboboxId,
+    event: EVENT_TYPE.OPTION_LEFT,
+    callback: () => {
+      drillUp();
+    }
+  });
   function handleLookupChange(value) {
     onChange?.({
       $lookup: {
@@ -102,66 +155,53 @@ function DataBuilderDrilldownLookup({ field, onChange }) {
     schema: schemaWithTitle(queryFieldsSchema, "Query fields"),
     variablesSchema: field.variablesSchema
   });
-  return /* @__PURE__ */ jsxs(DropdownUI.Panel, { className: classes.wrapper, children: [
-    /* @__PURE__ */ jsx(DropdownUI.Panel, { withPaddings: true, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Box, { maxH: "full", overflow: "scroll", children: /* @__PURE__ */ jsx(DropdownUI.Panel, { children: /* @__PURE__ */ jsxs(Flex, { className: styles.panel, children: [
+    /* @__PURE__ */ jsx(
       DataBuilderForm,
       {
         showNullValueFields: true,
         field: dataBuilderField,
         onChange: (query) => handleLookupChange({ query })
       }
-    ) }),
-    createFieldsSchema && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs(
-        DropdownUI.Panel,
-        {
-          withPaddings: true,
-          className: classes.createFieldSchemaForm,
-          children: [
-            /* @__PURE__ */ jsx("strong", { children: "If nothing found" }),
-            /* @__PURE__ */ jsxs("label", { children: [
-              /* @__PURE__ */ jsx(
-                Radiobutton,
-                {
-                  checked: !lookupValue.createIfNotFound,
-                  onChange: () => handleLeaveEmptyClicked(),
-                  inline: true
-                }
-              ),
-              " ",
-              "Leave empty"
-            ] }),
-            /* @__PURE__ */ jsxs("label", { children: [
-              /* @__PURE__ */ jsx(
-                Radiobutton,
-                {
-                  checked: !!lookupValue.createIfNotFound,
-                  onChange: () => handleCreateNewClicked(),
-                  inline: true
-                }
-              ),
-              " ",
-              "Create new"
-            ] })
-          ]
-        }
-      ),
-      lookupValue.createIfNotFound && /* @__PURE__ */ jsx(
-        DropdownUI.Panel,
+    ),
+    /* @__PURE__ */ jsx("hr", {}),
+    /* @__PURE__ */ jsx(Flex, { className: styles.panel, children: createFieldsSchema && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(Flex, { className: styles["nothing-found-selector"], children: [
+        /* @__PURE__ */ jsx("span", { children: "If nothing found" }),
+        /* @__PURE__ */ jsxs(Flex, { flexDir: "column", gap: "1", children: [
+          /* @__PURE__ */ jsxs("label", { children: [
+            /* @__PURE__ */ jsx(
+              Radiobutton,
+              {
+                checked: !lookupValue.createIfNotFound,
+                onChange: () => handleLeaveEmptyClicked(),
+                inline: true
+              }
+            ),
+            "Leave empty"
+          ] }),
+          /* @__PURE__ */ jsxs("label", { children: [
+            /* @__PURE__ */ jsx(
+              Radiobutton,
+              {
+                checked: !!lookupValue.createIfNotFound,
+                onChange: () => handleCreateNewClicked(),
+                inline: true
+              }
+            ),
+            "Create new"
+          ] })
+        ] })
+      ] }),
+      lookupValue.createIfNotFound && /* @__PURE__ */ jsx(Flex, { className: styles["nothing-found-form"], children: /* @__PURE__ */ jsx(
+        DataBuilderFormField,
         {
-          withPaddings: true,
-          className: classes.createFieldSchema,
-          children: /* @__PURE__ */ jsx(
-            DataBuilderFormField,
-            {
-              field: makeNewRecordField(),
-              onChange: handleNewRecordChange
-            }
-          )
+          field: makeNewRecordField(),
+          onChange: handleNewRecordChange
         }
-      )
-    ] })
-  ] });
+      ) })
+    ] }) })
+  ] }) }) });
 }
 async function getLookupSchemas({
   field,
@@ -205,33 +245,5 @@ async function getLookupSchemas({
     return {};
   }
 }
-async function getLookupCollection({
-  schema,
-  client,
-  connectionId,
-  integrationId
-}) {
-  if (!schema) {
-    return void 0;
-  }
-  const { key, parameters } = 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;
-}
 
-export { LookupTab, getLookupCollection };
+export { LookupCategoryContent };

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

@@ -0,0 +1,145 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.4-beta.0
+ */
+'use client';
+
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { toHeaderCase } from 'js-convert-case';
+import clsx from 'clsx';
+import { makeDataField } from '../../../../DataBuilder/index.mjs';
+import { DataBuilderForm } from '../../../../DataBuilder/Form.mjs';
+import { SvgIconType } from '../../../../SvgIcon/svg-icon-type.mjs';
+import { PanelHeader, NoParameters, ParametersList, Parameter, ParameterText, PanelHeaderButton } from './UiComponents.mjs';
+import '../../../../../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';
+import { Flex } from '../../../../../styled-system/jsx/flex.mjs';
+import '../../../../../styled-system/patterns/visually-hidden.mjs';
+import { Button } from '../../../../../ui-kit/button.mjs';
+import { Icon } from '../../../../../ui-kit/styled/icon.mjs';
+import { SvgIcon } from '../../../../SvgIcon/index.mjs';
+
+const parametersConfigRecipe = sva({
+  className: "lookup-parameters-config",
+  slots: ["container", "save-button"],
+  base: {
+    container: {
+      flexDir: "column",
+      p: "1.5",
+      pb: "2.5",
+      gap: "2"
+    },
+    "save-button": {
+      w: "fit-content",
+      h: "fit-content",
+      rounded: "xl",
+      color: "slate.11",
+      px: "2",
+      py: "1"
+    }
+  }
+});
+function ParametersPanel({
+  onChange,
+  schema,
+  value,
+  className
+}) {
+  const parametersProvided = isParametersProvided(value);
+  const [isEditing, setIsEditing] = useState(!parametersProvided);
+  const { container } = parametersConfigRecipe();
+  function isParametersProvided(object) {
+    return !!Object.keys(object).length;
+  }
+  function toggleIsEditing() {
+    setIsEditing(!isEditing);
+  }
+  function handleOnClose() {
+    setIsEditing(false);
+  }
+  return /* @__PURE__ */ jsxs(Flex, { className: clsx(container, className), children: [
+    /* @__PURE__ */ jsx(
+      PanelHeader,
+      {
+        title: "Parameters",
+        actions: /* @__PURE__ */ jsx(
+          EditParametersButton,
+          {
+            onClick: toggleIsEditing,
+            isEditing
+          }
+        )
+      }
+    ),
+    isEditing ? /* @__PURE__ */ jsx(
+      ParametersPanelForm,
+      {
+        onChange,
+        onClose: handleOnClose,
+        schema,
+        value
+      }
+    ) : /* @__PURE__ */ jsx(ParametersPanelView, { schema, value })
+  ] });
+}
+function ParametersPanelForm({
+  onClose,
+  onChange,
+  schema,
+  value
+}) {
+  const styles = parametersConfigRecipe();
+  const field = makeDataField({
+    schema,
+    value
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(DataBuilderForm, { field, onChange }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        onClick: onClose,
+        variant: "outline",
+        colorPalette: "gray",
+        size: "sm",
+        className: styles["save-button"],
+        children: "Save and Close"
+      }
+    )
+  ] });
+}
+function ParametersPanelView({
+  schema,
+  value
+}) {
+  const parameters = Object.entries(schema?.properties ?? {}).map(
+    ([key, field]) => {
+      return {
+        title: field?.title || toHeaderCase(key),
+        value: value?.[key]
+      };
+    }
+  );
+  if (!parameters.length) {
+    return /* @__PURE__ */ jsx(NoParameters, {});
+  }
+  return /* @__PURE__ */ jsx(ParametersList, { children: parameters.map(({ title, value: value2 }, i) => /* @__PURE__ */ jsx(Parameter, { children: /* @__PURE__ */ jsx(ParameterText, { title, value: value2 }) }, i)) });
+}
+function EditParametersButton({
+  onClick,
+  isEditing
+}) {
+  const label = isEditing ? "Cancel" : "Edit";
+  const icon = isEditing ? SvgIconType.Close : SvgIconType.Edit;
+  return /* @__PURE__ */ jsxs(PanelHeaderButton, { onClick, children: [
+    label,
+    /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(SvgIcon, { type: icon }) })
+  ] });
+}
+
+export { ParametersPanel };

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

@@ -0,0 +1,128 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.4-beta.0
+ */
+'use client';
+
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import '../../../../../styled-system/css/css.mjs';
+import '../../../../../styled-system/helpers.mjs';
+import { sva } from '../../../../../styled-system/css/sva.mjs';
+import 'react';
+import '../../../../../styled-system/jsx/is-valid-prop.mjs';
+import { Flex } from '../../../../../styled-system/jsx/flex.mjs';
+import '../../../../../styled-system/patterns/visually-hidden.mjs';
+import { Badge } from '../../../../../ui-kit/styled/badge.mjs';
+import { Text } from '../../../../../ui-kit/styled/text.mjs';
+import { Button } from '../../../../../ui-kit/button.mjs';
+
+const panelHeaderRecipe = sva({
+  className: "panel-header",
+  slots: ["container", "title", "actions", "edit-button"],
+  base: {
+    container: {
+      justifyContent: "space-between",
+      alignItems: "center"
+    },
+    title: { textStyle: "xs", color: "slate.11", fontWeight: "medium" },
+    actions: {
+      gap: "2"
+    },
+    "edit-button": {
+      color: "slate.11",
+      fontWeight: "medium",
+      rounded: "sm",
+      py: "0.5",
+      px: "1",
+      gap: "0.5",
+      h: "initial"
+    }
+  }
+});
+function PanelHeader({
+  title,
+  actions
+}) {
+  const {
+    container,
+    title: titleStyles,
+    actions: actionsStyles
+  } = panelHeaderRecipe();
+  return /* @__PURE__ */ jsxs(Flex, { className: container, children: [
+    /* @__PURE__ */ jsx("h3", { className: titleStyles, children: title }),
+    /* @__PURE__ */ jsx(Flex, { className: actionsStyles, children: actions })
+  ] });
+}
+function PanelHeaderButton({
+  children,
+  ...props
+}) {
+  const styles = panelHeaderRecipe();
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      size: "xs",
+      variant: "ghost",
+      colorPalette: "gray",
+      className: styles["edit-button"],
+      ...props,
+      children
+    }
+  );
+}
+const parametersPreviewRecipe = sva({
+  className: "parameters-preview",
+  slots: ["container", "no-params", "badge"],
+  base: {
+    container: {
+      gap: "2",
+      flexWrap: "wrap"
+    },
+    "no-params": {
+      color: "slate.11",
+      textStyle: "sm",
+      fontWeight: "medium"
+    },
+    badge: {
+      color: "slate.11"
+    }
+  }
+});
+function ParametersList({ children }) {
+  const styles = parametersPreviewRecipe();
+  return /* @__PURE__ */ jsx(Flex, { className: styles.container, children });
+}
+function Parameter({ children }) {
+  const styles = parametersPreviewRecipe();
+  return /* @__PURE__ */ jsx(
+    Badge,
+    {
+      size: "sm",
+      variant: "subtle",
+      colorPalette: "gray",
+      className: styles.badge,
+      children
+    }
+  );
+}
+function NoParameters() {
+  const styles = parametersPreviewRecipe();
+  return /* @__PURE__ */ jsx(Text, { as: "span", className: styles["no-params"], children: "No parameters provided" });
+}
+function ParameterText({
+  title,
+  value
+}) {
+  if (!value) return /* @__PURE__ */ jsx(Fragment, { children: title });
+  const truncateTo = 20;
+  const truncatedValue = value.length > truncateTo ? `${value?.substring(0, truncateTo)}...` : value;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    title,
+    ": ",
+    truncatedValue
+  ] });
+}
+
+export { NoParameters, PanelHeader, PanelHeaderButton, Parameter, ParameterText, ParametersList };