Merge branch 'next' into absolute-origin

packages/react/src/hooks/useConnection.ts

@@ -2,33 +2,19 @@ import { shallow } from 'zustand/shallow';
 
 import { useStore } from './useStore';
 import type { ReactFlowStore } from '../types/store';
+import { ConnectionState } from '@xyflow/system';
 
 const selector = (s: ReactFlowStore) => ({
-  startHandle: s.connectionStartHandle,
-  endHandle: s.connectionEndHandle,
-  status: s.connectionStatus,
-  position: s.connectionStartHandle ? s.connectionPosition : null,
+  ...s.connection,
+  inProgress: s.connection.fromHandle !== null,
 });
 
-type UseConnectionResult = {
-  /** The start handle where the user interaction started or null */
-  startHandle: ReactFlowStore['connectionStartHandle'];
-  /** The target handle that's inside the connection radius or null  */
-  endHandle: ReactFlowStore['connectionEndHandle'];
-  /** The current connection status 'valid', 'invalid' or null*/
-  status: ReactFlowStore['connectionStatus'];
-  /** The current connection position or null */
-  position: ReactFlowStore['connectionPosition'] | null;
-};
-
 /**
  * Hook for accessing the ongoing connection.
  *
  * @public
  * @returns ongoing connection
  */
-export function useConnection(): UseConnectionResult {
-  const ongoingConnection = useStore(selector, shallow);
-
-  return ongoingConnection;
+export function useConnection(): ConnectionState & { inProgress: boolean } {
+  return useStore(selector, shallow);
 }