feat(wrapper): add onSelectionChange handler

src/container/EdgeRenderer/index.tsx

@@ -117,7 +117,7 @@ function renderEdge(
   edge: Edge,
   props: EdgeRendererProps,
   nodes: Node[],
-  selectedElements: Elements,
+  selectedElements: Elements | null,
   isInteractive: boolean
 ) {
   const [sourceId, sourceHandleId] = edge.source.split('__');
@@ -154,9 +154,9 @@ function renderEdge(
     targetPosition
   );
 
-  const isSelected = (selectedElements as Edge[]).some(
-    (elm) => isEdge(elm) && elm.source === sourceId && elm.target === targetId
-  );
+  const isSelected = selectedElements
+    ? (selectedElements as Edge[]).some((elm) => isEdge(elm) && elm.source === sourceId && elm.target === targetId)
+    : false;
 
   return (
     <EdgeComponent

src/container/NodeRenderer/index.tsx

@@ -16,7 +16,7 @@ function renderNode(
   node: Node,
   props: NodeRendererProps,
   transform: Transform,
-  selectedElements: Elements,
+  selectedElements: Elements | null,
   isInteractive: boolean
 ) {
   const nodeType = node.type || 'default';
@@ -25,7 +25,7 @@ function renderNode(
     console.warn(`No node type found for type "${nodeType}". Using fallback type "default".`);
   }
 
-  const isSelected = selectedElements.some(({ id }) => id === node.id);
+  const isSelected = selectedElements ? selectedElements.some(({ id }) => id === node.id) : false;
 
   return (
     <NodeComponent

src/container/ReactFlow/index.tsx

@@ -14,6 +14,7 @@ import DefaultNode from '../../components/Nodes/DefaultNode';
 import InputNode from '../../components/Nodes/InputNode';
 import OutputNode from '../../components/Nodes/OutputNode';
 import { createNodeTypes } from '../NodeRenderer/utils';
+import SelectionListener from '../../components/SelectionListener';
 import BezierEdge from '../../components/Edges/BezierEdge';
 import StraightEdge from '../../components/Edges/StraightEdge';
 import StepEdge from '../../components/Edges/StepEdge';
@@ -32,6 +33,7 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
   onConnect: (connection: Edge | Connection) => void;
   onLoad: OnLoadFunc;
   onMove: () => void;
+  onSelectionChange: (elements: Elements | null) => void;
   nodeTypes: NodeTypesType;
   edgeTypes: EdgeTypesType;
   connectionLineType: string;
@@ -62,6 +64,7 @@ const ReactFlow = ({
   onConnect,
   onNodeDragStart,
   onNodeDragStop,
+  onSelectionChange,
   connectionLineType,
   connectionLineStyle,
   deleteKeyCode,
@@ -105,6 +108,7 @@ const ReactFlow = ({
           onlyRenderVisibleNodes={onlyRenderVisibleNodes}
           isInteractive={isInteractive}
         />
+        {onSelectionChange && <SelectionListener onSelectionChange={onSelectionChange} />}
         {children}
       </StoreProvider>
     </div>
@@ -143,7 +147,6 @@ ReactFlow.defaultProps = {
   snapGrid: [16, 16],
   onlyRenderVisibleNodes: true,
   isInteractive: true,
-  className: '',
 };
 
 export default ReactFlow;