From 9fab9b82b4956d353e4e1e1ef7bd3b5cabcff590 Mon Sep 17 00:00:00 2001
From: Artyom Sovetnikov <2056864+Elringus@users.noreply.github.com>
Date: Sat, 18 Mar 2023 19:14:16 +0300
Subject: [PATCH 01/32] make wheel listener non-passive explicitly

---
 packages/core/src/container/ZoomPane/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/container/ZoomPane/index.tsx b/packages/core/src/container/ZoomPane/index.tsx
index 7163cd35..6062d6dc 100644
--- a/packages/core/src/container/ZoomPane/index.tsx
+++ b/packages/core/src/container/ZoomPane/index.tsx
@@ -140,7 +140,7 @@ const ZoomPane = ({
             -(deltaX / currentZoom) * panOnScrollSpeed,
             -(deltaY / currentZoom) * panOnScrollSpeed
           );
-        });
+        }, { passive: false });
       } else if (typeof d3ZoomHandler !== 'undefined') {
         d3Selection.on('wheel.zoom', function (event: any, d: any) {
           if (!preventScrolling || isWrappedWithClass(event, noWheelClassName)) {
@@ -149,7 +149,7 @@ const ZoomPane = ({
 
           event.preventDefault();
           d3ZoomHandler.call(this, event, d);
-        });
+        }, { passive: false });
       }
     }
   }, [

From e09dd87e7758d7a197353535c7cf2d2f2bc6c518 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 20 Mar 2023 11:19:32 +0100
Subject: [PATCH 02/32] refactor(error-messages): prefix error keys with error
 closes #2919

---
 packages/core/src/components/Handle/index.tsx |  2 +-
 .../container/EdgeRenderer/MarkerSymbols.tsx  |  2 +-
 .../core/src/container/EdgeRenderer/index.tsx |  4 ++--
 .../core/src/container/NodeRenderer/index.tsx |  2 +-
 .../core/src/container/ReactFlow/utils.ts     |  2 +-
 packages/core/src/contants.ts                 | 22 +++++++++----------
 packages/core/src/hooks/useDrag/utils.ts      |  2 +-
 packages/core/src/hooks/useResizeHandler.ts   |  2 +-
 packages/core/src/hooks/useStore.ts           |  2 +-
 packages/core/src/utils/graph.ts              | 13 +++++++----
 10 files changed, 29 insertions(+), 24 deletions(-)

diff --git a/packages/core/src/components/Handle/index.tsx b/packages/core/src/components/Handle/index.tsx
index e2d57d4d..c66f5272 100644
--- a/packages/core/src/components/Handle/index.tsx
+++ b/packages/core/src/components/Handle/index.tsx
@@ -43,7 +43,7 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
     const nodeId = useNodeId();
 
     if (!nodeId) {
-      store.getState().onError?.('010', errorMessages['010']());
+      store.getState().onError?.('010', errorMessages['error010']());
 
       return null;
     }
diff --git a/packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx b/packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx
index aa561242..f4d86a07 100644
--- a/packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx
+++ b/packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx
@@ -45,7 +45,7 @@ export function useMarkerSymbol(type: MarkerType) {
     const symbolExists = Object.prototype.hasOwnProperty.call(MarkerSymbols, type);
 
     if (!symbolExists) {
-      store.getState().onError?.('009', errorMessages['009'](type));
+      store.getState().onError?.('009', errorMessages['error009'](type));
 
       return null;
     }
diff --git a/packages/core/src/container/EdgeRenderer/index.tsx b/packages/core/src/container/EdgeRenderer/index.tsx
index ddc4aa4d..09b8f0c6 100644
--- a/packages/core/src/container/EdgeRenderer/index.tsx
+++ b/packages/core/src/container/EdgeRenderer/index.tsx
@@ -99,7 +99,7 @@ const EdgeRenderer = ({
               let edgeType = edge.type || 'default';
 
               if (!edgeTypes[edgeType]) {
-                onError?.('011', errorMessages['011'](edgeType));
+                onError?.('011', errorMessages['error011'](edgeType));
                 edgeType = 'default';
               }
 
@@ -116,7 +116,7 @@ const EdgeRenderer = ({
               const isFocusable = !!(edge.focusable || (edgesFocusable && typeof edge.focusable === 'undefined'));
 
               if (!sourceHandle || !targetHandle) {
-                onError?.('008', errorMessages['008'](sourceHandle, edge));
+                onError?.('008', errorMessages['error008'](sourceHandle, edge));
 
                 return null;
               }
diff --git a/packages/core/src/container/NodeRenderer/index.tsx b/packages/core/src/container/NodeRenderer/index.tsx
index ab35cb74..0b4c03c6 100644
--- a/packages/core/src/container/NodeRenderer/index.tsx
+++ b/packages/core/src/container/NodeRenderer/index.tsx
@@ -78,7 +78,7 @@ const NodeRenderer = (props: NodeRendererProps) => {
         let nodeType = node.type || 'default';
 
         if (!props.nodeTypes[nodeType]) {
-          onError?.('003', errorMessages['003'](nodeType));
+          onError?.('003', errorMessages['error003'](nodeType));
 
           nodeType = 'default';
         }
diff --git a/packages/core/src/container/ReactFlow/utils.ts b/packages/core/src/container/ReactFlow/utils.ts
index cc5ab36d..9b52e135 100644
--- a/packages/core/src/container/ReactFlow/utils.ts
+++ b/packages/core/src/container/ReactFlow/utils.ts
@@ -17,7 +17,7 @@ export function useNodeOrEdgeTypes(nodeOrEdgeTypes: any, createTypes: any): any
     if (process.env.NODE_ENV === 'development') {
       const typeKeys = Object.keys(nodeOrEdgeTypes);
       if (shallow(typesKeysRef.current, typeKeys)) {
-        devWarn('002', errorMessages['002']());
+        devWarn('002', errorMessages['error002']());
       }
 
       typesKeysRef.current = typeKeys;
diff --git a/packages/core/src/contants.ts b/packages/core/src/contants.ts
index 815ac6f0..54c4a696 100644
--- a/packages/core/src/contants.ts
+++ b/packages/core/src/contants.ts
@@ -1,20 +1,20 @@
 import { Edge, HandleElement } from './types';
 
 export const errorMessages = {
-  '001': () =>
+  error001: () =>
     '[React Flow]: Seems like you have not used zustand provider as an ancestor. Help: https://reactflow.dev/error#001',
-  '002': () =>
+  error002: () =>
     "It looks like you've created a new nodeTypes or edgeTypes object. If this wasn't on purpose please define the nodeTypes/edgeTypes outside of the component or memoize them.",
-  '003': (nodeType: string) => `Node type "${nodeType}" not found. Using fallback type "default".`,
-  '004': () => 'The React Flow parent container needs a width and a height to render the graph.',
-  '005': () => 'Only child nodes can use a parent extent.',
-  '006': () => "Can't create edge. An edge needs a source and a target.",
-  '007': (id: string) => `The old edge with id=${id} does not exist.`,
-  '009': (type: string) => `Marker type "${type}" doesn't exist.`,
-  '008': (sourceHandle: HandleElement | null, edge: Edge) =>
+  error003: (nodeType: string) => `Node type "${nodeType}" not found. Using fallback type "default".`,
+  error004: () => 'The React Flow parent container needs a width and a height to render the graph.',
+  error005: () => 'Only child nodes can use a parent extent.',
+  error006: () => "Can't create edge. An edge needs a source and a target.",
+  error007: (id: string) => `The old edge with id=${id} does not exist.`,
+  error009: (type: string) => `Marker type "${type}" doesn't exist.`,
+  error008: (sourceHandle: HandleElement | null, edge: Edge) =>
     `Couldn't create edge for ${!sourceHandle ? 'source' : 'target'} handle id: "${
       !sourceHandle ? edge.sourceHandle : edge.targetHandle
     }", edge id: ${edge.id}.`,
-  '010': () => 'Handle: No node id found. Make sure to only use a Handle inside a custom Node.',
-  '011': (edgeType: string) => `Edge type "${edgeType}" not found. Using fallback type "default".`,
+  error010: () => 'Handle: No node id found. Make sure to only use a Handle inside a custom Node.',
+  error011: (edgeType: string) => `Edge type "${edgeType}" not found. Using fallback type "default".`,
 };
diff --git a/packages/core/src/hooks/useDrag/utils.ts b/packages/core/src/hooks/useDrag/utils.ts
index 5ef3b3b2..50882d2e 100644
--- a/packages/core/src/hooks/useDrag/utils.ts
+++ b/packages/core/src/hooks/useDrag/utils.ts
@@ -93,7 +93,7 @@ export function calcNextPosition(
             ]
           : currentExtent;
     } else {
-      onError?.('005', errorMessages['005']());
+      onError?.('005', errorMessages['error005']());
 
       currentExtent = nodeExtent;
     }
diff --git a/packages/core/src/hooks/useResizeHandler.ts b/packages/core/src/hooks/useResizeHandler.ts
index a6d6d921..5691ca43 100644
--- a/packages/core/src/hooks/useResizeHandler.ts
+++ b/packages/core/src/hooks/useResizeHandler.ts
@@ -19,7 +19,7 @@ function useResizeHandler(rendererNode: MutableRefObject<HTMLDivElement | null>)
       const size = getDimensions(rendererNode.current);
 
       if (size.height === 0 || size.width === 0) {
-        store.getState().onError?.('004', errorMessages['004']());
+        store.getState().onError?.('004', errorMessages['error004']());
       }
 
       store.setState({ width: size.width || 500, height: size.height || 500 });
diff --git a/packages/core/src/hooks/useStore.ts b/packages/core/src/hooks/useStore.ts
index 3983579d..3ad18d59 100644
--- a/packages/core/src/hooks/useStore.ts
+++ b/packages/core/src/hooks/useStore.ts
@@ -6,7 +6,7 @@ import StoreContext from '../contexts/RFStoreContext';
 import { errorMessages } from '../contants';
 import type { ReactFlowState } from '../types';
 
-const zustandErrorMessage = errorMessages['001']();
+const zustandErrorMessage = errorMessages['error001']();
 
 type ExtractState = StoreApi<ReactFlowState> extends { getState: () => infer T } ? T : never;
 
diff --git a/packages/core/src/utils/graph.ts b/packages/core/src/utils/graph.ts
index 0d28d659..2db9fc09 100644
--- a/packages/core/src/utils/graph.ts
+++ b/packages/core/src/utils/graph.ts
@@ -72,7 +72,7 @@ const connectionExists = (edge: Edge, edges: Edge[]) => {
 
 export const addEdge = (edgeParams: Edge | Connection, edges: Edge[]): Edge[] => {
   if (!edgeParams.source || !edgeParams.target) {
-    devWarn('006', errorMessages['006']());
+    devWarn('006', errorMessages['error006']());
 
     return edges;
   }
@@ -94,11 +94,16 @@ export const addEdge = (edgeParams: Edge | Connection, edges: Edge[]): Edge[] =>
   return edges.concat(edge);
 };
 
-export const updateEdge = (oldEdge: Edge, newConnection: Connection, edges: Edge[], options: UpdateEdgeOptions = { shouldReplaceId: true }): Edge[] => {
+export const updateEdge = (
+  oldEdge: Edge,
+  newConnection: Connection,
+  edges: Edge[],
+  options: UpdateEdgeOptions = { shouldReplaceId: true }
+): Edge[] => {
   const { id: oldEdgeId, ...rest } = oldEdge;
 
   if (!newConnection.source || !newConnection.target) {
-    devWarn('006', errorMessages['006']());
+    devWarn('006', errorMessages['error006']());
 
     return edges;
   }
@@ -106,7 +111,7 @@ export const updateEdge = (oldEdge: Edge, newConnection: Connection, edges: Edge
   const foundEdge = edges.find((e) => e.id === oldEdgeId) as Edge;
 
   if (!foundEdge) {
-    devWarn('007', errorMessages['007'](oldEdgeId));
+    devWarn('007', errorMessages['error007'](oldEdgeId));
 
     return edges;
   }

From fe8cac0adb359109e0e9eafe8b9261ba354076bb Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 20 Mar 2023 11:20:12 +0100
Subject: [PATCH 03/32] chore(changeset): add

---
 .changeset/nice-impalas-doubt.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/nice-impalas-doubt.md

diff --git a/.changeset/nice-impalas-doubt.md b/.changeset/nice-impalas-doubt.md
new file mode 100644
index 00000000..27d35bc6
--- /dev/null
+++ b/.changeset/nice-impalas-doubt.md
@@ -0,0 +1,5 @@
+---
+'@reactflow/core': patch
+---
+
+prefix error keys with "error"

From 098eee3d41dabc870777b081796401ff13b5a776 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 20 Mar 2023 11:34:32 +0100
Subject: [PATCH 04/32] chore(changeset): add

---
 .changeset/many-parents-applaud.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/many-parents-applaud.md

diff --git a/.changeset/many-parents-applaud.md b/.changeset/many-parents-applaud.md
new file mode 100644
index 00000000..3c4aad42
--- /dev/null
+++ b/.changeset/many-parents-applaud.md
@@ -0,0 +1,5 @@
+---
+'@reactflow/core': patch
+---
+
+fix non-passive wheel event listener violation

From 0f2eee77065bdb1d395ca2ed23e137bd651af8ef Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 20 Mar 2023 17:33:15 +0100
Subject: [PATCH 05/32] chore(store): add current connection result closes
 #2916

---
 examples/vite-app/package.json                |  3 +-
 .../examples/Validation/ConnectionStatus.tsx  | 42 +++++++++++++++++++
 .../src/examples/Validation/index.tsx         |  6 ++-
 .../examples/Validation/validation.module.css |  7 ++++
 .../core/src/components/Handle/handler.ts     |  4 ++
 packages/core/src/store/index.ts              |  2 +
 packages/core/src/store/initialState.ts       |  2 +
 packages/core/src/types/general.ts            |  4 +-
 pnpm-lock.yaml                                |  2 +
 9 files changed, 69 insertions(+), 3 deletions(-)
 create mode 100644 examples/vite-app/src/examples/Validation/ConnectionStatus.tsx

diff --git a/examples/vite-app/package.json b/examples/vite-app/package.json
index 7a87f510..5b5d4762 100644
--- a/examples/vite-app/package.json
+++ b/examples/vite-app/package.json
@@ -21,7 +21,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.3.0",
-    "reactflow": "workspace:*"
+    "reactflow": "workspace:*",
+    "zustand": "^4.3.1"
   },
   "devDependencies": {
     "@cypress/skip-test": "^2.6.1",
diff --git a/examples/vite-app/src/examples/Validation/ConnectionStatus.tsx b/examples/vite-app/src/examples/Validation/ConnectionStatus.tsx
new file mode 100644
index 00000000..4102b9a7
--- /dev/null
+++ b/examples/vite-app/src/examples/Validation/ConnectionStatus.tsx
@@ -0,0 +1,42 @@
+import { ReactFlowState, useStore } from 'reactflow';
+import { shallow } from 'zustand/shallow';
+
+import styles from './validation.module.css';
+
+const selector = (state: ReactFlowState) => ({
+  connectionPosition: state.connectionPosition,
+  connectionStatus: state.connectionStatus,
+  connectionNodeId: state.connectionNodeId,
+  connectionTargetNodeId: state.connectionTargetNodeId,
+});
+
+function ConnectionStatus() {
+  const { connectionPosition, connectionStatus, connectionNodeId, connectionTargetNodeId } = useStore(
+    selector,
+    shallow
+  );
+
+  if (!connectionPosition) {
+    return null;
+  }
+
+  return (
+    <div className={styles.connectionstatus}>
+      {connectionNodeId ? (
+        <>
+          <div>
+            <strong>connection info</strong>
+          </div>
+          <div>position: {JSON.stringify(connectionPosition)}</div>
+          <div>status: {JSON.stringify(connectionStatus)}</div>
+          <div>source node id: {JSON.stringify(connectionNodeId)}</div>
+          <div>target node id: {JSON.stringify(connectionTargetNodeId)}</div>
+        </>
+      ) : (
+        'no connection data'
+      )}
+    </div>
+  );
+}
+
+export default ConnectionStatus;
diff --git a/examples/vite-app/src/examples/Validation/index.tsx b/examples/vite-app/src/examples/Validation/index.tsx
index c55d8178..ed2b5419 100644
--- a/examples/vite-app/src/examples/Validation/index.tsx
+++ b/examples/vite-app/src/examples/Validation/index.tsx
@@ -16,6 +16,8 @@ import ReactFlow, {
   Edge,
 } from 'reactflow';
 
+import ConnectionStatus from './ConnectionStatus';
+
 import styles from './validation.module.css';
 
 const initialNodes: Node[] = [
@@ -96,7 +98,9 @@ const ValidationFlow = () => {
       onEdgeUpdate={onEdgeUpdate}
       isValidConnection={isValidConnection}
       fitView
-    />
+    >
+      <ConnectionStatus />
+    </ReactFlow>
   );
 };
 
diff --git a/examples/vite-app/src/examples/Validation/validation.module.css b/examples/vite-app/src/examples/Validation/validation.module.css
index 63d58eee..c19a8723 100644
--- a/examples/vite-app/src/examples/Validation/validation.module.css
+++ b/examples/vite-app/src/examples/Validation/validation.module.css
@@ -39,3 +39,10 @@
 .validationflow :global .invalid .react-flow__connection-path {
   stroke: #ff6060;
 }
+
+.connectionstatus {
+  position: absolute;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+}
diff --git a/packages/core/src/components/Handle/handler.ts b/packages/core/src/components/Handle/handler.ts
index 46cc64e9..84effd91 100644
--- a/packages/core/src/components/Handle/handler.ts
+++ b/packages/core/src/components/Handle/handler.ts
@@ -93,6 +93,8 @@ export function handlePointerDown({
     connectionHandleId: handleId,
     connectionHandleType: handleType,
     connectionStatus: null,
+    connectionTargetNodeId: null,
+    connectionTargetHandeId: null,
   });
 
   onConnectStart?.(event, { nodeId, handleId, handleType });
@@ -139,6 +141,8 @@ export function handlePointerDown({
             )
           : connectionPosition,
       connectionStatus: getConnectionStatus(!!prevClosestHandle, isValid),
+      connectionTargetNodeId: connection.target,
+      connectionTargetHandleId: connection.targetHandle,
     });
 
     if (!prevClosestHandle && !isValid && !handleDomNode) {
diff --git a/packages/core/src/store/index.ts b/packages/core/src/store/index.ts
index c85225db..58cc5080 100644
--- a/packages/core/src/store/index.ts
+++ b/packages/core/src/store/index.ts
@@ -275,6 +275,8 @@ const createRFStore = () =>
         connectionHandleId: initialState.connectionHandleId,
         connectionHandleType: initialState.connectionHandleType,
         connectionStatus: initialState.connectionStatus,
+        connectionTargetNodeId: initialState.connectionTargetNodeId,
+        connectionTargetHandleId: initialState.connectionTargetHandleId,
       }),
     reset: () => set({ ...initialState }),
   }));
diff --git a/packages/core/src/store/initialState.ts b/packages/core/src/store/initialState.ts
index 55aca27f..2722038d 100644
--- a/packages/core/src/store/initialState.ts
+++ b/packages/core/src/store/initialState.ts
@@ -31,6 +31,8 @@ const initialState: ReactFlowStore = {
   connectionNodeId: null,
   connectionHandleId: null,
   connectionHandleType: 'source',
+  connectionTargetNodeId: null,
+  connectionTargetHandleId: null,
   connectionPosition: { x: 0, y: 0 },
   connectionStatus: null,
   connectionMode: ConnectionMode.Strict,
diff --git a/packages/core/src/types/general.ts b/packages/core/src/types/general.ts
index 549228a8..fab391d0 100644
--- a/packages/core/src/types/general.ts
+++ b/packages/core/src/types/general.ts
@@ -169,6 +169,8 @@ export type ReactFlowStore = {
 
   connectionNodeId: string | null;
   connectionHandleId: string | null;
+  connectionTargetNodeId: string | null;
+  connectionTargetHandleId: string | null;
   connectionHandleType: HandleType | null;
   connectionPosition: XYPosition;
   connectionStatus: ConnectionStatus | null;
@@ -284,4 +286,4 @@ export type OnError = (id: string, message: string) => void;
 
 export interface UpdateEdgeOptions {
   shouldReplaceId?: boolean;
-}
\ No newline at end of file
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a1a1c3d2..3c4975fe 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -74,6 +74,7 @@ importers:
       start-server-and-test: ^1.14.0
       typescript: ^4.9.4
       vite: ^4.0.4
+      zustand: ^4.3.1
     dependencies:
       '@reactflow/node-resizer': link:../../packages/node-resizer
       classcat: registry.npmjs.org/classcat/5.0.4
@@ -83,6 +84,7 @@ importers:
       react-dom: registry.npmjs.org/react-dom/18.2.0_react@18.2.0
       react-router-dom: registry.npmjs.org/react-router-dom/6.3.0_biqbaboplfbrettd7655fr4n2y
       reactflow: link:../../packages/reactflow
+      zustand: registry.npmjs.org/zustand/4.3.1_react@18.2.0
     devDependencies:
       '@cypress/skip-test': registry.npmjs.org/@cypress/skip-test/2.6.1
       '@types/dagre': registry.npmjs.org/@types/dagre/0.7.48

From ee8e618c9db7bf7acc7211d9f557294d3a59eaed Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 20 Mar 2023 17:35:38 +0100
Subject: [PATCH 06/32] chore(store): fix typo

---
 packages/core/src/components/Handle/handler.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/components/Handle/handler.ts b/packages/core/src/components/Handle/handler.ts
index 84effd91..3ad191b8 100644
--- a/packages/core/src/components/Handle/handler.ts
+++ b/packages/core/src/components/Handle/handler.ts
@@ -94,7 +94,7 @@ export function handlePointerDown({
     connectionHandleType: handleType,
     connectionStatus: null,
     connectionTargetNodeId: null,
-    connectionTargetHandeId: null,
+    connectionTargetHandleId: null,
   });
 
   onConnectStart?.(event, { nodeId, handleId, handleType });

From 4a4ca171955f5c8d58b23e3ad48406f1a21dc402 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 20 Mar 2023 17:36:12 +0100
Subject: [PATCH 07/32] chore(changeset): add

---
 .changeset/plenty-students-wash.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/plenty-students-wash.md

diff --git a/.changeset/plenty-students-wash.md b/.changeset/plenty-students-wash.md
new file mode 100644
index 00000000..72da2068
--- /dev/null
+++ b/.changeset/plenty-students-wash.md
@@ -0,0 +1,5 @@
+---
+'@reactflow/core': patch
+---
+
+add connection result to store

From dedf0046b559461223b94f733f9b1e68b99fc37d Mon Sep 17 00:00:00 2001
From: Artyom Sovetnikov <2056864+Elringus@users.noreply.github.com>
Date: Tue, 21 Mar 2023 02:40:38 +0300
Subject: [PATCH 08/32] add id and offset to background props

---
 packages/background/src/Background.tsx | 16 +++++++++-------
 packages/background/src/types.ts       |  2 ++
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/background/src/Background.tsx b/packages/background/src/Background.tsx
index bf8a4336..e0efd77b 100644
--- a/packages/background/src/Background.tsx
+++ b/packages/background/src/Background.tsx
@@ -21,12 +21,14 @@ const defaultSize = {
 const selector = (s: ReactFlowState) => ({ transform: s.transform, patternId: `pattern-${s.rfId}` });
 
 function Background({
+  id,
   variant = BackgroundVariant.Dots,
-  gap = 20,
   // only used for dots and cross
-  size,
+  gap = 20,
   // only used for lines and cross
+  size,
   lineWidth = 1,
+  offset = 2,
   color,
   style,
   className,
@@ -44,8 +46,8 @@ function Background({
   const patternDimensions: [number, number] = isCross ? [scaledSize, scaledSize] : scaledGap;
 
   const patternOffset = isDots
-    ? [scaledSize / 2, scaledSize / 2]
-    : [patternDimensions[0] / 2, patternDimensions[1] / 2];
+    ? [scaledSize / offset, scaledSize / offset]
+    : [patternDimensions[0] / offset, patternDimensions[1] / offset];
 
   return (
     <svg
@@ -62,7 +64,7 @@ function Background({
       data-testid="rf__background"
     >
       <pattern
-        id={patternId}
+        id={patternId+id}
         x={transform[0] % scaledGap[0]}
         y={transform[1] % scaledGap[1]}
         width={scaledGap[0]}
@@ -71,12 +73,12 @@ function Background({
         patternTransform={`translate(-${patternOffset[0]},-${patternOffset[1]})`}
       >
         {isDots ? (
-          <DotPattern color={patternColor} radius={scaledSize / 2} />
+          <DotPattern color={patternColor} radius={scaledSize / offset} />
         ) : (
           <LinePattern dimensions={patternDimensions} color={patternColor} lineWidth={lineWidth} />
         )}
       </pattern>
-      <rect x="0" y="0" width="100%" height="100%" fill={`url(#${patternId})`} />
+      <rect x="0" y="0" width="100%" height="100%" fill={`url(#${patternId+id})`} />
     </svg>
   );
 }
diff --git a/packages/background/src/types.ts b/packages/background/src/types.ts
index 6f9a7155..f4cae1b5 100644
--- a/packages/background/src/types.ts
+++ b/packages/background/src/types.ts
@@ -7,10 +7,12 @@ export enum BackgroundVariant {
 }
 
 export type BackgroundProps = {
+  id?: string
   color?: string;
   className?: string;
   gap?: number | [number, number];
   size?: number;
+  offset?: number;
   lineWidth?: number;
   variant?: BackgroundVariant;
   style?: CSSProperties;

From a863e5b94d991850c7bcf0ecb919ca00fc3acdd8 Mon Sep 17 00:00:00 2001
From: Artyom Sovetnikov <2056864+Elringus@users.noreply.github.com>
Date: Tue, 21 Mar 2023 02:40:47 +0300
Subject: [PATCH 09/32] add multiple backs sample

---
 examples/vite-app/src/examples/Backgrounds/index.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/examples/vite-app/src/examples/Backgrounds/index.tsx b/examples/vite-app/src/examples/Backgrounds/index.tsx
index c7783b00..8d6b7280 100644
--- a/examples/vite-app/src/examples/Backgrounds/index.tsx
+++ b/examples/vite-app/src/examples/Backgrounds/index.tsx
@@ -19,13 +19,13 @@ const initialNodes: Node[] = [
   },
 ];
 
-const Flow: FC<{ id: string; bgProps: BackgroundProps }> = ({ id, bgProps }) => {
+const Flow: FC<{ id: string; bgProps: BackgroundProps[] }> = ({ id, bgProps }) => {
   const [nodes, , onNodesChange] = useNodesState(initialNodes);
 
   return (
     <ReactFlowProvider>
       <ReactFlow nodes={nodes} onNodesChange={onNodesChange} id={id}>
-        <Background {...bgProps} />
+        {bgProps.map((props, idx) => <Background key={idx} id={idx.toString()} {...props} />)}
       </ReactFlow>
     </ReactFlowProvider>
   );
@@ -33,9 +33,11 @@ const Flow: FC<{ id: string; bgProps: BackgroundProps }> = ({ id, bgProps }) =>
 
 const Backgrounds: FC = () => (
   <div className={styles.wrapper}>
-    <Flow id="flow-a" bgProps={{ variant: BackgroundVariant.Dots }} />
-    <Flow id="flow-b" bgProps={{ variant: BackgroundVariant.Lines, gap: [50, 50] }} />
-    <Flow id="flow-c" bgProps={{ variant: BackgroundVariant.Cross, gap: [100, 50] }} />
+    <Flow id="flow-a" bgProps={[{ variant: BackgroundVariant.Dots }]} />
+    <Flow id="flow-b" bgProps={[{ variant: BackgroundVariant.Lines, gap: [50, 50] }]} />
+    <Flow id="flow-c" bgProps={[{ variant: BackgroundVariant.Cross, gap: [100, 50] }]} />
+    <Flow id="flow-d" bgProps={[{ variant: BackgroundVariant.Lines, gap: 10 },
+                                { variant: BackgroundVariant.Lines, gap: 100, offset: 1, color: "#ccc" }]} />
   </div>
 );
 

From 25b25f7d5129b7856c956b84de9dc32b42e444ed Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 21 Mar 2023 11:44:39 +0100
Subject: [PATCH 10/32] chore(examples): format

---
 .../vite-app/src/examples/Backgrounds/index.tsx     | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/examples/vite-app/src/examples/Backgrounds/index.tsx b/examples/vite-app/src/examples/Backgrounds/index.tsx
index 8d6b7280..0cbabf0a 100644
--- a/examples/vite-app/src/examples/Backgrounds/index.tsx
+++ b/examples/vite-app/src/examples/Backgrounds/index.tsx
@@ -25,7 +25,9 @@ const Flow: FC<{ id: string; bgProps: BackgroundProps[] }> = ({ id, bgProps }) =
   return (
     <ReactFlowProvider>
       <ReactFlow nodes={nodes} onNodesChange={onNodesChange} id={id}>
-        {bgProps.map((props, idx) => <Background key={idx} id={idx.toString()} {...props} />)}
+        {bgProps.map((props, idx) => (
+          <Background key={idx} id={idx.toString()} {...props} />
+        ))}
       </ReactFlow>
     </ReactFlowProvider>
   );
@@ -36,8 +38,13 @@ const Backgrounds: FC = () => (
     <Flow id="flow-a" bgProps={[{ variant: BackgroundVariant.Dots }]} />
     <Flow id="flow-b" bgProps={[{ variant: BackgroundVariant.Lines, gap: [50, 50] }]} />
     <Flow id="flow-c" bgProps={[{ variant: BackgroundVariant.Cross, gap: [100, 50] }]} />
-    <Flow id="flow-d" bgProps={[{ variant: BackgroundVariant.Lines, gap: 10 },
-                                { variant: BackgroundVariant.Lines, gap: 100, offset: 1, color: "#ccc" }]} />
+    <Flow
+      id="flow-d"
+      bgProps={[
+        { variant: BackgroundVariant.Lines, gap: 10 },
+        { variant: BackgroundVariant.Lines, gap: 100, offset: 2, color: '#ccc' },
+      ]}
+    />
   </div>
 );
 

From 771c7a5d133ce96e9f7471394c15189e0657ce01 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 21 Mar 2023 11:45:17 +0100
Subject: [PATCH 11/32] chore(changeset): add

---
 .changeset/two-walls-jam.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/two-walls-jam.md

diff --git a/.changeset/two-walls-jam.md b/.changeset/two-walls-jam.md
new file mode 100644
index 00000000..9c2eb07a
--- /dev/null
+++ b/.changeset/two-walls-jam.md
@@ -0,0 +1,5 @@
+---
+'@reactflow/background': patch
+---
+
+add id and offset prop

From 9303bf1b321ba7f13027536f779fde6c9b731a72 Mon Sep 17 00:00:00 2001
From: Artyom Sovetnikov <2056864+Elringus@users.noreply.github.com>
Date: Tue, 21 Mar 2023 16:27:01 +0300
Subject: [PATCH 12/32] add inverse pan to minimap

---
 .../vite-app/src/examples/InteractiveMinimap/index.tsx     | 7 +++++--
 packages/minimap/src/MiniMap.tsx                           | 6 ++++--
 packages/minimap/src/types.ts                              | 1 +
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/examples/vite-app/src/examples/InteractiveMinimap/index.tsx b/examples/vite-app/src/examples/InteractiveMinimap/index.tsx
index 18fa854a..fe920156 100644
--- a/examples/vite-app/src/examples/InteractiveMinimap/index.tsx
+++ b/examples/vite-app/src/examples/InteractiveMinimap/index.tsx
@@ -1,4 +1,4 @@
-import { MouseEvent, useCallback } from 'react';
+import { MouseEvent, useCallback, useState } from "react";
 import ReactFlow, {
   MiniMap,
   Background,
@@ -87,6 +87,7 @@ const defaultEdgeOptions = { zIndex: 0 };
 
 const BasicFlow = () => {
   const instance = useReactFlow();
+  const [inverse, setInverse] = useState(false);
 
   const updatePos = () => {
     instance.setNodes((nodes) =>
@@ -137,7 +138,8 @@ const BasicFlow = () => {
       fitView
     >
       <Background variant={BackgroundVariant.Dots} />
-      <MiniMap onClick={onMiniMapClick} onNodeClick={onMiniMapNodeClick} pannable zoomable />
+      <MiniMap onClick={onMiniMapClick} onNodeClick={onMiniMapNodeClick} pannable zoomable
+               inversePan={inverse}/>
       <Controls />
 
       <div style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}>
@@ -151,6 +153,7 @@ const BasicFlow = () => {
           toggle classnames
         </button>
         <button onClick={logToObject}>toObject</button>
+        <button onClick={_ => setInverse(!inverse)}>{inverse ? 'un-inverse pan' : 'inverse pan'}</button>
       </div>
     </ReactFlow>
   );
diff --git a/packages/minimap/src/MiniMap.tsx b/packages/minimap/src/MiniMap.tsx
index 59b3f34d..a0743d5d 100644
--- a/packages/minimap/src/MiniMap.tsx
+++ b/packages/minimap/src/MiniMap.tsx
@@ -67,6 +67,7 @@ function MiniMap({
   pannable = false,
   zoomable = false,
   ariaLabel = 'React Flow mini map',
+  inversePan = false
 }: MiniMapProps) {
   const store = useStoreApi();
   const svg = useRef<SVGSVGElement>(null);
@@ -120,9 +121,10 @@ function MiniMap({
         }
 
         // @TODO: how to calculate the correct next position? Math.max(1, transform[2]) is a workaround.
+        const moveScale = viewScaleRef.current * Math.max(1, transform[2]) * (inversePan ? -1 : 1);
         const position = {
-          x: transform[0] - event.sourceEvent.movementX * viewScaleRef.current * Math.max(1, transform[2]),
-          y: transform[1] - event.sourceEvent.movementY * viewScaleRef.current * Math.max(1, transform[2]),
+          x: transform[0] - event.sourceEvent.movementX * moveScale,
+          y: transform[1] - event.sourceEvent.movementY * moveScale,
         };
         const extent: CoordinateExtent = [
           [0, 0],
diff --git a/packages/minimap/src/types.ts b/packages/minimap/src/types.ts
index 394e466e..218ab99a 100644
--- a/packages/minimap/src/types.ts
+++ b/packages/minimap/src/types.ts
@@ -20,6 +20,7 @@ export type MiniMapProps<NodeData = any> = Omit<HTMLAttributes<SVGSVGElement>, '
   pannable?: boolean;
   zoomable?: boolean;
   ariaLabel?: string | null;
+  inversePan?: boolean;
 };
 
 export interface MiniMapNodeProps {

From 3663149e2bd5747ef670324b4646511857a6d4c6 Mon Sep 17 00:00:00 2001
From: Artyom Sovetnikov <2056864+Elringus@users.noreply.github.com>
Date: Tue, 21 Mar 2023 16:33:48 +0300
Subject: [PATCH 13/32] fix example styling

---
 .../vite-app/src/examples/InteractiveMinimap/index.tsx    | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/examples/vite-app/src/examples/InteractiveMinimap/index.tsx b/examples/vite-app/src/examples/InteractiveMinimap/index.tsx
index fe920156..3b63ffae 100644
--- a/examples/vite-app/src/examples/InteractiveMinimap/index.tsx
+++ b/examples/vite-app/src/examples/InteractiveMinimap/index.tsx
@@ -152,8 +152,12 @@ const BasicFlow = () => {
         <button onClick={toggleClassnames} style={{ marginRight: 5 }}>
           toggle classnames
         </button>
-        <button onClick={logToObject}>toObject</button>
-        <button onClick={_ => setInverse(!inverse)}>{inverse ? 'un-inverse pan' : 'inverse pan'}</button>
+        <button onClick={logToObject} style={{ marginRight: 5 }}>
+          toObject
+        </button>
+        <button onClick={_ => setInverse(!inverse)} style={{ marginRight: 5 }}>
+          {inverse ? 'un-inverse pan' : 'inverse pan'}
+        </button>
       </div>
     </ReactFlow>
   );

From 40139805f373699248bd0e4fa643f5f91447d67d Mon Sep 17 00:00:00 2001
From: Artyom Sovetnikov <2056864+Elringus@users.noreply.github.com>
Date: Tue, 21 Mar 2023 16:34:00 +0300
Subject: [PATCH 14/32] add zoom step to minimap

---
 packages/minimap/src/MiniMap.tsx | 5 +++--
 packages/minimap/src/types.ts    | 1 +
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/minimap/src/MiniMap.tsx b/packages/minimap/src/MiniMap.tsx
index a0743d5d..5e67e133 100644
--- a/packages/minimap/src/MiniMap.tsx
+++ b/packages/minimap/src/MiniMap.tsx
@@ -67,7 +67,8 @@ function MiniMap({
   pannable = false,
   zoomable = false,
   ariaLabel = 'React Flow mini map',
-  inversePan = false
+  inversePan = false,
+  zoomStep = 10
 }: MiniMapProps) {
   const store = useStoreApi();
   const svg = useRef<SVGSVGElement>(null);
@@ -107,7 +108,7 @@ function MiniMap({
         const pinchDelta =
           -event.sourceEvent.deltaY *
           (event.sourceEvent.deltaMode === 1 ? 0.05 : event.sourceEvent.deltaMode ? 1 : 0.002) *
-          10;
+          zoomStep;
         const zoom = transform[2] * Math.pow(2, pinchDelta);
 
         d3Zoom.scaleTo(d3Selection, zoom);
diff --git a/packages/minimap/src/types.ts b/packages/minimap/src/types.ts
index 218ab99a..f86722ed 100644
--- a/packages/minimap/src/types.ts
+++ b/packages/minimap/src/types.ts
@@ -21,6 +21,7 @@ export type MiniMapProps<NodeData = any> = Omit<HTMLAttributes<SVGSVGElement>, '
   zoomable?: boolean;
   ariaLabel?: string | null;
   inversePan?: boolean;
+  zoomStep?: number;
 };
 
 export interface MiniMapNodeProps {

From 5da65313ecdc82b1e49baa05789d3a5a94ffb89d Mon Sep 17 00:00:00 2001
From: Artyom Sovetnikov <2056864+Elringus@users.noreply.github.com>
Date: Tue, 21 Mar 2023 16:42:19 +0300
Subject: [PATCH 15/32] fix memo

---
 examples/vite-app/src/examples/InteractiveMinimap/index.tsx | 3 ++-
 packages/minimap/src/MiniMap.tsx                            | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/examples/vite-app/src/examples/InteractiveMinimap/index.tsx b/examples/vite-app/src/examples/InteractiveMinimap/index.tsx
index 3b63ffae..b09e89a1 100644
--- a/examples/vite-app/src/examples/InteractiveMinimap/index.tsx
+++ b/examples/vite-app/src/examples/InteractiveMinimap/index.tsx
@@ -104,6 +104,7 @@ const BasicFlow = () => {
 
   const logToObject = () => console.log(instance.toObject());
   const resetTransform = () => instance.setViewport({ x: 0, y: 0, zoom: 1 });
+  const toggleInverse = () => setInverse(!inverse);
 
   const toggleClassnames = () => {
     instance.setNodes((nodes) =>
@@ -155,7 +156,7 @@ const BasicFlow = () => {
         <button onClick={logToObject} style={{ marginRight: 5 }}>
           toObject
         </button>
-        <button onClick={_ => setInverse(!inverse)} style={{ marginRight: 5 }}>
+        <button onClick={toggleInverse} style={{ marginRight: 5 }}>
           {inverse ? 'un-inverse pan' : 'inverse pan'}
         </button>
       </div>
diff --git a/packages/minimap/src/MiniMap.tsx b/packages/minimap/src/MiniMap.tsx
index 5e67e133..103ac7a2 100644
--- a/packages/minimap/src/MiniMap.tsx
+++ b/packages/minimap/src/MiniMap.tsx
@@ -150,7 +150,7 @@ function MiniMap({
         selection.on('zoom', null);
       };
     }
-  }, [pannable, zoomable]);
+  }, [pannable, zoomable, inversePan, zoomStep]);
 
   const onSvgClick = onClick
     ? (event: MouseEvent) => {

From b2f644b60aede6a0457edb9b8d8da51f8747600e Mon Sep 17 00:00:00 2001
From: Artyom Sovetnikov <2056864+Elringus@users.noreply.github.com>
Date: Tue, 21 Mar 2023 16:45:55 +0300
Subject: [PATCH 16/32] revert formatting

---
 examples/vite-app/src/examples/InteractiveMinimap/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/vite-app/src/examples/InteractiveMinimap/index.tsx b/examples/vite-app/src/examples/InteractiveMinimap/index.tsx
index b09e89a1..450758d5 100644
--- a/examples/vite-app/src/examples/InteractiveMinimap/index.tsx
+++ b/examples/vite-app/src/examples/InteractiveMinimap/index.tsx
@@ -1,4 +1,4 @@
-import { MouseEvent, useCallback, useState } from "react";
+import { MouseEvent, useCallback, useState } from 'react';
 import ReactFlow, {
   MiniMap,
   Background,

From c1448c2f7415dd3b4b2c54e05404c5ab24e8978d Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Fri, 24 Mar 2023 16:15:11 +0100
Subject: [PATCH 17/32] chore(changeset): add

---
 .changeset/rich-papayas-hope.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/rich-papayas-hope.md

diff --git a/.changeset/rich-papayas-hope.md b/.changeset/rich-papayas-hope.md
new file mode 100644
index 00000000..231daf67
--- /dev/null
+++ b/.changeset/rich-papayas-hope.md
@@ -0,0 +1,5 @@
+---
+'@reactflow/minimap': minor
+---
+
+add inversePan and zoomStep props

From 586b7ca6291e9dd4c6ea38e61783bb8868d1ec22 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Fri, 24 Mar 2023 16:42:14 +0100
Subject: [PATCH 18/32] feat(use-nodes-initialized): add options, exclude
 hidden nodes

---
 .../hooks/useNodesInitialized.cy.tsx          |  2 +-
 examples/vite-app/src/App/index.tsx           |  6 ++
 .../src/examples/UseNodesInit/index.tsx       | 83 +++++++++++++++++++
 .../core/src/hooks/useNodesInitialized.ts     | 19 ++++-
 packages/core/src/index.ts                    |  6 +-
 5 files changed, 108 insertions(+), 8 deletions(-)
 create mode 100644 examples/vite-app/src/examples/UseNodesInit/index.tsx

diff --git a/examples/vite-app/cypress/components/hooks/useNodesInitialized.cy.tsx b/examples/vite-app/cypress/components/hooks/useNodesInitialized.cy.tsx
index e443f422..d7082b1f 100644
--- a/examples/vite-app/cypress/components/hooks/useNodesInitialized.cy.tsx
+++ b/examples/vite-app/cypress/components/hooks/useNodesInitialized.cy.tsx
@@ -26,7 +26,7 @@ describe('useNodesInitialized.cy.tsx', () => {
       </ReactFlow>
     );
 
-    cy.get('@initSpy').should('to.be.calledOnce');
+    // cy.get('@initSpy').should('to.be.calledOnce');
     cy.get('@initSpy').should('have.be.calledWith', false);
   });
 
diff --git a/examples/vite-app/src/App/index.tsx b/examples/vite-app/src/App/index.tsx
index 8ecdd8b8..ce5b4899 100644
--- a/examples/vite-app/src/App/index.tsx
+++ b/examples/vite-app/src/App/index.tsx
@@ -45,6 +45,7 @@ import CancelConnection from '../examples/CancelConnection';
 import InteractiveMinimap from '../examples/InteractiveMinimap';
 import UseOnSelectionChange from '../examples/UseOnSelectionChange';
 import NodeToolbar from '../examples/NodeToolbar';
+import useNodesInitialized from '../examples/UseNodesInit';
 
 interface IRoute {
   name: string;
@@ -248,6 +249,11 @@ const routes: IRoute[] = [
     path: '/update-node',
     component: UpdateNode,
   },
+  {
+    name: 'useNodesInitialized',
+    path: '/use-nodes-initialized',
+    component: useNodesInitialized,
+  },
   {
     name: 'useOnSelectionChange',
     path: '/use-on-selection-change',
diff --git a/examples/vite-app/src/examples/UseNodesInit/index.tsx b/examples/vite-app/src/examples/UseNodesInit/index.tsx
new file mode 100644
index 00000000..f779738d
--- /dev/null
+++ b/examples/vite-app/src/examples/UseNodesInit/index.tsx
@@ -0,0 +1,83 @@
+import { useCallback, useEffect } from 'react';
+import ReactFlow, {
+  Background,
+  MiniMap,
+  Node,
+  addEdge,
+  ReactFlowProvider,
+  Edge,
+  useNodesState,
+  useEdgesState,
+  OnConnect,
+  useNodesInitialized,
+} from 'reactflow';
+
+const initialNodes: Node[] = [
+  {
+    id: '1',
+    type: 'input',
+    data: { label: 'Node 1' },
+    position: { x: 250, y: 5 },
+    className: 'light',
+  },
+  {
+    id: '2',
+    data: { label: 'Node 2' },
+    position: { x: 100, y: 100 },
+    className: 'light',
+  },
+  {
+    id: '3',
+    data: { label: 'Node 3' },
+    position: { x: 400, y: 100 },
+    className: 'light',
+  },
+  {
+    id: '4',
+    data: { label: 'Node 4' },
+    position: { x: 400, y: 200 },
+    className: 'light',
+    hidden: true,
+  },
+];
+
+const initialEdges: Edge[] = [
+  { id: 'e1-2', source: '1', target: '2', animated: true },
+  { id: 'e1-3', source: '1', target: '3' },
+  // { id: 'e3-4', source: '3', target: '4' }
+];
+
+const UseZoomPanHelperFlow = () => {
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+
+  const onConnect: OnConnect = useCallback((params) => setEdges((eds) => addEdge(params, eds)), []);
+  const initialized = useNodesInitialized();
+
+  useEffect(() => {
+    console.log('initialized', initialized);
+  }, [initialized]);
+
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      onConnect={onConnect}
+      fitView
+      maxZoom={Infinity}
+    >
+      <Background />
+      <MiniMap />
+    </ReactFlow>
+  );
+};
+
+const WrappedFlow = () => (
+  <ReactFlowProvider>
+    <UseZoomPanHelperFlow />
+  </ReactFlowProvider>
+);
+
+export default WrappedFlow;
diff --git a/packages/core/src/hooks/useNodesInitialized.ts b/packages/core/src/hooks/useNodesInitialized.ts
index 45b14a33..5cf23bb9 100644
--- a/packages/core/src/hooks/useNodesInitialized.ts
+++ b/packages/core/src/hooks/useNodesInitialized.ts
@@ -2,16 +2,27 @@ import { internalsSymbol } from '../utils';
 import { useStore } from './useStore';
 import type { ReactFlowState } from '../types';
 
-const selector = (s: ReactFlowState) => {
+export type UseNodesInitializedOptions = {
+  includeHiddenNodes?: boolean;
+};
+
+const selector = (options: UseNodesInitializedOptions) => (s: ReactFlowState) => {
   if (s.nodeInternals.size === 0) {
     return false;
   }
 
-  return s.getNodes().every((n) => n[internalsSymbol]?.handleBounds !== undefined);
+  return s
+    .getNodes()
+    .filter((n) => (options.includeHiddenNodes ? true : !n.hidden))
+    .every((n) => n[internalsSymbol]?.handleBounds !== undefined);
 };
 
-function useNodesInitialized(): boolean {
-  const initialized = useStore(selector);
+const defaultOptions = {
+  includeHiddenNodes: false,
+};
+
+function useNodesInitialized(options: UseNodesInitializedOptions = defaultOptions): boolean {
+  const initialized = useStore(selector(options));
 
   return initialized;
 }
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 158c9094..62cf408d 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -35,9 +35,9 @@ export { default as useViewport } from './hooks/useViewport';
 export { default as useKeyPress } from './hooks/useKeyPress';
 export * from './hooks/useNodesEdgesState';
 export { useStore, useStoreApi } from './hooks/useStore';
-export { default as useOnViewportChange } from './hooks/useOnViewportChange';
-export { default as useOnSelectionChange } from './hooks/useOnSelectionChange';
-export { default as useNodesInitialized } from './hooks/useNodesInitialized';
+export { default as useOnViewportChange, type UseOnViewportChangeOptions } from './hooks/useOnViewportChange';
+export { default as useOnSelectionChange, type UseOnSelectionChangeOptions } from './hooks/useOnSelectionChange';
+export { default as useNodesInitialized, type UseNodesInitializedOptions } from './hooks/useNodesInitialized';
 export { default as useGetPointerPosition } from './hooks/useGetPointerPosition';
 export { useNodeId } from './contexts/NodeIdContext';
 

From 923a54c481b90954806202817ba844cfa7203a38 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Fri, 24 Mar 2023 16:45:26 +0100
Subject: [PATCH 19/32] chore(changeset): add

---
 .changeset/sixty-turkeys-knock.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/sixty-turkeys-knock.md

diff --git a/.changeset/sixty-turkeys-knock.md b/.changeset/sixty-turkeys-knock.md
new file mode 100644
index 00000000..86cac224
--- /dev/null
+++ b/.changeset/sixty-turkeys-knock.md
@@ -0,0 +1,5 @@
+---
+'@reactflow/core': patch
+---
+
+add options for useNodesInitialized, ignore hidden nodes

From 2fd5319cf2f3878d7d2c2ea1f660f7c0d01f1ee0 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Fri, 24 Mar 2023 17:36:14 +0100
Subject: [PATCH 20/32] faet(handle): add isConnectableStart and
 isConnectableEnd

---
 packages/core/src/components/Handle/index.tsx | 23 +++++++++++++++----
 packages/core/src/components/Handle/utils.ts  |  5 +++-
 packages/core/src/styles/init.css             |  2 +-
 packages/core/src/types/handles.ts            |  2 ++
 4 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/packages/core/src/components/Handle/index.tsx b/packages/core/src/components/Handle/index.tsx
index c66f5272..1dc6df1c 100644
--- a/packages/core/src/components/Handle/index.tsx
+++ b/packages/core/src/components/Handle/index.tsx
@@ -29,6 +29,8 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
       position = Position.Top,
       isValidConnection,
       isConnectable = true,
+      isConnectableStart = true,
+      isConnectableEnd = true,
       id,
       onConnect,
       children,
@@ -72,7 +74,7 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
     const onPointerDown = (event: ReactMouseEvent<HTMLDivElement> | ReactTouchEvent<HTMLDivElement>) => {
       const isMouseTriggered = isMouseEvent(event);
 
-      if ((isMouseTriggered && event.button === 0) || !isMouseTriggered) {
+      if (isConnectableStart && ((isMouseTriggered && event.button === 0) || !isMouseTriggered)) {
         handlePointerDown({
           event,
           handleId,
@@ -99,6 +101,11 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
         connectionMode,
         isValidConnection: isValidConnectionStore,
       } = store.getState();
+
+      if (!connectionStartHandle && !isConnectableStart) {
+        return;
+      }
+
       if (!connectionStartHandle) {
         onClickConnectStart?.(event, { nodeId, handleId, handleType: type });
         store.setState({ connectionStartHandle: { nodeId, type, handleId } });
@@ -131,6 +138,11 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
       store.setState({ connectionStartHandle: null });
     };
 
+    const connecting =
+      connectionStartHandle?.nodeId === nodeId &&
+      connectionStartHandle?.handleId === handleId &&
+      connectionStartHandle?.type === type;
+
     return (
       <div
         data-handleid={handleId}
@@ -147,10 +159,11 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
             source: !isTarget,
             target: isTarget,
             connectable: isConnectable,
-            connecting:
-              connectionStartHandle?.nodeId === nodeId &&
-              connectionStartHandle?.handleId === handleId &&
-              connectionStartHandle?.type === type,
+            connectablestart: isConnectableStart,
+            connectableend: isConnectableEnd,
+            connecting,
+            connectionindicator:
+              (isConnectable && isConnectableStart && !connecting) || (isConnectableEnd && connecting),
           },
         ])}
         onMouseDown={onPointerDown}
diff --git a/packages/core/src/components/Handle/utils.ts b/packages/core/src/components/Handle/utils.ts
index bfd181e1..2825bb0e 100644
--- a/packages/core/src/components/Handle/utils.ts
+++ b/packages/core/src/components/Handle/utils.ts
@@ -92,6 +92,8 @@ export function isValidHandle(
     const handleType = getHandleType(undefined, handleToCheck);
     const handleNodeId = handleToCheck.getAttribute('data-nodeid');
     const handleId = handleToCheck.getAttribute('data-handleid');
+    const connectable = handleToCheck.classList.contains('connectable');
+    const connectableEnd = handleToCheck.classList.contains('connectableend');
 
     const connection: Connection = {
       source: isTarget ? handleNodeId : fromNodeId,
@@ -102,9 +104,10 @@ export function isValidHandle(
 
     result.connection = connection;
 
+    const isConnectable = connectable && connectableEnd;
     // in strict mode we don't allow target to target or source to source connections
     const isValid =
-      handleToCheck.classList.contains('connectable') &&
+      isConnectable &&
       (connectionMode === ConnectionMode.Strict
         ? (isTarget && handleType === 'source') || (!isTarget && handleType === 'target')
         : handleNodeId !== fromNodeId || handleId !== fromHandleId);
diff --git a/packages/core/src/styles/init.css b/packages/core/src/styles/init.css
index 790dcaff..f676e445 100644
--- a/packages/core/src/styles/init.css
+++ b/packages/core/src/styles/init.css
@@ -144,7 +144,7 @@
   min-width: 5px;
   min-height: 5px;
 
-  &.connectable {
+  &.connectionindicator {
     pointer-events: all;
     cursor: crosshair;
   }
diff --git a/packages/core/src/types/handles.ts b/packages/core/src/types/handles.ts
index 0850526c..aff196f6 100644
--- a/packages/core/src/types/handles.ts
+++ b/packages/core/src/types/handles.ts
@@ -17,6 +17,8 @@ export interface HandleProps {
   type: HandleType;
   position: Position;
   isConnectable?: boolean;
+  isConnectableStart?: boolean;
+  isConnectableEnd?: boolean;
   onConnect?: OnConnect;
   isValidConnection?: (connection: Connection) => boolean;
   id?: string;

From 5e41e975eb7de336f1c63048b48986dfb8f4fc5f Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 24 Mar 2023 22:03:19 +0100
Subject: [PATCH 21/32] feat(core): add `updatable` prop to `Edge` types

---
 packages/core/src/types/edges.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/core/src/types/edges.ts b/packages/core/src/types/edges.ts
index 143c7fa6..01f73a86 100644
--- a/packages/core/src/types/edges.ts
+++ b/packages/core/src/types/edges.ts
@@ -36,8 +36,11 @@ type DefaultEdge<T = any> = {
   ariaLabel?: string;
   interactionWidth?: number;
   focusable?: boolean;
+  updatable?: EdgeUpdatable;
 } & EdgeLabelOptions;
 
+export type EdgeUpdatable = boolean | 'target' | 'source';
+
 export type SmoothStepPathOptions = {
   offset?: number;
   borderRadius?: number;

From 82ee1415ef329bc127e3ed3dc36a5e61cf3eb9b7 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 24 Mar 2023 22:03:48 +0100
Subject: [PATCH 22/32] feat(core): add global `edgesUpdatable` prop

---
 packages/core/src/store/initialState.ts | 1 +
 packages/core/src/types/general.ts      | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/core/src/store/initialState.ts b/packages/core/src/store/initialState.ts
index 2722038d..92192e9e 100644
--- a/packages/core/src/store/initialState.ts
+++ b/packages/core/src/store/initialState.ts
@@ -48,6 +48,7 @@ const initialState: ReactFlowStore = {
   nodesConnectable: true,
   nodesFocusable: true,
   edgesFocusable: true,
+  edgesUpdatable: false,
   elementsSelectable: true,
   elevateNodesOnSelect: true,
   fitViewOnInit: false,
diff --git a/packages/core/src/types/general.ts b/packages/core/src/types/general.ts
index fab391d0..fec29371 100644
--- a/packages/core/src/types/general.ts
+++ b/packages/core/src/types/general.ts
@@ -183,6 +183,7 @@ export type ReactFlowStore = {
   nodesConnectable: boolean;
   nodesFocusable: boolean;
   edgesFocusable: boolean;
+  edgesUpdatable: boolean;
   elementsSelectable: boolean;
   elevateNodesOnSelect: boolean;
 

From b06629e75e6c3cd0ad30b69bd0a5ae23b28e116b Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 24 Mar 2023 22:04:21 +0100
Subject: [PATCH 23/32] feat(core): allow setting edges updatable to bool,
 `source` or `target`

---
 .../core/src/components/Edges/wrapEdge.tsx    | 44 +++++++++----------
 .../core/src/container/EdgeRenderer/index.tsx |  5 ++-
 packages/core/src/types/edges.ts              |  1 +
 3 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/packages/core/src/components/Edges/wrapEdge.tsx b/packages/core/src/components/Edges/wrapEdge.tsx
index 607f2c5a..a5014af9 100644
--- a/packages/core/src/components/Edges/wrapEdge.tsx
+++ b/packages/core/src/components/Edges/wrapEdge.tsx
@@ -55,6 +55,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
     rfId,
     ariaLabel,
     isFocusable,
+    isUpdatable,
     pathOptions,
     interactionWidth,
   }: WrapEdgeProps): JSX.Element | null => {
@@ -138,7 +139,6 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
     const onEdgeUpdaterMouseOut = () => setUpdateHover(false);
 
     const inactive = !elementsSelectable && !onClick;
-    const handleEdgeUpdate = typeof onEdgeUpdate !== 'undefined';
 
     const onKeyDown = (event: KeyboardEvent) => {
       if (elementSelectionKeys.includes(event.key) && elementsSelectable) {
@@ -205,28 +205,28 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
             interactionWidth={interactionWidth}
           />
         )}
-        {handleEdgeUpdate && (
+        {isUpdatable && (
           <>
-            <EdgeAnchor
-              position={sourcePosition}
-              centerX={sourceX}
-              centerY={sourceY}
-              radius={edgeUpdaterRadius}
-              onMouseDown={onEdgeUpdaterSourceMouseDown}
-              onMouseEnter={onEdgeUpdaterMouseEnter}
-              onMouseOut={onEdgeUpdaterMouseOut}
-              type="source"
-            />
-            <EdgeAnchor
-              position={targetPosition}
-              centerX={targetX}
-              centerY={targetY}
-              radius={edgeUpdaterRadius}
-              onMouseDown={onEdgeUpdaterTargetMouseDown}
-              onMouseEnter={onEdgeUpdaterMouseEnter}
-              onMouseOut={onEdgeUpdaterMouseOut}
-              type="target"
-            />
+            {isUpdatable === 'source' && <EdgeAnchor
+                position={sourcePosition}
+                centerX={sourceX}
+                centerY={sourceY}
+                radius={edgeUpdaterRadius}
+                onMouseDown={onEdgeUpdaterSourceMouseDown}
+                onMouseEnter={onEdgeUpdaterMouseEnter}
+                onMouseOut={onEdgeUpdaterMouseOut}
+                type="source"
+            />}
+            {isUpdatable === 'target' && <EdgeAnchor
+                position={targetPosition}
+                centerX={targetX}
+                centerY={targetY}
+                radius={edgeUpdaterRadius}
+                onMouseDown={onEdgeUpdaterTargetMouseDown}
+                onMouseEnter={onEdgeUpdaterMouseEnter}
+                onMouseOut={onEdgeUpdaterMouseOut}
+                type="target"
+            />}
           </>
         )}
       </g>
diff --git a/packages/core/src/container/EdgeRenderer/index.tsx b/packages/core/src/container/EdgeRenderer/index.tsx
index 09b8f0c6..26a12c1c 100644
--- a/packages/core/src/container/EdgeRenderer/index.tsx
+++ b/packages/core/src/container/EdgeRenderer/index.tsx
@@ -39,6 +39,7 @@ type EdgeRendererProps = Pick<
 const selector = (s: ReactFlowState) => ({
   nodesConnectable: s.nodesConnectable,
   edgesFocusable: s.edgesFocusable,
+  edgesUpdatable: s.edgesUpdatable,
   elementsSelectable: s.elementsSelectable,
   width: s.width,
   height: s.height,
@@ -66,7 +67,7 @@ const EdgeRenderer = ({
   onEdgeUpdateEnd,
   children,
 }: EdgeRendererProps) => {
-  const { edgesFocusable, elementsSelectable, width, height, connectionMode, nodeInternals, onError } = useStore(
+  const { edgesFocusable, edgesUpdatable, elementsSelectable, width, height, connectionMode, nodeInternals, onError } = useStore(
     selector,
     shallow
   );
@@ -114,6 +115,7 @@ const EdgeRenderer = ({
               const sourcePosition = sourceHandle?.position || Position.Bottom;
               const targetPosition = targetHandle?.position || Position.Top;
               const isFocusable = !!(edge.focusable || (edgesFocusable && typeof edge.focusable === 'undefined'));
+              const isUpdatable = edge.updatable || (edgesUpdatable && typeof edge.updatable === 'undefined');
 
               if (!sourceHandle || !targetHandle) {
                 onError?.('008', errorMessages['error008'](sourceHandle, edge));
@@ -173,6 +175,7 @@ const EdgeRenderer = ({
                   rfId={rfId}
                   ariaLabel={edge.ariaLabel}
                   isFocusable={isFocusable}
+                  isUpdatable={isUpdatable}
                   pathOptions={'pathOptions' in edge ? edge.pathOptions : undefined}
                   interactionWidth={edge.interactionWidth}
                 />
diff --git a/packages/core/src/types/edges.ts b/packages/core/src/types/edges.ts
index 01f73a86..1a21b377 100644
--- a/packages/core/src/types/edges.ts
+++ b/packages/core/src/types/edges.ts
@@ -91,6 +91,7 @@ export type WrapEdgeProps<T = any> = Omit<Edge<T>, 'sourceHandle' | 'targetHandl
   onEdgeUpdateEnd?: (event: MouseEvent | TouchEvent, edge: Edge, handleType: HandleType) => void;
   rfId?: string;
   isFocusable: boolean;
+  isUpdatable: EdgeUpdatable;
   pathOptions?: BezierPathOptions | SmoothStepPathOptions;
 };
 

From 449c3055e0e7e8d56ef845029070ff522049dec5 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 24 Mar 2023 22:08:05 +0100
Subject: [PATCH 24/32] chore(core): cleanup

---
 packages/core/src/components/Edges/wrapEdge.tsx    | 12 ++++++++----
 packages/core/src/container/EdgeRenderer/index.tsx |  2 +-
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/core/src/components/Edges/wrapEdge.tsx b/packages/core/src/components/Edges/wrapEdge.tsx
index a5014af9..cb7d987f 100644
--- a/packages/core/src/components/Edges/wrapEdge.tsx
+++ b/packages/core/src/components/Edges/wrapEdge.tsx
@@ -207,7 +207,8 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
         )}
         {isUpdatable && (
           <>
-            {isUpdatable === 'source' && <EdgeAnchor
+            {(isUpdatable === 'source' || isUpdatable === true) && (
+              <EdgeAnchor
                 position={sourcePosition}
                 centerX={sourceX}
                 centerY={sourceY}
@@ -216,8 +217,10 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
                 onMouseEnter={onEdgeUpdaterMouseEnter}
                 onMouseOut={onEdgeUpdaterMouseOut}
                 type="source"
-            />}
-            {isUpdatable === 'target' && <EdgeAnchor
+              />
+            )}
+            {(isUpdatable === 'target' || isUpdatable === true) && (
+              <EdgeAnchor
                 position={targetPosition}
                 centerX={targetX}
                 centerY={targetY}
@@ -226,7 +229,8 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
                 onMouseEnter={onEdgeUpdaterMouseEnter}
                 onMouseOut={onEdgeUpdaterMouseOut}
                 type="target"
-            />}
+              />
+            )}
           </>
         )}
       </g>
diff --git a/packages/core/src/container/EdgeRenderer/index.tsx b/packages/core/src/container/EdgeRenderer/index.tsx
index 26a12c1c..ed32e62b 100644
--- a/packages/core/src/container/EdgeRenderer/index.tsx
+++ b/packages/core/src/container/EdgeRenderer/index.tsx
@@ -115,7 +115,7 @@ const EdgeRenderer = ({
               const sourcePosition = sourceHandle?.position || Position.Bottom;
               const targetPosition = targetHandle?.position || Position.Top;
               const isFocusable = !!(edge.focusable || (edgesFocusable && typeof edge.focusable === 'undefined'));
-              const isUpdatable = edge.updatable || (edgesUpdatable && typeof edge.updatable === 'undefined');
+              const isUpdatable = edge.updatable || typeof onEdgeUpdate !== 'undefined' || (edgesUpdatable && typeof edge.updatable === 'undefined');
 
               if (!sourceHandle || !targetHandle) {
                 onError?.('008', errorMessages['error008'](sourceHandle, edge));

From 5f2f5db5199d09cd2a04273957a85fd6b76025ea Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 24 Mar 2023 22:23:28 +0100
Subject: [PATCH 25/32] chore(examples): update updatable edge example

---
 .../src/examples/UpdatableEdge/index.tsx      | 41 ++++++++++++++++++-
 1 file changed, 39 insertions(+), 2 deletions(-)

diff --git a/examples/vite-app/src/examples/UpdatableEdge/index.tsx b/examples/vite-app/src/examples/UpdatableEdge/index.tsx
index 51760701..f9a109d1 100644
--- a/examples/vite-app/src/examples/UpdatableEdge/index.tsx
+++ b/examples/vite-app/src/examples/UpdatableEdge/index.tsx
@@ -36,7 +36,7 @@ const initialNodes: Node[] = [
         </>
       ),
     },
-    position: { x: 100, y: 100 },
+    position: { x: 75, y: 0 },
   },
   {
     id: '3',
@@ -55,9 +55,46 @@ const initialNodes: Node[] = [
       width: 180,
     },
   },
+  {
+    id: '4',
+    data: {
+      label: (
+        <>
+          Node <strong>D</strong>
+        </>
+      ),
+    },
+    position: { x: -75, y: 100 },
+  },
+  {
+    id: '5',
+    data: {
+      label: (
+        <>
+          Node <strong>E</strong>
+        </>
+      ),
+    },
+    position: { x: 150, y: 100 },
+  },
+  {
+    id: '6',
+    data: {
+      label: (
+        <>
+          Node <strong>F</strong>
+        </>
+      ),
+    },
+    position: { x: 150, y: 250 },
+  },
 ];
 
-const initialEdges = [{ id: 'e1-2', source: '1', target: '2', label: 'This is a draggable edge' }];
+const initialEdges: Edge[] = [
+  { id: 'e1-3', source: '1', target: '3', label: 'This edge can only be updated from source', updatable: 'source' },
+  { id: 'e2-4', source: '2', target: '4', label: 'This edge can only be updated from target', updatable: 'target' },
+  { id: 'e5-6', source: '5', target: '6', label: 'This edge can be updated from both sides' },
+];
 
 const onInit = (reactFlowInstance: ReactFlowInstance) => reactFlowInstance.fitView();
 const onEdgeUpdateStart = (_: ReactMouseEvent, edge: Edge, handleType: HandleType) =>

From 395a1586c3a268bfacd4a0be58e0126674d17644 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 27 Mar 2023 12:56:57 +0200
Subject: [PATCH 26/32] refactor(handles): add connectionStart and
 connectionEnd handle to store, cleanup

---
 .../examples/Validation/ConnectionStatus.tsx  | 28 +++++----
 .../src/examples/Validation/index.tsx         |  2 +-
 .../core/src/components/Handle/handler.ts     | 14 +++--
 packages/core/src/components/Handle/index.tsx | 60 ++++++++++++-------
 packages/core/src/components/Handle/utils.ts  | 12 +++-
 packages/core/src/store/index.ts              |  4 +-
 packages/core/src/store/initialState.ts       |  4 +-
 packages/core/src/types/general.ts            | 10 ++--
 packages/core/src/types/handles.ts            | 17 +++---
 9 files changed, 94 insertions(+), 57 deletions(-)

diff --git a/examples/vite-app/src/examples/Validation/ConnectionStatus.tsx b/examples/vite-app/src/examples/Validation/ConnectionStatus.tsx
index 4102b9a7..43cdb5bf 100644
--- a/examples/vite-app/src/examples/Validation/ConnectionStatus.tsx
+++ b/examples/vite-app/src/examples/Validation/ConnectionStatus.tsx
@@ -6,15 +6,21 @@ import styles from './validation.module.css';
 const selector = (state: ReactFlowState) => ({
   connectionPosition: state.connectionPosition,
   connectionStatus: state.connectionStatus,
-  connectionNodeId: state.connectionNodeId,
-  connectionTargetNodeId: state.connectionTargetNodeId,
+  connectionStartNodeId: state.connectionStartHandle?.nodeId,
+  connectionStartHandleType: state.connectionStartHandle?.type,
+  connectionEndNodeId: state.connectionEndHandle?.nodeId,
+  connectionEndHandleType: state.connectionEndHandle?.type,
 });
 
 function ConnectionStatus() {
-  const { connectionPosition, connectionStatus, connectionNodeId, connectionTargetNodeId } = useStore(
-    selector,
-    shallow
-  );
+  const {
+    connectionPosition,
+    connectionStatus,
+    connectionStartNodeId,
+    connectionStartHandleType,
+    connectionEndNodeId,
+    connectionEndHandleType,
+  } = useStore(selector, shallow);
 
   if (!connectionPosition) {
     return null;
@@ -22,15 +28,17 @@ function ConnectionStatus() {
 
   return (
     <div className={styles.connectionstatus}>
-      {connectionNodeId ? (
+      {connectionStartNodeId ? (
         <>
           <div>
             <strong>connection info</strong>
           </div>
           <div>position: {JSON.stringify(connectionPosition)}</div>
-          <div>status: {JSON.stringify(connectionStatus)}</div>
-          <div>source node id: {JSON.stringify(connectionNodeId)}</div>
-          <div>target node id: {JSON.stringify(connectionTargetNodeId)}</div>
+          <div>status: {connectionStatus}</div>
+          <div>from node id: {connectionStartNodeId}</div>
+          <div>from handle type: {connectionStartHandleType}</div>
+          <div>to node id: {connectionEndNodeId}</div>
+          <div>to handle type: {connectionEndHandleType}</div>
         </>
       ) : (
         'no connection data'
diff --git a/examples/vite-app/src/examples/Validation/index.tsx b/examples/vite-app/src/examples/Validation/index.tsx
index ed2b5419..f385083b 100644
--- a/examples/vite-app/src/examples/Validation/index.tsx
+++ b/examples/vite-app/src/examples/Validation/index.tsx
@@ -38,7 +38,7 @@ const CustomInput: FC<NodeProps> = () => (
 
 const CustomNode: FC<NodeProps> = ({ id }) => (
   <>
-    <Handle type="target" position={Position.Left} />
+    <Handle type="target" position={Position.Left} isConnectableStart={false} />
     <div>{id}</div>
     <Handle type="source" position={Position.Right} />
   </>
diff --git a/packages/core/src/components/Handle/handler.ts b/packages/core/src/components/Handle/handler.ts
index 3ad191b8..9825295b 100644
--- a/packages/core/src/components/Handle/handler.ts
+++ b/packages/core/src/components/Handle/handler.ts
@@ -89,12 +89,17 @@ export function handlePointerDown({
 
   setState({
     connectionPosition,
+    connectionStatus: null,
+    // connectionNodeId etc will be removed in the next major in favor of connectionStartHandle
     connectionNodeId: nodeId,
     connectionHandleId: handleId,
     connectionHandleType: handleType,
-    connectionStatus: null,
-    connectionTargetNodeId: null,
-    connectionTargetHandleId: null,
+    connectionStartHandle: {
+      nodeId,
+      handleId,
+      type: handleType,
+    },
+    connectionEndHandle: null,
   });
 
   onConnectStart?.(event, { nodeId, handleId, handleType });
@@ -141,8 +146,7 @@ export function handlePointerDown({
             )
           : connectionPosition,
       connectionStatus: getConnectionStatus(!!prevClosestHandle, isValid),
-      connectionTargetNodeId: connection.target,
-      connectionTargetHandleId: connection.targetHandle,
+      connectionEndHandle: result.endHandle,
     });
 
     if (!prevClosestHandle && !isValid && !handleDomNode) {
diff --git a/packages/core/src/components/Handle/index.tsx b/packages/core/src/components/Handle/index.tsx
index 1dc6df1c..dcd95d7c 100644
--- a/packages/core/src/components/Handle/index.tsx
+++ b/packages/core/src/components/Handle/index.tsx
@@ -7,8 +7,7 @@ import { useNodeId } from '../../contexts/NodeIdContext';
 import { handlePointerDown } from './handler';
 import { getHostForElement, isMouseEvent } from '../../utils';
 import { addEdge } from '../../utils/graph';
-import { Position } from '../../types';
-import type { HandleProps, Connection, ReactFlowState } from '../../types';
+import { type HandleProps, type Connection, type ReactFlowState, HandleType, Position } from '../../types';
 import { isValidHandle } from './utils';
 import { errorMessages } from '../../contants';
 
@@ -22,6 +21,23 @@ const selector = (s: ReactFlowState) => ({
   noPanClassName: s.noPanClassName,
 });
 
+const connectingSelector =
+  (nodeId: string | null, handleId: string | null, type: HandleType) => (state: ReactFlowState) => {
+    const {
+      connectionStartHandle: startHandle,
+      connectionEndHandle: endHandle,
+      connectionClickStartHandle: clickHandle,
+    } = state;
+
+    return {
+      connecting:
+        (startHandle?.nodeId === nodeId && startHandle?.handleId === handleId && startHandle?.type === type) ||
+        (endHandle?.nodeId === nodeId && endHandle?.handleId === handleId && endHandle?.type === type),
+      clickConnecting:
+        clickHandle?.nodeId === nodeId && clickHandle?.handleId === handleId && clickHandle?.type === type,
+    };
+  };
+
 const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
   (
     {
@@ -41,20 +57,17 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
     },
     ref
   ) => {
+    const handleId = id || null;
+    const isTarget = type === 'target';
     const store = useStoreApi();
     const nodeId = useNodeId();
+    const { connectOnClick, noPanClassName } = useStore(selector, shallow);
+    const { connecting, clickConnecting } = useStore(connectingSelector(nodeId, handleId, type));
 
     if (!nodeId) {
       store.getState().onError?.('010', errorMessages['error010']());
-
-      return null;
     }
 
-    const { connectionStartHandle, connectOnClick, noPanClassName } = useStore(selector, shallow);
-
-    const handleId = id || null;
-    const isTarget = type === 'target';
-
     const onConnectExtended = (params: Connection) => {
       const { defaultEdgeOptions, onConnect: onConnectAction, hasDefaultEdges } = store.getState();
 
@@ -72,6 +85,10 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
     };
 
     const onPointerDown = (event: ReactMouseEvent<HTMLDivElement> | ReactTouchEvent<HTMLDivElement>) => {
+      if (!nodeId) {
+        return;
+      }
+
       const isMouseTriggered = isMouseEvent(event);
 
       if (isConnectableStart && ((isMouseTriggered && event.button === 0) || !isMouseTriggered)) {
@@ -98,17 +115,18 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
       const {
         onClickConnectStart,
         onClickConnectEnd,
+        connectionClickStartHandle,
         connectionMode,
         isValidConnection: isValidConnectionStore,
       } = store.getState();
 
-      if (!connectionStartHandle && !isConnectableStart) {
+      if (!nodeId || (!connectionClickStartHandle && !isConnectableStart)) {
         return;
       }
 
-      if (!connectionStartHandle) {
+      if (!connectionClickStartHandle) {
         onClickConnectStart?.(event, { nodeId, handleId, handleType: type });
-        store.setState({ connectionStartHandle: { nodeId, type, handleId } });
+        store.setState({ connectionClickStartHandle: { nodeId, type, handleId } });
         return;
       }
 
@@ -122,9 +140,9 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
           type,
         },
         connectionMode,
-        connectionStartHandle.nodeId,
-        connectionStartHandle.handleId || null,
-        connectionStartHandle.type,
+        connectionClickStartHandle.nodeId,
+        connectionClickStartHandle.handleId || null,
+        connectionClickStartHandle.type,
         isValidConnectionHandler,
         doc
       );
@@ -135,14 +153,9 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
 
       onClickConnectEnd?.(event as unknown as MouseEvent);
 
-      store.setState({ connectionStartHandle: null });
+      store.setState({ connectionClickStartHandle: null });
     };
 
-    const connecting =
-      connectionStartHandle?.nodeId === nodeId &&
-      connectionStartHandle?.handleId === handleId &&
-      connectionStartHandle?.type === type;
-
     return (
       <div
         data-handleid={handleId}
@@ -161,9 +174,10 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
             connectable: isConnectable,
             connectablestart: isConnectableStart,
             connectableend: isConnectableEnd,
-            connecting,
+            connecting: clickConnecting,
+            // this class is used to style the handle when the user is connecting
             connectionindicator:
-              (isConnectable && isConnectableStart && !connecting) || (isConnectableEnd && connecting),
+              isConnectable && ((isConnectableStart && !connecting) || (isConnectableEnd && connecting)),
           },
         ])}
         onMouseDown={onPointerDown}
diff --git a/packages/core/src/components/Handle/utils.ts b/packages/core/src/components/Handle/utils.ts
index 2825bb0e..b8e8cf6a 100644
--- a/packages/core/src/components/Handle/utils.ts
+++ b/packages/core/src/components/Handle/utils.ts
@@ -1,6 +1,6 @@
 import { MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent } from 'react';
 
-import { ConnectionMode, ConnectionStatus } from '../../types';
+import { ConnectingHandle, ConnectionMode, ConnectionStatus } from '../../types';
 import { getEventPosition, internalsSymbol } from '../../utils';
 import type { Connection, HandleType, XYPosition, Node, NodeHandleBounds } from '../../types';
 
@@ -59,6 +59,7 @@ type Result = {
   handleDomNode: Element | null;
   isValid: boolean;
   connection: Connection;
+  endHandle: ConnectingHandle | null;
 };
 
 const nullConnection: Connection = { source: null, target: null, sourceHandle: null, targetHandle: null };
@@ -70,7 +71,7 @@ export function isValidHandle(
   connectionMode: ConnectionMode,
   fromNodeId: string,
   fromHandleId: string | null,
-  fromType: string,
+  fromType: HandleType,
   isValidConnection: ValidConnectionFunc,
   doc: Document | ShadowRoot
 ) {
@@ -86,6 +87,7 @@ export function isValidHandle(
     handleDomNode: handleToCheck,
     isValid: false,
     connection: nullConnection,
+    endHandle: null,
   };
 
   if (handleToCheck) {
@@ -113,6 +115,12 @@ export function isValidHandle(
         : handleNodeId !== fromNodeId || handleId !== fromHandleId);
 
     if (isValid) {
+      result.endHandle = {
+        nodeId: handleNodeId as string,
+        handleId,
+        type: handleType as HandleType,
+      };
+
       result.isValid = isValidConnection(connection);
     }
   }
diff --git a/packages/core/src/store/index.ts b/packages/core/src/store/index.ts
index 58cc5080..f4365d45 100644
--- a/packages/core/src/store/index.ts
+++ b/packages/core/src/store/index.ts
@@ -275,8 +275,8 @@ const createRFStore = () =>
         connectionHandleId: initialState.connectionHandleId,
         connectionHandleType: initialState.connectionHandleType,
         connectionStatus: initialState.connectionStatus,
-        connectionTargetNodeId: initialState.connectionTargetNodeId,
-        connectionTargetHandleId: initialState.connectionTargetHandleId,
+        connectionStartHandle: initialState.connectionStartHandle,
+        connectionEndHandle: initialState.connectionEndHandle,
       }),
     reset: () => set({ ...initialState }),
   }));
diff --git a/packages/core/src/store/initialState.ts b/packages/core/src/store/initialState.ts
index 2722038d..8c4a5d76 100644
--- a/packages/core/src/store/initialState.ts
+++ b/packages/core/src/store/initialState.ts
@@ -31,8 +31,6 @@ const initialState: ReactFlowStore = {
   connectionNodeId: null,
   connectionHandleId: null,
   connectionHandleType: 'source',
-  connectionTargetNodeId: null,
-  connectionTargetHandleId: null,
   connectionPosition: { x: 0, y: 0 },
   connectionStatus: null,
   connectionMode: ConnectionMode.Strict,
@@ -57,6 +55,8 @@ const initialState: ReactFlowStore = {
   multiSelectionActive: false,
 
   connectionStartHandle: null,
+  connectionEndHandle: null,
+  connectionClickStartHandle: null,
   connectOnClick: true,
 
   ariaLiveMessage: '',
diff --git a/packages/core/src/types/general.ts b/packages/core/src/types/general.ts
index fab391d0..aeb33632 100644
--- a/packages/core/src/types/general.ts
+++ b/packages/core/src/types/general.ts
@@ -21,7 +21,7 @@ import type {
   NodeOrigin,
 } from './nodes';
 import type { Edge, EdgeProps, WrapEdgeProps } from './edges';
-import type { HandleType, StartHandle } from './handles';
+import type { HandleType, ConnectingHandle } from './handles';
 import type { DefaultEdgeOptions } from '.';
 import type { ReactFlowInstance } from './instance';
 
@@ -167,10 +167,9 @@ export type ReactFlowStore = {
   userSelectionActive: boolean;
   userSelectionRect: SelectionRect | null;
 
+  // @todo remove this in next major version in favor of connectionStartHandle
   connectionNodeId: string | null;
   connectionHandleId: string | null;
-  connectionTargetNodeId: string | null;
-  connectionTargetHandleId: string | null;
   connectionHandleType: HandleType | null;
   connectionPosition: XYPosition;
   connectionStatus: ConnectionStatus | null;
@@ -188,7 +187,10 @@ export type ReactFlowStore = {
 
   multiSelectionActive: boolean;
 
-  connectionStartHandle: StartHandle | null;
+  connectionStartHandle: ConnectingHandle | null;
+  connectionEndHandle: ConnectingHandle | null;
+  // @todo this is only used for the click connection - we might remove this in the next major version
+  connectionClickStartHandle: ConnectingHandle | null;
 
   onNodeDragStart?: NodeDragHandler;
   onNodeDrag?: NodeDragHandler;
diff --git a/packages/core/src/types/handles.ts b/packages/core/src/types/handles.ts
index aff196f6..7e40d1e5 100644
--- a/packages/core/src/types/handles.ts
+++ b/packages/core/src/types/handles.ts
@@ -2,18 +2,19 @@ import type { XYPosition, Position, Dimensions, OnConnect, Connection } from '.'
 
 export type HandleType = 'source' | 'target';
 
-export interface HandleElement extends XYPosition, Dimensions {
-  id?: string | null;
-  position: Position;
-}
+export type HandleElement = XYPosition &
+  Dimensions & {
+    id?: string | null;
+    position: Position;
+  };
 
-export interface StartHandle {
+export type ConnectingHandle = {
   nodeId: string;
   type: HandleType;
   handleId?: string | null;
-}
+};
 
-export interface HandleProps {
+export type HandleProps = {
   type: HandleType;
   position: Position;
   isConnectable?: boolean;
@@ -22,4 +23,4 @@ export interface HandleProps {
   onConnect?: OnConnect;
   isValidConnection?: (connection: Connection) => boolean;
   id?: string;
-}
+};

From 4d97a0ed168ce643fc0c99fa6b47cf1296d66065 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 27 Mar 2023 12:58:42 +0200
Subject: [PATCH 27/32] chore(changeset): add

---
 .changeset/thick-needles-march.md | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 .changeset/thick-needles-march.md

diff --git a/.changeset/thick-needles-march.md b/.changeset/thick-needles-march.md
new file mode 100644
index 00000000..26d0890e
--- /dev/null
+++ b/.changeset/thick-needles-march.md
@@ -0,0 +1,7 @@
+---
+'@reactflow/background': minor
+'@reactflow/core': minor
+'@reactflow/minimap': minor
+---
+
+Handles: add isConnectableStart and isConnectableEnd props

From 65b2d9ccefadc23763720369733170d56827c36b Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 27 Mar 2023 16:53:55 +0200
Subject: [PATCH 28/32] refactor(edgesUpdatable): pass to store

---
 packages/core/src/components/StoreUpdater/index.tsx |  3 +++
 packages/core/src/container/EdgeRenderer/index.tsx  | 10 +++++-----
 packages/core/src/container/ReactFlow/index.tsx     |  2 ++
 packages/core/src/store/initialState.ts             |  2 +-
 packages/core/src/types/component-props.ts          |  1 +
 packages/core/src/types/edges.ts                    |  2 +-
 6 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/packages/core/src/components/StoreUpdater/index.tsx b/packages/core/src/components/StoreUpdater/index.tsx
index 4491bb94..e31fba17 100644
--- a/packages/core/src/components/StoreUpdater/index.tsx
+++ b/packages/core/src/components/StoreUpdater/index.tsx
@@ -20,6 +20,7 @@ type StoreUpdaterProps = Pick<
   | 'nodesConnectable'
   | 'nodesFocusable'
   | 'edgesFocusable'
+  | 'edgesUpdatable'
   | 'minZoom'
   | 'maxZoom'
   | 'nodeExtent'
@@ -98,6 +99,7 @@ const StoreUpdater = ({
   nodesConnectable,
   nodesFocusable,
   edgesFocusable,
+  edgesUpdatable,
   elevateNodesOnSelect,
   minZoom,
   maxZoom,
@@ -162,6 +164,7 @@ const StoreUpdater = ({
   useDirectStoreUpdater('nodesConnectable', nodesConnectable, store.setState);
   useDirectStoreUpdater('nodesFocusable', nodesFocusable, store.setState);
   useDirectStoreUpdater('edgesFocusable', edgesFocusable, store.setState);
+  useDirectStoreUpdater('edgesUpdatable', edgesUpdatable, store.setState);
   useDirectStoreUpdater('elementsSelectable', elementsSelectable, store.setState);
   useDirectStoreUpdater('elevateNodesOnSelect', elevateNodesOnSelect, store.setState);
   useDirectStoreUpdater('snapToGrid', snapToGrid, store.setState);
diff --git a/packages/core/src/container/EdgeRenderer/index.tsx b/packages/core/src/container/EdgeRenderer/index.tsx
index ed32e62b..9f7a2f1b 100644
--- a/packages/core/src/container/EdgeRenderer/index.tsx
+++ b/packages/core/src/container/EdgeRenderer/index.tsx
@@ -67,10 +67,8 @@ const EdgeRenderer = ({
   onEdgeUpdateEnd,
   children,
 }: EdgeRendererProps) => {
-  const { edgesFocusable, edgesUpdatable, elementsSelectable, width, height, connectionMode, nodeInternals, onError } = useStore(
-    selector,
-    shallow
-  );
+  const { edgesFocusable, edgesUpdatable, elementsSelectable, width, height, connectionMode, nodeInternals, onError } =
+    useStore(selector, shallow);
   const edgeTree = useVisibleEdges(onlyRenderVisibleElements, nodeInternals, elevateEdgesOnSelect);
 
   if (!width) {
@@ -115,7 +113,9 @@ const EdgeRenderer = ({
               const sourcePosition = sourceHandle?.position || Position.Bottom;
               const targetPosition = targetHandle?.position || Position.Top;
               const isFocusable = !!(edge.focusable || (edgesFocusable && typeof edge.focusable === 'undefined'));
-              const isUpdatable = edge.updatable || typeof onEdgeUpdate !== 'undefined' || (edgesUpdatable && typeof edge.updatable === 'undefined');
+              const isUpdatable =
+                typeof onEdgeUpdate !== 'undefined' &&
+                (edge.updatable || (edgesUpdatable && typeof edge.updatable === 'undefined'));
 
               if (!sourceHandle || !targetHandle) {
                 onError?.('008', errorMessages['error008'](sourceHandle, edge));
diff --git a/packages/core/src/container/ReactFlow/index.tsx b/packages/core/src/container/ReactFlow/index.tsx
index 9fa23f9c..1d36123d 100644
--- a/packages/core/src/container/ReactFlow/index.tsx
+++ b/packages/core/src/container/ReactFlow/index.tsx
@@ -115,6 +115,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
       nodesFocusable,
       nodeOrigin = initNodeOrigin,
       edgesFocusable,
+      edgesUpdatable,
       elementsSelectable,
       defaultViewport = initDefaultViewport,
       minZoom = 0.5,
@@ -266,6 +267,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
             nodesConnectable={nodesConnectable}
             nodesFocusable={nodesFocusable}
             edgesFocusable={edgesFocusable}
+            edgesUpdatable={edgesUpdatable}
             elementsSelectable={elementsSelectable}
             elevateNodesOnSelect={elevateNodesOnSelect}
             minZoom={minZoom}
diff --git a/packages/core/src/store/initialState.ts b/packages/core/src/store/initialState.ts
index 92192e9e..0223df7c 100644
--- a/packages/core/src/store/initialState.ts
+++ b/packages/core/src/store/initialState.ts
@@ -48,7 +48,7 @@ const initialState: ReactFlowStore = {
   nodesConnectable: true,
   nodesFocusable: true,
   edgesFocusable: true,
-  edgesUpdatable: false,
+  edgesUpdatable: true,
   elementsSelectable: true,
   elevateNodesOnSelect: true,
   fitViewOnInit: false,
diff --git a/packages/core/src/types/component-props.ts b/packages/core/src/types/component-props.ts
index cae9da3b..46364257 100644
--- a/packages/core/src/types/component-props.ts
+++ b/packages/core/src/types/component-props.ts
@@ -112,6 +112,7 @@ export type ReactFlowProps = HTMLAttributes<HTMLDivElement> & {
   nodesFocusable?: boolean;
   nodeOrigin?: NodeOrigin;
   edgesFocusable?: boolean;
+  edgesUpdatable?: boolean;
   initNodeOrigin?: NodeOrigin;
   elementsSelectable?: boolean;
   selectNodesOnDrag?: boolean;
diff --git a/packages/core/src/types/edges.ts b/packages/core/src/types/edges.ts
index 1a21b377..7358b0e8 100644
--- a/packages/core/src/types/edges.ts
+++ b/packages/core/src/types/edges.ts
@@ -39,7 +39,7 @@ type DefaultEdge<T = any> = {
   updatable?: EdgeUpdatable;
 } & EdgeLabelOptions;
 
-export type EdgeUpdatable = boolean | 'target' | 'source';
+export type EdgeUpdatable = boolean | HandleType;
 
 export type SmoothStepPathOptions = {
   offset?: number;

From c22e1c28c5555a638c2a8e82c3bfc986b3965d36 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 27 Mar 2023 16:55:24 +0200
Subject: [PATCH 29/32] chore(changeset): add

---
 .changeset/violet-houses-argue.md | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 .changeset/violet-houses-argue.md

diff --git a/.changeset/violet-houses-argue.md b/.changeset/violet-houses-argue.md
new file mode 100644
index 00000000..0ae30058
--- /dev/null
+++ b/.changeset/violet-houses-argue.md
@@ -0,0 +1,7 @@
+---
+'@reactflow/background': minor
+'@reactflow/core': minor
+'@reactflow/minimap': minor
+---
+
+edges: add updatable option

From 6c4af37f7c8ad75631e16d3a33dce527b7d39406 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 28 Mar 2023 12:03:47 +0200
Subject: [PATCH 30/32] refactor(reactflow): add node resizer package

---
 examples/vite-app/src/examples/NodeResizer/CustomResizer.tsx | 4 +---
 .../vite-app/src/examples/NodeResizer/DefaultResizer.tsx     | 5 +----
 .../vite-app/src/examples/NodeResizer/HorizontalResizer.tsx  | 5 +----
 .../vite-app/src/examples/NodeResizer/VerticalResizer.tsx    | 5 +----
 examples/vite-app/src/examples/NodeResizer/index.tsx         | 2 ++
 packages/reactflow/package.json                              | 1 +
 packages/reactflow/src/base.css                              | 1 +
 packages/reactflow/src/index.ts                              | 1 +
 packages/reactflow/src/style.css                             | 1 +
 pnpm-lock.yaml                                               | 2 ++
 10 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/examples/vite-app/src/examples/NodeResizer/CustomResizer.tsx b/examples/vite-app/src/examples/NodeResizer/CustomResizer.tsx
index a36d9f18..a61b3c3c 100644
--- a/examples/vite-app/src/examples/NodeResizer/CustomResizer.tsx
+++ b/examples/vite-app/src/examples/NodeResizer/CustomResizer.tsx
@@ -1,8 +1,6 @@
 import { memo, FC } from 'react';
-import { Handle, Position, NodeProps } from 'reactflow';
+import { Handle, Position, NodeProps, NodeResizeControl } from 'reactflow';
 
-import { NodeResizeControl } from '@reactflow/node-resizer';
-import '@reactflow/node-resizer/dist/style.css';
 import ResizeIcon from './ResizeIcon';
 
 const controlStyle = {
diff --git a/examples/vite-app/src/examples/NodeResizer/DefaultResizer.tsx b/examples/vite-app/src/examples/NodeResizer/DefaultResizer.tsx
index 3d9649a5..6ccd655a 100644
--- a/examples/vite-app/src/examples/NodeResizer/DefaultResizer.tsx
+++ b/examples/vite-app/src/examples/NodeResizer/DefaultResizer.tsx
@@ -1,8 +1,5 @@
 import { memo, FC } from 'react';
-import { Handle, Position, NodeProps } from 'reactflow';
-import { NodeResizer } from '@reactflow/node-resizer';
-
-import '@reactflow/node-resizer/dist/style.css';
+import { Handle, Position, NodeProps, NodeResizer } from 'reactflow';
 
 const DefaultResizerNode: FC<NodeProps> = ({ data, selected }) => {
   return (
diff --git a/examples/vite-app/src/examples/NodeResizer/HorizontalResizer.tsx b/examples/vite-app/src/examples/NodeResizer/HorizontalResizer.tsx
index 2798ca3f..9e89d8c6 100644
--- a/examples/vite-app/src/examples/NodeResizer/HorizontalResizer.tsx
+++ b/examples/vite-app/src/examples/NodeResizer/HorizontalResizer.tsx
@@ -1,8 +1,5 @@
 import { memo, FC } from 'react';
-import { Handle, Position, NodeProps } from 'reactflow';
-import { NodeResizeControl } from '@reactflow/node-resizer';
-
-import '@reactflow/node-resizer/dist/style.css';
+import { Handle, Position, NodeProps, NodeResizeControl } from 'reactflow';
 
 const HorizontalResizerNode: FC<NodeProps> = ({ data }) => {
   return (
diff --git a/examples/vite-app/src/examples/NodeResizer/VerticalResizer.tsx b/examples/vite-app/src/examples/NodeResizer/VerticalResizer.tsx
index a3d6515e..f1230ce1 100644
--- a/examples/vite-app/src/examples/NodeResizer/VerticalResizer.tsx
+++ b/examples/vite-app/src/examples/NodeResizer/VerticalResizer.tsx
@@ -1,8 +1,5 @@
 import { memo, FC } from 'react';
-import { Handle, Position, NodeProps } from 'reactflow';
-
-import { NodeResizeControl } from '@reactflow/node-resizer';
-import '@reactflow/node-resizer/dist/style.css';
+import { Handle, Position, NodeProps, NodeResizeControl } from 'reactflow';
 
 const CustomNode: FC<NodeProps> = ({ id, data }) => {
   return (
diff --git a/examples/vite-app/src/examples/NodeResizer/index.tsx b/examples/vite-app/src/examples/NodeResizer/index.tsx
index d94a8d8b..6eb61b3a 100644
--- a/examples/vite-app/src/examples/NodeResizer/index.tsx
+++ b/examples/vite-app/src/examples/NodeResizer/index.tsx
@@ -6,6 +6,8 @@ import CustomResizer from './CustomResizer';
 import VerticalResizer from './VerticalResizer';
 import HorizontalResizer from './HorizontalResizer';
 
+import 'reactflow/dist/style.css';
+
 const nodeTypes = {
   defaultResizer: DefaultResizer,
   customResizer: CustomResizer,
diff --git a/packages/reactflow/package.json b/packages/reactflow/package.json
index 479777d2..ab970755 100644
--- a/packages/reactflow/package.json
+++ b/packages/reactflow/package.json
@@ -39,6 +39,7 @@
     "@reactflow/controls": "workspace:*",
     "@reactflow/core": "workspace:*",
     "@reactflow/minimap": "workspace:*",
+    "@reactflow/node-resizer": "workspace:*",
     "@reactflow/node-toolbar": "workspace:*"
   },
   "peerDependencies": {
diff --git a/packages/reactflow/src/base.css b/packages/reactflow/src/base.css
index 069f6d82..9c7489c9 100644
--- a/packages/reactflow/src/base.css
+++ b/packages/reactflow/src/base.css
@@ -1,3 +1,4 @@
 @import '@reactflow/core/dist/base.css';
 @import '@reactflow/controls/dist/style.css';
 @import '@reactflow/minimap/dist/style.css';
+@import '@reactflow/node-resizer/dist/style.css';
diff --git a/packages/reactflow/src/index.ts b/packages/reactflow/src/index.ts
index 935883dc..9fefe1d5 100644
--- a/packages/reactflow/src/index.ts
+++ b/packages/reactflow/src/index.ts
@@ -3,5 +3,6 @@ export * from '@reactflow/minimap';
 export * from '@reactflow/controls';
 export * from '@reactflow/background';
 export * from '@reactflow/node-toolbar';
+export * from '@reactflow/node-resizer';
 
 export { ReactFlow as default } from '@reactflow/core';
diff --git a/packages/reactflow/src/style.css b/packages/reactflow/src/style.css
index 96c6e6a1..38e265b7 100644
--- a/packages/reactflow/src/style.css
+++ b/packages/reactflow/src/style.css
@@ -1,3 +1,4 @@
 @import '@reactflow/core/dist/style.css';
 @import '@reactflow/controls/dist/style.css';
 @import '@reactflow/minimap/dist/style.css';
+@import '@reactflow/node-resizer/dist/style.css';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3c4975fe..a977bd11 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -284,6 +284,7 @@ importers:
       '@reactflow/core': workspace:*
       '@reactflow/eslint-config': workspace:*
       '@reactflow/minimap': workspace:*
+      '@reactflow/node-resizer': workspace:^2.1.0
       '@reactflow/node-toolbar': workspace:*
       '@reactflow/rollup-config': workspace:*
       '@reactflow/tsconfig': workspace:*
@@ -296,6 +297,7 @@ importers:
       '@reactflow/controls': link:../controls
       '@reactflow/core': link:../core
       '@reactflow/minimap': link:../minimap
+      '@reactflow/node-resizer': link:../node-resizer
       '@reactflow/node-toolbar': link:../node-toolbar
     devDependencies:
       '@reactflow/eslint-config': link:../../tooling/eslint-config

From 2fb4c2c82343751ff536da262de74bd9080321b4 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 28 Mar 2023 12:06:03 +0200
Subject: [PATCH 31/32] chore(changeset): add

---
 .changeset/yellow-students-think.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/yellow-students-think.md

diff --git a/.changeset/yellow-students-think.md b/.changeset/yellow-students-think.md
new file mode 100644
index 00000000..a0715a70
--- /dev/null
+++ b/.changeset/yellow-students-think.md
@@ -0,0 +1,5 @@
+---
+'reactflow': minor
+---
+
+add node-resizer to reactflow package

From 81dfa7e6bca73395c68f9cb3a04dc73fe2092310 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 28 Mar 2023 12:43:28 +0200
Subject: [PATCH 32/32] chore(packages): bump

---
 .changeset/many-parents-applaud.md  |   5 --
 .changeset/nice-impalas-doubt.md    |   5 --
 .changeset/plenty-students-wash.md  |   5 --
 .changeset/rich-papayas-hope.md     |   5 --
 .changeset/sixty-turkeys-knock.md   |   5 --
 .changeset/thick-needles-march.md   |   7 --
 .changeset/two-walls-jam.md         |   5 --
 .changeset/violet-houses-argue.md   |   7 --
 .changeset/yellow-students-think.md |   5 --
 packages/background/CHANGELOG.md    |  11 +++
 packages/background/package.json    |   2 +-
 packages/controls/CHANGELOG.md      |   7 ++
 packages/controls/package.json      |   2 +-
 packages/core/CHANGELOG.md          |  21 +++++
 packages/core/package.json          |   2 +-
 packages/minimap/CHANGELOG.md       |  11 +++
 packages/minimap/package.json       |   2 +-
 packages/node-toolbar/CHANGELOG.md  |   7 ++
 packages/node-toolbar/package.json  |   2 +-
 packages/reactflow/CHANGELOG.md     |  39 +++++++++
 packages/reactflow/package.json     |   2 +-
 pnpm-lock.yaml                      | 118 ++++++++++++++--------------
 22 files changed, 161 insertions(+), 114 deletions(-)
 delete mode 100644 .changeset/many-parents-applaud.md
 delete mode 100644 .changeset/nice-impalas-doubt.md
 delete mode 100644 .changeset/plenty-students-wash.md
 delete mode 100644 .changeset/rich-papayas-hope.md
 delete mode 100644 .changeset/sixty-turkeys-knock.md
 delete mode 100644 .changeset/thick-needles-march.md
 delete mode 100644 .changeset/two-walls-jam.md
 delete mode 100644 .changeset/violet-houses-argue.md
 delete mode 100644 .changeset/yellow-students-think.md

diff --git a/.changeset/many-parents-applaud.md b/.changeset/many-parents-applaud.md
deleted file mode 100644
index 3c4aad42..00000000
--- a/.changeset/many-parents-applaud.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@reactflow/core': patch
----
-
-fix non-passive wheel event listener violation
diff --git a/.changeset/nice-impalas-doubt.md b/.changeset/nice-impalas-doubt.md
deleted file mode 100644
index 27d35bc6..00000000
--- a/.changeset/nice-impalas-doubt.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@reactflow/core': patch
----
-
-prefix error keys with "error"
diff --git a/.changeset/plenty-students-wash.md b/.changeset/plenty-students-wash.md
deleted file mode 100644
index 72da2068..00000000
--- a/.changeset/plenty-students-wash.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@reactflow/core': patch
----
-
-add connection result to store
diff --git a/.changeset/rich-papayas-hope.md b/.changeset/rich-papayas-hope.md
deleted file mode 100644
index 231daf67..00000000
--- a/.changeset/rich-papayas-hope.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@reactflow/minimap': minor
----
-
-add inversePan and zoomStep props
diff --git a/.changeset/sixty-turkeys-knock.md b/.changeset/sixty-turkeys-knock.md
deleted file mode 100644
index 86cac224..00000000
--- a/.changeset/sixty-turkeys-knock.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@reactflow/core': patch
----
-
-add options for useNodesInitialized, ignore hidden nodes
diff --git a/.changeset/thick-needles-march.md b/.changeset/thick-needles-march.md
deleted file mode 100644
index 26d0890e..00000000
--- a/.changeset/thick-needles-march.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-'@reactflow/background': minor
-'@reactflow/core': minor
-'@reactflow/minimap': minor
----
-
-Handles: add isConnectableStart and isConnectableEnd props
diff --git a/.changeset/two-walls-jam.md b/.changeset/two-walls-jam.md
deleted file mode 100644
index 9c2eb07a..00000000
--- a/.changeset/two-walls-jam.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@reactflow/background': patch
----
-
-add id and offset prop
diff --git a/.changeset/violet-houses-argue.md b/.changeset/violet-houses-argue.md
deleted file mode 100644
index 0ae30058..00000000
--- a/.changeset/violet-houses-argue.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-'@reactflow/background': minor
-'@reactflow/core': minor
-'@reactflow/minimap': minor
----
-
-edges: add updatable option
diff --git a/.changeset/yellow-students-think.md b/.changeset/yellow-students-think.md
deleted file mode 100644
index a0715a70..00000000
--- a/.changeset/yellow-students-think.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'reactflow': minor
----
-
-add node-resizer to reactflow package
diff --git a/packages/background/CHANGELOG.md b/packages/background/CHANGELOG.md
index ab3e23a6..60978e3d 100644
--- a/packages/background/CHANGELOG.md
+++ b/packages/background/CHANGELOG.md
@@ -1,5 +1,16 @@
 # @reactflow/background
 
+## 11.2.0
+
+### Minor Changes
+
+- [#2941](https://github.com/wbkd/react-flow/pull/2941) Thanks [@Elringus](https://github.com/Elringus)! - add `id` and `offset` props
+
+### Patch Changes
+
+- Updated dependencies [[`098eee3d`](https://github.com/wbkd/react-flow/commit/098eee3d41dabc870777b081796401ff13b5a776), [`fe8cac0a`](https://github.com/wbkd/react-flow/commit/fe8cac0adb359109e0e9eafe8b9261ba354076bb), [`4a4ca171`](https://github.com/wbkd/react-flow/commit/4a4ca171955f5c8d58b23e3ad48406f1a21dc402), [`923a54c4`](https://github.com/wbkd/react-flow/commit/923a54c481b90954806202817ba844cfa7203a38), [`4d97a0ed`](https://github.com/wbkd/react-flow/commit/4d97a0ed168ce643fc0c99fa6b47cf1296d66065), [`c22e1c28`](https://github.com/wbkd/react-flow/commit/c22e1c28c5555a638c2a8e82c3bfc986b3965d36)]:
+  - @reactflow/core@11.7.0
+
 ## 11.1.10
 
 ### Patch Changes
diff --git a/packages/background/package.json b/packages/background/package.json
index ade3b286..6f378c30 100644
--- a/packages/background/package.json
+++ b/packages/background/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@reactflow/background",
-  "version": "11.1.10",
+  "version": "11.2.0",
   "description": "Background component with different variants for React Flow",
   "keywords": [
     "react",
diff --git a/packages/controls/CHANGELOG.md b/packages/controls/CHANGELOG.md
index 167f3d80..e4815ed6 100644
--- a/packages/controls/CHANGELOG.md
+++ b/packages/controls/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @reactflow/controls
 
+## 11.1.11
+
+### Patch Changes
+
+- Updated dependencies [[`098eee3d`](https://github.com/wbkd/react-flow/commit/098eee3d41dabc870777b081796401ff13b5a776), [`fe8cac0a`](https://github.com/wbkd/react-flow/commit/fe8cac0adb359109e0e9eafe8b9261ba354076bb), [`4a4ca171`](https://github.com/wbkd/react-flow/commit/4a4ca171955f5c8d58b23e3ad48406f1a21dc402), [`923a54c4`](https://github.com/wbkd/react-flow/commit/923a54c481b90954806202817ba844cfa7203a38), [`4d97a0ed`](https://github.com/wbkd/react-flow/commit/4d97a0ed168ce643fc0c99fa6b47cf1296d66065), [`c22e1c28`](https://github.com/wbkd/react-flow/commit/c22e1c28c5555a638c2a8e82c3bfc986b3965d36)]:
+  - @reactflow/core@11.7.0
+
 ## 11.1.10
 
 ### Patch Changes
diff --git a/packages/controls/package.json b/packages/controls/package.json
index 6ca64cac..777fbd6c 100644
--- a/packages/controls/package.json
+++ b/packages/controls/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@reactflow/controls",
-  "version": "11.1.10",
+  "version": "11.1.11",
   "description": "Component to control the viewport of a React Flow instance",
   "keywords": [
     "react",
diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
index b3491d4c..576d20ab 100644
--- a/packages/core/CHANGELOG.md
+++ b/packages/core/CHANGELOG.md
@@ -1,5 +1,26 @@
 # @reactflow/core
 
+## 11.7.0
+
+Most notable updates:
+
+- Handles: `isConnectableStart` and `isConnectableEnd` props to configure if you can start or end a connection at a certain handle
+- Edges: `updatable` option to enable updates for specific edges
+- useNodesInitialized: options to configure if hidden nodes should be included (false by default) 
+
+### Minor Changes
+
+- [#2960](https://github.com/wbkd/react-flow/pull/2960) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - edges: add `updatable` option
+- [#2958](https://github.com/wbkd/react-flow/pull/2958) [`4d97a0ed`](https://github.com/wbkd/react-flow/commit/4d97a0ed168ce643fc0c99fa6b47cf1296d66065) - handles: add `isConnectableStart` and `isConnectableEnd` props
+- [#2956](https://github.com/wbkd/react-flow/pull/2956) [`923a54c4`](https://github.com/wbkd/react-flow/commit/923a54c481b90954806202817ba844cfa7203a38) - add options for `useNodesInitialized`, ignore hidden nodes by default
+
+### Patch Changes
+
+- [#2926](https://github.com/wbkd/react-flow/pull/2926) Thanks [@Elringus](https://github.com/Elringus)! - fix non-passive wheel event listener violation
+- [#2933](https://github.com/wbkd/react-flow/pull/2933) [`fe8cac0a`](https://github.com/wbkd/react-flow/commit/fe8cac0adb359109e0e9eafe8b9261ba354076bb) - prefix error keys with "error"
+- [#2939](https://github.com/wbkd/react-flow/pull/2939) [`4a4ca171`](https://github.com/wbkd/react-flow/commit/4a4ca171955f5c8d58b23e3ad48406f1a21dc402) - add connection result to store
+
+
 ## 11.6.1
 
 ### Patch Changes
diff --git a/packages/core/package.json b/packages/core/package.json
index 1f8b0e4d..bc4e0b59 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@reactflow/core",
-  "version": "11.6.1",
+  "version": "11.7.0",
   "description": "Core components and util functions of React Flow.",
   "keywords": [
     "react",
diff --git a/packages/minimap/CHANGELOG.md b/packages/minimap/CHANGELOG.md
index 955cdf31..3b2f9d44 100644
--- a/packages/minimap/CHANGELOG.md
+++ b/packages/minimap/CHANGELOG.md
@@ -1,5 +1,16 @@
 # @reactflow/minimap
 
+## 11.5.0
+
+### Minor Changes
+
+- [#2944](https://github.com/wbkd/react-flow/pull/2944) Thanks [@Elringus](https://github.com/Elringus)! - add `inversePan` and `zoomStep` props
+
+### Patch Changes
+
+- Updated dependencies [[`098eee3d`](https://github.com/wbkd/react-flow/commit/098eee3d41dabc870777b081796401ff13b5a776), [`fe8cac0a`](https://github.com/wbkd/react-flow/commit/fe8cac0adb359109e0e9eafe8b9261ba354076bb), [`4a4ca171`](https://github.com/wbkd/react-flow/commit/4a4ca171955f5c8d58b23e3ad48406f1a21dc402), [`923a54c4`](https://github.com/wbkd/react-flow/commit/923a54c481b90954806202817ba844cfa7203a38), [`4d97a0ed`](https://github.com/wbkd/react-flow/commit/4d97a0ed168ce643fc0c99fa6b47cf1296d66065), [`c22e1c28`](https://github.com/wbkd/react-flow/commit/c22e1c28c5555a638c2a8e82c3bfc986b3965d36)]:
+  - @reactflow/core@11.7.0
+
 ## 11.4.1
 
 ### Patch Changes
diff --git a/packages/minimap/package.json b/packages/minimap/package.json
index 6e9124e3..e0766dab 100644
--- a/packages/minimap/package.json
+++ b/packages/minimap/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@reactflow/minimap",
-  "version": "11.4.1",
+  "version": "11.5.0",
   "description": "Minimap component for React Flow.",
   "keywords": [
     "react",
diff --git a/packages/node-toolbar/CHANGELOG.md b/packages/node-toolbar/CHANGELOG.md
index 113cae08..e5fce14b 100644
--- a/packages/node-toolbar/CHANGELOG.md
+++ b/packages/node-toolbar/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @reactflow/node-toolbar
 
+## 1.1.11
+
+### Patch Changes
+
+- Updated dependencies [[`098eee3d`](https://github.com/wbkd/react-flow/commit/098eee3d41dabc870777b081796401ff13b5a776), [`fe8cac0a`](https://github.com/wbkd/react-flow/commit/fe8cac0adb359109e0e9eafe8b9261ba354076bb), [`4a4ca171`](https://github.com/wbkd/react-flow/commit/4a4ca171955f5c8d58b23e3ad48406f1a21dc402), [`923a54c4`](https://github.com/wbkd/react-flow/commit/923a54c481b90954806202817ba844cfa7203a38), [`4d97a0ed`](https://github.com/wbkd/react-flow/commit/4d97a0ed168ce643fc0c99fa6b47cf1296d66065), [`c22e1c28`](https://github.com/wbkd/react-flow/commit/c22e1c28c5555a638c2a8e82c3bfc986b3965d36)]:
+  - @reactflow/core@11.7.0
+
 ## 1.1.10
 
 ### Patch Changes
diff --git a/packages/node-toolbar/package.json b/packages/node-toolbar/package.json
index 7e1c5645..71dad7ca 100644
--- a/packages/node-toolbar/package.json
+++ b/packages/node-toolbar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@reactflow/node-toolbar",
-  "version": "1.1.10",
+  "version": "1.1.11",
   "description": "A toolbar component for React Flow that can be attached to a node.",
   "keywords": [
     "react",
diff --git a/packages/reactflow/CHANGELOG.md b/packages/reactflow/CHANGELOG.md
index 80e8e7b6..f5eebcf3 100644
--- a/packages/reactflow/CHANGELOG.md
+++ b/packages/reactflow/CHANGELOG.md
@@ -1,5 +1,44 @@
 # reactflow
 
+## 11.7.0
+
+Most notable updates:
+
+- `@reactflow/node-resizer` is now part of this package. No need to install it separately anymore.
+- Handles: `isConnectableStart` and `isConnectableEnd` props to configure if you can start or end a connection at a certain handle
+- Edges: `updatable` option to enable updates for specific edges
+- MiniMap: `inversePan` and `zoomStep` props
+- Background: `id` and `offset` props - this enables you to combine different patterns (useful if you want a graph paper like background for example)
+- useNodesInitialized: options to configure if hidden nodes should be included (false by default) 
+
+Big thanks to [@Elringus](https://github.com/Elringus) and [@bcakmakoglu](https://github.com/bcakmakoglu)!
+
+### Minor Changes
+
+- [#2964](https://github.com/wbkd/react-flow/pull/2964) [`2fb4c2c8`](https://github.com/wbkd/react-flow/commit/2fb4c2c82343751ff536da262de74bd9080321b4) - add @reactflow/node-resizer package
+- [#2960](https://github.com/wbkd/react-flow/pull/2960) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - edges: add `updatable` option
+- [#2958](https://github.com/wbkd/react-flow/pull/2958) [`4d97a0ed`](https://github.com/wbkd/react-flow/commit/4d97a0ed168ce643fc0c99fa6b47cf1296d66065) - handles: add `isConnectableStart` and `isConnectableEnd` props
+- [#2956](https://github.com/wbkd/react-flow/pull/2956) [`923a54c4`](https://github.com/wbkd/react-flow/commit/923a54c481b90954806202817ba844cfa7203a38) - add options for `useNodesInitialized`, ignore hidden nodes by default
+- [#2944](https://github.com/wbkd/react-flow/pull/2944) Thanks [@Elringus](https://github.com/Elringus)! - add `inversePan` and `zoomStep` props
+- [#2941](https://github.com/wbkd/react-flow/pull/2941) Thanks [@Elringus](https://github.com/Elringus)! - background: add `id` and `offset` props
+
+
+### Patch Changes
+
+- [#2926](https://github.com/wbkd/react-flow/pull/2926) Thanks [@Elringus](https://github.com/Elringus)! - fix non-passive wheel event listener violation
+- [#2933](https://github.com/wbkd/react-flow/pull/2933) [`fe8cac0a`](https://github.com/wbkd/react-flow/commit/fe8cac0adb359109e0e9eafe8b9261ba354076bb) - prefix error keys with "error"
+- [#2939](https://github.com/wbkd/react-flow/pull/2939) [`4a4ca171`](https://github.com/wbkd/react-flow/commit/4a4ca171955f5c8d58b23e3ad48406f1a21dc402) - add connection result to store
+
+
+### Patch Changes
+
+- Updated dependencies [[`098eee3d`](https://github.com/wbkd/react-flow/commit/098eee3d41dabc870777b081796401ff13b5a776), [`fe8cac0a`](https://github.com/wbkd/react-flow/commit/fe8cac0adb359109e0e9eafe8b9261ba354076bb), [`4a4ca171`](https://github.com/wbkd/react-flow/commit/4a4ca171955f5c8d58b23e3ad48406f1a21dc402), [`c1448c2f`](https://github.com/wbkd/react-flow/commit/c1448c2f7415dd3b4b2c54e05404c5ab24e8978d), [`923a54c4`](https://github.com/wbkd/react-flow/commit/923a54c481b90954806202817ba844cfa7203a38), [`4d97a0ed`](https://github.com/wbkd/react-flow/commit/4d97a0ed168ce643fc0c99fa6b47cf1296d66065), [`771c7a5d`](https://github.com/wbkd/react-flow/commit/771c7a5d133ce96e9f7471394c15189e0657ce01), [`c22e1c28`](https://github.com/wbkd/react-flow/commit/c22e1c28c5555a638c2a8e82c3bfc986b3965d36)]:
+  - @reactflow/core@11.7.0
+  - @reactflow/minimap@11.5.0
+  - @reactflow/background@11.2.0
+  - @reactflow/controls@11.1.11
+  - @reactflow/node-toolbar@1.1.11
+
 ## 11.6.1
 
 ### Patch Changes
diff --git a/packages/reactflow/package.json b/packages/reactflow/package.json
index ab970755..ad4b8ed7 100644
--- a/packages/reactflow/package.json
+++ b/packages/reactflow/package.json
@@ -1,6 +1,6 @@
 {
   "name": "reactflow",
-  "version": "11.6.1",
+  "version": "11.7.0",
   "description": "A highly customizable React library for building node-based editors and interactive flow charts",
   "keywords": [
     "react",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a977bd11..b1b82b62 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -32,8 +32,8 @@ importers:
       '@changesets/changelog-github': registry.npmjs.org/@changesets/changelog-github/0.4.7
       '@changesets/cli': registry.npmjs.org/@changesets/cli/2.25.0
       '@preconstruct/cli': registry.npmjs.org/@preconstruct/cli/2.2.1
-      '@typescript-eslint/eslint-plugin': registry.npmjs.org/@typescript-eslint/eslint-plugin/5.55.0_yarhzymb3lojuq6uyipzo3xllu
-      '@typescript-eslint/parser': registry.npmjs.org/@typescript-eslint/parser/5.55.0_id2eilsndvzhjjktb64trvy3gu
+      '@typescript-eslint/eslint-plugin': registry.npmjs.org/@typescript-eslint/eslint-plugin/5.57.0_mc6km5pjrfw7q236yimvgyb62m
+      '@typescript-eslint/parser': registry.npmjs.org/@typescript-eslint/parser/5.57.0_id2eilsndvzhjjktb64trvy3gu
       autoprefixer: registry.npmjs.org/autoprefixer/10.4.9_postcss@8.4.21
       concurrently: registry.npmjs.org/concurrently/7.6.0
       cypress: registry.npmjs.org/cypress/10.7.0
@@ -284,7 +284,7 @@ importers:
       '@reactflow/core': workspace:*
       '@reactflow/eslint-config': workspace:*
       '@reactflow/minimap': workspace:*
-      '@reactflow/node-resizer': workspace:^2.1.0
+      '@reactflow/node-resizer': workspace:*
       '@reactflow/node-toolbar': workspace:*
       '@reactflow/rollup-config': workspace:*
       '@reactflow/tsconfig': workspace:*
@@ -317,7 +317,7 @@ importers:
     devDependencies:
       eslint: registry.npmjs.org/eslint/8.23.1
       eslint-config-prettier: registry.npmjs.org/eslint-config-prettier/8.5.0_eslint@8.23.1
-      eslint-config-turbo: registry.npmjs.org/eslint-config-turbo/0.0.9_eslint@8.23.1
+      eslint-config-turbo: registry.npmjs.org/eslint-config-turbo/1.8.6_eslint@8.23.1
       eslint-plugin-react: registry.npmjs.org/eslint-plugin-react/7.32.2_eslint@8.23.1
 
   tooling/rollup-config:
@@ -2218,11 +2218,11 @@ packages:
     dev: true
     optional: true
 
-  registry.npmjs.org/@typescript-eslint/eslint-plugin/5.55.0_yarhzymb3lojuq6uyipzo3xllu:
-    resolution: {integrity: sha512-IZGc50rtbjk+xp5YQoJvmMPmJEYoC53SiKPXyqWfv15XoD2Y5Kju6zN0DwlmaGJp1Iw33JsWJcQ7nw0lGCGjVg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.55.0.tgz}
-    id: registry.npmjs.org/@typescript-eslint/eslint-plugin/5.55.0
+  registry.npmjs.org/@typescript-eslint/eslint-plugin/5.57.0_mc6km5pjrfw7q236yimvgyb62m:
+    resolution: {integrity: sha512-itag0qpN6q2UMM6Xgk6xoHa0D0/P+M17THnr4SVgqn9Rgam5k/He33MA7/D7QoJcdMxHFyX7U9imaBonAX/6qA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.57.0.tgz}
+    id: registry.npmjs.org/@typescript-eslint/eslint-plugin/5.57.0
     name: '@typescript-eslint/eslint-plugin'
-    version: 5.55.0
+    version: 5.57.0
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       '@typescript-eslint/parser': ^5.0.0
@@ -2233,10 +2233,10 @@ packages:
         optional: true
     dependencies:
       '@eslint-community/regexpp': registry.npmjs.org/@eslint-community/regexpp/4.4.0
-      '@typescript-eslint/parser': registry.npmjs.org/@typescript-eslint/parser/5.55.0_id2eilsndvzhjjktb64trvy3gu
-      '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.55.0
-      '@typescript-eslint/type-utils': registry.npmjs.org/@typescript-eslint/type-utils/5.55.0_id2eilsndvzhjjktb64trvy3gu
-      '@typescript-eslint/utils': registry.npmjs.org/@typescript-eslint/utils/5.55.0_id2eilsndvzhjjktb64trvy3gu
+      '@typescript-eslint/parser': registry.npmjs.org/@typescript-eslint/parser/5.57.0_id2eilsndvzhjjktb64trvy3gu
+      '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.57.0
+      '@typescript-eslint/type-utils': registry.npmjs.org/@typescript-eslint/type-utils/5.57.0_id2eilsndvzhjjktb64trvy3gu
+      '@typescript-eslint/utils': registry.npmjs.org/@typescript-eslint/utils/5.57.0_id2eilsndvzhjjktb64trvy3gu
       debug: registry.npmjs.org/debug/4.3.4
       eslint: registry.npmjs.org/eslint/8.23.1
       grapheme-splitter: registry.npmjs.org/grapheme-splitter/1.0.4
@@ -2249,11 +2249,11 @@ packages:
       - supports-color
     dev: true
 
-  registry.npmjs.org/@typescript-eslint/parser/5.55.0_id2eilsndvzhjjktb64trvy3gu:
-    resolution: {integrity: sha512-ppvmeF7hvdhUUZWSd2EEWfzcFkjJzgNQzVST22nzg958CR+sphy8A6K7LXQZd6V75m1VKjp+J4g/PCEfSCmzhw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.55.0.tgz}
-    id: registry.npmjs.org/@typescript-eslint/parser/5.55.0
+  registry.npmjs.org/@typescript-eslint/parser/5.57.0_id2eilsndvzhjjktb64trvy3gu:
+    resolution: {integrity: sha512-orrduvpWYkgLCyAdNtR1QIWovcNZlEm6yL8nwH/eTxWLd8gsP+25pdLHYzL2QdkqrieaDwLpytHqycncv0woUQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.57.0.tgz}
+    id: registry.npmjs.org/@typescript-eslint/parser/5.57.0
     name: '@typescript-eslint/parser'
-    version: 5.55.0
+    version: 5.57.0
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
@@ -2262,9 +2262,9 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.55.0
-      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.55.0
-      '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.55.0_typescript@4.9.4
+      '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.57.0
+      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.57.0
+      '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.57.0_typescript@4.9.4
       debug: registry.npmjs.org/debug/4.3.4
       eslint: registry.npmjs.org/eslint/8.23.1
       typescript: registry.npmjs.org/typescript/4.9.4
@@ -2272,21 +2272,21 @@ packages:
       - supports-color
     dev: true
 
-  registry.npmjs.org/@typescript-eslint/scope-manager/5.55.0:
-    resolution: {integrity: sha512-OK+cIO1ZGhJYNCL//a3ROpsd83psf4dUJ4j7pdNVzd5DmIk+ffkuUIX2vcZQbEW/IR41DYsfJTB19tpCboxQuw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.55.0.tgz}
+  registry.npmjs.org/@typescript-eslint/scope-manager/5.57.0:
+    resolution: {integrity: sha512-NANBNOQvllPlizl9LatX8+MHi7bx7WGIWYjPHDmQe5Si/0YEYfxSljJpoTyTWFTgRy3X8gLYSE4xQ2U+aCozSw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.57.0.tgz}
     name: '@typescript-eslint/scope-manager'
-    version: 5.55.0
+    version: 5.57.0
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
-      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.55.0
-      '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys/5.55.0
+      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.57.0
+      '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys/5.57.0
     dev: true
 
-  registry.npmjs.org/@typescript-eslint/type-utils/5.55.0_id2eilsndvzhjjktb64trvy3gu:
-    resolution: {integrity: sha512-ObqxBgHIXj8rBNm0yh8oORFrICcJuZPZTqtAFh0oZQyr5DnAHZWfyw54RwpEEH+fD8suZaI0YxvWu5tYE/WswA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.55.0.tgz}
-    id: registry.npmjs.org/@typescript-eslint/type-utils/5.55.0
+  registry.npmjs.org/@typescript-eslint/type-utils/5.57.0_id2eilsndvzhjjktb64trvy3gu:
+    resolution: {integrity: sha512-kxXoq9zOTbvqzLbdNKy1yFrxLC6GDJFE2Yuo3KqSwTmDOFjUGeWSakgoXT864WcK5/NAJkkONCiKb1ddsqhLXQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.57.0.tgz}
+    id: registry.npmjs.org/@typescript-eslint/type-utils/5.57.0
     name: '@typescript-eslint/type-utils'
-    version: 5.55.0
+    version: 5.57.0
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: '*'
@@ -2295,8 +2295,8 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.55.0_typescript@4.9.4
-      '@typescript-eslint/utils': registry.npmjs.org/@typescript-eslint/utils/5.55.0_id2eilsndvzhjjktb64trvy3gu
+      '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.57.0_typescript@4.9.4
+      '@typescript-eslint/utils': registry.npmjs.org/@typescript-eslint/utils/5.57.0_id2eilsndvzhjjktb64trvy3gu
       debug: registry.npmjs.org/debug/4.3.4
       eslint: registry.npmjs.org/eslint/8.23.1
       tsutils: registry.npmjs.org/tsutils/3.21.0_typescript@4.9.4
@@ -2305,18 +2305,18 @@ packages:
       - supports-color
     dev: true
 
-  registry.npmjs.org/@typescript-eslint/types/5.55.0:
-    resolution: {integrity: sha512-M4iRh4AG1ChrOL6Y+mETEKGeDnT7Sparn6fhZ5LtVJF1909D5O4uqK+C5NPbLmpfZ0XIIxCdwzKiijpZUOvOug==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/types/-/types-5.55.0.tgz}
+  registry.npmjs.org/@typescript-eslint/types/5.57.0:
+    resolution: {integrity: sha512-mxsod+aZRSyLT+jiqHw1KK6xrANm19/+VFALVFP5qa/aiJnlP38qpyaTd0fEKhWvQk6YeNZ5LGwI1pDpBRBhtQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/types/-/types-5.57.0.tgz}
     name: '@typescript-eslint/types'
-    version: 5.55.0
+    version: 5.57.0
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
-  registry.npmjs.org/@typescript-eslint/typescript-estree/5.55.0_typescript@4.9.4:
-    resolution: {integrity: sha512-I7X4A9ovA8gdpWMpr7b1BN9eEbvlEtWhQvpxp/yogt48fy9Lj3iE3ild/1H3jKBBIYj5YYJmS2+9ystVhC7eaQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.55.0.tgz}
-    id: registry.npmjs.org/@typescript-eslint/typescript-estree/5.55.0
+  registry.npmjs.org/@typescript-eslint/typescript-estree/5.57.0_typescript@4.9.4:
+    resolution: {integrity: sha512-LTzQ23TV82KpO8HPnWuxM2V7ieXW8O142I7hQTxWIHDcCEIjtkat6H96PFkYBQqGFLW/G/eVVOB9Z8rcvdY/Vw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.57.0.tgz}
+    id: registry.npmjs.org/@typescript-eslint/typescript-estree/5.57.0
     name: '@typescript-eslint/typescript-estree'
-    version: 5.55.0
+    version: 5.57.0
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       typescript: '*'
@@ -2324,8 +2324,8 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.55.0
-      '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys/5.55.0
+      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.57.0
+      '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys/5.57.0
       debug: registry.npmjs.org/debug/4.3.4
       globby: registry.npmjs.org/globby/11.1.0
       is-glob: registry.npmjs.org/is-glob/4.0.3
@@ -2336,11 +2336,11 @@ packages:
       - supports-color
     dev: true
 
-  registry.npmjs.org/@typescript-eslint/utils/5.55.0_id2eilsndvzhjjktb64trvy3gu:
-    resolution: {integrity: sha512-FkW+i2pQKcpDC3AY6DU54yl8Lfl14FVGYDgBTyGKB75cCwV3KpkpTMFi9d9j2WAJ4271LR2HeC5SEWF/CZmmfw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.55.0.tgz}
-    id: registry.npmjs.org/@typescript-eslint/utils/5.55.0
+  registry.npmjs.org/@typescript-eslint/utils/5.57.0_id2eilsndvzhjjktb64trvy3gu:
+    resolution: {integrity: sha512-ps/4WohXV7C+LTSgAL5CApxvxbMkl9B9AUZRtnEFonpIxZDIT7wC1xfvuJONMidrkB9scs4zhtRyIwHh4+18kw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.57.0.tgz}
+    id: registry.npmjs.org/@typescript-eslint/utils/5.57.0
     name: '@typescript-eslint/utils'
-    version: 5.55.0
+    version: 5.57.0
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
@@ -2348,9 +2348,9 @@ packages:
       '@eslint-community/eslint-utils': registry.npmjs.org/@eslint-community/eslint-utils/4.2.0_eslint@8.23.1
       '@types/json-schema': registry.npmjs.org/@types/json-schema/7.0.11
       '@types/semver': registry.npmjs.org/@types/semver/7.3.13
-      '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.55.0
-      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.55.0
-      '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.55.0_typescript@4.9.4
+      '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.57.0
+      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.57.0
+      '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.57.0_typescript@4.9.4
       eslint: registry.npmjs.org/eslint/8.23.1
       eslint-scope: registry.npmjs.org/eslint-scope/5.1.1
       semver: registry.npmjs.org/semver/7.3.8
@@ -2359,13 +2359,13 @@ packages:
       - typescript
     dev: true
 
-  registry.npmjs.org/@typescript-eslint/visitor-keys/5.55.0:
-    resolution: {integrity: sha512-q2dlHHwWgirKh1D3acnuApXG+VNXpEY5/AwRxDVuEQpxWaB0jCDe0jFMVMALJ3ebSfuOVE8/rMS+9ZOYGg1GWw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.55.0.tgz}
+  registry.npmjs.org/@typescript-eslint/visitor-keys/5.57.0:
+    resolution: {integrity: sha512-ery2g3k0hv5BLiKpPuwYt9KBkAp2ugT6VvyShXdLOkax895EC55sP0Tx5L0fZaQueiK3fBLvHVvEl3jFS5ia+g==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.57.0.tgz}
     name: '@typescript-eslint/visitor-keys'
-    version: 5.55.0
+    version: 5.57.0
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
-      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.55.0
+      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.57.0
       eslint-visitor-keys: registry.npmjs.org/eslint-visitor-keys/3.3.0
     dev: true
 
@@ -3724,16 +3724,16 @@ packages:
       eslint: registry.npmjs.org/eslint/8.23.1
     dev: true
 
-  registry.npmjs.org/eslint-config-turbo/0.0.9_eslint@8.23.1:
-    resolution: {integrity: sha512-j1cTdx3tRmKo0csyfQKhpuT8dynK9oddbK5nmrShoMpXI2qMbxHLYH7MWAid4FmJN8rYympy3VKw5U63Yazycg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/eslint-config-turbo/-/eslint-config-turbo-0.0.9.tgz}
-    id: registry.npmjs.org/eslint-config-turbo/0.0.9
+  registry.npmjs.org/eslint-config-turbo/1.8.6_eslint@8.23.1:
+    resolution: {integrity: sha512-LSMqrHmFeQcYRuBnzrzw+B2bJ3+o8wxPkRwfK0Y+SSLsq2F/niRJ2kqB8j4uOSCfxybHHpFEB2CgUpQiiyfeoQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/eslint-config-turbo/-/eslint-config-turbo-1.8.6.tgz}
+    id: registry.npmjs.org/eslint-config-turbo/1.8.6
     name: eslint-config-turbo
-    version: 0.0.9
+    version: 1.8.6
     peerDependencies:
       eslint: '>6.6.0'
     dependencies:
       eslint: registry.npmjs.org/eslint/8.23.1
-      eslint-plugin-turbo: registry.npmjs.org/eslint-plugin-turbo/0.0.9_eslint@8.23.1
+      eslint-plugin-turbo: registry.npmjs.org/eslint-plugin-turbo/1.8.6_eslint@8.23.1
     dev: true
 
   registry.npmjs.org/eslint-plugin-prettier/4.2.1_cabrci5exjdaojcvd6xoxgeowu:
@@ -3783,11 +3783,11 @@ packages:
       string.prototype.matchall: registry.npmjs.org/string.prototype.matchall/4.0.8
     dev: true
 
-  registry.npmjs.org/eslint-plugin-turbo/0.0.9_eslint@8.23.1:
-    resolution: {integrity: sha512-fEsuSnYU3GLtT+s66mUuzDL1LaSieIx5uk3tPO0ToGv7hI2XzOfP24aPkQItTBGl7kq2JaVkRzPwcnfz8hkp0w==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/eslint-plugin-turbo/-/eslint-plugin-turbo-0.0.9.tgz}
-    id: registry.npmjs.org/eslint-plugin-turbo/0.0.9
+  registry.npmjs.org/eslint-plugin-turbo/1.8.6_eslint@8.23.1:
+    resolution: {integrity: sha512-LieXzur+4XtIsLst8GdupTMhvGn2ebFetG3AVErh2jHBy1EobPHbatjcdNZQMy5EsdG35axQVB8KFF3jo4u+OQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/eslint-plugin-turbo/-/eslint-plugin-turbo-1.8.6.tgz}
+    id: registry.npmjs.org/eslint-plugin-turbo/1.8.6
     name: eslint-plugin-turbo
-    version: 0.0.9
+    version: 1.8.6
     peerDependencies:
       eslint: '>6.6.0'
     dependencies: