@integration-app/react 2.0.3 → 2.1.0

package/dist/esm/components/ComboBox/Dropdown/OptionsList.mjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.1.0
  */
 'use client';
 
@@ -31,17 +31,37 @@ function OptionsList({
     optionsPayload,
     drillUp
   } = useComboBoxDropdownContext();
+  const { value: parentInputValue, scopedComboboxId } = useComboBox();
   const [currentOption, setCurrentOption] = useState(
     null
   );
-  useKeyboardEventSubscribe(EVENT_TYPE.OPTION_DOWN, makePreviousOptionCurrent);
-  useKeyboardEventSubscribe(EVENT_TYPE.OPTION_UP, makeNextOptionCurrent);
-  useKeyboardEventSubscribe(EVENT_TYPE.OPTION_LEFT, () => {
-    drillUp();
+  useKeyboardEventSubscribe({
+    scopedComboboxId,
+    event: EVENT_TYPE.OPTION_DOWN,
+    callback: makePreviousOptionCurrent
+  });
+  useKeyboardEventSubscribe({
+    scopedComboboxId,
+    event: EVENT_TYPE.OPTION_UP,
+    callback: makeNextOptionCurrent
+  });
+  useKeyboardEventSubscribe({
+    scopedComboboxId,
+    event: EVENT_TYPE.OPTION_LEFT,
+    callback: () => {
+      drillUp();
+    }
+  });
+  useKeyboardEventSubscribe({
+    scopedComboboxId,
+    event: EVENT_TYPE.OPTION_RIGHT,
+    callback: handleKeyEnter
+  });
+  useKeyboardEventSubscribe({
+    scopedComboboxId,
+    event: EVENT_TYPE.OPTION_SELECT,
+    callback: handleKeyEnter
   });
-  useKeyboardEventSubscribe(EVENT_TYPE.OPTION_RIGHT, handleKeyEnter);
-  useKeyboardEventSubscribe(EVENT_TYPE.OPTION_SELECT, handleKeyEnter);
-  const { value: parentInputValue } = useComboBox();
   const [options = [], optionsError, optionsState] = optionsPayload;
   useDeepEffect(() => {
     if (!options?.length) {

package/dist/esm/components/ComboBox/Dropdown/SearchInput.mjs

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

package/dist/esm/components/ComboBox/Dropdown/categoryContentMapping.mjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.1.0
  */
 'use client';
 
@@ -51,13 +51,7 @@ const renderCategories = {
     title: "Select Dynamically",
     hideSearchInput: true,
     hasConfigUI: true,
-    icon: SvgIconType.UDMEntity
-  },
-  [DropdownCategoryType.SELECT_FROM_COLLECTION_DYNAMICALLY]: {
-    title: "Select Dynamically",
-    hideSearchInput: true,
-    hasConfigUI: true,
-    icon: SvgIconType.UDMEntity
+    icon: SvgIconType.Search
   }
 };
 const CATEGORY_COMPONENTS = {
@@ -68,7 +62,6 @@ const CATEGORY_COMPONENTS = {
   [DropdownCategoryType.FORMULA_CONFIG]: DropdownPanelFormulaConfig,
   [DropdownCategoryType.CUSTOM]: CustomValueCategoryContent,
   [DropdownCategoryType.SELECT_FROM_UDM_DYNAMICALLY]: LookupCategoryContent,
-  [DropdownCategoryType.SELECT_FROM_COLLECTION_DYNAMICALLY]: LookupCategoryContent,
   [DropdownCategoryType.LOOKUP_OPTIONS]: RootCategoryContent
 };
 

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

@@ -0,0 +1,20 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.1.0
+ */
+'use client';
+
+import { useEffect } from 'react';
+import '../../../ui-kit/styled/popover.mjs';
+import { usePopoverContext } from '@ark-ui/react/popover';
+
+const useMountDropdownReposition = () => {
+  const context = usePopoverContext();
+  useEffect(() => {
+    context.reposition();
+  }, [context.reposition]);
+};
+
+export { useMountDropdownReposition };

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

@@ -0,0 +1,97 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.1.0
+ */
+'use client';
+
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef, useEffect, useId } from 'react';
+import { Portal } from '@ark-ui/react';
+import { Root, Positioner, Anchor, Content, Title } from '../../../ui-kit/styled/popover.mjs';
+import { useComboBox } from '../context/combobox-context.mjs';
+import '../context/combobox-dropdown-context.mjs';
+import '../context/combobox-dropdown-search.mjs';
+import { useDropdownStackContext } from '../context/combobox-dropdown-stack.mjs';
+import '@integration-app/sdk';
+import { useWindowEvent } from '../../../hooks/useWindowEvent.mjs';
+import { DropdownUI } from '../../DropdownUI/index.mjs';
+import { useOptionListKeyNavDispatch } from '../../../hooks/keyboard-events.mjs';
+import { DROPDOWN_NAVIGATOR_ID } from '../../DropdownUI/constants.mjs';
+
+const GUTTER = 10;
+const POSITIONING = {
+  placement: "bottom-start",
+  gutter: GUTTER,
+  slide: true,
+  fitViewport: true
+};
+const isStorybook = Boolean(globalThis?.__STORYBOOK_PREVIEW__);
+const storybookPortalNode = "#storybook-root";
+function DropdownPopoverProvider({
+  children
+}) {
+  const { isDropdownOpen, closeDropdown } = useComboBox();
+  return /* @__PURE__ */ jsx(
+    Root,
+    {
+      open: isDropdownOpen,
+      onEscapeKeyDown: closeDropdown,
+      closeOnInteractOutside: false,
+      unmountOnExit: true,
+      lazyMount: true,
+      portalled: true,
+      autoFocus: false,
+      positioning: POSITIONING,
+      children
+    }
+  );
+}
+function DropdownPopoverContent({
+  children
+}) {
+  const containerRef = useRef(null);
+  useEffect(() => {
+    if (isStorybook) {
+      containerRef.current = document.querySelector(storybookPortalNode);
+    }
+  }, []);
+  return /* @__PURE__ */ jsx(Portal, { container: containerRef, children: /* @__PURE__ */ jsx(Positioner, { children: /* @__PURE__ */ jsx(DeferredContent, { children }) }) });
+}
+function DropdownAnchor({ children }) {
+  return /* @__PURE__ */ jsx(Anchor, { display: "inline", children });
+}
+function DeferredContent({ children }) {
+  const id = useId();
+  const ref = useRef(null);
+  const { scopedComboboxId, closeDropdown } = useComboBox();
+  useOptionListKeyNavDispatch(ref.current, scopedComboboxId);
+  const { isClickInsideRefsAndChildren } = useDropdownStackContext(
+    ref
+  );
+  useClick((event) => {
+    if (!isClickInsideRefsAndChildren(event)) {
+      closeDropdown();
+    }
+  });
+  return /* @__PURE__ */ jsx(
+    Content,
+    {
+      ref,
+      "data-navigation-emitter-id": DROPDOWN_NAVIGATOR_ID,
+      asChild: true,
+      "aria-labelledby": id,
+      children: /* @__PURE__ */ jsx(DropdownUI, { children: /* @__PURE__ */ jsxs(DropdownUI.Content, { children: [
+        /* @__PURE__ */ jsx(Title, { srOnly: true, id, children: "Options menu" }),
+        children
+      ] }) })
+    }
+  );
+}
+function useClick(cb) {
+  useWindowEvent("mouseup", cb);
+  useWindowEvent("touchend", cb);
+}
+
+export { DropdownAnchor, DropdownPopoverContent, DropdownPopoverProvider };

package/dist/esm/components/ComboBox/Edit/OptionSelector.mjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.1.0
  */
 'use client';
 
@@ -38,7 +38,6 @@ function OptionSelector({
 }) {
   const valueRef = useRef(null);
   const fieldValueRef = useRef(null);
-  const dropdownRef = useRef(null);
   const {
     value,
     refsToIgnoreClick,
@@ -53,9 +52,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).some((el) => el.contains(e?.target));
@@ -65,21 +61,20 @@ function OptionSelector({
     }
   };
   function handleOptionSelect(option) {
-    const keepDropdownOpen = activeCategory && [
-      DropdownCategoryType.SELECT_FROM_COLLECTION_DYNAMICALLY,
-      DropdownCategoryType.SELECT_FROM_UDM_DYNAMICALLY
-    ].includes(activeCategory);
+    const keepDropdownOpen = activeCategory && [DropdownCategoryType.SELECT_FROM_UDM_DYNAMICALLY].includes(
+      activeCategory
+    );
     onChange(option);
     if (!keepDropdownOpen) {
-      handleCloseDropdown();
+      closeDropdown();
     }
   }
   const handleOnDelete = () => {
     onChange(void 0);
-    handleCloseDropdown();
+    closeDropdown();
   };
   const requiredAndEmptyField = required && isDefinedValue(value);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     FieldWrapper,
     {
       role: "combobox",
@@ -88,32 +83,27 @@ function OptionSelector({
       onClick: handleClick,
       disabled,
       requiredAndEmptyField,
-      children: [
-        /* @__PURE__ */ jsx(
-          Value,
-          {
-            ref: valueRef,
-            valueComponent,
-            placeholder,
-            disabled,
-            className,
-            onChange,
-            onDelete: handleOnDelete,
-            isEdited: isDropdownOpen
-          }
-        ),
-        isDropdownOpen && /* @__PURE__ */ jsx(
-          Dropdown,
-          {
-            ref: dropdownRef,
-            referenceElement: fieldValueRef,
-            topDropdownPanelComponent,
-            autoFocusOnSearch: true,
-            onOptionSelect: handleOptionSelect,
-            onClose: handleCloseDropdown
-          }
-        )
-      ]
+      children: /* @__PURE__ */ jsx(
+        Dropdown,
+        {
+          topDropdownPanelComponent,
+          autoFocusOnSearch: true,
+          onOptionSelect: handleOptionSelect,
+          children: /* @__PURE__ */ jsx(
+            Value,
+            {
+              ref: valueRef,
+              valueComponent,
+              placeholder,
+              disabled,
+              className,
+              onChange,
+              onDelete: handleOnDelete,
+              isEdited: isDropdownOpen
+            }
+          )
+        }
+      )
     }
   );
 }

package/dist/esm/components/ComboBox/Edit/OptionSelector.module.css.mjs

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

package/dist/esm/components/ComboBox/Edit/TextInput.mjs

@@ -2,11 +2,11 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.1.0
  */
 'use client';
 
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { isFormula, getFormula } from '@integration-app/sdk';
 import { useRef, useEffect } from 'react';
 import { getFormulas } from '../../DataBuilder/Formula/index.mjs';
@@ -34,7 +34,6 @@ function TextInput({
 }) {
   const textInputRef = useRef(null);
   const fieldValueRef = useRef(null);
-  const dropdownRef = useRef(null);
   const {
     value,
     refsToIgnoreClick,
@@ -50,7 +49,7 @@ function TextInput({
     onChange,
     onEnter: ({ editor: editor2 }) => {
       onChange(transformEditorSchemaToValue(editor2?.getJSON() ?? {}));
-      handleCloseDropdown();
+      closeDropdown();
     },
     placeholder,
     allowEditorSearchClear: searchSource === "editor"
@@ -63,9 +62,6 @@ function TextInput({
     if (disabled) return;
     openDropdown();
   }
-  function handleCloseDropdown() {
-    closeDropdown();
-  }
   const refs = [textInputRef, fieldValueRef, ...refsToIgnoreClick ?? []];
   const handleClick = function(e) {
     const isClickInsideAnyOfElements = refs.map(getRefElement).some((el) => el.contains(e?.target));
@@ -81,18 +77,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(value);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     FieldWrapper,
     {
       role: "combobox",
@@ -101,30 +97,25 @@ function TextInput({
       onClick: handleClick,
       disabled,
       requiredAndEmptyField,
-      children: [
-        /* @__PURE__ */ jsx(
-          Editor,
-          {
-            className,
-            ref: textInputRef,
-            editor,
-            onFocus: () => {
-              setSearchSource("editor");
+      children: /* @__PURE__ */ jsx(
+        Dropdown,
+        {
+          topDropdownPanelComponent,
+          onOptionSelect: handleOptionSelect,
+          autoFocusOnSearch: false,
+          children: /* @__PURE__ */ jsx(
+            Editor,
+            {
+              className,
+              ref: textInputRef,
+              editor,
+              onFocus: () => {
+                setSearchSource("editor");
+              }
             }
-          }
-        ),
-        isDropdownOpen && /* @__PURE__ */ jsx(
-          Dropdown,
-          {
-            ref: dropdownRef,
-            referenceElement: fieldValueRef,
-            topDropdownPanelComponent,
-            onOptionSelect: handleOptionSelect,
-            onClose: handleCloseDropdown,
-            autoFocusOnSearch: false
-          }
-        )
-      ]
+          )
+        }
+      )
     }
   );
 }
@@ -133,7 +124,6 @@ function shouldRewriteValue(category) {
     DropdownCategoryType.OPTIONS,
     DropdownCategoryType.CUSTOM,
     DropdownCategoryType.LOOKUP_OPTIONS,
-    DropdownCategoryType.SELECT_FROM_COLLECTION_DYNAMICALLY,
     DropdownCategoryType.SELECT_FROM_UDM_DYNAMICALLY
   ].includes(category);
 }

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

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

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

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

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

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

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

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

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

@@ -2,12 +2,12 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.1.0
  */
 'use client';
 
 import { jsx } from 'react/jsx-runtime';
-import { createContext, useState, useEffect, useContext } from 'react';
+import { createContext, useId, useState, useEffect, useContext } from 'react';
 
 const ComboBoxContext = createContext({
   value: null,
@@ -47,6 +47,7 @@ const ComboBoxProvider = ({
   topDropdownPanelComponent,
   children
 }) => {
+  const scopedComboboxId = useId();
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   useEffect(() => {
     if (autoOpen) {
@@ -69,6 +70,7 @@ const ComboBoxProvider = ({
     ComboBoxContext.Provider,
     {
       value: {
+        scopedComboboxId,
         value,
         schema,
         valueSpec,

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.1.0
  */
 'use client';
 
@@ -17,7 +17,6 @@ import { BooleanOptionsFactory } from '../options-factories/boolean.mjs';
 import { ConstantOptionFactory } from '../options-factories/constant.mjs';
 import { EnumOptionFactory } from '../options-factories/enum.mjs';
 import { ReferenceRecordsOptionsFactory } from '../options-factories/reference-records.mjs';
-import { ReferenceUdmOptionFactory } from '../options-factories/reference-udm.mjs';
 import { DropdownCategoryType } from '../types.mjs';
 import { getAvailableRootCategories, getCurrentPath, getStackForPath } from './helpers.mjs';
 import { useComboBox } from './combobox-context.mjs';
@@ -60,6 +59,27 @@ const ComboBoxDropdownContextProvider = ({
   const [availableCategories, setAvailableCategories] = useState(null);
   const [drillPath, setDrillPath] = useState([]);
   const hasVariables = variablesSchema?.type === "object" && Object.keys(variablesSchema.properties ?? {}).length > 0;
+  const recoverStack = (path, availableCategories2) => {
+    void 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);
+    });
+  };
   useEffect(() => {
     void getAvailableRootCategories({
       schema,
@@ -73,7 +93,9 @@ const ComboBoxDropdownContextProvider = ({
     }).then((categories) => {
       setAvailableCategories(categories);
       if (!isDropdownOpen) {
-        setDrillPath(getCurrentPath(categories || [], value));
+        const currentPath = getCurrentPath(categories || [], value);
+        setDrillPath(currentPath);
+        recoverStack(currentPath, categories);
       }
     });
   }, [
@@ -90,25 +112,7 @@ const ComboBoxDropdownContextProvider = ({
     if (!isDropdownOpen) {
       resetDrillDown();
     } else {
-      void 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();
@@ -212,9 +216,7 @@ async function getOptions({
   const factories = [...optionFactories];
   if (drillDownStack.length === 0) {
     factories.push(new RootOptionFactory(availableCategories));
-    if (schema?.referenceUdm) {
-      factories.unshift(new ReferenceUdmOptionFactory(schema));
-    } else if (schema?.referenceRecords) {
+    if (schema?.referenceRecords) {
       factories.push(new ReferenceRecordsOptionsFactory({ schema }));
     } else if (schema?.enum) {
       factories.push(new EnumOptionFactory({ schema }));

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

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