@membranehq/react 0.1.0

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

@@ -0,0 +1,341 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var sdk = require('@membranehq/sdk');
+var deepEqual = require('fast-deep-equal');
+var index = require('../../../../DropdownUI/index.cjs');
+var svgIconType = require('../../../../SvgIcon/svg-icon-type.cjs');
+var integrationAppClientContext = require('../../../../../contexts/integration-app-client-context.cjs');
+var integrationAppConnectionContext = require('../../../../../contexts/integration-app-connection-context.cjs');
+var integrationAppIntegrationContext = require('../../../../../contexts/integration-app-integration-context.cjs');
+var useThrottle = require('../../../../../helpers/hooks/useThrottle.cjs');
+var simpleUniqueId = require('../../../../../helpers/simple-unique-id.cjs');
+var useDataCollectionSpec = require('../../../../../hooks/data-collections/useDataCollectionSpec.cjs');
+var css = 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');
+var divider = require('../../../../../styled-system/jsx/divider.cjs');
+require('../../../../../styled-system/patterns/visually-hidden.cjs');
+var alert = require('../../../../../ui-kit/styled/alert.cjs');
+var ParametersPanel = require('./ParametersPanel.cjs');
+var index$1 = require('../../../../SvgIcon/index.cjs');
+var comboboxContext = require('../../../context/combobox-context.cjs');
+var comboboxDropdownContext = require('../../../context/combobox-dropdown-context.cjs');
+var comboboxDropdownSearch = require('../../../context/combobox-dropdown-search.cjs');
+var utils = require('../../../options-factories/utils.cjs');
+var NavigationContext = require('../../KeyboardNavigation/NavigationContext.cjs');
+var useKeyboardBinding = require('../../KeyboardNavigation/useKeyboardBinding.cjs');
+var Option = require('../../Option.cjs');
+
+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",
+      maxW: "md",
+      overflowY: "auto"
+    },
+    "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: "warning.2",
+      borderColor: "warning.8",
+      mx: "1.5",
+      mt: "1.5",
+      "& svg": {
+        color: "warning.11"
+      }
+    },
+    "additional-message-title": {
+      textStyle: "sm",
+      color: "warning.11",
+      fontWeight: "medium",
+      padding: "0"
+    }
+  }
+});
+const styles = lookupOptionsRecipe();
+const LookupOptionsCategoryContent = React.memo(function({
+  onOptionSelect,
+  children
+}) {
+  const [options, setOptions] = React.useState([]);
+  const [findByIdOption, setFindByIdOption] = React.useState();
+  const [isLoading, setLoadingOptions] = React.useState(true);
+  const [additionalMessage, setAdditionalMessage] = React.useState("");
+  const [error, setError] = React.useState();
+  const { dropdownSearchInputValue } = comboboxDropdownSearch.useComboBoxDropdownSearchContext();
+  const { schema } = comboboxContext.useComboBox();
+  const throttledSearchValue = useThrottle.useThrottle(dropdownSearchInputValue, 250);
+  const pointer = sdk.getReferenceCollectionPointerForSchema(schema);
+  const [parametersValue, setParametersValue] = React.useState(pointer?.parameters || {});
+  const { client } = integrationAppClientContext.useIntegrationAppClient();
+  const { connectionId } = integrationAppConnectionContext.useIntegrationAppConnection();
+  const { integrationId } = integrationAppIntegrationContext.useIntegrationAppIntegration();
+  const currentLoadOptionsId = React.useRef("");
+  const { dataCollectionSpec: referenceCollectionSpec } = useDataCollectionSpec.useDataCollectionSpec({
+    key: pointer?.key,
+    integrationId
+  });
+  React.useEffect(() => {
+    if (pointer?.parameters) {
+      setParametersValue(pointer.parameters);
+    }
+  }, [JSON.stringify(pointer)]);
+  React.useEffect(() => {
+    if (schema && connectionId) {
+      void loadOptions(throttledSearchValue);
+    }
+  }, [
+    throttledSearchValue,
+    connectionId,
+    JSON.stringify(schema),
+    JSON.stringify(parametersValue),
+    JSON.stringify(referenceCollectionSpec)
+  ]);
+  if (!schema) return null;
+  const hasParameters = Object.keys(referenceCollectionSpec?.parametersSchema?.properties ?? {}).length > 0;
+  const hasMissingParameters = sdk.getMissingRequiredFields(referenceCollectionSpec?.parametersSchema, parametersValue)?.length > 0;
+  async function loadOptions(searchValue) {
+    const loadOptionsId = simpleUniqueId.simpleUniqueId();
+    currentLoadOptionsId.current = loadOptionsId;
+    setLoadingOptions(true);
+    setError(void 0);
+    setFindByIdOption(void 0);
+    setAdditionalMessage("");
+    if (hasMissingParameters) return;
+    try {
+      if (!connectionId) {
+        throw new Error("No connection provided. Cannot load options.");
+      }
+      if (!referenceCollectionSpec || !pointer) {
+        setOptions([]);
+        return;
+      }
+      const connectionAccessor = client.connection(connectionId);
+      let response;
+      const collectionAccessor = connectionAccessor.dataCollection(pointer?.key, parametersValue);
+      if (referenceCollectionSpec.findById) {
+        try {
+          const itemById = await collectionAccessor.findById({
+            id: searchValue
+          });
+          setFindByIdOption({
+            label: itemById.record.name ?? itemById.record.id,
+            value: itemById.record.id,
+            hint: itemById.record.id,
+            hintPrefix: "ID:"
+          });
+        } catch {
+        }
+      }
+      if (!referenceCollectionSpec?.list) {
+        throw new Error(`Collection "${referenceCollectionSpec.key}" does not support listing options.`);
+      }
+      if (searchValue && referenceCollectionSpec.search) {
+        try {
+          response = await collectionAccessor.search({
+            query: searchValue
+          });
+          response.cursor = void 0;
+        } catch {
+        }
+      }
+      if (!searchValue && !response && referenceCollectionSpec?.list) {
+        response = await collectionAccessor.list();
+      }
+      if (currentLoadOptionsId.current === loadOptionsId) {
+        const options2 = response?.records.map((record) => {
+          return {
+            label: record.name ?? record.id,
+            value: record.id,
+            hint: record.id,
+            hintPrefix: "ID:"
+          };
+        });
+        if (response?.cursor && !!options2) {
+          setAdditionalMessage(
+            `Only the first ${options2.length} options are loaded. If your option is not in the list, please type its ID manually.`
+          );
+        }
+        setOptions(options2 || []);
+      }
+    } catch (e) {
+      if (currentLoadOptionsId.current === loadOptionsId) {
+        setError(sdk.extractIntegrationAppErrorData(e));
+      }
+    } finally {
+      if (currentLoadOptionsId.current === loadOptionsId) {
+        setLoadingOptions(false);
+      }
+    }
+  }
+  const filteredOptions = utils.filterOptionsByLabel(options, dropdownSearchInputValue, true, ["value"]);
+  const aggregatedOptions = aggregateOptions(filteredOptions, dropdownSearchInputValue, findByIdOption);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    hasParameters && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ParametersPanel.ParametersPanel,
+        {
+          onChange: (value) => setParametersValue(value),
+          schema: referenceCollectionSpec?.parametersSchema,
+          value: parametersValue
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(divider.Divider, { my: "1.5" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(flex.Flex, { className: styles.container, children: /* @__PURE__ */ jsxRuntime.jsxs(index.DropdownUI.List, { children: [
+      children,
+      /* @__PURE__ */ jsxRuntime.jsx(divider.Divider, { my: "1.5" }),
+      /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.ListHeader, { children: "Available options" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        LookupOptionsList,
+        {
+          fallbackOptions: options,
+          options: aggregatedOptions,
+          onOptionSelect: (value) => onOptionSelect(value?.value)
+        }
+      ),
+      hasMissingParameters && /* @__PURE__ */ jsxRuntime.jsx(OptionsParametersRequiredAlert, {}),
+      !hasMissingParameters && !error && additionalMessage && /* @__PURE__ */ jsxRuntime.jsx(AdditionalMessageAlert, { text: additionalMessage }),
+      !hasMissingParameters && isLoading && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.LoadingItem, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.LoadingItem, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.LoadingItem, {})
+      ] }),
+      !hasMissingParameters && !isLoading && error && /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.ErrorHeading, { text: error?.message || "Something went wrong" })
+    ] }) })
+  ] });
+});
+function LookupOptionsList({
+  options,
+  fallbackOptions,
+  onOptionSelect
+}) {
+  const { isOptionSelected } = comboboxDropdownContext.useComboBoxDropdownContext();
+  const { currentItem } = NavigationContext.useNavigationContext(options, []);
+  useKeyboardBinding.useKeyboardBinding({
+    options,
+    fallbackOptions
+  });
+  function handleOptionSelect(option) {
+    onOptionSelect(option);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.List, { className: css.css({ "&:not(:last-child)": { mb: "1" } }), children: /* @__PURE__ */ jsxRuntime.jsx(
+    DropdownListOptions,
+    {
+      fallbackOptions,
+      options,
+      currentItem,
+      isOptionSelected,
+      handleOptionSelect
+    }
+  ) });
+}
+function DropdownListOptions({
+  options,
+  fallbackOptions,
+  currentItem,
+  isOptionSelected,
+  handleOptionSelect
+}) {
+  const items = options.length ? options : fallbackOptions;
+  const isFallback = !options.length;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    isFallback && /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.NoOptionsHeading, { text: "No options found" }),
+    isFallback && !!items.length && /* @__PURE__ */ jsxRuntime.jsx("hr", { className: css.css({ my: 2 }) }),
+    items.map((option, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+      Option.default,
+      {
+        option,
+        selected: isOptionSelected(option),
+        current: deepEqual(option, currentItem),
+        onSelect: () => handleOptionSelect(option)
+      },
+      idx
+    ))
+  ] });
+}
+function OptionsParametersRequiredAlert() {
+  const styles2 = lookupOptionsRecipe();
+  return /* @__PURE__ */ jsxRuntime.jsxs(alert.Root, { className: styles2["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: styles2["required-message-title"], children: "Please select parameters above to display lists" })
+  ] });
+}
+function AdditionalMessageAlert({ text }) {
+  const styles2 = lookupOptionsRecipe();
+  return /* @__PURE__ */ jsxRuntime.jsxs(alert.Root, { className: styles2["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: styles2["additional-message-title"], children: text })
+  ] });
+}
+function aggregateOptions(options, searchValue, findByIdOption) {
+  const result = [];
+  if (searchValue) {
+    if (findByIdOption) {
+      result.push(findByIdOption);
+    } else {
+      result.push({
+        label: searchValue,
+        value: searchValue,
+        hint: "custom",
+        hintPrefix: "ID:"
+      });
+    }
+  }
+  result.push(...options);
+  return deduplicateOptions(result);
+}
+function deduplicateOptions(options) {
+  const uniqueOptions = /* @__PURE__ */ new Set();
+  return options.filter((option) => {
+    if (uniqueOptions.has(option.value)) return false;
+    uniqueOptions.add(option.value);
+    return true;
+  });
+}
+
+exports.AdditionalMessageAlert = AdditionalMessageAlert;
+exports.LookupOptionsCategoryContent = LookupOptionsCategoryContent;
+exports.OptionsParametersRequiredAlert = OptionsParametersRequiredAlert;

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

@@ -0,0 +1,19 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var index = require('../../../DropdownUI/index.cjs');
+var OptionsList = require('../OptionsList.cjs');
+
+function OptionsCategoryContent({ onOptionSelect }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.Panel, { children: /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.List, { children: /* @__PURE__ */ jsxRuntime.jsx(OptionsList.OptionsList, { onOptionSelect }) }) });
+}
+
+exports.OptionsCategoryContent = OptionsCategoryContent;

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

@@ -0,0 +1,24 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var comboboxDropdownContext = require('../../context/combobox-dropdown-context.cjs');
+var shared = require('../../shared.cjs');
+var index = require('../../../DropdownUI/index.cjs');
+var OptionsList = require('../OptionsList.cjs');
+var index$1 = require('./LookupOptions/index.cjs');
+
+function RootCategoryContent({ onOptionSelect }) {
+  const { availableCategories } = comboboxDropdownContext.useComboBoxDropdownContext();
+  const optionsList = /* @__PURE__ */ jsxRuntime.jsx(OptionsList.OptionsList, { onOptionSelect });
+  return /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.Panel, { children: availableCategories?.includes(shared.DropdownCategoryType.LOOKUP_OPTIONS) ? /* @__PURE__ */ jsxRuntime.jsx(index$1.LookupOptionsCategoryContent, { onOptionSelect, children: optionsList }) : /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.List, { children: optionsList }) });
+}
+
+exports.RootCategoryContent = RootCategoryContent;

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

@@ -0,0 +1,19 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var index = require('../../../DropdownUI/index.cjs');
+var OptionsList = require('../OptionsList.cjs');
+
+function VariablesCategoryContent({ onOptionSelect }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.Panel, { children: /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.List, { children: /* @__PURE__ */ jsxRuntime.jsx(OptionsList.OptionsList, { onOptionSelect }) }) });
+}
+
+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/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var sdk = require('@membranehq/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,40 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var index = require('../../DropdownUI/index.cjs');
+var NavigationContext = require('./KeyboardNavigation/NavigationContext.cjs');
+var comboboxDropdownContext = require('../context/combobox-dropdown-context.cjs');
+
+const DrillUpButton = React.forwardRef(
+  ({ onClick, ...props }, ref) => {
+    const { drillUp, drillDownStackTop } = comboboxDropdownContext.useComboBoxDropdownContext();
+    const { currentItem } = NavigationContext.useNavigationContext();
+    if (!drillDownStackTop) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      index.DropdownUI.BackButton,
+      {
+        ref,
+        onClick: (e) => {
+          drillUp();
+          onClick?.(e);
+        },
+        "data-current": currentItem === "drill-up" ? true : void 0,
+        ...props,
+        children: drillDownStackTop.label
+      }
+    );
+  }
+);
+
+exports.DrillUpButton = DrillUpButton;

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

@@ -0,0 +1,61 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var index$1 = require('../../DropdownUI/index.cjs');
+var comboboxDropdownContext = require('../context/combobox-dropdown-context.cjs');
+var comboboxDropdownStack = require('../context/combobox-dropdown-stack.cjs');
+var ActiveCategoryContent = require('./ActiveCategoryContent.cjs');
+var DrillUpButton = require('./DrillUpButton.cjs');
+var index = require('../DropdownPopover/index.cjs');
+var NavigationContext = require('./KeyboardNavigation/NavigationContext.cjs');
+var SearchInput = require('./SearchInput.cjs');
+
+function Dropdown({
+  topDropdownPanelComponent,
+  autoFocusOnSearch,
+  onOptionSelect,
+  editorRef,
+  searchInputRef,
+  children
+}) {
+  const { availableCategories } = comboboxDropdownContext.useComboBoxDropdownContext();
+  if (!availableCategories) {
+    return /* @__PURE__ */ jsxRuntime.jsx(comboboxDropdownStack.DropdownStackContextProvider, { editorRef, children: /* @__PURE__ */ jsxRuntime.jsxs(index.DropdownPopoverProvider, { disabled: true, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(index.DropdownAnchor, { children }),
+      /* @__PURE__ */ jsxRuntime.jsx(index.DropdownPopoverContent, { children: /* @__PURE__ */ jsxRuntime.jsxs(index$1.DropdownUI.List, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(index$1.DropdownUI.LoadingItem, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(index$1.DropdownUI.LoadingItem, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(index$1.DropdownUI.LoadingItem, {})
+      ] }) })
+    ] }) });
+  }
+  if (availableCategories?.length < 1) {
+    return /* @__PURE__ */ jsxRuntime.jsx(comboboxDropdownStack.DropdownStackContextProvider, { editorRef, children: /* @__PURE__ */ jsxRuntime.jsxs(index.DropdownPopoverProvider, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(index.DropdownAnchor, { children }),
+      /* @__PURE__ */ jsxRuntime.jsx(index.DropdownPopoverContent, { children: /* @__PURE__ */ jsxRuntime.jsxs(index$1.DropdownUI.List, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(index$1.DropdownUI.LoadingItem, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(index$1.DropdownUI.LoadingItem, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(index$1.DropdownUI.LoadingItem, {})
+      ] }) })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(comboboxDropdownStack.DropdownStackContextProvider, { editorRef, children: /* @__PURE__ */ jsxRuntime.jsxs(index.DropdownPopoverProvider, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(index.DropdownAnchor, { children }),
+    /* @__PURE__ */ jsxRuntime.jsx(NavigationContext.NavigationContextProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(index.DropdownPopoverContent, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DrillUpButton.DrillUpButton, {}),
+      topDropdownPanelComponent && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: topDropdownPanelComponent }),
+      /* @__PURE__ */ jsxRuntime.jsx(SearchInput.SearchInput, { ref: searchInputRef, autoFocus: autoFocusOnSearch }),
+      /* @__PURE__ */ jsxRuntime.jsx(ActiveCategoryContent.ActiveCategoryContent, { onOptionSelect })
+    ] }) })
+  ] }) });
+}
+
+exports.Dropdown = Dropdown;