@integry/sdk 4.5.23 → 4.5.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@integry/sdk",
-  "version": "4.5.23",
+  "version": "4.5.25",
   "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

@@ -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';
@@ -8,7 +9,7 @@ import { isScrolledIntoView } from '@/utils/common';
 import { searchJSON } from '@/utils/searchJson';
 import { Input } from '@/components/Input';
 import { createElement } from 'preact/compat';
-import { createPortal } from 'preact/compat';
+import { createRoot } from 'react-dom/client';
 import { TagOptions } from '../TagOptions';
 import { ThreeDotLoader } from '../../ThreeDotLoader';
 import styles from './styles.module.scss';
@@ -220,16 +221,32 @@ const FieldDropdown = (props: FieldMenuProps) => {
     });
   }
 
-  const PortalWrapper = () => {
-    const containerRef = useRef<HTMLDivElement>(null);
+  // This component handles rendering React components in a Preact app
+  const ReactPortal = () => {
+    const reactRootRef = useRef<HTMLDivElement | null>(null);
 
     useEffect(() => {
-      if (containerRef.current) {
-        createPortal(tagsComponentRender, containerRef.current);
+      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=${containerRef}></div>`;
+    return html`<div ref=${reactRootRef}></div>`;
   };
 
   return html` <div
@@ -357,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