@integration-app/react 2.20.0 → 2.22.0

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 
@@ -11,11 +11,11 @@ import { Fragment as Fragment$1 } from 'react';
 import { isValidLocator, locatorToSteps, getSchemaByLocator, getNameComponentsForLocator, locatorToField, stepsToLocator, getIconUriForLocator, DataLocatorStepObjectProperty, DataLocatorStepArrayItem } from '@integration-app/sdk';
 import { toHeaderCase } from 'js-convert-case';
 import { SvgIconType } from '../../SvgIcon/svg-icon-type.mjs';
-import { SegmentSeparator } from '../../Tag/SegmentSeparator.mjs';
 import { DropdownCategoryType } from '../shared.mjs';
 import { doesSchemaMatchValueType } from '../value-spec.mjs';
 import { ConstantOptionFactory } from './constant.mjs';
 import { ObjectFieldsOptionFactory } from './object-fields.mjs';
+import { ValueNestingIcon } from '../Badges/EditorTagBadge/NestedBadgeValue.mjs';
 
 function getOptionsForSchema({
   schema,
@@ -194,7 +194,7 @@ function getLabelNodeFromNameComponents(nameComponents) {
     return nameComponents[0];
   }
   return /* @__PURE__ */ jsx(Fragment, { children: nameComponents.map((name, idx) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    idx ? /* @__PURE__ */ jsx(SegmentSeparator, {}) : null,
+    idx ? /* @__PURE__ */ jsx(ValueNestingIcon, {}) : null,
     name
   ] }, idx)) });
 }

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 

package/dist/esm/components/ComboBox/value-spec.mjs

@@ -2,11 +2,11 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 
-import { schemaAllowsCustomValue, schemaIsScalar } from '@integration-app/sdk';
+import { schemaIsScalar, schemaAllowsCustomValue } from '@integration-app/sdk';
 
 var ValueType = /* @__PURE__ */ ((ValueType2) => {
   ValueType2["STRING"] = "string";

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 
@@ -65,18 +65,5 @@ function ComboboxIcon({ invalid, icon, iconUri }) {
   }
   return null;
 }
-function getClassFromSchema(schema) {
-  switch (schema?.type) {
-    case "string":
-      return classes.tagString;
-    case "number":
-    case "integer":
-      return classes.tagNumber;
-    case "boolean":
-      return classes.tagBoolean;
-    default:
-      return classes.tagUndefined;
-  }
-}
 
-export { ComboBoxTag, getClassFromSchema };
+export { ComboBoxTag };

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

@@ -1,14 +1,14 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 
 import styleInject from 'style-inject';
 
-var css_248z = ".ComboBoxTag-module_tagDefault__AH8R2 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(15 76 117 / var(--tw-bg-opacity, 1));\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n  border-width: 1px;\n  border-color: transparent;\n}.ComboBoxTag-module_tagDefault__AH8R2:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(15 76 117 / var(--tw-bg-opacity, 1));\n}\n.ComboBoxTag-module_tagDefault__AH8R2.ComboBoxTag-module_tagDefault__selected__nKlR5,\n.ComboBoxTag-module_tagDefault__AH8R2.ComboBoxTag-module_tagDefault__selected__nKlR5:hover {\n  --tw-border-opacity: 1;\n  border-color: rgb(221 221 221 / var(--tw-border-opacity, 1));\n  --tw-bg-opacity: 1;\n  background-color: rgb(248 248 248 / var(--tw-bg-opacity, 1));\n}\n.ComboBoxTag-module_tagDefault__AH8R2.ComboBoxTag-module_tagDefault__clickable__hS--w {\n  cursor: pointer;\n}\n.ComboBoxTag-module_tagDefault__AH8R2.ComboBoxTag-module_tagDefault__disabled__VHUdn,\n.ComboBoxTag-module_tagDefault__AH8R2.ComboBoxTag-module_tagDefault__disabled__VHUdn:hover {\n  cursor: default;\n  --tw-border-opacity: 1;\n  border-color: rgb(170 170 170 / var(--tw-border-opacity, 1));\n  --tw-bg-opacity: 1;\n  background-color: rgb(170 170 170 / var(--tw-bg-opacity, 1));\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.ComboBoxTag-module_tagDefault__AH8R2.ComboBoxTag-module_tagDefault__invalid__JHDvT,\n.ComboBoxTag-module_tagDefault__AH8R2.ComboBoxTag-module_tagDefault__invalid__JHDvT:hover {\n  --tw-border-opacity: 1;\n  border-color: rgb(168 54 5 / var(--tw-border-opacity, 1));\n  --tw-bg-opacity: 1;\n  background-color: rgb(168 54 5 / var(--tw-bg-opacity, 1));\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n/* Icon After */\n.ComboBoxTag-module_actionBar__a-Kcq {\n  display: none;\n  height: 2rem;\n  width: 1.75rem;\n  align-items: center;\n  z-index: 10;\n  margin-left: -0.75rem;\n  margin-right: -1rem;\n  padding-left: 0.375rem;\n  padding-right: 0.375rem;\n  border-radius: 0.25rem;\n  --tw-bg-opacity: 1;\n  background-color: rgb(15 76 117 / var(--tw-bg-opacity, 1));\n  box-shadow: 0.15rem 0 #fff;\n}\n.ComboBoxTag-module_actionBar__a-Kcq:hover {\n  display: inline-flex;\n}\n.ComboBoxTag-module_tagDefault__AH8R2:hover + .ComboBoxTag-module_actionBar__a-Kcq {\n  display: inline-flex;\n  --tw-bg-opacity: 1;\n  background-color: rgb(15 76 117 / var(--tw-bg-opacity, 1));\n}\n.ComboBoxTag-module_actionBarButton__xVFYj {\n  height: 1rem;\n  width: 1rem;\n  border-radius: 9999px;\n  padding: 0px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  --tw-bg-opacity: 1;\n  background-color: rgb(194 154 6 / var(--tw-bg-opacity, 1));\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.ComboBoxTag-module_actionBar__a-Kcq:hover .ComboBoxTag-module_actionBarButton__xVFYj {\n  transform: scale(1.1);\n  transition: 0.1s transform;\n}\n.ComboBoxTag-module_actionBar__a-Kcq:hover .ComboBoxTag-module_actionBarButton__xVFYj:focus {\n  transform: scale(1.2);\n}\n.ComboBoxTag-module_tagLookup__qurB2 {\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n  --tw-border-opacity: 1;\n  border-color: rgb(13 121 194 / var(--tw-border-opacity, 1));\n  --tw-bg-opacity: 1;\n  background-color: rgb(13 121 194 / var(--tw-bg-opacity, 1));\n}\n.ComboBoxTag-module_tagLookup__qurB2:hover {\n  background-color: #0c71b5;\n}\n.ComboBoxTag-module_tagDefault__AH8R2 [class*='tagConfigButton'] {\n  border-left: 1px solid #005f9f;\n}\n.ComboBoxTag-module_tagDefault__AH8R2.ComboBoxTag-module_tagString__Pmqwr,\n.ComboBoxTag-module_tagDefault__AH8R2.ComboBoxTag-module_tagNumber__y6un6,\n.ComboBoxTag-module_tagDefault__AH8R2.ComboBoxTag-module_tagBoolean__e7saD {\n  --tw-bg-opacity: 1;\n  background-color: rgb(238 238 238 / var(--tw-bg-opacity, 1));\n  --tw-text-opacity: 1;\n  color: rgb(0 0 0 / var(--tw-text-opacity, 1));\n}\n.ComboBoxTag-module_tagDefault__AH8R2.ComboBoxTag-module_tagString__Pmqwr:hover,\n.ComboBoxTag-module_tagDefault__AH8R2.ComboBoxTag-module_tagNumber__y6un6:hover,\n.ComboBoxTag-module_tagDefault__AH8R2.ComboBoxTag-module_tagBoolean__e7saD:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(248 248 248 / var(--tw-bg-opacity, 1));\n  --tw-text-opacity: 1;\n  color: rgb(0 0 0 / var(--tw-text-opacity, 1));\n}\n";
-var classes = {"tagDefault":"ComboBoxTag-module_tagDefault__AH8R2","tagDefault__selected":"ComboBoxTag-module_tagDefault__selected__nKlR5","tagDefault__clickable":"ComboBoxTag-module_tagDefault__clickable__hS--w","tagDefault__disabled":"ComboBoxTag-module_tagDefault__disabled__VHUdn","tagDefault__invalid":"ComboBoxTag-module_tagDefault__invalid__JHDvT","tagLookup":"ComboBoxTag-module_tagLookup__qurB2","tagString":"ComboBoxTag-module_tagString__Pmqwr","tagNumber":"ComboBoxTag-module_tagNumber__y6un6","tagBoolean":"ComboBoxTag-module_tagBoolean__e7saD"};
+var css_248z = ".ComboBoxTag-module_tagDefault__AH8R2 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(15 76 117 / var(--tw-bg-opacity, 1));\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n  border-width: 1px;\n  border-color: transparent;\n}.ComboBoxTag-module_tagDefault__AH8R2:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(15 76 117 / var(--tw-bg-opacity, 1));\n}\n.ComboBoxTag-module_tagDefault__AH8R2.ComboBoxTag-module_tagDefault__selected__nKlR5,\n.ComboBoxTag-module_tagDefault__AH8R2.ComboBoxTag-module_tagDefault__selected__nKlR5:hover {\n  --tw-border-opacity: 1;\n  border-color: rgb(221 221 221 / var(--tw-border-opacity, 1));\n  --tw-bg-opacity: 1;\n  background-color: rgb(248 248 248 / var(--tw-bg-opacity, 1));\n}\n.ComboBoxTag-module_tagDefault__AH8R2.ComboBoxTag-module_tagDefault__clickable__hS--w {\n  cursor: pointer;\n}\n.ComboBoxTag-module_tagDefault__AH8R2.ComboBoxTag-module_tagDefault__disabled__VHUdn,\n.ComboBoxTag-module_tagDefault__AH8R2.ComboBoxTag-module_tagDefault__disabled__VHUdn:hover {\n  cursor: default;\n  --tw-border-opacity: 1;\n  border-color: rgb(170 170 170 / var(--tw-border-opacity, 1));\n  --tw-bg-opacity: 1;\n  background-color: rgb(170 170 170 / var(--tw-bg-opacity, 1));\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.ComboBoxTag-module_tagDefault__AH8R2.ComboBoxTag-module_tagDefault__invalid__JHDvT,\n.ComboBoxTag-module_tagDefault__AH8R2.ComboBoxTag-module_tagDefault__invalid__JHDvT:hover {\n  --tw-border-opacity: 1;\n  border-color: rgb(168 54 5 / var(--tw-border-opacity, 1));\n  --tw-bg-opacity: 1;\n  background-color: rgb(168 54 5 / var(--tw-bg-opacity, 1));\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.ComboBoxTag-module_tagLookup__qurB2 {\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n  --tw-border-opacity: 1;\n  border-color: rgb(13 121 194 / var(--tw-border-opacity, 1));\n  --tw-bg-opacity: 1;\n  background-color: rgb(13 121 194 / var(--tw-bg-opacity, 1));\n}\n.ComboBoxTag-module_tagLookup__qurB2:hover {\n  background-color: #0c71b5;\n}\n.ComboBoxTag-module_tagDefault__AH8R2 [class*='tagConfigButton'] {\n  border-left: 1px solid #005f9f;\n}\n";
+var classes = {"tagDefault":"ComboBoxTag-module_tagDefault__AH8R2","tagDefault__selected":"ComboBoxTag-module_tagDefault__selected__nKlR5","tagDefault__clickable":"ComboBoxTag-module_tagDefault__clickable__hS--w","tagDefault__disabled":"ComboBoxTag-module_tagDefault__disabled__VHUdn","tagDefault__invalid":"ComboBoxTag-module_tagDefault__invalid__JHDvT","tagLookup":"ComboBoxTag-module_tagLookup__qurB2"};
 styleInject(css_248z);
 
 export { classes as default };

package/dist/esm/components/ComboBoxElements/ComboboxContainer/index.mjs

@@ -0,0 +1,81 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.22.0
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { clsx } from 'clsx';
+import '../../../styled-system/css/css.mjs';
+import '../../../styled-system/helpers.mjs';
+import { sva } from '../../../styled-system/css/sva.mjs';
+
+const comboboxContainerRecipe = sva({
+  className: "combobox-container",
+  slots: ["root"],
+  base: {
+    root: {
+      display: "inline-flex",
+      verticalAlign: "middle",
+      w: "fit-content",
+      maxW: "full",
+      h: "full",
+      flexGrow: "1",
+      cursor: "pointer",
+      px: "1",
+      "&:hover:not(:has([data-editor-tag='true']:hover))": {
+        "& p": {
+          bg: "slate.2"
+        }
+      },
+      _expanded: {
+        "& p": {
+          bg: "slate.2"
+        }
+      }
+    }
+  },
+  variants: {
+    disabled: {
+      true: {
+        root: {
+          bg: "slate.2",
+          cursor: "initial"
+        }
+      },
+      false: {}
+    },
+    level: {
+      editor: {},
+      tag: {
+        root: {
+          p: "0",
+          mx: "3px",
+          '[contenteditable="true"] &': {
+            my: "3px"
+          }
+        }
+      }
+    }
+  }
+});
+const ComboboxContainer = forwardRef(({ children, disabled, className, level, ...props }, ref) => {
+  const styles = comboboxContainerRecipe({ disabled, level });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "combobox",
+      className: clsx(styles.root, className),
+      ref,
+      "aria-disabled": disabled,
+      "aria-readonly": disabled,
+      ...props,
+      children
+    }
+  );
+});
+
+export { ComboboxContainer, comboboxContainerRecipe };

package/dist/esm/components/ComboBoxElements/Editor/{editor.mjs → LexicalEditor.mjs}

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 
@@ -15,44 +15,72 @@ import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
 import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
 import { PlainTextPlugin } from '@lexical/react/LexicalPlainTextPlugin';
 import clsx from 'clsx';
-import { css } from '../../../styled-system/css/css.mjs';
+import '../../../styled-system/css/css.mjs';
 import '../../../styled-system/helpers.mjs';
-import '../../../styled-system/jsx/is-valid-prop.mjs';
-import { Box } from '../../../styled-system/jsx/box.mjs';
-import '../../../styled-system/patterns/visually-hidden.mjs';
-import classes from './Editor.module.css.mjs';
+import { sva } from '../../../styled-system/css/sva.mjs';
 import { EditorTagNode } from './nodes/EditorTagNode.mjs';
 import { ConfigPlugin } from './plugins/ConfigPlugin.mjs';
 import { EditorTagPlugin } from './plugins/EditorTagPlugin.mjs';
 import { KeyboardPlugin } from './plugins/KeyboardPlugin.mjs';
 import { StateSyncPlugin } from './plugins/StateSyncPlugin.mjs';
 
-function onError(error) {
-  console.error(error);
-}
 const initialConfig = {
   namespace: "data-input-editor",
-  onError,
+  onError: console.error,
   nodes: [EditorTagNode]
 };
 function LexicalProvider({ children }) {
   return /* @__PURE__ */ jsx(LexicalComposer, { initialConfig, children });
 }
 const PLACEHOLDER_CSS_VARIABLE = "--placeholder-text";
-const placeholderEmulation = css({
-  "& p": {
-    _before: {
-      content: `var(${PLACEHOLDER_CSS_VARIABLE})`,
-      float: "left",
-      pointerEvents: "none",
-      h: 0,
-      color: "gray.9"
+const editorTagBadgeRecipe = sva({
+  className: "data-input-editor",
+  slots: ["root"],
+  base: {
+    root: {
+      fontSize: "xs",
+      fontWeight: "medium",
+      minWidth: "12",
+      _focus: {
+        outline: "none"
+      },
+      "& [data-lexical-text='true']": {
+        color: "slate.12"
+      },
+      "& p": {
+        my: "1",
+        py: "1",
+        px: "1",
+        rounded: "md",
+        minH: "5",
+        "&:has([data-editor-tag='true'])": {
+          py: "0"
+        },
+        _before: {
+          content: `var(${PLACEHOLDER_CSS_VARIABLE})`,
+          float: "left",
+          pointerEvents: "none",
+          h: 0,
+          color: "gray.9"
+        },
+        "& > *": {
+          verticalAlign: "middle",
+          display: "inline-block",
+          maxW: "full"
+        }
+      },
+      "& p:not(:has(> br:only-child))": {
+        _before: {
+          content: "none"
+        }
+      }
     }
   }
 });
 const LexicalEditor = forwardRef(({ onChange, value, schema, placeholder, disabled, ...props }, ref) => {
+  const styles = editorTagBadgeRecipe();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Box, { className: clsx(classes.editor), children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(
       PlainTextPlugin,
       {
         contentEditable: /* @__PURE__ */ jsx(
@@ -64,7 +92,7 @@ const LexicalEditor = forwardRef(({ onChange, value, schema, placeholder, disabl
             "data-testid": "data-input-editor",
             "data-editor-container": "true",
             "data-placeholder": placeholder,
-            className: clsx(props.className, placeholderEmulation),
+            className: clsx(styles.root, props.className),
             style: {
               [PLACEHOLDER_CSS_VARIABLE]: `"${placeholder}"`
             }
@@ -72,7 +100,7 @@ const LexicalEditor = forwardRef(({ onChange, value, schema, placeholder, disabl
         ),
         ErrorBoundary: LexicalErrorBoundary
       }
-    ) }),
+    ),
     /* @__PURE__ */ jsx(HistoryPlugin, {}),
     /* @__PURE__ */ jsx(EditorTagPlugin, {}),
     /* @__PURE__ */ jsx(KeyboardPlugin, {}),
@@ -83,4 +111,4 @@ const LexicalEditor = forwardRef(({ onChange, value, schema, placeholder, disabl
 });
 LexicalEditor.displayName = "LexicalEditor";
 
-export { LexicalEditor, LexicalProvider };
+export { LexicalEditor, LexicalProvider, editorTagBadgeRecipe };

package/dist/esm/components/ComboBoxElements/Editor/helpers/clicks.mjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 

package/dist/esm/components/ComboBoxElements/Editor/helpers/common.mjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 

package/dist/esm/components/ComboBoxElements/Editor/helpers/tag-template-composition.mjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 

package/dist/esm/components/ComboBoxElements/Editor/helpers/transformEditorSchemaToValue.mjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 

package/dist/esm/components/ComboBoxElements/Editor/helpers/transformValueToEditorSchema.mjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 

package/dist/esm/components/ComboBoxElements/Editor/{components/EditorTag.mjs → nodes/EditorTagBinding.mjs}

@@ -2,30 +2,30 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 
 import { jsx } from 'react/jsx-runtime';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { clsx } from 'clsx';
+import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection';
 import { $getNodeByKey } from 'lexical';
 import { ComboBox } from '../../../ComboBox/ComboBox.mjs';
 import { useComboBox } from '../../../ComboBox/context/combobox-context.mjs';
-import { $isEditorTagNode } from '../nodes/EditorTagNode.mjs';
+import { $isEditorTagNode } from './EditorTagNode.mjs';
 import useDataBuilder from '../../../DataBuilder/data-builder-context.mjs';
 import { usIsFieldFrozen } from '../../../DataBuilder/hooks.mjs';
-import classes from '../../inputs.module.css.mjs';
 
-const EditorTag = ({
+const EditorTagBinding = ({
   internalKey,
   value,
   autoOpen
 }) => {
   const { isReadOnly } = useDataBuilder();
   const isFrozenField = usIsFieldFrozen();
-  const [editor] = useLexicalComposerContext();
   const { variablesSchema, schema } = useComboBox();
+  const [editor] = useLexicalComposerContext();
+  const [isSelected] = useLexicalNodeSelection(internalKey);
   const handleChange = (value2) => {
     editor.update(() => {
       const node = $getNodeByKey(internalKey);
@@ -39,26 +39,18 @@ const EditorTag = ({
     });
   };
   return /* @__PURE__ */ jsx(
-    "div",
+    ComboBox,
     {
-      className: clsx(classes.tagWrapper, {
-        [classes.tagWrapper__readonly]: isReadOnly || isFrozenField
-      }),
-      children: /* @__PURE__ */ jsx(
-        ComboBox,
-        {
-          className: classes.innerTag,
-          value,
-          schema,
-          variablesOnly: true,
-          disabled: isReadOnly || isFrozenField,
-          variablesSchema,
-          onChange: handleChange,
-          autoOpen
-        }
-      )
+      value,
+      schema,
+      variablesOnly: true,
+      disabled: isReadOnly || isFrozenField,
+      variablesSchema,
+      onChange: handleChange,
+      autoOpen,
+      "data-selected": isSelected
     }
   );
 };
 
-export { EditorTag };
+export { EditorTagBinding };

package/dist/esm/components/ComboBoxElements/Editor/nodes/EditorTagNode.mjs

@@ -2,13 +2,13 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 
 import { jsx } from 'react/jsx-runtime';
 import { DecoratorNode } from 'lexical';
-import { EditorTag } from '../components/EditorTag.mjs';
+import { EditorTagBinding } from './EditorTagBinding.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;
@@ -44,7 +44,7 @@ class EditorTagNode extends DecoratorNode {
     writable.__value = value;
   }
   decorate() {
-    return /* @__PURE__ */ jsx(EditorTag, { value: this.__value, internalKey: this.__key, autoOpen: this.__autoOpen });
+    return /* @__PURE__ */ jsx(EditorTagBinding, { value: this.__value, internalKey: this.__key, autoOpen: this.__autoOpen });
   }
   static importJSON(serializedNode) {
     const node = $createEditorTagNode(serializedNode.value);
@@ -57,6 +57,15 @@ class EditorTagNode extends DecoratorNode {
       version: 1
     };
   }
+  isKeyboardSelectable() {
+    return false;
+  }
+  isIsolated() {
+    return false;
+  }
+  isInline() {
+    return true;
+  }
   get id() {
     return this.__id;
   }

package/dist/esm/components/ComboBoxElements/Editor/plugins/ConfigPlugin.mjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 

package/dist/esm/components/ComboBoxElements/Editor/plugins/EditorTagPlugin.mjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 

package/dist/esm/components/ComboBoxElements/Editor/plugins/KeyboardPlugin.mjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 

package/dist/esm/components/ComboBoxElements/Editor/plugins/StateSyncPlugin.mjs

@@ -2,13 +2,13 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 
 import { useEffect } from 'react';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { $getSelection, $setSelection } from 'lexical';
+import { $getSelection, HISTORY_MERGE_TAG, $setSelection } from 'lexical';
 import { transformValueToEditorSchema } from '../helpers/transformValueToEditorSchema.mjs';
 
 const getRootParagraphNodes = (editorState) => {
@@ -26,7 +26,9 @@ function StateSyncPlugin({ value, schema }) {
       const newRootParagraph = JSON.stringify(getRootParagraphNodes(newState));
       if (currentRootParagraph !== newRootParagraph) {
         const selection = $getSelection();
-        editor.setEditorState(newState);
+        editor.setEditorState(newState, {
+          tag: HISTORY_MERGE_TAG
+        });
         const selectionClone = selection?.clone();
         $setSelection(selectionClone ?? null);
       }

package/dist/esm/components/ComboBoxElements/Editor/plugins/commands.mjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 

package/dist/esm/components/ComboBoxElements/Editor/useEditor.mjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';