Merge branch 'next' into feat/multiple-on-selection-change

packages/react/src/components/Edges/wrapEdge.tsx

@@ -213,6 +213,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
         onKeyDown={isFocusable ? onKeyDown : undefined}
         tabIndex={isFocusable ? 0 : undefined}
         role={isFocusable ? 'button' : 'img'}
+        data-id={id}
         data-testid={`rf__edge-${id}`}
         aria-label={ariaLabel === null ? undefined : ariaLabel ? ariaLabel : `Edge from ${source} to ${target}`}
         aria-describedby={isFocusable ? `${ARIA_EDGE_DESC_KEY}-${rfId}` : undefined}

packages/react/src/components/SelectionListener/index.tsx

@@ -32,8 +32,9 @@ const SelectionListener = memo(({ onSelectionChange }: SelectionListenerProps) =
 
   useEffect(() => {
     const params = { nodes: selectedNodes, edges: selectedEdges };
+
     onSelectionChange?.(params);
-    store.getState().onSelectionChange.forEach((fn) => fn(params));
+    store.getState().onSelectionChangeHandlers.forEach((fn) => fn(params));
   }, [selectedNodes, selectedEdges, onSelectionChange]);
 
   return null;
@@ -41,12 +42,12 @@ const SelectionListener = memo(({ onSelectionChange }: SelectionListenerProps) =
 
 SelectionListener.displayName = 'SelectionListener';
 
-const changeSelector = (s: ReactFlowState) => !!s.onSelectionChange;
+const changeSelector = (s: ReactFlowState) => !!s.onSelectionChangeHandlers;
 
 function Wrapper({ onSelectionChange }: SelectionListenerProps) {
-  const storeHasSelectionChange = useStore(changeSelector);
+  const storeHasSelectionChangeHandlers = useStore(changeSelector);
 
-  if (onSelectionChange || storeHasSelectionChange) {
+  if (onSelectionChange || storeHasSelectionChangeHandlers) {
     return <SelectionListener onSelectionChange={onSelectionChange} />;
   }