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

package/dist/esm/components/ComboBox/Edit/OptionSelector.mjs

@@ -0,0 +1,160 @@
+"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 clsx from 'clsx';
+import { forwardRef, useRef } from 'react';
+import '../../ComboBoxElements/TipTapEditor/Editor.mjs';
+import '../../ComboBoxElements/TipTapEditor/EditorStandAlone.mjs';
+import '../../ComboBoxElements/TipTapEditor/TagComponent.mjs';
+import '../../SvgIcon/index.mjs';
+import '@integration-app/sdk';
+import 'fuse';
+import { isClickOnEditorComponent } from '../../ComboBoxElements/TipTapEditor/helpers/clicks.mjs';
+import { ActionBar } from '../../DataBuilderUI/index.mjs';
+import { getRefElement } from '../../../helpers/getRefElement.mjs';
+import classes from './OptionSelector.module.css.mjs';
+import { ComboBoxTabType } from '../types.mjs';
+import { Dropdown } from '../Dropdown/Dropdown.mjs';
+import '../../DropdownUI/index.mjs';
+import '../context/combobox-dropdown-search.mjs';
+import { useComboBoxDropdownContext } from '../context/combobox-dropdown-context.mjs';
+import '../Dropdown/tabs.mjs';
+import { useComboBox } from '../context/combobox-context.mjs';
+import { FieldWrapper } from '../../ComboBoxElements/FieldWrapper.mjs';
+import { ComboBoxValue } from '../Value/index.mjs';
+import { isDefinedValue } from '../Value/Schema.mjs';
+
+function OptionSelector({
+  placeholder,
+  className,
+  onChange,
+  disabled,
+  required,
+  valueComponent
+}) {
+  const valueRef = useRef(null);
+  const fieldValueRef = useRef(null);
+  const dropdownRef = useRef(null);
+  const {
+    value,
+    refsToIgnoreClick,
+    // Dropdown related
+    isDropdownOpen,
+    openDropdown,
+    closeDropdown,
+    topDropdownPanelComponent
+  } = useComboBox();
+  const { activeTab } = useComboBoxDropdownContext();
+  function handleOpenDropdown() {
+    if (disabled) return;
+    openDropdown();
+  }
+  function handleCloseDropdown() {
+    closeDropdown();
+  }
+  const refs = [valueRef, fieldValueRef, ...refsToIgnoreClick ?? []];
+  const handleClick = function handleClick2(e) {
+    const isClickInsideAnyOfElements = refs.map(getRefElement).some((el) => el.contains(e?.target));
+    if (isClickInsideAnyOfElements && !isClickOnEditorComponent(e?.target, fieldValueRef?.current)) {
+      handleOpenDropdown();
+      e?.stopPropagation();
+    }
+  };
+  function handleOptionSelect(option) {
+    const keepDropdownOpen = activeTab && [
+      ComboBoxTabType.SELECT_FROM_COLLECTION_DYNAMICALLY,
+      ComboBoxTabType.SELECT_FROM_UDM_DYNAMICALLY
+    ].includes(activeTab);
+    onChange(option);
+    if (!keepDropdownOpen) {
+      handleCloseDropdown();
+    }
+  }
+  const handleOnDelete = () => {
+    onChange(void 0);
+    handleCloseDropdown();
+  };
+  const requiredAndEmptyField = required && isDefinedValue(value);
+  return /* @__PURE__ */ jsxs(
+    FieldWrapper,
+    {
+      role: "combobox",
+      ref: fieldValueRef,
+      "aria-expanded": isDropdownOpen,
+      onClick: handleClick,
+      disabled,
+      requiredAndEmptyField,
+      children: [
+        /* @__PURE__ */ jsx(
+          Value,
+          {
+            ref: valueRef,
+            valueComponent,
+            placeholder,
+            disabled,
+            className,
+            onChange,
+            onDelete: handleOnDelete,
+            isEdited: isDropdownOpen
+          }
+        ),
+        isDropdownOpen && /* @__PURE__ */ jsx(
+          Dropdown,
+          {
+            ref: dropdownRef,
+            referenceElement: fieldValueRef,
+            topDropdownPanelComponent,
+            autoFocusOnSearch: true,
+            onSelect: handleOptionSelect,
+            onClose: handleCloseDropdown
+          }
+        )
+      ]
+    }
+  );
+}
+const Value = forwardRef(
+  ({
+    className,
+    valueComponent,
+    placeholder,
+    onClick,
+    onChange,
+    onDelete,
+    disabled,
+    isEdited
+  }, ref) => {
+    const { value } = useComboBox();
+    return /* @__PURE__ */ jsxs("span", { className: classes.valueWrapper, ref, children: [
+      !!valueComponent ? /* @__PURE__ */ jsx(Fragment, { children: valueComponent }) : /* @__PURE__ */ jsx(
+        ComboBoxValue,
+        {
+          className,
+          placeholder,
+          onClick,
+          onChange,
+          disabled,
+          isEdited
+        }
+      ),
+      isDefinedValue(value) && onDelete && /* @__PURE__ */ jsx(
+        ActionBar,
+        {
+          className: clsx(
+            classes.actionBar,
+            isEdited && classes.actionBar__visible
+          ),
+          children: /* @__PURE__ */ jsx(ActionBar.DeleteButton, { onClick: onDelete })
+        }
+      )
+    ] });
+  }
+);
+
+export { OptionSelector };

package/dist/esm/components/ComboBox/Edit/OptionSelector.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 = ".OptionSelector-module_valueWrapper__bSY1e {\n  position: relative;\n  display: inline-flex;\n  max-width: 100%;\n  --tw-text-opacity: 1;\n  color: rgb(0 0 0 / var(--tw-text-opacity));\n  padding-right: 0.375rem;\n  width: -moz-fit-content;\n  width: fit-content;\n  transition:\n    width 0.5s,\n    height 0.5s\n}\n\n.OptionSelector-module_valueWrapper__bSY1e[role='combobox'] span:empty {\n  --tw-bg-opacity: 1;\n  background-color: rgb(170 170 170 / var(--tw-bg-opacity));\n  min-width: 7rem\n}\n\n.OptionSelector-module_actionBar__YRz10:not(.OptionSelector-module_actionBar__visible__3kDge) {\n  display: none\n}\n\n.OptionSelector-module_actionBar__visible__3kDge {\n  position: absolute;\n  left: 100%;\n  top: 0px;\n  bottom: 0px;\n  margin-right: 0px;\n  width: 0px;\n  z-index: 1\n}\n";
+var classes = {"valueWrapper":"OptionSelector-module_valueWrapper__bSY1e","actionBar":"OptionSelector-module_actionBar__YRz10","actionBar__visible":"OptionSelector-module_actionBar__visible__3kDge"};
+styleInject(css_248z);
+
+export { classes as default };

package/dist/esm/components/ComboBox/Edit/TextInput.mjs

@@ -0,0 +1,157 @@
+"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 { isFormula, getFormula } from '@integration-app/sdk';
+import { useRef, useEffect } from 'react';
+import { getFormulas } from '../../DataBuilder/Formula/index.mjs';
+import { getRefElement } from '../../../helpers/getRefElement.mjs';
+import { ComboBoxTabType } from '../types.mjs';
+import { useComboboxEditor, Editor } from '../../ComboBoxElements/TipTapEditor/Editor.mjs';
+import '../../ComboBoxElements/TipTapEditor/EditorStandAlone.mjs';
+import '../../ComboBoxElements/TipTapEditor/TagComponent.mjs';
+import '../../SvgIcon/index.mjs';
+import 'fuse';
+import { isClickOnEditorCustomTagComponent } from '../../ComboBoxElements/TipTapEditor/helpers/clicks.mjs';
+import { transformEditorSchemaToValue } from '../../ComboBoxElements/TipTapEditor/helpers/transformEditorSchemaToValue.mjs';
+import { useComboBox } from '../context/combobox-context.mjs';
+import { Dropdown } from '../Dropdown/Dropdown.mjs';
+import '../../DropdownUI/index.mjs';
+import { useComboBoxDropdownSearchContext } from '../context/combobox-dropdown-search.mjs';
+import { useComboBoxDropdownContext } from '../context/combobox-dropdown-context.mjs';
+import '../Dropdown/tabs.mjs';
+import { FieldWrapper } from '../../ComboBoxElements/FieldWrapper.mjs';
+import { isDefinedValue } from '../Value/Schema.mjs';
+
+function TextInput({
+  placeholder,
+  className,
+  onChange,
+  disabled,
+  required
+}) {
+  const textInputRef = useRef(null);
+  const fieldValueRef = useRef(null);
+  const dropdownRef = useRef(null);
+  const {
+    value,
+    refsToIgnoreClick,
+    // Dropdown related
+    isDropdownOpen,
+    openDropdown,
+    closeDropdown,
+    topDropdownPanelComponent
+  } = useComboBox();
+  const { setSearchSource, searchSource } = useComboBoxDropdownSearchContext();
+  const { editor, pasteTag } = useComboboxEditor({
+    value,
+    onChange,
+    onEnter: ({ editor: editor2 }) => {
+      onChange(transformEditorSchemaToValue(editor2?.getJSON() ?? {}));
+      resetActiveTab();
+      handleCloseDropdown();
+    },
+    placeholder,
+    allowEditorSearchClear: searchSource === "editor"
+  });
+  useEffect(() => {
+    editor?.setEditable(!disabled, false);
+  }, [disabled, editor]);
+  const { activeTab, resetActiveTab } = useComboBoxDropdownContext();
+  function handleOpenDropdown() {
+    if (disabled) return;
+    openDropdown();
+  }
+  function handleCloseDropdown() {
+    closeDropdown();
+  }
+  const refs = [textInputRef, fieldValueRef, ...refsToIgnoreClick ?? []];
+  const handleClick = function(e) {
+    const isClickInsideAnyOfElements = refs.map(getRefElement).some((el) => el.contains(e?.target));
+    if (isClickInsideAnyOfElements && !isClickOnEditorCustomTagComponent(
+      e?.target,
+      fieldValueRef?.current
+    )) {
+      handleOpenDropdown();
+      e?.stopPropagation();
+    }
+  };
+  const handleOptionSelect = (variable) => {
+    if (shouldRewriteValue(activeTab)) {
+      onChange(variable);
+      if (shouldCloseDropdown(activeTab)) {
+        resetActiveTab();
+        handleCloseDropdown();
+      }
+    } else {
+      const openTagCombobox = valueHasDropdownWithFormula(variable);
+      if (openTagCombobox) {
+        handleCloseDropdown();
+      }
+      pasteTag(variable, { autoOpen: openTagCombobox });
+    }
+  };
+  const requiredAndEmptyField = required && isDefinedValue(value);
+  return /* @__PURE__ */ jsxs(
+    FieldWrapper,
+    {
+      role: "combobox",
+      ref: fieldValueRef,
+      "aria-expanded": isDropdownOpen,
+      onClick: handleClick,
+      disabled,
+      requiredAndEmptyField,
+      children: [
+        /* @__PURE__ */ jsx(
+          Editor,
+          {
+            className,
+            ref: textInputRef,
+            editor,
+            onFocus: () => {
+              setSearchSource("editor");
+            }
+          }
+        ),
+        isDropdownOpen && /* @__PURE__ */ jsx(
+          Dropdown,
+          {
+            ref: dropdownRef,
+            referenceElement: fieldValueRef,
+            topDropdownPanelComponent,
+            onSelect: handleOptionSelect,
+            onClose: handleCloseDropdown,
+            autoFocusOnSearch: false
+          }
+        )
+      ]
+    }
+  );
+}
+function shouldRewriteValue(tab) {
+  return tab && [
+    ComboBoxTabType.OPTIONS,
+    ComboBoxTabType.CUSTOM,
+    ComboBoxTabType.LOOKUP_OPTIONS,
+    ComboBoxTabType.SELECT_FROM_COLLECTION_DYNAMICALLY,
+    ComboBoxTabType.SELECT_FROM_UDM_DYNAMICALLY
+  ].includes(tab);
+}
+function shouldCloseDropdown(tab) {
+  return tab && [
+    ComboBoxTabType.OPTIONS,
+    ComboBoxTabType.CUSTOM,
+    ComboBoxTabType.LOOKUP_OPTIONS
+  ].includes(tab);
+}
+function valueHasDropdownWithFormula(value) {
+  if (!isFormula(value)) return false;
+  return !!getFormulas()[getFormula(value)?.type]?.DropdownComponent;
+}
+
+export { TextInput };

package/dist/esm/components/ComboBox/Value/Formula.mjs

@@ -0,0 +1,35 @@
+"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 { forwardRef } from 'react';
+import { getFormula } from '@integration-app/sdk';
+import { getFormulas } from '../../DataBuilder/Formula/index.mjs';
+import NoUiFormula from '../../DataBuilder/Formula/noUi.mjs';
+
+const ComboBoxFormulaValue = forwardRef(
+  ({ value, ...props }, ref) => {
+    const formula = getFormula(value);
+    if (!formula) {
+      return /* @__PURE__ */ jsx(NoUiFormula, {});
+    }
+    const formulaSpec = getFormulas()[formula.type];
+    if (!formulaSpec?.component) {
+      return /* @__PURE__ */ jsx(NoUiFormula, {});
+    }
+    const componentProps = {
+      formula,
+      ...props
+    };
+    const Component = formulaSpec.component;
+    return /* @__PURE__ */ jsx(Component, { ...componentProps, ref });
+  }
+);
+ComboBoxFormulaValue.displayName = "ComboBoxFormulaValue";
+
+export { ComboBoxFormulaValue };

package/dist/esm/components/ComboBox/Value/Schema.mjs

@@ -0,0 +1,143 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { ComboBoxTag, getClassFromSchema } from '../../ComboBoxElements/ComboBoxTag.mjs';
+import { SvgIconType } from '../../SvgIcon/index.mjs';
+import { Truncate } from '../../Truncate/index.mjs';
+import { CUSTOM_ARRAY_VALUE_LABEL, CUSTOM_OBJECT_VALUE_LABEL } from '../options-factories/custom-field.mjs';
+import { TagPlaceholder } from '../../Tag/TagPlaceholder.mjs';
+import { getSchemaFromValue, getReferenceCollectionPointerForSchema } from '@integration-app/sdk';
+import useSWR from 'swr';
+import { useIntegrationApp } from '../../../contexts/integration-app-context.mjs';
+import { useIntegrationAppConnection } from '../../../contexts/integration-app-connection-context.mjs';
+
+const ComboBoxSchemaValue = forwardRef(
+  ({
+    value,
+    schema: providedSchema,
+    variablesSchema,
+    className,
+    disabled,
+    ...props
+  }, ref) => {
+    let valueElement;
+    const schema = providedSchema?.type ? providedSchema : getSchemaFromValue(value, variablesSchema);
+    if (getReferenceCollectionPointerForSchema(schema)) {
+      return /* @__PURE__ */ jsx(ReferenceCollectionValue, { schema, value });
+    }
+    if (schema?.referenceRecords) {
+      const selectedRecord = schema.referenceRecords.find((r) => r.id == value);
+      if (selectedRecord?.name) {
+        valueElement = /* @__PURE__ */ jsx(Truncate, { children: selectedRecord.name });
+      }
+    }
+    if (!valueElement) {
+      switch (schema?.type) {
+        case "boolean":
+          valueElement = value === void 0 ? void 0 : value ? /* @__PURE__ */ jsx(Fragment, { children: "Yes" }) : /* @__PURE__ */ jsx(Fragment, { children: "No" });
+          break;
+        case "object":
+          if (Object.keys(schema?.properties ?? {}).length === 0) {
+            valueElement = /* @__PURE__ */ jsx(Truncate, { children: CUSTOM_OBJECT_VALUE_LABEL });
+          }
+          break;
+        case "array":
+          valueElement = /* @__PURE__ */ jsx(Truncate, { children: CUSTOM_ARRAY_VALUE_LABEL });
+          break;
+        case "string":
+        case "number":
+        case "integer":
+        default:
+          if (value !== void 0) {
+            valueElement = /* @__PURE__ */ jsx(Truncate, { children: value?.toString() });
+          }
+      }
+    }
+    if (valueElement) {
+      return /* @__PURE__ */ jsx(
+        ComboBoxTag,
+        {
+          className: clsx(className, getClassFromSchema(schema)),
+          ref,
+          disabled,
+          ...getIconProps(schema),
+          ...props,
+          children: valueElement
+        }
+      );
+    } else {
+      return /* @__PURE__ */ jsx(TagPlaceholder, { ref, ...props });
+    }
+  }
+);
+ComboBoxSchemaValue.displayName = "ComboBoxSchemaValue";
+function isDefinedValue(value) {
+  return value !== null && value !== void 0;
+}
+function getIconProps(schema) {
+  switch (schema?.type) {
+    case "string":
+      return {
+        icon: SvgIconType.SchemaType_string
+      };
+    case "boolean":
+      return {
+        icon: SvgIconType.SchemaType_boolean
+      };
+    case "number":
+    case "integer":
+      return {
+        icon: SvgIconType.Braces
+      };
+    default:
+      return void 0;
+  }
+}
+function ReferenceCollectionValue({
+  value,
+  schema
+}) {
+  const client = useIntegrationApp();
+  const { connectionId } = useIntegrationAppConnection();
+  const strValue = value?.toString() ?? "";
+  const key = `reference-value-${connectionId}-${strValue}`;
+  const pointer = getReferenceCollectionPointerForSchema(
+    schema
+  );
+  const { data: findResponse, isLoading } = useSWR(
+    client && connectionId ? key : void 0,
+    async () => {
+      try {
+        return await client.connection(connectionId).dataCollection(pointer.key, pointer.parameters).findById({ id: value });
+      } catch (e) {
+        return {};
+      }
+    }
+  );
+  const record = findResponse?.record;
+  if (isLoading) {
+    return /* @__PURE__ */ jsxs(ComboBoxTag, { children: [
+      strValue,
+      " (...loading)"
+    ] });
+  } else if (record?.name) {
+    return /* @__PURE__ */ jsxs(ComboBoxTag, { children: [
+      record.name,
+      " (id: ",
+      record.id,
+      ")"
+    ] });
+  } else {
+    return /* @__PURE__ */ jsx(ComboBoxTag, { children: strValue });
+  }
+}
+
+export { ComboBoxSchemaValue, isDefinedValue };

package/dist/esm/components/ComboBox/Value/index.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 { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { isFormula } from '@integration-app/sdk';
+import { ComboBoxTag } from '../../ComboBoxElements/ComboBoxTag.mjs';
+import { TagPlaceholder } from '../../Tag/TagPlaceholder.mjs';
+import { useComboBox } from '../context/combobox-context.mjs';
+import { ComboBoxFormulaValue } from './Formula.mjs';
+import { ComboBoxSchemaValue, isDefinedValue } from './Schema.mjs';
+
+const ComboBoxValue = forwardRef(function({ placeholder, isEdited, disabled, onClick, onChange, className }, ref) {
+  const { value, variablesSchema, schema, options, optionFactories } = useComboBox();
+  const isValueDefined = isDefinedValue(value);
+  if (isEdited && (!isValueDefined || value === "")) {
+    return /* @__PURE__ */ jsx(TagPlaceholder, { ref, className });
+  }
+  if (isValueDefined) {
+    if (isFormula(value)) {
+      return /* @__PURE__ */ jsx(
+        ComboBoxFormulaValue,
+        {
+          ref,
+          value,
+          schema,
+          variablesSchema,
+          optionFactories,
+          disabled,
+          onClick,
+          onChange,
+          className
+        }
+      );
+    }
+    if (options) {
+      const selectedOption = options.find((option) => option.value === value);
+      if (selectedOption) {
+        return /* @__PURE__ */ jsx(ComboBoxTag, { ref, disabled, className, children: selectedOption.label });
+      }
+    }
+    return /* @__PURE__ */ jsx(
+      ComboBoxSchemaValue,
+      {
+        ref,
+        value,
+        schema,
+        variablesSchema,
+        disabled,
+        onClick,
+        className
+      }
+    );
+  } else {
+    return /* @__PURE__ */ jsx(TagPlaceholder, { ref, onClick, className, children: placeholder });
+  }
+});
+ComboBoxValue.displayName = "ComboBoxValue";
+
+export { ComboBoxFormulaValue, ComboBoxSchemaValue, ComboBoxValue, isDefinedValue };

package/dist/esm/components/ComboBox/context/combobox-context.mjs

@@ -0,0 +1,93 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useState, useEffect, useContext } from 'react';
+
+const ComboBoxContext = createContext({
+  value: null,
+  /* FIXME: strictNullCheck temporary fix */
+  // @ts-expect-error TS(2322): Type 'null' is not assignable to type 'DataSchema ... Remove this comment to see the full error message
+  schema: null,
+  /* FIXME: strictNullCheck temporary fix */
+  // @ts-expect-error TS(2322): Type 'null' is not assignable to type 'IValueSpec ... Remove this comment to see the full error message
+  valueSpec: null,
+  variablesSchema: null,
+  /* FIXME: strictNullCheck temporary fix */
+  // @ts-expect-error TS(2322): Type 'null' is not assignable to type 'IComboBoxOp... Remove this comment to see the full error message
+  options: null,
+  /* FIXME: strictNullCheck temporary fix */
+  // @ts-expect-error TS(2322): Type 'null' is not assignable to type 'IComboBoxOp... Remove this comment to see the full error message
+  optionFactories: null,
+  allowCustom: false,
+  isDropdownOpen: false,
+  openDropdown: () => {
+  },
+  closeDropdown: () => {
+  }
+});
+ComboBoxContext.displayName = "ComboBoxOptionsContext";
+const ComboBoxProvider = ({
+  value,
+  schema,
+  valueSpec,
+  variablesSchema,
+  options,
+  optionFactories,
+  refsToIgnoreClick,
+  // Dropdown
+  onDropdownOpen,
+  onDropdownClose,
+  autoOpen,
+  topDropdownPanelComponent,
+  children
+}) => {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  useEffect(() => {
+    if (autoOpen) {
+      openDropdown();
+    }
+  }, [autoOpen]);
+  function openDropdown() {
+    if (isDropdownOpen) return;
+    setTimeout(() => {
+      setIsDropdownOpen(true);
+      onDropdownOpen?.();
+    }, 10);
+  }
+  function closeDropdown() {
+    if (!isDropdownOpen) return;
+    setIsDropdownOpen(false);
+    onDropdownClose?.();
+  }
+  return /* @__PURE__ */ jsx(
+    ComboBoxContext.Provider,
+    {
+      value: {
+        value,
+        schema,
+        valueSpec,
+        variablesSchema,
+        options,
+        optionFactories,
+        allowCustom: valueSpec?.allowCustom ?? false,
+        refsToIgnoreClick,
+        isDropdownOpen,
+        openDropdown,
+        closeDropdown,
+        topDropdownPanelComponent
+      },
+      children
+    }
+  );
+};
+function useComboBox() {
+  return useContext(ComboBoxContext);
+}
+
+export { ComboBoxProvider, useComboBox };