refactor(handle): forward ref closes #1458 closes #1385

src/components/Handle/index.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useContext, useCallback, FC, HTMLAttributes } from 'react';
+import React, { memo, useContext, useCallback, HTMLAttributes, forwardRef } from 'react';
 import cc from 'classcat';
 
 import { useStoreActions, useStoreState } from '../../store/hooks';
@@ -9,7 +9,11 @@ import { onMouseDown, SetSourceIdFunc, SetPosition } from './handler';
 
 const alwaysValid = () => true;
 
-const Handle: FC<HandleProps & Omit<HTMLAttributes<HTMLDivElement>, 'id'>> = ({
+export type HandleComponentProps = HandleProps & Omit<HTMLAttributes<HTMLDivElement>, 'id'>;
+
+const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
+  (
+    {
       type = 'source',
       position = Position.Top,
       isValidConnection = alwaysValid,
@@ -19,7 +23,9 @@ const Handle: FC<HandleProps & Omit<HTMLAttributes<HTMLDivElement>, 'id'>> = ({
       children,
       className,
       ...rest
-}) => {
+    },
+    ref
+  ) => {
     const nodeId = useContext(NodeIdContext) as ElementId;
     const setPosition = useStoreActions((actions) => actions.setConnectionPosition);
     const setConnectionNodeId = useStoreActions((actions) => actions.setConnectionNodeId);
@@ -92,12 +98,14 @@ const Handle: FC<HandleProps & Omit<HTMLAttributes<HTMLDivElement>, 'id'>> = ({
         data-handlepos={position}
         className={handleClasses}
         onMouseDown={onMouseDownHandler}
+        ref={ref}
         {...rest}
       >
         {children}
       </div>
     );
-};
+  }
+);
 
 Handle.displayName = 'Handle';