@integry/sdk 4.5.25 → 4.5.26

package/package.json

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

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

@@ -1,6 +1,5 @@
 /* eslint-disable no-nested-ternary */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import React from 'react';
 import { NestedObject } from '@/interfaces';
 import { html } from 'htm/preact';
 import { createRef } from 'preact';
@@ -9,7 +8,7 @@ import { isScrolledIntoView } from '@/utils/common';
 import { searchJSON } from '@/utils/searchJson';
 import { Input } from '@/components/Input';
 import { createElement } from 'preact/compat';
-import { createRoot } from 'react-dom/client';
+import { renderToString } from 'react-dom/server';
 import { TagOptions } from '../TagOptions';
 import { ThreeDotLoader } from '../../ThreeDotLoader';
 import styles from './styles.module.scss';
@@ -221,34 +220,6 @@ const FieldDropdown = (props: FieldMenuProps) => {
     });
   }
 
-  // This component handles rendering React components in a Preact app
-  const ReactPortal = () => {
-    const reactRootRef = useRef<HTMLDivElement | null>(null);
-
-    useEffect(() => {
-      if (reactRootRef.current) {
-        // Ensure it's a valid React element
-        const reactElement = React.createElement(tagsComponent, {
-          onSelect: () => alert('Selected from React!'),
-        });
-
-        // Render using React's createRoot
-        const root = createRoot(reactRootRef.current);
-        root.render(reactElement);
-
-        // Cleanup on unmount
-        return () => root.unmount();
-      }
-
-      // Return a no-op cleanup to satisfy ESLint
-      return () => {
-        // No cleanup needed if reactRootRef is not set
-      };
-    }, []);
-
-    return html`<div ref=${reactRootRef}></div>`;
-  };
-
   return html` <div
     class=${`${styles.tagMenu} ${enableSearch ? styles.tagMenuWithSearch : ''}`}
     style=${parentContainer && tagMenyStyleRef?.current
@@ -374,7 +345,7 @@ const FieldDropdown = (props: FieldMenuProps) => {
           </div>`
         : html` <div className="${styles.mappedFieldMenu}">
             ${tagsComponent
-              ? html`<${ReactPortal} />`
+              ? html`<div>${renderToString(tagsComponentRender)}</div>`
               : html`${Object.keys(
                   !isEditable ? searchJSON(tags, searchValue) : tags,
                 ).length > 0