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

package/dist/cjs/components/ComboBox/DropdownPopover/index.cjs

@@ -0,0 +1,101 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.4-beta.0
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var react = require('@ark-ui/react');
+var popover = require('../../../ui-kit/styled/popover.cjs');
+var comboboxContext = require('../context/combobox-context.cjs');
+require('../context/combobox-dropdown-context.cjs');
+require('../context/combobox-dropdown-search.cjs');
+var comboboxDropdownStack = require('../context/combobox-dropdown-stack.cjs');
+require('@integration-app/sdk');
+var useWindowEvent = require('../../../hooks/useWindowEvent.cjs');
+var index = require('../../DropdownUI/index.cjs');
+var keyboardEvents = require('../../../hooks/keyboard-events.cjs');
+var constants = require('../../DropdownUI/constants.cjs');
+
+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 } = comboboxContext.useComboBox();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    popover.Root,
+    {
+      open: isDropdownOpen,
+      onEscapeKeyDown: closeDropdown,
+      closeOnInteractOutside: false,
+      unmountOnExit: true,
+      lazyMount: true,
+      portalled: true,
+      autoFocus: false,
+      positioning: POSITIONING,
+      children
+    }
+  );
+}
+function DropdownPopoverContent({
+  children
+}) {
+  const containerRef = React.useRef(null);
+  React.useEffect(() => {
+    if (isStorybook) {
+      containerRef.current = document.querySelector(storybookPortalNode);
+    }
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Portal, { container: containerRef, children: /* @__PURE__ */ jsxRuntime.jsx(popover.Positioner, { children: /* @__PURE__ */ jsxRuntime.jsx(DeferredContent, { children }) }) });
+}
+function DropdownAnchor({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(popover.Anchor, { display: "inline", children });
+}
+function DeferredContent({ children }) {
+  const id = React.useId();
+  const ref = React.useRef(null);
+  const { scopedComboboxId, closeDropdown } = comboboxContext.useComboBox();
+  keyboardEvents.useOptionListKeyNavDispatch(ref.current, scopedComboboxId);
+  const { isClickInsideRefsAndChildren } = comboboxDropdownStack.useDropdownStackContext(
+    ref
+  );
+  useClick((event) => {
+    if (!isClickInsideRefsAndChildren(event)) {
+      closeDropdown();
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    popover.Content,
+    {
+      ref,
+      "data-navigation-emitter-id": constants.DROPDOWN_NAVIGATOR_ID,
+      asChild: true,
+      "aria-labelledby": id,
+      children: /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI, { children: /* @__PURE__ */ jsxRuntime.jsxs(index.DropdownUI.Content, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(popover.Title, { srOnly: true, id, children: "Options menu" }),
+        children
+      ] }) })
+    }
+  );
+}
+function useClick(cb) {
+  useWindowEvent.useWindowEvent("mouseup", cb);
+  useWindowEvent.useWindowEvent("touchend", cb);
+}
+
+exports.DropdownAnchor = DropdownAnchor;
+exports.DropdownPopoverContent = DropdownPopoverContent;
+exports.DropdownPopoverProvider = DropdownPopoverProvider;

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-beta.3
+ * v2.0.4-beta.0
  */
 'use client';
 
@@ -13,24 +13,22 @@ 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');
+var types = require('../types.cjs');
 require('@integration-app/sdk');
 require('fuse');
+require('../Dropdown/categoryContentMapping.cjs');
 var clicks = require('../../ComboBoxElements/TipTapEditor/helpers/clicks.cjs');
-var index$1 = require('../../DataBuilderUI/index.cjs');
+var index = 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');
+var comboboxContext = require('../context/combobox-context.cjs');
+var comboboxDropdownContext = require('../context/combobox-dropdown-context.cjs');
+require('../Value/Formula.cjs');
+require('../Value/Schema.cjs');
+var ComboBoxValue = require('../Value/ComboBoxValue.cjs');
+var isDefinedValue = require('../Value/isDefinedValue.cjs');
+var Dropdown = require('../Dropdown/Dropdown.cjs');
 
 function OptionSelector({
   placeholder,
@@ -42,7 +40,6 @@ function OptionSelector({
 }) {
   const valueRef = React.useRef(null);
   const fieldValueRef = React.useRef(null);
-  const dropdownRef = React.useRef(null);
   const {
     value,
     refsToIgnoreClick,
@@ -52,14 +49,11 @@ function OptionSelector({
     closeDropdown,
     topDropdownPanelComponent
   } = comboboxContext.useComboBox();
-  const { activeTab } = comboboxDropdownContext.useComboBoxDropdownContext();
+  const { activeCategory } = 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));
@@ -69,21 +63,20 @@ function OptionSelector({
     }
   };
   function handleOptionSelect(option) {
-    const keepDropdownOpen = activeTab && [
-      types.ComboBoxTabType.SELECT_FROM_COLLECTION_DYNAMICALLY,
-      types.ComboBoxTabType.SELECT_FROM_UDM_DYNAMICALLY
-    ].includes(activeTab);
+    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 && Schema.isDefinedValue(value);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  const requiredAndEmptyField = required && isDefinedValue.isDefinedValue(value);
+  return /* @__PURE__ */ jsxRuntime.jsx(
     FieldWrapper.FieldWrapper,
     {
       role: "combobox",
@@ -92,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,
-            onSelect: 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
+            }
+          )
+        }
+      )
     }
   );
 }
@@ -135,7 +123,7 @@ const Value = React.forwardRef(
     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,
+        ComboBoxValue.ComboBoxValue,
         {
           className,
           placeholder,
@@ -145,14 +133,14 @@ const Value = React.forwardRef(
           isEdited
         }
       ),
-      Schema.isDefinedValue(value) && onDelete && /* @__PURE__ */ jsxRuntime.jsx(
-        index$1.ActionBar,
+      isDefinedValue.isDefinedValue(value) && onDelete && /* @__PURE__ */ jsxRuntime.jsx(
+        index.ActionBar,
         {
           className: clsx(
             OptionSelector_module.default.actionBar,
             isEdited && OptionSelector_module.default.actionBar__visible
           ),
-          children: /* @__PURE__ */ jsxRuntime.jsx(index$1.ActionBar.DeleteButton, { onClick: onDelete })
+          children: /* @__PURE__ */ jsxRuntime.jsx(index.ActionBar.DeleteButton, { onClick: onDelete })
         }
       )
     ] });

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-beta.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-beta.3
+ * v2.0.4-beta.0
  */
 'use client';
 
@@ -16,19 +16,16 @@ var getRefElement = require('../../../helpers/getRefElement.cjs');
 var types = require('../types.cjs');
 var Editor = require('../../ComboBoxElements/TipTapEditor/Editor.cjs');
 require('../../ComboBoxElements/TipTapEditor/EditorStandAlone.cjs');
-require('../../ComboBoxElements/TipTapEditor/TagComponent.cjs');
-require('../../SvgIcon/index.cjs');
 require('fuse');
+require('../Dropdown/categoryContentMapping.cjs');
 var clicks = require('../../ComboBoxElements/TipTapEditor/helpers/clicks.cjs');
 var transformEditorSchemaToValue = require('../../ComboBoxElements/TipTapEditor/helpers/transformEditorSchemaToValue.cjs');
 var comboboxContext = require('../context/combobox-context.cjs');
-var Dropdown = require('../Dropdown/Dropdown.cjs');
-require('../../DropdownUI/index.cjs');
-var comboboxDropdownSearch = require('../context/combobox-dropdown-search.cjs');
 var comboboxDropdownContext = require('../context/combobox-dropdown-context.cjs');
-require('../Dropdown/tabs.cjs');
 var FieldWrapper = require('../../ComboBoxElements/FieldWrapper.cjs');
-var Schema = require('../Value/Schema.cjs');
+var isDefinedValue = require('../Value/isDefinedValue.cjs');
+var comboboxDropdownSearch = require('../context/combobox-dropdown-search.cjs');
+var Dropdown = require('../Dropdown/Dropdown.cjs');
 
 function TextInput({
   placeholder,
@@ -39,7 +36,6 @@ function TextInput({
 }) {
   const textInputRef = React.useRef(null);
   const fieldValueRef = React.useRef(null);
-  const dropdownRef = React.useRef(null);
   const {
     value,
     refsToIgnoreClick,
@@ -55,8 +51,7 @@ function TextInput({
     onChange,
     onEnter: ({ editor: editor2 }) => {
       onChange(transformEditorSchemaToValue.transformEditorSchemaToValue(editor2?.getJSON() ?? {}));
-      resetActiveTab();
-      handleCloseDropdown();
+      closeDropdown();
     },
     placeholder,
     allowEditorSearchClear: searchSource === "editor"
@@ -64,14 +59,11 @@ function TextInput({
   React.useEffect(() => {
     editor?.setEditable(!disabled, false);
   }, [disabled, editor]);
-  const { activeTab, resetActiveTab } = comboboxDropdownContext.useComboBoxDropdownContext();
+  const { activeCategory } = comboboxDropdownContext.useComboBoxDropdownContext();
   function handleOpenDropdown() {
     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));
@@ -84,22 +76,21 @@ function TextInput({
     }
   };
   const handleOptionSelect = (variable) => {
-    if (shouldRewriteValue(activeTab)) {
+    if (shouldRewriteValue(activeCategory)) {
       onChange(variable);
-      if (shouldCloseDropdown(activeTab)) {
-        resetActiveTab();
-        handleCloseDropdown();
+      if (shouldCloseDropdown(activeCategory)) {
+        closeDropdown();
       }
     } else {
       const openTagCombobox = valueHasDropdownWithFormula(variable);
       if (openTagCombobox) {
-        handleCloseDropdown();
+        closeDropdown();
       }
       pasteTag(variable, { autoOpen: openTagCombobox });
     }
   };
-  const requiredAndEmptyField = required && Schema.isDefinedValue(value);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  const requiredAndEmptyField = required && isDefinedValue.isDefinedValue(value);
+  return /* @__PURE__ */ jsxRuntime.jsx(
     FieldWrapper.FieldWrapper,
     {
       role: "combobox",
@@ -108,48 +99,42 @@ 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,
-            onSelect: handleOptionSelect,
-            onClose: handleCloseDropdown,
-            autoFocusOnSearch: false
-          }
-        )
-      ]
+          )
+        }
+      )
     }
   );
 }
-function shouldRewriteValue(tab) {
-  return tab && [
-    types.ComboBoxTabType.OPTIONS,
-    types.ComboBoxTabType.CUSTOM,
-    types.ComboBoxTabType.LOOKUP_OPTIONS,
-    types.ComboBoxTabType.SELECT_FROM_COLLECTION_DYNAMICALLY,
-    types.ComboBoxTabType.SELECT_FROM_UDM_DYNAMICALLY
-  ].includes(tab);
+function shouldRewriteValue(category) {
+  return category && [
+    types.DropdownCategoryType.OPTIONS,
+    types.DropdownCategoryType.CUSTOM,
+    types.DropdownCategoryType.LOOKUP_OPTIONS,
+    types.DropdownCategoryType.SELECT_FROM_UDM_DYNAMICALLY
+  ].includes(category);
 }
-function shouldCloseDropdown(tab) {
-  return tab && [
-    types.ComboBoxTabType.OPTIONS,
-    types.ComboBoxTabType.CUSTOM,
-    types.ComboBoxTabType.LOOKUP_OPTIONS
-  ].includes(tab);
+function shouldCloseDropdown(category) {
+  return category && [
+    types.DropdownCategoryType.OPTIONS,
+    types.DropdownCategoryType.CUSTOM,
+    types.DropdownCategoryType.LOOKUP_OPTIONS
+  ].includes(category);
 }
 function valueHasDropdownWithFormula(value) {
   if (!sdk.isFormula(value)) return false;

package/dist/cjs/components/ComboBox/Value/{index.cjs → ComboBoxValue.cjs}

@@ -2,7 +2,7 @@
 /*
  * 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';
 
@@ -16,10 +16,11 @@ var TagPlaceholder = require('../../Tag/TagPlaceholder.cjs');
 var comboboxContext = require('../context/combobox-context.cjs');
 var Formula = require('./Formula.cjs');
 var Schema = require('./Schema.cjs');
+var isDefinedValue = require('./isDefinedValue.cjs');
 
 const ComboBoxValue = React.forwardRef(function({ placeholder, isEdited, disabled, onClick, onChange, className }, ref) {
   const { value, variablesSchema, schema, options, optionFactories } = comboboxContext.useComboBox();
-  const isValueDefined = Schema.isDefinedValue(value);
+  const isValueDefined = isDefinedValue.isDefinedValue(value);
   if (isEdited && (!isValueDefined || value === "")) {
     return /* @__PURE__ */ jsxRuntime.jsx(TagPlaceholder.TagPlaceholder, { ref, className });
   }
@@ -64,7 +65,4 @@ const ComboBoxValue = React.forwardRef(function({ placeholder, isEdited, disable
 });
 ComboBoxValue.displayName = "ComboBoxValue";
 
-exports.ComboBoxFormulaValue = Formula.ComboBoxFormulaValue;
-exports.ComboBoxSchemaValue = Schema.ComboBoxSchemaValue;
-exports.isDefinedValue = Schema.isDefinedValue;
 exports.ComboBoxValue = ComboBoxValue;

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-beta.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-beta.3
+ * v2.0.4-beta.0
  */
 'use client';
 
@@ -12,7 +12,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var ComboBoxTag = require('../../ComboBoxElements/ComboBoxTag.cjs');
-var index$1 = require('../../SvgIcon/index.cjs');
+var svgIconType = require('../../SvgIcon/svg-icon-type.cjs');
 var index = require('../../Truncate/index.cjs');
 var customField = require('../options-factories/custom-field.cjs');
 var TagPlaceholder = require('../../Tag/TagPlaceholder.cjs');
@@ -81,23 +81,20 @@ const ComboBoxSchemaValue = React.forwardRef(
   }
 );
 ComboBoxSchemaValue.displayName = "ComboBoxSchemaValue";
-function isDefinedValue(value) {
-  return value !== null && value !== void 0;
-}
 function getIconProps(schema) {
   switch (schema?.type) {
     case "string":
       return {
-        icon: index$1.SvgIconType.SchemaType_string
+        icon: svgIconType.SvgIconType.SchemaType_string
       };
     case "boolean":
       return {
-        icon: index$1.SvgIconType.SchemaType_boolean
+        icon: svgIconType.SvgIconType.SchemaType_boolean
       };
     case "number":
     case "integer":
       return {
-        icon: index$1.SvgIconType.Braces
+        icon: svgIconType.SvgIconType.Braces
       };
     default:
       return void 0;
@@ -143,4 +140,3 @@ function ReferenceCollectionValue({
 }
 
 exports.ComboBoxSchemaValue = ComboBoxSchemaValue;
-exports.isDefinedValue = isDefinedValue;

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

@@ -0,0 +1,15 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.4-beta.0
+ */
+'use client';
+
+'use strict';
+
+function isDefinedValue(value) {
+  return value !== null && value !== void 0;
+}
+
+exports.isDefinedValue = isDefinedValue;

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-beta.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,