Renamed to ViewportPortal

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

@@ -4,9 +4,9 @@ import { createPortal } from 'react-dom';
 import { useStore } from '../../hooks/useStore';
 import type { ReactFlowState } from '../../types';
 
-const selector = (s: ReactFlowState) => s.domNode?.querySelector('.react-flow__view-portal');
+const selector = (s: ReactFlowState) => s.domNode?.querySelector('.react-flow__viewport-portal');
 
-function ViewPortal({ children }: { children: ReactNode }) {
+function ViewportPortal({ children }: { children: ReactNode }) {
   const viewPortalDiv = useStore(selector);
 
   if (!viewPortalDiv) {
@@ -16,4 +16,4 @@ function ViewPortal({ children }: { children: ReactNode }) {
   return createPortal(children, viewPortalDiv);
 }
 
-export default ViewPortal;
+export default ViewportPortal;

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

@@ -180,7 +180,7 @@ const GraphView = ({
           />
         </EdgeRenderer>
         <div className="react-flow__edgelabel-renderer" />
-        <div className="react-flow__view-portal" />
+        <div className="react-flow__viewport-portal" />
         <NodeRenderer
           nodeTypes={nodeTypesWrapped}
           onNodeClick={onNodeClick}

packages/react/src/index.ts

@@ -10,6 +10,7 @@ export { default as BaseEdge } from './components/Edges/BaseEdge';
 export { default as ReactFlowProvider } from './components/ReactFlowProvider';
 export { default as Panel, type PanelProps } from './components/Panel';
 export { default as EdgeLabelRenderer } from './components/EdgeLabelRenderer';
+export { default as ViewportPortal } from './components/ViewportPortal';
 
 export { default as useReactFlow } from './hooks/useReactFlow';
 export { default as useUpdateNodeInternals } from './hooks/useUpdateNodeInternals';

packages/svelte/src/lib/components/ViewPortal/index.ts

@@ -1 +0,0 @@
-export { default as ViewPortal } from './ViewPortal.svelte';

packages/svelte/src/lib/components/ViewportPortal/ViewportPortal.svelte

@@ -7,6 +7,6 @@
   const { domNode } = useStore();
 </script>
 
-<div use:portal={{ target: '.svelte-flow__view-portal', domNode: $domNode }}>
+<div use:portal={{ target: '.svelte-flow__viewport-portal', domNode: $domNode }}>
   <slot />
 </div>

packages/svelte/src/lib/components/ViewportPortal/index.ts

@@ -0,0 +1 @@
+export { default as ViewportPortal } from './ViewportPortal.svelte';

packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte

@@ -218,7 +218,7 @@
           <slot name="connectionLine" slot="connectionLine" />
         </ConnectionLine>
         <div class="svelte-flow__edgelabel-renderer" />
-        <div class="svelte-view-portal" />
+        <div class="svelte-flow__viewport-portal" />
         <NodeRenderer
           on:nodeclick
           on:nodemouseenter

packages/svelte/src/lib/index.ts

@@ -6,6 +6,7 @@ export * from '$lib/container/SvelteFlow/types';
 export * from '$lib/container/Panel';
 export * from '$lib/components/SvelteFlowProvider';
 export * from '$lib/components/EdgeLabelRenderer';
+export * from '$lib/components/ViewportPortal';
 export * from '$lib/components/BaseEdge';
 export { BezierEdge, StepEdge, SmoothStepEdge, StraightEdge } from '$lib/components/edges';
 export * from '$lib/components/Handle';