@integration-app/react 2.0.3-beta.1 → 2.0.3-beta.2

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

@@ -0,0 +1,186 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState } from 'react';
+import deepEqual from 'fast-deep-equal';
+import { DropdownUI } from '../../DropdownUI/index.mjs';
+import { SvgIconType } from '../../SvgIcon/index.mjs';
+import { useDeepEffect } from '../../../hooks/useDeepEffect.mjs';
+import { useComboBoxDropdownContext } from '../context/combobox-dropdown-context.mjs';
+import { useComboBoxDropdownSearchContext } from '../context/combobox-dropdown-search.mjs';
+import { useKeyboardEventSubscribe, EVENT_TYPE } from '../../../hooks/keyboard-events.mjs';
+import ComboBoxOption from './Option.mjs';
+import useDataBuilder from '../../DataBuilder/data-builder-context.mjs';
+import useDataBuilderField from '../../DataBuilder/field-context.mjs';
+import { toSnakeCase } from 'js-convert-case';
+import { useComboBox } from '../context/combobox-context.mjs';
+import { ItemIcon, ItemTitle } from '../../DropdownUI/DropdownUIElements.mjs';
+
+function OptionsList({ onSelect }) {
+  const { onAddVariable } = useDataBuilder();
+  const { field } = useDataBuilderField();
+  const { isOptionSelected, generateOptions } = useComboBoxDropdownContext();
+  const {
+    searchValue,
+    setSearchValue,
+    drillDownDepth,
+    setDrillDownDepth,
+    searchSource
+  } = useComboBoxDropdownSearchContext();
+  const [currentOption, setCurrentOption] = useState(
+    null
+  );
+  useKeyboardEventSubscribe(EVENT_TYPE.OPTION_DOWN, makePreviousOptionCurrent);
+  useKeyboardEventSubscribe(EVENT_TYPE.OPTION_UP, makeNextOptionCurrent);
+  useKeyboardEventSubscribe(EVENT_TYPE.OPTION_SELECT, handleKeyEnter);
+  const [drilldownStack, setDrilldownStack] = useState([]);
+  const { value: parentInputValue } = useComboBox();
+  const canUseParentInputSearchValue = !searchValue && typeof parentInputValue === "string" && !!parentInputValue && drillDownDepth === 0 && searchSource === "editor";
+  const [options, optionsError, optionsState] = generateOptions(
+    canUseParentInputSearchValue ? parentInputValue : searchValue,
+    drilldownStack
+  );
+  useDeepEffect(() => {
+    if (!options?.length) {
+      return;
+    }
+    if (!currentOption || getOptionIndex(currentOption) == -1) {
+      const selectedOption = options.find(isOptionSelected);
+      if (selectedOption) {
+        setCurrentOption(selectedOption);
+      }
+    }
+  }, [options]);
+  function drillDown(option) {
+    setSearchValue("");
+    const newStack = [...drilldownStack, option];
+    setDrilldownStack(newStack);
+    setDrillDownDepth(newStack.length);
+  }
+  function drillUp() {
+    const newStack = drilldownStack.slice(0, drilldownStack.length - 2);
+    setDrilldownStack(newStack);
+    setDrillDownDepth(newStack.length);
+  }
+  const makeOptionComparable = (option) => {
+    return option && {
+      ...option,
+      label: option.searchLabel ?? option.label?.toString()
+    };
+  };
+  function getOptionIndex(option) {
+    return options.findIndex(
+      (o) => deepEqual(makeOptionComparable(o), makeOptionComparable(option))
+    );
+  }
+  function makeNextOptionCurrent() {
+    let idx = getOptionIndex(currentOption);
+    while (idx < options.length - 1) {
+      idx += 1;
+      const currentOption2 = options[idx];
+      if (optionCanBeSelected(currentOption2)) {
+        setCurrentOption(currentOption2);
+        break;
+      }
+    }
+  }
+  function makePreviousOptionCurrent() {
+    let idx = getOptionIndex(currentOption);
+    while (idx > 0) {
+      idx -= 1;
+      const currentOption2 = options[idx];
+      if (optionCanBeSelected(currentOption2)) {
+        setCurrentOption(currentOption2);
+        break;
+      }
+    }
+  }
+  function optionCanBeSelected(option) {
+    return !option.isSection;
+  }
+  function handleKeyEnter() {
+    if (currentOption) {
+      handleOptionSelect(currentOption);
+    }
+  }
+  function handleOptionSelect(option) {
+    if (option.addVariable) {
+      const objectLocator = option.addVariable;
+      const variableLocator = `${objectLocator}.${field.key || toSnakeCase(field.name) || toSnakeCase(field?.schema?.title)}`;
+      onAddVariable?.(variableLocator, field.schema ?? {});
+      onSelect({
+        $var: variableLocator
+      });
+    } else if (option.drilldownOptionFactories) {
+      drillDown(option);
+    } else if (option.drillup) {
+      drillUp();
+    } else {
+      onSelect(option.value);
+    }
+  }
+  return /* @__PURE__ */ jsx(DropdownList, { state: optionsState, error: optionsError, children: /* @__PURE__ */ jsx(
+    DropdownListOptions,
+    {
+      searchTerm: canUseParentInputSearchValue ? parentInputValue : void 0,
+      options,
+      currentOption,
+      isOptionSelected,
+      handleOptionSelect
+    }
+  ) });
+}
+function DropdownList({
+  state,
+  error,
+  children
+}) {
+  if (state === "rejected" || error) {
+    return /* @__PURE__ */ jsx(DropdownUI.List, { children: /* @__PURE__ */ jsxs(DropdownUI.Item, { hasError: true, children: [
+      /* @__PURE__ */ jsx(ItemIcon, { type: SvgIconType.AlertTriangle }),
+      /* @__PURE__ */ jsx(ItemTitle, { children: error?.message || "Something went wrong" })
+    ] }) });
+  }
+  if (state === "pending") {
+    return /* @__PURE__ */ jsx(DropdownUI.List, { children: /* @__PURE__ */ jsxs(DropdownUI.Item, { readonly: true, children: [
+      /* @__PURE__ */ jsx(ItemIcon, { type: SvgIconType.Loader }),
+      /* @__PURE__ */ jsx(ItemTitle, { children: "Loading" })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx(DropdownUI.List, { children });
+}
+function DropdownListOptions({
+  options,
+  currentOption,
+  isOptionSelected,
+  handleOptionSelect,
+  searchTerm
+}) {
+  if (!options) {
+    return null;
+  }
+  if (options.length === 0) {
+    return /* @__PURE__ */ jsx(DropdownUI.Item, { readonly: true, children: /* @__PURE__ */ jsxs(ItemTitle, { children: [
+      "No results found ",
+      searchTerm ? `for: ${searchTerm}` : ""
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: options.map((option, idx) => /* @__PURE__ */ jsx(
+    ComboBoxOption,
+    {
+      option,
+      selected: isOptionSelected(option),
+      current: deepEqual(option, currentOption),
+      onSelect: () => handleOptionSelect(option)
+    },
+    idx
+  )) });
+}
+
+export { OptionsList };

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

@@ -0,0 +1,56 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { DropdownUI } from '../../DropdownUI/index.mjs';
+import { useOptionListKeyNavDispatch } from '../../../hooks/keyboard-events.mjs';
+import { useComboBoxDropdownSearchContext } from '../context/combobox-dropdown-search.mjs';
+import { useComboBoxDropdownContext } from '../context/combobox-dropdown-context.mjs';
+import { renderTabs } from './tabs.mjs';
+import { useComboBox } from '../context/combobox-context.mjs';
+
+function SearchInput({ autoFocus }) {
+  const { activeTab } = useComboBoxDropdownContext();
+  const { hideSearch } = useComboBoxDropdownSearchContext();
+  if (activeTab && renderTabs[activeTab]?.hideSearchInput) {
+    return null;
+  }
+  if (hideSearch) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(DropdownSearchComponent, { autoFocus });
+}
+function DropdownSearchComponent({
+  autoFocus
+}) {
+  const { value: parentInputValue } = useComboBox();
+  const [searchInputElement, setSearchInputElement] = useState(null);
+  const {
+    searchValue,
+    setSearchValue,
+    drillDownDepth,
+    searchSource,
+    setSearchSource
+  } = useComboBoxDropdownSearchContext();
+  const canUseParentInputAsPlaceholder = !searchValue && typeof parentInputValue === "string" && !!parentInputValue && drillDownDepth === 0 && searchSource === "editor";
+  useOptionListKeyNavDispatch(searchInputElement);
+  return /* @__PURE__ */ jsx(
+    DropdownUI.Search,
+    {
+      ref: setSearchInputElement,
+      value: searchValue,
+      onChange: setSearchValue,
+      autoFocus,
+      placeholder: canUseParentInputAsPlaceholder ? parentInputValue : void 0,
+      onFocus: () => setSearchSource("combobox")
+    }
+  );
+}
+
+export { DropdownSearchComponent, SearchInput };

package/dist/esm/components/ComboBox/Dropdown/Tabs/Collections.module.css.mjs

@@ -0,0 +1,14 @@
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import styleInject from 'style-inject';
+
+var css_248z = ".Collections-module_wrapper__mUGMk {\n    max-height: 100%;\n    overflow: scroll\n}\n\n.Collections-module_createFieldSchemaForm__F3r63 {\n    --tw-bg-opacity: 1;\n    background-color: rgb(238 238 238 / var(--tw-bg-opacity));\n    display: flex;\n    flex-direction: column;\n    gap: 0.25rem\n}\n\n.Collections-module_createFieldSchemaForm__F3r63 label {\n    display: block;\n    cursor: pointer;\n    width: -moz-fit-content;\n    width: fit-content\n}\n\n.Collections-module_createFieldSchemaForm__F3r63 h3,\n.Collections-module_createFieldSchema__0uU9i h3 {\n    font-size: 0.875rem;\n    line-height: 1.4;\n    font-weight: 700;\n    margin-bottom: 0.25rem\n}\n";
+var classes = {"wrapper":"Collections-module_wrapper__mUGMk","createFieldSchemaForm":"Collections-module_createFieldSchemaForm__F3r63","createFieldSchema":"Collections-module_createFieldSchema__0uU9i"};
+styleInject(css_248z);
+
+export { classes as default };

package/dist/esm/components/ComboBox/Dropdown/Tabs/CustomValue.mjs

@@ -0,0 +1,17 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+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 }) });
+}
+
+export { CustomValueTab };

package/dist/esm/components/ComboBox/Dropdown/Tabs/Formulas/Formulas.module.css.mjs

@@ -0,0 +1,14 @@
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import styleInject from 'style-inject';
+
+var css_248z = ".Formulas-module_formulaConfig__9Ob-8 {\n}\n.Formulas-module_formulaConfig__header__9t0mE {\n  flex-shrink: 0;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  padding-left: 1rem;\n  padding-right: 0.5rem\n}\n.Formulas-module_formulaConfig__panel__Mkn2t {\n  padding: 1rem;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem\n}\n.Formulas-module_formulaConfig__panelContent__yima9 {\n  min-height: 0px;\n  flex: 1 1 0%;\n  overflow-x: auto;\n  width: min(30rem, 70vw)\n}\n.Formulas-module_formulaConfig__footer__7OO-A {\n  flex-shrink: 0;\n  flex-direction: row;\n  align-items: flex-start;\n  --tw-bg-opacity: 1;\n  background-color: rgb(238 238 238 / var(--tw-bg-opacity));\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  padding-left: 1rem;\n  padding-right: 0.5rem\n}\n";
+var classes = {"formulaConfig":"Formulas-module_formulaConfig__9Ob-8","formulaConfig__header":"Formulas-module_formulaConfig__header__9t0mE","formulaConfig__panel":"Formulas-module_formulaConfig__panel__Mkn2t","formulaConfig__panelContent":"Formulas-module_formulaConfig__panelContent__yima9","formulaConfig__footer":"Formulas-module_formulaConfig__footer__7OO-A"};
+styleInject(css_248z);
+
+export { classes as default };

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

@@ -0,0 +1,99 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { getFormula } from '@integration-app/sdk';
+import { useState, useEffect } from 'react';
+import { getFormulas } from '../../../../DataBuilder/Formula/index.mjs';
+import { DropdownUI } from '../../../../DropdownUI/index.mjs';
+import { useComboBox } from '../../../context/combobox-context.mjs';
+import { OptionsList } from '../../OptionsList.mjs';
+import { DropdownSearchComponent } from '../../SearchInput.mjs';
+import { PanelHeader, PanelHeaderButton } from '../LookupOptions/UiComponents.mjs';
+import { Button } from '../../../../Button/Button.mjs';
+import classes from './Formulas.module.css.mjs';
+
+const formulas = getFormulas();
+function FormulasTab({ onSelect }) {
+  const { value } = useComboBox();
+  const [userForcedSelectFormula, setUserForcedSelectFormula] = useState(false);
+  const formula = getFormula(value);
+  const formulaSpec = formula?.type && formulas[formula?.type];
+  const formulaDropdownComponentExists = !!formulaSpec?.DropdownComponent;
+  function handleOnSelect(value2) {
+    onSelect(value2);
+    setUserForcedSelectFormula(false);
+  }
+  if (value === null || userForcedSelectFormula || !formulaDropdownComponentExists) {
+    return /* @__PURE__ */ jsx(DropdownPanelFormulasList, { onSelect: handleOnSelect });
+  } else {
+    return /* @__PURE__ */ jsx(
+      DropdownPanelFormulaConfig,
+      {
+        onBackClick: () => setUserForcedSelectFormula(true),
+        onChange: onSelect
+      }
+    );
+  }
+}
+function DropdownPanelFormulasList({
+  onSelect
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(DropdownSearchComponent, {}),
+    /* @__PURE__ */ jsx(DropdownUI.Panel, { children: /* @__PURE__ */ jsx(OptionsList, { onSelect }) })
+  ] });
+}
+function DropdownPanelFormulaConfig({
+  onChange,
+  onBackClick
+}) {
+  const { value, schema, variablesSchema } = useComboBox();
+  const [localValue, setLocalValue] = useState(value);
+  useEffect(() => {
+    setLocalValue(value);
+  }, [JSON.stringify(value)]);
+  const formula = getFormula(localValue);
+  const formulaSpec = formula?.type && formulas[formula?.type];
+  function handleOnChange(newValue) {
+    setLocalValue(newValue);
+  }
+  function handleOnSaveAndClose() {
+    onChange(localValue);
+  }
+  if (!formulaSpec?.DropdownComponent) {
+    return null;
+  }
+  const FormulaInDropdownPanelComponent = formulaSpec?.DropdownComponent;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(DropdownUI.Panel, { className: classes.formulaConfig__header, children: /* @__PURE__ */ jsxs(PanelHeader, { children: [
+      formulaSpec?.name ?? "Formula",
+      /* @__PURE__ */ jsx(PanelHeaderButton, { onClick: onBackClick, children: "Back" })
+    ] }) }),
+    /* @__PURE__ */ jsx(DropdownUI.Panel, { className: classes.formulaConfig__panel, children: /* @__PURE__ */ jsx("div", { className: classes.formulaConfig__panelContent, children: /* @__PURE__ */ jsx(
+      FormulaInDropdownPanelComponent,
+      {
+        formula,
+        schema,
+        variablesSchema,
+        onChange: handleOnChange
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx(DropdownUI.Panel, { className: classes.formulaConfig__footer, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "small",
+        variant: "secondary",
+        onClick: handleOnSaveAndClose,
+        children: "Save & Close"
+      }
+    ) })
+  ] });
+}
+
+export { FormulasTab };

package/dist/esm/components/ComboBox/Dropdown/Tabs/Lookup.mjs

@@ -0,0 +1,237 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'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 { 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 { 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';
+
+function LookupTab({ onSelect }) {
+  const { field } = useDataBuilderField();
+  if (!field) {
+    return null;
+  }
+  function handleSelect(value) {
+    onSelect?.(value);
+  }
+  return /* @__PURE__ */ jsx(DataBuilderDrilldownLookup, { field, onChange: handleSelect });
+}
+function DataBuilderDrilldownLookup({ field, onChange }) {
+  const { client } = useIntegrationAppClient();
+  const { integrationId } = useIntegrationAppIntegration();
+  const { connectionId } = useIntegrationAppConnection();
+  const lookupValue = field.value?.$lookup ?? {};
+  const [
+    { queryFieldsSchema, createFieldsSchema } = {
+      queryFieldsSchema: null,
+      createFieldsSchema: null
+    },
+    error,
+    state
+  ] = usePromise(
+    () => getLookupSchemas({ field, client, connectionId, integrationId }),
+    [getReferenceCollectionPathForSchema(field.schema)]
+  );
+  function handleLookupChange(value) {
+    onChange?.({
+      $lookup: {
+        ...lookupValue,
+        ...value
+      }
+    });
+  }
+  function handleNewRecordChange(value) {
+    onChange?.({
+      $lookup: {
+        ...lookupValue,
+        create: {
+          fields: value
+        }
+      }
+    });
+  }
+  function handleLeaveEmptyClicked() {
+    handleLookupChange({
+      createIfNotFound: false
+    });
+  }
+  function handleCreateNewClicked() {
+    handleLookupChange({
+      createIfNotFound: true
+    });
+  }
+  function makeNewRecordField() {
+    return makeSubField(field, {
+      valueLocator: `${field.valueLocator}.$lookup.create.fields`,
+      schema: schemaWithTitle(createFieldsSchema, "Fields to Create"),
+      isInSchema: true,
+      value: lookupValue.create?.fields,
+      iconUri: field.iconUri,
+      level: 1
+    });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxs("p", { children: [
+      "Error: ",
+      error.toString()
+    ] });
+  }
+  if (state === "pending") {
+    return /* @__PURE__ */ jsx("p", { children: "Loading..." });
+  }
+  if (!queryFieldsSchema) {
+    return /* @__PURE__ */ jsx("p", { children: "This collection does not support lookup." });
+  }
+  const dataBuilderField = makeDataField({
+    value: lookupValue.query,
+    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(
+      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,
+        {
+          withPaddings: true,
+          className: classes.createFieldSchema,
+          children: /* @__PURE__ */ jsx(
+            DataBuilderFormField,
+            {
+              field: makeNewRecordField(),
+              onChange: handleNewRecordChange
+            }
+          )
+        }
+      )
+    ] })
+  ] });
+}
+async function getLookupSchemas({
+  field,
+  client,
+  connectionId,
+  integrationId
+}) {
+  const referencePath = getReferenceCollectionPathForSchema(field?.schema);
+  const referenceUdm = field.schema?.referenceUdm;
+  if (referencePath && field.schema) {
+    const collection = await getLookupCollection({
+      schema: field.schema,
+      client,
+      connectionId,
+      integrationId
+    });
+    if (!collection) {
+      return {};
+    }
+    const queryFieldsSchema = pickFieldsFromSchema(
+      collection?.fieldsSchema,
+      collection?.match?.fields ?? collection?.find?.queryFields
+    );
+    delete queryFieldsSchema.required;
+    const createFieldsSchema = getDataCollectionCreateFields(collection);
+    return {
+      queryFieldsSchema,
+      createFieldsSchema
+    };
+  } else if (referenceUdm) {
+    const udmSpec = UNIFIED_DATA_MODELS[referenceUdm];
+    if (udmSpec) {
+      return {
+        queryFieldsSchema: udmSpec.match?.fields ? pickFieldsFromSchema(udmSpec.fieldsSchema, udmSpec.match.fields) : void 0,
+        createFieldsSchema: udmSpec.create?.fields ? pickFieldsFromSchema(udmSpec.fieldsSchema, udmSpec.create.fields) : udmSpec.fieldsSchema
+      };
+    } else {
+      return {};
+    }
+  } else {
+    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 };

package/dist/esm/components/ComboBox/Dropdown/Tabs/LookupOptions/OptionsList.mjs

@@ -0,0 +1,22 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { DropdownUI } from '../../../../DropdownUI/index.mjs';
+import { Notification } from '../../../../Notification/index.mjs';
+import { PanelHeader } from './UiComponents.mjs';
+import classes from './UiComponents.module.css.mjs';
+
+function OptionsParametersRequired() {
+  return /* @__PURE__ */ jsxs(DropdownUI.Panel, { withPaddings: true, className: classes.panel__options, children: [
+    /* @__PURE__ */ jsx(PanelHeader, { children: "Available options" }),
+    /* @__PURE__ */ jsx(Notification, { mode: "block", type: "default", size: "sm", children: "Please select parameters above to display lists" })
+  ] });
+}
+
+export { OptionsParametersRequired };