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

package/dist/esm/components/ComboBox/options-factories/{schema.mjs → generate-schema-options.mjs}

@@ -2,63 +2,21 @@
 /*
  * 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, Fragment, jsxs } from 'react/jsx-runtime';
 import { toHeaderCase } from 'js-convert-case';
-import { getNameComponentsForLocator, getFullNameForLocator, getNameForLocator, getIconUriForLocator, isValidLocator, locatorToSteps, getSchemaByLocator, locatorToField, stepsToLocator, DataLocatorStepObjectProperty, DataLocatorStepArrayItem, getValueAtLocator } from '@integration-app/sdk';
+import { isValidLocator, locatorToSteps, getSchemaByLocator, getNameComponentsForLocator, locatorToField, stepsToLocator, getIconUriForLocator, DataLocatorStepObjectProperty, DataLocatorStepArrayItem } from '@integration-app/sdk';
 import { Fragment as Fragment$1 } from 'react';
 import { SegmentSeparator } from '../../Tag/SegmentSeparator.mjs';
+import { DropdownCategoryType } from '../types.mjs';
 import { doesSchemaMatchValueType } from '../value-spec.mjs';
-import { getSchemaHint } from './index.mjs';
 import { ObjectFieldsOptionFactory } from './object-fields.mjs';
 import { ConstantOptionFactory } from './constant.mjs';
-import { SvgIconType } from '../../SvgIcon/index.mjs';
+import { SvgIconType } from '../../SvgIcon/svg-icon-type.mjs';
 
-class SchemaOptionFactory {
-  constructor(parameters) {
-    this.parameters = parameters;
-  }
-  async getOptions({ input, spec }) {
-    return this.getOptionsSync({ input, spec });
-  }
-  getOptionsSync({ input, spec }) {
-    const locator = this.parameters.locator ?? "$";
-    const showFullPath = !!input;
-    const options = getOptionsForSchema({
-      schema: this.parameters.schema,
-      locator: this.parameters.locator ?? [],
-      valueSpec: spec,
-      showIcons: !this.parameters.isSection,
-      skipNameComponentsPrefix: getNameComponentsForLocator(
-        this.parameters.schema,
-        locator
-      ),
-      ignorePrefix: !showFullPath,
-      nameComponentsByLocator: this.parameters.isSection ? getNameComponentsForLocator(this.parameters.schema, locator) : [],
-      exampleVariables: this.parameters.exampleVariables,
-      editableSchemaLocators: this.parameters.editableSchemaLocators
-    });
-    const filteredOptions = options.filter(
-      (o) => !input || (o.searchLabel ?? o.label?.toString())?.toLowerCase()?.includes(input.toLowerCase())
-    );
-    if (filteredOptions.length > 0) {
-      const result = filteredOptions;
-      if (this.parameters.isSection) {
-        result.unshift({
-          label: showFullPath ? getFullNameForLocator(this.parameters.schema, locator) : getNameForLocator(this.parameters.schema, locator),
-          isSection: true,
-          iconUri: getIconUriForLocator(this.parameters.schema, locator)
-        });
-      }
-      return result;
-    } else {
-      return [];
-    }
-  }
-}
 function getOptionsForSchema({
   schema,
   locator,
@@ -93,6 +51,7 @@ function getOptionsForSchema({
   const textLabel = nameComponents?.length > 0 ? nameComponents.join(" ") : optionsSchema.title;
   const searchLabel = nameComponents.join(" ");
   const iconUri = showIcons ? getIconUriForLocator(schema, locator) : null;
+  const iconType = !iconUri ? SvgIconType.ListOption : void 0;
   if (optionsSchema.type == "object") {
     const isInvisibleObject = optionsSchema.title === "";
     if (expandObject || isInvisibleObject) {
@@ -101,13 +60,13 @@ function getOptionsForSchema({
         options.push({
           label: label ?? textLabel,
           searchLabel,
-          hint: "Whole Object",
           value: {
             $var: stepsToLocator(locatorToSteps(locator))
           },
           /* FIXME: strictNullCheck temporary fix */
           // @ts-expect-error TS(2322): Type 'string | null' is not assignable to type 'st... Remove this comment to see the full error message
-          iconUri
+          iconUri,
+          iconType
         });
       }
       for (const key of Object.keys(optionsSchema.properties ?? {})) {
@@ -144,10 +103,8 @@ function getOptionsForSchema({
         options.push({
           label: `Add${textLabel ? ` "${textLabel}"` : ""} Property`,
           searchLabel: "",
-          hint: `Add property to this object`,
           iconType: SvgIconType.Add,
-          addVariable: `${stepsToLocator(locatorSteps)}`,
-          isHighlighted: true
+          addVariable: `${stepsToLocator(locatorSteps)}`
         });
       }
     } else {
@@ -156,20 +113,20 @@ function getOptionsForSchema({
         options.push({
           label,
           searchLabel,
-          hint: propCount === 0 ? "Object" : `Object with ${propCount} ${propCount === 1 ? "property" : "properties"}`,
+          childrenCount: propCount > 0 ? propCount : void 0,
           /* FIXME: strictNullCheck temporary fix */
           // @ts-expect-error TS(2322): Type 'string | null' is not assignable to type 'st... Remove this comment to see the full error message
           iconUri,
-          drilldownOptionFactories: [
-            new ObjectFieldsOptionFactory({
-              name: textLabel,
-              schema,
-              locator,
-              exampleVariables,
-              isSection: true,
-              editableSchemaLocators
-            })
-          ]
+          iconType,
+          drillDownOptionFactory: new ObjectFieldsOptionFactory({
+            name: textLabel,
+            schema,
+            locator,
+            exampleVariables,
+            isSection: true,
+            editableSchemaLocators
+          }),
+          childCategory: DropdownCategoryType.VARIABLE
         });
       }
     }
@@ -180,10 +137,10 @@ function getOptionsForSchema({
         listOptions.push({
           label,
           searchLabel,
-          hint: "Whole List",
           value: {
             $var: stepsToLocator(locatorToSteps(locator))
           },
+          iconType,
           iconUri: iconUri || void 0
         });
       }
@@ -211,11 +168,11 @@ function getOptionsForSchema({
       options.push({
         label,
         searchLabel,
-        hint: "List",
         /* FIXME: strictNullCheck temporary fix */
         // @ts-expect-error TS(2322): Type 'string | null' is not assignable to type 'st... Remove this comment to see the full error message
         iconUri,
-        drilldownOptionFactories: [new ConstantOptionFactory(listOptions)]
+        iconType,
+        drillDownOptionFactory: new ConstantOptionFactory(listOptions)
       });
     }
   } else {
@@ -223,13 +180,13 @@ function getOptionsForSchema({
       options.push({
         label,
         searchLabel,
-        hint: getValueAtLocator(exampleVariables, locator) ?? getSchemaHint(optionsSchema),
         value: {
           $var: stepsToLocator(locatorToSteps(locator))
         },
         /* FIXME: strictNullCheck temporary fix */
         // @ts-expect-error TS(2322): Type 'string | null' is not assignable to type 'st... Remove this comment to see the full error message
-        iconUri
+        iconUri,
+        iconType
       });
     }
   }
@@ -248,4 +205,4 @@ function getLabelNodeFromNameComponents(nameComponents) {
   ] }, idx)) });
 }
 
-export { SchemaOptionFactory, getOptionsForSchema };
+export { getOptionsForSchema };

package/dist/esm/components/ComboBox/options-factories/object-fields.mjs

@@ -2,22 +2,25 @@
 /*
  * 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 { toHeaderCase } from 'js-convert-case';
 import { isValidLocator, locatorToSteps, getSchemaByLocator, locatorToField, stepsToLocator, DataLocatorStepObjectProperty, getNameComponentsForLocator, getFullNameForLocator, getNameForLocator, getIconUriForLocator } from '@integration-app/sdk';
-import { filterOptionsByLabel } from './base.mjs';
-import { getOptionsForSchema } from './schema.mjs';
+import { filterOptionsByLabel } from './utils.mjs';
+import { getOptionsForSchema } from './generate-schema-options.mjs';
 import { doesSchemaMatchValueType } from '../value-spec.mjs';
-import { SvgIconType } from '../../SvgIcon/index.mjs';
+import { SvgIconType } from '../../SvgIcon/svg-icon-type.mjs';
 
 class ObjectFieldsOptionFactory {
   constructor(parameters) {
     this.parameters = parameters;
   }
-  async getOptions({ input, spec }) {
+  async getOptions({
+    input,
+    spec
+  }) {
     return this.getOptionsSync({ input, spec });
   }
   getOptionsSync({ input, spec }) {
@@ -80,10 +83,8 @@ class ObjectFieldsOptionFactory {
       options.push({
         label: `New${this.parameters?.name ? ` "${this.parameters.name}"` : ""} property`,
         searchLabel: "",
-        hint: `Add property to this object`,
         iconType: SvgIconType.Add,
-        addVariable: `${stepsToLocator(locatorSteps)}`,
-        isHighlighted: true
+        addVariable: `${stepsToLocator(locatorSteps)}`
       });
     }
     const filteredOptions = filterOptionsByLabel(options, input);

package/dist/esm/components/ComboBox/options-factories/reference-records.mjs

@@ -2,17 +2,20 @@
 /*
  * 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 { filterOptionsByLabel } from './base.mjs';
+import { SvgIconType } from '../../SvgIcon/svg-icon-type.mjs';
+import { filterOptionsByLabel } from './utils.mjs';
 
 class ReferenceRecordsOptionsFactory {
   constructor(params) {
     this.params = params;
   }
-  async getOptions({ input }) {
+  async getOptions({
+    input
+  }) {
     return this.getOptionsSync({ input });
   }
   getOptionsSync({ input }) {
@@ -22,7 +25,8 @@ class ReferenceRecordsOptionsFactory {
         if (typeof record == "object" && record.id !== void 0) {
           options.push({
             label: record.name ?? record.id,
-            value: record.id
+            value: record.id,
+            iconType: SvgIconType.ListOption
           });
         }
       });

package/dist/esm/components/ComboBox/options-factories/root.mjs

@@ -0,0 +1,106 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.4-beta.0
+ */
+'use client';
+
+import { FormulaListOptionsFactory } from './formula.mjs';
+import { DropdownCategoryType } from '../types.mjs';
+import { filterOptionsByLabel } from './utils.mjs';
+import { VariableOptionFactory } from './variable.mjs';
+import { CustomFieldOptionsFactory } from './custom-field.mjs';
+import { renderCategories } from '../Dropdown/categoryContentMapping.mjs';
+
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, key + "" , value);
+const EXCLUDED_CATEGORIES = [
+  DropdownCategoryType.OPTIONS,
+  DropdownCategoryType.LOOKUP_OPTIONS
+];
+class RootOptionFactory {
+  constructor(categories) {
+    __publicField(this, "categories");
+    if (!categories && categories === null) {
+      this.categories = [];
+    } else {
+      this.categories = categories;
+    }
+  }
+  async getOptions({
+    input,
+    spec,
+    variablesSchema,
+    editableVariablesSchemaLocators
+  }) {
+    if (this.categories.length === 1) {
+      const [category] = this.categories;
+      const childCategoryFactory = this.getChildFactoryForCategory({
+        category,
+        schema: variablesSchema,
+        editableSchemaLocators: editableVariablesSchemaLocators
+      });
+      if (childCategoryFactory) {
+        return childCategoryFactory?.getOptions({
+          input,
+          spec,
+          variablesSchema,
+          editableVariablesSchemaLocators
+        });
+      }
+    }
+    return this.getOptionsSync({
+      input,
+      spec,
+      variablesSchema,
+      editableVariablesSchemaLocators
+    });
+  }
+  getOptionsSync({
+    input,
+    variablesSchema,
+    editableVariablesSchemaLocators
+  }) {
+    const options = [];
+    if (input) {
+      return options;
+    }
+    this.categories?.filter((category) => !EXCLUDED_CATEGORIES.includes(category))?.map((category) => {
+      const factory = this.getChildFactoryForCategory({
+        category,
+        schema: variablesSchema,
+        editableSchemaLocators: editableVariablesSchemaLocators
+      });
+      options.push({
+        label: renderCategories[category].title,
+        iconType: renderCategories[category].icon,
+        drillDownOptionFactory: factory,
+        childCategory: category
+      });
+    });
+    return filterOptionsByLabel(options, input);
+  }
+  getChildFactoryForCategory({
+    category,
+    schema,
+    editableSchemaLocators
+  }) {
+    switch (category) {
+      case DropdownCategoryType.VARIABLE:
+        return new VariableOptionFactory({
+          schema,
+          editableSchemaLocators
+        });
+      case DropdownCategoryType.FORMULA:
+        return new FormulaListOptionsFactory();
+      case DropdownCategoryType.CUSTOM:
+        return new CustomFieldOptionsFactory();
+      default:
+        return void 0;
+    }
+  }
+}
+
+export { RootOptionFactory };

package/dist/esm/components/ComboBox/options-factories/{base.mjs → utils.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/options-factories/variable.mjs

@@ -0,0 +1,64 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.4-beta.0
+ */
+'use client';
+
+import { getNameComponentsForLocator, getFullNameForLocator, getNameForLocator, getIconUriForLocator } from '@integration-app/sdk';
+import { DropdownCategoryType } from '../types.mjs';
+import { renderCategories } from '../Dropdown/categoryContentMapping.mjs';
+import { getOptionsForSchema } from './generate-schema-options.mjs';
+
+class VariableOptionFactory {
+  constructor(parameters) {
+    this.parameters = parameters;
+  }
+  async getOptions({
+    input,
+    spec
+  }) {
+    return this.getOptionsSync({ input, spec });
+  }
+  getOptionsSync({ input, spec }) {
+    const locator = this.parameters.locator ?? "$";
+    const showFullPath = !!input;
+    const options = getOptionsForSchema({
+      schema: this.parameters.schema,
+      locator: this.parameters.locator ?? [],
+      valueSpec: spec,
+      showIcons: !this.parameters.isSection,
+      skipNameComponentsPrefix: getNameComponentsForLocator(
+        this.parameters.schema,
+        locator
+      ),
+      ignorePrefix: !showFullPath,
+      nameComponentsByLocator: this.parameters.isSection ? getNameComponentsForLocator(this.parameters.schema, locator) : [],
+      exampleVariables: this.parameters.exampleVariables,
+      editableSchemaLocators: this.parameters.editableSchemaLocators
+    });
+    const filteredOptions = options.filter(
+      (o) => !input || (o.searchLabel ?? o.label?.toString())?.toLowerCase()?.includes(input.toLowerCase())
+    );
+    if (filteredOptions.length > 0) {
+      const result = filteredOptions;
+      if (this.parameters.isSection) {
+        result.unshift({
+          label: showFullPath ? getFullNameForLocator(this.parameters.schema, locator) : getNameForLocator(this.parameters.schema, locator),
+          isSection: true,
+          iconUri: getIconUriForLocator(this.parameters.schema, locator)
+        });
+      }
+      result.unshift({
+        label: renderCategories[DropdownCategoryType.VARIABLE].title,
+        isSection: true
+      });
+      return result;
+    } else {
+      return [];
+    }
+  }
+}
+
+export { VariableOptionFactory };

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

@@ -2,19 +2,20 @@
 /*
  * 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';
 
-var ComboBoxTabType = /* @__PURE__ */ ((ComboBoxTabType2) => {
-  ComboBoxTabType2["VARIABLE"] = "variable";
-  ComboBoxTabType2["OPTIONS"] = "options";
-  ComboBoxTabType2["FORMULA"] = "formula";
-  ComboBoxTabType2["CUSTOM"] = "custom";
-  ComboBoxTabType2["LOOKUP_OPTIONS"] = "lookup_options";
-  ComboBoxTabType2["SELECT_FROM_COLLECTION_DYNAMICALLY"] = "select_from_collection_dynamically";
-  ComboBoxTabType2["SELECT_FROM_UDM_DYNAMICALLY"] = "select_from_udm_dynamically";
-  return ComboBoxTabType2;
-})(ComboBoxTabType || {});
+var DropdownCategoryType = /* @__PURE__ */ ((DropdownCategoryType2) => {
+  DropdownCategoryType2["ROOT"] = "root";
+  DropdownCategoryType2["VARIABLE"] = "variable";
+  DropdownCategoryType2["OPTIONS"] = "options";
+  DropdownCategoryType2["FORMULA"] = "formula";
+  DropdownCategoryType2["FORMULA_CONFIG"] = "formula_config";
+  DropdownCategoryType2["CUSTOM"] = "custom";
+  DropdownCategoryType2["LOOKUP_OPTIONS"] = "lookup_options";
+  DropdownCategoryType2["SELECT_FROM_UDM_DYNAMICALLY"] = "select_from_udm_dynamically";
+  return DropdownCategoryType2;
+})(DropdownCategoryType || {});
 
-export { ComboBoxTabType };
+export { DropdownCategoryType };

package/dist/esm/components/ComboBox/value-spec.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/ComboBoxElements/ComboBoxTag.mjs

@@ -2,16 +2,17 @@
 /*
  * 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 { forwardRef } from 'react';
 import clsx from 'clsx';
-import { Tag } from '../Tag/index.mjs';
+import { Tag } from '../Tag/Tag.mjs';
+import '../Tag/TagPlaceholder.mjs';
 import classes from './ComboBoxTag.module.css.mjs';
-import { SvgIconType } from '../SvgIcon/index.mjs';
+import { SvgIconType } from '../SvgIcon/svg-icon-type.mjs';
 
 const ComboBoxTag = forwardRef(
   function({

package/dist/esm/components/ComboBoxElements/ComboBoxTag.module.css.mjs

@@ -1,7 +1,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/ComboBoxElements/FieldWrapper.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/ComboBoxElements/Popper.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/ComboBoxElements/Popper.module.css.mjs

@@ -1,13 +1,13 @@
 /*
  * 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 styleInject from 'style-inject';
 
-var css_248z = "/* Dropdown Popper */\n.Popper-module_popper__HPG3S {\n  z-index: 600;\n  will-change: transform, width, max-height;\n  max-width: -moz-fit-content;\n  max-width: fit-content;\n  min-width: 22rem;\n  display: flex;\n  flex-direction: column;\n}\n.Popper-module_popper__HPG3S[data-popper-reference-hidden='true'] {\n  visibility: hidden;\n  pointer-events: none;\n}\n.Popper-module_popper__HPG3S[data-popper-placement^='top'] {\n  justify-content: flex-end;\n\n  /*\n  When Dropdown is placed on the top, it has additional offset\n  Because we shift Dropdown to the top by 24px to keep SchemaSelector visible\n  */\n  margin-bottom: 20px;\n  margin-left: -9px;\n}\n.Popper-module_popper__HPG3S[data-popper-placement^='bottom'] {\n  justify-content: flex-start;\n}\n";
+var css_248z = "/* Dropdown Popper */\n.Popper-module_popper__HPG3S {\n  z-index: 600;\n  will-change: transform, width, max-height;\n  max-width: -moz-fit-content;\n  max-width: fit-content;\n  display: flex;\n  flex-direction: column;\n}\n.Popper-module_popper__HPG3S[data-popper-reference-hidden='true'] {\n  visibility: hidden;\n  pointer-events: none;\n}\n.Popper-module_popper__HPG3S[data-popper-placement^='top'] {\n  justify-content: flex-end;\n\n  /*\n  When Dropdown is placed on the top, it has additional offset\n  Because we shift Dropdown to the top by 24px to keep SchemaSelector visible\n  */\n  margin-bottom: 20px;\n  margin-left: -9px;\n}\n.Popper-module_popper__HPG3S[data-popper-placement^='bottom'] {\n  justify-content: flex-start;\n}\n";
 var classes = {"popper":"Popper-module_popper__HPG3S"};
 styleInject(css_248z);
 

package/dist/esm/components/ComboBoxElements/TipTapEditor/Editor.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';
 
@@ -15,10 +15,10 @@ import History from '@tiptap/extension-history';
 import Paragraph from '@tiptap/extension-paragraph';
 import Placeholder from '@tiptap/extension-placeholder';
 import Text from '@tiptap/extension-text';
-import TagComponent, { getComponentTagNode } from './TagComponent.mjs';
+import { TagComponent } from './TagComponent.mjs';
 import { KeyboardShortcutHandler } from './extension-keyboardShortcuts.mjs';
 import classes from './Editor.module.css.mjs';
-import { getSchemaNodesSummary } from './helpers/common.mjs';
+import { getComponentTagNode, getSchemaNodesSummary } from './helpers/common.mjs';
 import { transformValueToEditorSchema } from './helpers/transformValueToEditorSchema.mjs';
 import { transformEditorSchemaToValue } from './helpers/transformEditorSchemaToValue.mjs';
 

package/dist/esm/components/ComboBoxElements/TipTapEditor/Editor.module.css.mjs

@@ -1,7 +1,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/ComboBoxElements/TipTapEditor/EditorStandAlone.mjs

@@ -2,17 +2,13 @@
 /*
  * 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 { forwardRef } from 'react';
 import { useComboboxEditor, Editor } from './Editor.mjs';
-import './TagComponent.mjs';
-import '../../SvgIcon/index.mjs';
-import '@integration-app/sdk';
-import 'fuse';
 
 const StandAloneEditor = forwardRef(({ value, onChange, ...props }, ref) => {
   const { editor } = useComboboxEditor({