@integry/sdk 4.5.22 → 4.5.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@integry/sdk",
-  "version": "4.5.22",
+  "version": "4.5.24",
   "description": "Integry SDK",
   "main": "dist/umd/index.umd.js",
   "module": "dist/esm/index.csm.js",
@@ -54,6 +54,7 @@
     "@testing-library/preact": "^2.0.1",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^26.0.23",
+    "@types/react-dom": "^19.0.4",
     "@types/yaireo__tagify": "^4.18.0",
     "@typescript-eslint/eslint-plugin": "^4.20.0",
     "@typescript-eslint/parser": "^4.20.0",

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

@@ -8,7 +8,7 @@ import { isScrolledIntoView } from '@/utils/common';
 import { searchJSON } from '@/utils/searchJson';
 import { Input } from '@/components/Input';
 import { createElement } from 'preact/compat';
-import { cloneElement } from 'preact/compat';
+import { createRoot } from 'react-dom/client';
 import { TagOptions } from '../TagOptions';
 import { ThreeDotLoader } from '../../ThreeDotLoader';
 import styles from './styles.module.scss';
@@ -214,19 +214,28 @@ const FieldDropdown = (props: FieldMenuProps) => {
   }
 
   let tagsComponentRender: any = null;
-  let tagsComponentRenderClone: any = null;
   if (tagsComponent) {
     tagsComponentRender = createElement(tagsComponent, {
       onSelect: () => alert('Selected!'),
     });
-
-    tagsComponentRenderClone = cloneElement(tagsComponentRender);
-    // eslint-disable-next-line no-console
-    console.log(tagsComponentRender);
-    // eslint-disable-next-line no-console
-    console.log(tagsComponentRenderClone);
   }
 
+  const PortalWrapper = () => {
+    const reactRoot = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+      if (reactRoot.current) {
+        const root = createRoot(reactRoot.current);
+        root.render(tagsComponentRender);
+      }
+    }, []);
+
+    return html`<div ref=${reactRoot}></div>`;
+  };
+
+  // eslint-disable-next-line no-console
+  console.log(PortalWrapper);
+
   return html` <div
     class=${`${styles.tagMenu} ${enableSearch ? styles.tagMenuWithSearch : ''}`}
     style=${parentContainer && tagMenyStyleRef?.current
@@ -352,7 +361,7 @@ const FieldDropdown = (props: FieldMenuProps) => {
           </div>`
         : html` <div className="${styles.mappedFieldMenu}">
             ${tagsComponent
-              ? html`<div>${tagsComponentRenderClone}</div>`
+              ? html`<${PortalWrapper} />`
               : html`${Object.keys(
                   !isEditable ? searchJSON(tags, searchValue) : tags,
                 ).length > 0