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

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

@@ -2,21 +2,19 @@
 /*
  * 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 } from 'react/jsx-runtime';
-import { createContext, useState, useMemo, useContext } from 'react';
+import { createContext, useState, useMemo, useEffect, useContext } from 'react';
+import { useComboBox } from './combobox-context.mjs';
 
 const ComboBoxDropdownSearchContext = createContext(
   {
     hideSearch: false,
     searchValue: "",
     setSearchValue: () => null,
-    drillDownDepth: 0,
-    setDrillDownDepth: () => {
-    },
     searchSource: "editor",
     setSearchSource: () => {
     }
@@ -28,20 +26,23 @@ const ComboBoxDropdownSearchProvider = ({
   hideSearch = false
 }) => {
   const [searchValue, setSearchValue] = useState("");
-  const [drillDownDepth, setDrillDownDepth] = useState(0);
   const [searchSource, setSearchSource] = useState("editor");
+  const { isDropdownOpen } = useComboBox();
   const contextValue = useMemo(
     () => ({
       searchValue,
       setSearchValue,
       hideSearch,
-      drillDownDepth,
-      setDrillDownDepth,
       searchSource,
       setSearchSource
     }),
-    [searchValue, hideSearch, drillDownDepth, searchSource]
+    [searchValue, hideSearch, searchSource]
   );
+  useEffect(() => {
+    if (!isDropdownOpen && searchValue) {
+      setSearchValue("");
+    }
+  }, [isDropdownOpen]);
   return /* @__PURE__ */ jsx(ComboBoxDropdownSearchContext.Provider, { value: contextValue, children });
 };
 function useComboBoxDropdownSearchContext() {

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

@@ -2,43 +2,56 @@
 /*
  * 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, Fragment } from 'react/jsx-runtime';
-import { createContext, useContext, useRef, useEffect } from 'react';
+import { createContext, useState, useContext, useRef, useEffect } from 'react';
 import { getRefElement } from '../../../helpers/getRefElement.mjs';
 
-const DropdownStackContext = createContext(false);
-let GLOBAL_DROPDOWN_STACK = [];
+const DropdownStackContext = createContext({
+  isNested: false,
+  stack: [],
+  setStack: () => {
+  }
+});
 const DropdownStackContextProvider = ({
   children
 }) => {
-  const hasNestedDropdownsContext = useContext(DropdownStackContext);
+  const [stack, setStack] = useState([]);
+  const { isNested: hasNestedDropdownsContext } = useContext(DropdownStackContext);
   if (hasNestedDropdownsContext) {
     return /* @__PURE__ */ jsx(Fragment, { children });
   }
-  return /* @__PURE__ */ jsx(DropdownStackContext.Provider, { value: true, children });
+  return /* @__PURE__ */ jsx(
+    DropdownStackContext.Provider,
+    {
+      value: {
+        isNested: true,
+        stack,
+        setStack
+      },
+      children
+    }
+  );
 };
 const useDropdownStackContext = (dropdownRef) => {
-  const isNested = useContext(DropdownStackContext);
+  const { isNested, stack, setStack } = useContext(DropdownStackContext);
   const recordRef = useRef(dropdownRef);
   useEffect(() => {
     if (isNested) {
-      GLOBAL_DROPDOWN_STACK.push(recordRef?.current);
+      setStack((prev) => [...prev, recordRef?.current]);
     } else {
-      GLOBAL_DROPDOWN_STACK = [recordRef?.current];
+      setStack([recordRef?.current]);
     }
     return () => {
-      GLOBAL_DROPDOWN_STACK = GLOBAL_DROPDOWN_STACK.filter(
-        (record) => record !== recordRef?.current
-      );
+      setStack((prev) => prev.filter((record) => record !== recordRef?.current));
     };
   }, []);
   function isClickInsideRefsAndChildren(event) {
-    const stackStartedFromElement = GLOBAL_DROPDOWN_STACK.slice(
-      GLOBAL_DROPDOWN_STACK.indexOf(recordRef?.current)
+    const stackStartedFromElement = stack.slice(
+      stack.indexOf(recordRef?.current)
     );
     return stackStartedFromElement.some((ref) => {
       return isClickInsideRefRecord(ref, event);

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

@@ -2,13 +2,13 @@
 /*
  * 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 { UNIFIED_DATA_MODELS, schemaHasFixedValues, getReferenceCollectionPathForSchema, getFormula, DataBuilderFormulaType } from '@integration-app/sdk';
-import { ComboBoxTabType } from '../types.mjs';
-import { getLookupCollection } from '../Dropdown/Tabs/Lookup.mjs';
+import { DropdownCategoryType } from '../types.mjs';
+import { getLookupCollection } from '../Dropdown/Categories/getLookupCollection.mjs';
 
 function isSchemaAllowCustomValue(schema) {
   const schemaHasNoType = !schema?.type;
@@ -16,7 +16,7 @@ function isSchemaAllowCustomValue(schema) {
   const schemaIsArrayWithNoSchemaItems = schema?.type === "array" && !schema?.items?.type;
   return schemaHasNoType || schemaIsObjectWithNoProperties || schemaIsArrayWithNoSchemaItems;
 }
-async function getAvailableTabs({
+async function getAvailableRootCategories({
   schema,
   options,
   optionFactories,
@@ -26,22 +26,11 @@ async function getAvailableTabs({
   connectionId,
   integrationId
 }) {
-  const availableTabs = [];
+  const availableCategories = /* @__PURE__ */ new Set();
   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);
+    availableCategories.add(DropdownCategoryType.SELECT_FROM_UDM_DYNAMICALLY);
   }
   if (schema && (connectionId || integrationId)) {
     const collection = await getLookupCollection({
@@ -51,37 +40,48 @@ async function getAvailableTabs({
       integrationId
     });
     if (collection?.find?.queryFields || collection?.match?.fields) {
-      availableTabs.push(ComboBoxTabType.SELECT_FROM_COLLECTION_DYNAMICALLY);
+      availableCategories.add(DropdownCategoryType.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) {
+    availableCategories.add(DropdownCategoryType.OPTIONS);
+  }
+  const comboboxHasReferenceCollection = !!getReferenceCollectionPathForSchema(schema);
+  if (comboboxHasReferenceCollection && connectionId) {
+    availableCategories.add(DropdownCategoryType.LOOKUP_OPTIONS);
+  }
   const schemaAllowCustomValue = isSchemaAllowCustomValue(schema);
   if (!variablesOnly && !comboboxHasOptionList && schemaAllowCustomValue) {
-    availableTabs.push(ComboBoxTabType.CUSTOM);
+    availableCategories.add(DropdownCategoryType.CUSTOM);
   }
   if (hasVariables) {
-    availableTabs.push(ComboBoxTabType.VARIABLE);
-    availableTabs.push(ComboBoxTabType.FORMULA);
+    availableCategories.add(DropdownCategoryType.VARIABLE);
+    availableCategories.add(DropdownCategoryType.FORMULA);
   }
-  return availableTabs.length > 0 ? availableTabs : null;
+  return availableCategories.size > 0 ? [...availableCategories] : null;
 }
-function getCurrentTab(availableTabs, possibleCurrentTab, value) {
-  if (possibleCurrentTab && availableTabs.includes(possibleCurrentTab)) {
-    return possibleCurrentTab;
+function getCurrentPath(availableCategories, value) {
+  if (availableCategories.length < 1) {
+    return [DropdownCategoryType.ROOT];
   }
-  return getDefaultTab(availableTabs, value);
-}
-function getDefaultTab(availableTabs, value) {
-  if (availableTabs.length <= 1) {
-    return availableTabs[0];
+  if (availableCategories.length === 1) {
+    return availableCategories;
   }
   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;
-    }
+  if (formulaType === DataBuilderFormulaType.LOOKUP && availableCategories.includes(
+    DropdownCategoryType.SELECT_FROM_UDM_DYNAMICALLY
+  )) {
+    return [
+      DropdownCategoryType.ROOT,
+      DropdownCategoryType.SELECT_FROM_UDM_DYNAMICALLY
+    ];
+  }
+  if (formulaType === DataBuilderFormulaType.VAR) {
+    return [DropdownCategoryType.ROOT, DropdownCategoryType.VARIABLE];
   }
   const generalFormulaTypes = Object.values(DataBuilderFormulaType).filter(
     (x) => ![
@@ -90,19 +90,44 @@ function getDefaultTab(availableTabs, value) {
       DataBuilderFormulaType.RECORD
     ].includes(x)
   );
-  if (availableTabs.includes(ComboBoxTabType.FORMULA) && generalFormulaTypes.includes(formulaType)) {
-    return ComboBoxTabType.FORMULA;
+  if (availableCategories.includes(DropdownCategoryType.FORMULA) && generalFormulaTypes.includes(formulaType)) {
+    return [
+      DropdownCategoryType.ROOT,
+      DropdownCategoryType.FORMULA,
+      DropdownCategoryType.FORMULA_CONFIG
+    ];
   }
-  if (availableTabs.includes(ComboBoxTabType.OPTIONS)) {
-    return ComboBoxTabType.OPTIONS;
+  if (availableCategories.includes(DropdownCategoryType.LOOKUP_OPTIONS)) {
+    return [DropdownCategoryType.ROOT];
   }
-  if (availableTabs.includes(ComboBoxTabType.LOOKUP_OPTIONS)) {
-    return ComboBoxTabType.LOOKUP_OPTIONS;
+  if (availableCategories.includes(DropdownCategoryType.CUSTOM)) {
+    return [DropdownCategoryType.ROOT];
   }
-  if (availableTabs.includes(ComboBoxTabType.VARIABLE)) {
-    return ComboBoxTabType.VARIABLE;
+  return [DropdownCategoryType.ROOT];
+}
+async function getStackForPath(path, value, getOptions, stack, searchValue) {
+  const [first, ...rest] = path;
+  if (!first) {
+    return stack;
+  }
+  const options = await getOptions(searchValue, stack);
+  const targetOption = options.find((option) => {
+    const categoryMatched = option.childCategory !== void 0 && option.childCategory === first;
+    if (first === DropdownCategoryType.FORMULA_CONFIG) {
+      const valueFormulaType = getFormula(value)?.type;
+      const optionFormulaType = getFormula(option.value)?.type;
+      if (!optionFormulaType && !optionFormulaType) {
+        return false;
+      }
+      return categoryMatched && valueFormulaType === optionFormulaType;
+    }
+    return categoryMatched;
+  });
+  const newStack = [...stack];
+  if (targetOption) {
+    newStack.push(targetOption);
   }
-  return availableTabs[0];
+  return await getStackForPath(rest, value, getOptions, newStack, searchValue);
 }
 function canUserEnterValueFromKeyboard(schema, options, optionFactories, variablesOnly, value) {
   const comboboxHasOptions = (options || []).length > 0;
@@ -123,4 +148,4 @@ function canUserEnterValueFromKeyboard(schema, options, optionFactories, variabl
   return true;
 }
 
-export { canUserEnterValueFromKeyboard, getAvailableTabs, getCurrentTab };
+export { canUserEnterValueFromKeyboard, getAvailableRootCategories, getCurrentPath, getStackForPath };

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

@@ -2,23 +2,27 @@
 /*
  * 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 { SvgIconType } from '../../SvgIcon/svg-icon-type.mjs';
+
 class BooleanOptionsFactory {
-  async getOptions() {
+  async getOptions({}) {
     return this.getOptionsSync();
   }
   getOptionsSync() {
     return [
       {
         label: "Yes",
-        value: true
+        value: true,
+        iconType: SvgIconType.ListOption
       },
       {
         label: "No",
-        value: false
+        value: false,
+        iconType: SvgIconType.ListOption
       }
     ];
   }

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

@@ -2,21 +2,27 @@
 /*
  * 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 { filterOptionsByLabel } from './base.mjs';
+import { filterOptionsByLabel } from './utils.mjs';
+import { SvgIconType } from '../../SvgIcon/svg-icon-type.mjs';
 
 class ConstantOptionFactory {
   constructor(options) {
     this.options = options;
   }
-  async getOptions({ input }) {
+  async getOptions({
+    input
+  }) {
     return this.getOptionsSync({ input });
   }
   getOptionsSync({ input }) {
-    return filterOptionsByLabel(this.options, input);
+    return filterOptionsByLabel(this.options, input).map((option) => ({
+      ...option,
+      iconType: SvgIconType.ListOption
+    }));
   }
 }
 

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

@@ -2,36 +2,48 @@
 /*
  * 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 { SvgIconType } from '../../SvgIcon/index.mjs';
+import { SvgIconType } from '../../SvgIcon/svg-icon-type.mjs';
+import { DropdownCategoryType } from '../types.mjs';
 import { ValueType } from '../value-spec.mjs';
-import { filterOptionsByLabel } from './base.mjs';
+import { filterOptionsByLabel } from './utils.mjs';
+import { renderCategories } from '../Dropdown/categoryContentMapping.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 }) {
+  async getOptions({
+    spec,
+    input
+  }) {
     const options = [];
-    if (spec.type === ValueType.ANY || spec.type === ValueType.OBJECT) {
+    if (spec && (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) {
+    if (spec && (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);
+    const result = filterOptionsByLabel(options, input);
+    if (result.length > 0) {
+      result.unshift({
+        label: renderCategories[DropdownCategoryType.CUSTOM].title,
+        isSection: true
+      });
+    }
+    return result;
   }
 }
 function isCustomFieldValue(value) {

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

@@ -2,17 +2,20 @@
 /*
  * 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 { filterOptionsByLabel } from './base.mjs';
+import { SvgIconType } from '../../SvgIcon/svg-icon-type.mjs';
+import { filterOptionsByLabel } from './utils.mjs';
 
 class EnumOptionFactory {
   constructor(params) {
     this.params = params;
   }
-  async getOptions({ input }) {
+  async getOptions({
+    input
+  }) {
     return this.getOptionsSync({ input });
   }
   getOptionsSync({ input }) {
@@ -22,12 +25,14 @@ class EnumOptionFactory {
         if (typeof enumValue == "object" && enumValue.value) {
           options.push({
             label: enumValue.label ?? enumValue.value,
-            value: enumValue.value
+            value: enumValue.value,
+            iconType: SvgIconType.ListOption
           });
         } else {
           options.push({
             label: enumValue,
-            value: enumValue
+            value: enumValue,
+            iconType: SvgIconType.ListOption
           });
         }
       });

package/dist/esm/components/{DataBuilder/Formula/options-factory.mjs → ComboBox/options-factories/formula.mjs}

@@ -2,14 +2,16 @@
 /*
  * 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 { filterOptionsByLabel } from '../../ComboBox/options-factories/base.mjs';
-import { ValueType } from '../../ComboBox/value-spec.mjs';
-import '../../SvgIcon/index.mjs';
-import { getFormulas } from './index.mjs';
+import { filterOptionsByLabel } from './utils.mjs';
+import { DropdownCategoryType } from '../types.mjs';
+import { ValueType } from '../value-spec.mjs';
+import { getFormulas } from '../../DataBuilder/Formula/index.mjs';
+import { renderCategories } from '../Dropdown/categoryContentMapping.mjs';
+import { SvgIconType } from '../../SvgIcon/svg-icon-type.mjs';
 
 class FormulaListOptionsFactory {
   async getOptions({ input, spec }) {
@@ -21,16 +23,25 @@ class FormulaListOptionsFactory {
         label: formulaSpec.name,
         value: {
           [`$${type}`]: null
-        }
+        },
+        childCategory: DropdownCategoryType.FORMULA_CONFIG,
+        iconType: SvgIconType.ListOption
       });
     }
     const filteredOptions = filterOptionsByLabel(options, input);
+    if (filteredOptions.length > 0) {
+      filteredOptions.unshift({
+        label: renderCategories[DropdownCategoryType.FORMULA].title,
+        isSection: true
+      });
+    }
     return filteredOptions;
   }
 }
 function getFormulaTypesForSpec(spec) {
   const result = [];
-  for (const [formulaType, formulaSpec] of Object.entries(getFormulas())) {
+  const entries = Object.entries(getFormulas());
+  for (const [formulaType, formulaSpec] of entries) {
     if (!formulaSpec.appliesToSpec) {
       continue;
     }