chore(react): cleanup exports

examples/react/src/examples/Stress/index.tsx

@@ -11,7 +11,6 @@ import {
   EdgeChange,
   Controls,
   Background,
-  MiniMap,
   Panel,
 } from '@xyflow/react';
 

packages/react/src/additional-components/Background/Background.tsx

@@ -3,10 +3,10 @@ import cc from 'classcat';
 import { shallow } from 'zustand/shallow';
 
 import { useStore } from '../../hooks/useStore';
-import { type ReactFlowState } from '../../types';
-import { BackgroundProps, BackgroundVariant } from './types';
 import { DotPattern, LinePattern } from './Patterns';
 import { containerStyle } from '../../styles/utils';
+import { type BackgroundProps, BackgroundVariant } from './types';
+import { type ReactFlowState } from '../../types';
 
 const defaultSize = {
   [BackgroundVariant.Dots]: 1,
@@ -16,7 +16,7 @@ const defaultSize = {
 
 const selector = (s: ReactFlowState) => ({ transform: s.transform, patternId: `pattern-${s.rfId}` });
 
-function Background({
+function BackgroundComponent({
   id,
   variant = BackgroundVariant.Dots,
   // only used for dots and cross
@@ -87,6 +87,6 @@ function Background({
   );
 }
 
-Background.displayName = 'Background';
+BackgroundComponent.displayName = 'Background';
 
-export default memo(Background);
+export const Background = memo(BackgroundComponent);

packages/react/src/additional-components/Background/index.tsx

@@ -1,2 +1,2 @@
-export { default as Background } from './Background';
+export { Background } from './Background';
-export * from './types';
+export { BackgroundVariant, type BackgroundProps } from './types';

packages/react/src/additional-components/Controls/ControlButton.tsx

@@ -1,14 +1,11 @@
-import type { FC, PropsWithChildren } from 'react';
 import cc from 'classcat';
 
 import type { ControlButtonProps } from './types';
 
-const ControlButton: FC<PropsWithChildren<ControlButtonProps>> = ({ children, className, ...rest }) => (
+export function ControlButton({ children, className, ...rest }: ControlButtonProps) {
-  <button type="button" className={cc(['react-flow__controls-button', className])} {...rest}>
+  return (
-    {children}
+    <button type="button" className={cc(['react-flow__controls-button', className])} {...rest}>
-  </button>
+      {children}
-);
+    </button>
-
+  );
-ControlButton.displayName = 'ControlButton';
+}
-
-export default ControlButton;

packages/react/src/additional-components/Controls/Controls.tsx

@@ -1,19 +1,18 @@
-import { memo, type FC, type PropsWithChildren } from 'react';
+import { memo } from 'react';
 import cc from 'classcat';
 import { shallow } from 'zustand/shallow';
 
 import { useStore, useStoreApi } from '../../hooks/useStore';
 import { useReactFlow } from '../../hooks/useReactFlow';
-import Panel from '../../components/Panel';
+import { Panel } from '../../components/Panel';
 import { type ReactFlowState } from '../../types';
 
-import PlusIcon from './Icons/Plus';
+import { PlusIcon } from './Icons/Plus';
-import MinusIcon from './Icons/Minus';
+import { MinusIcon } from './Icons/Minus';
-import FitviewIcon from './Icons/FitView';
+import { FitViewIcon } from './Icons/FitView';
-import LockIcon from './Icons/Lock';
+import { LockIcon } from './Icons/Lock';
-import UnlockIcon from './Icons/Unlock';
+import { UnlockIcon } from './Icons/Unlock';
-import ControlButton from './ControlButton';
+import { ControlButton } from './ControlButton';
-
 import type { ControlProps } from './types';
 
 const selector = (s: ReactFlowState) => ({
@@ -22,7 +21,7 @@ const selector = (s: ReactFlowState) => ({
   maxZoomReached: s.transform[2] >= s.maxZoom,
 });
 
-const Controls: FC<PropsWithChildren<ControlProps>> = ({
+function ControlsComponent({
   style,
   showZoom = true,
   showFitView = true,
@@ -35,7 +34,7 @@ const Controls: FC<PropsWithChildren<ControlProps>> = ({
   className,
   children,
   position = 'bottom-left',
-}) => {
+}: ControlProps) {
   const store = useStoreApi();
   const { isInteractive, minZoomReached, maxZoomReached } = useStore(selector, shallow);
   const { zoomIn, zoomOut, fitView } = useReactFlow();
@@ -101,7 +100,7 @@ const Controls: FC<PropsWithChildren<ControlProps>> = ({
           title="fit view"
           aria-label="fit view"
         >
-          <FitviewIcon />
+          <FitViewIcon />
         </ControlButton>
       )}
       {showInteractive && (
@@ -117,8 +116,8 @@ const Controls: FC<PropsWithChildren<ControlProps>> = ({
       {children}
     </Panel>
   );
-};
+}
 
-Controls.displayName = 'Controls';
+ControlsComponent.displayName = 'Controls';
 
-export default memo(Controls);
+export const Controls = memo(ControlsComponent);

packages/react/src/additional-components/Controls/Icons/FitView.tsx

@@ -1,9 +1,7 @@
-function FitViewIcon() {
+export function FitViewIcon() {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 30">
       <path d="M3.692 4.63c0-.53.4-.938.939-.938h5.215V0H4.708C2.13 0 0 2.054 0 4.63v5.216h3.692V4.631zM27.354 0h-5.2v3.692h5.17c.53 0 .984.4.984.939v5.215H32V4.631A4.624 4.624 0 0027.354 0zm.954 24.83c0 .532-.4.94-.939.94h-5.215v3.768h5.215c2.577 0 4.631-2.13 4.631-4.707v-5.139h-3.692v5.139zm-23.677.94c-.531 0-.939-.4-.939-.94v-5.138H0v5.139c0 2.577 2.13 4.707 4.708 4.707h5.138V25.77H4.631z" />
     </svg>
   );
 }
-
-export default FitViewIcon;

packages/react/src/additional-components/Controls/Icons/Lock.tsx

@@ -1,9 +1,7 @@
-function LockIcon() {
+export function LockIcon() {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 32">
       <path d="M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0 8 0 4.571 3.429 4.571 7.619v3.048H3.048A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047zm4.724-13.866H7.467V7.619c0-2.59 2.133-4.724 4.723-4.724 2.591 0 4.724 2.133 4.724 4.724v3.048z" />
     </svg>
   );
 }
-
-export default LockIcon;

packages/react/src/additional-components/Controls/Icons/Minus.tsx

@@ -1,9 +1,7 @@
-function MinusIcon() {
+export function MinusIcon() {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 5">
       <path d="M0 0h32v4.2H0z" />
     </svg>
   );
 }
-
-export default MinusIcon;

packages/react/src/additional-components/Controls/Icons/Plus.tsx

@@ -1,9 +1,7 @@
-function PlusIcon() {
+export function PlusIcon() {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
       <path d="M32 18.133H18.133V32h-4.266V18.133H0v-4.266h13.867V0h4.266v13.867H32z" />
     </svg>
   );
 }
-
-export default PlusIcon;

packages/react/src/additional-components/Controls/Icons/Unlock.tsx

@@ -1,9 +1,7 @@
-function UnlockIcon() {
+export function UnlockIcon() {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 32">
       <path d="M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0c-4.114 1.828-1.37 2.133.305 2.438 1.676.305 4.42 2.59 4.42 5.181v3.048H3.047A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047z" />
     </svg>
   );
 }
-
-export default UnlockIcon;

packages/react/src/additional-components/Controls/index.tsx

@@ -1,3 +1,3 @@
-export { default as Controls } from './Controls';
+export { Controls } from './Controls';
-export { default as ControlButton } from './ControlButton';
+export { ControlButton } from './ControlButton';
-export * from './types';
+export type { ControlProps, ControlButtonProps } from './types';

packages/react/src/additional-components/Controls/types.ts

@@ -1,4 +1,4 @@
-import type { ButtonHTMLAttributes, HTMLAttributes } from 'react';
+import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
 import type { PanelPosition } from '@xyflow/system';
 
 import type { FitViewOptions } from '../../types';
@@ -13,6 +13,7 @@ export type ControlProps = HTMLAttributes<HTMLDivElement> & {
   onFitView?: () => void;
   onInteractiveChange?: (interactiveStatus: boolean) => void;
   position?: PanelPosition;
+  children?: ReactNode;
 };
 
 export type ControlButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;

packages/react/src/additional-components/MiniMap/MiniMap.tsx

@@ -6,11 +6,11 @@ import { shallow } from 'zustand/shallow';
 import { getNodesBounds, getBoundsOfRects, XYMinimap, type Rect, type XYMinimapInstance } from '@xyflow/system';
 
 import { useStore, useStoreApi } from '../../hooks/useStore';
-import Panel from '../../components/Panel';
+import { Panel } from '../../components/Panel';
 import type { ReactFlowState } from '../../types';
 
-import type { MiniMapProps } from './types';
 import MiniMapNodes from './MiniMapNodes';
+import type { MiniMapProps } from './types';
 
 const defaultWidth = 200;
 const defaultHeight = 150;
@@ -37,7 +37,7 @@ const selector = (s: ReactFlowState) => {
 
 const ARIA_LABEL_KEY = 'react-flow__minimap-desc';
 
-function MiniMap({
+function MiniMapComponent({
   style,
   className,
   nodeStrokeColor,
@@ -171,6 +171,6 @@ function MiniMap({
   );
 }
 
-MiniMap.displayName = 'MiniMap';
+MiniMapComponent.displayName = 'MiniMap';
 
-export default memo(MiniMap);
+export const MiniMap = memo(MiniMapComponent);

packages/react/src/additional-components/MiniMap/MiniMapNode.tsx

@@ -3,7 +3,7 @@ import cc from 'classcat';
 
 import type { MiniMapNodeProps } from './types';
 
-function MiniMapNode({
+function MiniMapNodeComponent({
   id,
   x,
   y,
@@ -42,4 +42,4 @@ function MiniMapNode({
   );
 }
 
-export default memo(MiniMapNode);
+export const MiniMapNode = memo(MiniMapNodeComponent);

packages/react/src/additional-components/MiniMap/MiniMapNodes.tsx

@@ -5,8 +5,8 @@ import { NodeOrigin, getNodePositionWithOrigin } from '@xyflow/system';
 import { shallow } from 'zustand/shallow';
 
 import { useStore } from '../../hooks/useStore';
+import { MiniMapNode } from './MiniMapNode';
 import type { ReactFlowState } from '../../types';
-import MiniMapNode from './MiniMapNode';
 import type { MiniMapNodes as MiniMapNodesProps, GetMiniMapNodeAttribute, MiniMapNodeProps } from './types';
 
 declare const window: any;

packages/react/src/additional-components/MiniMap/index.tsx

@@ -1,2 +1,2 @@
-export { default as MiniMap } from './MiniMap';
+export { MiniMap } from './MiniMap';
 export * from './types';

packages/react/src/additional-components/NodeToolbar/NodeToolbar.tsx

@@ -6,8 +6,8 @@ import { getNodesBounds, Rect, Position, internalsSymbol, getNodeToolbarTransfor
 import { Node, ReactFlowState } from '../../types';
 import { useStore } from '../../hooks/useStore';
 import { useNodeId } from '../../contexts/NodeIdContext';
-import NodeToolbarPortal from './NodeToolbarPortal';
+import { NodeToolbarPortal } from './NodeToolbarPortal';
-import { NodeToolbarProps } from './types';
+import type { NodeToolbarProps } from './types';
 
 const nodeEqualityFn = (a?: Node, b?: Node) =>
   a?.computed?.positionAbsolute?.x !== b?.computed?.positionAbsolute?.x ||
@@ -35,7 +35,7 @@ const storeSelector = (state: ReactFlowState) => ({
   selectedNodesCount: state.nodes.filter((node) => node.selected).length,
 });
 
-function NodeToolbar({
+export function NodeToolbar({
   nodeId,
   children,
   className,
@@ -96,5 +96,3 @@ function NodeToolbar({
     </NodeToolbarPortal>
   );
 }
-
-export default NodeToolbar;

packages/react/src/additional-components/NodeToolbar/NodeToolbarPortal.tsx

@@ -6,7 +6,7 @@ import { useStore } from '../../hooks/useStore';
 
 const selector = (state: ReactFlowState) => state.domNode?.querySelector('.react-flow__renderer');
 
-function NodeToolbarPortal({ children }: { children: ReactNode }) {
+export function NodeToolbarPortal({ children }: { children: ReactNode }) {
   const wrapperRef = useStore(selector);
 
   if (!wrapperRef) {
@@ -15,5 +15,3 @@ function NodeToolbarPortal({ children }: { children: ReactNode }) {
 
   return createPortal(children, wrapperRef);
 }
-
-export default NodeToolbarPortal;

packages/react/src/additional-components/NodeToolbar/index.tsx

@@ -1,2 +1,2 @@
-export { default as NodeToolbar } from './NodeToolbar';
+export { NodeToolbar } from './NodeToolbar';
-export * from './types';
+export type { NodeToolbarProps } from './types';

packages/react/src/components/A11yDescriptions/index.tsx

@@ -32,7 +32,7 @@ function AriaLiveMessage({ rfId }: { rfId: string }) {
   );
 }
 
-function A11yDescriptions({ rfId, disableKeyboardA11y }: { rfId: string; disableKeyboardA11y: boolean }) {
+export function A11yDescriptions({ rfId, disableKeyboardA11y }: { rfId: string; disableKeyboardA11y: boolean }) {
   return (
     <>
       <div id={`${ARIA_NODE_DESC_KEY}-${rfId}`} style={style}>
@@ -47,5 +47,3 @@ function A11yDescriptions({ rfId, disableKeyboardA11y }: { rfId: string; disable
     </>
   );
 }
-
-export default A11yDescriptions;

packages/react/src/components/Attribution/index.tsx

@@ -1,13 +1,13 @@
 import type { PanelPosition, ProOptions } from '@xyflow/system';
 
-import Panel from '../Panel';
+import { Panel } from '../Panel';
 
 type AttributionProps = {
   proOptions?: ProOptions;
   position?: PanelPosition;
 };
 
-function Attribution({ proOptions, position = 'bottom-right' }: AttributionProps) {
+export function Attribution({ proOptions, position = 'bottom-right' }: AttributionProps) {
   if (proOptions?.hideAttribution) {
     return null;
   }
@@ -24,5 +24,3 @@ function Attribution({ proOptions, position = 'bottom-right' }: AttributionProps
     </Panel>
   );
 }
-
-export default Attribution;

packages/react/src/components/ConnectionLine/index.tsx

@@ -142,7 +142,7 @@ const selector = (s: ReactFlowState) => ({
   height: s.height,
 });
 
-function ConnectionLineWrapper({ containerStyle, style, type, component }: ConnectionLineWrapperProps) {
+export function ConnectionLineWrapper({ containerStyle, style, type, component }: ConnectionLineWrapperProps) {
   const { nodeId, handleType, nodesConnectable, width, height, connectionStatus } = useStore(selector, shallow);
   const isValid = !!(nodeId && handleType && width && nodesConnectable);
 
@@ -170,5 +170,3 @@ function ConnectionLineWrapper({ containerStyle, style, type, component }: Conne
     </svg>
   );
 }
-
-export default ConnectionLineWrapper;

packages/react/src/components/EdgeLabelRenderer/index.tsx

@@ -6,7 +6,7 @@ import type { ReactFlowState } from '../../types';
 
 const selector = (s: ReactFlowState) => s.domNode?.querySelector('.react-flow__edgelabel-renderer');
 
-function EdgeLabelRenderer({ children }: { children: ReactNode }) {
+export function EdgeLabelRenderer({ children }: { children: ReactNode }) {
   const edgeLabelRenderer = useStore(selector);
 
   if (!edgeLabelRenderer) {
@@ -15,5 +15,3 @@ function EdgeLabelRenderer({ children }: { children: ReactNode }) {
 
   return createPortal(children, edgeLabelRenderer);
 }
-
-export default EdgeLabelRenderer;

packages/react/src/components/EdgeWrapper/EdgeUpdateAnchors.tsx

@@ -18,7 +18,7 @@ type EdgeUpdateAnchorsProps = {
   setUpdating: (updating: boolean) => void;
 } & EdgePosition;
 
-function EdgeUpdateAnchors({
+export function EdgeUpdateAnchors({
   isUpdatable,
   edgeUpdaterRadius,
   edge,
@@ -133,5 +133,3 @@ function EdgeUpdateAnchors({
     </>
   );
 }
-
-export default EdgeUpdateAnchors;

packages/react/src/components/EdgeWrapper/index.tsx

@@ -1,4 +1,4 @@
-import { memo, useState, useMemo, useRef, type KeyboardEvent, useCallback } from 'react';
+import { useState, useMemo, useRef, type KeyboardEvent, useCallback } from 'react';
 import cc from 'classcat';
 import { shallow } from 'zustand/shallow';
 import {
@@ -11,11 +11,11 @@ import {
 
 import { useStoreApi, useStore } from '../../hooks/useStore';
 import { ARIA_EDGE_DESC_KEY } from '../A11yDescriptions';
-import type { EdgeWrapperProps } from '../../types';
 import { builtinEdgeTypes, nullPosition } from './utils';
-import EdgeUpdateAnchors from './EdgeUpdateAnchors';
+import { EdgeUpdateAnchors } from './EdgeUpdateAnchors';
+import type { EdgeWrapperProps } from '../../types';
 
-function EdgeWrapper({
+export function EdgeWrapper({
   id,
   edgesFocusable,
   edgesUpdatable,
@@ -258,7 +258,3 @@ function EdgeWrapper({
     </svg>
   );
 }
-
-EdgeWrapper.displayName = 'EdgeWrapper';
-
-export default memo(EdgeWrapper);

packages/react/src/components/Edges/BaseEdge.tsx

@@ -1,10 +1,10 @@
 import { isNumeric } from '@xyflow/system';
+import cc from 'classcat';
 
+import { EdgeText } from './EdgeText';
 import type { BaseEdgeProps } from '../../types';
-import EdgeText from './EdgeText';
-import classcat from 'classcat';
 
-const BaseEdge = ({
+export function BaseEdge({
   id,
   path,
   labelX,
@@ -20,7 +20,7 @@ const BaseEdge = ({
   markerStart,
   className,
   interactionWidth = 20,
-}: BaseEdgeProps) => {
+}: BaseEdgeProps) {
   return (
     <>
       <path
@@ -28,7 +28,7 @@ const BaseEdge = ({
         style={style}
         d={path}
         fill="none"
-        className={classcat(['react-flow__edge-path', className])}
+        className={cc(['react-flow__edge-path', className])}
         markerEnd={markerEnd}
         markerStart={markerStart}
       />
@@ -55,8 +55,4 @@ const BaseEdge = ({
       ) : null}
     </>
   );
-};
+}
-
-BaseEdge.displayName = 'BaseEdge';
-
-export default BaseEdge;

packages/react/src/components/Edges/BezierEdge.tsx

@@ -1,7 +1,7 @@
 import { memo } from 'react';
 import { Position, getBezierPath } from '@xyflow/system';
 
-import BaseEdge from './BaseEdge';
+import { BaseEdge } from './BaseEdge';
 import type { BezierEdgeProps } from '../../types';
 
 function createBezierEdge(params: { isInternal: boolean }) {

packages/react/src/components/Edges/EdgeAnchor.tsx

@@ -1,4 +1,4 @@
-import type { FC, MouseEvent as ReactMouseEvent, SVGAttributes } from 'react';
+import type { MouseEvent as ReactMouseEvent, SVGAttributes } from 'react';
 import cc from 'classcat';
 import { Position } from '@xyflow/system';
 
@@ -27,7 +27,7 @@ export interface EdgeAnchorProps extends SVGAttributes<SVGGElement> {
 
 const EdgeUpdaterClassName = 'react-flow__edgeupdater';
 
-export const EdgeAnchor: FC<EdgeAnchorProps> = ({
+export function EdgeAnchor({
   position,
   centerX,
   centerY,
@@ -36,16 +36,18 @@ export const EdgeAnchor: FC<EdgeAnchorProps> = ({
   onMouseEnter,
   onMouseOut,
   type,
-}: EdgeAnchorProps) => (
+}: EdgeAnchorProps) {
-  <circle
+  return (
-    onMouseDown={onMouseDown}
+    <circle
-    onMouseEnter={onMouseEnter}
+      onMouseDown={onMouseDown}
-    onMouseOut={onMouseOut}
+      onMouseEnter={onMouseEnter}
-    className={cc([EdgeUpdaterClassName, `${EdgeUpdaterClassName}-${type}`])}
+      onMouseOut={onMouseOut}
-    cx={shiftX(centerX, radius, position)}
+      className={cc([EdgeUpdaterClassName, `${EdgeUpdaterClassName}-${type}`])}
-    cy={shiftY(centerY, radius, position)}
+      cx={shiftX(centerX, radius, position)}
-    r={radius}
+      cy={shiftY(centerY, radius, position)}
-    stroke="transparent"
+      r={radius}
-    fill="transparent"
+      stroke="transparent"
-  />
+      fill="transparent"
-);
+    />
+  );
+}

packages/react/src/components/Edges/EdgeText.tsx

@@ -1,10 +1,10 @@
-import { memo, useState, type FC, type PropsWithChildren, useCallback } from 'react';
+import { memo, useState, useCallback } from 'react';
 import cc from 'classcat';
 import type { Rect } from '@xyflow/system';
 
 import type { EdgeTextProps } from '../../types';
 
-const EdgeText: FC<PropsWithChildren<EdgeTextProps>> = ({
+function EdgeTextComponent({
   x,
   y,
   label,
@@ -16,7 +16,7 @@ const EdgeText: FC<PropsWithChildren<EdgeTextProps>> = ({
   children,
   className,
   ...rest
-}) => {
+}: EdgeTextProps) {
   const [edgeTextBbox, setEdgeTextBbox] = useState<Rect>({ x: 1, y: 0, width: 0, height: 0 });
   const edgeTextClasses = cc(['react-flow__edge-textwrapper', className]);
 
@@ -68,5 +68,6 @@ const EdgeText: FC<PropsWithChildren<EdgeTextProps>> = ({
       {children}
     </g>
   );
-};
+}
-export default memo(EdgeText);
+
+export const EdgeText = memo(EdgeTextComponent);

packages/react/src/components/Edges/SimpleBezierEdge.tsx

@@ -1,7 +1,7 @@
 import { memo } from 'react';
 import { Position, getBezierEdgeCenter } from '@xyflow/system';
 
-import BaseEdge from './BaseEdge';
+import { BaseEdge } from './BaseEdge';
 import type { SimpleBezierEdgeProps } from '../../types';
 
 export interface GetSimpleBezierPathParams {

packages/react/src/components/Edges/SmoothStepEdge.tsx

@@ -1,7 +1,7 @@
 import { memo } from 'react';
 import { Position, getSmoothStepPath } from '@xyflow/system';
 
-import BaseEdge from './BaseEdge';
+import { BaseEdge } from './BaseEdge';
 import type { SmoothStepEdgeProps } from '../../types';
 
 function createSmoothStepEdge(params: { isInternal: boolean }) {

packages/react/src/components/Edges/StraightEdge.tsx

@@ -1,7 +1,7 @@
 import { memo } from 'react';
 import { getStraightPath } from '@xyflow/system';
 
-import BaseEdge from './BaseEdge';
+import { BaseEdge } from './BaseEdge';
 import type { StraightEdgeProps } from '../../types';
 
 function createStraightEdge(params: { isInternal: boolean }) {

packages/react/src/components/Handle/index.tsx

@@ -47,7 +47,7 @@ const connectingSelector =
     };
   };
 
-const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
+const HandleComponent = forwardRef<HTMLDivElement, HandleComponentProps>(
   (
     {
       type = 'source',
@@ -216,6 +216,6 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
   }
 );
 
-Handle.displayName = 'Handle';
+HandleComponent.displayName = 'Handle';
 
-export default memo(Handle);
+export const Handle = memo(HandleComponent);

packages/react/src/components/NodeWrapper/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, memo, type MouseEvent, type KeyboardEvent } from 'react';
+import { useEffect, useRef, type MouseEvent, type KeyboardEvent } from 'react';
 import cc from 'classcat';
 import { shallow } from 'zustand/shallow';
 import {
@@ -19,7 +19,7 @@ import { handleNodeClick } from '../Nodes/utils';
 import { arrowKeyDiffs, builtinNodeTypes } from './utils';
 import type { NodeWrapperProps } from '../../types';
 
-const NodeWrapper = ({
+export function NodeWrapper({
   id,
   onClick,
   onMouseEnter,
@@ -40,7 +40,7 @@ const NodeWrapper = ({
   nodeExtent,
   nodeOrigin,
   onError,
-}: NodeWrapperProps) => {
+}: NodeWrapperProps) {
   const { node, positionAbsoluteX, positionAbsoluteY, zIndex, isParent } = useStore((s) => {
     const node = s.nodeLookup.get(id)!;
 
@@ -257,8 +257,4 @@ const NodeWrapper = ({
       </Provider>
     </div>
   );
-};
+}
-
-NodeWrapper.displayName = 'NodeWrapper';
-
-export default memo(NodeWrapper);

packages/react/src/components/NodeWrapper/utils.tsx

@@ -1,10 +1,10 @@
 import type { ComponentType } from 'react';
 import type { NodeProps, XYPosition } from '@xyflow/system';
 
-import InputNode from '../Nodes/InputNode';
+import { InputNode } from '../Nodes/InputNode';
-import DefaultNode from '../Nodes/DefaultNode';
+import { DefaultNode } from '../Nodes/DefaultNode';
-import GroupNode from '../Nodes/GroupNode';
+import { GroupNode } from '../Nodes/GroupNode';
-import OutputNode from '../Nodes/OutputNode';
+import { OutputNode } from '../Nodes/OutputNode';
 import type { NodeTypes } from '../../types';
 
 export const arrowKeyDiffs: Record<string, XYPosition> = {

packages/react/src/components/Nodes/DefaultNode.tsx

@@ -1,14 +1,13 @@
-import { memo } from 'react';
 import { Position, type NodeProps } from '@xyflow/system';
 
-import Handle from '../../components/Handle';
+import { Handle } from '../../components/Handle';
 
-const DefaultNode = ({
+export function DefaultNode({
   data,
   isConnectable,
   targetPosition = Position.Top,
   sourcePosition = Position.Bottom,
-}: NodeProps) => {
+}: NodeProps) {
   return (
     <>
       <Handle type="target" position={targetPosition} isConnectable={isConnectable} />
@@ -16,8 +15,4 @@ const DefaultNode = ({
       <Handle type="source" position={sourcePosition} isConnectable={isConnectable} />
     </>
   );
-};
+}
-
-DefaultNode.displayName = 'DefaultNode';
-
-export default memo(DefaultNode);

packages/react/src/components/Nodes/GroupNode.tsx

@@ -1,5 +1,3 @@
-const GroupNode = () => null;
+export function GroupNode() {
-
+  return null;
-GroupNode.displayName = 'GroupNode';
+}
-
-export default GroupNode;

packages/react/src/components/Nodes/InputNode.tsx

@@ -1,15 +1,12 @@
-import { memo } from 'react';
 import { Position, type NodeProps } from '@xyflow/system';
 
-import Handle from '../../components/Handle';
+import { Handle } from '../../components/Handle';
 
-const InputNode = ({ data, isConnectable, sourcePosition = Position.Bottom }: NodeProps) => (
+export function InputNode({ data, isConnectable, sourcePosition = Position.Bottom }: NodeProps) {
-  <>
+  return (
-    {data?.label}
+    <>
-    <Handle type="source" position={sourcePosition} isConnectable={isConnectable} />
+      {data?.label}
-  </>
+      <Handle type="source" position={sourcePosition} isConnectable={isConnectable} />
-);
+    </>
-
+  );
-InputNode.displayName = 'InputNode';
+}
-
-export default memo(InputNode);

packages/react/src/components/Nodes/OutputNode.tsx

@@ -1,15 +1,12 @@
-import { memo } from 'react';
 import { Position, type NodeProps } from '@xyflow/system';
 
-import Handle from '../../components/Handle';
+import { Handle } from '../../components/Handle';
 
-const OutputNode = ({ data, isConnectable, targetPosition = Position.Top }: NodeProps) => (
+export function OutputNode({ data, isConnectable, targetPosition = Position.Top }: NodeProps) {
-  <>
+  return (
-    <Handle type="target" position={targetPosition} isConnectable={isConnectable} />
+    <>
-    {data?.label}
+      <Handle type="target" position={targetPosition} isConnectable={isConnectable} />
-  </>
+      {data?.label}
-);
+    </>
-
+  );
-OutputNode.displayName = 'OutputNode';
+}
-
-export default memo(OutputNode);

packages/react/src/components/Nodes/utils.ts

@@ -1,8 +1,8 @@
 import type { RefObject } from 'react';
 import type { StoreApi } from 'zustand';
+import { errorMessages } from '@xyflow/system';
 
 import type { ReactFlowState } from '../../types';
-import { errorMessages } from '@xyflow/system';
 
 // this handler is called by
 // 1. the click handler when node is not draggable or selectNodesOnDrag = false

packages/react/src/components/NodesSelection/index.tsx

@@ -3,7 +3,7 @@
  * made a selection with on or several nodes
  */
 
-import { memo, useRef, useEffect, type MouseEvent, type KeyboardEvent } from 'react';
+import { useRef, useEffect, type MouseEvent, type KeyboardEvent } from 'react';
 import cc from 'classcat';
 import { shallow } from 'zustand/shallow';
 import { getNodesBounds } from '@xyflow/system';
@@ -32,7 +32,7 @@ const selector = (s: ReactFlowState) => {
   };
 };
 
-function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboardA11y }: NodesSelectionProps) {
+export function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboardA11y }: NodesSelectionProps) {
   const store = useStoreApi();
   const { width, height, transformString, userSelectionActive } = useStore(selector, shallow);
   const updatePositions = useUpdateNodePositions();
@@ -93,5 +93,3 @@ function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboar
     </div>
   );
 }
-
-export default memo(NodesSelection);

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

@@ -6,13 +6,13 @@ import { useStore } from '../../hooks/useStore';
 import type { ReactFlowState } from '../../types';
 
 export type PanelProps = HTMLAttributes<HTMLDivElement> & {
-  position: PanelPosition;
+  position?: PanelPosition;
   children: ReactNode;
 };
 
 const selector = (s: ReactFlowState) => (s.userSelectionActive ? 'none' : 'all');
 
-function Panel({ position, children, className, style, ...rest }: PanelProps) {
+export function Panel({ position = 'top-left', children, className, style, ...rest }: PanelProps) {
   const pointerEvents = useStore(selector);
   const positionClasses = `${position}`.split('-');
 
@@ -26,5 +26,3 @@ function Panel({ position, children, className, style, ...rest }: PanelProps) {
     </div>
   );
 }
-
-export default Panel;

packages/react/src/components/ReactFlowProvider/index.tsx

@@ -6,7 +6,7 @@ import { Provider } from '../../contexts/RFStoreContext';
 import { createRFStore } from '../../store';
 import type { ReactFlowState, Node, Edge } from '../../types';
 
-function ReactFlowProvider({
+export function ReactFlowProvider({
   children,
   initialNodes,
   initialEdges,
@@ -35,7 +35,3 @@ function ReactFlowProvider({
 
   return <Provider value={storeRef.current}>{children}</Provider>;
 }
-
-ReactFlowProvider.displayName = 'ReactFlowProvider';
-
-export default ReactFlowProvider;

packages/react/src/components/SelectionListener/index.tsx

@@ -4,7 +4,7 @@
  * or is using the useOnSelectionChange hook.
  * @TODO: Now that we have the onNodesChange and on EdgesChange listeners, do we still need this component?
  */
-import { memo, useEffect } from 'react';
+import { useEffect } from 'react';
 import { shallow } from 'zustand/shallow';
 
 import { useStore, useStoreApi } from '../../hooks/useStore';
@@ -30,7 +30,7 @@ function areEqual(a: SelectorSlice, b: SelectorSlice) {
   );
 }
 
-const SelectionListener = memo(({ onSelectionChange }: SelectionListenerProps) => {
+function SelectionListenerInner({ onSelectionChange }: SelectionListenerProps) {
   const store = useStoreApi();
   const { selectedNodes, selectedEdges } = useStore(selector, areEqual);
 
@@ -42,20 +42,16 @@ const SelectionListener = memo(({ onSelectionChange }: SelectionListenerProps) =
   }, [selectedNodes, selectedEdges, onSelectionChange]);
 
   return null;
-});
+}
-
-SelectionListener.displayName = 'SelectionListener';
 
 const changeSelector = (s: ReactFlowState) => !!s.onSelectionChangeHandlers;
 
-function Wrapper({ onSelectionChange }: SelectionListenerProps) {
+export function SelectionListener({ onSelectionChange }: SelectionListenerProps) {
   const storeHasSelectionChangeHandlers = useStore(changeSelector);
 
   if (onSelectionChange || storeHasSelectionChangeHandlers) {
-    return <SelectionListener onSelectionChange={onSelectionChange} />;
+    return <SelectionListenerInner onSelectionChange={onSelectionChange} />;
   }
 
   return null;
 }
-
-export default Wrapper;

packages/react/src/components/StoreUpdater/index.tsx

@@ -84,7 +84,7 @@ const selector = (s: ReactFlowState) => ({
   reset: s.reset,
 });
 
-const StoreUpdater = (props: StoreUpdaterProps) => {
+export function StoreUpdater(props: StoreUpdaterProps) {
   const {
     setNodes,
     setEdges,
@@ -149,6 +149,4 @@ const StoreUpdater = (props: StoreUpdaterProps) => {
   );
 
   return null;
-};
+}
-
-export default StoreUpdater;

packages/react/src/components/UserSelection/index.tsx

@@ -8,7 +8,7 @@ const selector = (s: ReactFlowState) => ({
   userSelectionRect: s.userSelectionRect,
 });
 
-function UserSelection() {
+export function UserSelection() {
   const { userSelectionActive, userSelectionRect } = useStore(selector, shallow);
   const isActive = userSelectionActive && userSelectionRect;
 
@@ -27,5 +27,3 @@ function UserSelection() {
     />
   );
 }
-
-export default UserSelection;

packages/react/src/components/ViewportPortal/index.tsx

@@ -6,7 +6,7 @@ import type { ReactFlowState } from '../../types';
 
 const selector = (s: ReactFlowState) => s.domNode?.querySelector('.react-flow__viewport-portal');
 
-function ViewportPortal({ children }: { children: ReactNode }) {
+export function ViewportPortal({ children }: { children: ReactNode }) {
   const viewPortalDiv = useStore(selector);
 
   if (!viewPortalDiv) {
@@ -15,5 +15,3 @@ function ViewportPortal({ children }: { children: ReactNode }) {
 
   return createPortal(children, viewPortalDiv);
 }
-
-export default ViewportPortal;

packages/react/src/container/EdgeRenderer/MarkerSymbols.tsx

@@ -57,5 +57,3 @@ export function useMarkerSymbol(type: MarkerType) {
 
   return symbol;
 }
-
-export default MarkerSymbols;

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

@@ -2,10 +2,10 @@ import { memo, ReactNode } from 'react';
 import { shallow } from 'zustand/shallow';
 
 import { useStore } from '../../hooks/useStore';
-import useVisibleEdgeIds from '../../hooks/useVisibleEdgeIds';
+import { useVisibleEdgeIds } from '../../hooks/useVisibleEdgeIds';
 import MarkerDefinitions from './MarkerDefinitions';
 import { GraphViewProps } from '../GraphView';
-import EdgeWrapper from '../../components/EdgeWrapper';
+import { EdgeWrapper } from '../../components/EdgeWrapper';
 import type { ReactFlowState } from '../../types';
 
 type EdgeRendererProps = Pick<
@@ -40,7 +40,7 @@ const selector = (s: ReactFlowState) => ({
   onError: s.onError,
 });
 
-const EdgeRenderer = ({
+function EdgeRendererComponent({
   defaultMarkerColor,
   onlyRenderVisibleElements,
   rfId,
@@ -56,8 +56,7 @@ const EdgeRenderer = ({
   onEdgeDoubleClick,
   onEdgeUpdateStart,
   onEdgeUpdateEnd,
-  children,
+}: EdgeRendererProps) {
-}: EdgeRendererProps) => {
   const { edgesFocusable, edgesUpdatable, elementsSelectable, onError } = useStore(selector, shallow);
   const edgeIds = useVisibleEdgeIds(onlyRenderVisibleElements);
 
@@ -90,11 +89,10 @@ const EdgeRenderer = ({
           />
         );
       })}
-      {children}
     </div>
   );
-};
+}
 
-EdgeRenderer.displayName = 'EdgeRenderer';
+EdgeRendererComponent.displayName = 'EdgeRenderer';
 
-export default memo(EdgeRenderer);
+export const EdgeRenderer = memo(EdgeRendererComponent);

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

@@ -4,9 +4,9 @@ import { useStore } from '../../hooks/useStore';
 import { useGlobalKeyHandler } from '../../hooks/useGlobalKeyHandler';
 import { useKeyPress } from '../../hooks/useKeyPress';
 import { GraphViewProps } from '../GraphView';
-import ZoomPane from '../ZoomPane';
+import { ZoomPane } from '../ZoomPane';
-import Pane from '../Pane';
+import { Pane } from '../Pane';
-import NodesSelection from '../../components/NodesSelection';
+import { NodesSelection } from '../../components/NodesSelection';
 import type { ReactFlowState } from '../../types';
 
 export type FlowRendererProps = Omit<
@@ -30,7 +30,7 @@ export type FlowRendererProps = Omit<
 
 const selector = (s: ReactFlowState) => s.nodesSelectionActive;
 
-const FlowRenderer = ({
+const FlowRendererComponent = ({
   children,
   onPaneClick,
   onPaneMouseEnter,
@@ -125,6 +125,6 @@ const FlowRenderer = ({
   );
 };
 
-FlowRenderer.displayName = 'FlowRenderer';
+FlowRendererComponent.displayName = 'FlowRenderer';
 
-export default memo(FlowRenderer);
+export const FlowRenderer = memo(FlowRendererComponent);

packages/react/src/container/GraphView/index.tsx

@@ -1,14 +1,14 @@
 import { memo } from 'react';
 
-import FlowRenderer from '../FlowRenderer';
+import { FlowRenderer } from '../FlowRenderer';
-import NodeRenderer from '../NodeRenderer';
+import { NodeRenderer } from '../NodeRenderer';
-import EdgeRenderer from '../EdgeRenderer';
+import { EdgeRenderer } from '../EdgeRenderer';
-import ViewportWrapper from '../Viewport';
+import { Viewport } from '../Viewport';
 import { useOnInitHandler } from '../../hooks/useOnInitHandler';
 import { useViewportSync } from '../../hooks/useViewportSync';
-import ConnectionLine from '../../components/ConnectionLine';
+import { ConnectionLineWrapper } from '../../components/ConnectionLine';
-import type { ReactFlowProps } from '../../types';
 import { useNodeOrEdgeTypesWarning } from './useNodeOrEdgeTypesWarning';
+import type { ReactFlowProps } from '../../types';
 
 export type GraphViewProps = Omit<
   ReactFlowProps,
@@ -38,7 +38,7 @@ export type GraphViewProps = Omit<
     rfId: string;
   };
 
-const GraphView = ({
+function GraphViewComponent({
   nodeTypes,
   edgeTypes,
   onInit,
@@ -102,7 +102,7 @@ const GraphView = ({
   rfId,
   viewport,
   onViewportChange,
-}: GraphViewProps) => {
+}: GraphViewProps) {
   useNodeOrEdgeTypesWarning(nodeTypes);
   useNodeOrEdgeTypesWarning(edgeTypes);
 
@@ -147,7 +147,7 @@ const GraphView = ({
       onViewportChange={onViewportChange}
       isControlledViewport={!!viewport}
     >
-      <ViewportWrapper>
+      <Viewport>
         <EdgeRenderer
           edgeTypes={edgeTypes}
           onEdgeClick={onEdgeClick}
@@ -166,7 +166,7 @@ const GraphView = ({
           disableKeyboardA11y={disableKeyboardA11y}
           rfId={rfId}
         />
-        <ConnectionLine
+        <ConnectionLineWrapper
           style={connectionLineStyle}
           type={connectionLineType}
           component={connectionLineComponent}
@@ -190,11 +190,11 @@ const GraphView = ({
           nodeExtent={nodeExtent}
           rfId={rfId}
         />
-      </ViewportWrapper>
+      </Viewport>
     </FlowRenderer>
   );
-};
+}
 
-GraphView.displayName = 'GraphView';
+GraphViewComponent.displayName = 'GraphView';
 
-export default memo(GraphView);
+export const GraphView = memo(GraphViewComponent);

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

@@ -1,13 +1,13 @@
 import { memo } from 'react';
 import { shallow } from 'zustand/shallow';
 
-import useVisibleNodesIds from '../../hooks/useVisibleNodeIds';
+import { useVisibleNodeIds } from '../../hooks/useVisibleNodeIds';
 import { useStore } from '../../hooks/useStore';
 import { containerStyle } from '../../styles/utils';
 import { GraphViewProps } from '../GraphView';
+import { useResizeObserver } from './useResizeObserver';
+import { NodeWrapper } from '../../components/NodeWrapper';
 import type { ReactFlowState } from '../../types';
-import useResizeObserver from './useResizeObserver';
-import NodeWrapper from '../../components/NodeWrapper';
 
 export type NodeRendererProps = Pick<
   GraphViewProps,
@@ -35,9 +35,9 @@ const selector = (s: ReactFlowState) => ({
   onError: s.onError,
 });
 
-const NodeRenderer = (props: NodeRendererProps) => {
+const NodeRendererComponent = (props: NodeRendererProps) => {
   const { nodesDraggable, nodesConnectable, nodesFocusable, elementsSelectable, onError } = useStore(selector, shallow);
-  const nodeIds = useVisibleNodesIds(props.onlyRenderVisibleElements);
+  const nodeIds = useVisibleNodeIds(props.onlyRenderVisibleElements);
   const resizeObserver = useResizeObserver();
 
   return (
@@ -96,6 +96,6 @@ const NodeRenderer = (props: NodeRendererProps) => {
   );
 };
 
-NodeRenderer.displayName = 'NodeRenderer';
+NodeRendererComponent.displayName = 'NodeRenderer';
 
-export default memo(NodeRenderer);
+export const NodeRenderer = memo(NodeRendererComponent);

packages/react/src/container/NodeRenderer/useResizeObserver.ts

@@ -5,7 +5,7 @@ import { useStore } from '../../hooks/useStore';
 
 const selector = (s: ReactFlowState) => s.updateNodeDimensions;
 
-export default function useResizeObserver() {
+export function useResizeObserver() {
   const updateNodeDimensions = useStore(selector);
   const resizeObserverRef = useRef<ResizeObserver>();
 

packages/react/src/container/Pane/index.tsx

@@ -2,12 +2,12 @@
  * The user selection rectangle gets displayed when a user drags the mouse while pressing shift
  */
 
-import { memo, useRef, type MouseEvent as ReactMouseEvent, type ReactNode } from 'react';
+import { useRef, type MouseEvent as ReactMouseEvent, type ReactNode } from 'react';
 import { shallow } from 'zustand/shallow';
 import cc from 'classcat';
 import { getNodesInside, getEventPosition, SelectionMode } from '@xyflow/system';
 
-import UserSelection from '../../components/UserSelection';
+import { UserSelection } from '../../components/UserSelection';
 import { containerStyle } from '../../styles/utils';
 import { useStore, useStoreApi } from '../../hooks/useStore';
 import { getSelectionChanges } from '../../utils';
@@ -50,196 +50,190 @@ const selector = (s: ReactFlowState) => ({
   dragging: s.paneDragging,
 });
 
-const Pane = memo(
+export function Pane({
-  ({
+  isSelecting,
-    isSelecting,
+  selectionMode = SelectionMode.Full,
-    selectionMode = SelectionMode.Full,
+  panOnDrag,
-    panOnDrag,
+  onSelectionStart,
-    onSelectionStart,
+  onSelectionEnd,
-    onSelectionEnd,
+  onPaneClick,
-    onPaneClick,
+  onPaneContextMenu,
-    onPaneContextMenu,
+  onPaneScroll,
-    onPaneScroll,
+  onPaneMouseEnter,
-    onPaneMouseEnter,
+  onPaneMouseMove,
-    onPaneMouseMove,
+  onPaneMouseLeave,
-    onPaneMouseLeave,
+  children,
-    children,
+}: PaneProps) {
-  }: PaneProps) => {
+  const container = useRef<HTMLDivElement | null>(null);
-    const container = useRef<HTMLDivElement | null>(null);
+  const store = useStoreApi();
-    const store = useStoreApi();
+  const prevSelectedNodesCount = useRef<number>(0);
-    const prevSelectedNodesCount = useRef<number>(0);
+  const prevSelectedEdgesCount = useRef<number>(0);
-    const prevSelectedEdgesCount = useRef<number>(0);
+  const containerBounds = useRef<DOMRect>();
-    const containerBounds = useRef<DOMRect>();
+  const { userSelectionActive, elementsSelectable, dragging } = useStore(selector, shallow);
-    const { userSelectionActive, elementsSelectable, dragging } = useStore(selector, shallow);
 
-    const resetUserSelection = () => {
+  const resetUserSelection = () => {
-      store.setState({ userSelectionActive: false, userSelectionRect: null });
+    store.setState({ userSelectionActive: false, userSelectionRect: null });
 
-      prevSelectedNodesCount.current = 0;
+    prevSelectedNodesCount.current = 0;
-      prevSelectedEdgesCount.current = 0;
+    prevSelectedEdgesCount.current = 0;
+  };
+
+  const onClick = (event: ReactMouseEvent) => {
+    onPaneClick?.(event);
+    store.getState().resetSelectedElements();
+    store.setState({ nodesSelectionActive: false });
+  };
+
+  const onContextMenu = (event: ReactMouseEvent) => {
+    if (Array.isArray(panOnDrag) && panOnDrag?.includes(2)) {
+      event.preventDefault();
+      return;
+    }
+
+    onPaneContextMenu?.(event);
+  };
+
+  const onWheel = onPaneScroll ? (event: React.WheelEvent) => onPaneScroll(event) : undefined;
+
+  const onMouseDown = (event: ReactMouseEvent): void => {
+    const { resetSelectedElements, domNode } = store.getState();
+    containerBounds.current = domNode?.getBoundingClientRect();
+
+    if (
+      !elementsSelectable ||
+      !isSelecting ||
+      event.button !== 0 ||
+      event.target !== container.current ||
+      !containerBounds.current
+    ) {
+      return;
+    }
+
+    const { x, y } = getEventPosition(event.nativeEvent, containerBounds.current);
+
+    resetSelectedElements();
+
+    store.setState({
+      userSelectionRect: {
+        width: 0,
+        height: 0,
+        startX: x,
+        startY: y,
+        x,
+        y,
+      },
+    });
+
+    onSelectionStart?.(event);
+  };
+
+  const onMouseMove = (event: ReactMouseEvent): void => {
+    const { userSelectionRect, edges, transform, nodeOrigin, nodes, onNodesChange, onEdgesChange } = store.getState();
+    if (!isSelecting || !containerBounds.current || !userSelectionRect) {
+      return;
+    }
+
+    store.setState({ userSelectionActive: true, nodesSelectionActive: false });
+
+    const mousePos = getEventPosition(event.nativeEvent, containerBounds.current);
+    const startX = userSelectionRect.startX ?? 0;
+    const startY = userSelectionRect.startY ?? 0;
+
+    const nextUserSelectRect = {
+      ...userSelectionRect,
+      x: mousePos.x < startX ? mousePos.x : startX,
+      y: mousePos.y < startY ? mousePos.y : startY,
+      width: Math.abs(mousePos.x - startX),
+      height: Math.abs(mousePos.y - startY),
     };
 
-    const onClick = (event: ReactMouseEvent) => {
+    const selectedNodes = getNodesInside(
-      onPaneClick?.(event);
+      nodes,
-      store.getState().resetSelectedElements();
+      nextUserSelectRect,
-      store.setState({ nodesSelectionActive: false });
+      transform,
-    };
+      selectionMode === SelectionMode.Partial,
-
+      true,
-    const onContextMenu = (event: ReactMouseEvent) => {
+      nodeOrigin
-      if (Array.isArray(panOnDrag) && panOnDrag?.includes(2)) {
-        event.preventDefault();
-        return;
-      }
-
-      onPaneContextMenu?.(event);
-    };
-
-    const onWheel = onPaneScroll ? (event: React.WheelEvent) => onPaneScroll(event) : undefined;
-
-    const onMouseDown = (event: ReactMouseEvent): void => {
-      const { resetSelectedElements, domNode } = store.getState();
-      containerBounds.current = domNode?.getBoundingClientRect();
-
-      if (
-        !elementsSelectable ||
-        !isSelecting ||
-        event.button !== 0 ||
-        event.target !== container.current ||
-        !containerBounds.current
-      ) {
-        return;
-      }
-
-      const { x, y } = getEventPosition(event.nativeEvent, containerBounds.current);
-
-      resetSelectedElements();
-
-      store.setState({
-        userSelectionRect: {
-          width: 0,
-          height: 0,
-          startX: x,
-          startY: y,
-          x,
-          y,
-        },
-      });
-
-      onSelectionStart?.(event);
-    };
-
-    const onMouseMove = (event: ReactMouseEvent): void => {
-      const { userSelectionRect, edges, transform, nodeOrigin, nodes, onNodesChange, onEdgesChange } = store.getState();
-      if (!isSelecting || !containerBounds.current || !userSelectionRect) {
-        return;
-      }
-
-      store.setState({ userSelectionActive: true, nodesSelectionActive: false });
-
-      const mousePos = getEventPosition(event.nativeEvent, containerBounds.current);
-      const startX = userSelectionRect.startX ?? 0;
-      const startY = userSelectionRect.startY ?? 0;
-
-      const nextUserSelectRect = {
-        ...userSelectionRect,
-        x: mousePos.x < startX ? mousePos.x : startX,
-        y: mousePos.y < startY ? mousePos.y : startY,
-        width: Math.abs(mousePos.x - startX),
-        height: Math.abs(mousePos.y - startY),
-      };
-
-      const selectedNodes = getNodesInside(
-        nodes,
-        nextUserSelectRect,
-        transform,
-        selectionMode === SelectionMode.Partial,
-        true,
-        nodeOrigin
-      );
-
-      const selectedEdgeIds = new Set<string>();
-      const selectedNodeIds = new Set<string>();
-
-      for (const selectedNode of selectedNodes) {
-        selectedNodeIds.add(selectedNode.id);
-
-        for (const edge of edges) {
-          if (edge.source === selectedNode.id || edge.target === selectedNode.id) {
-            selectedEdgeIds.add(edge.id);
-          }
-        }
-      }
-
-      if (prevSelectedNodesCount.current !== selectedNodeIds.size) {
-        prevSelectedNodesCount.current = selectedNodeIds.size;
-        const changes = getSelectionChanges(nodes, selectedNodeIds, true) as NodeChange[];
-        if (changes.length) {
-          onNodesChange?.(changes);
-        }
-      }
-
-      if (prevSelectedEdgesCount.current !== selectedEdgeIds.size) {
-        prevSelectedEdgesCount.current = selectedEdgeIds.size;
-        const changes = getSelectionChanges(edges, selectedEdgeIds) as EdgeChange[];
-        if (changes.length) {
-          onEdgesChange?.(changes);
-        }
-      }
-
-      store.setState({
-        userSelectionRect: nextUserSelectRect,
-      });
-    };
-
-    const onMouseUp = (event: ReactMouseEvent) => {
-      if (event.button !== 0) {
-        return;
-      }
-      const { userSelectionRect } = store.getState();
-      // We only want to trigger click functions when in selection mode if
-      // the user did not move the mouse.
-      if (!userSelectionActive && userSelectionRect && event.target === container.current) {
-        onClick?.(event);
-      }
-
-      store.setState({ nodesSelectionActive: prevSelectedNodesCount.current > 0 });
-
-      resetUserSelection();
-      onSelectionEnd?.(event);
-    };
-
-    const onMouseLeave = (event: ReactMouseEvent) => {
-      if (userSelectionActive) {
-        store.setState({ nodesSelectionActive: prevSelectedNodesCount.current > 0 });
-        onSelectionEnd?.(event);
-      }
-
-      resetUserSelection();
-    };
-
-    const hasActiveSelection = elementsSelectable && (isSelecting || userSelectionActive);
-
-    return (
-      <div
-        className={cc(['react-flow__pane', { dragging, selection: isSelecting }])}
-        onClick={hasActiveSelection ? undefined : wrapHandler(onClick, container)}
-        onContextMenu={wrapHandler(onContextMenu, container)}
-        onWheel={wrapHandler(onWheel, container)}
-        onMouseEnter={hasActiveSelection ? undefined : onPaneMouseEnter}
-        onMouseDown={hasActiveSelection ? onMouseDown : undefined}
-        onMouseMove={hasActiveSelection ? onMouseMove : onPaneMouseMove}
-        onMouseUp={hasActiveSelection ? onMouseUp : undefined}
-        onMouseLeave={hasActiveSelection ? onMouseLeave : onPaneMouseLeave}
-        ref={container}
-        style={containerStyle}
-      >
-        {children}
-        <UserSelection />
-      </div>
     );
-  }
-);
 
-Pane.displayName = 'Pane';
+    const selectedEdgeIds = new Set<string>();
+    const selectedNodeIds = new Set<string>();
 
-export default Pane;
+    for (const selectedNode of selectedNodes) {
+      selectedNodeIds.add(selectedNode.id);
+
+      for (const edge of edges) {
+        if (edge.source === selectedNode.id || edge.target === selectedNode.id) {
+          selectedEdgeIds.add(edge.id);
+        }
+      }
+    }
+
+    if (prevSelectedNodesCount.current !== selectedNodeIds.size) {
+      prevSelectedNodesCount.current = selectedNodeIds.size;
+      const changes = getSelectionChanges(nodes, selectedNodeIds, true) as NodeChange[];
+      if (changes.length) {
+        onNodesChange?.(changes);
+      }
+    }
+
+    if (prevSelectedEdgesCount.current !== selectedEdgeIds.size) {
+      prevSelectedEdgesCount.current = selectedEdgeIds.size;
+      const changes = getSelectionChanges(edges, selectedEdgeIds) as EdgeChange[];
+      if (changes.length) {
+        onEdgesChange?.(changes);
+      }
+    }
+
+    store.setState({
+      userSelectionRect: nextUserSelectRect,
+    });
+  };
+
+  const onMouseUp = (event: ReactMouseEvent) => {
+    if (event.button !== 0) {
+      return;
+    }
+    const { userSelectionRect } = store.getState();
+    // We only want to trigger click functions when in selection mode if
+    // the user did not move the mouse.
+    if (!userSelectionActive && userSelectionRect && event.target === container.current) {
+      onClick?.(event);
+    }
+
+    store.setState({ nodesSelectionActive: prevSelectedNodesCount.current > 0 });
+
+    resetUserSelection();
+    onSelectionEnd?.(event);
+  };
+
+  const onMouseLeave = (event: ReactMouseEvent) => {
+    if (userSelectionActive) {
+      store.setState({ nodesSelectionActive: prevSelectedNodesCount.current > 0 });
+      onSelectionEnd?.(event);
+    }
+
+    resetUserSelection();
+  };
+
+  const hasActiveSelection = elementsSelectable && (isSelecting || userSelectionActive);
+
+  return (
+    <div
+      className={cc(['react-flow__pane', { dragging, selection: isSelecting }])}
+      onClick={hasActiveSelection ? undefined : wrapHandler(onClick, container)}
+      onContextMenu={wrapHandler(onContextMenu, container)}
+      onWheel={wrapHandler(onWheel, container)}
+      onMouseEnter={hasActiveSelection ? undefined : onPaneMouseEnter}
+      onMouseDown={hasActiveSelection ? onMouseDown : undefined}
+      onMouseMove={hasActiveSelection ? onMouseMove : onPaneMouseMove}
+      onMouseUp={hasActiveSelection ? onMouseUp : undefined}
+      onMouseLeave={hasActiveSelection ? onMouseLeave : onPaneMouseLeave}
+      ref={container}
+      style={containerStyle}
+    >
+      {children}
+      <UserSelection />
+    </div>
+  );
+}

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

@@ -1,10 +1,10 @@
 import { useContext, type ReactNode } from 'react';
 
 import StoreContext from '../../contexts/RFStoreContext';
-import ReactFlowProvider from '../../components/ReactFlowProvider';
+import { ReactFlowProvider } from '../../components/ReactFlowProvider';
 import type { Node, Edge } from '../../types';
 
-function Wrapper({
+export function Wrapper({
   children,
   nodes,
   edges,
@@ -39,7 +39,3 @@ function Wrapper({
     </ReactFlowProvider>
   );
 }
-
-Wrapper.displayName = 'ReactFlowWrapper';
-
-export default Wrapper;

packages/react/src/container/ReactFlow/index.tsx

@@ -5,19 +5,18 @@ import {
   PanOnScrollMode,
   SelectionMode,
   infiniteExtent,
+  isMacOs,
   type NodeOrigin,
   type Viewport,
-  isMacOs,
 } from '@xyflow/system';
 
-import Attribution from '../../components/Attribution';
+import { A11yDescriptions } from '../../components/A11yDescriptions';
-
+import { Attribution } from '../../components/Attribution';
-import SelectionListener from '../../components/SelectionListener';
+import { SelectionListener } from '../../components/SelectionListener';
-import StoreUpdater from '../../components/StoreUpdater';
+import { StoreUpdater } from '../../components/StoreUpdater';
-import A11yDescriptions from '../../components/A11yDescriptions';
 import { useColorModeClass } from '../../hooks/useColorModeClass';
-import GraphView from '../GraphView';
+import { GraphView } from '../GraphView';
-import Wrapper from './Wrapper';
+import { Wrapper } from './Wrapper';
 import type { ReactFlowProps, ReactFlowRefType } from '../../types';
 
 export const initNodeOrigin: NodeOrigin = [0, 0];

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

@@ -9,7 +9,7 @@ type ViewportProps = {
   children: ReactNode;
 };
 
-export default function Viewport({ children }: ViewportProps) {
+export function Viewport({ children }: ViewportProps) {
   const transform = useStore(selector);
 
   return (

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

@@ -27,7 +27,7 @@ const selector = (s: ReactFlowState) => ({
   lib: s.lib,
 });
 
-const ZoomPane = ({
+export function ZoomPane({
   onPaneContextMenu,
   zoomOnScroll = true,
   zoomOnPinch = true,
@@ -47,7 +47,7 @@ const ZoomPane = ({
   noPanClassName,
   onViewportChange,
   isControlledViewport,
-}: ZoomPaneProps) => {
+}: ZoomPaneProps) {
   const store = useStoreApi();
   const zoomPane = useRef<HTMLDivElement>(null);
   const { userSelectionActive, lib } = useStore(selector, shallow);
@@ -142,6 +142,4 @@ const ZoomPane = ({
       {children}
     </div>
   );
-};
+}
-
-export default ZoomPane;

packages/react/src/hooks/useVisibleEdgeIds.ts

@@ -12,7 +12,7 @@ import { type ReactFlowState } from '../types';
  * @param onlyRenderVisible
  * @returns array with visible edge ids
  */
-function useVisibleEdgeIds(onlyRenderVisible: boolean): string[] {
+export function useVisibleEdgeIds(onlyRenderVisible: boolean): string[] {
   const edgeIds = useStore(
     useCallback(
       (s: ReactFlowState) => {
@@ -52,5 +52,3 @@ function useVisibleEdgeIds(onlyRenderVisible: boolean): string[] {
 
   return edgeIds;
 }
-
-export default useVisibleEdgeIds;

packages/react/src/hooks/useVisibleNodeIds.ts

@@ -20,10 +20,8 @@ const selector = (onlyRenderVisible: boolean) => (s: ReactFlowState) => {
  * @param onlyRenderVisible
  * @returns array with visible node ids
  */
-function useVisibleNodeIds(onlyRenderVisible: boolean) {
+export function useVisibleNodeIds(onlyRenderVisible: boolean) {
   const nodeIds = useStore(useCallback(selector(onlyRenderVisible), [onlyRenderVisible]), shallow);
 
   return nodeIds;
 }
-
-export default useVisibleNodeIds;

packages/react/src/index.ts

@@ -1,16 +1,16 @@
 export { default as ReactFlow } from './container/ReactFlow';
-export { default as Handle, type HandleComponentProps } from './components/Handle';
+export { Handle, type HandleComponentProps } from './components/Handle';
-export { default as EdgeText } from './components/Edges/EdgeText';
+export { EdgeText } from './components/Edges/EdgeText';
 export { StraightEdge } from './components/Edges/StraightEdge';
 export { StepEdge } from './components/Edges/StepEdge';
 export { BezierEdge } from './components/Edges/BezierEdge';
 export { SimpleBezierEdge, getSimpleBezierPath } from './components/Edges/SimpleBezierEdge';
 export { SmoothStepEdge } from './components/Edges/SmoothStepEdge';
-export { default as BaseEdge } from './components/Edges/BaseEdge';
+export { BaseEdge } from './components/Edges/BaseEdge';
-export { default as ReactFlowProvider } from './components/ReactFlowProvider';
+export { ReactFlowProvider } from './components/ReactFlowProvider';
-export { default as Panel, type PanelProps } from './components/Panel';
+export { Panel, type PanelProps } from './components/Panel';
-export { default as EdgeLabelRenderer } from './components/EdgeLabelRenderer';
+export { EdgeLabelRenderer } from './components/EdgeLabelRenderer';
-export { default as ViewportPortal } from './components/ViewportPortal';
+export { ViewportPortal } from './components/ViewportPortal';
 
 export { useReactFlow } from './hooks/useReactFlow';
 export { useUpdateNodeInternals } from './hooks/useUpdateNodeInternals';