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

package/dist/cjs/_modules/awesome-debounce-promise.cjs

@@ -0,0 +1,20 @@
+"use strict";
+/*
+ * 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 AwesomeDebouncePromiseImport = require('awesome-debounce-promise');
+
+const AwesomeDebouncePromise = (
+  // @ts-ignore
+  AwesomeDebouncePromiseImport?.default ?? AwesomeDebouncePromiseImport
+);
+
+exports.default = AwesomeDebouncePromise;

package/dist/cjs/_modules/react-use-promise.cjs

@@ -0,0 +1,17 @@
+"use strict";
+/*
+ * 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 usePromiseImport = require('react-use-promise');
+
+const usePromise = usePromiseImport?.default ?? usePromiseImport;
+
+exports.default = usePromise;

package/dist/cjs/components/AdvancedOptions.cjs

@@ -0,0 +1,49 @@
+"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 Button = require('./Button/Button.cjs');
+var React = require('react');
+
+function AdvancedOptions({
+  title = "advanced options",
+  openByDefault = false,
+  children
+}) {
+  const [showAdvancedOptions, setShowAdvancedOptions] = React.useState(openByDefault);
+  return showAdvancedOptions ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      Button.Button,
+      {
+        variant: "ajax",
+        onClick: () => setShowAdvancedOptions(false),
+        className: "-ml-6 self-start",
+        children: [
+          "Hide ",
+          title
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children })
+  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(
+    Button.Button,
+    {
+      variant: "ajax",
+      onClick: () => setShowAdvancedOptions(true),
+      className: "-ml-6 self-start",
+      children: [
+        "Show ",
+        title
+      ]
+    }
+  );
+}
+
+exports.AdvancedOptions = AdvancedOptions;

package/dist/cjs/components/Button/Button.cjs

@@ -0,0 +1,133 @@
+"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 clsx = require('clsx');
+var index = require('../SvgIcon/index.cjs');
+var index$1 = require('../Tooltip/index.cjs');
+var Button_module = require('./Button.module.css.cjs');
+
+function getButtonClassesByVariant(variant) {
+  switch (variant) {
+    case "ajax":
+      return Button_module.default["uikit-button--ajax"];
+    case "text":
+      return Button_module.default["uikit-button--text"];
+    case "outline":
+      return Button_module.default["uikit-button--outline"];
+    case "secondary":
+      return Button_module.default["uikit-button--secondary"];
+    case "warning":
+      return Button_module.default["uikit-button--warning"];
+    case "primary":
+    default:
+      return Button_module.default["uikit-button--primary"];
+  }
+}
+function getButtonClassesBySize(size) {
+  switch (size) {
+    case "large":
+      return Button_module.default["uikit-button--large"];
+    case "small":
+      return Button_module.default["uikit-button--small"];
+    case "medium":
+    default:
+      return Button_module.default["uikit-button--medium"];
+  }
+}
+const GenericButton = React.forwardRef(
+  ({ children, className, loading, tooltip, tooltipProps = {}, ...restProps }, ref) => {
+    const button = /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        className,
+        type: "button",
+        ...restProps,
+        ref,
+        "aria-busy": loading ? "true" : void 0,
+        children: [
+          loading && /* @__PURE__ */ jsxRuntime.jsx(ButtonSvgIcon, { type: index.SvgIconType.Loader }),
+          children
+        ]
+      }
+    );
+    if (tooltip) {
+      return /* @__PURE__ */ jsxRuntime.jsx(index$1.Tooltip, { tooltip, ...tooltipProps, children: button });
+    }
+    return button;
+  }
+);
+GenericButton.displayName = "GenericButton";
+const Button = React.forwardRef(
+  ({
+    variant = "primary",
+    size = "medium",
+    className,
+    children,
+    ...restProps
+  }, ref) => {
+    const buttonClass = clsx([
+      Button_module.default["uikit-button"],
+      getButtonClassesByVariant(variant),
+      getButtonClassesBySize(size),
+      className
+    ]);
+    return /* @__PURE__ */ jsxRuntime.jsx(GenericButton, { className: buttonClass, ...restProps, ref, children });
+  }
+);
+Button.displayName = "Button";
+const IconButton = React.forwardRef(
+  ({
+    children,
+    size = "medium",
+    className,
+    isActive,
+    tooltip,
+    ...restProps
+  }, ref) => {
+    const buttonIconClass = clsx([
+      Button_module.default["uikit-button"],
+      Button_module.default["uikit-button--icon"],
+      isActive && Button_module.default["uikit-button--icon__active"],
+      getButtonClassesBySize(size),
+      className
+    ]);
+    const button = /* @__PURE__ */ jsxRuntime.jsx("button", { className: buttonIconClass, ...restProps, ref, children });
+    if (tooltip) {
+      return /* @__PURE__ */ jsxRuntime.jsx(index$1.Tooltip, { tooltip, children: button });
+    }
+    return button;
+  }
+);
+function ButtonSvgIcon({
+  type,
+  className,
+  size = "normal",
+  position = "start"
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index.SvgIcon,
+    {
+      type,
+      className: clsx(
+        Button_module.default.uikitButtonSvgIcon,
+        className,
+        size === "small" ? Button_module.default.uikitButtonSvgIcon_small : Button_module.default.uikitButtonSvgIcon_normal,
+        position === "end" ? Button_module.default.uikitButtonSvgIcon_end : Button_module.default.uikitButtonSvgIcon_start
+      )
+    }
+  );
+}
+
+exports.Button = Button;
+exports.ButtonSvgIcon = ButtonSvgIcon;
+exports.GenericButton = GenericButton;
+exports.IconButton = IconButton;

package/dist/cjs/components/Button/Button.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 = ".Button-module_container__jA0Sz {\n  width: 100%\n}\n@media (min-width: 640px) {\n  .Button-module_container__jA0Sz {\n    max-width: 640px\n  }\n}\n@media (min-width: 768px) {\n  .Button-module_container__jA0Sz {\n    max-width: 768px\n  }\n}\n@media (min-width: 1024px) {\n  .Button-module_container__jA0Sz {\n    max-width: 1024px\n  }\n}\n@media (min-width: 1280px) {\n  .Button-module_container__jA0Sz {\n    max-width: 1280px\n  }\n}\n@media (min-width: 1536px) {\n  .Button-module_container__jA0Sz {\n    max-width: 1536px\n  }\n}\n@layer elements {\n  .Button-module_uikit-button__AuMtw {\n    border-width: 1px;\n    --tw-border-opacity: 1;\n    border-color: rgb(221 221 221 / var(--tw-border-opacity));\n    --tw-bg-opacity: 1;\n    background-color: rgb(248 248 248 / var(--tw-bg-opacity));\n    border-radius: 0.25rem;\n    padding-left: 1rem;\n    padding-right: 1rem;\n    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;\n    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: 100ms;\n    height: 2.25rem\n  }\n@layer elements {\n  .Button-module_uikit-button__AuMtw {\n      height: 2.25rem;\n      padding-left: 1.5rem;\n      padding-right: 1.5rem;\n    line-height: 2rem /* h-8 */\n    }\n}\n  .Button-module_uikit-button__AuMtw {\n    display: inline-flex;\n    align-items: center;\n    white-space: nowrap;\n    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;\n    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: 200ms\n  }\n\n  .Button-module_uikit-button__AuMtw:disabled {\n    cursor: default\n  }\n\n  .Button-module_uikit-button__AuMtw svg:not(.Button-module_uikitButtonSvgIcon__Y-4HV) {\n    margin-right: 0.375rem;\n    margin-left: -0.25rem;\n    display: inline;\n    height: 1.25rem;\n    width: 1.25rem;\n    vertical-align: middle\n  }\n\n  /* ### SIZE ### */\n  .Button-module_uikit-button--large__9cQ-5 {\n    height: 2.5rem;\n    padding-left: 1.5rem;\n    padding-right: 1.5rem;\n    line-height: 2.25rem /* h-9 */\n  }\n  .Button-module_uikit-button--large__9cQ-5 svg:not(.Button-module_uikitButtonSvgIcon__Y-4HV) {\n    margin-left: -0.375rem;\n    margin-right: 0.5rem\n  }\n  .Button-module_uikit-button--medium__P5rpZ {\n    height: 2.25rem;\n    padding-left: 1.5rem;\n    padding-right: 1.5rem;\n    line-height: 2rem /* h-8 */\n  }\n\n  .Button-module_uikit-button--small__5L5Ch {\n    height: 1.75rem;\n    padding-left: 1rem;\n    padding-right: 1rem;\n    line-height: 1.75rem /* h-7 */\n  }\n\n  /* ### TYPE ### */\n\n  .Button-module_uikit-button--primary__BsMcw {\n    --tw-text-opacity: 1;\n    color: rgb(255 255 255 / var(--tw-text-opacity));\n    border-width: 1px;\n    --tw-border-opacity: 1;\n    border-color: rgb(25 25 25 / var(--tw-border-opacity));\n    --tw-bg-opacity: 1;\n    background-color: rgb(34 34 34 / var(--tw-bg-opacity))\n  }\n  .Button-module_uikit-button--primary__BsMcw:disabled {\n    border-width: 1px;\n    --tw-border-opacity: 1;\n    border-color: rgb(105 105 105 / var(--tw-border-opacity));\n    --tw-bg-opacity: 1;\n    background-color: rgb(105 105 105 / var(--tw-bg-opacity))\n  }\n  .Button-module_uikit-button--primary__BsMcw:not(:disabled):hover {\n    --tw-border-opacity: 1;\n    border-color: rgb(15 76 117 / var(--tw-border-opacity));\n    --tw-bg-opacity: 1;\n    background-color: rgb(15 76 117 / var(--tw-bg-opacity))\n  }\n\n  .Button-module_uikit-button--secondary__ENap8 {\n    border-width: 1px;\n    --tw-border-opacity: 1;\n    border-color: rgb(221 221 221 / var(--tw-border-opacity));\n    --tw-text-opacity: 1;\n    color: rgb(0 0 0 / var(--tw-text-opacity));\n    --tw-bg-opacity: 1;\n    background-color: rgb(248 248 248 / var(--tw-bg-opacity))\n  }\n  .Button-module_uikit-button--secondary__ENap8:disabled {\n    --tw-text-opacity: 1;\n    color: rgb(170 170 170 / var(--tw-text-opacity))\n  }\n  .Button-module_uikit-button--secondary__ENap8:not(:disabled):hover {\n    --tw-bg-opacity: 1;\n    background-color: rgb(238 238 238 / var(--tw-bg-opacity))\n  }\n\n  .Button-module_uikit-button--warning__B0a1y {\n    --tw-bg-opacity: 1;\n    background-color: rgb(239 68 68 / var(--tw-bg-opacity));\n    --tw-text-opacity: 1;\n    color: rgb(255 255 255 / var(--tw-text-opacity));\n    border-color: rgb(185 28 28 / var(--tw-border-opacity));\n    --tw-border-opacity: 0.5\n  }\n  .Button-module_uikit-button--warning__B0a1y:disabled {\n    background-color: rgb(248 113 113 / var(--tw-bg-opacity));\n    --tw-bg-opacity: 0.8;\n    border-color: rgb(248 113 113 / var(--tw-border-opacity));\n    --tw-border-opacity: 0.1;\n    --tw-text-opacity: 1;\n    color: rgb(254 226 226 / var(--tw-text-opacity))\n  }\n  .Button-module_uikit-button--warning__B0a1y:not(:disabled):hover {\n    --tw-border-opacity: 1;\n    --tw-bg-opacity: 1;\n    background-color: rgb(220 38 38 / var(--tw-bg-opacity))\n  }\n\n  .Button-module_uikit-button--outline__lESp6 {\n    border-width: 1px;\n    --tw-border-opacity: 1;\n    border-color: rgb(221 221 221 / var(--tw-border-opacity));\n    --tw-bg-opacity: 1;\n    background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n    --tw-text-opacity: 1;\n    color: rgb(0 0 0 / var(--tw-text-opacity))\n  }\n  .Button-module_uikit-button--outline__lESp6:disabled {\n    --tw-text-opacity: 1;\n    color: rgb(170 170 170 / var(--tw-text-opacity))\n  }\n  .Button-module_uikit-button--outline__lESp6:not(:disabled):hover {\n    --tw-border-opacity: 1;\n    border-color: rgb(170 170 170 / var(--tw-border-opacity));\n    --tw-bg-opacity: 1;\n    background-color: rgb(248 248 248 / var(--tw-bg-opacity))\n  }\n\n  .Button-module_uikit-button--text__JPp9w {\n    border-style: none !important;\n    background-color: transparent\n  }\n  .Button-module_uikit-button--text__JPp9w:disabled {\n    --tw-text-opacity: 1;\n    color: rgb(170 170 170 / var(--tw-text-opacity))\n  }\n  .Button-module_uikit-button--text__JPp9w:not(:disabled):hover {\n    --tw-bg-opacity: 1;\n    background-color: rgb(248 248 248 / var(--tw-bg-opacity))\n  }\n\n  .Button-module_uikit-button--ajax__Kl1-1 {\n    border-style: none !important;\n    background-color: transparent;\n    --tw-text-opacity: 1;\n    color: rgb(13 121 194 / var(--tw-text-opacity));\n    text-decoration-line: underline;\n    text-decoration-style: dashed;\n    text-decoration-thickness: 0.05rem;\n    text-underline-offset: 0.15rem\n  }\n  .Button-module_uikit-button--ajax__Kl1-1:disabled {\n    --tw-text-opacity: 1;\n    color: rgb(170 170 170 / var(--tw-text-opacity))\n  }\n  .Button-module_uikit-button--ajax__Kl1-1:not(:disabled):hover {\n    --tw-text-opacity: 1;\n    color: rgb(15 76 117 / var(--tw-text-opacity));\n    text-decoration-style: solid\n  }\n\n  .Button-module_uikit-button--icon__0ouUU {\n    height: 1.5rem;\n    width: 1.5rem;\n    align-items: center;\n    justify-content: center;\n    padding: 0px;\n    --tw-text-opacity: 1;\n    color: rgb(105 105 105 / var(--tw-text-opacity))\n  }\n  .Button-module_uikit-button--icon__0ouUU:disabled {\n    --tw-text-opacity: 1;\n    color: rgb(170 170 170 / var(--tw-text-opacity))\n  }\n  .Button-module_uikit-button--icon__0ouUU:not(:disabled):hover,\n  .Button-module_uikit-button--icon__active__hWz2W {\n    --tw-text-opacity: 1;\n    color: rgb(0 0 0 / var(--tw-text-opacity))\n  }\n  .Button-module_uikit-button__AuMtw.Button-module_uikit-button--icon__0ouUU {\n    border-width: 0px;\n    background-color: transparent\n  }\n  .Button-module_uikit-button__AuMtw.Button-module_uikit-button--icon__0ouUU svg {\n    margin: 0px;\n    height: 1.25rem;\n    width: 1.25rem;\n    stroke: currentColor\n  }\n\n  .Button-module_uikit-button--small__5L5Ch.Button-module_uikit-button--icon__0ouUU {\n    height: 1.25rem;\n    width: 1.25rem\n  }\n  .Button-module_uikit-button--small__5L5Ch.Button-module_uikit-button--icon__0ouUU svg {\n    height: 1rem;\n    width: 1rem\n  }\n\n  .Button-module_uikit-button--large__9cQ-5.Button-module_uikit-button--icon__0ouUU {\n    height: 1.75rem;\n    width: 1.75rem\n  }\n  .Button-module_uikit-button--large__9cQ-5.Button-module_uikit-button--icon__0ouUU svg {\n    height: 1.5rem;\n    width: 1.5rem\n  }\n\n  /* Hide icon goes after loader icon */\n  .Button-module_uikit-button__AuMtw[aria-busy='true'] svg + svg {\n    display: none\n  }\n\n  .Button-module_uikitButtonSvgIcon__Y-4HV {\n    display: inline;\n    vertical-align: middle\n  }\n  .Button-module_uikitButtonSvgIcon_normal__KfS3A {\n    height: 1.25rem;\n    width: 1.25rem\n  }\n  .Button-module_uikitButtonSvgIcon_small__A9XQR {\n    margin-top: 0.125rem;\n    height: 1rem;\n    width: 1rem\n  }\n  .Button-module_uikitButtonSvgIcon_start__rgkNm {\n    margin-right: 0.375rem;\n    margin-left: -0.25rem\n  }\n  .Button-module_uikitButtonSvgIcon_end__ZyJvx {\n    margin-left: 0.375rem;\n    margin-right: -0.25rem\n  }\n\n  .Button-module_uikitButtonSvgIcon_small__A9XQR.Button-module_uikitButtonSvgIcon_end__ZyJvx {\n    margin-left: 0.25rem;\n    margin-right: -0.375rem\n  }\n}\n";
+var classes = {"container":"Button-module_container__jA0Sz","uikit-button":"Button-module_uikit-button__AuMtw","uikitButtonSvgIcon":"Button-module_uikitButtonSvgIcon__Y-4HV","uikit-button--large":"Button-module_uikit-button--large__9cQ-5","uikit-button--medium":"Button-module_uikit-button--medium__P5rpZ","uikit-button--small":"Button-module_uikit-button--small__5L5Ch","uikit-button--primary":"Button-module_uikit-button--primary__BsMcw","uikit-button--secondary":"Button-module_uikit-button--secondary__ENap8","uikit-button--warning":"Button-module_uikit-button--warning__B0a1y","uikit-button--outline":"Button-module_uikit-button--outline__lESp6","uikit-button--text":"Button-module_uikit-button--text__JPp9w","uikit-button--ajax":"Button-module_uikit-button--ajax__Kl1-1","uikit-button--icon":"Button-module_uikit-button--icon__0ouUU","uikit-button--icon__active":"Button-module_uikit-button--icon__active__hWz2W","uikitButtonSvgIcon_normal":"Button-module_uikitButtonSvgIcon_normal__KfS3A","uikitButtonSvgIcon_small":"Button-module_uikitButtonSvgIcon_small__A9XQR","uikitButtonSvgIcon_start":"Button-module_uikitButtonSvgIcon_start__rgkNm","uikitButtonSvgIcon_end":"Button-module_uikitButtonSvgIcon_end__ZyJvx"};
+styleInject(css_248z);
+
+exports.default = classes;

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

@@ -0,0 +1,21 @@
+"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 comboboxDropdownContext = require('../context/combobox-dropdown-context.cjs');
+var tabs = require('./tabs.cjs');
+
+function ActiveTab({ onSelect }) {
+  const { activeTab } = comboboxDropdownContext.useComboBoxDropdownContext();
+  const ActiveTab2 = (activeTab ? tabs.TAB_COMPONENTS[activeTab] : void 0) ?? (() => /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Unknown Tab" }));
+  return /* @__PURE__ */ jsxRuntime.jsx(ActiveTab2, { onSelect });
+}
+
+exports.ActiveTab = ActiveTab;

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

@@ -0,0 +1,93 @@
+"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 Popper = require('../../ComboBoxElements/Popper.cjs');
+var index = require('../../DropdownUI/index.cjs');
+var useWindowEvent = require('../../../hooks/useWindowEvent.cjs');
+var comboboxDropdownContext = require('../context/combobox-dropdown-context.cjs');
+var comboboxDropdownStack = require('../context/combobox-dropdown-stack.cjs');
+var SearchInput = require('./SearchInput.cjs');
+var ActiveTab = require('./ActiveTab.cjs');
+var tabs = require('./tabs.cjs');
+var DropdownUIElements = require('../../DropdownUI/DropdownUIElements.cjs');
+
+const Dropdown = React.forwardRef(
+  ({
+    referenceElement,
+    topDropdownPanelComponent,
+    autoFocusOnSearch,
+    onSelect,
+    onClose
+  }, ref) => {
+    const { isClickInsideRefsAndChildren } = comboboxDropdownStack.useDropdownStackContext(
+      ref
+    );
+    useClick((event) => {
+      if (!isClickInsideRefsAndChildren(event)) {
+        onClose();
+      }
+    });
+    useWindowEvent.useWindowEvent("keydown", (e) => {
+      e.key === "Escape" && onClose();
+    });
+    const { availableTabs } = comboboxDropdownContext.useComboBoxDropdownContext();
+    if (availableTabs === null) {
+      return null;
+    }
+    if (availableTabs?.length < 1) {
+      return /* @__PURE__ */ jsxRuntime.jsx(comboboxDropdownStack.DropdownStackContextProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(Popper.DropdownUIPopper, { referenceElement, children: /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI, { ref, children: /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.LoadingPanel, { children: "Loading options" }) }) }) });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(comboboxDropdownStack.DropdownStackContextProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(Popper.DropdownUIPopper, { referenceElement, children: /* @__PURE__ */ jsxRuntime.jsxs(index.DropdownUI, { ref, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DropdownTabs, {}),
+      topDropdownPanelComponent && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: topDropdownPanelComponent }),
+      /* @__PURE__ */ jsxRuntime.jsx(SearchInput.SearchInput, { autoFocus: autoFocusOnSearch }),
+      /* @__PURE__ */ jsxRuntime.jsx(ActiveTab.ActiveTab, { onSelect })
+    ] }) }) });
+  }
+);
+function DropdownTabs() {
+  const { activeTab, availableTabs, setActiveTab } = comboboxDropdownContext.useComboBoxDropdownContext();
+  if (!availableTabs || availableTabs.length === 0) return null;
+  if (availableTabs.length === 1 && hideTabIfSingle(availableTabs[0]))
+    return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.Tabs, { children: availableTabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
+    Tab,
+    {
+      selected: activeTab === tab,
+      onClick: () => setActiveTab(tab),
+      title: tabs.renderTabs[tab].title,
+      icon: tabs.renderTabs[tab]?.icon
+    },
+    tab
+  )) });
+}
+function Tab({
+  selected,
+  onClick,
+  title,
+  icon
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(index.DropdownUI.Tab, { selected, onClick, children: [
+    title,
+    icon && /* @__PURE__ */ jsxRuntime.jsx(DropdownUIElements.TabIcon, { type: icon })
+  ] });
+}
+function hideTabIfSingle(tab) {
+  return !tabs.renderTabs[tab]?.showIfSingle;
+}
+function useClick(cb) {
+  useWindowEvent.useWindowEvent("mouseup", cb);
+  useWindowEvent.useWindowEvent("touchend", cb);
+}
+
+exports.Dropdown = Dropdown;
+exports.DropdownTabs = DropdownTabs;

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

@@ -0,0 +1,69 @@
+"use strict";
+/*
+ * 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 jsxRuntime = require('react/jsx-runtime');
+var index = require('../../DropdownUI/index.cjs');
+var useEventStopPropagation = require('../../../hooks/useEventStopPropagation.cjs');
+var DropdownUIElements = require('../../DropdownUI/DropdownUIElements.cjs');
+
+function ComboBoxOption({
+  option,
+  selected,
+  current = false,
+  onSelect
+}) {
+  const handleOnSelect = useEventStopPropagation.default(() => {
+    if (option.isSection && !option.drilldownOptionFactories) {
+      return;
+    }
+    onSelect?.();
+  });
+  const iconProps = getIconProps(option);
+  const valueProps = getValueProps(option);
+  const hasChild = !!option.drilldownOptionFactories;
+  const Component = option.isSection ? index.DropdownUI.HeaderItem : index.DropdownUI.Item;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Component,
+    {
+      selected,
+      active: current,
+      onClick: handleOnSelect,
+      isHighlighted: option.isHighlighted,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(DropdownUIElements.ItemIcon, { ...iconProps }),
+        /* @__PURE__ */ jsxRuntime.jsx(OptionTitle, { ...valueProps }),
+        hasChild && /* @__PURE__ */ jsxRuntime.jsx(DropdownUIElements.ItemChevronIcon, {})
+      ]
+    }
+  );
+}
+function OptionTitle({ isCustomValue, label, hint }) {
+  if (!label && !hint) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: "Please provide label for an option" });
+  }
+  const Component = isCustomValue ? DropdownUIElements.ItemCustomValue : DropdownUIElements.ItemTitle;
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { hint, children: label });
+}
+function getIconProps(option) {
+  const { iconType: type, iconUri: src } = option;
+  return { type, src };
+}
+function getValueProps(option) {
+  const { label, hint, isCustomValue } = option;
+  return {
+    label: label ? label : hint,
+    hint: label ? hint : void 0,
+    isCustomValue
+  };
+}
+
+exports.default = ComboBoxOption;

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

@@ -0,0 +1,188 @@
+"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 deepEqual = require('fast-deep-equal');
+var index = require('../../DropdownUI/index.cjs');
+var index$1 = require('../../SvgIcon/index.cjs');
+var useDeepEffect = require('../../../hooks/useDeepEffect.cjs');
+var comboboxDropdownContext = require('../context/combobox-dropdown-context.cjs');
+var comboboxDropdownSearch = require('../context/combobox-dropdown-search.cjs');
+var keyboardEvents = require('../../../hooks/keyboard-events.cjs');
+var Option = require('./Option.cjs');
+var dataBuilderContext = require('../../DataBuilder/data-builder-context.cjs');
+var fieldContext = require('../../DataBuilder/field-context.cjs');
+var jsConvertCase = require('js-convert-case');
+var comboboxContext = require('../context/combobox-context.cjs');
+var DropdownUIElements = require('../../DropdownUI/DropdownUIElements.cjs');
+
+function OptionsList({ onSelect }) {
+  const { onAddVariable } = dataBuilderContext.default();
+  const { field } = fieldContext.default();
+  const { isOptionSelected, generateOptions } = comboboxDropdownContext.useComboBoxDropdownContext();
+  const {
+    searchValue,
+    setSearchValue,
+    drillDownDepth,
+    setDrillDownDepth,
+    searchSource
+  } = comboboxDropdownSearch.useComboBoxDropdownSearchContext();
+  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);
+  const [drilldownStack, setDrilldownStack] = React.useState([]);
+  const { value: parentInputValue } = comboboxContext.useComboBox();
+  const canUseParentInputSearchValue = !searchValue && typeof parentInputValue === "string" && !!parentInputValue && drillDownDepth === 0 && searchSource === "editor";
+  const [options, optionsError, optionsState] = generateOptions(
+    canUseParentInputSearchValue ? parentInputValue : searchValue,
+    drilldownStack
+  );
+  useDeepEffect.useDeepEffect(() => {
+    if (!options?.length) {
+      return;
+    }
+    if (!currentOption || getOptionIndex(currentOption) == -1) {
+      const selectedOption = options.find(isOptionSelected);
+      if (selectedOption) {
+        setCurrentOption(selectedOption);
+      }
+    }
+  }, [options]);
+  function drillDown(option) {
+    setSearchValue("");
+    const newStack = [...drilldownStack, option];
+    setDrilldownStack(newStack);
+    setDrillDownDepth(newStack.length);
+  }
+  function drillUp() {
+    const newStack = drilldownStack.slice(0, drilldownStack.length - 2);
+    setDrilldownStack(newStack);
+    setDrillDownDepth(newStack.length);
+  }
+  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) {
+    if (option.addVariable) {
+      const objectLocator = option.addVariable;
+      const variableLocator = `${objectLocator}.${field.key || jsConvertCase.toSnakeCase(field.name) || jsConvertCase.toSnakeCase(field?.schema?.title)}`;
+      onAddVariable?.(variableLocator, field.schema ?? {});
+      onSelect({
+        $var: variableLocator
+      });
+    } else if (option.drilldownOptionFactories) {
+      drillDown(option);
+    } else if (option.drillup) {
+      drillUp();
+    } else {
+      onSelect(option.value);
+    }
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(DropdownList, { state: optionsState, error: optionsError, children: /* @__PURE__ */ jsxRuntime.jsx(
+    DropdownListOptions,
+    {
+      searchTerm: canUseParentInputSearchValue ? parentInputValue : void 0,
+      options,
+      currentOption,
+      isOptionSelected,
+      handleOptionSelect
+    }
+  ) });
+}
+function DropdownList({
+  state,
+  error,
+  children
+}) {
+  if (state === "rejected" || error) {
+    return /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.List, { children: /* @__PURE__ */ jsxRuntime.jsxs(index.DropdownUI.Item, { hasError: true, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DropdownUIElements.ItemIcon, { type: index$1.SvgIconType.AlertTriangle }),
+      /* @__PURE__ */ jsxRuntime.jsx(DropdownUIElements.ItemTitle, { children: error?.message || "Something went wrong" })
+    ] }) });
+  }
+  if (state === "pending") {
+    return /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.List, { children: /* @__PURE__ */ jsxRuntime.jsxs(index.DropdownUI.Item, { readonly: true, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DropdownUIElements.ItemIcon, { type: index$1.SvgIconType.Loader }),
+      /* @__PURE__ */ jsxRuntime.jsx(DropdownUIElements.ItemTitle, { children: "Loading" })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.List, { children });
+}
+function DropdownListOptions({
+  options,
+  currentOption,
+  isOptionSelected,
+  handleOptionSelect,
+  searchTerm
+}) {
+  if (!options) {
+    return null;
+  }
+  if (options.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.Item, { readonly: true, children: /* @__PURE__ */ jsxRuntime.jsxs(DropdownUIElements.ItemTitle, { children: [
+      "No results found ",
+      searchTerm ? `for: ${searchTerm}` : ""
+    ] }) });
+  }
+  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.OptionsList = OptionsList;