@integration-app/react 2.1.7 → 2.2.0

package/dist/cjs/components/ComboBox/options-factories/generate-schema-options.cjs

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

package/dist/cjs/components/ComboBox/options-factories/object-fields.cjs

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

package/dist/cjs/components/ComboBox/options-factories/reference-records.cjs

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

package/dist/cjs/components/ComboBox/options-factories/root.cjs

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

package/dist/cjs/components/ComboBox/options-factories/utils.cjs

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

package/dist/cjs/components/ComboBox/options-factories/variable.cjs

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

package/dist/cjs/components/ComboBox/types.cjs

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

package/dist/cjs/components/ComboBox/value-spec.cjs

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

package/dist/cjs/components/ComboBoxElements/ComboBoxTag.cjs

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

package/dist/cjs/components/ComboBoxElements/ComboBoxTag.module.css.cjs

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

package/dist/cjs/components/ComboBoxElements/Editor/Editor.module.css.cjs

@@ -0,0 +1,18 @@
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.2.0
+ */
+'use client';
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styleInject = require('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);
+
+exports.default = classes;

package/dist/cjs/components/ComboBoxElements/Editor/components/EditorTag.cjs

@@ -0,0 +1,66 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.2.0
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var clsx = require('clsx');
+var lexical = require('lexical');
+var ComboBox = require('../../../ComboBox/ComboBox.cjs');
+var comboboxContext = require('../../../ComboBox/context/combobox-context.cjs');
+var EditorTagNode = require('../nodes/EditorTagNode.cjs');
+var dataBuilderContext = require('../../../DataBuilder/data-builder-context.cjs');
+var hooks = require('../../../DataBuilder/hooks.cjs');
+var inputs_module = require('../../inputs.module.css.cjs');
+
+const EditorTag = ({
+  internalKey,
+  value,
+  autoOpen
+}) => {
+  const { isReadOnly } = dataBuilderContext.default();
+  const isFrozenField = hooks.usIsFieldFrozen();
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  const { variablesSchema } = comboboxContext.useComboBox();
+  const handleChange = (value2) => {
+    editor.update(() => {
+      const node = lexical.$getNodeByKey(internalKey);
+      if (EditorTagNode.$isEditorTagNode(node)) {
+        if (value2 === void 0) {
+          node.remove();
+        } else {
+          node.setValue(value2);
+        }
+      }
+    });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: clsx.clsx(inputs_module.default.tagWrapper, {
+        [inputs_module.default.tagWrapper__readonly]: isReadOnly || isFrozenField
+      }),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        ComboBox.ComboBox,
+        {
+          className: inputs_module.default.innerTag,
+          value,
+          schema: { type: "string" },
+          variablesOnly: true,
+          disabled: isReadOnly || isFrozenField,
+          variablesSchema,
+          onChange: handleChange,
+          autoOpen
+        }
+      )
+    }
+  );
+};
+
+exports.EditorTag = EditorTag;

package/dist/cjs/components/ComboBoxElements/Editor/editor.cjs

@@ -0,0 +1,96 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.2.0
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var LexicalComposer = require('@lexical/react/LexicalComposer');
+var LexicalContentEditable = require('@lexical/react/LexicalContentEditable');
+var LexicalErrorBoundary = require('@lexical/react/LexicalErrorBoundary');
+var LexicalHistoryPlugin = require('@lexical/react/LexicalHistoryPlugin');
+var LexicalOnChangePlugin = require('@lexical/react/LexicalOnChangePlugin');
+var LexicalPlainTextPlugin = require('@lexical/react/LexicalPlainTextPlugin');
+var clsx = require('clsx');
+var css = require('../../../styled-system/css/css.cjs');
+require('../../../styled-system/helpers.cjs');
+require('../../../styled-system/jsx/is-valid-prop.cjs');
+var box = require('../../../styled-system/jsx/box.cjs');
+require('../../../styled-system/patterns/visually-hidden.cjs');
+var Editor_module = require('./Editor.module.css.cjs');
+var EditorTagNode = require('./nodes/EditorTagNode.cjs');
+var ConfigPlugin = require('./plugins/ConfigPlugin.cjs');
+var EditorTagPlugin = require('./plugins/EditorTagPlugin.cjs');
+var KeyboardPlugin = require('./plugins/KeyboardPlugin.cjs');
+var StateSyncPlugin = require('./plugins/StateSyncPlugin.cjs');
+
+function onError(error) {
+  console.error(error);
+}
+const initialConfig = {
+  namespace: "data-input-editor",
+  onError,
+  nodes: [EditorTagNode.EditorTagNode]
+};
+function LexicalProvider({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(LexicalComposer.LexicalComposer, { initialConfig, children });
+}
+const PLACEHOLDER_CSS_VARIABLE = "--placeholder-text";
+const placeholderEmulation = css.css({
+  "& p": {
+    _before: {
+      content: `var(${PLACEHOLDER_CSS_VARIABLE})`,
+      float: "left",
+      pointerEvents: "none",
+      h: 0,
+      color: "gray.9"
+    }
+  }
+});
+const LexicalEditor = React.forwardRef(({ onChange, value, placeholder, disabled, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(box.Box, { className: clsx(Editor_module.default.editor), children: /* @__PURE__ */ jsxRuntime.jsx(
+      LexicalPlainTextPlugin.PlainTextPlugin,
+      {
+        contentEditable: /* @__PURE__ */ jsxRuntime.jsx(
+          LexicalContentEditable.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.LexicalErrorBoundary
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(LexicalHistoryPlugin.HistoryPlugin, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(EditorTagPlugin.EditorTagPlugin, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(KeyboardPlugin.KeyboardPlugin, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      LexicalOnChangePlugin.OnChangePlugin,
+      {
+        ignoreSelectionChange: true,
+        ignoreHistoryMergeTagChange: true,
+        onChange
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(StateSyncPlugin.StateSyncPlugin, { value }),
+    /* @__PURE__ */ jsxRuntime.jsx(ConfigPlugin.ConfigPlugin, { disabled })
+  ] });
+});
+LexicalEditor.displayName = "LexicalEditor";
+
+exports.LexicalEditor = LexicalEditor;
+exports.LexicalProvider = LexicalProvider;

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

@@ -2,13 +2,13 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.7
+ * v2.2.0
  */
 'use client';
 
 'use strict';
 
-var constants = require('../constants.cjs');
+var EditorTagNode = require('../nodes/EditorTagNode.cjs');
 
 function isClickOnEditorCustomTagComponent(element, rootElement) {
   if (!element) {
@@ -29,10 +29,10 @@ function isClickOnEditorComponent(element, rootElement) {
   return isElementEditorComponent(element) || isClickOnEditorComponent(element?.parentElement, rootElement);
 }
 function isElementEditorCustomTagComponent(element) {
-  return element.classList.contains(`node-${constants.TAG_EXTENSION_NAME}`);
+  return element.hasAttribute(EditorTagNode.NODE_DATA_ATTR);
 }
 function isElementEditorComponent(element) {
-  return element.classList.contains("tiptap");
+  return element.hasAttribute("data-editor-container");
 }
 
 exports.isClickOnEditorComponent = isClickOnEditorComponent;

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

@@ -2,25 +2,15 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.7
+ * v2.2.0
  */
 'use client';
 
 'use strict';
 
 var customField = require('../../../ComboBox/options-factories/custom-field.cjs');
-var constants = require('../constants.cjs');
+var tagTemplateComposition = require('./tag-template-composition.cjs');
 
-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;
@@ -84,23 +74,23 @@ function transformTplToValue(template, values) {
   };
 }
 function splitStringToChunks(line) {
-  return line.split(regExpTag).filter((l) => l !== "");
+  return line.split(tagTemplateComposition.regExpTag).filter((l) => l !== "");
 }
 function isTagChunk(chunk) {
-  return strContainsTagChunk(chunk) && chunk.startsWith(TAG_MARK_START) && chunk.endsWith(TAG_MARK_END);
+  return strContainsTagChunk(chunk) && chunk.startsWith(tagTemplateComposition.TAG_MARK_START) && chunk.endsWith(tagTemplateComposition.TAG_MARK_END);
 }
 function isValueEmpty(value) {
   return value === void 0 || value === null;
 }
 function strContainsTagChunk(str) {
-  return str ? !!str.match(regExpTag) : false;
+  return str ? !!str.match(tagTemplateComposition.regExpTag) : false;
 }
 function getTagChunkValue(chunk) {
   return chunk.substring(1, chunk.length - 1);
 }
 function getValuesExistInTemplate(template, values) {
   return Object.keys(values).reduce((acc, valueId) => {
-    return !isValueEmpty(values[valueId]) && template.includes(getTagString(valueId)) ? { ...acc, [valueId]: values[valueId] } : acc;
+    return !isValueEmpty(values[valueId]) && template.includes(tagTemplateComposition.getTagString(valueId)) ? { ...acc, [valueId]: values[valueId] } : acc;
   }, {});
 }
 function getTemplateWithExistingTags(template, values) {
@@ -111,56 +101,13 @@ function getTemplateWithExistingTags(template, values) {
     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: constants.TAG_EXTENSION_NAME,
-    attrs: {
-      id,
-      value,
-      autoOpen
-    }
-  };
-}
 
-exports.TAG_MARK_END = TAG_MARK_END;
-exports.TAG_MARK_START = TAG_MARK_START;
-exports.getComponentTagNode = getComponentTagNode;
-exports.getSchemaNodesSummary = getSchemaNodesSummary;
 exports.getTagChunkValue = getTagChunkValue;
-exports.getTagString = getTagString;
 exports.getTemplateFromTplValue = getTemplateFromTplValue;
 exports.getTemplateWithExistingTags = getTemplateWithExistingTags;
-exports.getTextNode = getTextNode;
 exports.getValuesExistInTemplate = getValuesExistInTemplate;
 exports.getValuesFromTplValue = getValuesFromTplValue;
 exports.isTagChunk = isTagChunk;
-exports.regExpTag = regExpTag;
 exports.splitStringToChunks = splitStringToChunks;
 exports.transformTplToValue = transformTplToValue;
 exports.transformValueToTpl = transformValueToTpl;

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

@@ -0,0 +1,22 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.2.0
+ */
+'use client';
+
+'use strict';
+
+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}`;
+}
+
+exports.TAG_MARK_END = TAG_MARK_END;
+exports.TAG_MARK_START = TAG_MARK_START;
+exports.getTagString = getTagString;
+exports.regExpTag = regExpTag;

package/dist/cjs/components/ComboBoxElements/Editor/helpers/transformEditorSchemaToValue.cjs

@@ -0,0 +1,63 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.2.0
+ */
+'use client';
+
+'use strict';
+
+var lexical = require('lexical');
+var EditorTagNode = require('../nodes/EditorTagNode.cjs');
+var common = require('./common.cjs');
+var tagTemplateComposition = require('./tag-template-composition.cjs');
+
+function transformEditorSchemaToValue(editorState) {
+  const transformed = {
+    template: "",
+    values: {}
+  };
+  editorState.read(() => {
+    const root = lexical.$getRoot();
+    const paragraphs = [];
+    for (const node of root.getChildren()) {
+      if (lexical.$isParagraphNode(node)) {
+        const paragraphContent = processParagraphNode(node);
+        paragraphs.push(paragraphContent.join(""));
+        transformed.values = {
+          ...transformed.values,
+          ...extractTagValues(node)
+        };
+      }
+    }
+    transformed.template = paragraphs.join("\n");
+  });
+  if (Object.keys(transformed.values).length === 0) {
+    return transformed.template || "";
+  }
+  return common.transformTplToValue(transformed.template, transformed.values);
+}
+function processParagraphNode(node) {
+  const contentParts = [];
+  for (const child of node.getChildren()) {
+    if (EditorTagNode.$isEditorTagNode(child)) {
+      const id = child.id;
+      contentParts.push(tagTemplateComposition.getTagString(id));
+    } else {
+      contentParts.push(child.getTextContent());
+    }
+  }
+  return contentParts;
+}
+function extractTagValues(node) {
+  const values = {};
+  for (const child of node.getChildren()) {
+    if (EditorTagNode.$isEditorTagNode(child)) {
+      values[child.id] = child.value;
+    }
+  }
+  return values;
+}
+
+exports.transformEditorSchemaToValue = transformEditorSchemaToValue;

package/dist/cjs/components/ComboBoxElements/Editor/helpers/transformValueToEditorSchema.cjs

@@ -0,0 +1,63 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.2.0
+ */
+'use client';
+
+'use strict';
+
+var common = require('./common.cjs');
+
+function transformValueToEditorSchema(value) {
+  const safeValue = common.transformValueToTpl(value);
+  const template = common.getTemplateFromTplValue(safeValue);
+  const values = common.getValuesFromTplValue(safeValue);
+  const chunks = common.splitStringToChunks(template);
+  const nodes = chunks.map(
+    (chunk) => {
+      if (common.isTagChunk(chunk)) {
+        const tagValue = common.getTagChunkValue(chunk);
+        const value2 = values[tagValue];
+        return {
+          type: "editor-tag-node",
+          value: { value: value2, autoOpen: false, id: tagValue },
+          version: 1
+        };
+      }
+      return {
+        type: "text",
+        version: 1,
+        detail: 0,
+        format: 0,
+        mode: "normal",
+        style: "",
+        text: chunk
+      };
+    }
+  );
+  const paragraph = {
+    children: nodes,
+    direction: "ltr",
+    format: "",
+    indent: 0,
+    textFormat: 0,
+    textStyle: "",
+    type: "paragraph",
+    version: 1
+  };
+  const res = {
+    root: {
+      children: [paragraph],
+      direction: "ltr",
+      format: "",
+      indent: 0,
+      type: "root",
+      version: 1
+    }
+  };
+  return res;
+}
+
+exports.transformValueToEditorSchema = transformValueToEditorSchema;

package/dist/cjs/components/ComboBoxElements/Editor/nodes/EditorTagNode.cjs

@@ -0,0 +1,89 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.2.0
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lexical = require('lexical');
+var EditorTag = require('../components/EditorTag.cjs');
+
+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, typeof key !== "symbol" ? key + "" : key, value);
+const NODE_DATA_ATTR = "data-editor-tag";
+class EditorTagNode extends lexical.DecoratorNode {
+  constructor(value, key) {
+    super(key);
+    __publicField(this, "__value");
+    __publicField(this, "__id");
+    __publicField(this, "__autoOpen");
+    this.__value = value.value;
+    this.__autoOpen = value.autoOpen;
+    this.__id = value.id;
+  }
+  static getType() {
+    return "editor-tag-node";
+  }
+  static clone(node) {
+    return new EditorTagNode(
+      { value: node.__value, autoOpen: node.__autoOpen, id: node.__id },
+      node.__key
+    );
+  }
+  createDOM() {
+    const element = document.createElement("span");
+    element.setAttribute(NODE_DATA_ATTR, "true");
+    element.setAttribute("contenteditable", "false");
+    return element;
+  }
+  updateDOM() {
+    return false;
+  }
+  setValue(value) {
+    const writable = this.getWritable();
+    writable.__value = value;
+  }
+  decorate() {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      EditorTag.EditorTag,
+      {
+        value: this.__value,
+        internalKey: this.__key,
+        autoOpen: this.__autoOpen
+      }
+    );
+  }
+  static importJSON(serializedNode) {
+    const node = $createEditorTagNode(serializedNode.value);
+    return node;
+  }
+  exportJSON() {
+    return {
+      type: EditorTagNode.getType(),
+      value: this.__value,
+      version: 1
+    };
+  }
+  get id() {
+    return this.__id;
+  }
+  get value() {
+    return this.__value;
+  }
+}
+function $createEditorTagNode(value) {
+  return new EditorTagNode(value);
+}
+function $isEditorTagNode(node) {
+  return node instanceof EditorTagNode;
+}
+
+exports.$createEditorTagNode = $createEditorTagNode;
+exports.$isEditorTagNode = $isEditorTagNode;
+exports.EditorTagNode = EditorTagNode;
+exports.NODE_DATA_ATTR = NODE_DATA_ATTR;