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

package/dist/cjs/components/ComboBox/Dropdown/Tabs/LookupOptions/index.cjs

@@ -0,0 +1,247 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var sdk = require('@integration-app/sdk');
+var index = require('../../../../DropdownUI/index.cjs');
+var integrationAppClientContext = require('../../../../../contexts/integration-app-client-context.cjs');
+var integrationAppConnectionContext = require('../../../../../contexts/integration-app-connection-context.cjs');
+var comboboxContext = require('../../../context/combobox-context.cjs');
+var comboboxDropdownSearch = require('../../../context/combobox-dropdown-search.cjs');
+var OptionsList$1 = require('./OptionsList.cjs');
+var index$1 = require('../../../../SvgIcon/index.cjs');
+var useDataCollectionSpec = require('../../../../../hooks/data-collections/useDataCollectionSpec.cjs');
+var integrationAppIntegrationContext = require('../../../../../contexts/integration-app-integration-context.cjs');
+var base = require('../../../options-factories/base.cjs');
+var comboboxDropdownContext = require('../../../context/combobox-dropdown-context.cjs');
+var keyboardEvents = require('../../../../../hooks/keyboard-events.cjs');
+var deepEqual = require('fast-deep-equal');
+var useDeepEffect = require('../../../../../hooks/useDeepEffect.cjs');
+var Option = require('../../Option.cjs');
+var ParametersPanel = require('./ParametersPanel.cjs');
+var uuid = require('uuid');
+var DropdownUIElements = require('../../../../DropdownUI/DropdownUIElements.cjs');
+
+function LookupOptionsTab({ onSelect }) {
+  const [options, setOptions] = React.useState([]);
+  const [loadingOptions, setLoadingOptions] = React.useState(true);
+  const [additionalMessage, setAdditionalMessage] = React.useState("");
+  const [error, setError] = React.useState();
+  const { searchValue } = comboboxDropdownSearch.useComboBoxDropdownSearchContext();
+  const [parametersValue, setParametersValue] = React.useState({});
+  const { schema } = comboboxContext.useComboBox();
+  const pointer = sdk.getReferenceCollectionPointerForSchema(schema);
+  const { client } = integrationAppClientContext.useIntegrationAppClient();
+  const { connectionId } = integrationAppConnectionContext.useIntegrationAppConnection();
+  const { integrationId } = integrationAppIntegrationContext.useIntegrationAppIntegration();
+  const currentLoadOptionsId = React.useRef("");
+  const referenceCollectionSpec = useDataCollectionSpec.useDataCollectionSpec({
+    key: pointer?.key,
+    integrationId
+  });
+  React.useEffect(() => {
+    if (pointer?.parameters) {
+      setParametersValue(pointer.parameters);
+    }
+  }, [JSON.stringify(pointer)]);
+  React.useEffect(() => {
+    if (schema && connectionId) {
+      void loadOptions();
+    }
+  }, [
+    connectionId,
+    JSON.stringify(schema),
+    JSON.stringify(parametersValue),
+    JSON.stringify(referenceCollectionSpec)
+  ]);
+  if (!schema) return null;
+  const hasParameters = Object.keys(referenceCollectionSpec?.parametersSchema?.properties ?? {}).length > 0;
+  const hasMissingParameters = sdk.getMissingRequiredFields(
+    referenceCollectionSpec?.parametersSchema,
+    parametersValue
+  )?.length > 0;
+  async function loadOptions() {
+    const loadOptionsId = uuid.v4();
+    currentLoadOptionsId.current = loadOptionsId;
+    setLoadingOptions(true);
+    setError(void 0);
+    setAdditionalMessage("");
+    if (hasMissingParameters) return;
+    try {
+      if (!connectionId) {
+        throw new Error("No connection provided. Cannot load options.");
+      }
+      if (!referenceCollectionSpec || !pointer) {
+        setOptions([]);
+        return;
+      }
+      const connectionAccessor = client.connection(connectionId);
+      let response;
+      const collectionAccessor = await connectionAccessor.dataCollection(
+        pointer?.key,
+        parametersValue
+      );
+      if (referenceCollectionSpec?.list) {
+        response = await collectionAccessor.list();
+      } else {
+        throw new Error(
+          `Collection ${referenceCollectionSpec.key} does not support listing options.`
+        );
+      }
+      if (currentLoadOptionsId.current === loadOptionsId) {
+        const options2 = response.records.map((record) => {
+          return {
+            label: record.name ?? record.id,
+            value: record.id
+          };
+        });
+        if (response.cursor) {
+          setAdditionalMessage(
+            `Only the first ${options2.length} options are loaded. If your option is not in the list, please type its ID manually.`
+          );
+        }
+        setOptions(options2);
+      }
+    } catch (e) {
+      if (currentLoadOptionsId.current === loadOptionsId) {
+        setError(sdk.extractIntegrationAppErrorData(e));
+      }
+    } finally {
+      if (currentLoadOptionsId.current === loadOptionsId) {
+        setLoadingOptions(false);
+      }
+    }
+  }
+  const filteredOptoins = base.filterOptionsByLabel(options, searchValue);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    hasParameters && /* @__PURE__ */ jsxRuntime.jsx(
+      ParametersPanel.ParametersPanel,
+      {
+        onChange: setParametersValue,
+        schema: referenceCollectionSpec?.parametersSchema,
+        value: parametersValue
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.Panel, { children: !hasMissingParameters ? loadingOptions ? /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.LoadingPanel, { children: "Loading list of options..." }) : error ? /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.ErrorPanel, { children: error?.message || "Something went wrong" }) : /* @__PURE__ */ jsxRuntime.jsxs(index.DropdownUI.List, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.Panel, { className: "flex-grow overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
+        OptionsList,
+        {
+          options: filteredOptoins,
+          onSelect: (value) => onSelect(value?.value)
+        }
+      ) }),
+      additionalMessage && /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.Panel, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 text-warning flex gap-2 items-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(index$1.SvgIcon, { type: index$1.SvgIconType.AlertCircle }),
+        " ",
+        additionalMessage
+      ] }) })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx(OptionsList$1.OptionsParametersRequired, {}) })
+  ] });
+}
+function OptionsList({
+  options,
+  onSelect
+}) {
+  const { isOptionSelected } = comboboxDropdownContext.useComboBoxDropdownContext();
+  const [currentOption, setCurrentOption] = React.useState(null);
+  keyboardEvents.useKeyboardEventSubscribe(keyboardEvents.EVENT_TYPE.OPTION_DOWN, makePreviousOptionCurrent);
+  keyboardEvents.useKeyboardEventSubscribe(keyboardEvents.EVENT_TYPE.OPTION_UP, makeNextOptionCurrent);
+  keyboardEvents.useKeyboardEventSubscribe(keyboardEvents.EVENT_TYPE.OPTION_SELECT, handleKeyEnter);
+  useDeepEffect.useDeepEffect(() => {
+    if (!options?.length) {
+      return;
+    }
+    if (!currentOption || getOptionIndex(currentOption) == -1) {
+      const selectedOption = options.find(isOptionSelected);
+      if (selectedOption) {
+        setCurrentOption(selectedOption);
+      }
+    }
+  }, [options]);
+  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) {
+    onSelect(option);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.List, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    DropdownListOptions,
+    {
+      options,
+      currentOption,
+      isOptionSelected,
+      handleOptionSelect
+    }
+  ) });
+}
+function DropdownListOptions({
+  options,
+  currentOption,
+  isOptionSelected,
+  handleOptionSelect
+}) {
+  if (!options) {
+    return null;
+  }
+  if (options.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.Item, { readonly: true, children: /* @__PURE__ */ jsxRuntime.jsx(DropdownUIElements.ItemTitle, { children: "No results found" }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: options.map((option, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+    Option.default,
+    {
+      option,
+      selected: isOptionSelected(option),
+      current: deepEqual(option, currentOption),
+      onSelect: () => handleOptionSelect(option)
+    },
+    idx
+  )) });
+}
+
+exports.LookupOptionsTab = LookupOptionsTab;

package/dist/cjs/components/ComboBox/Dropdown/Tabs/Options.cjs

@@ -0,0 +1,19 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var index = require('../../../DropdownUI/index.cjs');
+var OptionsList = require('../OptionsList.cjs');
+
+function OptionsTab({ onSelect }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.Panel, { children: /* @__PURE__ */ jsxRuntime.jsx(OptionsList.OptionsList, { onSelect }) });
+}
+
+exports.OptionsTab = OptionsTab;

package/dist/cjs/components/ComboBox/Dropdown/Tabs/Variables.cjs

@@ -0,0 +1,19 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var index = require('../../../DropdownUI/index.cjs');
+var OptionsList = require('../OptionsList.cjs');
+
+function VariablesTab({ onSelect }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.Panel, { children: /* @__PURE__ */ jsxRuntime.jsx(OptionsList.OptionsList, { onSelect }) });
+}
+
+exports.VariablesTab = VariablesTab;

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

@@ -0,0 +1,75 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+'use strict';
+
+var index = require('../../SvgIcon/index.cjs');
+var types = require('../types.cjs');
+var Options = require('./Tabs/Options.cjs');
+var Variables = require('./Tabs/Variables.cjs');
+var index$1 = require('./Tabs/Formulas/index.cjs');
+var CustomValue = require('./Tabs/CustomValue.cjs');
+var index$2 = require('./Tabs/LookupOptions/index.cjs');
+var Lookup = require('./Tabs/Lookup.cjs');
+
+const renderTabs = {
+  [types.ComboBoxTabType.CUSTOM]: {
+    title: "Custom Value",
+    showIfSingle: true,
+    hideSearchInput: true
+  },
+  [types.ComboBoxTabType.VARIABLE]: {
+    title: "Variable",
+    icon: index.SvgIconType.Variable,
+    showIfSingle: true
+  },
+  [types.ComboBoxTabType.OPTIONS]: {
+    title: "Option"
+  },
+  [types.ComboBoxTabType.FORMULA]: {
+    title: "Formula",
+    showIfSingle: true,
+    hideSearchInput: true
+  },
+  [types.ComboBoxTabType.LOOKUP_OPTIONS]: {
+    title: "Option",
+    showIfSingle: true,
+    hideSearchInput: false
+  },
+  [types.ComboBoxTabType.SELECT_FROM_UDM_DYNAMICALLY]: {
+    title: "Select Dynamically",
+    showIfSingle: true,
+    hideSearchInput: true
+  },
+  [types.ComboBoxTabType.SELECT_FROM_COLLECTION_DYNAMICALLY]: {
+    title: "Select Dynamically",
+    showIfSingle: true,
+    hideSearchInput: true
+  }
+};
+const TAB_COMPONENTS = {
+  [types.ComboBoxTabType.OPTIONS]: Options.OptionsTab,
+  [types.ComboBoxTabType.VARIABLE]: Variables.VariablesTab,
+  [types.ComboBoxTabType.FORMULA]: index$1.FormulasTab,
+  [types.ComboBoxTabType.CUSTOM]: CustomValue.CustomValueTab,
+  [types.ComboBoxTabType.SELECT_FROM_UDM_DYNAMICALLY]: Lookup.LookupTab,
+  [types.ComboBoxTabType.SELECT_FROM_COLLECTION_DYNAMICALLY]: Lookup.LookupTab,
+  [types.ComboBoxTabType.LOOKUP_OPTIONS]: index$2.LookupOptionsTab
+  //   [TabType.OPTIONS]: OptionsTab,
+  //   [TabType.VARIABLES]: VariablesTab,
+  //   [TabType.FORMULAS]: FormulasTab,
+  //   [TabType.OPTIONS_ENUM]: OptionsEnumTab,
+  //   [TabType.OPTIONS_REF_RECORDS]: OptionsRefRecordsTab,
+  //   [TabType.OPTIONS_REF_COLLECTION]: OptionsRefCollectionTab,
+  //   [TabType.OPTIONS_BOOLEAN]: BooleanTab,
+  //   [TabType.CUSTOM_OBJECT]: CustomObjectTab,
+  //   [TabType.CUSTOM_LIST]: CustomListTab,
+};
+
+exports.TAB_COMPONENTS = TAB_COMPONENTS;
+exports.renderTabs = renderTabs;

package/dist/cjs/components/ComboBox/Edit/OptionSelector.cjs

@@ -0,0 +1,162 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var React = require('react');
+require('../../ComboBoxElements/TipTapEditor/Editor.cjs');
+require('../../ComboBoxElements/TipTapEditor/EditorStandAlone.cjs');
+require('../../ComboBoxElements/TipTapEditor/TagComponent.cjs');
+require('../../SvgIcon/index.cjs');
+require('@integration-app/sdk');
+require('fuse');
+var clicks = require('../../ComboBoxElements/TipTapEditor/helpers/clicks.cjs');
+var index$1 = require('../../DataBuilderUI/index.cjs');
+var getRefElement = require('../../../helpers/getRefElement.cjs');
+var OptionSelector_module = require('./OptionSelector.module.css.cjs');
+var types = require('../types.cjs');
+var Dropdown = require('../Dropdown/Dropdown.cjs');
+require('../../DropdownUI/index.cjs');
+require('../context/combobox-dropdown-search.cjs');
+var comboboxDropdownContext = require('../context/combobox-dropdown-context.cjs');
+require('../Dropdown/tabs.cjs');
+var comboboxContext = require('../context/combobox-context.cjs');
+var FieldWrapper = require('../../ComboBoxElements/FieldWrapper.cjs');
+var index = require('../Value/index.cjs');
+var Schema = require('../Value/Schema.cjs');
+
+function OptionSelector({
+  placeholder,
+  className,
+  onChange,
+  disabled,
+  required,
+  valueComponent
+}) {
+  const valueRef = React.useRef(null);
+  const fieldValueRef = React.useRef(null);
+  const dropdownRef = React.useRef(null);
+  const {
+    value,
+    refsToIgnoreClick,
+    // Dropdown related
+    isDropdownOpen,
+    openDropdown,
+    closeDropdown,
+    topDropdownPanelComponent
+  } = comboboxContext.useComboBox();
+  const { activeTab } = comboboxDropdownContext.useComboBoxDropdownContext();
+  function handleOpenDropdown() {
+    if (disabled) return;
+    openDropdown();
+  }
+  function handleCloseDropdown() {
+    closeDropdown();
+  }
+  const refs = [valueRef, fieldValueRef, ...refsToIgnoreClick ?? []];
+  const handleClick = function handleClick2(e) {
+    const isClickInsideAnyOfElements = refs.map(getRefElement.getRefElement).some((el) => el.contains(e?.target));
+    if (isClickInsideAnyOfElements && !clicks.isClickOnEditorComponent(e?.target, fieldValueRef?.current)) {
+      handleOpenDropdown();
+      e?.stopPropagation();
+    }
+  };
+  function handleOptionSelect(option) {
+    const keepDropdownOpen = activeTab && [
+      types.ComboBoxTabType.SELECT_FROM_COLLECTION_DYNAMICALLY,
+      types.ComboBoxTabType.SELECT_FROM_UDM_DYNAMICALLY
+    ].includes(activeTab);
+    onChange(option);
+    if (!keepDropdownOpen) {
+      handleCloseDropdown();
+    }
+  }
+  const handleOnDelete = () => {
+    onChange(void 0);
+    handleCloseDropdown();
+  };
+  const requiredAndEmptyField = required && Schema.isDefinedValue(value);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    FieldWrapper.FieldWrapper,
+    {
+      role: "combobox",
+      ref: fieldValueRef,
+      "aria-expanded": isDropdownOpen,
+      onClick: handleClick,
+      disabled,
+      requiredAndEmptyField,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Value,
+          {
+            ref: valueRef,
+            valueComponent,
+            placeholder,
+            disabled,
+            className,
+            onChange,
+            onDelete: handleOnDelete,
+            isEdited: isDropdownOpen
+          }
+        ),
+        isDropdownOpen && /* @__PURE__ */ jsxRuntime.jsx(
+          Dropdown.Dropdown,
+          {
+            ref: dropdownRef,
+            referenceElement: fieldValueRef,
+            topDropdownPanelComponent,
+            autoFocusOnSearch: true,
+            onSelect: handleOptionSelect,
+            onClose: handleCloseDropdown
+          }
+        )
+      ]
+    }
+  );
+}
+const Value = React.forwardRef(
+  ({
+    className,
+    valueComponent,
+    placeholder,
+    onClick,
+    onChange,
+    onDelete,
+    disabled,
+    isEdited
+  }, ref) => {
+    const { value } = comboboxContext.useComboBox();
+    return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: OptionSelector_module.default.valueWrapper, ref, children: [
+      !!valueComponent ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: valueComponent }) : /* @__PURE__ */ jsxRuntime.jsx(
+        index.ComboBoxValue,
+        {
+          className,
+          placeholder,
+          onClick,
+          onChange,
+          disabled,
+          isEdited
+        }
+      ),
+      Schema.isDefinedValue(value) && onDelete && /* @__PURE__ */ jsxRuntime.jsx(
+        index$1.ActionBar,
+        {
+          className: clsx(
+            OptionSelector_module.default.actionBar,
+            isEdited && OptionSelector_module.default.actionBar__visible
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsx(index$1.ActionBar.DeleteButton, { onClick: onDelete })
+        }
+      )
+    ] });
+  }
+);
+
+exports.OptionSelector = OptionSelector;

package/dist/cjs/components/ComboBox/Edit/OptionSelector.module.css.cjs

@@ -0,0 +1,18 @@
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styleInject = require('style-inject');
+
+var css_248z = ".OptionSelector-module_valueWrapper__bSY1e {\n  position: relative;\n  display: inline-flex;\n  max-width: 100%;\n  --tw-text-opacity: 1;\n  color: rgb(0 0 0 / var(--tw-text-opacity));\n  padding-right: 0.375rem;\n  width: -moz-fit-content;\n  width: fit-content;\n  transition:\n    width 0.5s,\n    height 0.5s\n}\n\n.OptionSelector-module_valueWrapper__bSY1e[role='combobox'] span:empty {\n  --tw-bg-opacity: 1;\n  background-color: rgb(170 170 170 / var(--tw-bg-opacity));\n  min-width: 7rem\n}\n\n.OptionSelector-module_actionBar__YRz10:not(.OptionSelector-module_actionBar__visible__3kDge) {\n  display: none\n}\n\n.OptionSelector-module_actionBar__visible__3kDge {\n  position: absolute;\n  left: 100%;\n  top: 0px;\n  bottom: 0px;\n  margin-right: 0px;\n  width: 0px;\n  z-index: 1\n}\n";
+var classes = {"valueWrapper":"OptionSelector-module_valueWrapper__bSY1e","actionBar":"OptionSelector-module_actionBar__YRz10","actionBar__visible":"OptionSelector-module_actionBar__visible__3kDge"};
+styleInject(css_248z);
+
+exports.default = classes;