chore(react): cleanup exports

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) => (
-  <circle
-    onMouseDown={onMouseDown}
-    onMouseEnter={onMouseEnter}
-    onMouseOut={onMouseOut}
-    className={cc([EdgeUpdaterClassName, `${EdgeUpdaterClassName}-${type}`])}
-    cx={shiftX(centerX, radius, position)}
-    cy={shiftY(centerY, radius, position)}
-    r={radius}
-    stroke="transparent"
-    fill="transparent"
-  />
-);
+}: EdgeAnchorProps) {
+  return (
+    <circle
+      onMouseDown={onMouseDown}
+      onMouseEnter={onMouseEnter}
+      onMouseOut={onMouseOut}
+      className={cc([EdgeUpdaterClassName, `${EdgeUpdaterClassName}-${type}`])}
+      cx={shiftX(centerX, radius, position)}
+      cy={shiftY(centerY, radius, position)}
+      r={radius}
+      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 DefaultNode from '../Nodes/DefaultNode';
-import GroupNode from '../Nodes/GroupNode';
-import OutputNode from '../Nodes/OutputNode';
+import { InputNode } from '../Nodes/InputNode';
+import { DefaultNode } from '../Nodes/DefaultNode';
+import { GroupNode } from '../Nodes/GroupNode';
+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;
-
-GroupNode.displayName = 'GroupNode';
-
-export default GroupNode;
+export function GroupNode() {
+  return null;
+}

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) => (
-  <>
-    {data?.label}
-    <Handle type="source" position={sourcePosition} isConnectable={isConnectable} />
-  </>
-);
-
-InputNode.displayName = 'InputNode';
-
-export default memo(InputNode);
+export function InputNode({ data, isConnectable, sourcePosition = Position.Bottom }: NodeProps) {
+  return (
+    <>
+      {data?.label}
+      <Handle type="source" position={sourcePosition} isConnectable={isConnectable} />
+    </>
+  );
+}

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) => (
-  <>
-    <Handle type="target" position={targetPosition} isConnectable={isConnectable} />
-    {data?.label}
-  </>
-);
-
-OutputNode.displayName = 'OutputNode';
-
-export default memo(OutputNode);
+export function OutputNode({ data, isConnectable, targetPosition = Position.Top }: NodeProps) {
+  return (
+    <>
+      <Handle type="target" position={targetPosition} isConnectable={isConnectable} />
+      {data?.label}
+    </>
+  );
+}

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;