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

package/dist/esm/components/Button/Button.mjs

@@ -0,0 +1,128 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { SvgIconType, SvgIcon } from '../SvgIcon/index.mjs';
+import { Tooltip } from '../Tooltip/index.mjs';
+import classes from './Button.module.css.mjs';
+
+function getButtonClassesByVariant(variant) {
+  switch (variant) {
+    case "ajax":
+      return classes["uikit-button--ajax"];
+    case "text":
+      return classes["uikit-button--text"];
+    case "outline":
+      return classes["uikit-button--outline"];
+    case "secondary":
+      return classes["uikit-button--secondary"];
+    case "warning":
+      return classes["uikit-button--warning"];
+    case "primary":
+    default:
+      return classes["uikit-button--primary"];
+  }
+}
+function getButtonClassesBySize(size) {
+  switch (size) {
+    case "large":
+      return classes["uikit-button--large"];
+    case "small":
+      return classes["uikit-button--small"];
+    case "medium":
+    default:
+      return classes["uikit-button--medium"];
+  }
+}
+const GenericButton = forwardRef(
+  ({ children, className, loading, tooltip, tooltipProps = {}, ...restProps }, ref) => {
+    const button = /* @__PURE__ */ jsxs(
+      "button",
+      {
+        className,
+        type: "button",
+        ...restProps,
+        ref,
+        "aria-busy": loading ? "true" : void 0,
+        children: [
+          loading && /* @__PURE__ */ jsx(ButtonSvgIcon, { type: SvgIconType.Loader }),
+          children
+        ]
+      }
+    );
+    if (tooltip) {
+      return /* @__PURE__ */ jsx(Tooltip, { tooltip, ...tooltipProps, children: button });
+    }
+    return button;
+  }
+);
+GenericButton.displayName = "GenericButton";
+const Button = forwardRef(
+  ({
+    variant = "primary",
+    size = "medium",
+    className,
+    children,
+    ...restProps
+  }, ref) => {
+    const buttonClass = clsx([
+      classes["uikit-button"],
+      getButtonClassesByVariant(variant),
+      getButtonClassesBySize(size),
+      className
+    ]);
+    return /* @__PURE__ */ jsx(GenericButton, { className: buttonClass, ...restProps, ref, children });
+  }
+);
+Button.displayName = "Button";
+const IconButton = forwardRef(
+  ({
+    children,
+    size = "medium",
+    className,
+    isActive,
+    tooltip,
+    ...restProps
+  }, ref) => {
+    const buttonIconClass = clsx([
+      classes["uikit-button"],
+      classes["uikit-button--icon"],
+      isActive && classes["uikit-button--icon__active"],
+      getButtonClassesBySize(size),
+      className
+    ]);
+    const button = /* @__PURE__ */ jsx("button", { className: buttonIconClass, ...restProps, ref, children });
+    if (tooltip) {
+      return /* @__PURE__ */ jsx(Tooltip, { tooltip, children: button });
+    }
+    return button;
+  }
+);
+function ButtonSvgIcon({
+  type,
+  className,
+  size = "normal",
+  position = "start"
+}) {
+  return /* @__PURE__ */ jsx(
+    SvgIcon,
+    {
+      type,
+      className: clsx(
+        classes.uikitButtonSvgIcon,
+        className,
+        size === "small" ? classes.uikitButtonSvgIcon_small : classes.uikitButtonSvgIcon_normal,
+        position === "end" ? classes.uikitButtonSvgIcon_end : classes.uikitButtonSvgIcon_start
+      )
+    }
+  );
+}
+
+export { Button, ButtonSvgIcon, GenericButton, IconButton };

package/dist/esm/components/Button/Button.module.css.mjs

@@ -0,0 +1,14 @@
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import styleInject from '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);
+
+export { classes as default };

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

@@ -0,0 +1,19 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { useComboBoxDropdownContext } from '../context/combobox-dropdown-context.mjs';
+import { TAB_COMPONENTS } from './tabs.mjs';
+
+function ActiveTab({ onSelect }) {
+  const { activeTab } = useComboBoxDropdownContext();
+  const ActiveTab2 = (activeTab ? TAB_COMPONENTS[activeTab] : void 0) ?? (() => /* @__PURE__ */ jsx("p", { children: "Unknown Tab" }));
+  return /* @__PURE__ */ jsx(ActiveTab2, { onSelect });
+}
+
+export { ActiveTab };

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

@@ -0,0 +1,90 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { DropdownUIPopper } from '../../ComboBoxElements/Popper.mjs';
+import { DropdownUI } from '../../DropdownUI/index.mjs';
+import { useWindowEvent } from '../../../hooks/useWindowEvent.mjs';
+import { useComboBoxDropdownContext } from '../context/combobox-dropdown-context.mjs';
+import { useDropdownStackContext, DropdownStackContextProvider } from '../context/combobox-dropdown-stack.mjs';
+import { SearchInput } from './SearchInput.mjs';
+import { ActiveTab } from './ActiveTab.mjs';
+import { renderTabs } from './tabs.mjs';
+import { TabIcon } from '../../DropdownUI/DropdownUIElements.mjs';
+
+const Dropdown = forwardRef(
+  ({
+    referenceElement,
+    topDropdownPanelComponent,
+    autoFocusOnSearch,
+    onSelect,
+    onClose
+  }, ref) => {
+    const { isClickInsideRefsAndChildren } = useDropdownStackContext(
+      ref
+    );
+    useClick((event) => {
+      if (!isClickInsideRefsAndChildren(event)) {
+        onClose();
+      }
+    });
+    useWindowEvent("keydown", (e) => {
+      e.key === "Escape" && onClose();
+    });
+    const { availableTabs } = useComboBoxDropdownContext();
+    if (availableTabs === null) {
+      return null;
+    }
+    if (availableTabs?.length < 1) {
+      return /* @__PURE__ */ jsx(DropdownStackContextProvider, { children: /* @__PURE__ */ jsx(DropdownUIPopper, { referenceElement, children: /* @__PURE__ */ jsx(DropdownUI, { ref, children: /* @__PURE__ */ jsx(DropdownUI.LoadingPanel, { children: "Loading options" }) }) }) });
+    }
+    return /* @__PURE__ */ jsx(DropdownStackContextProvider, { children: /* @__PURE__ */ jsx(DropdownUIPopper, { referenceElement, children: /* @__PURE__ */ jsxs(DropdownUI, { ref, children: [
+      /* @__PURE__ */ jsx(DropdownTabs, {}),
+      topDropdownPanelComponent && /* @__PURE__ */ jsx(Fragment, { children: topDropdownPanelComponent }),
+      /* @__PURE__ */ jsx(SearchInput, { autoFocus: autoFocusOnSearch }),
+      /* @__PURE__ */ jsx(ActiveTab, { onSelect })
+    ] }) }) });
+  }
+);
+function DropdownTabs() {
+  const { activeTab, availableTabs, setActiveTab } = useComboBoxDropdownContext();
+  if (!availableTabs || availableTabs.length === 0) return null;
+  if (availableTabs.length === 1 && hideTabIfSingle(availableTabs[0]))
+    return null;
+  return /* @__PURE__ */ jsx(DropdownUI.Tabs, { children: availableTabs.map((tab) => /* @__PURE__ */ jsx(
+    Tab,
+    {
+      selected: activeTab === tab,
+      onClick: () => setActiveTab(tab),
+      title: renderTabs[tab].title,
+      icon: renderTabs[tab]?.icon
+    },
+    tab
+  )) });
+}
+function Tab({
+  selected,
+  onClick,
+  title,
+  icon
+}) {
+  return /* @__PURE__ */ jsxs(DropdownUI.Tab, { selected, onClick, children: [
+    title,
+    icon && /* @__PURE__ */ jsx(TabIcon, { type: icon })
+  ] });
+}
+function hideTabIfSingle(tab) {
+  return !renderTabs[tab]?.showIfSingle;
+}
+function useClick(cb) {
+  useWindowEvent("mouseup", cb);
+  useWindowEvent("touchend", cb);
+}
+
+export { Dropdown, DropdownTabs };

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

@@ -0,0 +1,65 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { DropdownUI } from '../../DropdownUI/index.mjs';
+import useEventStopPropagation from '../../../hooks/useEventStopPropagation.mjs';
+import { ItemIcon, ItemChevronIcon, ItemCustomValue, ItemTitle } from '../../DropdownUI/DropdownUIElements.mjs';
+
+function ComboBoxOption({
+  option,
+  selected,
+  current = false,
+  onSelect
+}) {
+  const handleOnSelect = useEventStopPropagation(() => {
+    if (option.isSection && !option.drilldownOptionFactories) {
+      return;
+    }
+    onSelect?.();
+  });
+  const iconProps = getIconProps(option);
+  const valueProps = getValueProps(option);
+  const hasChild = !!option.drilldownOptionFactories;
+  const Component = option.isSection ? DropdownUI.HeaderItem : DropdownUI.Item;
+  return /* @__PURE__ */ jsxs(
+    Component,
+    {
+      selected,
+      active: current,
+      onClick: handleOnSelect,
+      isHighlighted: option.isHighlighted,
+      children: [
+        /* @__PURE__ */ jsx(ItemIcon, { ...iconProps }),
+        /* @__PURE__ */ jsx(OptionTitle, { ...valueProps }),
+        hasChild && /* @__PURE__ */ jsx(ItemChevronIcon, {})
+      ]
+    }
+  );
+}
+function OptionTitle({ isCustomValue, label, hint }) {
+  if (!label && !hint) {
+    return /* @__PURE__ */ jsx(Fragment, { children: "Please provide label for an option" });
+  }
+  const Component = isCustomValue ? ItemCustomValue : ItemTitle;
+  return /* @__PURE__ */ 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
+  };
+}
+
+export { ComboBoxOption as default };

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

@@ -0,0 +1,186 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState } from 'react';
+import deepEqual from 'fast-deep-equal';
+import { DropdownUI } from '../../DropdownUI/index.mjs';
+import { SvgIconType } from '../../SvgIcon/index.mjs';
+import { useDeepEffect } from '../../../hooks/useDeepEffect.mjs';
+import { useComboBoxDropdownContext } from '../context/combobox-dropdown-context.mjs';
+import { useComboBoxDropdownSearchContext } from '../context/combobox-dropdown-search.mjs';
+import { useKeyboardEventSubscribe, EVENT_TYPE } from '../../../hooks/keyboard-events.mjs';
+import ComboBoxOption from './Option.mjs';
+import useDataBuilder from '../../DataBuilder/data-builder-context.mjs';
+import useDataBuilderField from '../../DataBuilder/field-context.mjs';
+import { toSnakeCase } from 'js-convert-case';
+import { useComboBox } from '../context/combobox-context.mjs';
+import { ItemIcon, ItemTitle } from '../../DropdownUI/DropdownUIElements.mjs';
+
+function OptionsList({ onSelect }) {
+  const { onAddVariable } = useDataBuilder();
+  const { field } = useDataBuilderField();
+  const { isOptionSelected, generateOptions } = useComboBoxDropdownContext();
+  const {
+    searchValue,
+    setSearchValue,
+    drillDownDepth,
+    setDrillDownDepth,
+    searchSource
+  } = useComboBoxDropdownSearchContext();
+  const [currentOption, setCurrentOption] = useState(
+    null
+  );
+  useKeyboardEventSubscribe(EVENT_TYPE.OPTION_DOWN, makePreviousOptionCurrent);
+  useKeyboardEventSubscribe(EVENT_TYPE.OPTION_UP, makeNextOptionCurrent);
+  useKeyboardEventSubscribe(EVENT_TYPE.OPTION_SELECT, handleKeyEnter);
+  const [drilldownStack, setDrilldownStack] = useState([]);
+  const { value: parentInputValue } = useComboBox();
+  const canUseParentInputSearchValue = !searchValue && typeof parentInputValue === "string" && !!parentInputValue && drillDownDepth === 0 && searchSource === "editor";
+  const [options, optionsError, optionsState] = generateOptions(
+    canUseParentInputSearchValue ? parentInputValue : searchValue,
+    drilldownStack
+  );
+  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 || toSnakeCase(field.name) || 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__ */ jsx(DropdownList, { state: optionsState, error: optionsError, children: /* @__PURE__ */ jsx(
+    DropdownListOptions,
+    {
+      searchTerm: canUseParentInputSearchValue ? parentInputValue : void 0,
+      options,
+      currentOption,
+      isOptionSelected,
+      handleOptionSelect
+    }
+  ) });
+}
+function DropdownList({
+  state,
+  error,
+  children
+}) {
+  if (state === "rejected" || error) {
+    return /* @__PURE__ */ jsx(DropdownUI.List, { children: /* @__PURE__ */ jsxs(DropdownUI.Item, { hasError: true, children: [
+      /* @__PURE__ */ jsx(ItemIcon, { type: SvgIconType.AlertTriangle }),
+      /* @__PURE__ */ jsx(ItemTitle, { children: error?.message || "Something went wrong" })
+    ] }) });
+  }
+  if (state === "pending") {
+    return /* @__PURE__ */ jsx(DropdownUI.List, { children: /* @__PURE__ */ jsxs(DropdownUI.Item, { readonly: true, children: [
+      /* @__PURE__ */ jsx(ItemIcon, { type: SvgIconType.Loader }),
+      /* @__PURE__ */ jsx(ItemTitle, { children: "Loading" })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx(DropdownUI.List, { children });
+}
+function DropdownListOptions({
+  options,
+  currentOption,
+  isOptionSelected,
+  handleOptionSelect,
+  searchTerm
+}) {
+  if (!options) {
+    return null;
+  }
+  if (options.length === 0) {
+    return /* @__PURE__ */ jsx(DropdownUI.Item, { readonly: true, children: /* @__PURE__ */ jsxs(ItemTitle, { children: [
+      "No results found ",
+      searchTerm ? `for: ${searchTerm}` : ""
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: options.map((option, idx) => /* @__PURE__ */ jsx(
+    ComboBoxOption,
+    {
+      option,
+      selected: isOptionSelected(option),
+      current: deepEqual(option, currentOption),
+      onSelect: () => handleOptionSelect(option)
+    },
+    idx
+  )) });
+}
+
+export { OptionsList };

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

@@ -0,0 +1,56 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { DropdownUI } from '../../DropdownUI/index.mjs';
+import { useOptionListKeyNavDispatch } from '../../../hooks/keyboard-events.mjs';
+import { useComboBoxDropdownSearchContext } from '../context/combobox-dropdown-search.mjs';
+import { useComboBoxDropdownContext } from '../context/combobox-dropdown-context.mjs';
+import { renderTabs } from './tabs.mjs';
+import { useComboBox } from '../context/combobox-context.mjs';
+
+function SearchInput({ autoFocus }) {
+  const { activeTab } = useComboBoxDropdownContext();
+  const { hideSearch } = useComboBoxDropdownSearchContext();
+  if (activeTab && renderTabs[activeTab]?.hideSearchInput) {
+    return null;
+  }
+  if (hideSearch) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(DropdownSearchComponent, { autoFocus });
+}
+function DropdownSearchComponent({
+  autoFocus
+}) {
+  const { value: parentInputValue } = useComboBox();
+  const [searchInputElement, setSearchInputElement] = useState(null);
+  const {
+    searchValue,
+    setSearchValue,
+    drillDownDepth,
+    searchSource,
+    setSearchSource
+  } = useComboBoxDropdownSearchContext();
+  const canUseParentInputAsPlaceholder = !searchValue && typeof parentInputValue === "string" && !!parentInputValue && drillDownDepth === 0 && searchSource === "editor";
+  useOptionListKeyNavDispatch(searchInputElement);
+  return /* @__PURE__ */ jsx(
+    DropdownUI.Search,
+    {
+      ref: setSearchInputElement,
+      value: searchValue,
+      onChange: setSearchValue,
+      autoFocus,
+      placeholder: canUseParentInputAsPlaceholder ? parentInputValue : void 0,
+      onFocus: () => setSearchSource("combobox")
+    }
+  );
+}
+
+export { DropdownSearchComponent, SearchInput };

package/dist/esm/components/ComboBox/Dropdown/Tabs/Collections.module.css.mjs

@@ -0,0 +1,14 @@
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import styleInject from 'style-inject';
+
+var css_248z = ".Collections-module_wrapper__mUGMk {\n    max-height: 100%;\n    overflow: scroll\n}\n\n.Collections-module_createFieldSchemaForm__F3r63 {\n    --tw-bg-opacity: 1;\n    background-color: rgb(238 238 238 / var(--tw-bg-opacity));\n    display: flex;\n    flex-direction: column;\n    gap: 0.25rem\n}\n\n.Collections-module_createFieldSchemaForm__F3r63 label {\n    display: block;\n    cursor: pointer;\n    width: -moz-fit-content;\n    width: fit-content\n}\n\n.Collections-module_createFieldSchemaForm__F3r63 h3,\n.Collections-module_createFieldSchema__0uU9i h3 {\n    font-size: 0.875rem;\n    line-height: 1.4;\n    font-weight: 700;\n    margin-bottom: 0.25rem\n}\n";
+var classes = {"wrapper":"Collections-module_wrapper__mUGMk","createFieldSchemaForm":"Collections-module_createFieldSchemaForm__F3r63","createFieldSchema":"Collections-module_createFieldSchema__0uU9i"};
+styleInject(css_248z);
+
+export { classes as default };

package/dist/esm/components/ComboBox/Dropdown/Tabs/CustomValue.mjs

@@ -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';
+
+import { jsx } from 'react/jsx-runtime';
+import { DropdownUI } from '../../../DropdownUI/index.mjs';
+import { OptionsList } from '../OptionsList.mjs';
+
+function CustomValueTab({ onSelect }) {
+  return /* @__PURE__ */ jsx(DropdownUI.Panel, { children: /* @__PURE__ */ jsx(OptionsList, { onSelect }) });
+}
+
+export { CustomValueTab };

package/dist/esm/components/ComboBox/Dropdown/Tabs/Formulas/Formulas.module.css.mjs

@@ -0,0 +1,14 @@
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import styleInject from 'style-inject';
+
+var css_248z = ".Formulas-module_formulaConfig__9Ob-8 {\n}\n.Formulas-module_formulaConfig__header__9t0mE {\n  flex-shrink: 0;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  padding-left: 1rem;\n  padding-right: 0.5rem\n}\n.Formulas-module_formulaConfig__panel__Mkn2t {\n  padding: 1rem;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem\n}\n.Formulas-module_formulaConfig__panelContent__yima9 {\n  min-height: 0px;\n  flex: 1 1 0%;\n  overflow-x: auto;\n  width: min(30rem, 70vw)\n}\n.Formulas-module_formulaConfig__footer__7OO-A {\n  flex-shrink: 0;\n  flex-direction: row;\n  align-items: flex-start;\n  --tw-bg-opacity: 1;\n  background-color: rgb(238 238 238 / var(--tw-bg-opacity));\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  padding-left: 1rem;\n  padding-right: 0.5rem\n}\n";
+var classes = {"formulaConfig":"Formulas-module_formulaConfig__9Ob-8","formulaConfig__header":"Formulas-module_formulaConfig__header__9t0mE","formulaConfig__panel":"Formulas-module_formulaConfig__panel__Mkn2t","formulaConfig__panelContent":"Formulas-module_formulaConfig__panelContent__yima9","formulaConfig__footer":"Formulas-module_formulaConfig__footer__7OO-A"};
+styleInject(css_248z);
+
+export { classes as default };