@integry/sdk 4.5.24 → 4.5.25

package/package.json

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

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

@@ -1,5 +1,6 @@
 /* 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';
@@ -220,22 +221,34 @@ const FieldDropdown = (props: FieldMenuProps) => {
     });
   }
 
-  const PortalWrapper = () => {
-    const reactRoot = useRef<HTMLDivElement>(null);
+  // This component handles rendering React components in a Preact app
+  const ReactPortal = () => {
+    const reactRootRef = useRef<HTMLDivElement | null>(null);
 
     useEffect(() => {
-      if (reactRoot.current) {
-        const root = createRoot(reactRoot.current);
-        root.render(tagsComponentRender);
+      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=${reactRoot}></div>`;
+    return html`<div ref=${reactRootRef}></div>`;
   };
 
-  // eslint-disable-next-line no-console
-  console.log(PortalWrapper);
-
   return html` <div
     class=${`${styles.tagMenu} ${enableSearch ? styles.tagMenuWithSearch : ''}`}
     style=${parentContainer && tagMenyStyleRef?.current
@@ -361,7 +374,7 @@ const FieldDropdown = (props: FieldMenuProps) => {
           </div>`
         : html` <div className="${styles.mappedFieldMenu}">
             ${tagsComponent
-              ? html`<${PortalWrapper} />`
+              ? html`<${ReactPortal} />`
               : html`${Object.keys(
                   !isEditable ? searchJSON(tags, searchValue) : tags,
                 ).length > 0