@integration-app/react 2.0.3-beta.1 → 2.0.3-beta.2

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

@@ -0,0 +1,109 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+'use strict';
+
+var sdk = require('@integration-app/sdk');
+
+var ValueType = /* @__PURE__ */ ((ValueType2) => {
+  ValueType2["STRING"] = "string";
+  ValueType2["DATE"] = "date";
+  ValueType2["DATETIME"] = "datetime";
+  ValueType2["TIME"] = "time";
+  ValueType2["NUMBER"] = "number";
+  ValueType2["BOOLEAN"] = "boolean";
+  ValueType2["ARRAY"] = "array";
+  ValueType2["OBJECT"] = "object";
+  ValueType2["ANY"] = "any";
+  ValueType2["CUSTOM"] = "custom";
+  return ValueType2;
+})(ValueType || {});
+function getValueSpecFromSchema(schema) {
+  if (typeof schema?.type !== "string") {
+    return { type: "any" /* ANY */, allowCustom: true };
+  }
+  switch (schema.type?.toLowerCase?.()) {
+    case "string":
+      if (schema.format?.toLowerCase() == "date") {
+        return {
+          type: "date" /* DATE */,
+          allowCustom: true
+        };
+      }
+      if (schema.format?.toLowerCase() == "date-time") {
+        return {
+          type: "datetime" /* DATETIME */,
+          allowCustom: true
+        };
+      }
+      if (schema.format?.toLowerCase() == "time") {
+        return {
+          type: "time" /* TIME */,
+          allowCustom: true
+        };
+      } else {
+        return {
+          type: "string" /* STRING */,
+          allowCustom: sdk.schemaAllowsCustomValue(schema)
+        };
+      }
+    case "object":
+      return { type: "object" /* OBJECT */ };
+    case "array":
+      return {
+        type: "array" /* ARRAY */,
+        allowCustom: true
+      };
+    case "number":
+    case "integer":
+      return {
+        type: "number" /* NUMBER */,
+        allowCustom: sdk.schemaAllowsCustomValue(schema)
+      };
+    case "boolean":
+      return { type: "boolean" /* BOOLEAN */ };
+    default:
+      return { type: "any" /* ANY */, allowCustom: true };
+  }
+}
+function doesSchemaMatchValueType(schema, valueSpec, deep = false) {
+  if (!valueSpec?.type || valueSpec.type === "any" /* ANY */) {
+    return true;
+  }
+  if (!schema?.type) {
+    return true;
+  }
+  if (schema.type == "null") {
+    return false;
+  }
+  if (schema.type == valueSpec.type) {
+    return true;
+  }
+  if (sdk.schemaIsScalar(schema)) {
+    if (valueSpec.type != "array" /* ARRAY */ && valueSpec.type != "object" /* OBJECT */) {
+      return true;
+    }
+    return false;
+  }
+  if (deep) {
+    if (schema.type === "object" && schema.properties) {
+      return Object.values(schema.properties).some(
+        (prop) => doesSchemaMatchValueType(prop, valueSpec, true)
+      );
+    }
+    if (schema.type === "array" && schema.items) {
+      return doesSchemaMatchValueType(schema.items, valueSpec, true);
+    }
+    return false;
+  }
+  return false;
+}
+
+exports.ValueType = ValueType;
+exports.doesSchemaMatchValueType = doesSchemaMatchValueType;
+exports.getValueSpecFromSchema = getValueSpecFromSchema;

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

@@ -0,0 +1,86 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('clsx');
+var index = require('../Tag/index.cjs');
+var ComboBoxTag_module = require('./ComboBoxTag.module.css.cjs');
+var index$1 = require('../SvgIcon/index.cjs');
+
+const ComboBoxTag = React.forwardRef(
+  function({
+    // Style related props
+    className,
+    variant = "default",
+    selected = false,
+    disabled,
+    invalid,
+    onClick,
+    tooltip,
+    // Nested children props
+    children,
+    icon,
+    iconUri,
+    ...props
+  }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      index.Tag,
+      {
+        className: clsx(
+          ComboBoxTag_module.default.tagDefault,
+          !!onClick && ComboBoxTag_module.default.tagDefault__clickable,
+          selected && ComboBoxTag_module.default.tagDefault__selected,
+          disabled && ComboBoxTag_module.default.tagDefault__disabled,
+          invalid && ComboBoxTag_module.default.tagDefault__invalid,
+          variant === "lookup" && ComboBoxTag_module.default.tagLookup,
+          className
+        ),
+        tooltip,
+        onClick,
+        ref,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ComboboxIcon, { invalid, icon, iconUri }),
+          children
+        ]
+      }
+    );
+  }
+);
+ComboBoxTag.displayName = "ComboBoxTag";
+function ComboboxIcon({ invalid, icon, iconUri }) {
+  if (invalid) {
+    return /* @__PURE__ */ jsxRuntime.jsx(index.Tag.SvgIcon, { type: index$1.SvgIconType.Unlink });
+  }
+  if (icon) {
+    return /* @__PURE__ */ jsxRuntime.jsx(index.Tag.SvgIcon, { type: icon });
+  }
+  if (iconUri) {
+    return /* @__PURE__ */ jsxRuntime.jsx(index.Tag.Image, { src: iconUri });
+  }
+  return null;
+}
+function getClassFromSchema(schema) {
+  switch (schema?.type) {
+    case "string":
+      return ComboBoxTag_module.default.tagString;
+    case "number":
+    case "integer":
+      return ComboBoxTag_module.default.tagNumber;
+    case "boolean":
+      return ComboBoxTag_module.default.tagBoolean;
+    default:
+      return ComboBoxTag_module.default.tagUndefined;
+  }
+}
+
+exports.ComboBoxTag = ComboBoxTag;
+exports.getClassFromSchema = getClassFromSchema;

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

@@ -0,0 +1,18 @@
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styleInject = require('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));\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity));\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));\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));\n  --tw-bg-opacity: 1;\n  background-color: rgb(248 248 248 / var(--tw-bg-opacity));\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));\n  --tw-bg-opacity: 1;\n  background-color: rgb(170 170 170 / var(--tw-bg-opacity));\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity));\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));\n  --tw-bg-opacity: 1;\n  background-color: rgb(168 54 5 / var(--tw-bg-opacity));\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity));\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));\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));\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));\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity));\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));\n  --tw-border-opacity: 1;\n  border-color: rgb(13 121 194 / var(--tw-border-opacity));\n  --tw-bg-opacity: 1;\n  background-color: rgb(13 121 194 / var(--tw-bg-opacity));\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));\n  --tw-text-opacity: 1;\n  color: rgb(0 0 0 / var(--tw-text-opacity));\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));\n  --tw-text-opacity: 1;\n  color: rgb(0 0 0 / var(--tw-text-opacity));\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","actionBar":"ComboBoxTag-module_actionBar__a-Kcq","actionBarButton":"ComboBoxTag-module_actionBarButton__xVFYj","tagLookup":"ComboBoxTag-module_tagLookup__qurB2","tagString":"ComboBoxTag-module_tagString__Pmqwr","tagNumber":"ComboBoxTag-module_tagNumber__y6un6","tagBoolean":"ComboBoxTag-module_tagBoolean__e7saD"};
+styleInject(css_248z);
+
+exports.default = classes;

package/dist/cjs/components/ComboBoxElements/FieldWrapper.cjs

@@ -0,0 +1,39 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('clsx');
+var inputs_module = require('./inputs.module.css.cjs');
+
+const FieldWrapper = React.forwardRef(
+  ({ children, disabled, className, requiredAndEmptyField, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: clsx(
+          inputs_module.default.fieldWrapper,
+          disabled && inputs_module.default.fieldWrapper__disabled,
+          !!props.onClick && !disabled && inputs_module.default.fieldWrapper__clickable,
+          !requiredAndEmptyField && inputs_module.default.fieldWrapper__required,
+          className
+        ),
+        ref,
+        "data-role": "field-wrapper",
+        "aria-disabled": disabled,
+        "aria-readonly": disabled,
+        ...props,
+        children
+      }
+    );
+  }
+);
+
+exports.FieldWrapper = FieldWrapper;

package/dist/cjs/components/ComboBoxElements/Popper.cjs

@@ -0,0 +1,164 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var reactPopper = require('react-popper');
+var index = require('../Portal/index.cjs');
+var usehooksTs = require('usehooks-ts');
+var useResizeObserver = require('../../hooks/useResizeObserver.cjs');
+var useDeepEffect = require('../../hooks/useDeepEffect.cjs');
+var Popper_module = require('./Popper.module.css.cjs');
+var getRefElement = require('../../helpers/getRefElement.cjs');
+
+function DropdownUIPopper({
+  referenceElement,
+  children
+}) {
+  const [popperElement, setPopperElement] = React.useState();
+  const popperOptions = usePopperJsOptions();
+  const safeReferenceElement = getRefElement.getRefElement(referenceElement);
+  const {
+    styles,
+    attributes,
+    update: updatePopover
+  } = reactPopper.usePopper(safeReferenceElement, popperElement, popperOptions);
+  useDebouncedCallbackOnResize(safeReferenceElement, updatePopover);
+  const popperStyles = useDeepEffect.useDeepMemo(() => {
+    return styles.popper;
+  }, [styles.popper]);
+  const popperAttributes = useDeepEffect.useDeepMemo(
+    () => attributes.popper,
+    [attributes.popper]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(index.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-combobox": true,
+      role: "dialog",
+      ref: setPopperElement,
+      style: popperStyles,
+      ...popperAttributes,
+      className: Popper_module.default.popper,
+      children: popperElement && children
+    }
+  ) });
+}
+function usePopperJsOptions() {
+  return React.useMemo(() => {
+    const modifiers = [];
+    modifiers.push({
+      name: "setPlacement",
+      enabled: true,
+      phase: "beforeRead",
+      requires: ["flip"],
+      fn({ state }) {
+        const { offsetToTop, offsetToBottom } = getOffsetsFromState(state);
+        const { placement, fallbackPlacements } = getPopperPlacement(
+          state,
+          offsetToTop,
+          offsetToBottom
+        );
+        state.placement = placement;
+        state.options.modifiers.find(
+          (x) => x.name === "flip"
+        ).options.fallbackPlacements = fallbackPlacements;
+      }
+    });
+    modifiers.push({
+      name: "applyMaxHeight",
+      enabled: true,
+      phase: "beforeRead",
+      fn({ state }) {
+        const { offsetToTop, offsetToBottom } = getOffsetsFromState(state);
+        const additionalOffset = state.placement.includes("top") ? 20 : 0;
+        const maxHeight = getMinHeight(offsetToTop, offsetToBottom) - additionalOffset;
+        state.styles.popper = {
+          ...state.styles.popper,
+          maxHeight: `${maxHeight}px`
+        };
+      }
+    });
+    modifiers.push({
+      name: "offset",
+      options: {
+        offset: [0, 4]
+      }
+    });
+    modifiers.push({
+      name: "flip",
+      options: {
+        fallbackPlacements: [
+          "bottom-start",
+          "bottom-end",
+          "top-start",
+          "top-end"
+        ],
+        flipVariations: true
+      }
+    });
+    return {
+      placement: "bottom-start",
+      modifiers
+    };
+  }, []);
+}
+function useDebouncedCallbackOnResize(target, callback) {
+  const [width, setWidth] = React.useState(0);
+  const [height, setHeight] = React.useState(0);
+  const debouncedWidth = usehooksTs.useDebounce(width, 100);
+  const debouncedHeight = usehooksTs.useDebounce(height, 100);
+  React.useEffect(() => {
+    void callback?.();
+  }, [debouncedWidth, debouncedHeight, callback]);
+  useResizeObserver.default(target, ({ resized, size }) => {
+    if (resized.width) {
+      setWidth(size.width);
+    }
+    if (resized.height) {
+      setHeight(size.height);
+    }
+  });
+}
+function getOffsetsFromState(state) {
+  const additionalPadding = 20;
+  const { y: elPositionYRelatedToWindow, height: elHeight } = state.rects.reference;
+  const visualViewport = state.scrollParents.reference.find(
+    (x) => x instanceof VisualViewport
+  );
+  const viewportTopOffset = visualViewport?.pageTop ?? 0;
+  const viewportHeight = visualViewport?.height || window.innerHeight;
+  const topOffsetRelatedToViewport = elPositionYRelatedToWindow - viewportTopOffset;
+  const bottomOffsetRelatedToViewport = viewportHeight - topOffsetRelatedToViewport - elHeight;
+  return {
+    // Calculate available space to show the popper on the top
+    offsetToTop: topOffsetRelatedToViewport - additionalPadding,
+    // Calculate available space to show the popper on the bottom
+    offsetToBottom: bottomOffsetRelatedToViewport - additionalPadding
+  };
+}
+function getPopperPlacement(state, offsetToTop, offsetToBottom) {
+  const freeSpaceBasePlacement = offsetToTop > offsetToBottom ? "top" : "bottom";
+  const [_, baseHorizontalPlacement = "start"] = state.placement.split("-");
+  const placement = `${freeSpaceBasePlacement}-${baseHorizontalPlacement}`;
+  const fallbackPlacements = [
+    `${freeSpaceBasePlacement}-${baseHorizontalPlacement === "start" ? "end" : "start"}`
+  ];
+  return { placement, fallbackPlacements };
+}
+function getMinHeight(offsetToTop, offsetToBottom) {
+  const minAvailableHeight = 300;
+  return Math.max(
+    Math.round(Math.max(offsetToTop, offsetToBottom)),
+    minAvailableHeight
+  );
+}
+
+exports.DropdownUIPopper = DropdownUIPopper;

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

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

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

@@ -0,0 +1,126 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('clsx');
+var react = require('@tiptap/react');
+var Document = require('@tiptap/extension-document');
+var History = require('@tiptap/extension-history');
+var Paragraph = require('@tiptap/extension-paragraph');
+var Placeholder = require('@tiptap/extension-placeholder');
+var Text = require('@tiptap/extension-text');
+var TagComponent = require('./TagComponent.cjs');
+var extensionKeyboardShortcuts = require('./extension-keyboardShortcuts.cjs');
+var Editor_module = require('./Editor.module.css.cjs');
+var common = require('./helpers/common.cjs');
+var transformValueToEditorSchema = require('./helpers/transformValueToEditorSchema.cjs');
+var transformEditorSchemaToValue = require('./helpers/transformEditorSchemaToValue.cjs');
+
+const extensions = [History, Document, Paragraph, Text, TagComponent.default];
+const clearEditorSearchTerm = (chain, content, allowOverride) => {
+  if (!allowOverride) {
+    return chain;
+  }
+  const nodesSummary = common.getSchemaNodesSummary(content ?? {});
+  if (nodesSummary.nonText === 0) {
+    return chain?.setContent("");
+  }
+  return chain;
+};
+function useComboboxEditor({
+  value,
+  onEnter,
+  onChange,
+  placeholder = "",
+  allowEditorSearchClear = false,
+  ...props
+}) {
+  const editorExtensions = [
+    ...extensions,
+    Placeholder.configure({ placeholder }),
+    extensionKeyboardShortcuts.KeyboardShortcutHandler({ onEnter })
+  ];
+  const editorRef = React.useRef(null);
+  const onChangeHandlerRef = React.useRef(onChange);
+  onChangeHandlerRef.current = onChange;
+  const valueRef = React.useRef(value);
+  valueRef.current = value;
+  function handleCreate({ editor }) {
+    editorRef.current = editor;
+    setContent(transformValueToEditorSchema.transformValueToEditorSchema(valueRef.current));
+  }
+  function handleUpdate() {
+    if (!editorRef.current) return;
+    const newValue = transformEditorSchemaToValue.transformEditorSchemaToValue(
+      editorRef.current.getJSON() ?? {}
+    );
+    if (newValue !== valueRef.current) {
+      onChangeHandlerRef.current?.(newValue);
+    }
+  }
+  React.useEffect(() => {
+    if (editorRef.current) {
+      setContent?.(transformValueToEditorSchema.transformValueToEditorSchema(value));
+    }
+  }, [value ? JSON.stringify(value) : void 0]);
+  react.useEditor({
+    extensions: editorExtensions,
+    ...props,
+    // Initially always set content to undefined. We will manage content via setContent
+    onUpdate: handleUpdate,
+    onCreate: handleCreate
+  });
+  function pasteTag(variable, props2) {
+    const id = (/* @__PURE__ */ new Date()).getTime().toString();
+    const chain = editorRef.current?.chain().focus();
+    if (!chain) {
+      return;
+    }
+    clearEditorSearchTerm(
+      chain,
+      editorRef.current?.getJSON(),
+      allowEditorSearchClear
+    ).insertContent(TagComponent.getComponentTagNode(id, variable, props2)).run();
+    handleUpdate();
+  }
+  function setContent(content) {
+    const contentFromEditor = editorRef.current?.getJSON() ?? {};
+    if (!editorRef.current) {
+      return;
+    }
+    if (JSON.stringify(content) !== JSON.stringify(contentFromEditor)) {
+      const { from, to } = editorRef.current?.state?.selection ?? {};
+      editorRef.current?.commands.setContent(content);
+      from && to && editorRef.current.commands.setTextSelection({ from, to });
+    }
+  }
+  return {
+    editor: editorRef.current,
+    pasteTag,
+    setContent
+  };
+}
+const Editor = React.forwardRef(
+  ({ editor, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      react.EditorContent,
+      {
+        className: clsx(Editor_module.default.editor, className),
+        editor,
+        ...props,
+        ref
+      }
+    );
+  }
+);
+
+exports.Editor = Editor;
+exports.useComboboxEditor = useComboboxEditor;

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

@@ -0,0 +1,18 @@
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styleInject = require('style-inject');
+
+var css_248z = "\n  .Editor-module_editor__VVpoo 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.Editor-module_editor__VVpoo .tiptap {\n    min-width: 7rem;\n  }\n.Editor-module_editor__VVpoo .tiptap:focus {\n    outline: 2px solid transparent;\n    outline-offset: 2px;\n}\n:is(.Editor-module_editor__VVpoo .tiptap) .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__VVpoo .react-renderer {\n    display: contents;\n}\n";
+var classes = {"editor":"Editor-module_editor__VVpoo"};
+styleInject(css_248z);
+
+exports.default = classes;

package/dist/cjs/components/ComboBoxElements/TipTapEditor/EditorStandAlone.cjs

@@ -0,0 +1,31 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var Editor = require('./Editor.cjs');
+require('./TagComponent.cjs');
+require('../../SvgIcon/index.cjs');
+require('@integration-app/sdk');
+require('fuse');
+
+const StandAloneEditor = React.forwardRef(({ value, onChange, ...props }, ref) => {
+  const { editor } = Editor.useComboboxEditor({
+    // Do now allow manipulating the content (add new, remove existing, etc.)
+    // but existing <Tags /> can be edited, because they are separate components
+    editable: false,
+    value,
+    onChange
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(Editor.Editor, { editor, ref, ...props });
+});
+StandAloneEditor.displayName = "StandAloneEditor";
+
+exports.StandAloneEditor = StandAloneEditor;