Merge branch 'main' into feat/svelte

2023-02-13 17:35:04 +01:00
parent 71bd05b7e7 afa38727fa
commit 6b21f06682
74 changed files with 1085 additions and 382 deletions
@@ -1,5 +1,42 @@
 # @reactflow/background

+## 11.1.8
+
+### Patch Changes
+
+- Updated dependencies [[`72216ff6`](https://github.com/wbkd/react-flow/commit/72216ff62014acd2d73999053c72bd7aeed351f6), [`959b1114`](https://github.com/wbkd/react-flow/commit/959b111448bba4686040473e46988be9e7befbe6), [`0d259b02`](https://github.com/wbkd/react-flow/commit/0d259b028558aab650546f3371a85f3bce45252f), [`f3de9335`](https://github.com/wbkd/react-flow/commit/f3de9335af6cd96cd77dc77f24a944eef85384e5), [`23424ea6`](https://github.com/wbkd/react-flow/commit/23424ea6750f092210f83df17a00c89adb910d96), [`021f5a92`](https://github.com/wbkd/react-flow/commit/021f5a9210f47a968e50446cd2f9dae1f97880a4)]:
+  - @reactflow/core@11.5.5
+
+## 11.1.7
+
+### Patch Changes
+
+- Updated dependencies [[`383a074a`](https://github.com/wbkd/react-flow/commit/383a074aeae6dbec8437fa08c7c8d8240838a84e)]:
+  - @reactflow/core@11.5.4
+
+## 11.1.6
+
+### Patch Changes
+
+- Updated dependencies [[`be8097ac`](https://github.com/wbkd/react-flow/commit/be8097acadca3054c3b236ce4296fc516010ef8c), [`1527795d`](https://github.com/wbkd/react-flow/commit/1527795d18c3af38c8ec7059436ea0fbf6c27bbd), [`3b6348a8`](https://github.com/wbkd/react-flow/commit/3b6348a8d1573afb39576327318bc172e33393c2)]:
+  - @reactflow/core@11.5.3
+
+## 11.1.5
+
+### Patch Changes
+
+- [#2792](https://github.com/wbkd/react-flow/pull/2792) [`d8c679b4`](https://github.com/wbkd/react-flow/commit/d8c679b4c90c5b57d4b51e4aaa988243d6eaff5a) - Accept React 17 types as dev dependency
+
+- Updated dependencies [[`d8c679b4`](https://github.com/wbkd/react-flow/commit/d8c679b4c90c5b57d4b51e4aaa988243d6eaff5a)]:
+  - @reactflow/core@11.5.2
+
+## 11.1.4
+
+### Patch Changes
+
+- Updated dependencies [[`71153534`](https://github.com/wbkd/react-flow/commit/7115353418ebc7f7c81ab0e861200972bbf7dbd5)]:
+  - @reactflow/core@11.5.1
+
 ## 11.1.3

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@reactflow/background",
-  "version": "11.1.3",
+  "version": "11.1.8",
  "description": "Background component with different variants for React Flow",
  "keywords": [
    "react",
@@ -46,7 +46,7 @@
    "@reactflow/rollup-config": "workspace:*",
    "@reactflow/tsconfig": "workspace:*",
    "@types/node": "^18.7.16",
-    "@types/react": "^18.0.19",
+    "@types/react": ">=17",
    "react": "^18.2.0",
    "typescript": "^4.9.4"
  },
@@ -1,5 +1,42 @@
 # @reactflow/controls

+## 11.1.8
+
+### Patch Changes
+
+- Updated dependencies [[`72216ff6`](https://github.com/wbkd/react-flow/commit/72216ff62014acd2d73999053c72bd7aeed351f6), [`959b1114`](https://github.com/wbkd/react-flow/commit/959b111448bba4686040473e46988be9e7befbe6), [`0d259b02`](https://github.com/wbkd/react-flow/commit/0d259b028558aab650546f3371a85f3bce45252f), [`f3de9335`](https://github.com/wbkd/react-flow/commit/f3de9335af6cd96cd77dc77f24a944eef85384e5), [`23424ea6`](https://github.com/wbkd/react-flow/commit/23424ea6750f092210f83df17a00c89adb910d96), [`021f5a92`](https://github.com/wbkd/react-flow/commit/021f5a9210f47a968e50446cd2f9dae1f97880a4)]:
+  - @reactflow/core@11.5.5
+
+## 11.1.7
+
+### Patch Changes
+
+- Updated dependencies [[`383a074a`](https://github.com/wbkd/react-flow/commit/383a074aeae6dbec8437fa08c7c8d8240838a84e)]:
+  - @reactflow/core@11.5.4
+
+## 11.1.6
+
+### Patch Changes
+
+- Updated dependencies [[`be8097ac`](https://github.com/wbkd/react-flow/commit/be8097acadca3054c3b236ce4296fc516010ef8c), [`1527795d`](https://github.com/wbkd/react-flow/commit/1527795d18c3af38c8ec7059436ea0fbf6c27bbd), [`3b6348a8`](https://github.com/wbkd/react-flow/commit/3b6348a8d1573afb39576327318bc172e33393c2)]:
+  - @reactflow/core@11.5.3
+
+## 11.1.5
+
+### Patch Changes
+
+- [#2792](https://github.com/wbkd/react-flow/pull/2792) [`d8c679b4`](https://github.com/wbkd/react-flow/commit/d8c679b4c90c5b57d4b51e4aaa988243d6eaff5a) - Accept React 17 types as dev dependency
+
+- Updated dependencies [[`d8c679b4`](https://github.com/wbkd/react-flow/commit/d8c679b4c90c5b57d4b51e4aaa988243d6eaff5a)]:
+  - @reactflow/core@11.5.2
+
+## 11.1.4
+
+### Patch Changes
+
+- Updated dependencies [[`71153534`](https://github.com/wbkd/react-flow/commit/7115353418ebc7f7c81ab0e861200972bbf7dbd5)]:
+  - @reactflow/core@11.5.1
+
 ## 11.1.3

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@reactflow/controls",
-  "version": "11.1.3",
+  "version": "11.1.8",
  "description": "Component to control the viewport of a React Flow instance",
  "keywords": [
    "react",
@@ -50,7 +50,7 @@
    "@reactflow/rollup-config": "workspace:*",
    "@reactflow/tsconfig": "workspace:*",
    "@types/node": "^18.7.16",
-    "@types/react": "^18.0.19",
+    "@types/react": ">=17",
    "typescript": "^4.9.4"
  },
  "rollup": {
@@ -1,5 +1,44 @@
 # @reactflow/core

+## 11.5.5
+
+### Patch Changes
+
+- [#2834](https://github.com/wbkd/react-flow/pull/2834) [`23424ea6`](https://github.com/wbkd/react-flow/commit/23424ea6750f092210f83df17a00c89adb910d96) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Add `nodes` to fit view options to allow fitting view only around specified set of nodes
+- [#2836](https://github.com/wbkd/react-flow/pull/2836) [`959b1114`](https://github.com/wbkd/react-flow/commit/959b111448bba4686040473e46988be9e7befbe6) - Fix: connections for handles with bigger handles than connection radius
+- [#2819](https://github.com/wbkd/react-flow/pull/2819) [`0d259b02`](https://github.com/wbkd/react-flow/commit/0d259b028558aab650546f3371a85f3bce45252f) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Avoid triggering edge update if not using left mouse button
+- [#2832](https://github.com/wbkd/react-flow/pull/2832) [`f3de9335`](https://github.com/wbkd/react-flow/commit/f3de9335af6cd96cd77dc77f24a944eef85384e5) - fitView: return type boolean
+- [#2838](https://github.com/wbkd/react-flow/pull/2838) [`021f5a92`](https://github.com/wbkd/react-flow/commit/021f5a9210f47a968e50446cd2f9dae1f97880a4) - refactor: use key press handle modifier keys + input
+- [#2839](https://github.com/wbkd/react-flow/pull/2839) [`72216ff6`](https://github.com/wbkd/react-flow/commit/72216ff62014acd2d73999053c72bd7aeed351f6) - fix PropsWithChildren: pass default generic for v17 types
+
+## 11.5.4
+
+### Patch Changes
+
+- [`383a074a`](https://github.com/wbkd/react-flow/commit/383a074aeae6dbec8437fa08c7c8d8240838a84e) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Check if prevClosestHandle exists in onPointerUp. Fixes connections getting stuck on last handle and connecting, even when out of connectionRadius
+
+## 11.5.3
+
+This release fixes some issues with the newly introduced connection radius feature. We are now not only checking the radius but the handle itself too (like in the old version). That means that you can connect to a handle that is bigger than the connection radius. We are also not snapping connections anymore when they are not valid and pass a status class to the connection line that says if the current connection is valid or not. More over we fixed a connection issue with iOS.
+
+### Patch Changes
+
+- [#2800](https://github.com/wbkd/react-flow/pull/2800) [`be8097ac`](https://github.com/wbkd/react-flow/commit/be8097acadca3054c3b236ce4296fc516010ef8c) - When node is not draggable, you can't move it with a selection either
+- [#2803](https://github.com/wbkd/react-flow/pull/2803) [`1527795d`](https://github.com/wbkd/react-flow/commit/1527795d18c3af38c8ec7059436ea0fbf6c27bbd) - connection: add status class (valid or invalid) while in connection radius
+- [#2801](https://github.com/wbkd/react-flow/pull/2801) [`3b6348a8`](https://github.com/wbkd/react-flow/commit/3b6348a8d1573afb39576327318bc172e33393c2) - fix(ios): connection error + dont snap invalid connection lines, check handle and connection radius
+
+## 11.5.2
+
+### Patch Changes
+
+- [#2792](https://github.com/wbkd/react-flow/pull/2792) [`d8c679b4`](https://github.com/wbkd/react-flow/commit/d8c679b4c90c5b57d4b51e4aaa988243d6eaff5a) - Accept React 17 types as dev dependency
+
+## 11.5.1
+
+### Patch Changes
+
+- [#2783](https://github.com/wbkd/react-flow/pull/2783) [`71153534`](https://github.com/wbkd/react-flow/commit/7115353418ebc7f7c81ab0e861200972bbf7dbd5) - connections: check handle below mouse before using connection radius
+
 ## 11.5.0

 Lot's of improvements are coming with this release!
@@ -8,23 +47,24 @@ Lot's of improvements are coming with this release!
 - **Auto pan**: When you drag a node, a selection or the connection line to the border of the pane, it will pan into that direction. That makes it easier to connect far away nodes for example. If you don't like it you can set `autoPnaOnNodeDrag` and `autoPanOnConnect` to false.
 - **Touch devices**: It's finally possibleto connect nodes with the connection line on touch devices. In combination with the new auto pan and connection radius the overall UX is way better.
 - **Errors**: We added an `onError` prop to get notified when an error like "couldn't find source handle" happens. This is useful if you want to log errors for example.
- **Node type**: We added a second param to the generic `Node` type. You can not only pass `NodeData` but also the type as a second param: 
+- **Node type**: We added a second param to the generic `Node` type. You can not only pass `NodeData` but also the type as a second param:
+
 ```ts
-type MyCustomNode = Node<MyCustomNodeData, 'custom-node-type'>
+type MyCustomNode = Node<MyCustomNodeData, 'custom-node-type'>;
 ```
+
 This makes it easier to work with different custom nodes and data types.

 ### Minor Changes

- [#2754](https://github.com/wbkd/react-flow/pull/2754) [`e96309b6`](https://github.com/wbkd/react-flow/commit/e96309b6a57b1071faeebf7b0547fef7fd418694)  - Add auto pan for connecting and node dragging and `connectionRadius`
+- [#2754](https://github.com/wbkd/react-flow/pull/2754) [`e96309b6`](https://github.com/wbkd/react-flow/commit/e96309b6a57b1071faeebf7b0547fef7fd418694) - Add auto pan for connecting and node dragging and `connectionRadius`
 - [#2773](https://github.com/wbkd/react-flow/pull/2773) - Add `onError` prop to get notified when an error happens

 ### Patch Changes

- [#2763](https://github.com/wbkd/react-flow/pull/2763) [`85003b01`](https://github.com/wbkd/react-flow/commit/85003b01add71ea852bd5b0d2f1e7496050a6b52)  - Connecting nodes: Enable connections on touch devices
+- [#2763](https://github.com/wbkd/react-flow/pull/2763) [`85003b01`](https://github.com/wbkd/react-flow/commit/85003b01add71ea852bd5b0d2f1e7496050a6b52) - Connecting nodes: Enable connections on touch devices
 - [#2620](https://github.com/wbkd/react-flow/pull/2620) - Thanks [RichSchulz](https://github.com/RichSchulz)! - Types: improve typing for node type

-
 ## 11.4.2

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@reactflow/core",
-  "version": "11.5.0",
+  "version": "11.5.5",
  "description": "Core components and util functions of React Flow.",
  "keywords": [
    "react",
@@ -57,8 +57,8 @@
    "@reactflow/rollup-config": "workspace:*",
    "@reactflow/tsconfig": "workspace:*",
    "@types/node": "^18.7.16",
-    "@types/react": "^18.0.17",
-    "@types/react-dom": "^18.0.6",
+    "@types/react": ">=17",
+    "@types/react-dom": ">=17",
    "react": "^18.2.0",
    "typescript": "^4.9.4"
  },
@@ -1,12 +1,19 @@
 import { CSSProperties, useCallback } from 'react';
 import { shallow } from 'zustand/shallow';
+import cc from 'classcat';

 import { useStore } from '../../hooks/useStore';
 import { getBezierPath } from '../Edges/BezierEdge';
 import { getSmoothStepPath } from '../Edges/SmoothStepEdge';
 import { getSimpleBezierPath } from '../Edges/SimpleBezierEdge';
 import { internalsSymbol } from '../../utils';
-import type { ConnectionLineComponent, HandleType, ReactFlowState, ReactFlowStore } from '../../types';
+import type {
+  ConnectionLineComponent,
+  ConnectionStatus,
+  HandleType,
+  ReactFlowState,
+  ReactFlowStore,
+} from '../../types';
 import { Position, ConnectionLineType, ConnectionMode } from '../../types';

 type ConnectionLineProps = {
@@ -15,6 +22,7 @@ type ConnectionLineProps = {
  type: ConnectionLineType;
  style?: CSSProperties;
  CustomComponent?: ConnectionLineComponent;
+  connectionStatus: ConnectionStatus | null;
 };

 const oppositePosition = {
@@ -30,6 +38,7 @@ const ConnectionLine = ({
  style,
  type = ConnectionLineType.Bezier,
  CustomComponent,
+  connectionStatus,
 }: ConnectionLineProps) => {
  const { fromNode, handleId, toX, toY, connectionMode } = useStore(
    useCallback(
@@ -80,6 +89,7 @@ const ConnectionLine = ({
        toY={toY}
        fromPosition={fromPosition}
        toPosition={toPosition}
+        connectionStatus={connectionStatus}
      />
    );
  }
@@ -127,12 +137,13 @@ const selector = (s: ReactFlowState) => ({
  nodeId: s.connectionNodeId,
  handleType: s.connectionHandleType,
  nodesConnectable: s.nodesConnectable,
+  connectionStatus: s.connectionStatus,
  width: s.width,
  height: s.height,
 });

 function ConnectionLineWrapper({ containerStyle, style, type, component }: ConnectionLineWrapperProps) {
-  const { nodeId, handleType, nodesConnectable, width, height } = useStore(selector, shallow);
+  const { nodeId, handleType, nodesConnectable, width, height, connectionStatus } = useStore(selector, shallow);
  const isValid = !!(nodeId && handleType && width && nodesConnectable);

  if (!isValid) {
@@ -146,8 +157,15 @@ function ConnectionLineWrapper({ containerStyle, style, type, component }: Conne
      height={height}
      className="react-flow__edges react-flow__connectionline react-flow__container"
    >
-      <g className="react-flow__connection">
-        <ConnectionLine nodeId={nodeId} handleType={handleType} style={style} type={type} CustomComponent={component} />
+      <g className={cc(['react-flow__connection', connectionStatus])}>
+        <ConnectionLine
+          nodeId={nodeId}
+          handleType={handleType}
+          style={style}
+          type={type}
+          CustomComponent={component}
+          connectionStatus={connectionStatus}
+        />
      </g>
    </svg>
  );
@@ -89,6 +89,11 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
    const onEdgeMouseLeave = getMouseHandler(id, store.getState, onMouseLeave);

    const handleEdgeUpdater = (event: React.MouseEvent<SVGGElement, MouseEvent>, isSourceHandle: boolean) => {
+      // avoid triggering edge updater if mouse btn is not left
+      if (event.button !== 0) {
+        return;
+      }
+
      const nodeId = isSourceHandle ? target : source;
      const handleId = (isSourceHandle ? targetHandleId : sourceHandleId) || null;
      const handleType = isSourceHandle ? 'target' : 'source';
@@ -2,11 +2,12 @@ import type { MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent } fro
 import { StoreApi } from 'zustand';

 import { getHostForElement, calcAutoPan, getEventPosition } from '../../utils';
-import type { OnConnect, HandleType, ReactFlowState } from '../../types';
+import type { OnConnect, HandleType, ReactFlowState, Connection } from '../../types';
 import { pointToRendererPoint, rendererPointToPoint } from '../../utils/graph';
 import {
  ConnectionHandle,
  getClosestHandle,
+  getConnectionStatus,
  getHandleLookup,
  getHandleType,
  isValidHandle,
@@ -45,7 +46,6 @@ export function handlePointerDown({
    autoPanOnConnect,
    connectionRadius,
    onConnectStart,
-    onConnectEnd,
    panBy,
    getNodes,
    cancelConnection,
@@ -65,6 +65,9 @@ export function handlePointerDown({
  let prevActiveHandle: Element;
  let connectionPosition = getEventPosition(event, containerBounds);
  let autoPanStarted = false;
+  let connection: Connection | null = null;
+  let isValid = false;
+  let handleDomNode: Element | null = null;

  const handleLookup = getHandleLookup({
    nodes: getNodes(),
@@ -89,6 +92,7 @@ export function handlePointerDown({
    connectionNodeId: nodeId,
    connectionHandleId: handleId,
    connectionHandleType: handleType,
+    connectionStatus: null,
  });

  onConnectStart?.(event, { nodeId, handleId, handleType });
@@ -108,23 +112,8 @@ export function handlePointerDown({
      autoPanStarted = true;
    }

-    setState({
-      connectionPosition: prevClosestHandle
-        ? rendererPointToPoint(
-            {
-              x: prevClosestHandle.x,
-              y: prevClosestHandle.y,
-            },
-            transform
-          )
-        : connectionPosition,
-    });
-
-    if (!prevClosestHandle) {
-      return resetRecentHandle(prevActiveHandle);
-    }
-
-    const { connection, handleDomNode, isValid } = isValidHandle(
+    const result = isValidHandle(
+      event,
      prevClosestHandle,
      connectionMode,
      nodeId,
@@ -134,43 +123,58 @@ export function handlePointerDown({
      doc
    );

+    handleDomNode = result.handleDomNode;
+    connection = result.connection;
+    isValid = result.isValid;
+
+    setState({
+      connectionPosition:
+        prevClosestHandle && isValid
+          ? rendererPointToPoint(
+              {
+                x: prevClosestHandle.x,
+                y: prevClosestHandle.y,
+              },
+              transform
+            )
+          : connectionPosition,
+      connectionStatus: getConnectionStatus(!!prevClosestHandle, isValid),
+    });
+
+    if (!prevClosestHandle && !isValid && !handleDomNode) {
+      return resetRecentHandle(prevActiveHandle);
+    }
+
    if (connection.source !== connection.target && handleDomNode) {
      resetRecentHandle(prevActiveHandle);
      prevActiveHandle = handleDomNode;
-      handleDomNode.classList.add('react-flow__handle-connecting');
+      // @todo: remove the old class names "react-flow__handle-" in the next major version
+      handleDomNode.classList.add('connecting', 'react-flow__handle-connecting');
+      handleDomNode.classList.toggle('valid', isValid);
      handleDomNode.classList.toggle('react-flow__handle-valid', isValid);
    }
  }

  function onPointerUp(event: MouseEvent | TouchEvent) {
-    cancelAnimationFrame(autoPanId);
-    autoPanStarted = false;
-
-    if (prevClosestHandle) {
-      const { connection, isValid } = isValidHandle(
-        prevClosestHandle,
-        connectionMode,
-        nodeId,
-        handleId,
-        isTarget ? 'target' : 'source',
-        isValidConnection,
-        doc
-      );
-
-      if (isValid) {
-        onConnect?.(connection);
-      }
+    if ((prevClosestHandle || handleDomNode) && connection && isValid) {
+      onConnect?.(connection);
    }

-    onConnectEnd?.(event);
+    // it's important to get a fresh reference from the store here
+    // in order to get the latest state of onConnectEnd
+    getState().onConnectEnd?.(event);

    if (edgeUpdaterType) {
      onEdgeUpdateEnd?.(event);
    }

    resetRecentHandle(prevActiveHandle);
-
    cancelConnection();
+    cancelAnimationFrame(autoPanId);
+    autoPanStarted = false;
+    isValid = false;
+    connection = null;
+    handleDomNode = null;

    doc.removeEventListener('mousemove', onPointerMove as EventListener);
    doc.removeEventListener('mouseup', onPointerUp as EventListener);
@@ -102,6 +102,7 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(

      const doc = getHostForElement(event.target as HTMLElement);
      const { connection, isValid } = isValidHandle(
+        event,
        {
          nodeId,
          id: handleId,
@@ -1,5 +1,7 @@
-import { ConnectionMode } from '../../types';
-import { internalsSymbol } from '../../utils';
+import { MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent } from 'react';
+
+import { ConnectionMode, ConnectionStatus } from '../../types';
+import { getEventPosition, internalsSymbol } from '../../utils';
 import type { Connection, HandleType, XYPosition, Node, NodeHandleBounds } from '../../types';

 export type ConnectionHandle = {
@@ -59,9 +61,12 @@ type Result = {
  connection: Connection;
 };

+const nullConnection: Connection = { source: null, target: null, sourceHandle: null, targetHandle: null };
+
 // checks if  and returns connection in fom of an object { source: 123, target: 312 }
 export function isValidHandle(
-  handle: Pick<ConnectionHandle, 'nodeId' | 'id' | 'type'>,
+  event: MouseEvent | TouchEvent | ReactMouseEvent | ReactTouchEvent,
+  handle: Pick<ConnectionHandle, 'nodeId' | 'id' | 'type'> | null,
  connectionMode: ConnectionMode,
  fromNodeId: string,
  fromHandleId: string | null,
@@ -73,23 +78,26 @@ export function isValidHandle(
  const handleDomNode = doc.querySelector(
    `.react-flow__handle[data-id="${handle?.nodeId}-${handle?.id}-${handle?.type}"]`
  );
+  const { x, y } = getEventPosition(event);
+  const handleBelow = doc.elementFromPoint(x, y);
+  const handleToCheck = handleBelow?.classList.contains('react-flow__handle') ? handleBelow : handleDomNode;
+
  const result: Result = {
-    handleDomNode,
+    handleDomNode: handleToCheck,
    isValid: false,
-    connection: { source: null, target: null, sourceHandle: null, targetHandle: null },
+    connection: nullConnection,
  };

-  if (handleDomNode) {
-    const handleIsTarget = handle.type === 'target';
-    const handleIsSource = handle.type === 'source';
-    const handleNodeId = handleDomNode.getAttribute('data-nodeid');
-    const handleId = handleDomNode.getAttribute('data-handleid');
+  if (handleToCheck) {
+    const handleType = getHandleType(undefined, handleToCheck);
+    const handleNodeId = handleToCheck.getAttribute('data-nodeid');
+    const handleId = handleToCheck.getAttribute('data-handleid');

    const connection: Connection = {
-      source: isTarget ? handle.nodeId : fromNodeId,
-      sourceHandle: isTarget ? handle.id : fromHandleId,
-      target: isTarget ? fromNodeId : handle.nodeId,
-      targetHandle: isTarget ? fromHandleId : handle.id,
+      source: isTarget ? handleNodeId : fromNodeId,
+      sourceHandle: isTarget ? handleId : fromHandleId,
+      target: isTarget ? fromNodeId : handleNodeId,
+      targetHandle: isTarget ? fromHandleId : handleId,
    };

    result.connection = connection;
@@ -97,7 +105,7 @@ export function isValidHandle(
    // in strict mode we don't allow target to target or source to source connections
    const isValid =
      connectionMode === ConnectionMode.Strict
-        ? (isTarget && handleIsSource) || (!isTarget && handleIsTarget)
+        ? (isTarget && handleType === 'source') || (!isTarget && handleType === 'target')
        : handleNodeId !== fromNodeId || handleId !== fromHandleId;

    if (isValid) {
@@ -149,6 +157,17 @@ export function getHandleType(
 }

 export function resetRecentHandle(handleDomNode: Element): void {
-  handleDomNode?.classList.remove('react-flow__handle-valid');
-  handleDomNode?.classList.remove('react-flow__handle-connecting');
+  handleDomNode?.classList.remove('valid', 'connecting', 'react-flow__handle-valid', 'react-flow__handle-connecting');
+}
+
+export function getConnectionStatus(isInsideConnectionRadius: boolean, isHandleValid: boolean) {
+  let connectionStatus = null;
+
+  if (isHandleValid) {
+    connectionStatus = 'valid';
+  } else if (isInsideConnectionRadius && !isHandleValid) {
+    connectionStatus = 'invalid';
+  }
+
+  return connectionStatus as ConnectionStatus;
 }
@@ -6,7 +6,7 @@ import { Provider } from '../../contexts/RFStoreContext';
 import { createRFStore } from '../../store';
 import type { ReactFlowState } from '../../types';

-const ReactFlowProvider: FC<PropsWithChildren> = ({ children }) => {
+const ReactFlowProvider: FC<PropsWithChildren<unknown>> = ({ children }) => {
  const storeRef = useRef<StoreApi<ReactFlowState> | null>(null);

  if (!storeRef.current) {
@@ -4,7 +4,7 @@ import type { FC, PropsWithChildren } from 'react';
 import StoreContext from '../../contexts/RFStoreContext';
 import ReactFlowProvider from '../../components/ReactFlowProvider';

-const Wrapper: FC<PropsWithChildren> = ({ children }) => {
+const Wrapper: FC<PropsWithChildren<unknown>> = ({ children }) => {
  const isWrapped = useContext(StoreContext);

  if (isWrapped) {
@@ -133,10 +133,11 @@ function useDrag({
            const {
              nodeInternals,
              multiSelectionActive,
+              domNode,
+              nodesDraggable,
              unselectNodesAndEdges,
              onNodeDragStart,
              onSelectionDragStart,
-              domNode,
            } = store.getState();

            const onStart = nodeId ? onNodeDragStart : wrapSelectionDragFunc(onSelectionDragStart);
@@ -157,7 +158,7 @@ function useDrag({

            const pointerPos = getPointerPosition(event);
            lastPos.current = pointerPos;
-            dragItems.current = getDragItems(nodeInternals, pointerPos, nodeId);
+            dragItems.current = getDragItems(nodeInternals, nodesDraggable, pointerPos, nodeId);

            if (onStart && dragItems.current) {
              const [currentNode, nodes] = getEventHandlerParams({
@@ -36,9 +36,19 @@ export function hasSelector(target: Element, selector: string, nodeRef: RefObjec
 }

 // looks for all selected nodes and created a NodeDragItem for each of them
-export function getDragItems(nodeInternals: NodeInternals, mousePos: XYPosition, nodeId?: string): NodeDragItem[] {
+export function getDragItems(
+  nodeInternals: NodeInternals,
+  nodesDraggable: boolean,
+  mousePos: XYPosition,
+  nodeId?: string
+): NodeDragItem[] {
  return Array.from(nodeInternals.values())
-    .filter((n) => (n.selected || n.id === nodeId) && (!n.parentNode || !isParentSelected(n, nodeInternals)))
+    .filter(
+      (n) =>
+        (n.selected || n.id === nodeId) &&
+        (!n.parentNode || !isParentSelected(n, nodeInternals)) &&
+        (n.draggable || (nodesDraggable && typeof n.draggable === 'undefined'))
+    )
    .map((n) => ({
      id: n.id,
      position: n.position || { x: 0, y: 0 },
@@ -7,9 +7,11 @@ function useUpdateNodePositions() {
  const store = useStoreApi();

  const updatePositions = useCallback((params: { x: number; y: number; isShiftPressed: boolean }) => {
-    const { nodeInternals, nodeExtent, updateNodePositions, getNodes, snapToGrid, snapGrid, onError } =
+    const { nodeInternals, nodeExtent, updateNodePositions, getNodes, snapToGrid, snapGrid, onError, nodesDraggable } =
      store.getState();
-    const selectedNodes = getNodes().filter((n) => n.selected);
+    const selectedNodes = getNodes().filter(
+      (n) => n.selected && (n.draggable || (nodesDraggable && typeof n.draggable === 'undefined'))
+    );
    // by default a node moves 5px on each key press, or 20px if shift is pressed
    // if snap grid is enabled, we use that for the velocity.
    const xVelo = snapToGrid ? snapGrid[0] : 5;
@@ -4,7 +4,7 @@ import { shallow } from 'zustand/shallow';

 import { useStoreApi, useStore } from '../hooks/useStore';
 import { pointToRendererPoint, getTransformForBounds, getD3Transition } from '../utils/graph';
-import { fitView as fitViewStore } from '../store/utils';
+import { fitView } from '../store/utils';
 import type { ViewportHelperFunctions, ReactFlowState, XYPosition } from '../types';

 // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -17,7 +17,7 @@ const initialViewportHelper: ViewportHelperFunctions = {
  getZoom: () => 1,
  setViewport: noop,
  getViewport: () => ({ x: 0, y: 0, zoom: 1 }),
-  fitView: noop,
+  fitView: () => false,
  setCenter: noop,
  fitBounds: noop,
  project: (position: XYPosition) => position,
@@ -51,7 +51,7 @@ const useViewportHelper = (): ViewportHelperFunctions => {
          const [x, y, zoom] = store.getState().transform;
          return { x, y, zoom };
        },
-        fitView: (options) => fitViewStore(store.getState, options),
+        fitView: (options) => fitView(store.getState, options),
        setCenter: (x, y, options) => {
          const { width, height, maxZoom } = store.getState();
          const nextZoom = typeof options?.zoom !== 'undefined' ? options.zoom : maxZoom;
@@ -274,6 +274,7 @@ const createRFStore = () =>
        connectionNodeId: initialState.connectionNodeId,
        connectionHandleId: initialState.connectionHandleId,
        connectionHandleType: initialState.connectionHandleType,
+        connectionStatus: initialState.connectionStatus,
      }),
    reset: () => set({ ...initialState }),
  }));
@@ -32,6 +32,7 @@ const initialState: ReactFlowStore = {
  connectionHandleId: null,
  connectionHandleType: 'source',
  connectionPosition: { x: 0, y: 0 },
+  connectionStatus: null,
  connectionMode: ConnectionMode.Strict,
  domNode: null,
  paneDragging: false,
@@ -138,35 +138,43 @@ export function fitView(get: StoreApi<ReactFlowState>['getState'], options: Inte
    fitViewOnInit,
    nodeOrigin,
  } = get();
+  const isInitialFitView = options.initial && !fitViewOnInitDone && fitViewOnInit;
+  const d3initialized = d3Zoom && d3Selection;

-  if ((options.initial && !fitViewOnInitDone && fitViewOnInit) || !options.initial) {
-    if (d3Zoom && d3Selection) {
-      const nodes = getNodes().filter((n) => (options.includeHiddenNodes ? n.width && n.height : !n.hidden));
+  if (d3initialized && (isInitialFitView || !options.initial)) {
+    const nodes = getNodes().filter((n) => {
+      const isVisible = options.includeHiddenNodes ? n.width && n.height : !n.hidden;

-      const nodesInitialized = nodes.every((n) => n.width && n.height);
-
-      if (nodes.length > 0 && nodesInitialized) {
-        const bounds = getRectOfNodes(nodes, nodeOrigin);
-
-        const [x, y, zoom] = getTransformForBounds(
-          bounds,
-          width,
-          height,
-          options.minZoom ?? minZoom,
-          options.maxZoom ?? maxZoom,
-          options.padding ?? 0.1
-        );
-
-        const nextTransform = zoomIdentity.translate(x, y).scale(zoom);
-
-        if (typeof options.duration === 'number' && options.duration > 0) {
-          d3Zoom.transform(getD3Transition(d3Selection, options.duration), nextTransform);
-        } else {
-          d3Zoom.transform(d3Selection, nextTransform);
-        }
-
-        return true;
+      if (options.nodes?.length) {
+        return isVisible && options.nodes.some((optionNode) => optionNode.id === n.id);
      }
+
+      return isVisible;
+    });
+
+    const nodesInitialized = nodes.every((n) => n.width && n.height);
+
+    if (nodes.length > 0 && nodesInitialized) {
+      const bounds = getRectOfNodes(nodes, nodeOrigin);
+
+      const [x, y, zoom] = getTransformForBounds(
+        bounds,
+        width,
+        height,
+        options.minZoom ?? minZoom,
+        options.maxZoom ?? maxZoom,
+        options.padding ?? 0.1
+      );
+
+      const nextTransform = zoomIdentity.translate(x, y).scale(zoom);
+
+      if (typeof options.duration === 'number' && options.duration > 0) {
+        d3Zoom.transform(getD3Transition(d3Selection, options.duration), nextTransform);
+      } else {
+        d3Zoom.transform(d3Selection, nextTransform);
+      }
+
+      return true;
    }
  }

@@ -230,4 +230,5 @@
  width: 100%;
  height: 100%;
  pointer-events: none;
+  user-select: none;
 }
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import type { CSSProperties, ComponentType, HTMLAttributes, ReactNode, MouseEvent as ReactMouseEvent } from 'react';

-import { Position } from '.';
+import { ConnectionStatus, Position } from '.';
 import type { Connection, HandleElement, HandleType, Node } from '.';

 type EdgeLabelOptions = {
@@ -155,6 +155,7 @@ export type ConnectionLineComponentProps = {
  toY: number;
  fromPosition: Position;
  toPosition: Position;
+  connectionStatus: ConnectionStatus | null;
 };

 export type ConnectionLineComponent = ComponentType<ConnectionLineComponentProps>;
@@ -30,7 +30,7 @@ export type NodeTypesWrapped = { [key: string]: MemoExoticComponent<ComponentTyp
 export type EdgeTypes = { [key: string]: ComponentType<EdgeProps> };
 export type EdgeTypesWrapped = { [key: string]: MemoExoticComponent<ComponentType<WrapEdgeProps>> };

-export type FitView = (fitViewOptions?: FitViewOptions) => void;
+export type FitView = (fitViewOptions?: FitViewOptions) => boolean;

 export type Project = (position: XYPosition) => XYPosition;

@@ -61,6 +61,8 @@ export interface Connection {
  targetHandle: string | null;
 }

+export type ConnectionStatus = 'valid' | 'invalid';
+
 export enum ConnectionMode {
  Strict = 'strict',
  Loose = 'loose',
@@ -74,6 +76,7 @@ export type FitViewOptions = {
  minZoom?: number;
  maxZoom?: number;
  duration?: number;
+  nodes?: (Partial<Node> & { id: Node['id'] })[];
 };

 export type OnConnectStartParams = {
@@ -166,6 +169,7 @@ export type ReactFlowStore = {
  connectionHandleId: string | null;
  connectionHandleType: HandleType | null;
  connectionPosition: XYPosition;
+  connectionStatus: ConnectionStatus | null;
  connectionMode: ConnectionMode;

  snapToGrid: boolean;
@@ -103,17 +103,12 @@ export function isInputDOMNode(event: KeyboardEvent | ReactKeyboardEvent): boole
  // using composed path for handling shadow dom
  const target = (kbEvent.composedPath?.()?.[0] || event.target) as HTMLElement;

+  const isInput = ['INPUT', 'SELECT', 'TEXTAREA'].includes(target?.nodeName) || target?.hasAttribute('contenteditable');
  // we want to be able to do a multi selection event if we are in an input field
-  if (event.ctrlKey || event.metaKey || event.shiftKey) {
-    return false;
-  }
+  const isModifierKey = event.ctrlKey || event.metaKey || event.shiftKey;

  // when an input field is focused we don't want to trigger deletion or movement of nodes
-  return (
-    ['INPUT', 'SELECT', 'TEXTAREA'].includes(target?.nodeName) ||
-    target?.hasAttribute('contenteditable') ||
-    !!target?.closest('.nokey')
-  );
+  return (isInput && !isModifierKey) || !!target?.closest('.nokey');
 }

 export const isMouseEvent = (
@@ -1,5 +1,42 @@
 # @reactflow/minimap

+## 11.3.8
+
+### Patch Changes
+
+- Updated dependencies [[`72216ff6`](https://github.com/wbkd/react-flow/commit/72216ff62014acd2d73999053c72bd7aeed351f6), [`959b1114`](https://github.com/wbkd/react-flow/commit/959b111448bba4686040473e46988be9e7befbe6), [`0d259b02`](https://github.com/wbkd/react-flow/commit/0d259b028558aab650546f3371a85f3bce45252f), [`f3de9335`](https://github.com/wbkd/react-flow/commit/f3de9335af6cd96cd77dc77f24a944eef85384e5), [`23424ea6`](https://github.com/wbkd/react-flow/commit/23424ea6750f092210f83df17a00c89adb910d96), [`021f5a92`](https://github.com/wbkd/react-flow/commit/021f5a9210f47a968e50446cd2f9dae1f97880a4)]:
+  - @reactflow/core@11.5.5
+
+## 11.3.7
+
+### Patch Changes
+
+- Updated dependencies [[`383a074a`](https://github.com/wbkd/react-flow/commit/383a074aeae6dbec8437fa08c7c8d8240838a84e)]:
+  - @reactflow/core@11.5.4
+
+## 11.3.6
+
+### Patch Changes
+
+- Updated dependencies [[`be8097ac`](https://github.com/wbkd/react-flow/commit/be8097acadca3054c3b236ce4296fc516010ef8c), [`1527795d`](https://github.com/wbkd/react-flow/commit/1527795d18c3af38c8ec7059436ea0fbf6c27bbd), [`3b6348a8`](https://github.com/wbkd/react-flow/commit/3b6348a8d1573afb39576327318bc172e33393c2)]:
+  - @reactflow/core@11.5.3
+
+## 11.3.5
+
+### Patch Changes
+
+- [#2792](https://github.com/wbkd/react-flow/pull/2792) [`d8c679b4`](https://github.com/wbkd/react-flow/commit/d8c679b4c90c5b57d4b51e4aaa988243d6eaff5a) - Accept React 17 types as dev dependency
+
+- Updated dependencies [[`d8c679b4`](https://github.com/wbkd/react-flow/commit/d8c679b4c90c5b57d4b51e4aaa988243d6eaff5a)]:
+  - @reactflow/core@11.5.2
+
+## 11.3.4
+
+### Patch Changes
+
+- Updated dependencies [[`71153534`](https://github.com/wbkd/react-flow/commit/7115353418ebc7f7c81ab0e861200972bbf7dbd5)]:
+  - @reactflow/core@11.5.1
+
 ## 11.3.3

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@reactflow/minimap",
-  "version": "11.3.3",
+  "version": "11.3.8",
  "description": "Minimap component for React Flow.",
  "keywords": [
    "react",
@@ -55,7 +55,7 @@
    "@reactflow/rollup-config": "workspace:*",
    "@reactflow/tsconfig": "workspace:*",
    "@types/node": "^18.7.16",
-    "@types/react": "^18.0.19",
+    "@types/react": ">=17",
    "react": "^18.2.0",
    "typescript": "^4.9.4"
  },
@@ -1,5 +1,14 @@
 # @reactflow/node-resizer

+## 2.0.1
+
+### Patch Changes
+
+- [#2792](https://github.com/wbkd/react-flow/pull/2792) [`d8c679b4`](https://github.com/wbkd/react-flow/commit/d8c679b4c90c5b57d4b51e4aaa988243d6eaff5a) - Accept React 17 types as dev dependency
+
+- Updated dependencies [[`d8c679b4`](https://github.com/wbkd/react-flow/commit/d8c679b4c90c5b57d4b51e4aaa988243d6eaff5a)]:
+  - @reactflow/core@11.5.2
+
 ## 2.0.0

 After this update it should be easier to update the node resizer (no need to update the reactflow package anymore).
@@ -1,6 +1,6 @@
 {
  "name": "@reactflow/node-resizer",
-  "version": "2.0.0",
+  "version": "2.0.1",
  "description": "A helper component for resizing nodes.",
  "keywords": [
    "react",
@@ -55,8 +55,8 @@
    "@types/d3-drag": "^3.0.1",
    "@types/d3-selection": "^3.0.3",
    "@types/node": "^18.7.16",
-    "@types/react": "^18.0.19",
-    "@types/react-dom": "^18.0.6",
+    "@types/react": ">=17",
+    "@types/react-dom": ">=17",
    "react": "^18.2.0",
    "typescript": "^4.9.4"
  },
@@ -1,5 +1,42 @@
 # @reactflow/node-toolbar

+## 1.1.8
+
+### Patch Changes
+
+- Updated dependencies [[`72216ff6`](https://github.com/wbkd/react-flow/commit/72216ff62014acd2d73999053c72bd7aeed351f6), [`959b1114`](https://github.com/wbkd/react-flow/commit/959b111448bba4686040473e46988be9e7befbe6), [`0d259b02`](https://github.com/wbkd/react-flow/commit/0d259b028558aab650546f3371a85f3bce45252f), [`f3de9335`](https://github.com/wbkd/react-flow/commit/f3de9335af6cd96cd77dc77f24a944eef85384e5), [`23424ea6`](https://github.com/wbkd/react-flow/commit/23424ea6750f092210f83df17a00c89adb910d96), [`021f5a92`](https://github.com/wbkd/react-flow/commit/021f5a9210f47a968e50446cd2f9dae1f97880a4)]:
+  - @reactflow/core@11.5.5
+
+## 1.1.7
+
+### Patch Changes
+
+- Updated dependencies [[`383a074a`](https://github.com/wbkd/react-flow/commit/383a074aeae6dbec8437fa08c7c8d8240838a84e)]:
+  - @reactflow/core@11.5.4
+
+## 1.1.6
+
+### Patch Changes
+
+- Updated dependencies [[`be8097ac`](https://github.com/wbkd/react-flow/commit/be8097acadca3054c3b236ce4296fc516010ef8c), [`1527795d`](https://github.com/wbkd/react-flow/commit/1527795d18c3af38c8ec7059436ea0fbf6c27bbd), [`3b6348a8`](https://github.com/wbkd/react-flow/commit/3b6348a8d1573afb39576327318bc172e33393c2)]:
+  - @reactflow/core@11.5.3
+
+## 1.1.5
+
+### Patch Changes
+
+- [#2792](https://github.com/wbkd/react-flow/pull/2792) [`d8c679b4`](https://github.com/wbkd/react-flow/commit/d8c679b4c90c5b57d4b51e4aaa988243d6eaff5a) - Accept React 17 types as dev dependency
+
+- Updated dependencies [[`d8c679b4`](https://github.com/wbkd/react-flow/commit/d8c679b4c90c5b57d4b51e4aaa988243d6eaff5a)]:
+  - @reactflow/core@11.5.2
+
+## 1.1.4
+
+### Patch Changes
+
+- Updated dependencies [[`71153534`](https://github.com/wbkd/react-flow/commit/7115353418ebc7f7c81ab0e861200972bbf7dbd5)]:
+  - @reactflow/core@11.5.1
+
 ## 1.1.3

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@reactflow/node-toolbar",
-  "version": "1.1.3",
+  "version": "1.1.8",
  "description": "A toolbar component for React Flow that can be attached to a node.",
  "keywords": [
    "react",
@@ -36,7 +36,7 @@
    "typecheck": "tsc --noEmit"
  },
  "dependencies": {
-    "@reactflow/core": "workspace:^11.3.3",
+    "@reactflow/core": "workspace:*",
    "classcat": "^5.0.3",
    "zustand": "^4.3.1"
  },
@@ -49,8 +49,8 @@
    "@reactflow/rollup-config": "workspace:*",
    "@reactflow/tsconfig": "workspace:*",
    "@types/node": "^18.7.16",
-    "@types/react": "^18.0.19",
-    "@types/react-dom": "^18.0.6",
+    "@types/react": ">=17",
+    "@types/react-dom": ">=17",
    "react": "^18.2.0",
    "typescript": "^4.9.4"
  },
@@ -1,5 +1,79 @@
 # reactflow

+## 11.5.6
+
+### Patch Changes
+
+- [#2834](https://github.com/wbkd/react-flow/pull/2834) [`23424ea6`](https://github.com/wbkd/react-flow/commit/23424ea6750f092210f83df17a00c89adb910d96) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Add `nodes` to fit view options to allow fitting view only around specified set of nodes
+- [#2836](https://github.com/wbkd/react-flow/pull/2836) [`959b1114`](https://github.com/wbkd/react-flow/commit/959b111448bba4686040473e46988be9e7befbe6) - Fix: connections for handles with bigger handles than connection radius
+- [#2819](https://github.com/wbkd/react-flow/pull/2819) [`0d259b02`](https://github.com/wbkd/react-flow/commit/0d259b028558aab650546f3371a85f3bce45252f) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Avoid triggering edge update if not using left mouse button
+- [#2832](https://github.com/wbkd/react-flow/pull/2832) [`f3de9335`](https://github.com/wbkd/react-flow/commit/f3de9335af6cd96cd77dc77f24a944eef85384e5) - fitView: return type boolean
+- [#2838](https://github.com/wbkd/react-flow/pull/2838) [`021f5a92`](https://github.com/wbkd/react-flow/commit/021f5a9210f47a968e50446cd2f9dae1f97880a4) - refactor: use key press handle modifier keys + input
+- [#2839](https://github.com/wbkd/react-flow/pull/2839) [`72216ff6`](https://github.com/wbkd/react-flow/commit/72216ff62014acd2d73999053c72bd7aeed351f6) - fix PropsWithChildren: pass default generic for v17 types
+
+- Updated dependencies [[`72216ff6`](https://github.com/wbkd/react-flow/commit/72216ff62014acd2d73999053c72bd7aeed351f6), [`959b1114`](https://github.com/wbkd/react-flow/commit/959b111448bba4686040473e46988be9e7befbe6), [`0d259b02`](https://github.com/wbkd/react-flow/commit/0d259b028558aab650546f3371a85f3bce45252f), [`f3de9335`](https://github.com/wbkd/react-flow/commit/f3de9335af6cd96cd77dc77f24a944eef85384e5), [`23424ea6`](https://github.com/wbkd/react-flow/commit/23424ea6750f092210f83df17a00c89adb910d96), [`021f5a92`](https://github.com/wbkd/react-flow/commit/021f5a9210f47a968e50446cd2f9dae1f97880a4)]:
+  - @reactflow/core@11.5.5
+  - @reactflow/background@11.1.8
+  - @reactflow/controls@11.1.8
+  - @reactflow/minimap@11.3.8
+  - @reactflow/node-toolbar@1.1.8
+
+## 11.5.5
+
+### Patch Changes
+
+- [`383a074a`](https://github.com/wbkd/react-flow/commit/383a074aeae6dbec8437fa08c7c8d8240838a84e) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Check if prevClosestHandle exists in onPointerUp. Fixes connections getting stuck on last handle and connecting, even when out of connectionRadius
+
+- Updated dependencies [[`383a074a`](https://github.com/wbkd/react-flow/commit/383a074aeae6dbec8437fa08c7c8d8240838a84e)]:
+  - @reactflow/core@11.5.4
+  - @reactflow/background@11.1.7
+  - @reactflow/controls@11.1.7
+  - @reactflow/minimap@11.3.7
+  - @reactflow/node-toolbar@1.1.7
+
+## 11.5.4
+
+This release fixes some issues with the newly introduced connection radius feature. We are now not only checking the radius but the handle itself too (like in the old version). That means that you can connect to a handle that is bigger than the connection radius. We are also not snapping connections anymore when they are not valid and pass a status class to the connection line that says if the current connection is valid or not. More over we fixed a connection issue with iOS.
+
+### Patch Changes
+
+- [#2800](https://github.com/wbkd/react-flow/pull/2800) [`be8097ac`](https://github.com/wbkd/react-flow/commit/be8097acadca3054c3b236ce4296fc516010ef8c) - When node is not draggable, you can't move it with a selection either
+- [#2803](https://github.com/wbkd/react-flow/pull/2803) [`1527795d`](https://github.com/wbkd/react-flow/commit/1527795d18c3af38c8ec7059436ea0fbf6c27bbd) - connection: add status class (valid or invalid) while in connection radius
+- [#2801](https://github.com/wbkd/react-flow/pull/2801) [`3b6348a8`](https://github.com/wbkd/react-flow/commit/3b6348a8d1573afb39576327318bc172e33393c2) - fix(ios): connection error + dont snap invalid connection lines, check handle and connection radius
+
+- Updated dependencies [[`be8097ac`](https://github.com/wbkd/react-flow/commit/be8097acadca3054c3b236ce4296fc516010ef8c), [`1527795d`](https://github.com/wbkd/react-flow/commit/1527795d18c3af38c8ec7059436ea0fbf6c27bbd), [`3b6348a8`](https://github.com/wbkd/react-flow/commit/3b6348a8d1573afb39576327318bc172e33393c2)]:
+  - @reactflow/core@11.5.3
+  - @reactflow/background@11.1.6
+  - @reactflow/controls@11.1.6
+  - @reactflow/minimap@11.3.6
+  - @reactflow/node-toolbar@1.1.6
+
+## 11.5.3
+
+### Patch Changes
+
+- [#2792](https://github.com/wbkd/react-flow/pull/2792) [`d8c679b4`](https://github.com/wbkd/react-flow/commit/d8c679b4c90c5b57d4b51e4aaa988243d6eaff5a) - Accept React 17 types as dev dependency
+
+- Updated dependencies [[`d8c679b4`](https://github.com/wbkd/react-flow/commit/d8c679b4c90c5b57d4b51e4aaa988243d6eaff5a)]:
+  - @reactflow/background@11.1.5
+  - @reactflow/controls@11.1.5
+  - @reactflow/core@11.5.2
+  - @reactflow/minimap@11.3.5
+  - @reactflow/node-toolbar@1.1.5
+
+## 11.5.2
+
+### Patch Changes
+
+- [#2783](https://github.com/wbkd/react-flow/pull/2783) [`71153534`](https://github.com/wbkd/react-flow/commit/7115353418ebc7f7c81ab0e861200972bbf7dbd5) - connections: check handle below mouse before using connection radius
+
+- Updated dependencies [[`71153534`](https://github.com/wbkd/react-flow/commit/7115353418ebc7f7c81ab0e861200972bbf7dbd5)]:
+  - @reactflow/core@11.5.1
+  - @reactflow/background@11.1.4
+  - @reactflow/controls@11.1.4
+  - @reactflow/minimap@11.3.4
+  - @reactflow/node-toolbar@1.1.4
+
 ## 11.5.1

 ### Minor Changes
@@ -8,26 +82,28 @@

 ## 11.5.0

-Lot's of improvements are coming with this release! 
+Lot's of improvements are coming with this release!

 - **Connecting radius**: No need to drop a connection line on top of handle anymore. You only need to be close to the handle. That radius can be configured with the `connectionRadius` prop.
 - **Auto pan**: When you drag a node, a selection or the connection line to the border of the pane, it will pan into that direction. That makes it easier to connect far away nodes for example. If you don't like it you can set `autoPnaOnNodeDrag` and `autoPanOnConnect` to false.
 - **Touch devices**: It's finally possibleto connect nodes with the connection line on touch devices. In combination with the new auto pan and connection radius the overall UX is way better.
 - **Errors**: We added an `onError` prop to get notified when an error like "couldn't find source handle" happens. This is useful if you want to log errors for example.
- **Node type**: We added a second param to the generic `Node` type. You can not only pass `NodeData` but also the type as a second param: 
+- **Node type**: We added a second param to the generic `Node` type. You can not only pass `NodeData` but also the type as a second param:
+
 ```ts
-type MyCustomNode = Node<MyCustomNodeData, 'custom-node-type'>
+type MyCustomNode = Node<MyCustomNodeData, 'custom-node-type'>;
 ```
+
 This makes it easier to work with different custom nodes and data types.

 ### Minor Changes

- [#2754](https://github.com/wbkd/react-flow/pull/2754) [`e96309b6`](https://github.com/wbkd/react-flow/commit/e96309b6a57b1071faeebf7b0547fef7fd418694)  - Add auto pan for connecting and node dragging and `connectionRadius`
+- [#2754](https://github.com/wbkd/react-flow/pull/2754) [`e96309b6`](https://github.com/wbkd/react-flow/commit/e96309b6a57b1071faeebf7b0547fef7fd418694) - Add auto pan for connecting and node dragging and `connectionRadius`
 - [#2773](https://github.com/wbkd/react-flow/pull/2773) - Add `onError` prop to get notified when an error happens

 ### Patch Changes

- [#2763](https://github.com/wbkd/react-flow/pull/2763) [`85003b01`](https://github.com/wbkd/react-flow/commit/85003b01add71ea852bd5b0d2f1e7496050a6b52)  - Connecting nodes: Enable connections on touch devices
+- [#2763](https://github.com/wbkd/react-flow/pull/2763) [`85003b01`](https://github.com/wbkd/react-flow/commit/85003b01add71ea852bd5b0d2f1e7496050a6b52) - Connecting nodes: Enable connections on touch devices
 - [#2620](https://github.com/wbkd/react-flow/pull/2620) - Thanks [RichSchulz](https://github.com/RichSchulz)! - Types: improve typing for node type

 - Updated dependencies [[`e96309b6`](https://github.com/wbkd/react-flow/commit/e96309b6a57b1071faeebf7b0547fef7fd418694), [`85003b01`](https://github.com/wbkd/react-flow/commit/85003b01add71ea852bd5b0d2f1e7496050a6b52), [`4c516882`](https://github.com/wbkd/react-flow/commit/4c516882d2bbf426c1832a53ad40763cc1abef92)]:
@@ -1,6 +1,6 @@
 {
  "name": "reactflow",
-  "version": "11.5.1",
+  "version": "11.5.6",
  "description": "A highly customizable React library for building node-based editors and interactive flow charts",
  "keywords": [
    "react",
@@ -50,7 +50,7 @@
    "@reactflow/rollup-config": "workspace:*",
    "@reactflow/tsconfig": "workspace:*",
    "@types/node": "^18.7.16",
-    "@types/react": "^18.0.19",
+    "@types/react": ">=17",
    "react": "^18.2.0",
    "typescript": "^4.9.4"
  },