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

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

@@ -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';
 
@@ -14,21 +14,85 @@ import { useIntegrationAppClient } from '../../../../../contexts/integration-app
 import { useIntegrationAppConnection } from '../../../../../contexts/integration-app-connection-context.mjs';
 import { useComboBox } from '../../../context/combobox-context.mjs';
 import { useComboBoxDropdownSearchContext } from '../../../context/combobox-dropdown-search.mjs';
-import { OptionsParametersRequired } from './OptionsList.mjs';
-import { SvgIcon, SvgIconType } from '../../../../SvgIcon/index.mjs';
+import { SvgIcon } from '../../../../SvgIcon/index.mjs';
+import { SvgIconType } from '../../../../SvgIcon/svg-icon-type.mjs';
 import { useDataCollectionSpec } from '../../../../../hooks/data-collections/useDataCollectionSpec.mjs';
 import { useIntegrationAppIntegration } from '../../../../../contexts/integration-app-integration-context.mjs';
-import { filterOptionsByLabel } from '../../../options-factories/base.mjs';
+import { filterOptionsByLabel } from '../../../options-factories/utils.mjs';
 import { useComboBoxDropdownContext } from '../../../context/combobox-dropdown-context.mjs';
 import { useKeyboardEventSubscribe, EVENT_TYPE } from '../../../../../hooks/keyboard-events.mjs';
 import deepEqual from 'fast-deep-equal';
 import { useDeepEffect } from '../../../../../hooks/useDeepEffect.mjs';
-import ComboBoxOption from '../../Option.mjs';
+import DropdownOption from '../../Option.mjs';
 import { ParametersPanel } from './ParametersPanel.mjs';
 import { v4 } from 'uuid';
-import { ItemTitle } from '../../../../DropdownUI/DropdownUIElements.mjs';
+import '../../../../../styled-system/css/css.mjs';
+import '../../../../../styled-system/helpers.mjs';
+import { sva } from '../../../../../styled-system/css/sva.mjs';
+import '../../../../../styled-system/jsx/is-valid-prop.mjs';
+import { Flex } from '../../../../../styled-system/jsx/flex.mjs';
+import '../../../../../styled-system/patterns/visually-hidden.mjs';
+import { Root, Icon, Title } from '../../../../../ui-kit/styled/alert.mjs';
 
-function LookupOptionsTab({ onSelect }) {
+const lookupOptionsRecipe = 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] = useState([]);
   const [loadingOptions, setLoadingOptions] = useState(true);
   const [additionalMessage, setAdditionalMessage] = useState("");
@@ -41,6 +105,7 @@ function LookupOptionsTab({ onSelect }) {
   const { connectionId } = useIntegrationAppConnection();
   const { integrationId } = useIntegrationAppIntegration();
   const currentLoadOptionsId = useRef("");
+  const styles = lookupOptionsRecipe();
   const referenceCollectionSpec = useDataCollectionSpec({
     key: pointer?.key,
     integrationId
@@ -118,41 +183,80 @@ function LookupOptionsTab({ onSelect }) {
       }
     }
   }
-  const filteredOptoins = filterOptionsByLabel(options, searchValue);
+  const filteredOptions = filterOptionsByLabel(options, searchValue);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    hasParameters && /* @__PURE__ */ jsx(
-      ParametersPanel,
-      {
-        onChange: setParametersValue,
-        schema: referenceCollectionSpec?.parametersSchema,
-        value: parametersValue
-      }
-    ),
-    /* @__PURE__ */ jsx(DropdownUI.Panel, { children: !hasMissingParameters ? loadingOptions ? /* @__PURE__ */ jsx(DropdownUI.LoadingPanel, { children: "Loading list of options..." }) : error ? /* @__PURE__ */ jsx(DropdownUI.ErrorPanel, { children: error?.message || "Something went wrong" }) : /* @__PURE__ */ jsxs(DropdownUI.List, { children: [
-      /* @__PURE__ */ jsx(DropdownUI.Panel, { className: "flex-grow overflow-y-auto", children: /* @__PURE__ */ jsx(
-        OptionsList,
+    hasParameters && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("hr", {}),
+      /* @__PURE__ */ jsx(
+        ParametersPanel,
+        {
+          onChange: (value) => setParametersValue(value),
+          schema: referenceCollectionSpec?.parametersSchema,
+          value: parametersValue
+        }
+      ),
+      /* @__PURE__ */ jsx("hr", {})
+    ] }),
+    /* @__PURE__ */ jsxs(Flex, { className: styles.container, children: [
+      /* @__PURE__ */ jsx(DropdownUI.ListHeader, { children: "Available options" }),
+      !hasMissingParameters ? loadingOptions ? /* @__PURE__ */ jsxs(DropdownUI.List, { children: [
+        /* @__PURE__ */ jsx(DropdownUI.LoadingItem, {}),
+        /* @__PURE__ */ jsx(DropdownUI.LoadingItem, {}),
+        /* @__PURE__ */ jsx(DropdownUI.LoadingItem, {})
+      ] }) : error ? /* @__PURE__ */ jsx(
+        DropdownUI.ErrorHeading,
         {
-          options: filteredOptoins,
-          onSelect: (value) => onSelect(value?.value)
+          text: error?.message || "Something went wrong"
         }
-      ) }),
-      additionalMessage && /* @__PURE__ */ jsx(DropdownUI.Panel, { children: /* @__PURE__ */ jsxs("div", { className: "p-4 text-warning flex gap-2 items-center", children: [
-        /* @__PURE__ */ jsx(SvgIcon, { type: SvgIconType.AlertCircle }),
-        " ",
-        additionalMessage
-      ] }) })
-    ] }) : /* @__PURE__ */ jsx(OptionsParametersRequired, {}) })
+      ) : /* @__PURE__ */ jsxs(DropdownUI.List, { children: [
+        /* @__PURE__ */ jsx(
+          LookupOptionsList,
+          {
+            options: filteredOptions,
+            onOptionSelect: (value) => onOptionSelect(value?.value)
+          }
+        ),
+        additionalMessage && /* @__PURE__ */ jsx(AdditionalMessageAlert, { text: additionalMessage })
+      ] }) : /* @__PURE__ */ jsx(OptionsParametersRequiredAlert, {})
+    ] })
   ] });
 }
-function OptionsList({
+function LookupOptionsList({
   options,
-  onSelect
+  onOptionSelect
 }) {
-  const { isOptionSelected } = useComboBoxDropdownContext();
-  const [currentOption, setCurrentOption] = useState(null);
-  useKeyboardEventSubscribe(EVENT_TYPE.OPTION_DOWN, makePreviousOptionCurrent);
-  useKeyboardEventSubscribe(EVENT_TYPE.OPTION_UP, makeNextOptionCurrent);
-  useKeyboardEventSubscribe(EVENT_TYPE.OPTION_SELECT, handleKeyEnter);
+  const { isOptionSelected, drillUp } = useComboBoxDropdownContext();
+  const { scopedComboboxId } = useComboBox();
+  const [currentOption, setCurrentOption] = useState(
+    null
+  );
+  useKeyboardEventSubscribe({
+    scopedComboboxId,
+    event: EVENT_TYPE.OPTION_DOWN,
+    callback: makePreviousOptionCurrent
+  });
+  useKeyboardEventSubscribe({
+    scopedComboboxId,
+    event: EVENT_TYPE.OPTION_UP,
+    callback: makeNextOptionCurrent
+  });
+  useKeyboardEventSubscribe({
+    scopedComboboxId,
+    event: EVENT_TYPE.OPTION_LEFT,
+    callback: () => {
+      drillUp();
+    }
+  });
+  useKeyboardEventSubscribe({
+    scopedComboboxId,
+    event: EVENT_TYPE.OPTION_RIGHT,
+    callback: handleKeyEnter
+  });
+  useKeyboardEventSubscribe({
+    scopedComboboxId,
+    event: EVENT_TYPE.OPTION_SELECT,
+    callback: handleKeyEnter
+  });
   useDeepEffect(() => {
     if (!options?.length) {
       return;
@@ -206,7 +310,7 @@ function OptionsList({
     }
   }
   function handleOptionSelect(option) {
-    onSelect(option);
+    onOptionSelect(option);
   }
   return /* @__PURE__ */ jsx(DropdownUI.List, { children: /* @__PURE__ */ jsx(
     DropdownListOptions,
@@ -228,10 +332,10 @@ function DropdownListOptions({
     return null;
   }
   if (options.length === 0) {
-    return /* @__PURE__ */ jsx(DropdownUI.Item, { readonly: true, children: /* @__PURE__ */ jsx(ItemTitle, { children: "No results found" }) });
+    return /* @__PURE__ */ jsx(DropdownUI.NoOptionsHeading, { text: "No results found" });
   }
   return /* @__PURE__ */ jsx(Fragment, { children: options.map((option, idx) => /* @__PURE__ */ jsx(
-    ComboBoxOption,
+    DropdownOption,
     {
       option,
       selected: isOptionSelected(option),
@@ -241,5 +345,19 @@ function DropdownListOptions({
     idx
   )) });
 }
+function OptionsParametersRequiredAlert() {
+  const styles = lookupOptionsRecipe();
+  return /* @__PURE__ */ jsxs(Root, { className: styles["required-message-container"], children: [
+    /* @__PURE__ */ jsx(Icon, { asChild: true, children: /* @__PURE__ */ jsx(SvgIcon, { type: SvgIconType.InfoCircle }) }),
+    /* @__PURE__ */ jsx(Title, { className: styles["required-message-title"], children: "Please select parameters above to display lists" })
+  ] });
+}
+function AdditionalMessageAlert({ text }) {
+  const styles = lookupOptionsRecipe();
+  return /* @__PURE__ */ jsxs(Root, { className: styles["additional-message-container"], children: [
+    /* @__PURE__ */ jsx(Icon, { asChild: true, children: /* @__PURE__ */ jsx(SvgIcon, { type: SvgIconType.InfoCircle }) }),
+    /* @__PURE__ */ jsx(Title, { className: styles["additional-message-title"], children: text })
+  ] });
+}
 
-export { LookupOptionsTab };
+export { AdditionalMessageAlert, LookupOptionsCategoryContent, OptionsParametersRequiredAlert };

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

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

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

@@ -0,0 +1,26 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.4-beta.0
+ */
+'use client';
+
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { DropdownCategoryType } from '../../types.mjs';
+import { DropdownUI } from '../../../DropdownUI/index.mjs';
+import { OptionsList } from '../OptionsList.mjs';
+import { LookupOptionsCategoryContent } from './LookupOptions/index.mjs';
+import { useComboBoxDropdownContext } from '../../context/combobox-dropdown-context.mjs';
+
+function RootCategoryContent({
+  onOptionSelect
+}) {
+  const { availableCategories } = useComboBoxDropdownContext();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(DropdownUI.Panel, { children: /* @__PURE__ */ jsx(OptionsList, { onOptionSelect }) }),
+    availableCategories?.includes(DropdownCategoryType.LOOKUP_OPTIONS) && /* @__PURE__ */ jsx(LookupOptionsCategoryContent, { onOptionSelect })
+  ] });
+}
+
+export { RootCategoryContent };

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

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

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

@@ -0,0 +1,40 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.4-beta.0
+ */
+'use client';
+
+import { getReferenceCollectionPointerForSchema } from '@integration-app/sdk';
+
+async function getLookupCollection({
+  schema,
+  client,
+  connectionId,
+  integrationId
+}) {
+  if (!schema) {
+    return void 0;
+  }
+  const { key, parameters } = 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;
+}
+
+export { getLookupCollection };

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

@@ -0,0 +1,33 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.4-beta.0
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { DropdownUI } from '../../DropdownUI/index.mjs';
+import { useComboBoxDropdownContext } from '../context/combobox-dropdown-context.mjs';
+
+const DrillUpButton = forwardRef(({ onClick, ...props }, ref) => {
+  const { drillUp, drillDownStackTop } = useComboBoxDropdownContext();
+  if (!drillDownStackTop) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    DropdownUI.BackButton,
+    {
+      ref,
+      onClick: (e) => {
+        drillUp();
+        onClick?.(e);
+      },
+      ...props,
+      children: drillDownStackTop.label
+    }
+  );
+});
+
+export { DrillUpButton };

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

@@ -2,89 +2,48 @@
 /*
  * 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';
 
 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 { 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';
+import { ActiveCategoryContent } from './ActiveCategoryContent.mjs';
+import { DrillUpButton } from './DrillUpButton.mjs';
+import { DropdownPopoverProvider, DropdownAnchor, DropdownPopoverContent } from '../DropdownPopover/index.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, {}),
+function Dropdown({
+  topDropdownPanelComponent,
+  autoFocusOnSearch,
+  onOptionSelect,
+  children
+}) {
+  const { availableCategories } = useComboBoxDropdownContext();
+  if (availableCategories === null) {
+    return children;
+  }
+  if (availableCategories?.length < 1) {
+    return /* @__PURE__ */ jsx(DropdownStackContextProvider, { children: /* @__PURE__ */ jsxs(DropdownPopoverProvider, { children: [
+      /* @__PURE__ */ jsx(DropdownAnchor, { children }),
+      /* @__PURE__ */ jsx(DropdownPopoverContent, { children: /* @__PURE__ */ jsxs(DropdownUI.List, { children: [
+        /* @__PURE__ */ jsx(DropdownUI.LoadingItem, {}),
+        /* @__PURE__ */ jsx(DropdownUI.LoadingItem, {}),
+        /* @__PURE__ */ jsx(DropdownUI.LoadingItem, {})
+      ] }) })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx(DropdownStackContextProvider, { children: /* @__PURE__ */ jsxs(DropdownPopoverProvider, { children: [
+    /* @__PURE__ */ jsx(DropdownAnchor, { children }),
+    /* @__PURE__ */ jsxs(DropdownPopoverContent, { children: [
+      /* @__PURE__ */ jsx(DrillUpButton, {}),
       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);
+      /* @__PURE__ */ jsx(ActiveCategoryContent, { onOptionSelect })
+    ] })
+  ] }) });
 }
 
-export { Dropdown, DropdownTabs };
+export { Dropdown };

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

@@ -2,64 +2,57 @@
 /*
  * 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';
 
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs } 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';
+import { SvgIconType } from '../../SvgIcon/svg-icon-type.mjs';
 
-function ComboBoxOption({
+function DropdownOption({
   option,
   selected,
   current = false,
   onSelect
 }) {
   const handleOnSelect = useEventStopPropagation(() => {
-    if (option.isSection && !option.drilldownOptionFactories) {
+    if (option.isSection && !option.drillDownOptionFactory) {
       return;
     }
     onSelect?.();
   });
   const iconProps = getIconProps(option);
   const valueProps = getValueProps(option);
-  const hasChild = !!option.drilldownOptionFactories;
-  const Component = option.isSection ? DropdownUI.HeaderItem : DropdownUI.Item;
+  const hasChild = !!option.drillDownOptionFactory;
+  if (option.isSection) {
+    return /* @__PURE__ */ jsx(DropdownUI.ListHeader, { children: valueProps.label });
+  }
   return /* @__PURE__ */ jsxs(
-    Component,
+    DropdownUI.Item,
     {
-      selected,
-      active: current,
+      current,
       onClick: handleOnSelect,
-      isHighlighted: option.isHighlighted,
+      "aria-selected": selected,
       children: [
-        /* @__PURE__ */ jsx(ItemIcon, { ...iconProps }),
-        /* @__PURE__ */ jsx(OptionTitle, { ...valueProps }),
-        hasChild && /* @__PURE__ */ jsx(ItemChevronIcon, {})
+        /* @__PURE__ */ jsx(DropdownUI.ItemIcon, { ...iconProps, framed: true }),
+        /* @__PURE__ */ jsx(DropdownUI.ItemTitle, { children: option.label }),
+        hasChild && /* @__PURE__ */ jsx(DropdownUI.ItemNestingIndicator, { count: option.childrenCount, children: /* @__PURE__ */ jsx(DropdownUI.ItemIcon, { type: SvgIconType.ChevronRight }) }),
+        selected && /* @__PURE__ */ jsx(DropdownUI.ItemIcon, { type: SvgIconType.Check })
       ]
     }
   );
 }
-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;
+  const { label } = option;
   return {
-    label: label ? label : hint,
-    hint: label ? hint : void 0,
-    isCustomValue
+    label: label ?? "Missing label"
   };
 }
 
-export { ComboBoxOption as default };
+export { DropdownOption as default };