chore(panel): dont break user selection above panel

packages/core/src/components/Panel/index.tsx

@@ -1,18 +1,26 @@
 import { HTMLAttributes, ReactNode } from 'react';
 import cc from 'classcat';
 
-import { PanelPosition } from '../../types';
+import { PanelPosition, ReactFlowState } from '../../types';
+import { useStore } from '../../hooks/useStore';
 
 export type PanelProps = HTMLAttributes<HTMLDivElement> & {
   position: PanelPosition;
   children: ReactNode;
 };
 
-function Panel({ position, children, className, ...rest }: PanelProps) {
+const selector = (s: ReactFlowState) => (s.userSelectionActive ? 'none' : 'all');
+
+function Panel({ position, children, className, style, ...rest }: PanelProps) {
+  const pointerEvents = useStore(selector);
   const positionClasses = `${position}`.split('-');
 
   return (
-    <div className={cc(['react-flow__panel', className, ...positionClasses])} {...rest}>
+    <div
+      className={cc(['react-flow__panel', className, ...positionClasses])}
+      style={{ ...style, pointerEvents }}
+      {...rest}
+    >
       {children}
     </div>
   );