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

package/dist/cjs/components/ComboBox/Dropdown/Categories/LookupOptions/ParametersPanel.cjs

@@ -0,0 +1,147 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var jsConvertCase = require('js-convert-case');
+var clsx = require('clsx');
+var index = require('../../../../DataBuilder/index.cjs');
+var Form = require('../../../../DataBuilder/Form.cjs');
+var svgIconType = require('../../../../SvgIcon/svg-icon-type.cjs');
+var UiComponents = require('./UiComponents.cjs');
+require('../../../../../styled-system/css/css.cjs');
+require('../../../../../styled-system/helpers.cjs');
+var sva = require('../../../../../styled-system/css/sva.cjs');
+require('../../../../../styled-system/jsx/is-valid-prop.cjs');
+var flex = require('../../../../../styled-system/jsx/flex.cjs');
+require('../../../../../styled-system/patterns/visually-hidden.cjs');
+var button = require('../../../../../ui-kit/button.cjs');
+var icon = require('../../../../../ui-kit/styled/icon.cjs');
+var index$1 = require('../../../../SvgIcon/index.cjs');
+
+const parametersConfigRecipe = sva.sva({
+  className: "lookup-parameters-config",
+  slots: ["container", "save-button"],
+  base: {
+    container: {
+      flexDir: "column",
+      p: "1.5",
+      pb: "2.5",
+      gap: "2"
+    },
+    "save-button": {
+      w: "fit-content",
+      h: "fit-content",
+      rounded: "xl",
+      color: "slate.11",
+      px: "2",
+      py: "1"
+    }
+  }
+});
+function ParametersPanel({
+  onChange,
+  schema,
+  value,
+  className
+}) {
+  const parametersProvided = isParametersProvided(value);
+  const [isEditing, setIsEditing] = React.useState(!parametersProvided);
+  const { container } = parametersConfigRecipe();
+  function isParametersProvided(object) {
+    return !!Object.keys(object).length;
+  }
+  function toggleIsEditing() {
+    setIsEditing(!isEditing);
+  }
+  function handleOnClose() {
+    setIsEditing(false);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(flex.Flex, { className: clsx(container, className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      UiComponents.PanelHeader,
+      {
+        title: "Parameters",
+        actions: /* @__PURE__ */ jsxRuntime.jsx(
+          EditParametersButton,
+          {
+            onClick: toggleIsEditing,
+            isEditing
+          }
+        )
+      }
+    ),
+    isEditing ? /* @__PURE__ */ jsxRuntime.jsx(
+      ParametersPanelForm,
+      {
+        onChange,
+        onClose: handleOnClose,
+        schema,
+        value
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(ParametersPanelView, { schema, value })
+  ] });
+}
+function ParametersPanelForm({
+  onClose,
+  onChange,
+  schema,
+  value
+}) {
+  const styles = parametersConfigRecipe();
+  const field = index.makeDataField({
+    schema,
+    value
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Form.DataBuilderForm, { field, onChange }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      button.Button,
+      {
+        onClick: onClose,
+        variant: "outline",
+        colorPalette: "gray",
+        size: "sm",
+        className: styles["save-button"],
+        children: "Save and Close"
+      }
+    )
+  ] });
+}
+function ParametersPanelView({
+  schema,
+  value
+}) {
+  const parameters = Object.entries(schema?.properties ?? {}).map(
+    ([key, field]) => {
+      return {
+        title: field?.title || jsConvertCase.toHeaderCase(key),
+        value: value?.[key]
+      };
+    }
+  );
+  if (!parameters.length) {
+    return /* @__PURE__ */ jsxRuntime.jsx(UiComponents.NoParameters, {});
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(UiComponents.ParametersList, { children: parameters.map(({ title, value: value2 }, i) => /* @__PURE__ */ jsxRuntime.jsx(UiComponents.Parameter, { children: /* @__PURE__ */ jsxRuntime.jsx(UiComponents.ParameterText, { title, value: value2 }) }, i)) });
+}
+function EditParametersButton({
+  onClick,
+  isEditing
+}) {
+  const label = isEditing ? "Cancel" : "Edit";
+  const icon$1 = isEditing ? svgIconType.SvgIconType.Close : svgIconType.SvgIconType.Edit;
+  return /* @__PURE__ */ jsxRuntime.jsxs(UiComponents.PanelHeaderButton, { onClick, children: [
+    label,
+    /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(index$1.SvgIcon, { type: icon$1 }) })
+  ] });
+}
+
+exports.ParametersPanel = ParametersPanel;

package/dist/cjs/components/ComboBox/Dropdown/Categories/LookupOptions/UiComponents.cjs

@@ -0,0 +1,135 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('../../../../../styled-system/css/css.cjs');
+require('../../../../../styled-system/helpers.cjs');
+var sva = require('../../../../../styled-system/css/sva.cjs');
+require('react');
+require('../../../../../styled-system/jsx/is-valid-prop.cjs');
+var flex = require('../../../../../styled-system/jsx/flex.cjs');
+require('../../../../../styled-system/patterns/visually-hidden.cjs');
+var badge = require('../../../../../ui-kit/styled/badge.cjs');
+var text = require('../../../../../ui-kit/styled/text.cjs');
+var button = require('../../../../../ui-kit/button.cjs');
+
+const panelHeaderRecipe = sva.sva({
+  className: "panel-header",
+  slots: ["container", "title", "actions", "edit-button"],
+  base: {
+    container: {
+      justifyContent: "space-between",
+      alignItems: "center"
+    },
+    title: { textStyle: "xs", color: "slate.11", fontWeight: "medium" },
+    actions: {
+      gap: "2"
+    },
+    "edit-button": {
+      color: "slate.11",
+      fontWeight: "medium",
+      rounded: "sm",
+      py: "0.5",
+      px: "1",
+      gap: "0.5",
+      h: "initial"
+    }
+  }
+});
+function PanelHeader({
+  title,
+  actions
+}) {
+  const {
+    container,
+    title: titleStyles,
+    actions: actionsStyles
+  } = panelHeaderRecipe();
+  return /* @__PURE__ */ jsxRuntime.jsxs(flex.Flex, { className: container, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: titleStyles, children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx(flex.Flex, { className: actionsStyles, children: actions })
+  ] });
+}
+function PanelHeaderButton({
+  children,
+  ...props
+}) {
+  const styles = panelHeaderRecipe();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    button.Button,
+    {
+      size: "xs",
+      variant: "ghost",
+      colorPalette: "gray",
+      className: styles["edit-button"],
+      ...props,
+      children
+    }
+  );
+}
+const parametersPreviewRecipe = sva.sva({
+  className: "parameters-preview",
+  slots: ["container", "no-params", "badge"],
+  base: {
+    container: {
+      gap: "2",
+      flexWrap: "wrap"
+    },
+    "no-params": {
+      color: "slate.11",
+      textStyle: "sm",
+      fontWeight: "medium"
+    },
+    badge: {
+      color: "slate.11"
+    }
+  }
+});
+function ParametersList({ children }) {
+  const styles = parametersPreviewRecipe();
+  return /* @__PURE__ */ jsxRuntime.jsx(flex.Flex, { className: styles.container, children });
+}
+function Parameter({ children }) {
+  const styles = parametersPreviewRecipe();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    badge.Badge,
+    {
+      size: "sm",
+      variant: "subtle",
+      colorPalette: "gray",
+      className: styles.badge,
+      children
+    }
+  );
+}
+function NoParameters() {
+  const styles = parametersPreviewRecipe();
+  return /* @__PURE__ */ jsxRuntime.jsx(text.Text, { as: "span", className: styles["no-params"], children: "No parameters provided" });
+}
+function ParameterText({
+  title,
+  value
+}) {
+  if (!value) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: title });
+  const truncateTo = 20;
+  const truncatedValue = value.length > truncateTo ? `${value?.substring(0, truncateTo)}...` : value;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    title,
+    ": ",
+    truncatedValue
+  ] });
+}
+
+exports.NoParameters = NoParameters;
+exports.PanelHeader = PanelHeader;
+exports.PanelHeaderButton = PanelHeaderButton;
+exports.Parameter = Parameter;
+exports.ParameterText = ParameterText;
+exports.ParametersList = ParametersList;

package/dist/cjs/components/ComboBox/Dropdown/{Tabs → Categories}/LookupOptions/index.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3-beta.2
+ * v2.0.3
  */
 'use client';
 
@@ -16,11 +16,11 @@ var integrationAppClientContext = require('../../../../../contexts/integration-a
 var integrationAppConnectionContext = require('../../../../../contexts/integration-app-connection-context.cjs');
 var comboboxContext = require('../../../context/combobox-context.cjs');
 var comboboxDropdownSearch = require('../../../context/combobox-dropdown-search.cjs');
-var OptionsList$1 = require('./OptionsList.cjs');
 var index$1 = require('../../../../SvgIcon/index.cjs');
+var svgIconType = require('../../../../SvgIcon/svg-icon-type.cjs');
 var useDataCollectionSpec = require('../../../../../hooks/data-collections/useDataCollectionSpec.cjs');
 var integrationAppIntegrationContext = require('../../../../../contexts/integration-app-integration-context.cjs');
-var base = require('../../../options-factories/base.cjs');
+var utils = require('../../../options-factories/utils.cjs');
 var comboboxDropdownContext = require('../../../context/combobox-dropdown-context.cjs');
 var keyboardEvents = require('../../../../../hooks/keyboard-events.cjs');
 var deepEqual = require('fast-deep-equal');
@@ -28,9 +28,73 @@ var useDeepEffect = require('../../../../../hooks/useDeepEffect.cjs');
 var Option = require('../../Option.cjs');
 var ParametersPanel = require('./ParametersPanel.cjs');
 var uuid = require('uuid');
-var DropdownUIElements = require('../../../../DropdownUI/DropdownUIElements.cjs');
+require('../../../../../styled-system/css/css.cjs');
+require('../../../../../styled-system/helpers.cjs');
+var sva = require('../../../../../styled-system/css/sva.cjs');
+require('../../../../../styled-system/jsx/is-valid-prop.cjs');
+var flex = require('../../../../../styled-system/jsx/flex.cjs');
+require('../../../../../styled-system/patterns/visually-hidden.cjs');
+var alert = require('../../../../../ui-kit/styled/alert.cjs');
 
-function LookupOptionsTab({ onSelect }) {
+const lookupOptionsRecipe = sva.sva({
+  className: "lookup-config-options",
+  slots: [
+    "container",
+    "required-message-container",
+    "required-message-title",
+    "additional-message-container",
+    "additional-message-title"
+  ],
+  base: {
+    container: {
+      flexDir: "column",
+      py: "1.5",
+      maxW: "md"
+    },
+    "required-message-container": {
+      h: "fit-content",
+      w: "fit-content",
+      rounded: "lg",
+      px: "3",
+      py: "1.5",
+      alignItems: "center",
+      gap: "2",
+      bg: "gray.2",
+      mx: "1.5"
+    },
+    "required-message-title": {
+      textStyle: "sm",
+      color: "slate.11",
+      fontWeight: "medium",
+      padding: "0"
+    },
+    "additional-message-container": {
+      h: "fit-content",
+      w: "fit-content",
+      rounded: "lg",
+      px: "3",
+      py: "1.5",
+      alignItems: "center",
+      gap: "2",
+      bg: "yellow.2",
+      borderColor: "yellow.8",
+      mx: "1.5",
+      mt: "1.5",
+      "& svg": {
+        color: "yellow.11"
+      }
+    },
+    "additional-message-title": {
+      textStyle: "sm",
+      color: "yellow.11",
+      fontWeight: "medium",
+      padding: "0"
+    }
+  }
+});
+function LookupOptionsCategoryContent({
+  onOptionSelect
+}) {
   const [options, setOptions] = React.useState([]);
   const [loadingOptions, setLoadingOptions] = React.useState(true);
   const [additionalMessage, setAdditionalMessage] = React.useState("");
@@ -43,6 +107,7 @@ function LookupOptionsTab({ onSelect }) {
   const { connectionId } = integrationAppConnectionContext.useIntegrationAppConnection();
   const { integrationId } = integrationAppIntegrationContext.useIntegrationAppIntegration();
   const currentLoadOptionsId = React.useRef("");
+  const styles = lookupOptionsRecipe();
   const referenceCollectionSpec = useDataCollectionSpec.useDataCollectionSpec({
     key: pointer?.key,
     integrationId
@@ -120,40 +185,58 @@ function LookupOptionsTab({ onSelect }) {
       }
     }
   }
-  const filteredOptoins = base.filterOptionsByLabel(options, searchValue);
+  const filteredOptions = utils.filterOptionsByLabel(options, searchValue);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    hasParameters && /* @__PURE__ */ jsxRuntime.jsx(
-      ParametersPanel.ParametersPanel,
-      {
-        onChange: setParametersValue,
-        schema: referenceCollectionSpec?.parametersSchema,
-        value: parametersValue
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.Panel, { children: !hasMissingParameters ? loadingOptions ? /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.LoadingPanel, { children: "Loading list of options..." }) : error ? /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.ErrorPanel, { children: error?.message || "Something went wrong" }) : /* @__PURE__ */ jsxRuntime.jsxs(index.DropdownUI.List, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.Panel, { className: "flex-grow overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
-        OptionsList,
+    hasParameters && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("hr", {}),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ParametersPanel.ParametersPanel,
+        {
+          onChange: (value) => setParametersValue(value),
+          schema: referenceCollectionSpec?.parametersSchema,
+          value: parametersValue
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("hr", {})
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(flex.Flex, { className: styles.container, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.ListHeader, { children: "Available options" }),
+      !hasMissingParameters ? loadingOptions ? /* @__PURE__ */ jsxRuntime.jsxs(index.DropdownUI.List, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.LoadingItem, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.LoadingItem, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.LoadingItem, {})
+      ] }) : error ? /* @__PURE__ */ jsxRuntime.jsx(
+        index.DropdownUI.ErrorHeading,
         {
-          options: filteredOptoins,
-          onSelect: (value) => onSelect(value?.value)
+          text: error?.message || "Something went wrong"
         }
-      ) }),
-      additionalMessage && /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.Panel, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 text-warning flex gap-2 items-center", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(index$1.SvgIcon, { type: index$1.SvgIconType.AlertCircle }),
-        " ",
-        additionalMessage
-      ] }) })
-    ] }) : /* @__PURE__ */ jsxRuntime.jsx(OptionsList$1.OptionsParametersRequired, {}) })
+      ) : /* @__PURE__ */ jsxRuntime.jsxs(index.DropdownUI.List, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          LookupOptionsList,
+          {
+            options: filteredOptions,
+            onOptionSelect: (value) => onOptionSelect(value?.value)
+          }
+        ),
+        additionalMessage && /* @__PURE__ */ jsxRuntime.jsx(AdditionalMessageAlert, { text: additionalMessage })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsx(OptionsParametersRequiredAlert, {})
+    ] })
   ] });
 }
-function OptionsList({
+function LookupOptionsList({
   options,
-  onSelect
+  onOptionSelect
 }) {
-  const { isOptionSelected } = comboboxDropdownContext.useComboBoxDropdownContext();
-  const [currentOption, setCurrentOption] = React.useState(null);
+  const { isOptionSelected, drillUp } = comboboxDropdownContext.useComboBoxDropdownContext();
+  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_LEFT, () => {
+    drillUp();
+  });
+  keyboardEvents.useKeyboardEventSubscribe(keyboardEvents.EVENT_TYPE.OPTION_RIGHT, handleKeyEnter);
   keyboardEvents.useKeyboardEventSubscribe(keyboardEvents.EVENT_TYPE.OPTION_SELECT, handleKeyEnter);
   useDeepEffect.useDeepEffect(() => {
     if (!options?.length) {
@@ -208,7 +291,7 @@ function OptionsList({
     }
   }
   function handleOptionSelect(option) {
-    onSelect(option);
+    onOptionSelect(option);
   }
   return /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.List, { children: /* @__PURE__ */ jsxRuntime.jsx(
     DropdownListOptions,
@@ -230,7 +313,7 @@ function DropdownListOptions({
     return null;
   }
   if (options.length === 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.Item, { readonly: true, children: /* @__PURE__ */ jsxRuntime.jsx(DropdownUIElements.ItemTitle, { children: "No results found" }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.NoOptionsHeading, { text: "No results found" });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: options.map((option, idx) => /* @__PURE__ */ jsxRuntime.jsx(
     Option.default,
@@ -243,5 +326,21 @@ function DropdownListOptions({
     idx
   )) });
 }
+function OptionsParametersRequiredAlert() {
+  const styles = lookupOptionsRecipe();
+  return /* @__PURE__ */ jsxRuntime.jsxs(alert.Root, { className: styles["required-message-container"], children: [
+    /* @__PURE__ */ jsxRuntime.jsx(alert.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(index$1.SvgIcon, { type: svgIconType.SvgIconType.InfoCircle }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(alert.Title, { className: styles["required-message-title"], children: "Please select parameters above to display lists" })
+  ] });
+}
+function AdditionalMessageAlert({ text }) {
+  const styles = lookupOptionsRecipe();
+  return /* @__PURE__ */ jsxRuntime.jsxs(alert.Root, { className: styles["additional-message-container"], children: [
+    /* @__PURE__ */ jsxRuntime.jsx(alert.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(index$1.SvgIcon, { type: svgIconType.SvgIconType.InfoCircle }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(alert.Title, { className: styles["additional-message-title"], children: text })
+  ] });
+}
 
-exports.LookupOptionsTab = LookupOptionsTab;
+exports.AdditionalMessageAlert = AdditionalMessageAlert;
+exports.LookupOptionsCategoryContent = LookupOptionsCategoryContent;
+exports.OptionsParametersRequiredAlert = OptionsParametersRequiredAlert;

package/dist/cjs/components/ComboBox/Dropdown/{Tabs → Categories}/Options.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3-beta.2
+ * v2.0.3
  */
 'use client';
 
@@ -12,8 +12,10 @@ var jsxRuntime = require('react/jsx-runtime');
 var index = require('../../../DropdownUI/index.cjs');
 var OptionsList = require('../OptionsList.cjs');
 
-function OptionsTab({ onSelect }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.Panel, { children: /* @__PURE__ */ jsxRuntime.jsx(OptionsList.OptionsList, { onSelect }) });
+function OptionsCategoryContent({
+  onOptionSelect
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.Panel, { children: /* @__PURE__ */ jsxRuntime.jsx(OptionsList.OptionsList, { onOptionSelect }) });
 }
 
-exports.OptionsTab = OptionsTab;
+exports.OptionsCategoryContent = OptionsCategoryContent;

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

@@ -0,0 +1,32 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var types = require('../../types.cjs');
+var index = require('../../../DropdownUI/index.cjs');
+var OptionsList = require('../OptionsList.cjs');
+var index$1 = require('./LookupOptions/index.cjs');
+require('../../context/combobox-context.cjs');
+var comboboxDropdownContext = require('../../context/combobox-dropdown-context.cjs');
+require('../../context/combobox-dropdown-search.cjs');
+require('../../context/combobox-dropdown-stack.cjs');
+require('@integration-app/sdk');
+
+function RootCategoryContent({
+  onOptionSelect
+}) {
+  const { availableCategories } = comboboxDropdownContext.useComboBoxDropdownContext();
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.Panel, { children: /* @__PURE__ */ jsxRuntime.jsx(OptionsList.OptionsList, { onOptionSelect }) }),
+    availableCategories?.includes(types.DropdownCategoryType.LOOKUP_OPTIONS) && /* @__PURE__ */ jsxRuntime.jsx(index$1.LookupOptionsCategoryContent, { onOptionSelect })
+  ] });
+}
+
+exports.RootCategoryContent = RootCategoryContent;

package/dist/cjs/components/ComboBox/Dropdown/{Tabs → Categories}/Variables.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3-beta.2
+ * v2.0.3
  */
 'use client';
 
@@ -12,8 +12,10 @@ var jsxRuntime = require('react/jsx-runtime');
 var index = require('../../../DropdownUI/index.cjs');
 var OptionsList = require('../OptionsList.cjs');
 
-function VariablesTab({ onSelect }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.Panel, { children: /* @__PURE__ */ jsxRuntime.jsx(OptionsList.OptionsList, { onSelect }) });
+function VariablesCategoryContent({
+  onOptionSelect
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.Panel, { children: /* @__PURE__ */ jsxRuntime.jsx(OptionsList.OptionsList, { onOptionSelect }) });
 }
 
-exports.VariablesTab = VariablesTab;
+exports.VariablesCategoryContent = VariablesCategoryContent;

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

@@ -0,0 +1,42 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3
+ */
+'use client';
+
+'use strict';
+
+var sdk = require('@integration-app/sdk');
+
+async function getLookupCollection({
+  schema,
+  client,
+  connectionId,
+  integrationId
+}) {
+  if (!schema) {
+    return void 0;
+  }
+  const { key, parameters } = sdk.getReferenceCollectionPointerForSchema(schema) ?? {};
+  if (!key) {
+    return void 0;
+  }
+  if (!connectionId && !integrationId) {
+    return void 0;
+  }
+  let result = void 0;
+  try {
+    if (connectionId) {
+      result = await client.connection(connectionId).dataCollection(key, parameters).get();
+    } else if (integrationId && key) {
+      result = await client.integration(integrationId).getDataCollection(key);
+    }
+  } catch (e) {
+    console.error(`fetching collection '${key}' returns error`, e);
+  }
+  return result;
+}
+
+exports.getLookupCollection = getLookupCollection;

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

@@ -0,0 +1,39 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+require('../context/combobox-context.cjs');
+var comboboxDropdownContext = require('../context/combobox-dropdown-context.cjs');
+require('../context/combobox-dropdown-search.cjs');
+require('../context/combobox-dropdown-stack.cjs');
+require('@integration-app/sdk');
+var index = require('../../DropdownUI/index.cjs');
+
+const DrillUpButton = React.forwardRef(({ onClick, ...props }, ref) => {
+  const { drillUp, drillDownStackTop } = comboboxDropdownContext.useComboBoxDropdownContext();
+  if (!drillDownStackTop) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index.DropdownUI.BackButton,
+    {
+      ref,
+      onClick: (e) => {
+        drillUp();
+        onClick?.(e);
+      },
+      ...props,
+      children: drillDownStackTop.label
+    }
+  );
+});
+
+exports.DrillUpButton = DrillUpButton;