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

package/dist/esm/components/ComboBox/Value/Formula.mjs

@@ -0,0 +1,35 @@
+"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 { forwardRef } from 'react';
+import { getFormula } from '@integration-app/sdk';
+import { getFormulas } from '../../DataBuilder/Formula/index.mjs';
+import NoUiFormula from '../../DataBuilder/Formula/noUi.mjs';
+
+const ComboBoxFormulaValue = forwardRef(
+  ({ value, ...props }, ref) => {
+    const formula = getFormula(value);
+    if (!formula) {
+      return /* @__PURE__ */ jsx(NoUiFormula, {});
+    }
+    const formulaSpec = getFormulas()[formula.type];
+    if (!formulaSpec?.component) {
+      return /* @__PURE__ */ jsx(NoUiFormula, {});
+    }
+    const componentProps = {
+      formula,
+      ...props
+    };
+    const Component = formulaSpec.component;
+    return /* @__PURE__ */ jsx(Component, { ...componentProps, ref });
+  }
+);
+ComboBoxFormulaValue.displayName = "ComboBoxFormulaValue";
+
+export { ComboBoxFormulaValue };

package/dist/esm/components/ComboBox/Value/Schema.mjs

@@ -0,0 +1,143 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { ComboBoxTag, getClassFromSchema } from '../../ComboBoxElements/ComboBoxTag.mjs';
+import { SvgIconType } from '../../SvgIcon/index.mjs';
+import { Truncate } from '../../Truncate/index.mjs';
+import { CUSTOM_ARRAY_VALUE_LABEL, CUSTOM_OBJECT_VALUE_LABEL } from '../options-factories/custom-field.mjs';
+import { TagPlaceholder } from '../../Tag/TagPlaceholder.mjs';
+import { getSchemaFromValue, getReferenceCollectionPointerForSchema } from '@integration-app/sdk';
+import useSWR from 'swr';
+import { useIntegrationApp } from '../../../contexts/integration-app-context.mjs';
+import { useIntegrationAppConnection } from '../../../contexts/integration-app-connection-context.mjs';
+
+const ComboBoxSchemaValue = forwardRef(
+  ({
+    value,
+    schema: providedSchema,
+    variablesSchema,
+    className,
+    disabled,
+    ...props
+  }, ref) => {
+    let valueElement;
+    const schema = providedSchema?.type ? providedSchema : getSchemaFromValue(value, variablesSchema);
+    if (getReferenceCollectionPointerForSchema(schema)) {
+      return /* @__PURE__ */ jsx(ReferenceCollectionValue, { schema, value });
+    }
+    if (schema?.referenceRecords) {
+      const selectedRecord = schema.referenceRecords.find((r) => r.id == value);
+      if (selectedRecord?.name) {
+        valueElement = /* @__PURE__ */ jsx(Truncate, { children: selectedRecord.name });
+      }
+    }
+    if (!valueElement) {
+      switch (schema?.type) {
+        case "boolean":
+          valueElement = value === void 0 ? void 0 : value ? /* @__PURE__ */ jsx(Fragment, { children: "Yes" }) : /* @__PURE__ */ jsx(Fragment, { children: "No" });
+          break;
+        case "object":
+          if (Object.keys(schema?.properties ?? {}).length === 0) {
+            valueElement = /* @__PURE__ */ jsx(Truncate, { children: CUSTOM_OBJECT_VALUE_LABEL });
+          }
+          break;
+        case "array":
+          valueElement = /* @__PURE__ */ jsx(Truncate, { children: CUSTOM_ARRAY_VALUE_LABEL });
+          break;
+        case "string":
+        case "number":
+        case "integer":
+        default:
+          if (value !== void 0) {
+            valueElement = /* @__PURE__ */ jsx(Truncate, { children: value?.toString() });
+          }
+      }
+    }
+    if (valueElement) {
+      return /* @__PURE__ */ jsx(
+        ComboBoxTag,
+        {
+          className: clsx(className, getClassFromSchema(schema)),
+          ref,
+          disabled,
+          ...getIconProps(schema),
+          ...props,
+          children: valueElement
+        }
+      );
+    } else {
+      return /* @__PURE__ */ jsx(TagPlaceholder, { ref, ...props });
+    }
+  }
+);
+ComboBoxSchemaValue.displayName = "ComboBoxSchemaValue";
+function isDefinedValue(value) {
+  return value !== null && value !== void 0;
+}
+function getIconProps(schema) {
+  switch (schema?.type) {
+    case "string":
+      return {
+        icon: SvgIconType.SchemaType_string
+      };
+    case "boolean":
+      return {
+        icon: SvgIconType.SchemaType_boolean
+      };
+    case "number":
+    case "integer":
+      return {
+        icon: SvgIconType.Braces
+      };
+    default:
+      return void 0;
+  }
+}
+function ReferenceCollectionValue({
+  value,
+  schema
+}) {
+  const client = useIntegrationApp();
+  const { connectionId } = useIntegrationAppConnection();
+  const strValue = value?.toString() ?? "";
+  const key = `reference-value-${connectionId}-${strValue}`;
+  const pointer = getReferenceCollectionPointerForSchema(
+    schema
+  );
+  const { data: findResponse, isLoading } = useSWR(
+    client && connectionId ? key : void 0,
+    async () => {
+      try {
+        return await client.connection(connectionId).dataCollection(pointer.key, pointer.parameters).findById({ id: value });
+      } catch (e) {
+        return {};
+      }
+    }
+  );
+  const record = findResponse?.record;
+  if (isLoading) {
+    return /* @__PURE__ */ jsxs(ComboBoxTag, { children: [
+      strValue,
+      " (...loading)"
+    ] });
+  } else if (record?.name) {
+    return /* @__PURE__ */ jsxs(ComboBoxTag, { children: [
+      record.name,
+      " (id: ",
+      record.id,
+      ")"
+    ] });
+  } else {
+    return /* @__PURE__ */ jsx(ComboBoxTag, { children: strValue });
+  }
+}
+
+export { ComboBoxSchemaValue, isDefinedValue };

package/dist/esm/components/ComboBox/Value/index.mjs

@@ -0,0 +1,65 @@
+"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 { forwardRef } from 'react';
+import { isFormula } from '@integration-app/sdk';
+import { ComboBoxTag } from '../../ComboBoxElements/ComboBoxTag.mjs';
+import { TagPlaceholder } from '../../Tag/TagPlaceholder.mjs';
+import { useComboBox } from '../context/combobox-context.mjs';
+import { ComboBoxFormulaValue } from './Formula.mjs';
+import { ComboBoxSchemaValue, isDefinedValue } from './Schema.mjs';
+
+const ComboBoxValue = forwardRef(function({ placeholder, isEdited, disabled, onClick, onChange, className }, ref) {
+  const { value, variablesSchema, schema, options, optionFactories } = useComboBox();
+  const isValueDefined = isDefinedValue(value);
+  if (isEdited && (!isValueDefined || value === "")) {
+    return /* @__PURE__ */ jsx(TagPlaceholder, { ref, className });
+  }
+  if (isValueDefined) {
+    if (isFormula(value)) {
+      return /* @__PURE__ */ jsx(
+        ComboBoxFormulaValue,
+        {
+          ref,
+          value,
+          schema,
+          variablesSchema,
+          optionFactories,
+          disabled,
+          onClick,
+          onChange,
+          className
+        }
+      );
+    }
+    if (options) {
+      const selectedOption = options.find((option) => option.value === value);
+      if (selectedOption) {
+        return /* @__PURE__ */ jsx(ComboBoxTag, { ref, disabled, className, children: selectedOption.label });
+      }
+    }
+    return /* @__PURE__ */ jsx(
+      ComboBoxSchemaValue,
+      {
+        ref,
+        value,
+        schema,
+        variablesSchema,
+        disabled,
+        onClick,
+        className
+      }
+    );
+  } else {
+    return /* @__PURE__ */ jsx(TagPlaceholder, { ref, onClick, className, children: placeholder });
+  }
+});
+ComboBoxValue.displayName = "ComboBoxValue";
+
+export { ComboBoxFormulaValue, ComboBoxSchemaValue, ComboBoxValue, isDefinedValue };

package/dist/esm/components/ComboBox/context/combobox-context.mjs

@@ -0,0 +1,93 @@
+"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 { createContext, useState, useEffect, useContext } from 'react';
+
+const ComboBoxContext = createContext({
+  value: null,
+  /* FIXME: strictNullCheck temporary fix */
+  // @ts-expect-error TS(2322): Type 'null' is not assignable to type 'DataSchema ... Remove this comment to see the full error message
+  schema: null,
+  /* FIXME: strictNullCheck temporary fix */
+  // @ts-expect-error TS(2322): Type 'null' is not assignable to type 'IValueSpec ... Remove this comment to see the full error message
+  valueSpec: null,
+  variablesSchema: null,
+  /* FIXME: strictNullCheck temporary fix */
+  // @ts-expect-error TS(2322): Type 'null' is not assignable to type 'IComboBoxOp... Remove this comment to see the full error message
+  options: null,
+  /* FIXME: strictNullCheck temporary fix */
+  // @ts-expect-error TS(2322): Type 'null' is not assignable to type 'IComboBoxOp... Remove this comment to see the full error message
+  optionFactories: null,
+  allowCustom: false,
+  isDropdownOpen: false,
+  openDropdown: () => {
+  },
+  closeDropdown: () => {
+  }
+});
+ComboBoxContext.displayName = "ComboBoxOptionsContext";
+const ComboBoxProvider = ({
+  value,
+  schema,
+  valueSpec,
+  variablesSchema,
+  options,
+  optionFactories,
+  refsToIgnoreClick,
+  // Dropdown
+  onDropdownOpen,
+  onDropdownClose,
+  autoOpen,
+  topDropdownPanelComponent,
+  children
+}) => {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  useEffect(() => {
+    if (autoOpen) {
+      openDropdown();
+    }
+  }, [autoOpen]);
+  function openDropdown() {
+    if (isDropdownOpen) return;
+    setTimeout(() => {
+      setIsDropdownOpen(true);
+      onDropdownOpen?.();
+    }, 10);
+  }
+  function closeDropdown() {
+    if (!isDropdownOpen) return;
+    setIsDropdownOpen(false);
+    onDropdownClose?.();
+  }
+  return /* @__PURE__ */ jsx(
+    ComboBoxContext.Provider,
+    {
+      value: {
+        value,
+        schema,
+        valueSpec,
+        variablesSchema,
+        options,
+        optionFactories,
+        allowCustom: valueSpec?.allowCustom ?? false,
+        refsToIgnoreClick,
+        isDropdownOpen,
+        openDropdown,
+        closeDropdown,
+        topDropdownPanelComponent
+      },
+      children
+    }
+  );
+};
+function useComboBox() {
+  return useContext(ComboBoxContext);
+}
+
+export { ComboBoxProvider, useComboBox };

package/dist/esm/components/ComboBox/context/combobox-dropdown-context.mjs

@@ -0,0 +1,218 @@
+"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 { createContext, useState, useEffect, useCallback, useContext } from 'react';
+import usePromise from '../../../_modules/react-use-promise.mjs';
+import deepEqual from 'fast-deep-equal';
+import { FormulaListOptionsFactory } from '../../DataBuilder/Formula/options-factory.mjs';
+import { SvgIconType } from '../../SvgIcon/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 'fuse';
+import { BooleanOptionsFactory } from '../options-factories/boolean.mjs';
+import { ConstantOptionFactory } from '../options-factories/constant.mjs';
+import { CustomFieldOptionsFactory } from '../options-factories/custom-field.mjs';
+import { EnumOptionFactory } from '../options-factories/enum.mjs';
+import 'js-convert-case';
+import '@integration-app/sdk';
+import { SchemaOptionFactory } from '../options-factories/schema.mjs';
+import { ReferenceRecordsOptionsFactory } from '../options-factories/reference-records.mjs';
+import { ReferenceUdmOptionFactory } from '../options-factories/reference-udm.mjs';
+import { ComboBoxTabType } from '../types.mjs';
+import { getAvailableTabs, getCurrentTab } from './helpers.mjs';
+import { useComboBox } from './combobox-context.mjs';
+import useDataBuilder from '../../DataBuilder/data-builder-context.mjs';
+
+const ComboBoxDropdownContext = createContext({
+  availableTabs: [],
+  activeTab: ComboBoxTabType.VARIABLE,
+  setActiveTab: () => null,
+  resetActiveTab: () => null,
+  isOptionSelected: () => false,
+  generateOptions: () => [[]]
+});
+ComboBoxDropdownContext.displayName = "ComboBoxDropdownContext";
+const ComboBoxDropdownContextProvider = ({
+  children
+}) => {
+  const { editableVariablesSchemaLocators } = useDataBuilder();
+  const {
+    value,
+    schema,
+    valueSpec,
+    variablesSchema,
+    variablesOnly,
+    options,
+    optionFactories
+  } = useComboBox();
+  const { client } = useIntegrationAppClient();
+  const { connectionId } = useIntegrationAppConnection();
+  const { integrationId } = useIntegrationAppIntegration();
+  const [currentTab, setCurrentTab] = useState(null);
+  const [availableTabs, setAvailableTabs] = useState(
+    null
+  );
+  const hasVariables = variablesSchema?.type === "object" && Object.keys(variablesSchema.properties ?? {}).length > 0;
+  useEffect(() => {
+    void getAvailableTabs({
+      schema,
+      options,
+      optionFactories,
+      variablesOnly,
+      hasVariables,
+      client,
+      connectionId,
+      integrationId
+    }).then((tabs) => {
+      setAvailableTabs(tabs);
+    });
+  }, [
+    schema,
+    options,
+    optionFactories,
+    variablesOnly,
+    hasVariables,
+    client,
+    integrationId,
+    connectionId
+  ]);
+  const activeTab = availableTabs ? getCurrentTab(availableTabs, currentTab, value) : null;
+  const generateOptions = function(searchValue, drilldownStack) {
+    return usePromise(
+      () => getOptions({
+        activeTab,
+        // @ts-expect-error TS(2345): Argument of type 'DataSchema | undefined' is not a... Remove this comment to see the full error message
+        schema,
+        variablesSchema,
+        searchValue,
+        valueSpec,
+        drilldownStack,
+        options,
+        optionFactories,
+        editableVariablesSchemaLocators
+      }),
+      [
+        activeTab,
+        JSON.stringify(schema),
+        JSON.stringify(variablesSchema),
+        searchValue,
+        JSON.stringify(valueSpec),
+        drilldownStack.length.toString(),
+        JSON.stringify(options),
+        optionFactories?.length,
+        JSON.stringify(editableVariablesSchemaLocators)
+      ]
+    );
+  };
+  const isOptionSelected = useCallback(
+    function(option) {
+      return deepEqual(option.value, value);
+    },
+    [value]
+  );
+  return /* @__PURE__ */ jsx(
+    ComboBoxDropdownContext.Provider,
+    {
+      value: {
+        availableTabs,
+        activeTab,
+        setActiveTab: setCurrentTab,
+        resetActiveTab: () => setCurrentTab(null),
+        isOptionSelected,
+        generateOptions
+      },
+      children
+    }
+  );
+};
+function useComboBoxDropdownContext() {
+  return useContext(ComboBoxDropdownContext);
+}
+async function getOptions({
+  activeTab,
+  schema,
+  variablesSchema,
+  searchValue,
+  valueSpec,
+  drilldownStack,
+  options: staticOptions,
+  optionFactories,
+  editableVariablesSchemaLocators
+}) {
+  const factories = [...optionFactories];
+  switch (activeTab) {
+    case ComboBoxTabType.OPTIONS:
+      if (schema?.referenceUdm) {
+        factories.unshift(new ReferenceUdmOptionFactory(schema));
+      } else if (schema?.referenceRecords) {
+        factories.push(new ReferenceRecordsOptionsFactory({ schema }));
+      } else if (schema?.enum) {
+        factories.push(new EnumOptionFactory({ schema }));
+      } else if (schema?.type === "boolean") {
+        factories.push(new BooleanOptionsFactory());
+      } else if (staticOptions) {
+        factories.push(new ConstantOptionFactory(staticOptions));
+      }
+      break;
+    case ComboBoxTabType.VARIABLE:
+      factories.push(
+        new SchemaOptionFactory({
+          schema: variablesSchema,
+          editableSchemaLocators: editableVariablesSchemaLocators
+        })
+      );
+      break;
+    case ComboBoxTabType.FORMULA:
+      factories.push(new FormulaListOptionsFactory());
+      break;
+    case ComboBoxTabType.CUSTOM:
+      factories.push(new CustomFieldOptionsFactory());
+      break;
+  }
+  const options = [];
+  async function getOptionsFromFactory(factory) {
+    const result = [];
+    result.push(
+      ...await factory.getOptions({ input: searchValue, spec: valueSpec })
+    );
+    if (searchValue) {
+      const unfilteredOptions = await factory.getOptions({
+        input: "",
+        spec: valueSpec
+      });
+      for (const option of unfilteredOptions) {
+        if (option.drilldownOptionFactories) {
+          for (const drilldownFactory of option.drilldownOptionFactories) {
+            result.push(...await getOptionsFromFactory(drilldownFactory));
+          }
+        }
+      }
+    }
+    return result;
+  }
+  if (drilldownStack.length > 0) {
+    options.push({
+      label: "Back",
+      iconType: SvgIconType.ChevronLeft,
+      drillup: true
+    });
+    const option = drilldownStack[drilldownStack.length - 1];
+    for (const drilldownFactory of option?.drilldownOptionFactories ?? []) {
+      options.push(...await getOptionsFromFactory(drilldownFactory));
+    }
+  } else {
+    for (const optionFactory of [...factories]) {
+      options.push(...await getOptionsFromFactory(optionFactory));
+    }
+  }
+  return options;
+}
+
+export { ComboBoxDropdownContextProvider, useComboBoxDropdownContext };

package/dist/esm/components/ComboBox/context/combobox-dropdown-search.mjs

@@ -0,0 +1,51 @@
+"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 { createContext, useState, useMemo, useContext } from 'react';
+
+const ComboBoxDropdownSearchContext = createContext(
+  {
+    hideSearch: false,
+    searchValue: "",
+    setSearchValue: () => null,
+    drillDownDepth: 0,
+    setDrillDownDepth: () => {
+    },
+    searchSource: "editor",
+    setSearchSource: () => {
+    }
+  }
+);
+ComboBoxDropdownSearchContext.displayName = "ComboBoxDropdownSearchContext";
+const ComboBoxDropdownSearchProvider = ({
+  children,
+  hideSearch = false
+}) => {
+  const [searchValue, setSearchValue] = useState("");
+  const [drillDownDepth, setDrillDownDepth] = useState(0);
+  const [searchSource, setSearchSource] = useState("editor");
+  const contextValue = useMemo(
+    () => ({
+      searchValue,
+      setSearchValue,
+      hideSearch,
+      drillDownDepth,
+      setDrillDownDepth,
+      searchSource,
+      setSearchSource
+    }),
+    [searchValue, hideSearch, drillDownDepth, searchSource]
+  );
+  return /* @__PURE__ */ jsx(ComboBoxDropdownSearchContext.Provider, { value: contextValue, children });
+};
+function useComboBoxDropdownSearchContext() {
+  return useContext(ComboBoxDropdownSearchContext);
+}
+
+export { ComboBoxDropdownSearchProvider, useComboBoxDropdownSearchContext };

package/dist/esm/components/ComboBox/context/combobox-dropdown-stack.mjs

@@ -0,0 +1,54 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { createContext, useContext, useRef, useEffect } from 'react';
+import { getRefElement } from '../../../helpers/getRefElement.mjs';
+
+const DropdownStackContext = createContext(false);
+let GLOBAL_DROPDOWN_STACK = [];
+const DropdownStackContextProvider = ({
+  children
+}) => {
+  const hasNestedDropdownsContext = useContext(DropdownStackContext);
+  if (hasNestedDropdownsContext) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  return /* @__PURE__ */ jsx(DropdownStackContext.Provider, { value: true, children });
+};
+const useDropdownStackContext = (dropdownRef) => {
+  const isNested = useContext(DropdownStackContext);
+  const recordRef = useRef(dropdownRef);
+  useEffect(() => {
+    if (isNested) {
+      GLOBAL_DROPDOWN_STACK.push(recordRef?.current);
+    } else {
+      GLOBAL_DROPDOWN_STACK = [recordRef?.current];
+    }
+    return () => {
+      GLOBAL_DROPDOWN_STACK = GLOBAL_DROPDOWN_STACK.filter(
+        (record) => record !== recordRef?.current
+      );
+    };
+  }, []);
+  function isClickInsideRefsAndChildren(event) {
+    const stackStartedFromElement = GLOBAL_DROPDOWN_STACK.slice(
+      GLOBAL_DROPDOWN_STACK.indexOf(recordRef?.current)
+    );
+    return stackStartedFromElement.some((ref) => {
+      return isClickInsideRefRecord(ref, event);
+    });
+  }
+  return { isClickInsideRefsAndChildren };
+};
+function isClickInsideRefRecord(record, event) {
+  const element = getRefElement(record);
+  return !!(element && element.contains(event.target));
+}
+
+export { DropdownStackContextProvider, useDropdownStackContext };