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

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.0.4-beta.0
  */
 'use client';
 
@@ -40,7 +40,6 @@ function OptionSelector({
 }) {
   const valueRef = React.useRef(null);
   const fieldValueRef = React.useRef(null);
-  const dropdownRef = React.useRef(null);
   const {
     value,
     refsToIgnoreClick,
@@ -55,9 +54,6 @@ function OptionSelector({
     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));
@@ -67,21 +63,20 @@ function OptionSelector({
     }
   };
   function handleOptionSelect(option) {
-    const keepDropdownOpen = activeCategory && [
-      types.DropdownCategoryType.SELECT_FROM_COLLECTION_DYNAMICALLY,
-      types.DropdownCategoryType.SELECT_FROM_UDM_DYNAMICALLY
-    ].includes(activeCategory);
+    const keepDropdownOpen = activeCategory && [types.DropdownCategoryType.SELECT_FROM_UDM_DYNAMICALLY].includes(
+      activeCategory
+    );
     onChange(option);
     if (!keepDropdownOpen) {
-      handleCloseDropdown();
+      closeDropdown();
     }
   }
   const handleOnDelete = () => {
     onChange(void 0);
-    handleCloseDropdown();
+    closeDropdown();
   };
   const requiredAndEmptyField = required && isDefinedValue.isDefinedValue(value);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     FieldWrapper.FieldWrapper,
     {
       role: "combobox",
@@ -90,32 +85,27 @@ function OptionSelector({
       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,
-            onOptionSelect: handleOptionSelect,
-            onClose: handleCloseDropdown
-          }
-        )
-      ]
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        Dropdown.Dropdown,
+        {
+          topDropdownPanelComponent,
+          autoFocusOnSearch: true,
+          onOptionSelect: handleOptionSelect,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            Value,
+            {
+              ref: valueRef,
+              valueComponent,
+              placeholder,
+              disabled,
+              className,
+              onChange,
+              onDelete: handleOnDelete,
+              isEdited: isDropdownOpen
+            }
+          )
+        }
+      )
     }
   );
 }

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

@@ -1,7 +1,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.0.4-beta.0
  */
 'use client';
 

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.0.4-beta.0
  */
 'use client';
 
@@ -36,7 +36,6 @@ function TextInput({
 }) {
   const textInputRef = React.useRef(null);
   const fieldValueRef = React.useRef(null);
-  const dropdownRef = React.useRef(null);
   const {
     value,
     refsToIgnoreClick,
@@ -52,7 +51,7 @@ function TextInput({
     onChange,
     onEnter: ({ editor: editor2 }) => {
       onChange(transformEditorSchemaToValue.transformEditorSchemaToValue(editor2?.getJSON() ?? {}));
-      handleCloseDropdown();
+      closeDropdown();
     },
     placeholder,
     allowEditorSearchClear: searchSource === "editor"
@@ -65,9 +64,6 @@ function TextInput({
     if (disabled) return;
     openDropdown();
   }
-  function handleCloseDropdown() {
-    closeDropdown();
-  }
   const refs = [textInputRef, fieldValueRef, ...refsToIgnoreClick ?? []];
   const handleClick = function(e) {
     const isClickInsideAnyOfElements = refs.map(getRefElement.getRefElement).some((el) => el.contains(e?.target));
@@ -83,18 +79,18 @@ function TextInput({
     if (shouldRewriteValue(activeCategory)) {
       onChange(variable);
       if (shouldCloseDropdown(activeCategory)) {
-        handleCloseDropdown();
+        closeDropdown();
       }
     } else {
       const openTagCombobox = valueHasDropdownWithFormula(variable);
       if (openTagCombobox) {
-        handleCloseDropdown();
+        closeDropdown();
       }
       pasteTag(variable, { autoOpen: openTagCombobox });
     }
   };
   const requiredAndEmptyField = required && isDefinedValue.isDefinedValue(value);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     FieldWrapper.FieldWrapper,
     {
       role: "combobox",
@@ -103,30 +99,25 @@ function TextInput({
       onClick: handleClick,
       disabled,
       requiredAndEmptyField,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Editor.Editor,
-          {
-            className,
-            ref: textInputRef,
-            editor,
-            onFocus: () => {
-              setSearchSource("editor");
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        Dropdown.Dropdown,
+        {
+          topDropdownPanelComponent,
+          onOptionSelect: handleOptionSelect,
+          autoFocusOnSearch: false,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            Editor.Editor,
+            {
+              className,
+              ref: textInputRef,
+              editor,
+              onFocus: () => {
+                setSearchSource("editor");
+              }
             }
-          }
-        ),
-        isDropdownOpen && /* @__PURE__ */ jsxRuntime.jsx(
-          Dropdown.Dropdown,
-          {
-            ref: dropdownRef,
-            referenceElement: fieldValueRef,
-            topDropdownPanelComponent,
-            onOptionSelect: handleOptionSelect,
-            onClose: handleCloseDropdown,
-            autoFocusOnSearch: false
-          }
-        )
-      ]
+          )
+        }
+      )
     }
   );
 }
@@ -135,7 +126,6 @@ function shouldRewriteValue(category) {
     types.DropdownCategoryType.OPTIONS,
     types.DropdownCategoryType.CUSTOM,
     types.DropdownCategoryType.LOOKUP_OPTIONS,
-    types.DropdownCategoryType.SELECT_FROM_COLLECTION_DYNAMICALLY,
     types.DropdownCategoryType.SELECT_FROM_UDM_DYNAMICALLY
   ].includes(category);
 }

package/dist/cjs/components/ComboBox/Value/ComboBoxValue.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.0.4-beta.0
  */
 'use client';
 

package/dist/cjs/components/ComboBox/Value/Formula.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.0.4-beta.0
  */
 'use client';
 

package/dist/cjs/components/ComboBox/Value/Schema.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.0.4-beta.0
  */
 'use client';
 

package/dist/cjs/components/ComboBox/Value/isDefinedValue.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.0.4-beta.0
  */
 'use client';
 

package/dist/cjs/components/ComboBox/context/combobox-context.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.0.4-beta.0
  */
 'use client';
 
@@ -49,6 +49,7 @@ const ComboBoxProvider = ({
   topDropdownPanelComponent,
   children
 }) => {
+  const scopedComboboxId = React.useId();
   const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
   React.useEffect(() => {
     if (autoOpen) {
@@ -71,6 +72,7 @@ const ComboBoxProvider = ({
     ComboBoxContext.Provider,
     {
       value: {
+        scopedComboboxId,
         value,
         schema,
         valueSpec,

package/dist/cjs/components/ComboBox/context/combobox-dropdown-context.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.0.4-beta.0
  */
 'use client';
 
@@ -19,7 +19,6 @@ var boolean = require('../options-factories/boolean.cjs');
 var constant = require('../options-factories/constant.cjs');
 var _enum = require('../options-factories/enum.cjs');
 var referenceRecords = require('../options-factories/reference-records.cjs');
-var referenceUdm = require('../options-factories/reference-udm.cjs');
 var types = require('../types.cjs');
 var helpers = require('./helpers.cjs');
 var comboboxContext = require('./combobox-context.cjs');
@@ -62,6 +61,27 @@ const ComboBoxDropdownContextProvider = ({
   const [availableCategories, setAvailableCategories] = React.useState(null);
   const [drillPath, setDrillPath] = React.useState([]);
   const hasVariables = variablesSchema?.type === "object" && Object.keys(variablesSchema.properties ?? {}).length > 0;
+  const recoverStack = (path, availableCategories2) => {
+    void helpers.getStackForPath(
+      path,
+      value,
+      (searchValue2, stack) => getOptions({
+        availableCategories: availableCategories2,
+        schema,
+        variablesSchema,
+        searchValue: searchValue2,
+        valueSpec,
+        drillDownStack: stack,
+        staticOptions: options,
+        optionFactories,
+        editableVariablesSchemaLocators
+      }),
+      [],
+      canUseParentInputSearchValue ? value : searchValue
+    ).then((stack) => {
+      setDrillDownOptionsStack(stack);
+    });
+  };
   React.useEffect(() => {
     void helpers.getAvailableRootCategories({
       schema,
@@ -75,7 +95,9 @@ const ComboBoxDropdownContextProvider = ({
     }).then((categories) => {
       setAvailableCategories(categories);
       if (!isDropdownOpen) {
-        setDrillPath(helpers.getCurrentPath(categories || [], value));
+        const currentPath = helpers.getCurrentPath(categories || [], value);
+        setDrillPath(currentPath);
+        recoverStack(currentPath, categories);
       }
     });
   }, [
@@ -92,25 +114,7 @@ const ComboBoxDropdownContextProvider = ({
     if (!isDropdownOpen) {
       resetDrillDown();
     } else {
-      void helpers.getStackForPath(
-        drillPath,
-        value,
-        (searchValue2, stack) => getOptions({
-          availableCategories,
-          schema,
-          variablesSchema,
-          searchValue: searchValue2,
-          valueSpec,
-          drillDownStack: stack,
-          staticOptions: options,
-          optionFactories,
-          editableVariablesSchemaLocators
-        }),
-        [],
-        canUseParentInputSearchValue ? value : searchValue
-      ).then((stack) => {
-        setDrillDownOptionsStack(stack);
-      });
+      recoverStack(drillPath, availableCategories);
     }
   }, [isDropdownOpen]);
   const [activeCategory] = drillPath.toReversed();
@@ -214,9 +218,7 @@ async function getOptions({
   const factories = [...optionFactories];
   if (drillDownStack.length === 0) {
     factories.push(new root.RootOptionFactory(availableCategories));
-    if (schema?.referenceUdm) {
-      factories.unshift(new referenceUdm.ReferenceUdmOptionFactory(schema));
-    } else if (schema?.referenceRecords) {
+    if (schema?.referenceRecords) {
       factories.push(new referenceRecords.ReferenceRecordsOptionsFactory({ schema }));
     } else if (schema?.enum) {
       factories.push(new _enum.EnumOptionFactory({ schema }));

package/dist/cjs/components/ComboBox/context/combobox-dropdown-search.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.0.4-beta.0
  */
 'use client';
 

package/dist/cjs/components/ComboBox/context/combobox-dropdown-stack.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.0.4-beta.0
  */
 'use client';
 
@@ -12,35 +12,48 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var getRefElement = require('../../../helpers/getRefElement.cjs');
 
-const DropdownStackContext = React.createContext(false);
-let GLOBAL_DROPDOWN_STACK = [];
+const DropdownStackContext = React.createContext({
+  isNested: false,
+  stack: [],
+  setStack: () => {
+  }
+});
 const DropdownStackContextProvider = ({
   children
 }) => {
-  const hasNestedDropdownsContext = React.useContext(DropdownStackContext);
+  const [stack, setStack] = React.useState([]);
+  const { isNested: hasNestedDropdownsContext } = React.useContext(DropdownStackContext);
   if (hasNestedDropdownsContext) {
     return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(DropdownStackContext.Provider, { value: true, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DropdownStackContext.Provider,
+    {
+      value: {
+        isNested: true,
+        stack,
+        setStack
+      },
+      children
+    }
+  );
 };
 const useDropdownStackContext = (dropdownRef) => {
-  const isNested = React.useContext(DropdownStackContext);
+  const { isNested, stack, setStack } = React.useContext(DropdownStackContext);
   const recordRef = React.useRef(dropdownRef);
   React.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/cjs/components/ComboBox/context/helpers.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.0.4-beta.0
  */
 'use client';
 
@@ -28,22 +28,11 @@ async function getAvailableRootCategories({
   connectionId,
   integrationId
 }) {
-  const availableCategories = [];
+  const availableCategories = /* @__PURE__ */ new Set();
   const udm = schema?.referenceUdm;
   const udmSpec = udm ? sdk.UNIFIED_DATA_MODELS[udm] : void 0;
   if (!!udmSpec) {
-    availableCategories.push(types.DropdownCategoryType.SELECT_FROM_UDM_DYNAMICALLY);
-  }
-  const comboboxHasOptions = Array.isArray(options);
-  const comboboxHasOptionFactories = (optionFactories || []).length > 0;
-  const comboboxHasFixedValues = !!schema && sdk.schemaHasFixedValues(schema);
-  const comboboxHasOptionList = comboboxHasOptions || comboboxHasOptionFactories || comboboxHasFixedValues;
-  if (comboboxHasOptionList) {
-    availableCategories.push(types.DropdownCategoryType.OPTIONS);
-  }
-  const comboboxHasReferenceCollection = !!sdk.getReferenceCollectionPathForSchema(schema);
-  if (comboboxHasReferenceCollection && connectionId) {
-    availableCategories.push(types.DropdownCategoryType.LOOKUP_OPTIONS);
+    availableCategories.add(types.DropdownCategoryType.SELECT_FROM_UDM_DYNAMICALLY);
   }
   if (schema && (connectionId || integrationId)) {
     const collection = await getLookupCollection.getLookupCollection({
@@ -53,20 +42,29 @@ async function getAvailableRootCategories({
       integrationId
     });
     if (collection?.find?.queryFields || collection?.match?.fields) {
-      availableCategories.push(
-        types.DropdownCategoryType.SELECT_FROM_COLLECTION_DYNAMICALLY
-      );
+      availableCategories.add(types.DropdownCategoryType.SELECT_FROM_UDM_DYNAMICALLY);
     }
   }
+  const comboboxHasOptions = Array.isArray(options);
+  const comboboxHasOptionFactories = (optionFactories || []).length > 0;
+  const comboboxHasFixedValues = !!schema && sdk.schemaHasFixedValues(schema);
+  const comboboxHasOptionList = comboboxHasOptions || comboboxHasOptionFactories || comboboxHasFixedValues;
+  if (comboboxHasOptionList) {
+    availableCategories.add(types.DropdownCategoryType.OPTIONS);
+  }
+  const comboboxHasReferenceCollection = !!sdk.getReferenceCollectionPathForSchema(schema);
+  if (comboboxHasReferenceCollection && connectionId) {
+    availableCategories.add(types.DropdownCategoryType.LOOKUP_OPTIONS);
+  }
   const schemaAllowCustomValue = isSchemaAllowCustomValue(schema);
   if (!variablesOnly && !comboboxHasOptionList && schemaAllowCustomValue) {
-    availableCategories.push(types.DropdownCategoryType.CUSTOM);
+    availableCategories.add(types.DropdownCategoryType.CUSTOM);
   }
   if (hasVariables) {
-    availableCategories.push(types.DropdownCategoryType.VARIABLE);
-    availableCategories.push(types.DropdownCategoryType.FORMULA);
+    availableCategories.add(types.DropdownCategoryType.VARIABLE);
+    availableCategories.add(types.DropdownCategoryType.FORMULA);
   }
-  return availableCategories.length > 0 ? availableCategories : null;
+  return availableCategories.size > 0 ? [...availableCategories] : null;
 }
 function getCurrentPath(availableCategories, value) {
   if (availableCategories.length < 1) {
@@ -76,23 +74,13 @@ function getCurrentPath(availableCategories, value) {
     return availableCategories;
   }
   const formulaType = sdk.getFormula(value)?.type;
-  if (formulaType === sdk.DataBuilderFormulaType.LOOKUP) {
-    if (availableCategories.includes(
-      types.DropdownCategoryType.SELECT_FROM_COLLECTION_DYNAMICALLY
-    )) {
-      return [
-        types.DropdownCategoryType.ROOT,
-        types.DropdownCategoryType.SELECT_FROM_COLLECTION_DYNAMICALLY
-      ];
-    }
-    if (availableCategories.includes(
+  if (formulaType === sdk.DataBuilderFormulaType.LOOKUP && availableCategories.includes(
+    types.DropdownCategoryType.SELECT_FROM_UDM_DYNAMICALLY
+  )) {
+    return [
+      types.DropdownCategoryType.ROOT,
       types.DropdownCategoryType.SELECT_FROM_UDM_DYNAMICALLY
-    )) {
-      return [
-        types.DropdownCategoryType.ROOT,
-        types.DropdownCategoryType.SELECT_FROM_UDM_DYNAMICALLY
-      ];
-    }
+    ];
   }
   if (formulaType === sdk.DataBuilderFormulaType.VAR) {
     return [types.DropdownCategoryType.ROOT, types.DropdownCategoryType.VARIABLE];

package/dist/cjs/components/ComboBox/options-factories/boolean.cjs

@@ -2,12 +2,14 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.0.4-beta.0
  */
 'use client';
 
 'use strict';
 
+var svgIconType = require('../../SvgIcon/svg-icon-type.cjs');
+
 class BooleanOptionsFactory {
   async getOptions({}) {
     return this.getOptionsSync();
@@ -16,11 +18,13 @@ class BooleanOptionsFactory {
     return [
       {
         label: "Yes",
-        value: true
+        value: true,
+        iconType: svgIconType.SvgIconType.ListOption
       },
       {
         label: "No",
-        value: false
+        value: false,
+        iconType: svgIconType.SvgIconType.ListOption
       }
     ];
   }

package/dist/cjs/components/ComboBox/options-factories/constant.cjs

@@ -2,13 +2,14 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.0.4-beta.0
  */
 'use client';
 
 'use strict';
 
 var utils = require('./utils.cjs');
+var svgIconType = require('../../SvgIcon/svg-icon-type.cjs');
 
 class ConstantOptionFactory {
   constructor(options) {
@@ -20,7 +21,10 @@ class ConstantOptionFactory {
     return this.getOptionsSync({ input });
   }
   getOptionsSync({ input }) {
-    return utils.filterOptionsByLabel(this.options, input);
+    return utils.filterOptionsByLabel(this.options, input).map((option) => ({
+      ...option,
+      iconType: svgIconType.SvgIconType.ListOption
+    }));
   }
 }
 

package/dist/cjs/components/ComboBox/options-factories/custom-field.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.0.4-beta.0
  */
 'use client';
 

package/dist/cjs/components/ComboBox/options-factories/enum.cjs

@@ -2,12 +2,13 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.0.4-beta.0
  */
 'use client';
 
 'use strict';
 
+var svgIconType = require('../../SvgIcon/svg-icon-type.cjs');
 var utils = require('./utils.cjs');
 
 class EnumOptionFactory {
@@ -26,12 +27,14 @@ class EnumOptionFactory {
         if (typeof enumValue == "object" && enumValue.value) {
           options.push({
             label: enumValue.label ?? enumValue.value,
-            value: enumValue.value
+            value: enumValue.value,
+            iconType: svgIconType.SvgIconType.ListOption
           });
         } else {
           options.push({
             label: enumValue,
-            value: enumValue
+            value: enumValue,
+            iconType: svgIconType.SvgIconType.ListOption
           });
         }
       });