@integration-app/react 2.1.7 → 2.3.0

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

@@ -2,24 +2,23 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.7
+ * v2.3.0
  */
 'use client';
 
 import { jsx } from 'react/jsx-runtime';
-import { useRef, useEffect } from 'react';
+import { useRef } from 'react';
 import { isFormula, getFormula } from '@integration-app/sdk';
 import { useComboBox } from '../context/combobox-context.mjs';
 import { useComboBoxDropdownContext } from '../context/combobox-dropdown-context.mjs';
 import { useComboBoxDropdownSearchContext } from '../context/combobox-dropdown-search.mjs';
 import { Dropdown } from '../Dropdown/Dropdown.mjs';
 import { DropdownCategoryType } from '../types.mjs';
+import { LexicalEditor } from '../../ComboBoxElements/Editor/editor.mjs';
+import { isClickOnEditorCustomTagComponent } from '../../ComboBoxElements/Editor/helpers/clicks.mjs';
+import { transformEditorSchemaToValue } from '../../ComboBoxElements/Editor/helpers/transformEditorSchemaToValue.mjs';
+import { useEditor } from '../../ComboBoxElements/Editor/useEditor.mjs';
 import { FieldWrapper } from '../../ComboBoxElements/FieldWrapper.mjs';
-import { useComboboxEditor, Editor } from '../../ComboBoxElements/TipTapEditor/Editor.mjs';
-import '../../ComboBoxElements/TipTapEditor/EditorStandAlone.mjs';
-import 'fuse';
-import '../Dropdown/categoryContentMapping.mjs';
-import { isClickOnEditorCustomTagComponent } from '../../ComboBoxElements/TipTapEditor/helpers/clicks.mjs';
 import { getFormulas } from '../../DataBuilder/Formula/index.mjs';
 import { getRefElement } from '../../../helpers/getRefElement.mjs';
 import { isDefinedValue } from '../Value/isDefinedValue.mjs';
@@ -43,15 +42,7 @@ function TextInput({
     topDropdownPanelComponent
   } = useComboBox();
   const { setSearchSource, searchSource } = useComboBoxDropdownSearchContext();
-  const { editor, pasteTag } = useComboboxEditor({
-    value,
-    onChange,
-    placeholder,
-    allowEditorSearchClear: searchSource === "editor"
-  });
-  useEffect(() => {
-    editor?.setEditable(!disabled, false);
-  }, [disabled, editor]);
+  const { pasteTag } = useEditor();
   const { activeCategory } = useComboBoxDropdownContext();
   function handleOpenDropdown() {
     if (disabled) return;
@@ -79,7 +70,11 @@ function TextInput({
       if (openTagCombobox) {
         closeDropdown();
       }
-      pasteTag(variable, { autoOpen: openTagCombobox });
+      pasteTag({
+        value: variable,
+        autoOpen: openTagCombobox,
+        allowEditorSearchClear: searchSource === "editor"
+      });
     }
   };
   const requiredAndEmptyField = required && isDefinedValue(value);
@@ -99,13 +94,18 @@ function TextInput({
           onOptionSelect: handleOptionSelect,
           autoFocusOnSearch: false,
           children: /* @__PURE__ */ jsx(
-            Editor,
+            LexicalEditor,
             {
-              className,
               ref: textInputRef,
-              editor,
+              className,
               onFocus: () => {
                 setSearchSource("editor");
+              },
+              disabled,
+              value,
+              placeholder,
+              onChange: (state) => {
+                onChange(transformEditorSchemaToValue(state));
               }
             }
           )

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

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

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.1.7
+ * v2.3.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.1.7
+ * v2.3.0
  */
 'use client';
 

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

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

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

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

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.1.7
+ * v2.3.0
  */
 'use client';
 

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

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

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

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

package/dist/esm/components/ComboBox/context/helpers.mjs

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

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

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

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

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

package/dist/esm/components/ComboBox/options-factories/custom-field.mjs

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

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

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

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

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

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.1.7
+ * v2.3.0
  */
 'use client';
 

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.1.7
+ * v2.3.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.1.7
+ * v2.3.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.1.7
+ * v2.3.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.1.7
+ * v2.3.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.1.7
+ * v2.3.0
  */
 'use client';
 

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

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

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.1.7
+ * v2.3.0
  */
 'use client';
 

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.1.7
+ * v2.3.0
  */
 'use client';
 

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.1.7
+ * v2.3.0
  */
 'use client';
 

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

@@ -0,0 +1,14 @@
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.3.0
+ */
+'use client';
+
+import styleInject from 'style-inject';
+
+var css_248z = "\n  .Editor-module_editor__hh8sg p {\n    line-height: 2rem !important;\n    min-height: 2rem !important;\n    align-items: center !important;\n    margin: 0px !important;\n    padding: 0px !important;\n  }\n/*\n    I could not get this selector to work with Panda CSS in Lexical editor\n    It's needed to remove fake placeholder when something is typed\n  */\n.Editor-module_editor__hh8sg p:not(:has( > br:only-child))::before {\n    content: none;\n  }\n.Editor-module_editor__hh8sg [data-editor-container='true'] {\n    min-width: 7rem;\n  }\n.Editor-module_editor__hh8sg [data-editor-container='true']:focus {\n    outline: 2px solid transparent;\n    outline-offset: 2px;\n}\n:is(.Editor-module_editor__hh8sg [data-editor-container='true']) .is-editor-empty:first-child::before {\n    pointer-events: none;\n    float: left;\n    height: 0px;\n    --tw-text-opacity: 1;\n    color: rgb(170 170 170 / var(--tw-text-opacity));\n      content: attr(data-placeholder);\n}\n.Editor-module_editor__hh8sg [data-editor-tag='true'] {\n    display: contents;\n}\n";
+var classes = {"editor":"Editor-module_editor__hh8sg"};
+styleInject(css_248z);
+
+export { classes as default };

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

@@ -0,0 +1,64 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.3.0
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { clsx } from 'clsx';
+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 useDataBuilder from '../../../DataBuilder/data-builder-context.mjs';
+import { usIsFieldFrozen } from '../../../DataBuilder/hooks.mjs';
+import classes from '../../inputs.module.css.mjs';
+
+const EditorTag = ({
+  internalKey,
+  value,
+  autoOpen
+}) => {
+  const { isReadOnly } = useDataBuilder();
+  const isFrozenField = usIsFieldFrozen();
+  const [editor] = useLexicalComposerContext();
+  const { variablesSchema } = useComboBox();
+  const handleChange = (value2) => {
+    editor.update(() => {
+      const node = $getNodeByKey(internalKey);
+      if ($isEditorTagNode(node)) {
+        if (value2 === void 0) {
+          node.remove();
+        } else {
+          node.setValue(value2);
+        }
+      }
+    });
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(classes.tagWrapper, {
+        [classes.tagWrapper__readonly]: isReadOnly || isFrozenField
+      }),
+      children: /* @__PURE__ */ jsx(
+        ComboBox,
+        {
+          className: classes.innerTag,
+          value,
+          schema: { type: "string" },
+          variablesOnly: true,
+          disabled: isReadOnly || isFrozenField,
+          variablesSchema,
+          onChange: handleChange,
+          autoOpen
+        }
+      )
+    }
+  );
+};
+
+export { EditorTag };

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

@@ -0,0 +1,93 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.3.0
+ */
+'use client';
+
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { LexicalComposer } from '@lexical/react/LexicalComposer';
+import { ContentEditable } from '@lexical/react/LexicalContentEditable';
+import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
+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/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 { 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,
+  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 LexicalEditor = forwardRef(({ onChange, value, placeholder, disabled, ...props }, ref) => {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Box, { className: clsx(classes.editor), children: /* @__PURE__ */ jsx(
+      PlainTextPlugin,
+      {
+        contentEditable: /* @__PURE__ */ jsx(
+          ContentEditable,
+          {
+            ref,
+            spellCheck: false,
+            ...props,
+            "data-testid": "data-input-editor",
+            "data-editor-container": "true",
+            "data-placeholder": placeholder,
+            className: clsx(props.className, placeholderEmulation),
+            style: {
+              [PLACEHOLDER_CSS_VARIABLE]: `"${placeholder}"`
+            }
+          }
+        ),
+        ErrorBoundary: LexicalErrorBoundary
+      }
+    ) }),
+    /* @__PURE__ */ jsx(HistoryPlugin, {}),
+    /* @__PURE__ */ jsx(EditorTagPlugin, {}),
+    /* @__PURE__ */ jsx(KeyboardPlugin, {}),
+    /* @__PURE__ */ jsx(
+      OnChangePlugin,
+      {
+        ignoreSelectionChange: true,
+        ignoreHistoryMergeTagChange: true,
+        onChange
+      }
+    ),
+    /* @__PURE__ */ jsx(StateSyncPlugin, { value }),
+    /* @__PURE__ */ jsx(ConfigPlugin, { disabled })
+  ] });
+});
+LexicalEditor.displayName = "LexicalEditor";
+
+export { LexicalEditor, LexicalProvider };

package/dist/esm/components/ComboBoxElements/{TipTapEditor → Editor}/helpers/clicks.mjs

@@ -2,11 +2,11 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.7
+ * v2.3.0
  */
 'use client';
 
-import { TAG_EXTENSION_NAME } from '../constants.mjs';
+import { NODE_DATA_ATTR } from '../nodes/EditorTagNode.mjs';
 
 function isClickOnEditorCustomTagComponent(element, rootElement) {
   if (!element) {
@@ -27,10 +27,10 @@ function isClickOnEditorComponent(element, rootElement) {
   return isElementEditorComponent(element) || isClickOnEditorComponent(element?.parentElement, rootElement);
 }
 function isElementEditorCustomTagComponent(element) {
-  return element.classList.contains(`node-${TAG_EXTENSION_NAME}`);
+  return element.hasAttribute(NODE_DATA_ATTR);
 }
 function isElementEditorComponent(element) {
-  return element.classList.contains("tiptap");
+  return element.hasAttribute("data-editor-container");
 }
 
 export { isClickOnEditorComponent, isClickOnEditorCustomTagComponent };

package/dist/esm/components/ComboBoxElements/{TipTapEditor → Editor}/helpers/common.mjs

@@ -2,34 +2,24 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.7
+ * v2.3.0
  */
 'use client';
 
 import { isCustomFieldValue } from '../../../ComboBox/options-factories/custom-field.mjs';
-import { TAG_EXTENSION_NAME } from '../constants.mjs';
+import { regExpTag, TAG_MARK_START, TAG_MARK_END, getTagString } from './tag-template-composition.mjs';
 
-const TAG_MARK_END = "}";
-const TAG_MARK_START = "{";
-const regExpStr = `(${TAG_MARK_START}(?:[^${TAG_MARK_START}${TAG_MARK_END}\\s]*)${TAG_MARK_END})`;
-const regExpTag = new RegExp(regExpStr, "gm");
-function getTextNode(string) {
-  return {
-    type: "text",
-    text: string
-  };
-}
 function getTemplateFromTplValue(value) {
   if (typeof value === "string") {
     return value;
   }
-  if (value?.$tpl) {
+  if (isValueTemplate(value)) {
     return value.$tpl.template;
   }
   return "";
 }
 function getValuesFromTplValue(value) {
-  if (value?.$tpl) {
+  if (isValueTemplate(value)) {
     return value.$tpl.values;
   }
   return {};
@@ -47,7 +37,7 @@ function transformValueToTpl(value) {
   if (typeof value === "number") {
     return String(value);
   }
-  if (value?.$tpl) {
+  if (isValueTemplate(value)) {
     return value;
   }
   return {
@@ -59,6 +49,9 @@ function transformValueToTpl(value) {
     }
   };
 }
+const isValueTemplate = (value) => {
+  return value?.$tpl !== void 0;
+};
 function transformTplToValue(template, values) {
   if (template === "" || template === void 0 || template === null) {
     return void 0;
@@ -93,7 +86,7 @@ function isValueEmpty(value) {
 function strContainsTagChunk(str) {
   return str ? !!str.match(regExpTag) : false;
 }
-function getTagChunkValue(chunk) {
+function getTagChunkIdentifier(chunk) {
   return chunk.substring(1, chunk.length - 1);
 }
 function getValuesExistInTemplate(template, values) {
@@ -103,47 +96,11 @@ function getValuesExistInTemplate(template, values) {
 }
 function getTemplateWithExistingTags(template, values) {
   return splitStringToChunks(template ?? "").map((string) => {
-    if (isTagChunk(string) && isValueEmpty(values[getTagChunkValue(string)])) {
+    if (isTagChunk(string) && isValueEmpty(values[getTagChunkIdentifier(string)])) {
       return "";
     }
     return string;
   }).join("");
 }
-function getTagString(id) {
-  return `${TAG_MARK_START}${id}${TAG_MARK_END}`;
-}
-function getSchemaNodesSummary(schema) {
-  const content = schema?.content ?? [];
-  return content.reduce(
-    (acc, node) => {
-      const items = node.content ?? [];
-      const innerTotal = items.reduce(
-        (innerAcc, item) => {
-          if (item?.type === "text") {
-            innerAcc.text = innerAcc.text + 1;
-          } else {
-            innerAcc.nonText = innerAcc.nonText + 1;
-          }
-          return innerAcc;
-        },
-        { text: 0, nonText: 0 }
-      );
-      acc.text = acc.text + innerTotal.text;
-      acc.nonText = acc.nonText + innerTotal.nonText;
-      return acc;
-    },
-    { text: 0, nonText: 0 }
-  );
-}
-function getComponentTagNode(id, value, { autoOpen } = {}) {
-  return {
-    type: TAG_EXTENSION_NAME,
-    attrs: {
-      id,
-      value,
-      autoOpen
-    }
-  };
-}
 
-export { TAG_MARK_END, TAG_MARK_START, getComponentTagNode, getSchemaNodesSummary, getTagChunkValue, getTagString, getTemplateFromTplValue, getTemplateWithExistingTags, getTextNode, getValuesExistInTemplate, getValuesFromTplValue, isTagChunk, regExpTag, splitStringToChunks, transformTplToValue, transformValueToTpl };
+export { getTagChunkIdentifier, getTemplateFromTplValue, getTemplateWithExistingTags, getValuesExistInTemplate, getValuesFromTplValue, isTagChunk, isValueTemplate, splitStringToChunks, transformTplToValue, transformValueToTpl };

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

@@ -0,0 +1,17 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.3.0
+ */
+'use client';
+
+const TAG_MARK_END = "}";
+const TAG_MARK_START = "{";
+const regExpStr = `(${TAG_MARK_START}(?:[^${TAG_MARK_START}${TAG_MARK_END}\\s]*)${TAG_MARK_END})`;
+const regExpTag = new RegExp(regExpStr, "gm");
+function getTagString(id) {
+  return `${TAG_MARK_START}${id}${TAG_MARK_END}`;
+}
+
+export { TAG_MARK_END, TAG_MARK_START, getTagString, regExpTag };