chore(zustand): upgrade to v4

packages/core/src/hooks/useDrag/index.ts

@@ -2,7 +2,7 @@ import { RefObject, useEffect, useRef, MouseEvent, useState, useCallback } from
 import { D3DragEvent, drag, SubjectPosition } from 'd3-drag';
 import { select } from 'd3-selection';
 
-import { useStoreApi } from '../../store';
+import { useStoreApi } from '../../hooks/useStore';
 import { pointToRendererPoint } from '../../utils/graph';
 import { NodeDragItem, Node, SelectionDragHandler } from '../../types';
 import { getDragItems, getEventHandlerParams, hasSelector, calcNextPosition } from './utils';

packages/core/src/hooks/useEdges.ts

@@ -1,4 +1,4 @@
-import { useStore } from '../store';
+import { useStore } from '../hooks/useStore';
 import { Edge, ReactFlowState } from '../types';
 
 const edgesSelector = (state: ReactFlowState) => state.edges;

packages/core/src/hooks/useGlobalKeyHandler.ts

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 
-import { useStoreApi } from '../store';
+import { useStoreApi } from '../hooks/useStore';
 import useKeyPress from './useKeyPress';
 import { getConnectedEdges } from '../utils/graph';
 import { KeyCode, NodeChange, Node } from '../types';

packages/core/src/hooks/useNodes.ts

@@ -1,4 +1,4 @@
-import { useStore } from '../store';
+import { useStore } from '../hooks/useStore';
 import { Node, ReactFlowState } from '../types';
 
 const nodesSelector = (state: ReactFlowState) => Array.from(state.nodeInternals.values());

packages/core/src/hooks/useReactFlow.ts

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 
 import useViewportHelper from './useViewportHelper';
-import { useStoreApi } from '../store';
+import { useStoreApi } from '../hooks/useStore';
 import {
   ReactFlowInstance,
   Instance,

packages/core/src/hooks/useResizeHandler.ts

@@ -1,6 +1,6 @@
 import { useEffect, MutableRefObject } from 'react';
 
-import { useStoreApi } from '../store';
+import { useStoreApi } from '../hooks/useStore';
 import { getDimensions } from '../utils';
 
 function useResizeHandler(rendererNode: MutableRefObject<HTMLDivElement | null>): void {

packages/core/src/hooks/useStore.ts

@@ -0,0 +1,42 @@
+import { useContext, useMemo } from 'react';
+import { StoreApi, useStore as useZustandStore } from 'zustand';
+
+import StoreContext from '../contexts/RFStoreContext';
+import { ReactFlowState } from '../types';
+
+const errorMessage = 'Seems like you have not used zustand provider as an ancestor.';
+
+type ExtractState = StoreApi<ReactFlowState> extends { getState: () => infer T } ? T : never;
+
+function useStore<StateSlice = ExtractState>(
+  selector: (state: ExtractState) => StateSlice,
+  equalityFn?: (a: StateSlice, b: StateSlice) => boolean
+) {
+  const store = useContext(StoreContext);
+
+  if (store === null) {
+    throw new Error(errorMessage);
+  }
+
+  return useZustandStore(store, selector, equalityFn);
+}
+
+const useStoreApi = () => {
+  const store = useContext(StoreContext);
+
+  if (store === null) {
+    throw new Error(errorMessage);
+  }
+
+  return useMemo(
+    () => ({
+      getState: store.getState,
+      setState: store.setState,
+      subscribe: store.subscribe,
+      destroy: store.destroy,
+    }),
+    [store]
+  );
+};
+
+export { useStore, useStoreApi };

packages/core/src/hooks/useUpdateNodeInternals.ts

@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 
-import { useStore, useStoreApi } from '../store';
+import { useStore, useStoreApi } from '../hooks/useStore';
 import { UpdateNodeInternals, ReactFlowState } from '../types';
 
 const selector = (state: ReactFlowState) => state.updateNodeDimensions;

packages/core/src/hooks/useUpdateNodePositions.ts

@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 
-import { useStoreApi } from '../store';
+import { useStoreApi } from '../hooks/useStore';
 import { calcNextPosition } from './useDrag/utils';
 
 import { XYPosition } from '../types';

packages/core/src/hooks/useViewport.ts

@@ -1,6 +1,6 @@
 import shallow from 'zustand/shallow';
 
-import { useStore } from '../store';
+import { useStore } from '../hooks/useStore';
 import { Viewport, ReactFlowState } from '../types';
 
 const viewportSelector = (state: ReactFlowState) => ({

packages/core/src/hooks/useViewportHelper.ts

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import { zoomIdentity } from 'd3-zoom';
 import shallow from 'zustand/shallow';
 
-import { useStoreApi, useStore } from '../store';
+import { useStoreApi, useStore } from '../hooks/useStore';
 import { pointToRendererPoint, getTransformForBounds, getD3Transition } from '../utils/graph';
 import { FitViewOptions, Viewport, ViewportHelperFunctions, ReactFlowState, Rect, XYPosition } from '../types';
 import { fitView as fitViewStore } from '../store/utils';

packages/core/src/hooks/useVisibleEdges.ts

@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 
-import { useStore } from '../store';
+import { useStore } from '../hooks/useStore';
 import { isEdgeVisible } from '../container/EdgeRenderer/utils';
 import { ReactFlowState, NodeInternals, Edge } from '../types';
 import { internalsSymbol, isNumeric } from '../utils';

packages/core/src/hooks/useVisibleNodes.ts

@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 
-import { useStore } from '../store';
+import { useStore } from '../hooks/useStore';
 import { getNodesInside } from '../utils/graph';
 
 import { ReactFlowState } from '../types';