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

package/dist/esm/components/ComboBox/context/helpers.mjs

@@ -0,0 +1,126 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { UNIFIED_DATA_MODELS, schemaHasFixedValues, getReferenceCollectionPathForSchema, getFormula, DataBuilderFormulaType } from '@integration-app/sdk';
+import { ComboBoxTabType } from '../types.mjs';
+import { getLookupCollection } from '../Dropdown/Tabs/Lookup.mjs';
+
+function isSchemaAllowCustomValue(schema) {
+  const schemaHasNoType = !schema?.type;
+  const schemaIsObjectWithNoProperties = schema?.type === "object" && Object.keys(schema.properties ?? {}).length === 0;
+  const schemaIsArrayWithNoSchemaItems = schema?.type === "array" && !schema?.items?.type;
+  return schemaHasNoType || schemaIsObjectWithNoProperties || schemaIsArrayWithNoSchemaItems;
+}
+async function getAvailableTabs({
+  schema,
+  options,
+  optionFactories,
+  variablesOnly,
+  hasVariables,
+  client,
+  connectionId,
+  integrationId
+}) {
+  const availableTabs = [];
+  const udm = schema?.referenceUdm;
+  const udmSpec = udm ? UNIFIED_DATA_MODELS[udm] : void 0;
+  if (!!udmSpec) {
+    availableTabs.push(ComboBoxTabType.SELECT_FROM_UDM_DYNAMICALLY);
+  }
+  const comboboxHasOptions = Array.isArray(options);
+  const comboboxHasOptionFactories = (optionFactories || []).length > 0;
+  const comboboxHasFixedValues = !!schema && schemaHasFixedValues(schema);
+  const comboboxHasOptionList = comboboxHasOptions || comboboxHasOptionFactories || comboboxHasFixedValues;
+  if (comboboxHasOptionList) {
+    availableTabs.push(ComboBoxTabType.OPTIONS);
+  }
+  const comboboxHasReferenceCollection = !!getReferenceCollectionPathForSchema(schema);
+  if (comboboxHasReferenceCollection && connectionId) {
+    availableTabs.push(ComboBoxTabType.LOOKUP_OPTIONS);
+  }
+  if (schema && (connectionId || integrationId)) {
+    const collection = await getLookupCollection({
+      schema,
+      client,
+      connectionId,
+      integrationId
+    });
+    if (collection?.find?.queryFields || collection?.match?.fields) {
+      availableTabs.push(ComboBoxTabType.SELECT_FROM_COLLECTION_DYNAMICALLY);
+    }
+  }
+  const schemaAllowCustomValue = isSchemaAllowCustomValue(schema);
+  if (!variablesOnly && !comboboxHasOptionList && schemaAllowCustomValue) {
+    availableTabs.push(ComboBoxTabType.CUSTOM);
+  }
+  if (hasVariables) {
+    availableTabs.push(ComboBoxTabType.VARIABLE);
+    availableTabs.push(ComboBoxTabType.FORMULA);
+  }
+  return availableTabs.length > 0 ? availableTabs : null;
+}
+function getCurrentTab(availableTabs, possibleCurrentTab, value) {
+  if (possibleCurrentTab && availableTabs.includes(possibleCurrentTab)) {
+    return possibleCurrentTab;
+  }
+  return getDefaultTab(availableTabs, value);
+}
+function getDefaultTab(availableTabs, value) {
+  if (availableTabs.length <= 1) {
+    return availableTabs[0];
+  }
+  const formulaType = getFormula(value)?.type;
+  if (formulaType === DataBuilderFormulaType.LOOKUP) {
+    if (availableTabs.includes(ComboBoxTabType.SELECT_FROM_COLLECTION_DYNAMICALLY)) {
+      return ComboBoxTabType.SELECT_FROM_COLLECTION_DYNAMICALLY;
+    }
+    if (availableTabs.includes(ComboBoxTabType.SELECT_FROM_UDM_DYNAMICALLY)) {
+      return ComboBoxTabType.SELECT_FROM_UDM_DYNAMICALLY;
+    }
+  }
+  const generalFormulaTypes = Object.values(DataBuilderFormulaType).filter(
+    (x) => ![
+      DataBuilderFormulaType.TPL,
+      DataBuilderFormulaType.VAR,
+      DataBuilderFormulaType.RECORD
+    ].includes(x)
+  );
+  if (availableTabs.includes(ComboBoxTabType.FORMULA) && generalFormulaTypes.includes(formulaType)) {
+    return ComboBoxTabType.FORMULA;
+  }
+  if (availableTabs.includes(ComboBoxTabType.OPTIONS)) {
+    return ComboBoxTabType.OPTIONS;
+  }
+  if (availableTabs.includes(ComboBoxTabType.LOOKUP_OPTIONS)) {
+    return ComboBoxTabType.LOOKUP_OPTIONS;
+  }
+  if (availableTabs.includes(ComboBoxTabType.VARIABLE)) {
+    return ComboBoxTabType.VARIABLE;
+  }
+  return availableTabs[0];
+}
+function canUserEnterValueFromKeyboard(schema, options, optionFactories, variablesOnly, value) {
+  const comboboxHasOptions = (options || []).length > 0;
+  const comboboxHasOptionFactories = (optionFactories || []).length > 0;
+  if (variablesOnly || comboboxHasOptions || comboboxHasOptionFactories) {
+    return false;
+  }
+  const valueIsLookup = !!value?.$lookup;
+  if (valueIsLookup) {
+    return false;
+  }
+  if (schema && schemaHasFixedValues(schema)) {
+    return !!schema.allowCustom;
+  }
+  if (schema?.type && ["array", "object", "boolean"].includes(schema?.type)) {
+    return false;
+  }
+  return true;
+}
+
+export { canUserEnterValueFromKeyboard, getAvailableTabs, getCurrentTab };

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

@@ -0,0 +1,95 @@
+"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 { ComboBoxProvider } from './context/combobox-context.mjs';
+export { useComboBox } from './context/combobox-context.mjs';
+import { ValueType } from './value-spec.mjs';
+export { doesSchemaMatchValueType, getValueSpecFromSchema } from './value-spec.mjs';
+import { ComboBoxDropdownContextProvider } from './context/combobox-dropdown-context.mjs';
+export { useComboBoxDropdownContext } from './context/combobox-dropdown-context.mjs';
+import { ComboBoxDropdownSearchProvider } from './context/combobox-dropdown-search.mjs';
+export { useComboBoxDropdownSearchContext } from './context/combobox-dropdown-search.mjs';
+import { canUserEnterValueFromKeyboard } from './context/helpers.mjs';
+export { getAvailableTabs, getCurrentTab } from './context/helpers.mjs';
+import { OptionSelector } from './Edit/OptionSelector.mjs';
+import { TextInput } from './Edit/TextInput.mjs';
+import 'fuse';
+import '../SvgIcon/index.mjs';
+import 'js-convert-case';
+import '@integration-app/sdk';
+import 'react';
+import '../Tag/styles.module.css.mjs';
+export { DropdownStackContextProvider, useDropdownStackContext } from './context/combobox-dropdown-stack.mjs';
+export { ComboBoxValue } from './Value/index.mjs';
+
+function ComboBox({
+  value,
+  schema,
+  valueSpec = { type: ValueType.ANY, allowCustom: true },
+  variablesSchema,
+  variablesOnly = false,
+  options = void 0,
+  optionFactories = [],
+  onChange,
+  valueComponent = void 0,
+  placeholder = "",
+  isRequired = false,
+  disabled = false,
+  className,
+  hideSearch = false,
+  // Dropdown related
+  autoOpen = false,
+  onOpen,
+  onClose,
+  topDropdownPanelComponent = void 0,
+  refsToIgnoreClick
+}) {
+  const userCanEnterValueFromKeyboard = canUserEnterValueFromKeyboard(
+    schema,
+    options,
+    optionFactories,
+    variablesOnly,
+    value
+  );
+  const dropdownProps = {
+    autoOpen,
+    onDropdownOpen: onOpen,
+    onDropdownClose: onClose,
+    topDropdownPanelComponent
+  };
+  const props = {
+    placeholder,
+    className,
+    onChange,
+    required: isRequired,
+    disabled
+  };
+  return /* @__PURE__ */ jsx(
+    ComboBoxProvider,
+    {
+      value,
+      schema,
+      valueSpec,
+      variablesSchema,
+      options,
+      optionFactories,
+      refsToIgnoreClick,
+      ...dropdownProps,
+      children: /* @__PURE__ */ jsx(ComboBoxDropdownSearchProvider, { hideSearch, children: /* @__PURE__ */ jsx(ComboBoxDropdownContextProvider, { children: userCanEnterValueFromKeyboard ? /* @__PURE__ */ jsx(TextInput, { ...props }) : /* @__PURE__ */ jsx(
+        OptionSelector,
+        {
+          ...props,
+          valueComponent
+        }
+      ) }) })
+    }
+  );
+}
+
+export { ComboBox, ComboBoxDropdownContextProvider, ComboBoxDropdownSearchProvider, ComboBoxProvider, ValueType, canUserEnterValueFromKeyboard };

package/dist/esm/components/ComboBox/options-factories/base.mjs

@@ -0,0 +1,23 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import Fuse from 'fuse';
+
+function filterOptionsByLabel(options, searchString, fuzzy = true) {
+  if (!searchString || typeof searchString !== "string") {
+    return options;
+  }
+  return new Fuse(options, {
+    shouldSort: true,
+    keys: ["searchLabel", "label"],
+    threshold: fuzzy ? 0.3 : 0
+    // 0 = exact match, 1 = match all
+  }).search(searchString.trim()).map(({ item }) => item);
+}
+
+export { filterOptionsByLabel };

package/dist/esm/components/ComboBox/options-factories/boolean.mjs

@@ -0,0 +1,27 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+class BooleanOptionsFactory {
+  async getOptions() {
+    return this.getOptionsSync();
+  }
+  getOptionsSync() {
+    return [
+      {
+        label: "Yes",
+        value: true
+      },
+      {
+        label: "No",
+        value: false
+      }
+    ];
+  }
+}
+
+export { BooleanOptionsFactory };

package/dist/esm/components/ComboBox/options-factories/constant.mjs

@@ -0,0 +1,23 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { filterOptionsByLabel } from './base.mjs';
+
+class ConstantOptionFactory {
+  constructor(options) {
+    this.options = options;
+  }
+  async getOptions({ input }) {
+    return this.getOptionsSync({ input });
+  }
+  getOptionsSync({ input }) {
+    return filterOptionsByLabel(this.options, input);
+  }
+}
+
+export { ConstantOptionFactory };

package/dist/esm/components/ComboBox/options-factories/custom-field.mjs

@@ -0,0 +1,44 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { SvgIconType } from '../../SvgIcon/index.mjs';
+import { ValueType } from '../value-spec.mjs';
+import { filterOptionsByLabel } from './base.mjs';
+
+const CUSTOM_OBJECT_VALUE = {};
+const CUSTOM_OBJECT_VALUE_LABEL = "Object With Custom Fields";
+const CUSTOM_ARRAY_VALUE = [];
+const CUSTOM_ARRAY_VALUE_LABEL = "List With Custom Items";
+class CustomFieldOptionsFactory {
+  async getOptions({ spec, input }) {
+    const options = [];
+    if (spec.type === ValueType.ANY || spec.type === ValueType.OBJECT) {
+      options.push({
+        label: CUSTOM_OBJECT_VALUE_LABEL,
+        value: CUSTOM_OBJECT_VALUE,
+        iconType: SvgIconType.SchemaType_object
+      });
+    }
+    if (spec.type === ValueType.ANY || spec.type === ValueType.ARRAY) {
+      options.push({
+        label: CUSTOM_ARRAY_VALUE_LABEL,
+        value: CUSTOM_ARRAY_VALUE,
+        iconType: SvgIconType.SchemaType_array
+      });
+    }
+    return filterOptionsByLabel(options, input);
+  }
+}
+function isCustomFieldValue(value) {
+  return [
+    JSON.stringify(CUSTOM_OBJECT_VALUE),
+    JSON.stringify(CUSTOM_ARRAY_VALUE)
+  ].includes(JSON.stringify(value));
+}
+
+export { CUSTOM_ARRAY_VALUE, CUSTOM_ARRAY_VALUE_LABEL, CUSTOM_OBJECT_VALUE, CUSTOM_OBJECT_VALUE_LABEL, CustomFieldOptionsFactory, isCustomFieldValue };

package/dist/esm/components/ComboBox/options-factories/enum.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 { filterOptionsByLabel } from './base.mjs';
+
+class EnumOptionFactory {
+  constructor(params) {
+    this.params = params;
+  }
+  async getOptions({ input }) {
+    return this.getOptionsSync({ input });
+  }
+  getOptionsSync({ input }) {
+    const options = [];
+    if (this.params.schema.enum && Array.isArray(this.params.schema.enum)) {
+      this.params.schema.enum.map((enumValue) => {
+        if (typeof enumValue == "object" && enumValue.value) {
+          options.push({
+            label: enumValue.label ?? enumValue.value,
+            value: enumValue.value
+          });
+        } else {
+          options.push({
+            label: enumValue,
+            value: enumValue
+          });
+        }
+      });
+    }
+    const filteredOptions = filterOptionsByLabel(options, input);
+    if (filteredOptions.length > 0) {
+      return [
+        {
+          label: "Possible Values",
+          iconUri: this.params.iconUri,
+          isSection: true
+        },
+        ...filteredOptions
+      ];
+    } else {
+      return [];
+    }
+  }
+}
+
+export { EnumOptionFactory };

package/dist/esm/components/ComboBox/options-factories/index.mjs

@@ -0,0 +1,36 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import 'fuse';
+import '../../SvgIcon/index.mjs';
+import '@integration-app/sdk';
+import 'js-convert-case';
+import 'react/jsx-runtime';
+import 'react';
+import '../../Tag/styles.module.css.mjs';
+
+function getSchemaHint(schema) {
+  function formatExample(example) {
+    const exampleStr = example.toString();
+    return exampleStr.length > 30 ? exampleStr.substr(0, 30) + "\u2026" : exampleStr;
+  }
+  if (schema.examples) {
+    return schema.examples.map(formatExample).join(", ");
+  } else if (schema.type == "object") {
+    const propertiesNum = Object.keys(schema.properties ?? {}).length;
+    if (propertiesNum > 0) {
+      return `Object with ${propertiesNum} propert${propertiesNum == 1 ? "y" : "ies"}`;
+    } else {
+      return "Object";
+    }
+  } else {
+    return schema.type;
+  }
+}
+
+export { getSchemaHint };

package/dist/esm/components/ComboBox/options-factories/object-fields.mjs

@@ -0,0 +1,106 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { toHeaderCase } from 'js-convert-case';
+import { isValidLocator, locatorToSteps, getSchemaByLocator, locatorToField, stepsToLocator, DataLocatorStepObjectProperty, getNameComponentsForLocator, getFullNameForLocator, getNameForLocator, getIconUriForLocator } from '@integration-app/sdk';
+import { filterOptionsByLabel } from './base.mjs';
+import { getOptionsForSchema } from './schema.mjs';
+import { doesSchemaMatchValueType } from '../value-spec.mjs';
+import { SvgIconType } from '../../SvgIcon/index.mjs';
+
+class ObjectFieldsOptionFactory {
+  constructor(parameters) {
+    this.parameters = parameters;
+  }
+  async getOptions({ input, spec }) {
+    return this.getOptionsSync({ input, spec });
+  }
+  getOptionsSync({ input, spec }) {
+    const locator = this.parameters.locator ?? "$";
+    if (!isValidLocator(locator)) {
+      return [];
+    }
+    const locatorSteps = locatorToSteps(locator);
+    const objectSchema = getSchemaByLocator(this.parameters.schema, locator);
+    if (objectSchema?.type !== "object") {
+      return [];
+    }
+    const isSchemaEditable = this.parameters.editableSchemaLocators?.some(
+      (l) => locatorToField(stepsToLocator(locatorSteps)).startsWith(
+        locatorToField(l)
+      )
+    );
+    const showFullName = !!input;
+    const options = [];
+    if (doesSchemaMatchValueType(objectSchema, spec) && locator && locator !== "$") {
+      options.push({
+        label: "Whole Object",
+        value: {
+          $var: stepsToLocator(locatorToSteps(locator))
+        },
+        iconType: SvgIconType.SchemaType_object
+      });
+    }
+    for (const [fieldKey, fieldSchema] of Object.entries(
+      objectSchema.properties || {}
+    )) {
+      const propertyLocator = [
+        ...locatorSteps,
+        new DataLocatorStepObjectProperty(fieldKey)
+      ];
+      const objectNameComponents = getNameComponentsForLocator(
+        this.parameters.schema,
+        locator
+      );
+      options.push(
+        ...getOptionsForSchema({
+          schema: this.parameters.schema,
+          locator: propertyLocator,
+          valueSpec: spec,
+          showIcons: !this.parameters.isSection,
+          schemaByLocator: fieldSchema,
+          exampleVariables: this.parameters.exampleVariables,
+          skipNameComponentsPrefix: objectNameComponents,
+          nameComponentsByLocator: [
+            /* FIXME: strictNullCheck temporary fix */
+            // @ts-expect-error TS(2488): Type 'string[] | undefined' must have a '[Symbol.iterator]()' m... Remove this comment to see the full error message
+            ...objectNameComponents,
+            fieldSchema?.title ?? toHeaderCase(fieldKey)
+          ],
+          expandObject: false
+        })
+      );
+    }
+    if (isSchemaEditable) {
+      options.push({
+        label: `New${this.parameters?.name ? ` "${this.parameters.name}"` : ""} property`,
+        searchLabel: "",
+        hint: `Add property to this object`,
+        iconType: SvgIconType.Add,
+        addVariable: `${stepsToLocator(locatorSteps)}`,
+        isHighlighted: true
+      });
+    }
+    const filteredOptions = filterOptionsByLabel(options, input);
+    if (filteredOptions.length > 0) {
+      const result = filteredOptions;
+      if (this.parameters.isSection) {
+        result.unshift({
+          label: showFullName ? getFullNameForLocator(this.parameters.schema, locator) : getNameForLocator(this.parameters.schema, locator),
+          isSection: true,
+          iconUri: getIconUriForLocator(this.parameters.schema, locator)
+        });
+      }
+      return result;
+    } else {
+      return [];
+    }
+  }
+}
+
+export { ObjectFieldsOptionFactory };

package/dist/esm/components/ComboBox/options-factories/reference-records.mjs

@@ -0,0 +1,46 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { filterOptionsByLabel } from './base.mjs';
+
+class ReferenceRecordsOptionsFactory {
+  constructor(params) {
+    this.params = params;
+  }
+  async getOptions({ input }) {
+    return this.getOptionsSync({ input });
+  }
+  getOptionsSync({ input }) {
+    const options = [];
+    if (this.params.schema.referenceRecords && Array.isArray(this.params.schema.referenceRecords)) {
+      this.params.schema.referenceRecords.map((record) => {
+        if (typeof record == "object" && record.id !== void 0) {
+          options.push({
+            label: record.name ?? record.id,
+            value: record.id
+          });
+        }
+      });
+    }
+    const filteredOptions = filterOptionsByLabel(options, input);
+    if (filteredOptions.length > 0) {
+      return [
+        {
+          label: "Possible Values",
+          isSection: true,
+          iconUri: this.params.iconUri
+        },
+        ...filteredOptions
+      ];
+    } else {
+      return [];
+    }
+  }
+}
+
+export { ReferenceRecordsOptionsFactory };

package/dist/esm/components/ComboBox/options-factories/reference-udm.mjs

@@ -0,0 +1,34 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { UNIFIED_DATA_MODELS } from '@integration-app/sdk';
+import { SvgIconType } from '../../SvgIcon/index.mjs';
+import { filterOptionsByLabel } from './base.mjs';
+
+class ReferenceUdmOptionFactory {
+  constructor(schema) {
+    this.schema = schema;
+  }
+  async getOptions({ input }) {
+    const options = [];
+    const udm = this.schema?.referenceUdm;
+    const udmSpec = UNIFIED_DATA_MODELS[udm];
+    if (udmSpec) {
+      options.push({
+        label: "Select Dynamically Using Variables",
+        iconType: SvgIconType.Search,
+        value: {
+          $lookup: {}
+        }
+      });
+    }
+    return filterOptionsByLabel(options, input);
+  }
+}
+
+export { ReferenceUdmOptionFactory };