chore(packages): use temporary scope name

examples/nextjs/cypress/components/hooks/useEdges.cy.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { ReactFlow, Edge, useEdges } from '@react-flow/bundle';
+import ReactFlow, { Edge, useEdges } from 'reactflow';
 
 import { nodes as initialNodes, edges as initialEdges } from '../../fixtures/simpleflow';
 

examples/nextjs/cypress/components/hooks/useNodes.cy.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { Node, ReactFlow, useNodes } from '@react-flow/bundle';
+import ReactFlow, { Node, useNodes } from 'reactflow';
 
 import { nodes } from '../../fixtures/simpleflow';
 

examples/nextjs/cypress/components/hooks/useOnViewportChange.cy.tsx

@@ -1,4 +1,4 @@
-import { ReactFlow, useOnViewportChange, Viewport } from '@react-flow/bundle';
+import ReactFlow, { useOnViewportChange, Viewport } from 'reactflow';
 
 describe('useOnViewportChange.cy.tsx', () => {
   it('listen to viewport drag', () => {

examples/nextjs/cypress/components/hooks/useViewport.cy.tsx

@@ -1,4 +1,4 @@
-import { ReactFlow, useViewport, Viewport } from '@react-flow/bundle';
+import ReactFlow, { useViewport, Viewport } from 'reactflow';
 
 describe('useViewport.cy.tsx', () => {
   it('handles drag', () => {

examples/nextjs/cypress/components/reactflow/basic-props.cy.tsx

@@ -1,4 +1,4 @@
-import { ReactFlow, EdgeProps } from '@react-flow/bundle';
+import ReactFlow, { EdgeProps } from 'reactflow';
 
 import ControlledFlow from '../../support/ControlledFlow';
 import * as simpleflow from '../../fixtures/simpleflow';

examples/nextjs/cypress/components/reactflow/uncontrolled.cy.tsx

@@ -1,4 +1,4 @@
-import { ReactFlow } from '@react-flow/bundle';
+import ReactFlow from 'reactflow';
 
 import { nodes, edges } from '../../fixtures/simpleflow';
 

examples/nextjs/cypress/components/reactflow/view-props.cy.tsx

@@ -1,4 +1,4 @@
-import { ReactFlow, ReactFlowProps, Viewport, useViewport, SnapGrid, CoordinateExtent, Node } from '@react-flow/bundle';
+import ReactFlow, { ReactFlowProps, Viewport, useViewport, SnapGrid, CoordinateExtent, Node } from 'reactflow';
 
 import ControlledFlow from '../../support/ControlledFlow';
 import * as simpleflow from '../../fixtures/simpleflow';

examples/nextjs/cypress/components/utils/graph-utils.cy.ts

@@ -1,4 +1,4 @@
-import { Node, Edge, isNode, isEdge, getOutgoers, getIncomers, addEdge } from '@react-flow/bundle';
+import { Node, Edge, isNode, isEdge, getOutgoers, getIncomers, addEdge } from 'reactflow';
 
 const nodes: Node[] = [
   {

examples/nextjs/cypress/fixtures/simpleflow.ts

@@ -1,4 +1,4 @@
-import { Node, Edge } from '@react-flow/bundle';
+import { Node, Edge } from 'reactflow';
 
 export const nodes: Node[] = [
   {

examples/nextjs/cypress/support/ControlledFlow.tsx

@@ -10,7 +10,7 @@ import {
   Connection,
   addEdge,
   ReactFlowProps,
-} from '@react-flow/bundle';
+} from 'reactflow';
 
 function ControlledFlow({
   addOnNodeChangeHandler = true,

examples/nextjs/cypress/support/component.ts

@@ -20,7 +20,7 @@ import './commands';
 // require('./commands')
 
 import { mount } from 'cypress/react18';
-import { XYPosition } from '@react-flow/bundle';
+import { XYPosition } from 'reactflow';
 
 import '../../styles/globals.css';
 import '../../styles/rf-style.css';

examples/nextjs/pages/UpdatableEdge/index.tsx

@@ -13,7 +13,7 @@ import ReactFlow, {
   HandleType,
 } from 'reactflow';
 
-import { Controls } from '@react-flow/controls';
+import { Controls } from '@rctflw/controls';
 
 const initialNodes: Node[] = [
   {

examples/nextjs/pages/_app.tsx

@@ -4,7 +4,7 @@ import '../styles/globals.css';
 
 // Unfortunately this doesn't work because preconsruct clears the dist folder and there is
 // no way to hook into the watch process to copy the files back to the dist folder
-// import '@react-flow/core/dist/theme-default.css';
+// import '@rctflw/core/dist/theme-default.css';
 
 // this is a workaround for testing the theme. See explanation above.
 import '../styles/rf-style.css';

package.json

@@ -14,7 +14,7 @@
     "dev": "preconstruct watch",
     "dev:example": "cd examples/nextjs && yarn dev",
     "build": "preconstruct build && yarn run packages",
-    "packages": "yarn workspaces foreach --include '@react-flow/**' --include 'reactflow' run build",
+    "packages": "yarn workspaces foreach --include '@rctflw/**' --include 'reactflow' run build",
     "test:all": "yarn test:chrome && yarn test:firefox",
     "test:e2e": "cd examples/nextjs && cypress run",
     "test:component": "cd examples/nextjs && cypress run --component",

packages/background/README.md

@@ -1,10 +1,10 @@
-# @react-flow/background
+# @rctflw/background
 
 Background component for React Flow.
 
 ## Installation 
 
 ```sh 
-npm install @react-flow/background
+npm install @rctflw/background
 ```
 

packages/background/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@react-flow/background",
+  "name": "@rctflw/background",
   "version": "11.0.0-next.0",
   "description": "Background component with different variants for React Flow",
   "keywords": [
@@ -13,9 +13,9 @@
   "files": [
     "dist"
   ],
-  "main": "dist/react-flow-background.cjs.js",
+  "main": "dist/rctflw-background.cjs.js",
-  "module": "dist/react-flow-background.esm.js",
+  "module": "dist/rctflw-background.esm.js",
-  "types": "dist/react-flow-background.cjs.d.ts",
+  "types": "dist/rctflw-background.cjs.d.ts",
   "sideEffects": false,
   "license": "MIT",
   "repository": {
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.9",
-    "@react-flow/core": "workspace:*",
+    "@rctflw/core": "workspace:*",
     "classcat": "^5.0.3"
   },
   "peerDependencies": {

packages/background/src/Background.tsx

@@ -1,6 +1,6 @@
 import { memo, useRef, useId } from 'react';
 import cc from 'classcat';
-import { useStore, ReactFlowState } from '@react-flow/core';
+import { useStore, ReactFlowState } from '@rctflw/core';
 
 import { BackgroundProps, BackgroundVariant } from './types';
 import { DotPattern, LinePattern } from './Patterns';
@@ -39,15 +39,10 @@ function Background({
   const isDots = variant === BackgroundVariant.Dots;
   const isCross = variant === BackgroundVariant.Cross;
   const gapXY: [number, number] = Array.isArray(gap) ? gap : [gap, gap];
-  const scaledGap: [number, number] = [
+  const scaledGap: [number, number] = [gapXY[0] * tScale || 1, gapXY[1] * tScale || 1];
-    gapXY[0] * tScale || 1,
-    gapXY[1] * tScale || 1,
-  ];
   const scaledSize = patternSize * tScale;
 
-  const patternDimensions: [number, number] = isCross
+  const patternDimensions: [number, number] = isCross ? [scaledSize, scaledSize] : scaledGap;
-    ? [scaledSize, scaledSize]
-    : scaledGap;
 
   const patternOffset = isDots
     ? [scaledSize / 2, scaledSize / 2]
@@ -78,20 +73,10 @@ function Background({
         {isDots ? (
           <DotPattern color={patternColor} radius={scaledSize / 2} />
         ) : (
-          <LinePattern
+          <LinePattern dimensions={patternDimensions} color={patternColor} lineWidth={lineWidth} />
-            dimensions={patternDimensions}
-            color={patternColor}
-            lineWidth={lineWidth}
-          />
         )}
       </pattern>
-      <rect
+      <rect x="0" y="0" width="100%" height="100%" fill={`url(#${patternId})`} />
-        x="0"
-        y="0"
-        width="100%"
-        height="100%"
-        fill={`url(#${patternId})`}
-      />
     </svg>
   );
 }

packages/controls/README.md

@@ -1,10 +1,10 @@
-# @react-flow/controls
+# @rctflw/controls
 
 Controls component for React Flow.
 
 ## Installation 
 
 ```sh 
-npm install @react-flow/controls
+npm install @rctflw/controls
 ```
 

packages/controls/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@react-flow/controls",
+  "name": "@rctflw/controls",
   "version": "11.0.0-next.0",
   "description": "Component to control the viewport of a React Flow instance",
   "keywords": [
@@ -13,9 +13,9 @@
   "files": [
     "dist"
   ],
-  "main": "dist/react-flow-controls.cjs.js",
+  "main": "dist/rctflw-controls.cjs.js",
-  "module": "dist/react-flow-controls.esm.js",
+  "module": "dist/rctflw-controls.esm.js",
-  "types": "dist/react-flow-controls.cjs.d.ts",
+  "types": "dist/rctflw-controls.cjs.d.ts",
   "sideEffects": false,
   "license": "MIT",
   "repository": {
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.9",
-    "@react-flow/core": "workspace:*",
+    "@rctflw/core": "workspace:*",
     "classcat": "^5.0.3"
   },
   "peerDependencies": {

packages/controls/src/Controls.tsx

@@ -1,6 +1,6 @@
 import { memo, FC, useEffect, useState, PropsWithChildren } from 'react';
 import cc from 'classcat';
-import { useStore, useStoreApi, useReactFlow, ReactFlowState, Panel } from '@react-flow/core';
+import { useStore, useStoreApi, useReactFlow, ReactFlowState, Panel } from '@rctflw/core';
 
 import PlusIcon from './Icons/Plus';
 import MinusIcon from './Icons/Minus';

packages/controls/src/types.ts

@@ -1,5 +1,5 @@
 import { ButtonHTMLAttributes, HTMLAttributes } from 'react';
-import { FitViewOptions, PanelPosition } from '@react-flow/core';
+import { FitViewOptions, PanelPosition } from '@rctflw/core';
 
 export interface ControlProps extends HTMLAttributes<HTMLDivElement> {
   showZoom?: boolean;

packages/core/README.md

@@ -1,10 +1,10 @@
-# @react-flow/core
+# @rctflw/core
 
 Core components and util functions of React Flow.
 
 ## Installation 
 
 ```sh 
-npm install @react-flow/core
+npm install @rctflw/core
 ```
 

packages/core/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@react-flow/core",
+  "name": "@rctflw/core",
   "version": "11.0.0-next.0",
   "description": "Core components and util functions of React Flow.",
   "keywords": [
@@ -13,9 +13,9 @@
   "files": [
     "dist"
   ],
-  "main": "dist/react-flow-core.cjs.js",
+  "main": "dist/rctflw-core.cjs.js",
-  "module": "dist/react-flow-core.esm.js",
+  "module": "dist/rctflw-core.esm.js",
-  "types": "dist/react-flow-core.cjs.d.ts",
+  "types": "dist/rctflw-core.cjs.d.ts",
   "sideEffects": false,
   "license": "MIT",
   "repository": {

packages/minimap/README.md

@@ -1,10 +1,10 @@
-# @react-flow/minimap
+# @rctflw/minimap
 
 Mini map component for React Flow.
 
 ## Installation 
 
 ```sh 
-npm install @react-flow/minimap
+npm install @rctflw/minimap
 ```
 

packages/minimap/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@react-flow/minimap",
+  "name": "@rctflw/minimap",
   "version": "11.0.0-next.0",
   "description": "Minimap component for React Flow.",
   "keywords": [
@@ -13,9 +13,9 @@
   "files": [
     "dist"
   ],
-  "main": "dist/react-flow-minimap.cjs.js",
+  "main": "dist/rctflw-minimap.cjs.js",
-  "module": "dist/react-flow-minimap.esm.js",
+  "module": "dist/rctflw-minimap.esm.js",
-  "types": "dist/react-flow-minimap.cjs.d.ts",
+  "types": "dist/rctflw-minimap.cjs.d.ts",
   "sideEffects": false,
   "license": "MIT",
   "repository": {
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.9",
-    "@react-flow/core": "workspace:*",
+    "@rctflw/core": "workspace:*",
     "classcat": "^5.0.3",
     "zustand": "^4.0.0"
   },

packages/minimap/src/MiniMap.tsx

@@ -2,7 +2,7 @@
 import { memo, useId } from 'react';
 import cc from 'classcat';
 import shallow from 'zustand/shallow';
-import { useStore, getRectOfNodes, ReactFlowState, Rect, Panel, getBoundsOfRects } from '@react-flow/core';
+import { useStore, getRectOfNodes, ReactFlowState, Rect, Panel, getBoundsOfRects } from '@rctflw/core';
 
 import MiniMapNode from './MiniMapNode';
 import { MiniMapProps, GetMiniMapNodeAttribute } from './types';

packages/minimap/src/types.ts

@@ -1,13 +1,10 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { HTMLAttributes } from 'react';
-import { Node, PanelPosition } from '@react-flow/core';
+import { Node, PanelPosition } from '@rctflw/core';
 
-export type GetMiniMapNodeAttribute<NodeData = any> = (
+export type GetMiniMapNodeAttribute<NodeData = any> = (node: Node<NodeData>) => string;
-  node: Node<NodeData>
-) => string;
 
-export interface MiniMapProps<NodeData = any>
+export interface MiniMapProps<NodeData = any> extends HTMLAttributes<SVGSVGElement> {
-  extends HTMLAttributes<SVGSVGElement> {
   nodeColor?: string | GetMiniMapNodeAttribute<NodeData>;
   nodeStrokeColor?: string | GetMiniMapNodeAttribute<NodeData>;
   nodeClassName?: string | GetMiniMapNodeAttribute<NodeData>;

packages/reactflow/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reactflow",
-  "version": "11.0.0-next.0",
+  "version": "11.0.0-next.2",
   "description": "A highly customizable React library for building node-based editors and interactive flow charts",
   "keywords": [
     "react",
@@ -28,10 +28,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.9",
-    "@react-flow/background": "workspace:*",
+    "@rctflw/background": "workspace:*",
-    "@react-flow/controls": "workspace:*",
+    "@rctflw/controls": "workspace:*",
-    "@react-flow/core": "workspace:*",
+    "@rctflw/core": "workspace:*",
-    "@react-flow/minimap": "workspace:*"
+    "@rctflw/minimap": "workspace:*"
   },
   "peerDependencies": {
     "react": ">=18",

packages/reactflow/src/index.ts

@@ -1,8 +1,8 @@
-export * from '@react-flow/core';
+export * from '@rctflw/core';
-export * from '@react-flow/minimap';
+export * from '@rctflw/minimap';
-export * from '@react-flow/controls';
+export * from '@rctflw/controls';
-export * from '@react-flow/background';
+export * from '@rctflw/background';
 
-import { ReactFlow } from '@react-flow/core';
+import { ReactFlow } from '@rctflw/core';
 
 export default ReactFlow;

yarn.lock

@@ -2301,12 +2301,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-flow/background@workspace:*, @react-flow/background@workspace:packages/background":
+"@rctflw/background@workspace:*, @rctflw/background@workspace:packages/background":
   version: 0.0.0-use.local
-  resolution: "@react-flow/background@workspace:packages/background"
+  resolution: "@rctflw/background@workspace:packages/background"
   dependencies:
     "@babel/runtime": ^7.18.9
-    "@react-flow/core": "workspace:*"
+    "@rctflw/core": "workspace:*"
     classcat: ^5.0.3
   peerDependencies:
     react: ">=18"
@@ -2314,12 +2314,12 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@react-flow/controls@workspace:*, @react-flow/controls@workspace:packages/controls":
+"@rctflw/controls@workspace:*, @rctflw/controls@workspace:packages/controls":
   version: 0.0.0-use.local
-  resolution: "@react-flow/controls@workspace:packages/controls"
+  resolution: "@rctflw/controls@workspace:packages/controls"
   dependencies:
     "@babel/runtime": ^7.18.9
-    "@react-flow/core": "workspace:*"
+    "@rctflw/core": "workspace:*"
     autoprefixer: ^10.4.8
     classcat: ^5.0.3
     postcss: ^8.4.16
@@ -2333,9 +2333,9 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@react-flow/core@workspace:*, @react-flow/core@workspace:packages/core":
+"@rctflw/core@workspace:*, @rctflw/core@workspace:packages/core":
   version: 0.0.0-use.local
-  resolution: "@react-flow/core@workspace:packages/core"
+  resolution: "@rctflw/core@workspace:packages/core"
   dependencies:
     "@babel/runtime": ^7.18.9
     "@types/d3": ^7.4.0
@@ -2357,12 +2357,12 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@react-flow/minimap@workspace:*, @react-flow/minimap@workspace:packages/minimap":
+"@rctflw/minimap@workspace:*, @rctflw/minimap@workspace:packages/minimap":
   version: 0.0.0-use.local
-  resolution: "@react-flow/minimap@workspace:packages/minimap"
+  resolution: "@rctflw/minimap@workspace:packages/minimap"
   dependencies:
     "@babel/runtime": ^7.18.9
-    "@react-flow/core": "workspace:*"
+    "@rctflw/core": "workspace:*"
     autoprefixer: ^10.4.8
     classcat: ^5.0.3
     postcss: ^8.4.16
@@ -8520,10 +8520,10 @@ __metadata:
   resolution: "reactflow@workspace:packages/reactflow"
   dependencies:
     "@babel/runtime": ^7.18.9
-    "@react-flow/background": "workspace:*"
+    "@rctflw/background": "workspace:*"
-    "@react-flow/controls": "workspace:*"
+    "@rctflw/controls": "workspace:*"
-    "@react-flow/core": "workspace:*"
+    "@rctflw/core": "workspace:*"
-    "@react-flow/minimap": "workspace:*"
+    "@rctflw/minimap": "workspace:*"
     autoprefixer: ^10.4.8
     postcss: ^8.4.14
     postcss-cli: ^10.0.0