fix: added class to sub sidebar to use style

src/components/CanvasWidget.tsx

@@ -40,11 +40,11 @@ export const CanvasWidget = ({
 
       if (!!node.onNodeDrop) node?.onNodeDrop(monitor, node, engine);
     },
-    []
+    [engine]
   );
 
   // can drop custom hook
-  const [{}, dropRef] = useDrop({
+  const [, dropRef] = useDrop({
     accept: CanvasDropTypes.CANVAS_NODE,
     // canDrop: () => true,
     drop: onDrop,

src/components/sidebar/Sidebar.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment, useEffect, useState } from 'react';
+import React, { Fragment, useCallback, useEffect, useState } from 'react';
 import { Box, List } from '@mui/material';
 
 import SidebarItem from './SidebarItem';
@@ -25,19 +25,22 @@ const Sidebar = ({ engine, sidebarNodes, updateSelection }: ISidebarProps) => {
     ),
   };
 
-  const handleSelection = (selectedID: DefaultSidebarNodeTypes) => {
-    if (currentState) {
-      stateMap[currentState as DefaultSidebarNodeTypes]?.onExit();
-    }
+  const handleSelection = useCallback(
+    (selectedID: DefaultSidebarNodeTypes) => {
+      if (currentState) {
+        stateMap[currentState as DefaultSidebarNodeTypes]?.onExit();
+      }
 
-    setCurrentState(selectedID);
-    stateMap[selectedID]?.onEnter();
-    updateSelection(selectedID);
-  };
+      setCurrentState(selectedID);
+      stateMap[selectedID]?.onEnter();
+      updateSelection(selectedID);
+    },
+    [currentState, stateMap, updateSelection]
+  );
 
   useEffect(() => {
     handleSelection(DefaultSidebarNodeTypes.PANNING);
-  }, []);
+  }, [handleSelection]);
 
   return (
     <>

src/components/sidebar/SidebarItem.tsx

@@ -29,7 +29,7 @@ export const SidebarItem = ({
   selected,
   handleSelection,
 }: SidebarItemProps) => {
-  const [{}, dragRef, dragPreview] = useDrag(
+  const [, dragRef, dragPreview] = useDrag(
     () => ({
       type: CanvasDropTypes.CANVAS_NODE,
       item: node,

src/components/sidebar/SubSidebarItem.tsx

@@ -13,7 +13,7 @@ export const SubSidebarItem = ({
   selected,
   handleSelection,
 }: ISubSidebarItemProps) => {
-  const [{}, dragRef, dragPreview] = useDrag(
+  const [, dragRef, dragPreview] = useDrag(
     () => ({
       type: CanvasDropTypes.CANVAS_NODE,
       item: node,

src/components/sidebar/SubSiderBar.tsx

@@ -11,7 +11,7 @@ export const SubSiderBar = ({ nodes, show = false }: ISubSidebar) => {
     return (
       <>
         <Box className="sub-sidebar">
-          <Collapse orientation="horizontal" in={show}>
+          <Collapse orientation="horizontal" in={show} className="wrapper">
             <List disablePadding component="nav">
               {nodes.map(node => (
                 <Fragment key={node.id}>

src/index.tsx

@@ -69,6 +69,7 @@ const MetaDiagram = forwardRef(
   ) => {
     const classes = useStyles();
     const linkRef = React.useRef<any>();
+    const onMountRef = React.useRef<Function | undefined>(onMount);
 
     // initialize custom diagram state
     let state = new DefaultState(globalProps?.createLink);
@@ -77,7 +78,7 @@ const MetaDiagram = forwardRef(
     // Sets up the diagram engine
     // By using useMemo, we ensure that the createEngine() function is only called when the component mounts,
     // and the same engine instance is reused on subsequent re-renders.
-    const engine = useMemo(() => createEngine(), [metaNodes, metaLinks]);
+    const engine = useMemo(() => createEngine(), []);
 
     if (metaCallback === undefined) {
       metaCallback = (node: any) => {
@@ -227,13 +228,13 @@ const MetaDiagram = forwardRef(
     }
 
     useEffect(() => {
-      if (onMount === undefined) {
-        onMount = (engine: any) => {
+      if (onMountRef.current === undefined) {
+        onMountRef.current = (engine: any) => {
           console.log(engine);
         };
       }
-      onMount(engine);
-    }, []);
+      onMountRef.current(engine);
+    }, [engine]);
 
     // expose api
     const addNode = (node: any) => {

src/react-diagrams/state/CreateLinkState.ts

@@ -64,7 +64,7 @@ export class CreateLinkState extends State<DiagramEngine> {
           } else if (
             element instanceof PortModel &&
             this.sourcePort &&
-            element != this.sourcePort
+            element !== this.sourcePort
           ) {
             if (this.sourcePort.canLinkToPort(element)) {
               if (!this.link) return;