chore(zustand): upgrade to v4

packages/core/src/container/EdgeRenderer/MarkerDefinitions.tsx

@@ -1,6 +1,6 @@
 import React, { memo, useCallback } from 'react';
 
-import { useStore } from '../../store';
+import { useStore } from '../../hooks/useStore';
 import { EdgeMarker, ReactFlowState } from '../../types';
 import { getMarkerId } from '../../utils/graph';
 import { useMarkerSymbol } from './MarkerSymbols';

packages/core/src/container/EdgeRenderer/index.tsx

@@ -2,7 +2,7 @@ import React, { memo, CSSProperties } from 'react';
 import shallow from 'zustand/shallow';
 import cc from 'classcat';
 
-import { useStore } from '../../store';
+import { useStore } from '../../hooks/useStore';
 import ConnectionLine from '../../components/ConnectionLine/index';
 import MarkerDefinitions from './MarkerDefinitions';
 import { getEdgePositions, getHandle, getNodeData } from './utils';

packages/core/src/container/FlowRenderer/index.tsx

@@ -1,6 +1,6 @@
 import React, { memo, ReactNode, WheelEvent, MouseEvent } from 'react';
 
-import { useStore, useStoreApi } from '../../store';
+import { useStore, useStoreApi } from '../../hooks/useStore';
 import useGlobalKeyHandler from '../../hooks/useGlobalKeyHandler';
 import useKeyPress from '../../hooks/useKeyPress';
 import { GraphViewProps } from '../GraphView';

packages/core/src/container/NodeRenderer/index.tsx

@@ -2,10 +2,10 @@ import React, { memo, useMemo, ComponentType, useEffect, useRef } from 'react';
 import shallow from 'zustand/shallow';
 
 import useVisibleNodes from '../../hooks/useVisibleNodes';
-import { useStore } from '../../store';
+import { useStore } from '../../hooks/useStore';
+import { internalsSymbol } from '../../utils';
 import { containerStyle } from '../../styles';
 import { NodeMouseHandler, NodeTypesWrapped, Position, ReactFlowState, WrapNodeProps } from '../../types';
-import { internalsSymbol } from '../../utils';
 
 interface NodeRendererProps {
   nodeTypes: NodeTypesWrapped;

packages/core/src/container/ReactFlow/Wrapper.tsx

@@ -1,6 +1,7 @@
 import React, { FC, PropsWithChildren } from 'react';
 
-import { Provider, createStore, useStoreApi } from '../../store';
+import { useStoreApi } from '../../hooks/useStore';
+import ReactFlowProvider from '../../components/ReactFlowProvider';
 
 const Wrapper: FC<PropsWithChildren<{}>> = ({ children }) => {
   let isWrapped = true;
@@ -17,7 +18,7 @@ const Wrapper: FC<PropsWithChildren<{}>> = ({ children }) => {
     return <>{children}</>;
   }
 
-  return <Provider createStore={createStore}>{children}</Provider>;
+  return <ReactFlowProvider>{children}</ReactFlowProvider>;
 };
 
 Wrapper.displayName = 'ReactFlowWrapper';

packages/core/src/container/Viewport/index.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
 
-import { useStore } from '../../store';
+import { useStore } from '../../hooks/useStore';
 import { ReactFlowState } from '../../types';
 
 const selector = (s: ReactFlowState) => `translate(${s.transform[0]}px,${s.transform[1]}px) scale(${s.transform[2]})`;

packages/core/src/container/ZoomPane/index.tsx

@@ -6,10 +6,10 @@ import shallow from 'zustand/shallow';
 import { clamp } from '../../utils';
 import useKeyPress from '../../hooks/useKeyPress';
 import useResizeHandler from '../../hooks/useResizeHandler';
-import { useStore, useStoreApi } from '../../store';
-import { Viewport, PanOnScrollMode, ReactFlowState } from '../../types';
+import { useStore, useStoreApi } from '../../hooks/useStore';
 import { FlowRendererProps } from '../FlowRenderer';
 import { containerStyle } from '../../styles';
+import { Viewport, PanOnScrollMode, ReactFlowState } from '../../types';
 
 type ZoomPaneProps = Omit<
   FlowRendererProps,