@integry/sdk 4.5.31 → 4.5.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@integry/sdk",
-  "version": "4.5.31",
+  "version": "4.5.32",
   "description": "Integry SDK",
   "main": "dist/umd/index.umd.js",
   "module": "dist/esm/index.csm.js",
@@ -54,7 +54,6 @@
     "@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

@@ -2,13 +2,12 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { NestedObject } from '@/interfaces';
 import { html } from 'htm/preact';
-import { createRef, render } from 'preact';
+import { createRef } 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 { TagsMenuComponent } from '@/components/React/TagsMenu';
 import { TagOptions } from '../TagOptions';
 import { ThreeDotLoader } from '../../ThreeDotLoader';
 import styles from './styles.module.scss';
@@ -213,22 +212,6 @@ const FieldDropdown = (props: FieldMenuProps) => {
     }
   }
 
-  const deepClone = (obj: any) => JSON.parse(JSON.stringify(obj));
-
-  const convertReactToPreact = (
-    ReactComponent: any,
-    propsLocal = {},
-    mountNode: any,
-  ) => {
-    const PreactComponent = ReactCompat.createElement(
-      ReactComponent,
-      deepClone(propsLocal),
-    );
-    render(PreactComponent, mountNode);
-  };
-
-  const mountNode = document.getElementById('x-integry-container');
-
   return html` <div
     class=${`${styles.tagMenu} ${enableSearch ? styles.tagMenuWithSearch : ''}`}
     style=${parentContainer && tagMenyStyleRef?.current
@@ -354,13 +337,10 @@ const FieldDropdown = (props: FieldMenuProps) => {
           </div>`
         : html` <div className="${styles.mappedFieldMenu}">
             ${tagsComponent
-              ? html`<div>
-                  ${convertReactToPreact(
-                    tagsComponent,
-                    { onSelect: '' },
-                    mountNode,
-                  )}
-                </div>`
+              ? html`<${TagsMenuComponent}
+                  message="Hello from Preact now again!"
+                  tagsComponent=${tagsComponent}
+                />`
               : html`${Object.keys(
                   !isEditable ? searchJSON(tags, searchValue) : tags,
                 ).length > 0

package/src/components/React/TagsMenu/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+interface TagsMenuProps {
+  message: string;
+  tagsComponent: React.ElementType;
+}
+
+export const TagsMenuComponent: React.FC<TagsMenuProps> = ({
+  message,
+  tagsComponent: TagsComponent,
+}) => {
+  return (
+    <div>
+      <h2>This is a React Component: {message}</h2>
+
+      {/* Render the passed component with props */}
+      <TagsComponent tagName="Example Tag" />
+    </div>
+  );
+};

package/src/components/React/TagsMenu/styles.module.scss

@@ -0,0 +1,16 @@
+.loader {
+  animation-name: ckw;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  transform-origin: 50% 50%;
+}
+
+@keyframes ckw {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}