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

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

@@ -2,31 +2,28 @@
 /*
  * 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 } from 'react/jsx-runtime';
+import { 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 { DropdownCategoryType } 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 '../Dropdown/categoryContentMapping.mjs';
 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';
+import { isDefinedValue } from '../Value/isDefinedValue.mjs';
+import { useComboBoxDropdownSearchContext } from '../context/combobox-dropdown-search.mjs';
+import { Dropdown } from '../Dropdown/Dropdown.mjs';
 
 function TextInput({
   placeholder,
@@ -37,7 +34,6 @@ function TextInput({
 }) {
   const textInputRef = useRef(null);
   const fieldValueRef = useRef(null);
-  const dropdownRef = useRef(null);
   const {
     value,
     refsToIgnoreClick,
@@ -53,8 +49,7 @@ function TextInput({
     onChange,
     onEnter: ({ editor: editor2 }) => {
       onChange(transformEditorSchemaToValue(editor2?.getJSON() ?? {}));
-      resetActiveTab();
-      handleCloseDropdown();
+      closeDropdown();
     },
     placeholder,
     allowEditorSearchClear: searchSource === "editor"
@@ -62,14 +57,11 @@ function TextInput({
   useEffect(() => {
     editor?.setEditable(!disabled, false);
   }, [disabled, editor]);
-  const { activeTab, resetActiveTab } = useComboBoxDropdownContext();
+  const { activeCategory } = 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));
@@ -82,22 +74,21 @@ function TextInput({
     }
   };
   const handleOptionSelect = (variable) => {
-    if (shouldRewriteValue(activeTab)) {
+    if (shouldRewriteValue(activeCategory)) {
       onChange(variable);
-      if (shouldCloseDropdown(activeTab)) {
-        resetActiveTab();
-        handleCloseDropdown();
+      if (shouldCloseDropdown(activeCategory)) {
+        closeDropdown();
       }
     } else {
       const openTagCombobox = valueHasDropdownWithFormula(variable);
       if (openTagCombobox) {
-        handleCloseDropdown();
+        closeDropdown();
       }
       pasteTag(variable, { autoOpen: openTagCombobox });
     }
   };
   const requiredAndEmptyField = required && isDefinedValue(value);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     FieldWrapper,
     {
       role: "combobox",
@@ -106,48 +97,42 @@ function TextInput({
       onClick: handleClick,
       disabled,
       requiredAndEmptyField,
-      children: [
-        /* @__PURE__ */ jsx(
-          Editor,
-          {
-            className,
-            ref: textInputRef,
-            editor,
-            onFocus: () => {
-              setSearchSource("editor");
+      children: /* @__PURE__ */ jsx(
+        Dropdown,
+        {
+          topDropdownPanelComponent,
+          onOptionSelect: handleOptionSelect,
+          autoFocusOnSearch: false,
+          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 shouldRewriteValue(category) {
+  return category && [
+    DropdownCategoryType.OPTIONS,
+    DropdownCategoryType.CUSTOM,
+    DropdownCategoryType.LOOKUP_OPTIONS,
+    DropdownCategoryType.SELECT_FROM_UDM_DYNAMICALLY
+  ].includes(category);
 }
-function shouldCloseDropdown(tab) {
-  return tab && [
-    ComboBoxTabType.OPTIONS,
-    ComboBoxTabType.CUSTOM,
-    ComboBoxTabType.LOOKUP_OPTIONS
-  ].includes(tab);
+function shouldCloseDropdown(category) {
+  return category && [
+    DropdownCategoryType.OPTIONS,
+    DropdownCategoryType.CUSTOM,
+    DropdownCategoryType.LOOKUP_OPTIONS
+  ].includes(category);
 }
 function valueHasDropdownWithFormula(value) {
   if (!isFormula(value)) return false;

package/dist/esm/components/ComboBox/Value/{index.mjs → ComboBoxValue.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';
 
@@ -13,7 +13,8 @@ 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';
+import { ComboBoxSchemaValue } from './Schema.mjs';
+import { isDefinedValue } from './isDefinedValue.mjs';
 
 const ComboBoxValue = forwardRef(function({ placeholder, isEdited, disabled, onClick, onChange, className }, ref) {
   const { value, variablesSchema, schema, options, optionFactories } = useComboBox();
@@ -62,4 +63,4 @@ const ComboBoxValue = forwardRef(function({ placeholder, isEdited, disabled, onC
 });
 ComboBoxValue.displayName = "ComboBoxValue";
 
-export { ComboBoxFormulaValue, ComboBoxSchemaValue, ComboBoxValue, isDefinedValue };
+export { ComboBoxValue };

package/dist/esm/components/ComboBox/Value/Formula.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';
 

package/dist/esm/components/ComboBox/Value/Schema.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,7 +10,7 @@ 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 { SvgIconType } from '../../SvgIcon/svg-icon-type.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';
@@ -79,9 +79,6 @@ const ComboBoxSchemaValue = forwardRef(
   }
 );
 ComboBoxSchemaValue.displayName = "ComboBoxSchemaValue";
-function isDefinedValue(value) {
-  return value !== null && value !== void 0;
-}
 function getIconProps(schema) {
   switch (schema?.type) {
     case "string":
@@ -140,4 +137,4 @@ function ReferenceCollectionValue({
   }
 }
 
-export { ComboBoxSchemaValue, isDefinedValue };
+export { ComboBoxSchemaValue };

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

@@ -0,0 +1,13 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.4-beta.0
+ */
+'use client';
+
+function isDefinedValue(value) {
+  return value !== null && value !== void 0;
+}
+
+export { isDefinedValue };

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

@@ -2,12 +2,12 @@
 /*
  * 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 } from 'react/jsx-runtime';
-import { createContext, useState, useEffect, useContext } from 'react';
+import { createContext, useId, useState, useEffect, useContext } from 'react';
 
 const ComboBoxContext = createContext({
   value: null,
@@ -47,6 +47,7 @@ const ComboBoxProvider = ({
   topDropdownPanelComponent,
   children
 }) => {
+  const scopedComboboxId = useId();
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   useEffect(() => {
     if (autoOpen) {
@@ -69,6 +70,7 @@ const ComboBoxProvider = ({
     ComboBoxContext.Provider,
     {
       value: {
+        scopedComboboxId,
         value,
         schema,
         valueSpec,

package/dist/esm/components/ComboBox/context/combobox-dropdown-context.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,33 +10,31 @@ import { jsx } from 'react/jsx-runtime';
 import { createContext, useState, useEffect, useCallback, useContext } from 'react';
 import usePromise from '../../../_modules/react-use-promise.mjs';
 import deepEqual from 'fast-deep-equal';
-import { FormulaListOptionsFactory } from '../../DataBuilder/Formula/options-factory.mjs';
-import { SvgIconType } from '../../SvgIcon/index.mjs';
 import { useIntegrationAppClient } from '../../../contexts/integration-app-client-context.mjs';
 import { useIntegrationAppConnection } from '../../../contexts/integration-app-connection-context.mjs';
 import { useIntegrationAppIntegration } from '../../../contexts/integration-app-integration-context.mjs';
-import 'fuse';
 import { BooleanOptionsFactory } from '../options-factories/boolean.mjs';
 import { ConstantOptionFactory } from '../options-factories/constant.mjs';
-import { CustomFieldOptionsFactory } from '../options-factories/custom-field.mjs';
 import { EnumOptionFactory } from '../options-factories/enum.mjs';
-import 'js-convert-case';
-import '@integration-app/sdk';
-import { SchemaOptionFactory } from '../options-factories/schema.mjs';
 import { ReferenceRecordsOptionsFactory } from '../options-factories/reference-records.mjs';
-import { ReferenceUdmOptionFactory } from '../options-factories/reference-udm.mjs';
-import { ComboBoxTabType } from '../types.mjs';
-import { getAvailableTabs, getCurrentTab } from './helpers.mjs';
+import { DropdownCategoryType } from '../types.mjs';
+import { getAvailableRootCategories, getCurrentPath, getStackForPath } from './helpers.mjs';
 import { useComboBox } from './combobox-context.mjs';
 import useDataBuilder from '../../DataBuilder/data-builder-context.mjs';
+import { RootOptionFactory } from '../options-factories/root.mjs';
+import { useComboBoxDropdownSearchContext } from './combobox-dropdown-search.mjs';
 
 const ComboBoxDropdownContext = createContext({
-  availableTabs: [],
-  activeTab: ComboBoxTabType.VARIABLE,
-  setActiveTab: () => null,
-  resetActiveTab: () => null,
+  availableCategories: [],
+  activeCategory: DropdownCategoryType.ROOT,
+  drillDown: () => {
+  },
+  drillUp: () => {
+  },
   isOptionSelected: () => false,
-  generateOptions: () => [[]]
+  optionsPayload: [[], void 0, "resolved"],
+  canUseParentInputSearchValue: false,
+  drillDownStackTop: void 0
 });
 ComboBoxDropdownContext.displayName = "ComboBoxDropdownContext";
 const ComboBoxDropdownContextProvider = ({
@@ -50,18 +48,40 @@ const ComboBoxDropdownContextProvider = ({
     variablesSchema,
     variablesOnly,
     options,
-    optionFactories
+    optionFactories,
+    isDropdownOpen
   } = useComboBox();
   const { client } = useIntegrationAppClient();
   const { connectionId } = useIntegrationAppConnection();
   const { integrationId } = useIntegrationAppIntegration();
-  const [currentTab, setCurrentTab] = useState(null);
-  const [availableTabs, setAvailableTabs] = useState(
-    null
-  );
+  const { setSearchValue, searchValue, searchSource } = useComboBoxDropdownSearchContext();
+  const [drillDownOptionsStack, setDrillDownOptionsStack] = useState([]);
+  const [availableCategories, setAvailableCategories] = useState(null);
+  const [drillPath, setDrillPath] = useState([]);
   const hasVariables = variablesSchema?.type === "object" && Object.keys(variablesSchema.properties ?? {}).length > 0;
+  const recoverStack = (path, availableCategories2) => {
+    void getStackForPath(
+      path,
+      value,
+      (searchValue2, stack) => getOptions({
+        availableCategories: availableCategories2,
+        schema,
+        variablesSchema,
+        searchValue: searchValue2,
+        valueSpec,
+        drillDownStack: stack,
+        staticOptions: options,
+        optionFactories,
+        editableVariablesSchemaLocators
+      }),
+      [],
+      canUseParentInputSearchValue ? value : searchValue
+    ).then((stack) => {
+      setDrillDownOptionsStack(stack);
+    });
+  };
   useEffect(() => {
-    void getAvailableTabs({
+    void getAvailableRootCategories({
       schema,
       options,
       optionFactories,
@@ -70,8 +90,13 @@ const ComboBoxDropdownContextProvider = ({
       client,
       connectionId,
       integrationId
-    }).then((tabs) => {
-      setAvailableTabs(tabs);
+    }).then((categories) => {
+      setAvailableCategories(categories);
+      if (!isDropdownOpen) {
+        const currentPath = getCurrentPath(categories || [], value);
+        setDrillPath(currentPath);
+        recoverStack(currentPath, categories);
+      }
     });
   }, [
     schema,
@@ -83,50 +108,92 @@ const ComboBoxDropdownContextProvider = ({
     integrationId,
     connectionId
   ]);
-  const activeTab = availableTabs ? getCurrentTab(availableTabs, currentTab, value) : null;
-  const generateOptions = function(searchValue, drilldownStack) {
-    return usePromise(
-      () => getOptions({
-        activeTab,
-        // @ts-expect-error TS(2345): Argument of type 'DataSchema | undefined' is not a... Remove this comment to see the full error message
-        schema,
-        variablesSchema,
-        searchValue,
-        valueSpec,
-        drilldownStack,
-        options,
-        optionFactories,
-        editableVariablesSchemaLocators
-      }),
-      [
-        activeTab,
-        JSON.stringify(schema),
-        JSON.stringify(variablesSchema),
-        searchValue,
-        JSON.stringify(valueSpec),
-        drilldownStack.length.toString(),
-        JSON.stringify(options),
-        optionFactories?.length,
-        JSON.stringify(editableVariablesSchemaLocators)
-      ]
-    );
-  };
+  useEffect(() => {
+    if (!isDropdownOpen) {
+      resetDrillDown();
+    } else {
+      recoverStack(drillPath, availableCategories);
+    }
+  }, [isDropdownOpen]);
+  const [activeCategory] = drillPath.toReversed();
+  function drillDown(option) {
+    setSearchValue("");
+    const newStack = [...drillDownOptionsStack, option];
+    setDrillDownOptionsStack(newStack);
+    setDrillPath((path) => {
+      if (option.childCategory) {
+        return [...path, option.childCategory];
+      }
+      return path;
+    });
+  }
+  function drillUp() {
+    if (drillDownOptionsStack.length) {
+      const newStack = [...drillDownOptionsStack];
+      newStack.pop();
+      setDrillDownOptionsStack(newStack);
+      const newPath = [...drillPath];
+      newPath.pop();
+      if (!newPath.length) {
+        setDrillPath(getCurrentPath(availableCategories || [], value));
+      } else {
+        setDrillPath(newPath);
+      }
+    }
+  }
+  function resetDrillDown() {
+    setDrillDownOptionsStack([]);
+    setDrillPath(getCurrentPath(availableCategories || [], value));
+  }
+  const canUseParentInputSearchValue = !searchValue && typeof value === "string" && !!value && drillDownOptionsStack.length === 0 && searchSource === "editor";
+  const optionsPayload = usePromise(() => {
+    return getOptions({
+      availableCategories,
+      schema,
+      variablesSchema,
+      searchValue: canUseParentInputSearchValue ? value : searchValue,
+      valueSpec,
+      drillDownStack: drillDownOptionsStack,
+      staticOptions: options,
+      optionFactories,
+      editableVariablesSchemaLocators
+    });
+  }, [
+    activeCategory,
+    JSON.stringify(availableCategories),
+    JSON.stringify(schema),
+    JSON.stringify(variablesSchema),
+    value,
+    canUseParentInputSearchValue,
+    searchValue,
+    JSON.stringify(valueSpec),
+    drillDownOptionsStack.length,
+    JSON.stringify(options),
+    optionFactories?.length,
+    JSON.stringify(editableVariablesSchemaLocators)
+  ]);
   const isOptionSelected = useCallback(
     function(option) {
+      if (value === void 0 || value === null) {
+        return false;
+      }
       return deepEqual(option.value, value);
     },
     [value]
   );
+  const [drillDownStackTop] = drillDownOptionsStack.toReversed();
   return /* @__PURE__ */ jsx(
     ComboBoxDropdownContext.Provider,
     {
       value: {
-        availableTabs,
-        activeTab,
-        setActiveTab: setCurrentTab,
-        resetActiveTab: () => setCurrentTab(null),
+        availableCategories,
+        activeCategory,
+        drillDown,
+        drillUp,
         isOptionSelected,
-        generateOptions
+        optionsPayload,
+        canUseParentInputSearchValue,
+        drillDownStackTop
       },
       children
     }
@@ -136,81 +203,70 @@ function useComboBoxDropdownContext() {
   return useContext(ComboBoxDropdownContext);
 }
 async function getOptions({
-  activeTab,
+  availableCategories,
   schema,
   variablesSchema,
   searchValue,
   valueSpec,
-  drilldownStack,
-  options: staticOptions,
-  optionFactories,
+  drillDownStack,
+  staticOptions,
+  optionFactories = [],
   editableVariablesSchemaLocators
 }) {
   const factories = [...optionFactories];
-  switch (activeTab) {
-    case ComboBoxTabType.OPTIONS:
-      if (schema?.referenceUdm) {
-        factories.unshift(new ReferenceUdmOptionFactory(schema));
-      } else if (schema?.referenceRecords) {
-        factories.push(new ReferenceRecordsOptionsFactory({ schema }));
-      } else if (schema?.enum) {
-        factories.push(new EnumOptionFactory({ schema }));
-      } else if (schema?.type === "boolean") {
-        factories.push(new BooleanOptionsFactory());
-      } else if (staticOptions) {
-        factories.push(new ConstantOptionFactory(staticOptions));
-      }
-      break;
-    case ComboBoxTabType.VARIABLE:
-      factories.push(
-        new SchemaOptionFactory({
-          schema: variablesSchema,
-          editableSchemaLocators: editableVariablesSchemaLocators
-        })
-      );
-      break;
-    case ComboBoxTabType.FORMULA:
-      factories.push(new FormulaListOptionsFactory());
-      break;
-    case ComboBoxTabType.CUSTOM:
-      factories.push(new CustomFieldOptionsFactory());
-      break;
+  if (drillDownStack.length === 0) {
+    factories.push(new RootOptionFactory(availableCategories));
+    if (schema?.referenceRecords) {
+      factories.push(new ReferenceRecordsOptionsFactory({ schema }));
+    } else if (schema?.enum) {
+      factories.push(new EnumOptionFactory({ schema }));
+    } else if (schema?.type === "boolean") {
+      factories.push(new BooleanOptionsFactory());
+    } else if (staticOptions) {
+      factories.push(new ConstantOptionFactory(staticOptions));
+    }
   }
   const options = [];
   async function getOptionsFromFactory(factory) {
-    const result = [];
-    result.push(
-      ...await factory.getOptions({ input: searchValue, spec: valueSpec })
+    const options2 = [];
+    options2.push(
+      ...await factory.getOptions({
+        input: searchValue,
+        spec: valueSpec,
+        editableVariablesSchemaLocators,
+        variablesSchema
+      })
     );
     if (searchValue) {
       const unfilteredOptions = await factory.getOptions({
         input: "",
-        spec: valueSpec
+        spec: valueSpec,
+        editableVariablesSchemaLocators,
+        variablesSchema
       });
       for (const option of unfilteredOptions) {
-        if (option.drilldownOptionFactories) {
-          for (const drilldownFactory of option.drilldownOptionFactories) {
-            result.push(...await getOptionsFromFactory(drilldownFactory));
-          }
+        if (option.drillDownOptionFactory) {
+          options2.push(
+            ...await getOptionsFromFactory(option.drillDownOptionFactory)
+          );
         }
       }
     }
-    return result;
+    return options2;
   }
-  if (drilldownStack.length > 0) {
-    options.push({
-      label: "Back",
-      iconType: SvgIconType.ChevronLeft,
-      drillup: true
-    });
-    const option = drilldownStack[drilldownStack.length - 1];
-    for (const drilldownFactory of option?.drilldownOptionFactories ?? []) {
-      options.push(...await getOptionsFromFactory(drilldownFactory));
+  if (drillDownStack.length > 0) {
+    const option = drillDownStack[drillDownStack.length - 1];
+    if (option?.drillDownOptionFactory) {
+      options.push(
+        ...await getOptionsFromFactory(option?.drillDownOptionFactory)
+      );
     }
   } else {
+    const localOptions = [];
     for (const optionFactory of [...factories]) {
-      options.push(...await getOptionsFromFactory(optionFactory));
+      localOptions.push(...await getOptionsFromFactory(optionFactory));
     }
+    options.push(...localOptions);
   }
   return options;
 }