@integry/sdk 4.5.28 → 4.5.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@integry/sdk",
-  "version": "4.5.28",
+  "version": "4.5.30",
   "description": "Integry SDK",
   "main": "dist/umd/index.umd.js",
   "module": "dist/esm/index.csm.js",

package/src/components/MultipurposeField/TagMenu/index.ts

@@ -2,12 +2,13 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { NestedObject } from '@/interfaces';
 import { html } from 'htm/preact';
-import { createRef } from 'preact';
+import { createRef, render } from 'preact';
 import { useEffect, useRef, useState } from 'preact/hooks';
 import { isScrolledIntoView } from '@/utils/common';
 import { searchJSON } from '@/utils/searchJson';
 import { Input } from '@/components/Input';
 import { createElement } from 'preact/compat';
+import ReactCompat from 'preact/compat';
 import { TagOptions } from '../TagOptions';
 import { ThreeDotLoader } from '../../ThreeDotLoader';
 import styles from './styles.module.scss';
@@ -212,12 +213,23 @@ const FieldDropdown = (props: FieldMenuProps) => {
     }
   }
 
-  let tagsComponentRender: any = null;
-  if (tagsComponent) {
-    tagsComponentRender = createElement(tagsComponent, {
-      onSelect: () => alert('Selected!'),
-    });
-  }
+  const convertReactToPreact = (
+    ReactComponent: any,
+    propsLocal = {},
+    mountNode: any,
+  ) => {
+    // Ensure props are mutable
+    const mutableProps = { ...propsLocal };
+
+    const PreactComponent = ReactCompat.createElement(
+      ReactComponent,
+      mutableProps,
+    );
+
+    render(PreactComponent, mountNode);
+  };
+
+  const mountNode = document.getElementById('x-integry-container');
 
   return html` <div
     class=${`${styles.tagMenu} ${enableSearch ? styles.tagMenuWithSearch : ''}`}
@@ -344,7 +356,13 @@ const FieldDropdown = (props: FieldMenuProps) => {
           </div>`
         : html` <div className="${styles.mappedFieldMenu}">
             ${tagsComponent
-              ? html`<div>${tagsComponentRender}</div>`
+              ? html`<div>
+                  ${convertReactToPreact(
+                    tagsComponent,
+                    { onSelect: '' },
+                    mountNode,
+                  )}
+                </div>`
               : html`${Object.keys(
                   !isEditable ? searchJSON(tags, searchValue) : tags,
                 ).length > 0