diff --git a/README.md b/README.md index be3dcc70..fb6b7384 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ A highly customizable React component for building interactive graphs and node-based editors. -[🚀 Getting Started](https://reactflow.dev/docs/getting-started/installation) | [📖 Documentation](https://reactflow.dev/docs/api/react-flow-props) | [📺 Examples](https://reactflow.dev/docs/examples/overview) | [☎️ Discord](https://discord.gg/RVmnytFmGW) | [💎 React Flow Pro](https://pro.reactflow.dev/pricing) +[🚀 Getting Started](https://reactflow.dev/docs/quickstart/) | [📖 Documentation](https://reactflow.dev/docs/api/react-flow-props) | [📺 Examples](https://reactflow.dev/docs/examples/overview) | [☎️ Discord](https://discord.gg/RVmnytFmGW) | [💎 React Flow Pro](https://pro.reactflow.dev) @@ -25,11 +25,13 @@ A highly customizable React component for building interactive graphs and node-b - **Plugin Components:** [Background](https://reactflow.dev/docs/api/plugin-components/background), [MiniMap](https://reactflow.dev/docs/api/plugin-components/minimap) and [Controls](https://reactflow.dev/docs/api/plugin-components/controls) - **Reliable**: Written in [Typescript](https://www.typescriptlang.org/) and tested with [cypress](https://www.cypress.io/) -## Commercial Usage / Attribution +## Commercial Usage -React Flow includes a small attribution that links to the React Flow website. **We expect companies who are using React Flow commercially to subscribe to [React Flow Pro](https://pro.reactflow.dev/pricing) if they want to remove the attribution.** By subscribing you get access to other exclusive services like advanced examples, individual support or prioritized bug reports. In non-commercial applications you may hide the attribution without subscribing but are welcome to [sponsor us on Github](https://github.com/sponsors/wbkd). +**Are you using React Flow for a personal project?** Great! No sponsorship needed, you can support us by reporting any bugs you find, sending us screenshots of your projects, and starring us on Github 🌟 -You can find more information in our [React Flow Pro FAQs](https://pro.reactflow.dev/faq). +**Are you using React Flow at your organization and making money from it?** Awesome! We rely on your support to keep React Flow developed and maintained under an MIT License, just how we like it. You can do that on the [React Flow Pro website](https://pro.reactflow.dev) or through [Github Sponsors](https://github.com/sponsors/wbkd). + +You can find more information in our [React Flow Pro FAQs](https://pro.reactflow.dev/info). ## Installation @@ -39,14 +41,36 @@ The easiest way to get the latest version of React Flow is to install it via npm npm install reactflow ``` -## Quick Start +## Quickstart -This is only a very basic usage example of React Flow. To see everything that is possible with the library, please refer to the [website](https://reactflow.dev) for [guides](https://reactflow.dev/docs/guides/custom-nodes), [examples](https://reactflow.dev/docs/examples/overview) and [API reference](https://reactflow.dev/docs/api/react-flow-props). +This is only a very basic usage example of React Flow. To see everything that is possible with the library, please refer to the [website](https://reactflow.dev) for [guides](https://reactflow.dev/docs/guides/custom-nodes), [examples](https://reactflow.dev/docs/examples/overview) and the full [API reference](https://reactflow.dev/docs/api/react-flow-props). ```jsx -import ReactFlow, { MiniMap, Controls } from 'reactflow'; +import { useCallback } from 'react'; +import ReactFlow, { + MiniMap, + Controls, + Background, + useNodesState, + useEdgesState, + addEdge, +} from 'reactflow'; + +import 'reactflow/dist/style.css'; + +const initialNodes = [ + { id: '1', position: { x: 0, y: 0 }, data: { label: '1' } }, + { id: '2', position: { x: 0, y: 100 }, data: { label: '2' } }, +]; + +const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }]; + +function Flow() { + const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes); + const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges); + + const onConnect = useCallback((params) => setEdges((eds) => addEdge(params, eds)), [setEdges]); -function Flow({ nodes, edges, onNodesChange, onEdgesChange, onConnect }) { return ( + ); } @@ -78,12 +103,12 @@ pnpm test ## Maintainers -React Flow is developed and maintained by [webkid](https://webkid.io), a web development agency with focus on data driven applications from Berlin. If you need help or want to talk to us about a collaboration, feel free to contact us: +React Flow is the full-time project of Moritz and Christopher of [webkid](https://webkid.io/), based in Berlin. If you need help or want to talk to us about a collaboration, reach out through our [contact form](https://pro.reactflow.dev/contact) or by joining the [React Flow Discord Server](https://discord.gg/Bqt6xrs). -- Moritz Klack • [Twitter](https://twitter.com/moklick) • [Github](https://github.com/moklick) -- Christopher Möller • [Twitter](https://twitter.com/chrtze) • [Github](https://github.com/chrtze) +- Moritz Klack • [Twitter](https://twitter.com/moklick) • [Github](https://github.com/moklick) +- Christopher Möller • [Twitter](https://twitter.com/chrtze) • [Github](https://github.com/chrtze) -You can also use our [contact form](https://pro.reactflow.dev/contact) or join the [React Flow Discord Server](https://discord.gg/Bqt6xrs). +Any support you provide goes directly towards the development and maintenance of React Flow, allowing us to continue to operate as an independent company, working on what we think is best for React Flow as an open-source library. ## Community Packages diff --git a/examples/vite-app/index.html b/examples/vite-app/index.html index e0d1c840..f1cba741 100644 --- a/examples/vite-app/index.html +++ b/examples/vite-app/index.html @@ -4,7 +4,7 @@ - Vite + React + TS + React Flow Examples
diff --git a/examples/vite-app/package.json b/examples/vite-app/package.json index da15fb97..23bbc7fc 100644 --- a/examples/vite-app/package.json +++ b/examples/vite-app/package.json @@ -1,7 +1,7 @@ { "name": "@reactflow/examples", "private": true, - "version": "0.0.0", + "version": "0.0.2", "type": "module", "scripts": { "dev": "vite --port 3000 --open", @@ -13,6 +13,7 @@ "test-e2e": "start-server-and-test 'pnpm serve' http-get://localhost:3000 'pnpm test-e2e-cypress'" }, "dependencies": { + "classcat": "^5.0.3", "dagre": "^0.8.5", "localforage": "^1.10.0", "react": "^18.2.0", diff --git a/examples/vite-app/src/App/index.tsx b/examples/vite-app/src/App/index.tsx index 67e46e55..90339935 100644 --- a/examples/vite-app/src/App/index.tsx +++ b/examples/vite-app/src/App/index.tsx @@ -1,4 +1,4 @@ -import { ChangeEvent } from 'react'; +import { useEffect, useState } from 'react'; import { BrowserRouter, Route, Routes, useLocation, useNavigate } from 'react-router-dom'; import Basic from '../examples/Basic'; @@ -35,160 +35,218 @@ import UseReactFlow from '../examples/UseReactFlow'; import Validation from '../examples/Validation'; import UseKeyPress from '../examples/UseKeyPress'; import EdgeRouting from '../examples/EdgeRouting'; +import CancelConnection from '../examples/CancelConnection'; +import UseOnSelectionChange from '../examples/UseOnSelectionChange'; -const routes = [ +interface IRoute { + name: string; + path: string; + component: React.ComponentType; +} + +const routes: IRoute[] = [ { + name: 'Basic', path: '/', component: Basic, }, { + name: 'Backgrounds', path: '/backgrounds', component: Backgrounds, }, { + name: 'Cancel Connection', + path: '/cancel-connection', + component: CancelConnection, + }, + { + name: 'Controlled/Uncontrolled', path: '/controlled-uncontrolled', component: ControlledUncontrolled, }, { + name: 'Custom Connection Line', path: '/custom-connectionline', component: CustomConnectionLine, }, { + name: 'Custom Node', path: '/custom-node', component: CustomNode, }, { + name: 'Default Nodes', path: '/default-nodes', component: DefaultNodes, }, { + name: 'Drag Handle', path: '/draghandle', component: DragHandle, }, { + name: 'Drag and Drop', path: '/dragndrop', component: DragNDrop, }, { + name: 'Edges', path: '/edges', component: Edges, }, { + name: 'Edge Types', path: '/edge-types', component: EdgeTypes, }, { + name: 'Edge Routing', path: '/edge-routing', component: EdgeRouting, }, { + name: 'Empty', path: '/empty', component: Empty, }, { + name: 'Floating Edges', path: '/floating-edges', component: FloatingEdges, }, { + name: 'Hidden', path: '/hidden', component: Hidden, }, { + name: 'Interaction', path: '/interaction', component: Interaction, }, { + name: 'Layouting', path: '/layouting', component: Layouting, }, { + name: 'Multi Flows', path: '/multiflows', component: MultiFlows, }, { + name: 'Nested Nodes', path: '/nested-nodes', component: NestedNodes, }, { + name: 'Node Type Change', path: '/nodetype-change', component: NodeTypeChange, }, { + name: 'nodeTypes Object Change', path: '/nodetypesobject-change', component: NodeTypesObjectChange, }, { + name: 'Overview', path: '/overview', component: Overview, }, { + name: 'Provider', path: '/provider', component: Provider, }, { + name: 'Save/Restore', path: '/save-restore', component: SaveRestore, }, { + name: 'Stress', path: '/stress', component: Stress, }, { + name: 'Subflow', path: '/subflow', component: Subflow, }, { + name: 'Switch Flow', path: '/switch', component: SwitchFlow, }, { + name: 'Touch Device', path: '/touch-device', component: TouchDevice, }, { + name: 'Undirectional', path: '/undirectional', component: Undirectional, }, { + name: 'Updatable Edge', path: '/updatable-edge', component: UpdatableEdge, }, { + name: 'Update Node', path: '/update-node', component: UpdateNode, }, { + name: 'useOnSelectionChange', + path: '/use-on-selection-change', + component: UseOnSelectionChange, + }, + { + name: 'useReactFlow', path: '/usereactflow', component: UseReactFlow, }, { + name: 'useUpdateNodeInternals', path: '/useupdatenodeinternals', component: UseUpdateNodeInternals, }, { + name: 'Validation', path: '/validation', component: Validation, }, { + name: 'useKeyPress', path: '/use-key-press', component: UseKeyPress, }, ]; const Header = () => { - const navigate = useNavigate(); const location = useLocation(); - const onChange = (event: ChangeEvent) => navigate(event.target.value); + const navigate = useNavigate(); + const [currentPath, setCurrentPath] = useState(location.pathname); + + useEffect(() => { + const name = routes.find((route) => route.path === currentPath)?.name; + document.title = `React Flow Examples${name ? ' - ' + name : ''}`; + navigate(currentPath); + }, [currentPath]); return (
React Flow Dev - setCurrentPath(event.target.value)}> {routes.map((route) => ( ))} diff --git a/examples/vite-app/src/examples/Basic/index.tsx b/examples/vite-app/src/examples/Basic/index.tsx index c157ce23..d6f3950f 100644 --- a/examples/vite-app/src/examples/Basic/index.tsx +++ b/examples/vite-app/src/examples/Basic/index.tsx @@ -92,7 +92,7 @@ const BasicFlow = () => { defaultEdgeOptions={defaultEdgeOptions} selectNodesOnDrag={false} > - + diff --git a/examples/vite-app/src/examples/CancelConnection/Timer.module.css b/examples/vite-app/src/examples/CancelConnection/Timer.module.css new file mode 100644 index 00000000..8daee29d --- /dev/null +++ b/examples/vite-app/src/examples/CancelConnection/Timer.module.css @@ -0,0 +1,31 @@ +.Timer { + position: absolute; + bottom: 0; + transition-duration: 0.3s; + left: 50%; + transform: translate(-50%, 100%); + font-size: 1.5rem; + z-index: 999; + background: linear-gradient(#fff, #fff, #f5f5f5); + padding: 0.8rem 1.5rem; + border-radius: 5px; + border: 1px solid #ccc; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2); +} + +.Timer.show { + transform: translate(-50%, 0%) translateY(-15px); +} + +.progress { + display: none; + position: absolute; + bottom: 0; + left: 0; + height: 5px; + background: linear-gradient(to right, #42df96, #16dfed); +} + +.Timer.show .progress { + display: block; +} \ No newline at end of file diff --git a/examples/vite-app/src/examples/CancelConnection/Timer.tsx b/examples/vite-app/src/examples/CancelConnection/Timer.tsx new file mode 100644 index 00000000..b46cf23e --- /dev/null +++ b/examples/vite-app/src/examples/CancelConnection/Timer.tsx @@ -0,0 +1,28 @@ +import cc from 'classcat'; +import styles from './Timer.module.css'; + +interface Props { + duration: number; + remaining: number; + show: boolean; +} + +export default function Timer({ + duration, + remaining, + show, +}: Props) { + const percentage = 100 - (remaining / duration) * 100; + + return ( +
+
+ Connection will be canceled in {remaining} seconds +
+ ) +} \ No newline at end of file diff --git a/examples/vite-app/src/examples/CancelConnection/data.ts b/examples/vite-app/src/examples/CancelConnection/data.ts new file mode 100644 index 00000000..821b79fe --- /dev/null +++ b/examples/vite-app/src/examples/CancelConnection/data.ts @@ -0,0 +1,34 @@ +import { Edge, Node } from 'reactflow'; + +export const initialNodes: Node[] = [ + { + id: '1', + type: 'input', + data: { label: 'Node 1' }, + position: { x: 250, y: 5 }, + className: 'light', + }, + { + id: '2', + data: { label: 'Node 2' }, + position: { x: 100, y: 100 }, + className: 'light', + }, + { + id: '3', + data: { label: 'Node 3' }, + position: { x: 400, y: 100 }, + className: 'light', + }, + { + id: '4', + data: { label: 'Node 4' }, + position: { x: 400, y: 200 }, + className: 'light', + }, +]; + +export const initialEdges: Edge[] = [ + { id: 'e1-2', source: '1', target: '2', animated: true }, + { id: 'e1-3', source: '1', target: '3' }, +]; diff --git a/examples/vite-app/src/examples/CancelConnection/hooks/useCountdown.ts b/examples/vite-app/src/examples/CancelConnection/hooks/useCountdown.ts new file mode 100644 index 00000000..eee7aec4 --- /dev/null +++ b/examples/vite-app/src/examples/CancelConnection/hooks/useCountdown.ts @@ -0,0 +1,35 @@ +import { useRef, useState } from 'react'; + +const useCountdown = (callback: () => void) => { + const interval = useRef(); + const [remaining, setRemaining] = useState(0); + + const start = (duration: number) => { + setRemaining(duration); + + interval.current = setInterval(() => { + setRemaining((prev) => { + if (prev === 1) { + clearInterval(interval.current); + callback(); + } + + return prev - 1; + }); + }, 1000); + }; + + const stop = () => { + clearInterval(interval.current); + setRemaining(0); + }; + + return { + start, + remaining, + stop, + counting: remaining > 0, + }; +}; + +export default useCountdown; diff --git a/examples/vite-app/src/examples/CancelConnection/index.tsx b/examples/vite-app/src/examples/CancelConnection/index.tsx new file mode 100644 index 00000000..689ededf --- /dev/null +++ b/examples/vite-app/src/examples/CancelConnection/index.tsx @@ -0,0 +1,62 @@ +import ReactFlow, { + Background, + MiniMap, + addEdge, + ReactFlowProvider, + Connection, + Edge, + useNodesState, + useEdgesState, + OnConnectStart, + OnConnectEnd, + useStore, +} from 'reactflow'; + +import useCountdown from './hooks/useCountdown'; +import { initialEdges, initialNodes } from './data'; +import Timer from './Timer'; + +const CANCEL_AFTER = 5; // seconds + +const CancelConnection = () => { + const [nodes, _, onNodesChange] = useNodesState(initialNodes); + const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges); + const cancelConnection = useStore(state => state.cancelConnection) + + // Cancels connection after 5 seconds + const countdown = useCountdown(() => cancelConnection()); + const onConnectStart: OnConnectStart = () => countdown.start(CANCEL_AFTER); + const onConnectEnd: OnConnectEnd = () => countdown.stop(); + + const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)); + + return ( + <> + + + + + + + ); +} + +export default () => ( + + + +); diff --git a/examples/vite-app/src/examples/ControlledUncontrolled/index.tsx b/examples/vite-app/src/examples/ControlledUncontrolled/index.tsx index 0f31a279..1d6ed299 100644 --- a/examples/vite-app/src/examples/ControlledUncontrolled/index.tsx +++ b/examples/vite-app/src/examples/ControlledUncontrolled/index.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import ReactFlow, { useReactFlow, Node, diff --git a/examples/vite-app/src/examples/DefaultNodes/index.tsx b/examples/vite-app/src/examples/DefaultNodes/index.tsx index ad623c2f..7590f8b9 100644 --- a/examples/vite-app/src/examples/DefaultNodes/index.tsx +++ b/examples/vite-app/src/examples/DefaultNodes/index.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import ReactFlow, { useReactFlow, Node, Edge, ReactFlowProvider, Background, BackgroundVariant } from 'reactflow'; const defaultNodes: Node[] = [ diff --git a/examples/vite-app/src/examples/EdgeRouting/index.tsx b/examples/vite-app/src/examples/EdgeRouting/index.tsx index 3d37b43b..37bdb5cb 100644 --- a/examples/vite-app/src/examples/EdgeRouting/index.tsx +++ b/examples/vite-app/src/examples/EdgeRouting/index.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import ReactFlow, { Node, Edge, Position, MarkerType } from 'reactflow'; const nodes: Node[] = [ @@ -107,7 +106,7 @@ const edges: Edge[] = [ const defaultEdgeOptions = { label: 'Edge Label', - type: 'default', + type: 'smoothstep', markerEnd: { type: MarkerType.ArrowClosed, }, diff --git a/examples/vite-app/src/examples/Provider/Sidebar.tsx b/examples/vite-app/src/examples/Provider/Sidebar.tsx index c1f5221c..145ac718 100644 --- a/examples/vite-app/src/examples/Provider/Sidebar.tsx +++ b/examples/vite-app/src/examples/Provider/Sidebar.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { useStore, useStoreApi } from 'reactflow'; import styles from './provider.module.css'; diff --git a/examples/vite-app/src/examples/UseKeyPress/index.tsx b/examples/vite-app/src/examples/UseKeyPress/index.tsx index b2e8900d..e95ae9bc 100644 --- a/examples/vite-app/src/examples/UseKeyPress/index.tsx +++ b/examples/vite-app/src/examples/UseKeyPress/index.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { useKeyPress } from 'reactflow'; const UseKeyPressComponent = () => { diff --git a/examples/vite-app/src/examples/UseOnSelectionChange/CustomNode.tsx b/examples/vite-app/src/examples/UseOnSelectionChange/CustomNode.tsx new file mode 100644 index 00000000..1684656b --- /dev/null +++ b/examples/vite-app/src/examples/UseOnSelectionChange/CustomNode.tsx @@ -0,0 +1,36 @@ +import React, { useState, memo, FC, useMemo, CSSProperties } from 'react'; +import { Handle, Position, NodeProps, useUpdateNodeInternals } from 'reactflow'; + +const nodeStyles: CSSProperties = { padding: 10, border: '1px solid #ddd' }; + +const CustomNode: FC = ({ id }) => { + const [handleCount, setHandleCount] = useState(1); + const updateNodeInternals = useUpdateNodeInternals(); + + const handles = useMemo( + () => + Array.from({ length: handleCount }, (x, i) => { + const handleId = `handle-${i}`; + return ; + }), + [handleCount] + ); + + return ( +
+ +
output handle count: {handleCount}
+ + {handles} +
+ ); +}; + +export default memo(CustomNode); diff --git a/examples/vite-app/src/examples/UseOnSelectionChange/index.tsx b/examples/vite-app/src/examples/UseOnSelectionChange/index.tsx new file mode 100644 index 00000000..160ca769 --- /dev/null +++ b/examples/vite-app/src/examples/UseOnSelectionChange/index.tsx @@ -0,0 +1,58 @@ +import { useCallback } from 'react'; +import ReactFlow, { + addEdge, + ReactFlowProvider, + Node, + Connection, + Edge, + useNodesState, + useEdgesState, + useOnSelectionChange, + OnSelectionChangeParams, +} from 'reactflow'; + +const initialNodes: Node[] = [ + { + id: '1', + type: 'default', + data: { label: 'Node 1' }, + position: { x: 250, y: 5 }, + }, +]; + +const SelectionLogger = () => { + const onChange = useCallback(({ nodes, edges }: OnSelectionChangeParams) => { + console.log(nodes, edges); + }, []); + + useOnSelectionChange({ + onChange, + }); + + return null; +}; + +const Flow = () => { + const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes); + const [edges, setEdges, onEdgesChange] = useEdgesState([]); + const onConnect = useCallback((params: Edge | Connection) => setEdges((els) => addEdge(params, els)), [setEdges]); + + return ( + + ); +}; + +const WrappedFlow = () => ( + + + + +); + +export default WrappedFlow; diff --git a/package.json b/package.json index f3e84001..e5463ced 100644 --- a/package.json +++ b/package.json @@ -16,8 +16,8 @@ "clean": "pnpm -r --parallel exec rimraf dist .turbo" }, "devDependencies": { - "@changesets/changelog-github": "^0.4.6", - "@changesets/cli": "^2.24.3", + "@changesets/changelog-github": "^0.4.7", + "@changesets/cli": "^2.25.0", "@preconstruct/cli": "^2.2.1", "@typescript-eslint/eslint-plugin": "latest", "@typescript-eslint/parser": "latest", diff --git a/packages/background/CHANGELOG.md b/packages/background/CHANGELOG.md new file mode 100644 index 00000000..55bb8b95 --- /dev/null +++ b/packages/background/CHANGELOG.md @@ -0,0 +1,60 @@ +# @reactflow/background + +## 11.0.3 + +### Patch Changes + +- cleanup types +- cleanup rf id handling +- Updated dependencies: + - @reactflow/core@11.1.2 + +## 11.0.2 + +### Patch Changes + +- Updated dependencies: + - @reactflow/core@11.1.1 + +## 11.0.1 + +### Patch Changes + +- [`def11008`](https://github.com/wbkd/react-flow/commit/def11008d88749fec40e6fcba8bc41eea2511bab) Thanks [@moklick](https://github.com/moklick)! - default gap = 20 + +- Updated dependencies [[`def11008`](https://github.com/wbkd/react-flow/commit/def11008d88749fec40e6fcba8bc41eea2511bab), [`d00faa6b`](https://github.com/wbkd/react-flow/commit/d00faa6b3e77388bfd655d4c02e9a5375bc515e4)]: + - @reactflow/core@11.1.0 + +## 11.0.0 + +### Major Changes + +- **Better [Accessibility](/docs/guides/accessibility)** + - Nodes and edges are focusable, selectable, moveable and deleteable with the keyboard. + - `aria-` default attributes for all elements and controllable via `ariaLabel` options + - Keyboard controls can be disabled with the new `disableKeyboardA11y` prop +- **Better selectable edges** via new edge option: `interactionWidth` - renders invisible edge that makes it easier to interact +- **Better routing for smoothstep and step edges**: https://twitter.com/reactflowdev/status/1567535405284614145 +- **Nicer edge updating behaviour**: https://twitter.com/reactflowdev/status/1564966917517021184 +- **Node origin**: The new `nodeOrigin` prop lets you control the origin of a node. Useful for layouting. +- **New background pattern**: `BackgroundVariant.Cross` variant +- **[`useOnViewportChange`](/docs/api/hooks/use-on-viewport-change) hook** - handle viewport changes within a component +- **[`useOnSelectionChange`](/docs/api/hooks/use-on-selection-change) hook** - handle selection changes within a component +- **[`useNodesInitialized`](/docs/api/hooks/use-nodes-initialized) hook** - returns true if all nodes are initialized and if there is more than one node +- **Deletable option** for Nodes and edges +- **New Event handlers**: `onPaneMouseEnter`, `onPaneMouseMove` and `onPaneMouseLeave` +- **Edge `pathOptions`** for `smoothstep` and `default` edges +- **Nicer cursor defaults**: Cursor is grabbing, while dragging a node or panning +- **Pane moveable** with middle mouse button +- **Pan over nodes** when they are not draggable (`draggable=false` or `nodesDraggable` false) +- **[``](/docs/api/edges/base-edge) component** that makes it easier to build custom edges +- **[Separately installable packages](/docs/overview/packages/)** + - @reactflow/core + - @reactflow/background + - @reactflow/controls + - @reactflow/minimap + +### Patch Changes + +- Updated dependencies: + - @reactflow/core@11.0.0 diff --git a/packages/background/package.json b/packages/background/package.json index 90c1db07..12031de8 100644 --- a/packages/background/package.json +++ b/packages/background/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/background", - "version": "11.0.0-next.6", + "version": "11.0.3", "description": "Background component with different variants for React Flow", "keywords": [ "react", @@ -17,7 +17,9 @@ "main": "dist/umd/index.js", "module": "dist/esm/index.js", "types": "dist/esm/index.d.ts", - "sideEffects": false, + "sideEffects": [ + "*.css" + ], "scripts": { "dev": "rollup --config node:@reactflow/rollup-config --watch", "build": "rollup --config node:@reactflow/rollup-config --environment NODE_ENV:production", diff --git a/packages/background/src/Background.tsx b/packages/background/src/Background.tsx index 7fc52cae..22283001 100644 --- a/packages/background/src/Background.tsx +++ b/packages/background/src/Background.tsx @@ -18,11 +18,11 @@ const defaultSize = { [BackgroundVariant.Cross]: 6, }; -const selector = (s: ReactFlowState) => ({ transform: s.transform, rfId: s.rfId }); +const selector = (s: ReactFlowState) => ({ transform: s.transform, patternId: `pattern-${s.rfId}` }); function Background({ variant = BackgroundVariant.Dots, - gap = 25, + gap = 20, // only used for dots and cross size, // only used for lines and cross @@ -32,7 +32,7 @@ function Background({ className, }: BackgroundProps) { const ref = useRef(null); - const { transform, rfId } = useStore(selector, shallow); + const { transform, patternId } = useStore(selector, shallow); const patternColor = color || defaultColor[variant]; const patternSize = size || defaultSize[variant]; const isDots = variant === BackgroundVariant.Dots; @@ -61,7 +61,7 @@ function Background({ ref={ref} > )} - + ); } diff --git a/packages/background/src/types.ts b/packages/background/src/types.ts index f3b24898..6f9a7155 100644 --- a/packages/background/src/types.ts +++ b/packages/background/src/types.ts @@ -6,7 +6,7 @@ export enum BackgroundVariant { Cross = 'cross', } -export interface BackgroundProps { +export type BackgroundProps = { color?: string; className?: string; gap?: number | [number, number]; @@ -14,4 +14,4 @@ export interface BackgroundProps { lineWidth?: number; variant?: BackgroundVariant; style?: CSSProperties; -} +}; diff --git a/packages/controls/CHANGELOG.md b/packages/controls/CHANGELOG.md new file mode 100644 index 00000000..1c2d37b1 --- /dev/null +++ b/packages/controls/CHANGELOG.md @@ -0,0 +1,57 @@ +# @reactflow/controls + +## 11.0.3 + +### Patch Changes + +- cleanup types +- Updated dependencies: + - @reactflow/core@11.1.2 + +## 11.0.2 + +### Patch Changes + +- Updated dependencies: + - @reactflow/core@11.1.1 + +## 11.0.1 + +### Patch Changes + +- Updated dependencies [[`def11008`](https://github.com/wbkd/react-flow/commit/def11008d88749fec40e6fcba8bc41eea2511bab), [`d00faa6b`](https://github.com/wbkd/react-flow/commit/d00faa6b3e77388bfd655d4c02e9a5375bc515e4)]: + - @reactflow/core@11.1.0 + +## 11.0.0 + +### Major Changes + +- **Better [Accessibility](/docs/guides/accessibility)** + - Nodes and edges are focusable, selectable, moveable and deleteable with the keyboard. + - `aria-` default attributes for all elements and controllable via `ariaLabel` options + - Keyboard controls can be disabled with the new `disableKeyboardA11y` prop +- **Better selectable edges** via new edge option: `interactionWidth` - renders invisible edge that makes it easier to interact +- **Better routing for smoothstep and step edges**: https://twitter.com/reactflowdev/status/1567535405284614145 +- **Nicer edge updating behaviour**: https://twitter.com/reactflowdev/status/1564966917517021184 +- **Node origin**: The new `nodeOrigin` prop lets you control the origin of a node. Useful for layouting. +- **New background pattern**: `BackgroundVariant.Cross` variant +- **[`useOnViewportChange`](/docs/api/hooks/use-on-viewport-change) hook** - handle viewport changes within a component +- **[`useOnSelectionChange`](/docs/api/hooks/use-on-selection-change) hook** - handle selection changes within a component +- **[`useNodesInitialized`](/docs/api/hooks/use-nodes-initialized) hook** - returns true if all nodes are initialized and if there is more than one node +- **Deletable option** for Nodes and edges +- **New Event handlers**: `onPaneMouseEnter`, `onPaneMouseMove` and `onPaneMouseLeave` +- **Edge `pathOptions`** for `smoothstep` and `default` edges +- **Nicer cursor defaults**: Cursor is grabbing, while dragging a node or panning +- **Pane moveable** with middle mouse button +- **Pan over nodes** when they are not draggable (`draggable=false` or `nodesDraggable` false) +- **[``](/docs/api/edges/base-edge) component** that makes it easier to build custom edges +- **[Separately installable packages](/docs/overview/packages/)** + - @reactflow/core + - @reactflow/background + - @reactflow/controls + - @reactflow/minimap + +### Patch Changes + +- Updated dependencies: + - @reactflow/core@11.0.0 diff --git a/packages/controls/package.json b/packages/controls/package.json index dc810a23..e998486e 100644 --- a/packages/controls/package.json +++ b/packages/controls/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/controls", - "version": "11.0.0-next.6", + "version": "11.0.3", "description": "Component to control the viewport of a React Flow instance", "keywords": [ "react", @@ -17,7 +17,9 @@ "main": "dist/umd/index.js", "module": "dist/esm/index.js", "types": "dist/esm/index.d.ts", - "sideEffects": false, + "sideEffects": [ + "*.css" + ], "license": "MIT", "repository": { "type": "git", diff --git a/packages/controls/src/ControlButton.tsx b/packages/controls/src/ControlButton.tsx index 3d4f6f91..9952fde0 100644 --- a/packages/controls/src/ControlButton.tsx +++ b/packages/controls/src/ControlButton.tsx @@ -1,18 +1,10 @@ -import { FC, PropsWithChildren } from 'react'; +import type { FC, PropsWithChildren } from 'react'; import cc from 'classcat'; -import { ControlButtonProps } from './types'; +import type { ControlButtonProps } from './types'; -const ControlButton: FC> = ({ - children, - className, - ...rest -}) => ( - ); diff --git a/packages/controls/src/Controls.tsx b/packages/controls/src/Controls.tsx index 11c50df4..e2c96162 100644 --- a/packages/controls/src/Controls.tsx +++ b/packages/controls/src/Controls.tsx @@ -1,6 +1,8 @@ -import { memo, FC, useEffect, useState, PropsWithChildren } from 'react'; +import { memo, useEffect, useState } from 'react'; +import type { FC, PropsWithChildren } from 'react'; import cc from 'classcat'; -import { useStore, useStoreApi, useReactFlow, ReactFlowState, Panel } from '@reactflow/core'; +import { useStore, useStoreApi, useReactFlow, Panel } from '@reactflow/core'; +import type { ReactFlowState } from '@reactflow/core'; import PlusIcon from './Icons/Plus'; import MinusIcon from './Icons/Minus'; @@ -9,7 +11,7 @@ import LockIcon from './Icons/Lock'; import UnlockIcon from './Icons/Unlock'; import ControlButton from './ControlButton'; -import { ControlProps } from './types'; +import type { ControlProps } from './types'; const isInteractiveSelector = (s: ReactFlowState) => s.nodesDraggable && s.nodesConnectable && s.elementsSelectable; diff --git a/packages/controls/src/types.ts b/packages/controls/src/types.ts index 20cfa433..3cfcad29 100644 --- a/packages/controls/src/types.ts +++ b/packages/controls/src/types.ts @@ -1,7 +1,7 @@ -import { ButtonHTMLAttributes, HTMLAttributes } from 'react'; -import { FitViewOptions, PanelPosition } from '@reactflow/core'; +import type { ButtonHTMLAttributes, HTMLAttributes } from 'react'; +import type { FitViewOptions, PanelPosition } from '@reactflow/core'; -export interface ControlProps extends HTMLAttributes { +export type ControlProps = HTMLAttributes & { showZoom?: boolean; showFitView?: boolean; showInteractive?: boolean; @@ -11,6 +11,6 @@ export interface ControlProps extends HTMLAttributes { onFitView?: () => void; onInteractiveChange?: (interactiveStatus: boolean) => void; position?: PanelPosition; -} +}; export type ControlButtonProps = ButtonHTMLAttributes; diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md new file mode 100644 index 00000000..7fb7463f --- /dev/null +++ b/packages/core/CHANGELOG.md @@ -0,0 +1,59 @@ +# @reactflow/core + +## 11.1.2 + +### Patch Changes + +- make pro options acc type optional +- cleanup types +- fix rf id handling +- always render nodes when dragging=true +- don't apply animations to helper edge + +## 11.1.1 + +### Patch Changes + +- [`c44413d`](https://github.com/wbkd/react-flow/commit/c44413d816604ae2d6ad81ed227c3dfde1a7bd8a) Thanks [@moklick](https://github.com/moklick)! - chore(panel): dont break user selection above panel +- [`48c402c`](https://github.com/wbkd/react-flow/commit/48c402c4d3bd9e16dc91cd4c549324e57b6d5c57) Thanks [@moklick](https://github.com/moklick)! - refactor(aria-descriptions): render when disableKeyboardA11y is true +- [`3a1a365`](https://github.com/wbkd/react-flow/commit/3a1a365a63fc4564d9a8d96309908986fcc86f95) Thanks [@moklick](https://github.com/moklick)! - fix(useOnSelectionChange): repair hook closes #2484 +- [`5d35094`](https://github.com/wbkd/react-flow/commit/5d350942d33ded626b3387206f0b0dee368efdfb) Thanks [@neo](https://github.com/neo)! - Add css files as sideEffects + +## 11.1.0 + +### Minor Changes + +- [`def11008`](https://github.com/wbkd/react-flow/commit/def11008d88749fec40e6fcba8bc41eea2511bab) Thanks [@moklick](https://github.com/moklick)! - New props: nodesFocusable and edgesFocusable + +### Patch Changes + +- [`d00faa6b`](https://github.com/wbkd/react-flow/commit/d00faa6b3e77388bfd655d4c02e9a5375bc515e4) Thanks [@moklick](https://github.com/moklick)! - Make nopan class name overwritable with class name option + +## 11.0.0 + +### Major Changes + +- **Better [Accessibility](/docs/guides/accessibility)** + - Nodes and edges are focusable, selectable, moveable and deleteable with the keyboard. + - `aria-` default attributes for all elements and controllable via `ariaLabel` options + - Keyboard controls can be disabled with the new `disableKeyboardA11y` prop +- **Better selectable edges** via new edge option: `interactionWidth` - renders invisible edge that makes it easier to interact +- **Better routing for smoothstep and step edges**: https://twitter.com/reactflowdev/status/1567535405284614145 +- **Nicer edge updating behaviour**: https://twitter.com/reactflowdev/status/1564966917517021184 +- **Node origin**: The new `nodeOrigin` prop lets you control the origin of a node. Useful for layouting. +- **New background pattern**: `BackgroundVariant.Cross` variant +- **[`useOnViewportChange`](/docs/api/hooks/use-on-viewport-change) hook** - handle viewport changes within a component +- **[`useOnSelectionChange`](/docs/api/hooks/use-on-selection-change) hook** - handle selection changes within a component +- **[`useNodesInitialized`](/docs/api/hooks/use-nodes-initialized) hook** - returns true if all nodes are initialized and if there is more than one node +- **Deletable option** for Nodes and edges +- **New Event handlers**: `onPaneMouseEnter`, `onPaneMouseMove` and `onPaneMouseLeave` +- **Edge `pathOptions`** for `smoothstep` and `default` edges +- **Nicer cursor defaults**: Cursor is grabbing, while dragging a node or panning +- **Pane moveable** with middle mouse button +- **Pan over nodes** when they are not draggable (`draggable=false` or `nodesDraggable` false) +- **[``](/docs/api/edges/base-edge) component** that makes it easier to build custom edges +- **[Separately installable packages](/docs/overview/packages/)** + - @reactflow/core + - @reactflow/background + - @reactflow/controls + - @reactflow/minimap diff --git a/packages/core/package.json b/packages/core/package.json index 4a36b469..ea025613 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/core", - "version": "11.0.0-next.6", + "version": "11.1.2", "description": "Core components and util functions of React Flow.", "keywords": [ "react", @@ -17,7 +17,9 @@ "main": "dist/umd/index.js", "module": "dist/esm/index.js", "types": "dist/esm/index.d.ts", - "sideEffects": false, + "sideEffects": [ + "*.css" + ], "license": "MIT", "publishConfig": { "access": "public" diff --git a/packages/core/src/components/A11yDescriptions/index.tsx b/packages/core/src/components/A11yDescriptions/index.tsx index 5b019009..ae9c3a0b 100644 --- a/packages/core/src/components/A11yDescriptions/index.tsx +++ b/packages/core/src/components/A11yDescriptions/index.tsx @@ -1,6 +1,6 @@ import { CSSProperties } from 'react'; import { useStore } from '../../hooks/useStore'; -import { ReactFlowState } from '../../types'; +import type { ReactFlowState } from '../../types'; const style: CSSProperties = { display: 'none' }; const ariaLiveStyle: CSSProperties = { @@ -17,25 +17,32 @@ const ariaLiveStyle: CSSProperties = { export const ARIA_NODE_DESC_KEY = 'react-flow__node-desc'; export const ARIA_EDGE_DESC_KEY = 'react-flow__edge-desc'; -export const ARIA_LIVE_MESSAGE = 'react-flow__arai-live'; +export const ARIA_LIVE_MESSAGE = 'react-flow__aria-live'; const selector = (s: ReactFlowState) => s.ariaLiveMessage; -function A11yDescriptions({ rfId }: { rfId: string }) { +function AriaLiveMessage({ rfId }: { rfId: string }) { const ariaLiveMessage = useStore(selector); + return ( +
+ {ariaLiveMessage} +
+ ); +} + +function A11yDescriptions({ rfId, disableKeyboardA11y }: { rfId: string; disableKeyboardA11y: boolean }) { return ( <>
- Press enter or space to select a node. You can then use the arrow keys to move the node around, press delete to - remove it and press escape to cancel. + Press enter or space to select a node. + {!disableKeyboardA11y && 'You can then use the arrow keys to move the node around.'} Press delete to remove it + and escape to cancel.{' '}
- Press enter or space to select an edge. You can then press delete to remove it or press escape to cancel. -
-
- {ariaLiveMessage} + Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.
+ {!disableKeyboardA11y && } ); } diff --git a/packages/core/src/components/Attribution/index.tsx b/packages/core/src/components/Attribution/index.tsx index 61b2c408..ad4ed22b 100644 --- a/packages/core/src/components/Attribution/index.tsx +++ b/packages/core/src/components/Attribution/index.tsx @@ -1,5 +1,5 @@ import Panel from '../Panel'; -import { PanelPosition, ProOptions } from '../../types'; +import type { PanelPosition, ProOptions } from '../../types'; type AttributionProps = { proOptions?: ProOptions; diff --git a/packages/core/src/components/ConnectionLine/index.tsx b/packages/core/src/components/ConnectionLine/index.tsx index a8a38b21..767d16f3 100644 --- a/packages/core/src/components/ConnectionLine/index.tsx +++ b/packages/core/src/components/ConnectionLine/index.tsx @@ -4,9 +4,10 @@ import shallow from 'zustand/shallow'; import { useStore } from '../../hooks/useStore'; import { getBezierPath } from '../Edges/BezierEdge'; import { getSmoothStepPath } from '../Edges/SmoothStepEdge'; -import { ConnectionLineType, ConnectionLineComponent, HandleType, Position, ReactFlowStore } from '../../types'; import { getSimpleBezierPath } from '../Edges/SimpleBezierEdge'; import { internalsSymbol } from '../../utils'; +import type { ConnectionLineComponent, HandleType, ReactFlowStore } from '../../types'; +import { Position, ConnectionLineType } from '../../types'; type ConnectionLineProps = { connectionNodeId: string; diff --git a/packages/core/src/components/Edges/BaseEdge.tsx b/packages/core/src/components/Edges/BaseEdge.tsx index 67c74c33..71106854 100644 --- a/packages/core/src/components/Edges/BaseEdge.tsx +++ b/packages/core/src/components/Edges/BaseEdge.tsx @@ -1,5 +1,5 @@ import EdgeText from './EdgeText'; -import { BaseEdgeProps } from '../../types'; +import type { BaseEdgeProps } from '../../types'; const BaseEdge = ({ path, @@ -26,7 +26,15 @@ const BaseEdge = ({ markerEnd={markerEnd} markerStart={markerStart} /> - {interactionWidth && } + {interactionWidth && ( + + )} {label ? ( = 0) { return 0.5 * distance; - } else { - return curvature * 25 * Math.sqrt(-distance); } + + return curvature * 25 * Math.sqrt(-distance); } function getControlWithCurvature({ pos, x1, y1, x2, y2, c }: GetControlWithCurvatureParams): [number, number] { - let ctX: number, ctY: number; switch (pos) { case Position.Left: - { - ctX = x1 - calculateControlOffset(x1 - x2, c); - ctY = y1; - } - break; + return [x1 - calculateControlOffset(x1 - x2, c), y1]; case Position.Right: - { - ctX = x1 + calculateControlOffset(x2 - x1, c); - ctY = y1; - } - break; + return [x1 + calculateControlOffset(x2 - x1, c), y1]; case Position.Top: - { - ctX = x1; - ctY = y1 - calculateControlOffset(y1 - y2, c); - } - break; + return [x1, y1 - calculateControlOffset(y1 - y2, c)]; case Position.Bottom: - { - ctX = x1; - ctY = y1 + calculateControlOffset(y2 - y1, c); - } - break; + return [x1, y1 + calculateControlOffset(y2 - y1, c)]; } - return [ctX, ctY]; } export function getBezierPath({ @@ -69,7 +53,7 @@ export function getBezierPath({ targetY, targetPosition = Position.Top, curvature = 0.25, -}: GetBezierPathParams): [string, number, number, number, number] { +}: GetBezierPathParams): [path: string, labelX: number, labelY: number, offsetX: number, offsetY: number] { const [sourceControlX, sourceControlY] = getControlWithCurvature({ pos: sourcePosition, x1: sourceX, @@ -86,7 +70,7 @@ export function getBezierPath({ y2: sourceY, c: curvature, }); - const [centerX, centerY, offsetX, offsetY] = getBezierEdgeCenter({ + const [labelX, labelY, offsetX, offsetY] = getBezierEdgeCenter({ sourceX, sourceY, targetX, @@ -99,8 +83,8 @@ export function getBezierPath({ return [ `M${sourceX},${sourceY} C${sourceControlX},${sourceControlY} ${targetControlX},${targetControlY} ${targetX},${targetY}`, - centerX, - centerY, + labelX, + labelY, offsetX, offsetY, ]; diff --git a/packages/core/src/components/Edges/EdgeAnchor.tsx b/packages/core/src/components/Edges/EdgeAnchor.tsx index a88ed364..baf83cdd 100644 --- a/packages/core/src/components/Edges/EdgeAnchor.tsx +++ b/packages/core/src/components/Edges/EdgeAnchor.tsx @@ -1,4 +1,4 @@ -import { FC, MouseEvent as ReactMouseEvent, SVGAttributes } from 'react'; +import type { FC, MouseEvent as ReactMouseEvent, SVGAttributes } from 'react'; import cc from 'classcat'; import { Position } from '../../types'; diff --git a/packages/core/src/components/Edges/EdgeText.tsx b/packages/core/src/components/Edges/EdgeText.tsx index 9134d66f..10a17be5 100644 --- a/packages/core/src/components/Edges/EdgeText.tsx +++ b/packages/core/src/components/Edges/EdgeText.tsx @@ -1,4 +1,5 @@ -import { memo, useRef, useState, useEffect, FC, PropsWithChildren } from 'react'; +import { memo, useRef, useState, useEffect } from 'react'; +import type { FC, PropsWithChildren } from 'react'; import cc from 'classcat'; import { EdgeTextProps, Rect } from '../../types'; @@ -41,6 +42,7 @@ const EdgeText: FC> = ({ {labelShowBg && ( diff --git a/packages/core/src/components/Edges/SimpleBezierEdge.tsx b/packages/core/src/components/Edges/SimpleBezierEdge.tsx index cf19595f..e549be58 100644 --- a/packages/core/src/components/Edges/SimpleBezierEdge.tsx +++ b/packages/core/src/components/Edges/SimpleBezierEdge.tsx @@ -1,7 +1,9 @@ import { memo } from 'react'; -import { EdgeProps, Position } from '../../types'; + import BaseEdge from './BaseEdge'; import { getBezierEdgeCenter } from './utils'; +import { Position } from '../../types'; +import type { EdgeProps } from '../../types'; export interface GetSimpleBezierPathParams { sourceX: number; @@ -21,24 +23,11 @@ interface GetControlParams { } function getControl({ pos, x1, y1, x2, y2 }: GetControlParams): [number, number] { - let ctX: number, ctY: number; - switch (pos) { - case Position.Left: - case Position.Right: - { - ctX = 0.5 * (x1 + x2); - ctY = y1; - } - break; - case Position.Top: - case Position.Bottom: - { - ctX = x1; - ctY = 0.5 * (y1 + y2); - } - break; + if (pos === Position.Left || pos === Position.Right) { + return [0.5 * (x1 + x2), y1]; } - return [ctX, ctY]; + + return [x1, 0.5 * (y1 + y2)]; } export function getSimpleBezierPath({ @@ -48,7 +37,7 @@ export function getSimpleBezierPath({ targetX, targetY, targetPosition = Position.Top, -}: GetSimpleBezierPathParams): [string, number, number, number, number] { +}: GetSimpleBezierPathParams): [path: string, labelX: number, labelY: number, offsetX: number, offsetY: number] { const [sourceControlX, sourceControlY] = getControl({ pos: sourcePosition, x1: sourceX, @@ -63,7 +52,7 @@ export function getSimpleBezierPath({ x2: sourceX, y2: sourceY, }); - const [centerX, centerY, offsetX, offsetY] = getBezierEdgeCenter({ + const [labelX, labelY, offsetX, offsetY] = getBezierEdgeCenter({ sourceX, sourceY, targetX, @@ -76,8 +65,8 @@ export function getSimpleBezierPath({ return [ `M${sourceX},${sourceY} C${sourceControlX},${sourceControlY} ${targetControlX},${targetControlY} ${targetX},${targetY}`, - centerX, - centerY, + labelX, + labelY, offsetX, offsetY, ]; diff --git a/packages/core/src/components/Edges/SmoothStepEdge.tsx b/packages/core/src/components/Edges/SmoothStepEdge.tsx index 0e03932c..e61f8e46 100644 --- a/packages/core/src/components/Edges/SmoothStepEdge.tsx +++ b/packages/core/src/components/Edges/SmoothStepEdge.tsx @@ -1,8 +1,9 @@ import { memo } from 'react'; -import { SmoothStepEdgeProps, Position, XYPosition } from '../../types'; import BaseEdge from './BaseEdge'; -import { getSimpleEdgeCenter } from './utils'; +import { getEdgeCenter } from './utils'; +import { Position } from '../../types'; +import type { SmoothStepEdgeProps, XYPosition } from '../../types'; export interface GetSmoothStepPathParams { sourceX: number; @@ -72,7 +73,7 @@ function getPoints({ let points: XYPosition[] = []; let centerX, centerY; - const [defaultCenterX, defaultCenterY, defaultOffsetX, defaultOffsetY] = getSimpleEdgeCenter({ + const [defaultCenterX, defaultCenterY, defaultOffsetX, defaultOffsetY] = getEdgeCenter({ sourceX: source.x, sourceY: source.y, targetX: target.x, @@ -170,7 +171,7 @@ export function getSmoothStepPath({ centerX, centerY, offset = 20, -}: GetSmoothStepPathParams): [string, number, number, number, number] { +}: GetSmoothStepPathParams): [path: string, labelX: number, labelY: number, offsetX: number, offsetY: number] { const [points, labelX, labelY, offsetX, offsetY] = getPoints({ source: { x: sourceX, y: sourceY }, sourcePosition, diff --git a/packages/core/src/components/Edges/StepEdge.tsx b/packages/core/src/components/Edges/StepEdge.tsx index fb2527c0..df2646a7 100644 --- a/packages/core/src/components/Edges/StepEdge.tsx +++ b/packages/core/src/components/Edges/StepEdge.tsx @@ -1,7 +1,7 @@ import { memo, useMemo } from 'react'; -import { SmoothStepEdgeProps } from '../../types'; import SmoothStepEdge from './SmoothStepEdge'; +import type { SmoothStepEdgeProps } from '../../types'; const StepEdge = memo((props: SmoothStepEdgeProps) => ( { if (typeof markerEndId !== 'undefined' && markerEndId) { @@ -28,7 +28,7 @@ export function getMouseHandler( } // this is used for straight edges and simple smoothstep edges (LTR, RTL, BTT, TTB) -export function getSimpleEdgeCenter({ +export function getEdgeCenter({ sourceX, sourceY, targetX, diff --git a/packages/core/src/components/Edges/wrapEdge.tsx b/packages/core/src/components/Edges/wrapEdge.tsx index 4ce63466..4ac3b139 100644 --- a/packages/core/src/components/Edges/wrapEdge.tsx +++ b/packages/core/src/components/Edges/wrapEdge.tsx @@ -1,4 +1,5 @@ -import { memo, ComponentType, useState, useMemo, KeyboardEvent, useRef } from 'react'; +import { memo, useState, useMemo, useRef } from 'react'; +import type { ComponentType, KeyboardEvent } from 'react'; import cc from 'classcat'; import { useStoreApi } from '../../hooks/useStore'; @@ -7,8 +8,8 @@ import { handleMouseDown } from '../Handle/handler'; import { EdgeAnchor } from './EdgeAnchor'; import { getMarkerId } from '../../utils/graph'; import { getMouseHandler } from './utils'; -import { EdgeProps, WrapEdgeProps, Connection } from '../../types'; import { elementSelectionKeys } from '../../utils'; +import type { EdgeProps, WrapEdgeProps, Connection } from '../../types'; export default (EdgeComponent: ComponentType) => { const EdgeWrapper = ({ @@ -51,7 +52,7 @@ export default (EdgeComponent: ComponentType) => { markerStart, rfId, ariaLabel, - disableKeyboardA11y, + isFocusable, pathOptions, interactionWidth, }: WrapEdgeProps): JSX.Element | null => { @@ -158,12 +159,12 @@ export default (EdgeComponent: ComponentType) => { onMouseEnter={onEdgeMouseEnter} onMouseMove={onEdgeMouseMove} onMouseLeave={onEdgeMouseLeave} - onKeyDown={disableKeyboardA11y ? undefined : onKeyDown} - tabIndex={disableKeyboardA11y ? undefined : 0} - role={disableKeyboardA11y ? undefined : 'button'} + onKeyDown={isFocusable ? onKeyDown : undefined} + tabIndex={isFocusable ? 0 : undefined} + role={isFocusable ? 'button' : undefined} data-testid={`rf__edge-${id}`} aria-label={ariaLabel === null ? undefined : ariaLabel ? ariaLabel : `Edge from ${source} to ${target}`} - aria-describedby={disableKeyboardA11y ? undefined : `${ARIA_EDGE_DESC_KEY}-${rfId}`} + aria-describedby={isFocusable ? `${ARIA_EDGE_DESC_KEY}-${rfId}` : undefined} ref={edgeRef} > {!updating && ( diff --git a/packages/core/src/components/Handle/handler.ts b/packages/core/src/components/Handle/handler.ts index e8d58fc9..ff726d30 100644 --- a/packages/core/src/components/Handle/handler.ts +++ b/packages/core/src/components/Handle/handler.ts @@ -1,8 +1,9 @@ -import { MouseEvent as ReactMouseEvent } from 'react'; +import type { MouseEvent as ReactMouseEvent } from 'react'; import { StoreApi } from 'zustand'; import { getHostForElement } from '../../utils'; -import { OnConnect, ConnectionMode, Connection, HandleType, ReactFlowState } from '../../types'; +import { ConnectionMode } from '../../types'; +import type { OnConnect, Connection, HandleType, ReactFlowState } from '../../types'; type ValidConnectionFunc = (connection: Connection) => boolean; diff --git a/packages/core/src/components/Handle/index.tsx b/packages/core/src/components/Handle/index.tsx index f4627d8a..c47035a9 100644 --- a/packages/core/src/components/Handle/index.tsx +++ b/packages/core/src/components/Handle/index.tsx @@ -4,10 +4,11 @@ import shallow from 'zustand/shallow'; import { useStore, useStoreApi } from '../../hooks/useStore'; import NodeIdContext from '../../contexts/NodeIdContext'; -import { HandleProps, Connection, ReactFlowState, Position } from '../../types'; import { checkElementBelowIsValid, handleMouseDown } from './handler'; import { getHostForElement } from '../../utils'; import { addEdge } from '../../utils/graph'; +import { Position } from '../../types'; +import type { HandleProps, Connection, ReactFlowState } from '../../types'; const alwaysValid = () => true; diff --git a/packages/core/src/components/Nodes/DefaultNode.tsx b/packages/core/src/components/Nodes/DefaultNode.tsx index 50210c2e..99835a3c 100644 --- a/packages/core/src/components/Nodes/DefaultNode.tsx +++ b/packages/core/src/components/Nodes/DefaultNode.tsx @@ -1,7 +1,8 @@ import { memo } from 'react'; import Handle from '../../components/Handle'; -import { NodeProps, Position } from '../../types'; +import { Position } from '../../types'; +import type { NodeProps } from '../../types'; const DefaultNode = ({ data, diff --git a/packages/core/src/components/Nodes/InputNode.tsx b/packages/core/src/components/Nodes/InputNode.tsx index 0038f9fe..e6983317 100644 --- a/packages/core/src/components/Nodes/InputNode.tsx +++ b/packages/core/src/components/Nodes/InputNode.tsx @@ -1,7 +1,8 @@ import { memo } from 'react'; import Handle from '../../components/Handle'; -import { NodeProps, Position } from '../../types'; +import { Position } from '../../types'; +import type { NodeProps } from '../../types'; const InputNode = ({ data, isConnectable, sourcePosition = Position.Bottom }: NodeProps) => ( <> diff --git a/packages/core/src/components/Nodes/OutputNode.tsx b/packages/core/src/components/Nodes/OutputNode.tsx index 0298e6eb..fdcb5add 100644 --- a/packages/core/src/components/Nodes/OutputNode.tsx +++ b/packages/core/src/components/Nodes/OutputNode.tsx @@ -1,7 +1,8 @@ import { memo } from 'react'; import Handle from '../../components/Handle'; -import { NodeProps, Position } from '../../types'; +import { Position } from '../../types'; +import type { NodeProps } from '../../types'; const OutputNode = ({ data, isConnectable, targetPosition = Position.Top }: NodeProps) => ( <> diff --git a/packages/core/src/components/Nodes/utils.ts b/packages/core/src/components/Nodes/utils.ts index b3116139..dca9f297 100644 --- a/packages/core/src/components/Nodes/utils.ts +++ b/packages/core/src/components/Nodes/utils.ts @@ -1,8 +1,9 @@ import { MouseEvent } from 'react'; import { StoreApi } from 'zustand'; -import { HandleElement, Node, NodeOrigin, Position, ReactFlowState } from '../../types'; import { getDimensions } from '../../utils'; +import { Position } from '../../types'; +import type { HandleElement, Node, NodeOrigin, ReactFlowState } from '../../types'; export const getHandleBounds = ( selector: string, diff --git a/packages/core/src/components/Nodes/wrapNode.tsx b/packages/core/src/components/Nodes/wrapNode.tsx index 8ebb50f9..afb1f761 100644 --- a/packages/core/src/components/Nodes/wrapNode.tsx +++ b/packages/core/src/components/Nodes/wrapNode.tsx @@ -1,4 +1,5 @@ -import { useEffect, useRef, memo, ComponentType, MouseEvent, KeyboardEvent } from 'react'; +import { useEffect, useRef, memo } from 'react'; +import type { ComponentType, MouseEvent, KeyboardEvent } from 'react'; import cc from 'classcat'; import { useStoreApi } from '../../hooks/useStore'; @@ -7,14 +8,14 @@ import { ARIA_NODE_DESC_KEY } from '../A11yDescriptions'; import useDrag from '../../hooks/useDrag'; import useUpdateNodePositions from '../../hooks/useUpdateNodePositions'; import { getMouseHandler, handleNodeClick } from './utils'; -import { NodeProps, WrapNodeProps, XYPosition } from '../../types'; import { elementSelectionKeys } from '../../utils'; +import type { NodeProps, WrapNodeProps, XYPosition } from '../../types'; export const arrowKeyDiffs: Record = { - ArrowUp: { x: 0, y: -10 }, - ArrowDown: { x: 0, y: 10 }, - ArrowLeft: { x: -10, y: 0 }, - ArrowRight: { x: 10, y: 0 }, + ArrowUp: { x: 0, y: -1 }, + ArrowDown: { x: 0, y: 1 }, + ArrowLeft: { x: -1, y: 0 }, + ArrowRight: { x: 1, y: 0 }, }; export default (NodeComponent: ComponentType) => { @@ -38,6 +39,7 @@ export default (NodeComponent: ComponentType) => { isDraggable, isSelectable, isConnectable, + isFocusable, selectNodesOnDrag, sourcePosition, targetPosition, @@ -82,6 +84,7 @@ export default (NodeComponent: ComponentType) => { }; const onKeyDown = (event: KeyboardEvent) => { + const { snapGrid, snapToGrid } = store.getState(); if (elementSelectionKeys.includes(event.key) && isSelectable) { const unselect = event.key === 'Escape'; if (unselect) { @@ -92,14 +95,28 @@ export default (NodeComponent: ComponentType) => { store, unselect, }); - } else if (selected && Object.prototype.hasOwnProperty.call(arrowKeyDiffs, event.key)) { + } else if ( + !disableKeyboardA11y && + isDraggable && + selected && + Object.prototype.hasOwnProperty.call(arrowKeyDiffs, event.key) + ) { store.setState({ - ariaLiveMessage: `Moved selected node ten pixels ${event.key + ariaLiveMessage: `Moved selected node ${event.key .replace('Arrow', '') .toLowerCase()}. New position, x: ${~~xPos}, y: ${~~yPos}`, }); - updatePositions(arrowKeyDiffs[event.key]); + // by default a node moves 5px on each key press, or 20px if shift is pressed + // if snap grid is enabled, we use that for the velocity. + const xVelo = snapToGrid ? snapGrid[0] : 5; + const yVelo = snapToGrid ? snapGrid[1] : 5; + const factor = event.shiftKey ? 4 : 1; + + updatePositions({ + x: arrowKeyDiffs[event.key].x * xVelo * factor, + y: arrowKeyDiffs[event.key].y * yVelo * factor, + }); } }; @@ -151,13 +168,16 @@ export default (NodeComponent: ComponentType) => { className={cc([ 'react-flow__node', `react-flow__node-${type}`, + { + // this is overwritable by passing `nopan` as a class name + [noPanClassName]: isDraggable, + }, className, { selected, selectable: isSelectable, parent: isParent, dragging, - [noPanClassName]: isDraggable, }, ])} ref={nodeRef} @@ -176,9 +196,9 @@ export default (NodeComponent: ComponentType) => { onContextMenu={onContextMenuHandler} onClick={onSelectNodeHandler} onDoubleClick={onDoubleClickHandler} - onKeyDown={disableKeyboardA11y ? undefined : onKeyDown} - tabIndex={disableKeyboardA11y ? undefined : 0} - role={disableKeyboardA11y ? undefined : 'button'} + onKeyDown={isFocusable ? onKeyDown : undefined} + tabIndex={isFocusable ? 0 : undefined} + role={isFocusable ? 'button' : undefined} aria-describedby={disableKeyboardA11y ? undefined : `${ARIA_NODE_DESC_KEY}-${rfId}`} aria-label={ariaLabel} > diff --git a/packages/core/src/components/NodesSelection/index.tsx b/packages/core/src/components/NodesSelection/index.tsx index 17b24805..5e75d5ed 100644 --- a/packages/core/src/components/NodesSelection/index.tsx +++ b/packages/core/src/components/NodesSelection/index.tsx @@ -3,16 +3,17 @@ * made a selection with on or several nodes */ -import { memo, useRef, MouseEvent, KeyboardEvent, useEffect } from 'react'; +import { memo, useRef, useEffect } from 'react'; +import type { MouseEvent, KeyboardEvent } from 'react'; import cc from 'classcat'; import shallow from 'zustand/shallow'; import { useStore, useStoreApi } from '../../hooks/useStore'; -import { Node, ReactFlowState } from '../../types'; import { getRectOfNodes } from '../../utils/graph'; import useDrag from '../../hooks/useDrag'; import { arrowKeyDiffs } from '../Nodes/wrapNode'; import useUpdateNodePositions from '../../hooks/useUpdateNodePositions'; +import type { Node, ReactFlowState } from '../../types'; export interface NodesSelectionProps { onSelectionContextMenu?: (event: MouseEvent, nodes: Node[]) => void; diff --git a/packages/core/src/components/Panel/index.tsx b/packages/core/src/components/Panel/index.tsx index 2f68f134..7228f1a7 100644 --- a/packages/core/src/components/Panel/index.tsx +++ b/packages/core/src/components/Panel/index.tsx @@ -1,18 +1,26 @@ -import { HTMLAttributes, ReactNode } from 'react'; +import type { HTMLAttributes, ReactNode } from 'react'; import cc from 'classcat'; -import { PanelPosition } from '../../types'; +import { useStore } from '../../hooks/useStore'; +import type { PanelPosition, ReactFlowState } from '../../types'; export type PanelProps = HTMLAttributes & { position: PanelPosition; children: ReactNode; }; -function Panel({ position, children, className, ...rest }: PanelProps) { +const selector = (s: ReactFlowState) => (s.userSelectionActive ? 'none' : 'all'); + +function Panel({ position, children, className, style, ...rest }: PanelProps) { + const pointerEvents = useStore(selector); const positionClasses = `${position}`.split('-'); return ( -
+
{children}
); diff --git a/packages/core/src/components/ReactFlowProvider/index.tsx b/packages/core/src/components/ReactFlowProvider/index.tsx index 703c9c06..971041c1 100644 --- a/packages/core/src/components/ReactFlowProvider/index.tsx +++ b/packages/core/src/components/ReactFlowProvider/index.tsx @@ -1,9 +1,10 @@ -import { FC, PropsWithChildren, useRef } from 'react'; +import { useRef } from 'react'; +import type { FC, PropsWithChildren } from 'react'; import { StoreApi } from 'zustand'; import { Provider } from '../../contexts/RFStoreContext'; import { createRFStore } from '../../store'; -import { ReactFlowState } from '../../types'; +import type { ReactFlowState } from '../../types'; const ReactFlowProvider: FC = ({ children }) => { const storeRef = useRef | null>(null); diff --git a/packages/core/src/components/SelectionListener/index.tsx b/packages/core/src/components/SelectionListener/index.tsx index 9fdcc31b..6177f53d 100644 --- a/packages/core/src/components/SelectionListener/index.tsx +++ b/packages/core/src/components/SelectionListener/index.tsx @@ -1,12 +1,12 @@ import { memo, useEffect } from 'react'; import shallow from 'zustand/shallow'; -import { ReactFlowState, OnSelectionChangeFunc, Node, Edge } from '../../types'; import { useStore, useStoreApi } from '../../hooks/useStore'; +import type { ReactFlowState, OnSelectionChangeFunc, Node, Edge } from '../../types'; -interface SelectionListenerProps { - onSelectionChange: OnSelectionChangeFunc; -} +type SelectionListenerProps = { + onSelectionChange?: OnSelectionChangeFunc; +}; const selector = (s: ReactFlowState) => ({ selectedNodes: Array.from(s.nodeInternals.values()).filter((n) => n.selected), @@ -15,30 +15,42 @@ const selector = (s: ReactFlowState) => ({ type SelectorSlice = ReturnType; -function areEqual(objA: SelectorSlice, objB: SelectorSlice) { - const selectedNodeIdsA = objA.selectedNodes.map((n: Node) => n.id); - const selectedNodeIdsB = objB.selectedNodes.map((n: Node) => n.id); +const selectId = (obj: Node | Edge) => obj.id; - const selectedEdgeIdsA = objA.selectedEdges.map((e: Edge) => e.id); - const selectedEdgeIdsB = objB.selectedEdges.map((e: Edge) => e.id); - - return shallow(selectedNodeIdsA, selectedNodeIdsB) && shallow(selectedEdgeIdsA, selectedEdgeIdsB); +function areEqual(a: SelectorSlice, b: SelectorSlice) { + return ( + shallow(a.selectedNodes.map(selectId), b.selectedNodes.map(selectId)) && + shallow(a.selectedEdges.map(selectId), b.selectedEdges.map(selectId)) + ); } // This is just a helper component for calling the onSelectionChange listener. // @TODO: Now that we have the onNodesChange and on EdgesChange listeners, do we still need this component? -function SelectionListener({ onSelectionChange }: SelectionListenerProps) { +const SelectionListener = memo(({ onSelectionChange }: SelectionListenerProps) => { const store = useStoreApi(); const { selectedNodes, selectedEdges } = useStore(selector, areEqual); useEffect(() => { const params = { nodes: selectedNodes, edges: selectedEdges }; - - onSelectionChange(params); + onSelectionChange?.(params); store.getState().onSelectionChange?.(params); - }, [selectedNodes, selectedEdges]); + }, [selectedNodes, selectedEdges, onSelectionChange]); + + return null; +}); + +SelectionListener.displayName = 'SelectionListener'; + +const changeSelector = (s: ReactFlowState) => !!s.onSelectionChange; + +function Wrapper({ onSelectionChange }: SelectionListenerProps) { + const storeHasSelectionChange = useStore(changeSelector); + + if (onSelectionChange || storeHasSelectionChange) { + return ; + } return null; } -export default memo(SelectionListener); +export default Wrapper; diff --git a/packages/core/src/components/StoreUpdater/index.tsx b/packages/core/src/components/StoreUpdater/index.tsx index 1c0db13a..2f98a453 100644 --- a/packages/core/src/components/StoreUpdater/index.tsx +++ b/packages/core/src/components/StoreUpdater/index.tsx @@ -3,7 +3,7 @@ import { StoreApi } from 'zustand'; import shallow from 'zustand/shallow'; import { useStore, useStoreApi } from '../../hooks/useStore'; -import { Node, Edge, ReactFlowState, CoordinateExtent, ReactFlowProps, ReactFlowStore } from '../../types'; +import type { Node, Edge, ReactFlowState, CoordinateExtent, ReactFlowProps, ReactFlowStore } from '../../types'; type StoreUpdaterProps = Pick< ReactFlowProps, @@ -18,6 +18,8 @@ type StoreUpdaterProps = Pick< | 'onClickConnectEnd' | 'nodesDraggable' | 'nodesConnectable' + | 'nodesFocusable' + | 'edgesFocusable' | 'minZoom' | 'maxZoom' | 'nodeExtent' @@ -42,8 +44,7 @@ type StoreUpdaterProps = Pick< | 'onSelectionDragStop' | 'noPanClassName' | 'nodeOrigin' - | 'id' ->; +> & { rfId: string }; const selector = (s: ReactFlowState) => ({ setNodes: s.setNodes, @@ -89,6 +90,8 @@ const StoreUpdater = ({ onClickConnectEnd, nodesDraggable, nodesConnectable, + nodesFocusable, + edgesFocusable, minZoom, maxZoom, nodeExtent, @@ -113,7 +116,7 @@ const StoreUpdater = ({ onSelectionDragStop, noPanClassName, nodeOrigin, - id, + rfId, }: StoreUpdaterProps) => { const { setNodes, @@ -145,6 +148,8 @@ const StoreUpdater = ({ useDirectStoreUpdater('onClickConnectEnd', onClickConnectEnd, store.setState); useDirectStoreUpdater('nodesDraggable', nodesDraggable, store.setState); useDirectStoreUpdater('nodesConnectable', nodesConnectable, store.setState); + useDirectStoreUpdater('nodesFocusable', nodesFocusable, store.setState); + useDirectStoreUpdater('edgesFocusable', edgesFocusable, store.setState); useDirectStoreUpdater('elementsSelectable', elementsSelectable, store.setState); useDirectStoreUpdater('snapToGrid', snapToGrid, store.setState); useDirectStoreUpdater('snapGrid', snapGrid, store.setState); @@ -163,7 +168,7 @@ const StoreUpdater = ({ useDirectStoreUpdater('onSelectionDragStop', onSelectionDragStop, store.setState); useDirectStoreUpdater('noPanClassName', noPanClassName, store.setState); useDirectStoreUpdater('nodeOrigin', nodeOrigin, store.setState); - useDirectStoreUpdater('rfId', id, store.setState); + useDirectStoreUpdater('rfId', rfId, store.setState); useStoreUpdater(nodes, setNodes); useStoreUpdater(edges, setEdges); diff --git a/packages/core/src/components/UserSelection/index.tsx b/packages/core/src/components/UserSelection/index.tsx index 3809d579..142be18f 100644 --- a/packages/core/src/components/UserSelection/index.tsx +++ b/packages/core/src/components/UserSelection/index.tsx @@ -7,8 +7,8 @@ import shallow from 'zustand/shallow'; import { useStore, useStoreApi } from '../../hooks/useStore'; import { getSelectionChanges } from '../../utils/changes'; -import { XYPosition, ReactFlowState, NodeChange, EdgeChange, Rect } from '../../types'; import { getConnectedEdges, getNodesInside } from '../../utils/graph'; +import type { XYPosition, ReactFlowState, NodeChange, EdgeChange, Rect } from '../../types'; type SelectionRect = Rect & { startX: number; diff --git a/packages/core/src/container/EdgeRenderer/MarkerDefinitions.tsx b/packages/core/src/container/EdgeRenderer/MarkerDefinitions.tsx index cfcba262..d718c65f 100644 --- a/packages/core/src/container/EdgeRenderer/MarkerDefinitions.tsx +++ b/packages/core/src/container/EdgeRenderer/MarkerDefinitions.tsx @@ -1,16 +1,18 @@ import { memo, useCallback } from 'react'; import { useStore } from '../../hooks/useStore'; -import { EdgeMarker, ReactFlowState } from '../../types'; import { getMarkerId } from '../../utils/graph'; import { useMarkerSymbol } from './MarkerSymbols'; -interface MarkerProps extends EdgeMarker { +import type { EdgeMarker, ReactFlowState } from '../../types'; + +type MarkerProps = EdgeMarker & { id: string; -} -interface MarkerDefinitionsProps { +}; + +type MarkerDefinitionsProps = { defaultColor: string; rfId?: string; -} +}; const Marker = ({ id, diff --git a/packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx b/packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx index b0a5757e..fbdd4972 100644 --- a/packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx +++ b/packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx @@ -1,6 +1,8 @@ import { useMemo } from 'react'; -import { MarkerType, EdgeMarker } from '../../types'; + import { devWarn } from '../../utils'; +import { MarkerType } from '../../types'; +import type { EdgeMarker } from '../../types'; type SymbolProps = Omit; diff --git a/packages/core/src/container/EdgeRenderer/index.tsx b/packages/core/src/container/EdgeRenderer/index.tsx index 1ce6b4a2..e07948ad 100644 --- a/packages/core/src/container/EdgeRenderer/index.tsx +++ b/packages/core/src/container/EdgeRenderer/index.tsx @@ -8,44 +8,45 @@ import ConnectionLine from '../../components/ConnectionLine/index'; import MarkerDefinitions from './MarkerDefinitions'; import { getEdgePositions, getHandle, getNodeData } from './utils'; -import { Position, Edge, ConnectionMode, ReactFlowState } from '../../types'; import { GraphViewProps } from '../GraphView'; import { devWarn } from '../../utils'; +import { ConnectionMode, Position } from '../../types'; +import type { Edge, ReactFlowState } from '../../types'; -interface EdgeRendererProps - extends Pick< - GraphViewProps, - | 'edgeTypes' - | 'connectionLineType' - | 'connectionLineType' - | 'connectionLineStyle' - | 'connectionLineComponent' - | 'connectionLineContainerStyle' - | 'connectionLineContainerStyle' - | 'onEdgeClick' - | 'onEdgeDoubleClick' - | 'defaultMarkerColor' - | 'onlyRenderVisibleElements' - | 'onEdgeUpdate' - | 'onEdgeContextMenu' - | 'onEdgeMouseEnter' - | 'onEdgeMouseMove' - | 'onEdgeMouseLeave' - | 'onEdgeUpdateStart' - | 'onEdgeUpdateEnd' - | 'edgeUpdaterRadius' - | 'noPanClassName' - | 'elevateEdgesOnSelect' - | 'rfId' - | 'disableKeyboardA11y' - > { +type EdgeRendererProps = Pick< + GraphViewProps, + | 'edgeTypes' + | 'connectionLineType' + | 'connectionLineType' + | 'connectionLineStyle' + | 'connectionLineComponent' + | 'connectionLineContainerStyle' + | 'connectionLineContainerStyle' + | 'onEdgeClick' + | 'onEdgeDoubleClick' + | 'defaultMarkerColor' + | 'onlyRenderVisibleElements' + | 'onEdgeUpdate' + | 'onEdgeContextMenu' + | 'onEdgeMouseEnter' + | 'onEdgeMouseMove' + | 'onEdgeMouseLeave' + | 'onEdgeUpdateStart' + | 'onEdgeUpdateEnd' + | 'edgeUpdaterRadius' + | 'noPanClassName' + | 'elevateEdgesOnSelect' + | 'rfId' + | 'disableKeyboardA11y' +> & { elevateEdgesOnSelect: boolean; -} +}; const selector = (s: ReactFlowState) => ({ connectionNodeId: s.connectionNodeId, connectionHandleType: s.connectionHandleType, nodesConnectable: s.nodesConnectable, + edgesFocusable: s.edgesFocusable, elementsSelectable: s.elementsSelectable, width: s.width, height: s.height, @@ -58,6 +59,7 @@ const EdgeRenderer = (props: EdgeRendererProps) => { connectionNodeId, connectionHandleType, nodesConnectable, + edgesFocusable, elementsSelectable, width, height, @@ -119,6 +121,7 @@ const EdgeRenderer = (props: EdgeRendererProps) => { const targetHandle = getHandle(targetNodeHandles!, edge.targetHandle || null); const sourcePosition = sourceHandle?.position || Position.Bottom; const targetPosition = targetHandle?.position || Position.Top; + const isFocusable = !!(edge.focusable || (edgesFocusable && typeof edge.focusable === 'undefined')); if (!sourceHandle || !targetHandle) { devWarn( @@ -181,7 +184,7 @@ const EdgeRenderer = (props: EdgeRendererProps) => { onEdgeUpdateEnd={props.onEdgeUpdateEnd} rfId={props.rfId} ariaLabel={edge.ariaLabel} - disableKeyboardA11y={props.disableKeyboardA11y} + isFocusable={isFocusable} pathOptions={'pathOptions' in edge ? edge.pathOptions : undefined} interactionWidth={edge.interactionWidth} /> diff --git a/packages/core/src/container/EdgeRenderer/utils.ts b/packages/core/src/container/EdgeRenderer/utils.ts index b458a2c3..eee01706 100644 --- a/packages/core/src/container/EdgeRenderer/utils.ts +++ b/packages/core/src/container/EdgeRenderer/utils.ts @@ -1,19 +1,20 @@ -import { ComponentType } from 'react'; +import type { ComponentType } from 'react'; + import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge, SimpleBezierEdge } from '../../components/Edges'; import wrapEdge from '../../components/Edges/wrapEdge'; -import { +import { internalsSymbol, rectToBox } from '../../utils'; +import { Position } from '../../types'; +import type { EdgeProps, EdgeTypes, EdgeTypesWrapped, HandleElement, NodeHandleBounds, Node, - Position, Rect, Transform, XYPosition, } from '../../types'; -import { internalsSymbol, rectToBox } from '../../utils'; export type CreateEdgeTypes = (edgeTypes: EdgeTypes) => EdgeTypesWrapped; diff --git a/packages/core/src/container/FlowRenderer/Pane.tsx b/packages/core/src/container/FlowRenderer/Pane.tsx index 113945bf..60502182 100644 --- a/packages/core/src/container/FlowRenderer/Pane.tsx +++ b/packages/core/src/container/FlowRenderer/Pane.tsx @@ -1,4 +1,4 @@ -import { MouseEvent } from 'react'; +import type { MouseEvent } from 'react'; import cc from 'classcat'; import { useStore } from '../../hooks/useStore'; diff --git a/packages/core/src/container/FlowRenderer/index.tsx b/packages/core/src/container/FlowRenderer/index.tsx index 76accfbb..e3faed9c 100644 --- a/packages/core/src/container/FlowRenderer/index.tsx +++ b/packages/core/src/container/FlowRenderer/index.tsx @@ -1,4 +1,5 @@ -import { memo, ReactNode, WheelEvent, MouseEvent } from 'react'; +import { memo } from 'react'; +import type { ReactNode, WheelEvent, MouseEvent } from 'react'; import { useStore, useStoreApi } from '../../hooks/useStore'; import useGlobalKeyHandler from '../../hooks/useGlobalKeyHandler'; @@ -8,8 +9,7 @@ import ZoomPane from '../ZoomPane'; import UserSelection from '../../components/UserSelection'; import NodesSelection from '../../components/NodesSelection'; import Pane from './Pane'; - -import { ReactFlowState } from '../../types'; +import type { ReactFlowState } from '../../types'; export type FlowRendererProps = Omit< GraphViewProps, diff --git a/packages/core/src/container/GraphView/index.tsx b/packages/core/src/container/GraphView/index.tsx index e94698e7..690b66f6 100644 --- a/packages/core/src/container/GraphView/index.tsx +++ b/packages/core/src/container/GraphView/index.tsx @@ -5,39 +5,35 @@ import NodeRenderer from '../NodeRenderer'; import EdgeRenderer from '../EdgeRenderer'; import ViewportWrapper from '../Viewport'; import useOnInitHandler from '../../hooks/useOnInitHandler'; -import { - NodeTypesWrapped, - EdgeTypesWrapped, - ConnectionLineType, - KeyCode, - ReactFlowProps, - Viewport, - CoordinateExtent, - NodeOrigin, -} from '../../types'; +import type { EdgeTypesWrapped, NodeTypesWrapped, ReactFlowProps } from '../../types'; -export interface GraphViewProps - extends Omit { - nodeTypes: NodeTypesWrapped; - edgeTypes: EdgeTypesWrapped; - selectionKeyCode: KeyCode | null; - deleteKeyCode: KeyCode | null; - multiSelectionKeyCode: KeyCode | null; - connectionLineType: ConnectionLineType; - onlyRenderVisibleElements: boolean; - translateExtent: CoordinateExtent; - minZoom: number; - maxZoom: number; - defaultMarkerColor: string; - selectNodesOnDrag: boolean; - noDragClassName: string; - noWheelClassName: string; - noPanClassName: string; - defaultViewport: Viewport; - rfId: string; - disableKeyboardA11y: boolean; - nodeOrigin: NodeOrigin; -} +export type GraphViewProps = Omit & + Required< + Pick< + ReactFlowProps, + | 'selectionKeyCode' + | 'deleteKeyCode' + | 'multiSelectionKeyCode' + | 'connectionLineType' + | 'onlyRenderVisibleElements' + | 'translateExtent' + | 'minZoom' + | 'maxZoom' + | 'defaultMarkerColor' + | 'selectNodesOnDrag' + | 'noDragClassName' + | 'noDragClassName' + | 'noWheelClassName' + | 'noPanClassName' + | 'defaultViewport' + | 'disableKeyboardA11y' + | 'nodeOrigin' + > + > & { + nodeTypes: NodeTypesWrapped; + edgeTypes: EdgeTypesWrapped; + rfId: string; + }; const GraphView = ({ nodeTypes, diff --git a/packages/core/src/container/NodeRenderer/index.tsx b/packages/core/src/container/NodeRenderer/index.tsx index c9b4190f..70a62dfe 100644 --- a/packages/core/src/container/NodeRenderer/index.tsx +++ b/packages/core/src/container/NodeRenderer/index.tsx @@ -1,4 +1,5 @@ -import { memo, useMemo, ComponentType, useEffect, useRef } from 'react'; +import { memo, useMemo, useEffect, useRef } from 'react'; +import type { ComponentType } from 'react'; import shallow from 'zustand/shallow'; import useVisibleNodes from '../../hooks/useVisibleNodes'; @@ -6,8 +7,9 @@ import { useStore } from '../../hooks/useStore'; import { clampPosition, devWarn, internalsSymbol } from '../../utils'; import { containerStyle } from '../../styles'; import { GraphViewProps } from '../GraphView'; -import { Position, ReactFlowState, WrapNodeProps } from '../../types'; import { getPositionWithOrigin } from './utils'; +import { Position } from '../../types'; +import type { ReactFlowState, WrapNodeProps } from '../../types'; type NodeRendererProps = Pick< GraphViewProps, @@ -31,12 +33,16 @@ type NodeRendererProps = Pick< const selector = (s: ReactFlowState) => ({ nodesDraggable: s.nodesDraggable, nodesConnectable: s.nodesConnectable, + nodesFocusable: s.nodesFocusable, elementsSelectable: s.elementsSelectable, updateNodeDimensions: s.updateNodeDimensions, }); const NodeRenderer = (props: NodeRendererProps) => { - const { nodesDraggable, nodesConnectable, elementsSelectable, updateNodeDimensions } = useStore(selector, shallow); + const { nodesDraggable, nodesConnectable, nodesFocusable, elementsSelectable, updateNodeDimensions } = useStore( + selector, + shallow + ); const nodes = useVisibleNodes(props.onlyRenderVisibleElements); const resizeObserverRef = useRef(); @@ -82,6 +88,8 @@ const NodeRenderer = (props: NodeRendererProps) => { const isDraggable = !!(node.draggable || (nodesDraggable && typeof node.draggable === 'undefined')); const isSelectable = !!(node.selectable || (elementsSelectable && typeof node.selectable === 'undefined')); const isConnectable = !!(node.connectable || (nodesConnectable && typeof node.connectable === 'undefined')); + const isFocusable = !!(node.focusable || (nodesFocusable && typeof node.focusable === 'undefined')); + const clampedPosition = props.nodeExtent ? clampPosition(node.positionAbsolute, props.nodeExtent) : node.positionAbsolute; @@ -122,6 +130,7 @@ const NodeRenderer = (props: NodeRendererProps) => { isDraggable={isDraggable} isSelectable={isSelectable} isConnectable={isConnectable} + isFocusable={isFocusable} resizeObserver={resizeObserver} dragHandle={node.dragHandle} zIndex={node[internalsSymbol]?.z ?? 0} diff --git a/packages/core/src/container/NodeRenderer/utils.ts b/packages/core/src/container/NodeRenderer/utils.ts index 6893aeb9..ebac7413 100644 --- a/packages/core/src/container/NodeRenderer/utils.ts +++ b/packages/core/src/container/NodeRenderer/utils.ts @@ -1,12 +1,12 @@ -import { ComponentType } from 'react'; +import type { ComponentType } from 'react'; import DefaultNode from '../../components/Nodes/DefaultNode'; import InputNode from '../../components/Nodes/InputNode'; import OutputNode from '../../components/Nodes/OutputNode'; import GroupNode from '../../components/Nodes/GroupNode'; import wrapNode from '../../components/Nodes/wrapNode'; -import { NodeTypes, NodeProps, NodeTypesWrapped, NodeOrigin, XYPosition } from '../../types'; import { devWarn } from '../../utils'; +import type { NodeTypes, NodeProps, NodeTypesWrapped, NodeOrigin, XYPosition } from '../../types'; export type CreateNodeTypes = (nodeTypes: NodeTypes) => NodeTypesWrapped; diff --git a/packages/core/src/container/ReactFlow/Wrapper.tsx b/packages/core/src/container/ReactFlow/Wrapper.tsx index 77924393..297e3b49 100644 --- a/packages/core/src/container/ReactFlow/Wrapper.tsx +++ b/packages/core/src/container/ReactFlow/Wrapper.tsx @@ -1,4 +1,4 @@ -import { FC, PropsWithChildren } from 'react'; +import type { FC, PropsWithChildren } from 'react'; import { useStoreApi } from '../../hooks/useStore'; import ReactFlowProvider from '../../components/ReactFlowProvider'; diff --git a/packages/core/src/container/ReactFlow/index.tsx b/packages/core/src/container/ReactFlow/index.tsx index bda960ec..6cb99d33 100644 --- a/packages/core/src/container/ReactFlow/index.tsx +++ b/packages/core/src/container/ReactFlow/index.tsx @@ -1,4 +1,5 @@ -import { CSSProperties, forwardRef } from 'react'; +import { forwardRef } from 'react'; +import type { CSSProperties } from 'react'; import cc from 'classcat'; import Attribution from '../../components/Attribution'; @@ -9,27 +10,24 @@ import OutputNode from '../../components/Nodes/OutputNode'; import GroupNode from '../../components/Nodes/GroupNode'; import SelectionListener from '../../components/SelectionListener'; import StoreUpdater from '../../components/StoreUpdater'; - -import { - ConnectionLineType, - ConnectionMode, +import A11yDescriptions from '../../components/A11yDescriptions'; +import { createEdgeTypes } from '../EdgeRenderer/utils'; +import { createNodeTypes } from '../NodeRenderer/utils'; +import GraphView from '../GraphView'; +import Wrapper from './Wrapper'; +import { infiniteExtent } from '../../store/initialState'; +import { useNodeOrEdgeTypes } from './utils'; +import { ConnectionLineType, ConnectionMode, PanOnScrollMode } from '../../types'; +import type { EdgeTypes, EdgeTypesWrapped, NodeOrigin, NodeTypes, NodeTypesWrapped, - PanOnScrollMode, ReactFlowProps, ReactFlowRefType, Viewport, } from '../../types'; -import { createEdgeTypes } from '../EdgeRenderer/utils'; -import GraphView from '../GraphView'; -import { createNodeTypes } from '../NodeRenderer/utils'; -import { useNodeOrEdgeTypes } from './utils'; -import Wrapper from './Wrapper'; -import A11yDescriptions from '../../components/A11yDescriptions'; -import { infiniteExtent } from '../../store/initialState'; const defaultNodeTypes: NodeTypes = { input: InputNode, @@ -108,7 +106,9 @@ const ReactFlow = forwardRef( selectNodesOnDrag = true, nodesDraggable, nodesConnectable, + nodesFocusable, nodeOrigin = initNodeOrigin, + edgesFocusable, elementsSelectable, defaultViewport = initDefaultViewport, minZoom = 0.5, @@ -154,13 +154,14 @@ const ReactFlow = forwardRef( elevateEdgesOnSelect = false, disableKeyboardA11y = false, style, - id = '1', + id, ...rest }, ref ) => { const nodeTypesWrapped = useNodeOrEdgeTypes(nodeTypes, createNodeTypes) as NodeTypesWrapped; const edgeTypesWrapped = useNodeOrEdgeTypes(edgeTypes, createEdgeTypes) as EdgeTypesWrapped; + const rfId = id || '1'; return (
( ref={ref} className={cc(['react-flow', className])} data-testid="rf__wrapper" + id={id} > ( noWheelClassName={noWheelClassName} noPanClassName={noPanClassName} elevateEdgesOnSelect={elevateEdgesOnSelect} - rfId={id} + rfId={rfId} disableKeyboardA11y={disableKeyboardA11y} nodeOrigin={nodeOrigin} nodeExtent={nodeExtent} @@ -245,6 +247,8 @@ const ReactFlow = forwardRef( onClickConnectEnd={onClickConnectEnd} nodesDraggable={nodesDraggable} nodesConnectable={nodesConnectable} + nodesFocusable={nodesFocusable} + edgesFocusable={edgesFocusable} elementsSelectable={elementsSelectable} minZoom={minZoom} maxZoom={maxZoom} @@ -269,12 +273,12 @@ const ReactFlow = forwardRef( onSelectionDragStop={onSelectionDragStop} noPanClassName={noPanClassName} nodeOrigin={nodeOrigin} - id={id} + rfId={rfId} /> - {onSelectionChange && } + {children} - {!disableKeyboardA11y && } +
); diff --git a/packages/core/src/container/ReactFlow/utils.ts b/packages/core/src/container/ReactFlow/utils.ts index b85e75d6..4fc799a7 100644 --- a/packages/core/src/container/ReactFlow/utils.ts +++ b/packages/core/src/container/ReactFlow/utils.ts @@ -1,10 +1,10 @@ import { useMemo, useRef } from 'react'; import shallow from 'zustand/shallow'; -import { EdgeTypes, EdgeTypesWrapped, NodeTypes, NodeTypesWrapped } from '../../types'; import { devWarn } from '../../utils'; import { CreateEdgeTypes } from '../EdgeRenderer/utils'; import { CreateNodeTypes } from '../NodeRenderer/utils'; +import type { EdgeTypes, EdgeTypesWrapped, NodeTypes, NodeTypesWrapped } from '../../types'; export function useNodeOrEdgeTypes(nodeOrEdgeTypes: NodeTypes, createTypes: CreateNodeTypes): NodeTypesWrapped; export function useNodeOrEdgeTypes(nodeOrEdgeTypes: EdgeTypes, createTypes: CreateEdgeTypes): EdgeTypesWrapped; diff --git a/packages/core/src/container/Viewport/index.tsx b/packages/core/src/container/Viewport/index.tsx index 3b474f82..64ed99d5 100644 --- a/packages/core/src/container/Viewport/index.tsx +++ b/packages/core/src/container/Viewport/index.tsx @@ -1,7 +1,7 @@ -import { ReactNode } from 'react'; +import type { ReactNode } from 'react'; import { useStore } from '../../hooks/useStore'; -import { ReactFlowState } from '../../types'; +import type { ReactFlowState } from '../../types'; const selector = (s: ReactFlowState) => `translate(${s.transform[0]}px,${s.transform[1]}px) scale(${s.transform[2]})`; diff --git a/packages/core/src/container/ZoomPane/index.tsx b/packages/core/src/container/ZoomPane/index.tsx index 67e4b8fd..cde4ec47 100644 --- a/packages/core/src/container/ZoomPane/index.tsx +++ b/packages/core/src/container/ZoomPane/index.tsx @@ -1,6 +1,7 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ import { useEffect, useRef } from 'react'; -import { D3ZoomEvent, zoom, zoomIdentity } from 'd3-zoom'; +import { zoom, zoomIdentity } from 'd3-zoom'; +import type { D3ZoomEvent } from 'd3-zoom'; import { select, pointer } from 'd3-selection'; import shallow from 'zustand/shallow'; @@ -8,9 +9,10 @@ import { clamp } from '../../utils'; import useKeyPress from '../../hooks/useKeyPress'; import useResizeHandler from '../../hooks/useResizeHandler'; import { useStore, useStoreApi } from '../../hooks/useStore'; -import { FlowRendererProps } from '../FlowRenderer'; import { containerStyle } from '../../styles'; -import { Viewport, PanOnScrollMode, ReactFlowState } from '../../types'; +import type { FlowRendererProps } from '../FlowRenderer'; +import { PanOnScrollMode } from '../../types'; +import type { Viewport, ReactFlowState } from '../../types'; type ZoomPaneProps = Omit< FlowRendererProps, diff --git a/packages/core/src/hooks/useDrag/index.ts b/packages/core/src/hooks/useDrag/index.ts index 08bdf6c3..319c1993 100644 --- a/packages/core/src/hooks/useDrag/index.ts +++ b/packages/core/src/hooks/useDrag/index.ts @@ -1,12 +1,13 @@ -import { RefObject, useEffect, useRef, MouseEvent, useState, useCallback } from 'react'; +import { useEffect, useRef, useState, useCallback } from 'react'; +import type { RefObject, MouseEvent } from 'react'; import { drag } from 'd3-drag'; import { select } from 'd3-selection'; import type { D3DragEvent, SubjectPosition } from 'd3'; import { useStoreApi } from '../../hooks/useStore'; -import { NodeDragItem, Node, SelectionDragHandler } from '../../types'; import { getDragItems, getEventHandlerParams, hasSelector, calcNextPosition } from './utils'; import { handleNodeClick } from '../../components/Nodes/utils'; +import type { NodeDragItem, Node, SelectionDragHandler } from '../../types'; export type UseDragEvent = D3DragEvent; export type UseDragData = { dx: number; dy: number }; diff --git a/packages/core/src/hooks/useDrag/utils.ts b/packages/core/src/hooks/useDrag/utils.ts index bf9cd294..be25f3c1 100644 --- a/packages/core/src/hooks/useDrag/utils.ts +++ b/packages/core/src/hooks/useDrag/utils.ts @@ -1,7 +1,7 @@ -import { RefObject } from 'react'; +import type { RefObject } from 'react'; -import { CoordinateExtent, Node, NodeDragItem, NodeInternals, XYPosition } from '../../types'; import { clampPosition, devWarn } from '../../utils'; +import type { CoordinateExtent, Node, NodeDragItem, NodeInternals, XYPosition } from '../../types'; export function isParentSelected(node: Node, nodeInternals: NodeInternals): boolean { if (!node.parentNode) { diff --git a/packages/core/src/hooks/useEdges.ts b/packages/core/src/hooks/useEdges.ts index eee73eb0..78c0e36a 100644 --- a/packages/core/src/hooks/useEdges.ts +++ b/packages/core/src/hooks/useEdges.ts @@ -1,5 +1,5 @@ import { useStore } from '../hooks/useStore'; -import { Edge, ReactFlowState } from '../types'; +import type { Edge, ReactFlowState } from '../types'; const edgesSelector = (state: ReactFlowState) => state.edges; diff --git a/packages/core/src/hooks/useGlobalKeyHandler.ts b/packages/core/src/hooks/useGlobalKeyHandler.ts index 345864a0..2827d9cb 100644 --- a/packages/core/src/hooks/useGlobalKeyHandler.ts +++ b/packages/core/src/hooks/useGlobalKeyHandler.ts @@ -2,9 +2,8 @@ import { useEffect } from 'react'; import { useStoreApi } from '../hooks/useStore'; import useKeyPress from './useKeyPress'; -import { KeyCode } from '../types'; +import type { KeyCode } from '../types'; import useReactFlow from './useReactFlow'; - interface HookParams { deleteKeyCode: KeyCode | null; multiSelectionKeyCode: KeyCode | null; @@ -19,13 +18,10 @@ export default ({ deleteKeyCode, multiSelectionKeyCode }: HookParams): void => { useEffect(() => { if (deleteKeyPressed) { - const { - nodeInternals, - edges, - } = store.getState(); + const { nodeInternals, edges } = store.getState(); const nodes = Array.from(nodeInternals.values()); - const nodeIds = nodes.filter(node => node.selected).map(node => node.id); - const edgeIds = edges.filter(edge => edge.selected).map(edge => edge.id); + const nodeIds = nodes.filter((node) => node.selected).map((node) => node.id); + const edgeIds = edges.filter((edge) => edge.selected).map((edge) => edge.id); deleteElements(nodeIds, edgeIds); store.setState({ nodesSelectionActive: false }); } diff --git a/packages/core/src/hooks/useKeyPress.ts b/packages/core/src/hooks/useKeyPress.ts index d2e77e8f..4273feaa 100644 --- a/packages/core/src/hooks/useKeyPress.ts +++ b/packages/core/src/hooks/useKeyPress.ts @@ -1,6 +1,6 @@ import { useState, useEffect, useRef, useMemo } from 'react'; -import { KeyCode } from '../types'; +import type { KeyCode } from '../types'; type Keys = Array; type PressedKeys = Set; diff --git a/packages/core/src/hooks/useNodes.ts b/packages/core/src/hooks/useNodes.ts index 684becea..6a04942e 100644 --- a/packages/core/src/hooks/useNodes.ts +++ b/packages/core/src/hooks/useNodes.ts @@ -1,5 +1,5 @@ import { useStore } from '../hooks/useStore'; -import { Node, ReactFlowState } from '../types'; +import type { Node, ReactFlowState } from '../types'; const nodesSelector = (state: ReactFlowState) => Array.from(state.nodeInternals.values()); diff --git a/packages/core/src/hooks/useNodesEdgesState.ts b/packages/core/src/hooks/useNodesEdgesState.ts index 0ecbf611..31c16354 100644 --- a/packages/core/src/hooks/useNodesEdgesState.ts +++ b/packages/core/src/hooks/useNodesEdgesState.ts @@ -1,8 +1,9 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ -import { useState, useCallback, SetStateAction, Dispatch } from 'react'; +import { useState, useCallback } from 'react'; +import type { SetStateAction, Dispatch } from 'react'; import { applyNodeChanges, applyEdgeChanges } from '../utils/changes'; -import { Node, NodeChange, Edge, EdgeChange } from '../types'; +import type { Node, NodeChange, Edge, EdgeChange } from '../types'; type ApplyChanges = (changes: ChangesType[], items: ItemType[]) => ItemType[]; type OnChange = (changes: ChangesType[]) => void; diff --git a/packages/core/src/hooks/useNodesInitialized.ts b/packages/core/src/hooks/useNodesInitialized.ts index 1f2b1f56..f0ac25d2 100644 --- a/packages/core/src/hooks/useNodesInitialized.ts +++ b/packages/core/src/hooks/useNodesInitialized.ts @@ -1,6 +1,6 @@ -import { ReactFlowState } from '../types'; import { internalsSymbol } from '../utils'; import { useStore } from './useStore'; +import type { ReactFlowState } from '../types'; const selector = (s: ReactFlowState) => { if (s.nodeInternals.size === 0) { diff --git a/packages/core/src/hooks/useOnInitHandler.ts b/packages/core/src/hooks/useOnInitHandler.ts index 8a3a119c..27de912b 100644 --- a/packages/core/src/hooks/useOnInitHandler.ts +++ b/packages/core/src/hooks/useOnInitHandler.ts @@ -1,7 +1,7 @@ import { useEffect, useRef } from 'react'; import useReactFlow from './useReactFlow'; -import { OnInit } from '../types'; +import type { OnInit } from '../types'; function useOnInitHandler(onInit: OnInit | undefined) { const rfInstance = useReactFlow(); diff --git a/packages/core/src/hooks/useReactFlow.ts b/packages/core/src/hooks/useReactFlow.ts index 92480da2..32f4ee86 100644 --- a/packages/core/src/hooks/useReactFlow.ts +++ b/packages/core/src/hooks/useReactFlow.ts @@ -2,7 +2,7 @@ import { useCallback, useMemo } from 'react'; import useViewportHelper from './useViewportHelper'; import { useStoreApi } from '../hooks/useStore'; -import { +import type { ReactFlowInstance, Instance, NodeAddChange, diff --git a/packages/core/src/hooks/useResizeHandler.ts b/packages/core/src/hooks/useResizeHandler.ts index 8635db38..d2ca3e63 100644 --- a/packages/core/src/hooks/useResizeHandler.ts +++ b/packages/core/src/hooks/useResizeHandler.ts @@ -1,4 +1,5 @@ -import { useEffect, MutableRefObject } from 'react'; +import { useEffect } from 'react'; +import type { MutableRefObject } from 'react'; import { useStoreApi } from '../hooks/useStore'; import { devWarn, getDimensions } from '../utils'; diff --git a/packages/core/src/hooks/useStore.ts b/packages/core/src/hooks/useStore.ts index 3cdccb8a..bc0e605e 100644 --- a/packages/core/src/hooks/useStore.ts +++ b/packages/core/src/hooks/useStore.ts @@ -1,8 +1,9 @@ import { useContext, useMemo } from 'react'; -import { StoreApi, useStore as useZustandStore } from 'zustand'; +import { useStore as useZustandStore } from 'zustand'; +import type { StoreApi } from 'zustand'; import StoreContext from '../contexts/RFStoreContext'; -import { ReactFlowState } from '../types'; +import type { ReactFlowState } from '../types'; const errorMessage = '[React Flow]: Seems like you have not used zustand provider as an ancestor. Help: https://reactflow.dev/error#100'; diff --git a/packages/core/src/hooks/useUpdateNodeInternals.ts b/packages/core/src/hooks/useUpdateNodeInternals.ts index dbd1a84d..849d76b6 100644 --- a/packages/core/src/hooks/useUpdateNodeInternals.ts +++ b/packages/core/src/hooks/useUpdateNodeInternals.ts @@ -1,7 +1,7 @@ import { useCallback } from 'react'; import { useStoreApi } from '../hooks/useStore'; -import { UpdateNodeInternals } from '../types'; +import type { UpdateNodeInternals } from '../types'; function useUpdateNodeInternals(): UpdateNodeInternals { const store = useStoreApi(); diff --git a/packages/core/src/hooks/useUpdateNodePositions.ts b/packages/core/src/hooks/useUpdateNodePositions.ts index a77d50a0..eb5880e3 100644 --- a/packages/core/src/hooks/useUpdateNodePositions.ts +++ b/packages/core/src/hooks/useUpdateNodePositions.ts @@ -2,24 +2,25 @@ import { useCallback } from 'react'; import { useStoreApi } from '../hooks/useStore'; import { calcNextPosition } from './useDrag/utils'; - -import { XYPosition } from '../types'; +import type { XYPosition } from '../types'; function useUpdateNodePositions() { const store = useStoreApi(); const updatePositions = useCallback((positionDiff: XYPosition) => { - const { nodeInternals, nodeExtent, updateNodePositions } = store.getState(); + const { nodeInternals, nodeExtent, updateNodePositions, snapToGrid, snapGrid } = store.getState(); const selectedNodes = Array.from(nodeInternals.values()).filter((n) => n.selected); const nodeUpdates = selectedNodes.map((n) => { if (n.positionAbsolute) { - const updatedPos = calcNextPosition( - n, - { x: n.positionAbsolute.x + positionDiff.x, y: n.positionAbsolute.y + positionDiff.y }, - nodeInternals, - nodeExtent - ); + const nextPosition = { x: n.positionAbsolute.x + positionDiff.x, y: n.positionAbsolute.y + positionDiff.y }; + + if (snapToGrid) { + nextPosition.x = snapGrid[0] * Math.round(nextPosition.x / snapGrid[0]); + nextPosition.y = snapGrid[1] * Math.round(nextPosition.y / snapGrid[1]); + } + + const updatedPos = calcNextPosition(n, nextPosition, nodeInternals, nodeExtent); n.position = updatedPos.position; n.positionAbsolute = updatedPos.positionAbsolute; diff --git a/packages/core/src/hooks/useViewport.ts b/packages/core/src/hooks/useViewport.ts index 025040bd..c20e78b6 100644 --- a/packages/core/src/hooks/useViewport.ts +++ b/packages/core/src/hooks/useViewport.ts @@ -1,7 +1,7 @@ import shallow from 'zustand/shallow'; import { useStore } from '../hooks/useStore'; -import { Viewport, ReactFlowState } from '../types'; +import type { Viewport, ReactFlowState } from '../types'; const viewportSelector = (state: ReactFlowState) => ({ x: state.transform[0], diff --git a/packages/core/src/hooks/useViewportHelper.ts b/packages/core/src/hooks/useViewportHelper.ts index ea79f044..226d1a69 100644 --- a/packages/core/src/hooks/useViewportHelper.ts +++ b/packages/core/src/hooks/useViewportHelper.ts @@ -4,8 +4,8 @@ import shallow from 'zustand/shallow'; import { useStoreApi, useStore } from '../hooks/useStore'; import { pointToRendererPoint, getTransformForBounds, getD3Transition } from '../utils/graph'; -import { ViewportHelperFunctions, ReactFlowState, XYPosition } from '../types'; import { fitView as fitViewStore } from '../store/utils'; +import type { ViewportHelperFunctions, ReactFlowState, XYPosition } from '../types'; // eslint-disable-next-line @typescript-eslint/no-empty-function const noop = () => {}; diff --git a/packages/core/src/hooks/useVisibleEdges.ts b/packages/core/src/hooks/useVisibleEdges.ts index be3e7590..cbd673e5 100644 --- a/packages/core/src/hooks/useVisibleEdges.ts +++ b/packages/core/src/hooks/useVisibleEdges.ts @@ -2,8 +2,8 @@ import { useCallback } from 'react'; import { useStore } from '../hooks/useStore'; import { isEdgeVisible } from '../container/EdgeRenderer/utils'; -import { ReactFlowState, NodeInternals, Edge } from '../types'; import { internalsSymbol, isNumeric } from '../utils'; +import type { ReactFlowState, NodeInternals, Edge } from '../types'; const defaultEdgeTree = [{ level: 0, isMaxLevel: true, edges: [] }]; diff --git a/packages/core/src/hooks/useVisibleNodes.ts b/packages/core/src/hooks/useVisibleNodes.ts index ad81e3be..f74be159 100644 --- a/packages/core/src/hooks/useVisibleNodes.ts +++ b/packages/core/src/hooks/useVisibleNodes.ts @@ -2,8 +2,7 @@ import { useCallback } from 'react'; import { useStore } from '../hooks/useStore'; import { getNodesInside } from '../utils/graph'; - -import { ReactFlowState } from '../types'; +import type { ReactFlowState } from '../types'; function useVisibleNodes(onlyRenderVisible: boolean) { const nodes = useStore( diff --git a/packages/core/src/store/index.ts b/packages/core/src/store/index.ts index 37d6ad2b..e09abbd7 100644 --- a/packages/core/src/store/index.ts +++ b/packages/core/src/store/index.ts @@ -1,8 +1,11 @@ import { createStore } from 'zustand'; import { clampPosition, getDimensions, internalsSymbol } from '../utils'; -import { applyNodeChanges } from '../utils/changes'; -import { +import { applyNodeChanges, createSelectionChange, getSelectionChanges } from '../utils/changes'; +import { getHandleBounds } from '../components/Nodes/utils'; +import { createNodeInternals, fitView, updateNodesAndEdgesSelections } from './utils'; +import initialState from './initialState'; +import type { ReactFlowState, Node, Edge, @@ -15,10 +18,6 @@ import { NodeDragItem, UnselectNodesAndEdgesParams, } from '../types'; -import { getHandleBounds } from '../components/Nodes/utils'; -import { createSelectionChange, getSelectionChanges } from '../utils/changes'; -import { createNodeInternals, fitView, updateNodesAndEdgesSelections } from './utils'; -import initialState from './initialState'; const createRFStore = () => createStore((set, get) => ({ @@ -238,6 +237,11 @@ const createRFStore = () => nodeInternals: new Map(nodeInternals), }); }, + cancelConnection: () => + set({ + connectionNodeId: initialState.connectionNodeId, + connectionHandleId: initialState.connectionHandleId, + }), reset: () => set({ ...initialState }), })); diff --git a/packages/core/src/store/initialState.ts b/packages/core/src/store/initialState.ts index b84946ef..ab918e65 100644 --- a/packages/core/src/store/initialState.ts +++ b/packages/core/src/store/initialState.ts @@ -1,4 +1,5 @@ -import { CoordinateExtent, ReactFlowStore, ConnectionMode } from '../types'; +import { ConnectionMode } from '../types'; +import type { CoordinateExtent, ReactFlowStore } from '../types'; export const infiniteExtent: CoordinateExtent = [ [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY], @@ -40,6 +41,8 @@ const initialState: ReactFlowStore = { nodesDraggable: true, nodesConnectable: true, + nodesFocusable: true, + edgesFocusable: true, elementsSelectable: true, fitViewOnInit: false, fitViewOnInitDone: false, diff --git a/packages/core/src/store/utils.ts b/packages/core/src/store/utils.ts index 66078d19..f9a79ea1 100644 --- a/packages/core/src/store/utils.ts +++ b/packages/core/src/store/utils.ts @@ -1,9 +1,9 @@ import { zoomIdentity } from 'd3-zoom'; -import { StoreApi } from 'zustand'; +import type { StoreApi } from 'zustand'; import { internalsSymbol, isNumeric } from '../utils'; import { getD3Transition, getRectOfNodes, getTransformForBounds } from '../utils/graph'; -import { +import type { Edge, EdgeSelectionChange, Node, diff --git a/packages/core/src/styles/index.ts b/packages/core/src/styles/index.ts index e9f01264..91afb98c 100644 --- a/packages/core/src/styles/index.ts +++ b/packages/core/src/styles/index.ts @@ -1,4 +1,4 @@ -import { CSSProperties } from 'react'; +import type { CSSProperties } from 'react'; export const containerStyle: CSSProperties = { position: 'absolute', diff --git a/packages/core/src/styles/init.css b/packages/core/src/styles/init.css index c8ab7bfe..c24bc2d0 100644 --- a/packages/core/src/styles/init.css +++ b/packages/core/src/styles/init.css @@ -56,6 +56,11 @@ animation: dashdraw 0.5s linear infinite; } + &.animated path.react-flow__edge-interaction { + stroke-dasharray: none; + animation: none; + } + &.inactive { pointer-events: none; } diff --git a/packages/core/src/types/changes.ts b/packages/core/src/types/changes.ts index 2e3a22bc..b4395803 100644 --- a/packages/core/src/types/changes.ts +++ b/packages/core/src/types/changes.ts @@ -1,8 +1,8 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ -import { XYPosition, Dimensions } from './utils'; -import { Node } from './nodes'; -import { Edge } from './edges'; +import type { XYPosition, Dimensions } from './utils'; +import type { Node } from './nodes'; +import type { Edge } from './edges'; export type NodeDimensionChange = { id: string; diff --git a/packages/core/src/types/component-props.ts b/packages/core/src/types/component-props.ts index c763343e..9b273641 100644 --- a/packages/core/src/types/component-props.ts +++ b/packages/core/src/types/component-props.ts @@ -1,6 +1,6 @@ -import React, { CSSProperties, HTMLAttributes, MouseEvent as ReactMouseEvent, WheelEvent } from 'react'; +import type { CSSProperties, HTMLAttributes, MouseEvent as ReactMouseEvent, WheelEvent } from 'react'; -import { +import type { OnSelectionChangeFunc, NodeTypes, EdgeTypes, @@ -33,19 +33,17 @@ import { SelectionDragHandler, Viewport, NodeOrigin, + EdgeMouseHandler, + HandleType, } from '.'; -import { HandleType } from './handles'; -export interface ReactFlowProps extends HTMLAttributes { +export type ReactFlowProps = HTMLAttributes & { nodes?: Node[]; edges?: Edge[]; defaultNodes?: Node[]; defaultEdges?: Edge[]; defaultEdgeOptions?: DefaultEdgeOptions; - onNodesChange?: OnNodesChange; - onEdgesChange?: OnEdgesChange; onNodeClick?: NodeMouseHandler; - onEdgeClick?: (event: React.MouseEvent, node: Edge) => void; onNodeDoubleClick?: NodeMouseHandler; onNodeMouseEnter?: NodeMouseHandler; onNodeMouseMove?: NodeMouseHandler; @@ -54,8 +52,23 @@ export interface ReactFlowProps extends HTMLAttributes { onNodeDragStart?: NodeDragHandler; onNodeDrag?: NodeDragHandler; onNodeDragStop?: NodeDragHandler; + onEdgeClick?: (event: ReactMouseEvent, node: Edge) => void; + onEdgeUpdate?: OnEdgeUpdateFunc; + onEdgeContextMenu?: EdgeMouseHandler; + onEdgeMouseEnter?: EdgeMouseHandler; + onEdgeMouseMove?: EdgeMouseHandler; + onEdgeMouseLeave?: EdgeMouseHandler; + onEdgeDoubleClick?: EdgeMouseHandler; + onEdgeUpdateStart?: (event: ReactMouseEvent, edge: Edge, handleType: HandleType) => void; + onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge, handleType: HandleType) => void; + onNodesChange?: OnNodesChange; + onEdgesChange?: OnEdgesChange; onNodesDelete?: OnNodesDelete; onEdgesDelete?: OnEdgesDelete; + onSelectionDragStart?: SelectionDragHandler; + onSelectionDrag?: SelectionDragHandler; + onSelectionDragStop?: SelectionDragHandler; + onSelectionContextMenu?: (event: ReactMouseEvent, nodes: Node[]) => void; onConnect?: OnConnect; onConnectStart?: OnConnectStart; onConnectEnd?: OnConnectEnd; @@ -66,10 +79,6 @@ export interface ReactFlowProps extends HTMLAttributes { onMoveStart?: OnMoveStart; onMoveEnd?: OnMoveEnd; onSelectionChange?: OnSelectionChangeFunc; - onSelectionDragStart?: SelectionDragHandler; - onSelectionDrag?: SelectionDragHandler; - onSelectionDragStop?: SelectionDragHandler; - onSelectionContextMenu?: (event: ReactMouseEvent, nodes: Node[]) => void; onPaneScroll?: (event?: WheelEvent) => void; onPaneClick?: (event: ReactMouseEvent) => void; onPaneContextMenu?: (event: ReactMouseEvent) => void; @@ -78,11 +87,11 @@ export interface ReactFlowProps extends HTMLAttributes { onPaneMouseLeave?: (event: ReactMouseEvent) => void; nodeTypes?: NodeTypes; edgeTypes?: EdgeTypes; - connectionMode?: ConnectionMode; connectionLineType?: ConnectionLineType; connectionLineStyle?: CSSProperties; connectionLineComponent?: ConnectionLineComponent; connectionLineContainerStyle?: CSSProperties; + connectionMode?: ConnectionMode; deleteKeyCode?: KeyCode | null; selectionKeyCode?: KeyCode | null; multiSelectionKeyCode?: KeyCode | null; @@ -92,7 +101,9 @@ export interface ReactFlowProps extends HTMLAttributes { onlyRenderVisibleElements?: boolean; nodesDraggable?: boolean; nodesConnectable?: boolean; + nodesFocusable?: boolean; nodeOrigin?: NodeOrigin; + edgesFocusable?: boolean; initNodeOrigin?: NodeOrigin; elementsSelectable?: boolean; selectNodesOnDrag?: boolean; @@ -110,14 +121,6 @@ export interface ReactFlowProps extends HTMLAttributes { panOnScrollSpeed?: number; panOnScrollMode?: PanOnScrollMode; zoomOnDoubleClick?: boolean; - onEdgeUpdate?: OnEdgeUpdateFunc; - onEdgeContextMenu?: (event: ReactMouseEvent, edge: Edge) => void; - onEdgeMouseEnter?: (event: ReactMouseEvent, edge: Edge) => void; - onEdgeMouseMove?: (event: ReactMouseEvent, edge: Edge) => void; - onEdgeMouseLeave?: (event: ReactMouseEvent, edge: Edge) => void; - onEdgeDoubleClick?: (event: ReactMouseEvent, edge: Edge) => void; - onEdgeUpdateStart?: (event: ReactMouseEvent, edge: Edge, handleType: HandleType) => void; - onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge, handleType: HandleType) => void; edgeUpdaterRadius?: number; noDragClassName?: string; noWheelClassName?: string; @@ -129,6 +132,6 @@ export interface ReactFlowProps extends HTMLAttributes { proOptions?: ProOptions; elevateEdgesOnSelect?: boolean; disableKeyboardA11y?: boolean; -} +}; export type ReactFlowRefType = HTMLDivElement; diff --git a/packages/core/src/types/edges.ts b/packages/core/src/types/edges.ts index 2332dae9..7eb12816 100644 --- a/packages/core/src/types/edges.ts +++ b/packages/core/src/types/edges.ts @@ -1,9 +1,17 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ -import React, { CSSProperties, ComponentType, HTMLAttributes, ReactNode } from 'react'; -import { Connection } from './general'; -import { HandleElement, HandleType } from './handles'; -import { Node } from './nodes'; -import { Position } from './utils'; +import type { CSSProperties, ComponentType, HTMLAttributes, ReactNode, MouseEvent as ReactMouseEvent } from 'react'; + +import { Position } from '.'; +import type { Connection, HandleElement, HandleType, Node } from '.'; + +type EdgeLabelOptions = { + label?: string | ReactNode; + labelStyle?: CSSProperties; + labelShowBg?: boolean; + labelBgStyle?: CSSProperties; + labelBgPadding?: [number, number]; + labelBgBorderRadius?: number; +}; // interface for the user edge items type DefaultEdge = { @@ -13,12 +21,6 @@ type DefaultEdge = { target: string; sourceHandle?: string | null; targetHandle?: string | null; - label?: string | ReactNode; - labelStyle?: CSSProperties; - labelShowBg?: boolean; - labelBgStyle?: CSSProperties; - labelBgPadding?: [number, number]; - labelBgBorderRadius?: number; style?: CSSProperties; animated?: boolean; hidden?: boolean; @@ -33,7 +35,8 @@ type DefaultEdge = { zIndex?: number; ariaLabel?: string; interactionWidth?: number; -}; + focusable?: boolean; +} & EdgeLabelOptions; export type SmoothStepPathOptions = { offset?: number; @@ -61,55 +64,7 @@ export type DefaultEdgeOptions = Omit< 'id' | 'source' | 'target' | 'sourceHandle' | 'targetHandle' | 'sourceNode' | 'targetNode' >; -// props that get passed to a custom edge -export type EdgeProps = { - id: string; - source: string; - target: string; - sourceX: number; - sourceY: number; - targetX: number; - targetY: number; - selected?: boolean; - animated?: boolean; - sourcePosition: Position; - targetPosition: Position; - label?: string | ReactNode; - labelStyle?: CSSProperties; - labelShowBg?: boolean; - labelBgStyle?: CSSProperties; - labelBgPadding?: [number, number]; - labelBgBorderRadius?: number; - style?: CSSProperties; - data?: T; - sourceHandleId?: string | null; - targetHandleId?: string | null; - markerStart?: string; - markerEnd?: string; - // @TODO: how can we get better types for pathOptions? - pathOptions?: any; - interactionWidth?: number; -}; - -export type BaseEdgeProps = Pick< - EdgeProps, - | 'label' - | 'labelStyle' - | 'labelShowBg' - | 'labelBgStyle' - | 'labelBgPadding' - | 'labelBgBorderRadius' - | 'style' - | 'markerStart' - | 'markerEnd' - | 'interactionWidth' -> & { - labelX: number; - labelY: number; - path: string; -}; - -export type EdgeMouseHandler = (event: React.MouseEvent, edge: Edge) => void; +export type EdgeMouseHandler = (event: ReactMouseEvent, edge: Edge) => void; export type WrapEdgeProps = Omit, 'sourceHandle' | 'targetHandle'> & { onClick?: EdgeMouseHandler; @@ -129,30 +84,57 @@ export type WrapEdgeProps = Omit, 'sourceHandle' | 'targetHandl onMouseMove?: EdgeMouseHandler; onMouseLeave?: EdgeMouseHandler; edgeUpdaterRadius?: number; - onEdgeUpdateStart?: (event: React.MouseEvent, edge: Edge, handleType: HandleType) => void; + onEdgeUpdateStart?: (event: ReactMouseEvent, edge: Edge, handleType: HandleType) => void; onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge, handleType: HandleType) => void; rfId?: string; - disableKeyboardA11y: boolean; + isFocusable: boolean; pathOptions?: BezierPathOptions | SmoothStepPathOptions; }; -export interface SmoothStepEdgeProps extends EdgeProps { - pathOptions?: SmoothStepPathOptions; -} +// props that get passed to a custom edge +export type EdgeProps = Pick< + Edge, + 'id' | 'animated' | 'data' | 'style' | 'selected' | 'source' | 'target' +> & + Pick< + WrapEdgeProps, + | 'sourceX' + | 'sourceY' + | 'targetX' + | 'targetY' + | 'sourcePosition' + | 'targetPosition' + | 'sourceHandleId' + | 'targetHandleId' + | 'interactionWidth' + > & + EdgeLabelOptions & { + markerStart?: string; + markerEnd?: string; + // @TODO: how can we get better types for pathOptions? + pathOptions?: any; + }; -export interface BezierEdgeProps extends EdgeProps { +export type BaseEdgeProps = Pick & + EdgeLabelOptions & { + labelX: number; + labelY: number; + path: string; + }; + +export type SmoothStepEdgeProps = EdgeProps & { + pathOptions?: SmoothStepPathOptions; +}; + +export type BezierEdgeProps = EdgeProps & { pathOptions?: BezierPathOptions; -} -export interface EdgeTextProps extends HTMLAttributes { - x: number; - y: number; - label?: string | ReactNode; - labelStyle?: CSSProperties; - labelShowBg?: boolean; - labelBgStyle?: CSSProperties; - labelBgPadding?: [number, number]; - labelBgBorderRadius?: number; -} +}; + +export type EdgeTextProps = HTMLAttributes & + EdgeLabelOptions & { + x: number; + y: number; + }; export enum ConnectionLineType { Bezier = 'default', @@ -179,7 +161,7 @@ export type ConnectionLineComponent = ComponentType = (oldEdge: Edge, newConnection: Connection) => void; -export interface EdgeMarker { +export type EdgeMarker = { type: MarkerType; color?: string; width?: number; @@ -187,7 +169,7 @@ export interface EdgeMarker { markerUnits?: string; orient?: string; strokeWidth?: number; -} +}; export type EdgeMarkerType = string | EdgeMarker; diff --git a/packages/core/src/types/general.ts b/packages/core/src/types/general.ts index ba645b43..b18f4d32 100644 --- a/packages/core/src/types/general.ts +++ b/packages/core/src/types/general.ts @@ -1,10 +1,10 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ -import { MouseEvent as ReactMouseEvent, ComponentType, MemoExoticComponent } from 'react'; +import type { MouseEvent as ReactMouseEvent, ComponentType, MemoExoticComponent } from 'react'; import type { Selection as D3Selection, ZoomBehavior } from 'd3'; -import { XYPosition, Rect, Transform, CoordinateExtent } from './utils'; -import { NodeChange, EdgeChange } from './changes'; -import { +import type { XYPosition, Rect, Transform, CoordinateExtent } from './utils'; +import type { NodeChange, EdgeChange } from './changes'; +import type { Node, NodeInternals, NodeDimensionUpdate, @@ -15,10 +15,10 @@ import { SelectionDragHandler, NodeOrigin, } from './nodes'; -import { Edge, EdgeProps, WrapEdgeProps } from './edges'; -import { HandleType, StartHandle } from './handles'; -import { DefaultEdgeOptions } from '.'; -import { ReactFlowInstance } from './instance'; +import type { Edge, EdgeProps, WrapEdgeProps } from './edges'; +import type { HandleType, StartHandle } from './handles'; +import type { DefaultEdgeOptions } from '.'; +import type { ReactFlowInstance } from './instance'; export type NodeTypes = { [key: string]: ComponentType }; export type NodeTypesWrapped = { [key: string]: MemoExoticComponent> }; @@ -115,7 +115,7 @@ export type UnselectNodesAndEdgesParams = { export type OnViewportChange = (viewport: Viewport) => void; -export interface ViewportHelperFunctions { +export type ViewportHelperFunctions = { zoomIn: ZoomInOut; zoomOut: ZoomInOut; zoomTo: ZoomTo; @@ -127,7 +127,7 @@ export interface ViewportHelperFunctions { fitBounds: FitBounds; project: Project; viewportInitialized: boolean; -} +}; export type ReactFlowStore = { rfId: string; @@ -167,6 +167,8 @@ export type ReactFlowStore = { nodesDraggable: boolean; nodesConnectable: boolean; + nodesFocusable: boolean; + edgesFocusable: boolean; elementsSelectable: boolean; multiSelectionActive: boolean; @@ -222,6 +224,7 @@ export type ReactFlowActions = { setMaxZoom: (maxZoom: number) => void; setTranslateExtent: (translateExtent: CoordinateExtent) => void; setNodeExtent: (nodeExtent: CoordinateExtent) => void; + cancelConnection: () => void; reset: () => void; }; @@ -239,6 +242,6 @@ export type OnSelectionChangeFunc = (params: OnSelectionChangeParams) => void; export type PanelPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'; export type ProOptions = { - account: string; + account?: string; hideAttribution: boolean; }; diff --git a/packages/core/src/types/handles.ts b/packages/core/src/types/handles.ts index 37d1ea41..0850526c 100644 --- a/packages/core/src/types/handles.ts +++ b/packages/core/src/types/handles.ts @@ -1,5 +1,4 @@ -import { XYPosition, Position, Dimensions } from './utils'; -import { OnConnect, Connection } from './general'; +import type { XYPosition, Position, Dimensions, OnConnect, Connection } from '.'; export type HandleType = 'source' | 'target'; diff --git a/packages/core/src/types/instance.ts b/packages/core/src/types/instance.ts index 733b5392..8548c9f3 100644 --- a/packages/core/src/types/instance.ts +++ b/packages/core/src/types/instance.ts @@ -1,8 +1,6 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-disable @typescript-eslint/no-namespace */ -import { ViewportHelperFunctions, Viewport } from './general'; -import { Node } from './nodes'; -import { Edge } from './edges'; +import { ViewportHelperFunctions, Viewport, Node, Edge } from '.'; export type ReactFlowJsonObject = { nodes: Node[]; diff --git a/packages/core/src/types/nodes.ts b/packages/core/src/types/nodes.ts index bcb884fa..39d8755c 100644 --- a/packages/core/src/types/nodes.ts +++ b/packages/core/src/types/nodes.ts @@ -1,20 +1,19 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ -import { CSSProperties, MouseEvent as ReactMouseEvent } from 'react'; +import type { CSSProperties, MouseEvent as ReactMouseEvent } from 'react'; -import { XYPosition, Position, CoordinateExtent } from './utils'; -import { HandleElement } from './handles'; import { internalsSymbol } from '../utils'; +import type { XYPosition, Position, CoordinateExtent, HandleElement } from '.'; // interface for the user node items -export interface Node { +export type Node = { id: string; position: XYPosition; data: T; type?: string; style?: CSSProperties; className?: string; - targetPosition?: Position; sourcePosition?: Position; + targetPosition?: Position; hidden?: boolean; selected?: boolean; dragging?: boolean; @@ -31,6 +30,7 @@ export interface Node { expandParent?: boolean; positionAbsolute?: XYPosition; ariaLabel?: string; + focusable?: boolean; // only used internally [internalsSymbol]?: { @@ -38,63 +38,50 @@ export interface Node { handleBounds?: NodeHandleBounds; isParent?: boolean; }; -} - -// props that get passed to a custom node -export interface NodeProps { - id: string; - type: string; - data: T; - selected: boolean; - isConnectable: boolean; - xPos: number; - yPos: number; - dragging: boolean; - zIndex: number; - targetPosition?: Position; - sourcePosition?: Position; - dragHandle?: string; -} +}; export type NodeMouseHandler = (event: ReactMouseEvent, node: Node) => void; export type NodeDragHandler = (event: ReactMouseEvent, node: Node, nodes: Node[]) => void; export type SelectionDragHandler = (event: ReactMouseEvent, nodes: Node[]) => void; -export interface WrapNodeProps { - id: string; - type: string; - data: T; - selected: boolean; - isConnectable: boolean; - xPos: number; - yPos: number; - xPosOrigin: number; - yPosOrigin: number; - initialized: boolean; - isSelectable: boolean; - isDraggable: boolean; - selectNodesOnDrag: boolean; - onClick?: NodeMouseHandler; - onDoubleClick?: NodeMouseHandler; - onMouseEnter?: NodeMouseHandler; - onMouseMove?: NodeMouseHandler; - onMouseLeave?: NodeMouseHandler; - onContextMenu?: NodeMouseHandler; - style?: CSSProperties; - className?: string; - sourcePosition: Position; - targetPosition: Position; - hidden?: boolean; - resizeObserver: ResizeObserver | null; - dragHandle?: string; - zIndex: number; - isParent: boolean; - noDragClassName: string; - noPanClassName: string; - rfId: string; - disableKeyboardA11y: boolean; - ariaLabel?: string; -} +export type WrapNodeProps = Pick< + Node, + 'id' | 'data' | 'style' | 'className' | 'dragHandle' | 'sourcePosition' | 'targetPosition' | 'hidden' | 'ariaLabel' +> & + Required, 'selected' | 'type' | 'zIndex'>> & { + isConnectable: boolean; + xPos: number; + yPos: number; + xPosOrigin: number; + yPosOrigin: number; + initialized: boolean; + isSelectable: boolean; + isDraggable: boolean; + isFocusable: boolean; + selectNodesOnDrag: boolean; + onClick?: NodeMouseHandler; + onDoubleClick?: NodeMouseHandler; + onMouseEnter?: NodeMouseHandler; + onMouseMove?: NodeMouseHandler; + onMouseLeave?: NodeMouseHandler; + onContextMenu?: NodeMouseHandler; + resizeObserver: ResizeObserver | null; + isParent: boolean; + noDragClassName: string; + noPanClassName: string; + rfId: string; + disableKeyboardA11y: boolean; + }; + +// props that get passed to a custom node +export type NodeProps = Pick< + WrapNodeProps, + 'id' | 'data' | 'dragHandle' | 'type' | 'selected' | 'isConnectable' | 'xPos' | 'yPos' | 'zIndex' +> & { + dragging: boolean; + targetPosition?: Position; + sourcePosition?: Position; +}; export type NodeHandleBounds = { source: HandleElement[] | null; diff --git a/packages/core/src/utils/changes.ts b/packages/core/src/utils/changes.ts index a41a8f6c..897c1ffb 100644 --- a/packages/core/src/utils/changes.ts +++ b/packages/core/src/utils/changes.ts @@ -1,5 +1,5 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ -import { Node, Edge, EdgeChange, NodeChange } from '../types'; +import type { Node, Edge, EdgeChange, NodeChange } from '../types'; function handleParentExpand(res: any[], updateItem: any) { const parent = res.find((e) => e.id === updateItem.parentNode); diff --git a/packages/core/src/utils/graph.ts b/packages/core/src/utils/graph.ts index b6fece4e..123fd13e 100644 --- a/packages/core/src/utils/graph.ts +++ b/packages/core/src/utils/graph.ts @@ -2,7 +2,7 @@ import type { Selection as D3Selection } from 'd3'; import { boxToRect, clamp, devWarn, getBoundsOfBoxes, rectToBox } from '../utils'; -import { Node, Edge, Connection, EdgeMarkerType, Transform, XYPosition, Rect, NodeInternals } from '../types'; +import type { Node, Edge, Connection, EdgeMarkerType, Transform, XYPosition, Rect, NodeInternals } from '../types'; export const isEdge = (element: Node | Connection | Edge): element is Edge => 'id' in element && 'source' in element && 'target' in element; @@ -188,7 +188,7 @@ export const getNodesInside = ( const area = (width || 0) * (height || 0); const isVisible = notInitialized || partiallyVisible || overlappingArea >= area; - if (isVisible) { + if (isVisible || node.dragging) { visibleNodes.push(node); } }); diff --git a/packages/core/src/utils/index.ts b/packages/core/src/utils/index.ts index a27bbca0..c3afe773 100644 --- a/packages/core/src/utils/index.ts +++ b/packages/core/src/utils/index.ts @@ -1,4 +1,4 @@ -import { Dimensions, XYPosition, CoordinateExtent, Box, Rect } from '../types'; +import type { Dimensions, XYPosition, CoordinateExtent, Box, Rect } from '../types'; export const getDimensions = (node: HTMLDivElement): Dimensions => ({ width: node.offsetWidth, diff --git a/packages/minimap/CHANGELOG.md b/packages/minimap/CHANGELOG.md new file mode 100644 index 00000000..4fd440ab --- /dev/null +++ b/packages/minimap/CHANGELOG.md @@ -0,0 +1,57 @@ +# @reactflow/minimap + +## 11.0.3 + +### Patch Changes + +- cleanup types +- Updated dependencies: + - @reactflow/core@11.1.2 + +## 11.0.2 + +### Patch Changes + +- Updated dependencies: + - @reactflow/core@11.1.1 + +## 11.0.1 + +### Patch Changes + +- Updated dependencies [[`def11008`](https://github.com/wbkd/react-flow/commit/def11008d88749fec40e6fcba8bc41eea2511bab), [`d00faa6b`](https://github.com/wbkd/react-flow/commit/d00faa6b3e77388bfd655d4c02e9a5375bc515e4)]: + - @reactflow/core@11.1.0 + +## 11.0.0 + +### Major Changes + +- **Better [Accessibility](/docs/guides/accessibility)** + - Nodes and edges are focusable, selectable, moveable and deleteable with the keyboard. + - `aria-` default attributes for all elements and controllable via `ariaLabel` options + - Keyboard controls can be disabled with the new `disableKeyboardA11y` prop +- **Better selectable edges** via new edge option: `interactionWidth` - renders invisible edge that makes it easier to interact +- **Better routing for smoothstep and step edges**: https://twitter.com/reactflowdev/status/1567535405284614145 +- **Nicer edge updating behaviour**: https://twitter.com/reactflowdev/status/1564966917517021184 +- **Node origin**: The new `nodeOrigin` prop lets you control the origin of a node. Useful for layouting. +- **New background pattern**: `BackgroundVariant.Cross` variant +- **[`useOnViewportChange`](/docs/api/hooks/use-on-viewport-change) hook** - handle viewport changes within a component +- **[`useOnSelectionChange`](/docs/api/hooks/use-on-selection-change) hook** - handle selection changes within a component +- **[`useNodesInitialized`](/docs/api/hooks/use-nodes-initialized) hook** - returns true if all nodes are initialized and if there is more than one node +- **Deletable option** for Nodes and edges +- **New Event handlers**: `onPaneMouseEnter`, `onPaneMouseMove` and `onPaneMouseLeave` +- **Edge `pathOptions`** for `smoothstep` and `default` edges +- **Nicer cursor defaults**: Cursor is grabbing, while dragging a node or panning +- **Pane moveable** with middle mouse button +- **Pan over nodes** when they are not draggable (`draggable=false` or `nodesDraggable` false) +- **[``](/docs/api/edges/base-edge) component** that makes it easier to build custom edges +- **[Separately installable packages](/docs/overview/packages/)** + - @reactflow/core + - @reactflow/background + - @reactflow/controls + - @reactflow/minimap + +### Patch Changes + +- Updated dependencies: + - @reactflow/core@11.0.0 diff --git a/packages/minimap/package.json b/packages/minimap/package.json index 063cac5f..527aab38 100644 --- a/packages/minimap/package.json +++ b/packages/minimap/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/minimap", - "version": "11.0.0-next.6", + "version": "11.0.3", "description": "Minimap component for React Flow.", "keywords": [ "react", @@ -17,7 +17,9 @@ "main": "dist/umd/index.js", "module": "dist/esm/index.js", "types": "dist/esm/index.d.ts", - "sideEffects": false, + "sideEffects": [ + "*.css" + ], "publishConfig": { "access": "public" }, diff --git a/packages/minimap/src/MiniMap.tsx b/packages/minimap/src/MiniMap.tsx index a0ccd154..05cd8771 100644 --- a/packages/minimap/src/MiniMap.tsx +++ b/packages/minimap/src/MiniMap.tsx @@ -2,10 +2,11 @@ import { memo } from 'react'; import cc from 'classcat'; import shallow from 'zustand/shallow'; -import { useStore, getRectOfNodes, ReactFlowState, Rect, Panel, getBoundsOfRects } from '@reactflow/core'; +import { useStore, getRectOfNodes, getBoundsOfRects, Panel } from '@reactflow/core'; +import type { ReactFlowState, Rect } from '@reactflow/core'; import MiniMapNode from './MiniMapNode'; -import { MiniMapProps, GetMiniMapNodeAttribute } from './types'; +import type { MiniMapProps, GetMiniMapNodeAttribute } from './types'; declare const window: any; diff --git a/packages/minimap/src/MiniMapNode.tsx b/packages/minimap/src/MiniMapNode.tsx index 3ea3bd33..111c7ee0 100644 --- a/packages/minimap/src/MiniMapNode.tsx +++ b/packages/minimap/src/MiniMapNode.tsx @@ -1,4 +1,5 @@ -import { memo, CSSProperties } from 'react'; +import { memo } from 'react'; +import type { CSSProperties } from 'react'; import cc from 'classcat'; interface MiniMapNodeProps { diff --git a/packages/minimap/src/types.ts b/packages/minimap/src/types.ts index 5f82824d..4fed29ba 100644 --- a/packages/minimap/src/types.ts +++ b/packages/minimap/src/types.ts @@ -1,10 +1,10 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ -import { HTMLAttributes } from 'react'; -import { Node, PanelPosition } from '@reactflow/core'; +import type { HTMLAttributes } from 'react'; +import type { Node, PanelPosition } from '@reactflow/core'; export type GetMiniMapNodeAttribute = (node: Node) => string; -export interface MiniMapProps extends HTMLAttributes { +export type MiniMapProps = HTMLAttributes & { nodeColor?: string | GetMiniMapNodeAttribute; nodeStrokeColor?: string | GetMiniMapNodeAttribute; nodeClassName?: string | GetMiniMapNodeAttribute; @@ -12,4 +12,4 @@ export interface MiniMapProps extends HTMLAttributes`](/docs/api/edges/base-edge) component** that makes it easier to build custom edges +- **[Separately installable packages](/docs/overview/packages/)** + - @reactflow/core + - @reactflow/background + - @reactflow/controls + - @reactflow/minimap + +### Patch Changes + +- Updated dependencies: + - @reactflow/background@11.0.0 + - @reactflow/controls@11.0.0 + - @reactflow/core@11.0.0 + - @reactflow/minimap@11.0.0 diff --git a/packages/reactflow/README.md b/packages/reactflow/README.md index ed58927b..c41f2e7e 100644 --- a/packages/reactflow/README.md +++ b/packages/reactflow/README.md @@ -24,11 +24,13 @@ A highly customizable React component for building interactive graphs and node-b - **Plugin Components:** [Background](https://reactflow.dev/docs/api/plugin-components/background), [MiniMap](https://reactflow.dev/docs/api/plugin-components/minimap) and [Controls](https://reactflow.dev/docs/api/plugin-components/controls) - **Reliable**: Written in [Typescript](https://www.typescriptlang.org/) and tested with [cypress](https://www.cypress.io/) -## Commercial Usage / Attribution +## Commercial Usage -React Flow includes a small attribution that links to the React Flow website. **We expect companies who are using React Flow commercially to subscribe to [React Flow Pro](https://pro.reactflow.dev/pricing) if they want to remove the attribution.** By subscribing you get access to other exclusive services like advanced examples, individual support or prioritized bug reports. In non-commercial applications you may hide the attribution without subscribing but are welcome to [sponsor us on Github](https://github.com/sponsors/wbkd). +**Are you using React Flow for a personal project?** Great! No sponsorship needed, you can support us by reporting any bugs you find, sending us screenshots of your projects, and starring us on Github 🌟 -You can find more information in our [React Flow Pro FAQs](https://pro.reactflow.dev/faq). +**Are you using React Flow at your organization and making money from it?** Awesome! We rely on your support to keep React Flow developed and maintained under an MIT License, just how we like it. You can do that on the [React Flow Pro website](https://pro.reactflow.dev) or through [Github Sponsors](https://github.com/sponsors/wbkd). + +You can find more information in our [React Flow Pro FAQs](https://pro.reactflow.dev/info). ## Installation @@ -43,9 +45,31 @@ npm install reactflow This is only a very basic usage example of React Flow. To see everything that is possible with the library, please refer to the [website](https://reactflow.dev) for [guides](https://reactflow.dev/docs/guides/custom-nodes), [examples](https://reactflow.dev/docs/examples/overview) and [API reference](https://reactflow.dev/docs/api/react-flow-props). ```jsx -import ReactFlow, { MiniMap, Controls } from 'reactflow'; +import { useCallback } from 'react'; +import ReactFlow, { + MiniMap, + Controls, + Background, + useNodesState, + useEdgesState, + addEdge, +} from 'reactflow'; + +import 'reactflow/dist/style.css'; + +const initialNodes = [ + { id: '1', position: { x: 0, y: 0 }, data: { label: '1' } }, + { id: '2', position: { x: 0, y: 100 }, data: { label: '2' } }, +]; + +const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }]; + +function Flow() { + const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes); + const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges); + + const onConnect = useCallback((params) => setEdges((eds) => addEdge(params, eds)), [setEdges]); -function Flow({ nodes, edges, onNodesChange, onEdgesChange, onConnect }) { return ( + ); } diff --git a/packages/reactflow/package.json b/packages/reactflow/package.json index 73f8806a..d26d4e28 100644 --- a/packages/reactflow/package.json +++ b/packages/reactflow/package.json @@ -1,6 +1,6 @@ { "name": "reactflow", - "version": "11.0.0-next.12", + "version": "11.1.2", "description": "A highly customizable React library for building node-based editors and interactive flow charts", "keywords": [ "react", @@ -17,7 +17,9 @@ "main": "dist/umd/index.js", "module": "dist/esm/index.js", "types": "dist/esm/index.d.ts", - "sideEffects": false, + "sideEffects": [ + "*.css" + ], "license": "MIT", "repository": { "type": "git", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 113cb1b0..78749f21 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -4,8 +4,8 @@ importers: .: specifiers: - '@changesets/changelog-github': ^0.4.6 - '@changesets/cli': ^2.24.3 + '@changesets/changelog-github': ^0.4.7 + '@changesets/cli': ^2.25.0 '@preconstruct/cli': ^2.2.1 '@typescript-eslint/eslint-plugin': latest '@typescript-eslint/parser': latest @@ -29,18 +29,18 @@ importers: turbo: ^1.5.3 typescript: ^4.8.3 devDependencies: - '@changesets/changelog-github': registry.npmjs.org/@changesets/changelog-github/0.4.6 - '@changesets/cli': registry.npmjs.org/@changesets/cli/2.24.4 + '@changesets/changelog-github': registry.npmjs.org/@changesets/changelog-github/0.4.7 + '@changesets/cli': registry.npmjs.org/@changesets/cli/2.25.0 '@preconstruct/cli': registry.npmjs.org/@preconstruct/cli/2.2.1 - '@typescript-eslint/eslint-plugin': registry.npmjs.org/@typescript-eslint/eslint-plugin/5.38.0_wsb62dxj2oqwgas4kadjymcmry - '@typescript-eslint/parser': registry.npmjs.org/@typescript-eslint/parser/5.38.0_irgkl5vooow2ydyo6aokmferha + '@typescript-eslint/eslint-plugin': registry.npmjs.org/@typescript-eslint/eslint-plugin/5.39.0_jdrczqv3ll7udvbunca43w7rz4 + '@typescript-eslint/parser': registry.npmjs.org/@typescript-eslint/parser/5.39.0_irgkl5vooow2ydyo6aokmferha autoprefixer: registry.npmjs.org/autoprefixer/10.4.9_postcss@8.4.16 concurrently: registry.npmjs.org/concurrently/7.4.0 cypress: registry.npmjs.org/cypress/10.7.0 eslint: registry.npmjs.org/eslint/8.23.1 eslint-config-prettier: registry.npmjs.org/eslint-config-prettier/8.5.0_eslint@8.23.1 eslint-plugin-prettier: registry.npmjs.org/eslint-plugin-prettier/4.2.1_cabrci5exjdaojcvd6xoxgeowu - eslint-plugin-react: registry.npmjs.org/eslint-plugin-react/7.31.8_eslint@8.23.1 + eslint-plugin-react: registry.npmjs.org/eslint-plugin-react/7.31.9_eslint@8.23.1 postcss: registry.npmjs.org/postcss/8.4.16 postcss-cli: registry.npmjs.org/postcss-cli/10.0.0_postcss@8.4.16 postcss-combine-duplicated-selectors: registry.npmjs.org/postcss-combine-duplicated-selectors/10.0.3_postcss@8.4.16 @@ -60,6 +60,7 @@ importers: '@types/react': ^18.0.17 '@types/react-dom': ^18.0.6 '@vitejs/plugin-react': ^2.1.0 + classcat: ^5.0.3 cypress: ^10.6.0 cypress-real-events: ^1.7.1 dagre: ^0.8.5 @@ -72,6 +73,7 @@ importers: typescript: ^4.8.3 vite: ^3.1.0 dependencies: + classcat: registry.npmjs.org/classcat/5.0.4 dagre: registry.npmjs.org/dagre/0.8.5 localforage: registry.npmjs.org/localforage/1.10.0 react: registry.npmjs.org/react/18.2.0 @@ -624,16 +626,16 @@ packages: to-fast-properties: registry.npmjs.org/to-fast-properties/2.0.0 dev: true - registry.npmjs.org/@changesets/apply-release-plan/6.1.0: - resolution: {integrity: sha512-fMNBUAEc013qaA4KUVjdwgYMmKrf5Mlgf6o+f97MJVNzVnikwpWY47Lc3YR1jhC874Fonn5MkjkWK9DAZsdQ5g==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/apply-release-plan/-/apply-release-plan-6.1.0.tgz} + registry.npmjs.org/@changesets/apply-release-plan/6.1.1: + resolution: {integrity: sha512-LaQiP/Wf0zMVR0HNrLQAjz3rsNsr0d/RlnP6Ef4oi8VafOwnY1EoWdK4kssuUJGgNgDyHpomS50dm8CU3D7k7g==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/apply-release-plan/-/apply-release-plan-6.1.1.tgz} name: '@changesets/apply-release-plan' - version: 6.1.0 + version: 6.1.1 dependencies: '@babel/runtime': registry.npmjs.org/@babel/runtime/7.19.0 - '@changesets/config': registry.npmjs.org/@changesets/config/2.1.1 + '@changesets/config': registry.npmjs.org/@changesets/config/2.2.0 '@changesets/get-version-range-type': registry.npmjs.org/@changesets/get-version-range-type/0.3.2 - '@changesets/git': registry.npmjs.org/@changesets/git/1.4.1 - '@changesets/types': registry.npmjs.org/@changesets/types/5.1.0 + '@changesets/git': registry.npmjs.org/@changesets/git/1.5.0 + '@changesets/types': registry.npmjs.org/@changesets/types/5.2.0 '@manypkg/get-packages': registry.npmjs.org/@manypkg/get-packages/1.1.3 detect-indent: registry.npmjs.org/detect-indent/6.1.0 fs-extra: registry.npmjs.org/fs-extra/7.0.1 @@ -644,59 +646,59 @@ packages: semver: registry.npmjs.org/semver/5.7.1 dev: true - registry.npmjs.org/@changesets/assemble-release-plan/5.2.1: - resolution: {integrity: sha512-d6ckasOWlKF9Mzs82jhl6TKSCgVvfLoUK1ERySrTg2TQJdrVUteZue6uEIYUTA7SgMu67UOSwol6R9yj1nTdjw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/assemble-release-plan/-/assemble-release-plan-5.2.1.tgz} + registry.npmjs.org/@changesets/assemble-release-plan/5.2.2: + resolution: {integrity: sha512-B1qxErQd85AeZgZFZw2bDKyOfdXHhG+X5S+W3Da2yCem8l/pRy4G/S7iOpEcMwg6lH8q2ZhgbZZwZ817D+aLuQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/assemble-release-plan/-/assemble-release-plan-5.2.2.tgz} name: '@changesets/assemble-release-plan' - version: 5.2.1 + version: 5.2.2 dependencies: '@babel/runtime': registry.npmjs.org/@babel/runtime/7.19.0 '@changesets/errors': registry.npmjs.org/@changesets/errors/0.1.4 - '@changesets/get-dependents-graph': registry.npmjs.org/@changesets/get-dependents-graph/1.3.3 - '@changesets/types': registry.npmjs.org/@changesets/types/5.1.0 + '@changesets/get-dependents-graph': registry.npmjs.org/@changesets/get-dependents-graph/1.3.4 + '@changesets/types': registry.npmjs.org/@changesets/types/5.2.0 '@manypkg/get-packages': registry.npmjs.org/@manypkg/get-packages/1.1.3 semver: registry.npmjs.org/semver/5.7.1 dev: true - registry.npmjs.org/@changesets/changelog-git/0.1.12: - resolution: {integrity: sha512-Xv2CPjTBmwjl8l4ZyQ3xrsXZMq8WafPUpEonDpTmcb24XY8keVzt7ZSCJuDz035EiqrjmDKDhODoQ6XiHudlig==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/changelog-git/-/changelog-git-0.1.12.tgz} + registry.npmjs.org/@changesets/changelog-git/0.1.13: + resolution: {integrity: sha512-zvJ50Q+EUALzeawAxax6nF2WIcSsC5PwbuLeWkckS8ulWnuPYx8Fn/Sjd3rF46OzeKA8t30loYYV6TIzp4DIdg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/changelog-git/-/changelog-git-0.1.13.tgz} name: '@changesets/changelog-git' - version: 0.1.12 + version: 0.1.13 dependencies: - '@changesets/types': registry.npmjs.org/@changesets/types/5.1.0 + '@changesets/types': registry.npmjs.org/@changesets/types/5.2.0 dev: true - registry.npmjs.org/@changesets/changelog-github/0.4.6: - resolution: {integrity: sha512-ahR/+o3OPodzfG9kucEMU/tEtBgwy6QoJiWi1sDBPme8n3WjT6pBlbhqNYpWAJKilomwfjBGY0MTUTs6r9d1RQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/changelog-github/-/changelog-github-0.4.6.tgz} + registry.npmjs.org/@changesets/changelog-github/0.4.7: + resolution: {integrity: sha512-UUG5sKwShs5ha1GFnayUpZNcDGWoY7F5XxhOEHS62sDPOtoHQZsG3j1nC5RxZ3M1URHA321cwVZHeXgu99Y3ew==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/changelog-github/-/changelog-github-0.4.7.tgz} name: '@changesets/changelog-github' - version: 0.4.6 + version: 0.4.7 dependencies: '@changesets/get-github-info': registry.npmjs.org/@changesets/get-github-info/0.5.1 - '@changesets/types': registry.npmjs.org/@changesets/types/5.1.0 + '@changesets/types': registry.npmjs.org/@changesets/types/5.2.0 dotenv: registry.npmjs.org/dotenv/8.6.0 transitivePeerDependencies: - encoding dev: true - registry.npmjs.org/@changesets/cli/2.24.4: - resolution: {integrity: sha512-87JSwMv38zS3QW3062jXZYLsCNRtA08wa7vt3VnMmkGLfUMn2TTSfD+eSGVnKPJ/ycDCvAcCDnrv/B+gSX5KVA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/cli/-/cli-2.24.4.tgz} + registry.npmjs.org/@changesets/cli/2.25.0: + resolution: {integrity: sha512-Svu5KD2enurVHGEEzCRlaojrHjVYgF9srmMP9VQSy9c1TspX6C9lDPpulsSNIjYY9BuU/oiWpjBgR7RI9eQiAA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/cli/-/cli-2.25.0.tgz} name: '@changesets/cli' - version: 2.24.4 + version: 2.25.0 hasBin: true dependencies: '@babel/runtime': registry.npmjs.org/@babel/runtime/7.19.0 - '@changesets/apply-release-plan': registry.npmjs.org/@changesets/apply-release-plan/6.1.0 - '@changesets/assemble-release-plan': registry.npmjs.org/@changesets/assemble-release-plan/5.2.1 - '@changesets/changelog-git': registry.npmjs.org/@changesets/changelog-git/0.1.12 - '@changesets/config': registry.npmjs.org/@changesets/config/2.1.1 + '@changesets/apply-release-plan': registry.npmjs.org/@changesets/apply-release-plan/6.1.1 + '@changesets/assemble-release-plan': registry.npmjs.org/@changesets/assemble-release-plan/5.2.2 + '@changesets/changelog-git': registry.npmjs.org/@changesets/changelog-git/0.1.13 + '@changesets/config': registry.npmjs.org/@changesets/config/2.2.0 '@changesets/errors': registry.npmjs.org/@changesets/errors/0.1.4 - '@changesets/get-dependents-graph': registry.npmjs.org/@changesets/get-dependents-graph/1.3.3 - '@changesets/get-release-plan': registry.npmjs.org/@changesets/get-release-plan/3.0.14 - '@changesets/git': registry.npmjs.org/@changesets/git/1.4.1 + '@changesets/get-dependents-graph': registry.npmjs.org/@changesets/get-dependents-graph/1.3.4 + '@changesets/get-release-plan': registry.npmjs.org/@changesets/get-release-plan/3.0.15 + '@changesets/git': registry.npmjs.org/@changesets/git/1.5.0 '@changesets/logger': registry.npmjs.org/@changesets/logger/0.0.5 - '@changesets/pre': registry.npmjs.org/@changesets/pre/1.0.12 - '@changesets/read': registry.npmjs.org/@changesets/read/0.5.7 - '@changesets/types': registry.npmjs.org/@changesets/types/5.1.0 - '@changesets/write': registry.npmjs.org/@changesets/write/0.2.0 + '@changesets/pre': registry.npmjs.org/@changesets/pre/1.0.13 + '@changesets/read': registry.npmjs.org/@changesets/read/0.5.8 + '@changesets/types': registry.npmjs.org/@changesets/types/5.2.0 + '@changesets/write': registry.npmjs.org/@changesets/write/0.2.1 '@manypkg/get-packages': registry.npmjs.org/@manypkg/get-packages/1.1.3 '@types/is-ci': registry.npmjs.org/@types/is-ci/3.0.0 '@types/semver': registry.npmjs.org/@types/semver/6.2.3 @@ -718,15 +720,15 @@ packages: tty-table: registry.npmjs.org/tty-table/4.1.6 dev: true - registry.npmjs.org/@changesets/config/2.1.1: - resolution: {integrity: sha512-nSRINMqHpdtBpNVT9Eh9HtmLhOwOTAeSbaqKM5pRmGfsvyaROTBXV84ujF9UsWNlV71YxFbxTbeZnwXSGQlyTw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/config/-/config-2.1.1.tgz} + registry.npmjs.org/@changesets/config/2.2.0: + resolution: {integrity: sha512-GGaokp3nm5FEDk/Fv2PCRcQCOxGKKPRZ7prcMqxEr7VSsG75MnChQE8plaW1k6V8L2bJE+jZWiRm19LbnproOw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/config/-/config-2.2.0.tgz} name: '@changesets/config' - version: 2.1.1 + version: 2.2.0 dependencies: '@changesets/errors': registry.npmjs.org/@changesets/errors/0.1.4 - '@changesets/get-dependents-graph': registry.npmjs.org/@changesets/get-dependents-graph/1.3.3 + '@changesets/get-dependents-graph': registry.npmjs.org/@changesets/get-dependents-graph/1.3.4 '@changesets/logger': registry.npmjs.org/@changesets/logger/0.0.5 - '@changesets/types': registry.npmjs.org/@changesets/types/5.1.0 + '@changesets/types': registry.npmjs.org/@changesets/types/5.2.0 '@manypkg/get-packages': registry.npmjs.org/@manypkg/get-packages/1.1.3 fs-extra: registry.npmjs.org/fs-extra/7.0.1 micromatch: registry.npmjs.org/micromatch/4.0.5 @@ -740,12 +742,12 @@ packages: extendable-error: registry.npmjs.org/extendable-error/0.1.7 dev: true - registry.npmjs.org/@changesets/get-dependents-graph/1.3.3: - resolution: {integrity: sha512-h4fHEIt6X+zbxdcznt1e8QD7xgsXRAXd2qzLlyxoRDFSa6SxJrDAUyh7ZUNdhjBU4Byvp4+6acVWVgzmTy4UNQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/get-dependents-graph/-/get-dependents-graph-1.3.3.tgz} + registry.npmjs.org/@changesets/get-dependents-graph/1.3.4: + resolution: {integrity: sha512-+C4AOrrFY146ydrgKOo5vTZfj7vetNu1tWshOID+UjPUU9afYGDXI8yLnAeib1ffeBXV3TuGVcyphKpJ3cKe+A==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/get-dependents-graph/-/get-dependents-graph-1.3.4.tgz} name: '@changesets/get-dependents-graph' - version: 1.3.3 + version: 1.3.4 dependencies: - '@changesets/types': registry.npmjs.org/@changesets/types/5.1.0 + '@changesets/types': registry.npmjs.org/@changesets/types/5.2.0 '@manypkg/get-packages': registry.npmjs.org/@manypkg/get-packages/1.1.3 chalk: registry.npmjs.org/chalk/2.4.2 fs-extra: registry.npmjs.org/fs-extra/7.0.1 @@ -763,17 +765,17 @@ packages: - encoding dev: true - registry.npmjs.org/@changesets/get-release-plan/3.0.14: - resolution: {integrity: sha512-xzSfeyIOvUnbqMuQXVKTYUizreWQfICwoQpvEHoePVbERLocc1tPo5lzR7dmVCFcaA/DcnbP6mxyioeq+JuzSg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/get-release-plan/-/get-release-plan-3.0.14.tgz} + registry.npmjs.org/@changesets/get-release-plan/3.0.15: + resolution: {integrity: sha512-W1tFwxE178/en+zSj/Nqbc3mvz88mcdqUMJhRzN1jDYqN3QI4ifVaRF9mcWUU+KI0gyYEtYR65tour690PqTcA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/get-release-plan/-/get-release-plan-3.0.15.tgz} name: '@changesets/get-release-plan' - version: 3.0.14 + version: 3.0.15 dependencies: '@babel/runtime': registry.npmjs.org/@babel/runtime/7.19.0 - '@changesets/assemble-release-plan': registry.npmjs.org/@changesets/assemble-release-plan/5.2.1 - '@changesets/config': registry.npmjs.org/@changesets/config/2.1.1 - '@changesets/pre': registry.npmjs.org/@changesets/pre/1.0.12 - '@changesets/read': registry.npmjs.org/@changesets/read/0.5.7 - '@changesets/types': registry.npmjs.org/@changesets/types/5.1.0 + '@changesets/assemble-release-plan': registry.npmjs.org/@changesets/assemble-release-plan/5.2.2 + '@changesets/config': registry.npmjs.org/@changesets/config/2.2.0 + '@changesets/pre': registry.npmjs.org/@changesets/pre/1.0.13 + '@changesets/read': registry.npmjs.org/@changesets/read/0.5.8 + '@changesets/types': registry.npmjs.org/@changesets/types/5.2.0 '@manypkg/get-packages': registry.npmjs.org/@manypkg/get-packages/1.1.3 dev: true @@ -783,14 +785,14 @@ packages: version: 0.3.2 dev: true - registry.npmjs.org/@changesets/git/1.4.1: - resolution: {integrity: sha512-GWwRXEqBsQ3nEYcyvY/u2xUK86EKAevSoKV/IhELoZ13caZ1A1TSak/71vyKILtzuLnFPk5mepP5HjBxr7lZ9Q==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/git/-/git-1.4.1.tgz} + registry.npmjs.org/@changesets/git/1.5.0: + resolution: {integrity: sha512-Xo8AT2G7rQJSwV87c8PwMm6BAc98BnufRMsML7m7Iw8Or18WFvFmxqG5aOL5PBvhgq9KrKvaeIBNIymracSuHg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/git/-/git-1.5.0.tgz} name: '@changesets/git' - version: 1.4.1 + version: 1.5.0 dependencies: '@babel/runtime': registry.npmjs.org/@babel/runtime/7.19.0 '@changesets/errors': registry.npmjs.org/@changesets/errors/0.1.4 - '@changesets/types': registry.npmjs.org/@changesets/types/5.1.0 + '@changesets/types': registry.npmjs.org/@changesets/types/5.2.0 '@manypkg/get-packages': registry.npmjs.org/@manypkg/get-packages/1.1.3 is-subdir: registry.npmjs.org/is-subdir/1.2.0 spawndamnit: registry.npmjs.org/spawndamnit/2.0.0 @@ -804,37 +806,37 @@ packages: chalk: registry.npmjs.org/chalk/2.4.2 dev: true - registry.npmjs.org/@changesets/parse/0.3.14: - resolution: {integrity: sha512-SWnNVyC9vz61ueTbuxvA6b4HXcSx2iaWr2VEa37lPg1Vw+cEyQp7lOB219P7uow1xFfdtIEEsxbzXnqLAAaY8w==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/parse/-/parse-0.3.14.tgz} + registry.npmjs.org/@changesets/parse/0.3.15: + resolution: {integrity: sha512-3eDVqVuBtp63i+BxEWHPFj2P1s3syk0PTrk2d94W9JD30iG+OER0Y6n65TeLlY8T2yB9Fvj6Ev5Gg0+cKe/ZUA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/parse/-/parse-0.3.15.tgz} name: '@changesets/parse' - version: 0.3.14 + version: 0.3.15 dependencies: - '@changesets/types': registry.npmjs.org/@changesets/types/5.1.0 + '@changesets/types': registry.npmjs.org/@changesets/types/5.2.0 js-yaml: registry.npmjs.org/js-yaml/3.14.1 dev: true - registry.npmjs.org/@changesets/pre/1.0.12: - resolution: {integrity: sha512-RFzWYBZx56MtgMesXjxx7ymyI829/rcIw/41hvz3VJPnY8mDscN7RJyYu7Xm7vts2Fcd+SRcO0T/Ws3I1/6J7g==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/pre/-/pre-1.0.12.tgz} + registry.npmjs.org/@changesets/pre/1.0.13: + resolution: {integrity: sha512-jrZc766+kGZHDukjKhpBXhBJjVQMied4Fu076y9guY1D3H622NOw8AQaLV3oQsDtKBTrT2AUFjt9Z2Y9Qx+GfA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/pre/-/pre-1.0.13.tgz} name: '@changesets/pre' - version: 1.0.12 + version: 1.0.13 dependencies: '@babel/runtime': registry.npmjs.org/@babel/runtime/7.19.0 '@changesets/errors': registry.npmjs.org/@changesets/errors/0.1.4 - '@changesets/types': registry.npmjs.org/@changesets/types/5.1.0 + '@changesets/types': registry.npmjs.org/@changesets/types/5.2.0 '@manypkg/get-packages': registry.npmjs.org/@manypkg/get-packages/1.1.3 fs-extra: registry.npmjs.org/fs-extra/7.0.1 dev: true - registry.npmjs.org/@changesets/read/0.5.7: - resolution: {integrity: sha512-Iteg0ccTPpkJ+qFzY97k7qqdVE5Kz30TqPo9GibpBk2g8tcLFUqf+Qd0iXPLcyhUZpPL1U6Hia1gINHNKIKx4g==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/read/-/read-0.5.7.tgz} + registry.npmjs.org/@changesets/read/0.5.8: + resolution: {integrity: sha512-eYaNfxemgX7f7ELC58e7yqQICW5FB7V+bd1lKt7g57mxUrTveYME+JPaBPpYx02nP53XI6CQp6YxnR9NfmFPKw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/read/-/read-0.5.8.tgz} name: '@changesets/read' - version: 0.5.7 + version: 0.5.8 dependencies: '@babel/runtime': registry.npmjs.org/@babel/runtime/7.19.0 - '@changesets/git': registry.npmjs.org/@changesets/git/1.4.1 + '@changesets/git': registry.npmjs.org/@changesets/git/1.5.0 '@changesets/logger': registry.npmjs.org/@changesets/logger/0.0.5 - '@changesets/parse': registry.npmjs.org/@changesets/parse/0.3.14 - '@changesets/types': registry.npmjs.org/@changesets/types/5.1.0 + '@changesets/parse': registry.npmjs.org/@changesets/parse/0.3.15 + '@changesets/types': registry.npmjs.org/@changesets/types/5.2.0 chalk: registry.npmjs.org/chalk/2.4.2 fs-extra: registry.npmjs.org/fs-extra/7.0.1 p-filter: registry.npmjs.org/p-filter/2.1.0 @@ -846,19 +848,19 @@ packages: version: 4.1.0 dev: true - registry.npmjs.org/@changesets/types/5.1.0: - resolution: {integrity: sha512-uUByGATZCdaPkaO9JkBsgGDjEvHyY2Sb0e/J23+cwxBi5h0fxpLF/HObggO/Fw8T2nxK6zDfJbPsdQt5RwYFJA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/types/-/types-5.1.0.tgz} + registry.npmjs.org/@changesets/types/5.2.0: + resolution: {integrity: sha512-km/66KOqJC+eicZXsm2oq8A8bVTSpkZJ60iPV/Nl5Z5c7p9kk8xxh6XGRTlnludHldxOOfudhnDN2qPxtHmXzA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/types/-/types-5.2.0.tgz} name: '@changesets/types' - version: 5.1.0 + version: 5.2.0 dev: true - registry.npmjs.org/@changesets/write/0.2.0: - resolution: {integrity: sha512-iKHqGYXZvneRzRfvEBpPqKfpGELOEOEP63MKdM/SdSRon40rsUijkTmsGCHT1ueLi3iJPZPmYuZJvjjKrMzumA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/write/-/write-0.2.0.tgz} + registry.npmjs.org/@changesets/write/0.2.1: + resolution: {integrity: sha512-KUd49nt2fnYdGixIqTi1yVE1nAoZYUMdtB3jBfp77IMqjZ65hrmZE5HdccDlTeClZN0420ffpnfET3zzeY8pdw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/write/-/write-0.2.1.tgz} name: '@changesets/write' - version: 0.2.0 + version: 0.2.1 dependencies: '@babel/runtime': registry.npmjs.org/@babel/runtime/7.19.0 - '@changesets/types': registry.npmjs.org/@changesets/types/5.1.0 + '@changesets/types': registry.npmjs.org/@changesets/types/5.2.0 fs-extra: registry.npmjs.org/fs-extra/7.0.1 human-id: registry.npmjs.org/human-id/1.0.2 prettier: registry.npmjs.org/prettier/2.7.1 @@ -1702,11 +1704,11 @@ packages: dev: true optional: true - registry.npmjs.org/@typescript-eslint/eslint-plugin/5.38.0_wsb62dxj2oqwgas4kadjymcmry: - resolution: {integrity: sha512-GgHi/GNuUbTOeoJiEANi0oI6fF3gBQc3bGFYj40nnAPCbhrtEDf2rjBmefFadweBmO1Du1YovHeDP2h5JLhtTQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.38.0.tgz} - id: registry.npmjs.org/@typescript-eslint/eslint-plugin/5.38.0 + registry.npmjs.org/@typescript-eslint/eslint-plugin/5.39.0_jdrczqv3ll7udvbunca43w7rz4: + resolution: {integrity: sha512-xVfKOkBm5iWMNGKQ2fwX5GVgBuHmZBO1tCRwXmY5oAIsPscfwm2UADDuNB8ZVYCtpQvJK4xpjrK7jEhcJ0zY9A==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.39.0.tgz} + id: registry.npmjs.org/@typescript-eslint/eslint-plugin/5.39.0 name: '@typescript-eslint/eslint-plugin' - version: 5.38.0 + version: 5.39.0 engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: '@typescript-eslint/parser': ^5.0.0 @@ -1716,26 +1718,26 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/parser': registry.npmjs.org/@typescript-eslint/parser/5.38.0_irgkl5vooow2ydyo6aokmferha - '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.38.0 - '@typescript-eslint/type-utils': registry.npmjs.org/@typescript-eslint/type-utils/5.38.0_irgkl5vooow2ydyo6aokmferha - '@typescript-eslint/utils': registry.npmjs.org/@typescript-eslint/utils/5.38.0_irgkl5vooow2ydyo6aokmferha + '@typescript-eslint/parser': registry.npmjs.org/@typescript-eslint/parser/5.39.0_irgkl5vooow2ydyo6aokmferha + '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.39.0 + '@typescript-eslint/type-utils': registry.npmjs.org/@typescript-eslint/type-utils/5.39.0_irgkl5vooow2ydyo6aokmferha + '@typescript-eslint/utils': registry.npmjs.org/@typescript-eslint/utils/5.39.0_irgkl5vooow2ydyo6aokmferha debug: registry.npmjs.org/debug/4.3.4 eslint: registry.npmjs.org/eslint/8.23.1 ignore: registry.npmjs.org/ignore/5.2.0 regexpp: registry.npmjs.org/regexpp/3.2.0 - semver: registry.npmjs.org/semver/7.3.7 + semver: registry.npmjs.org/semver/7.3.8 tsutils: registry.npmjs.org/tsutils/3.21.0_typescript@4.8.3 typescript: registry.npmjs.org/typescript/4.8.3 transitivePeerDependencies: - supports-color dev: true - registry.npmjs.org/@typescript-eslint/parser/5.38.0_irgkl5vooow2ydyo6aokmferha: - resolution: {integrity: sha512-/F63giJGLDr0ms1Cr8utDAxP2SPiglaD6V+pCOcG35P2jCqdfR7uuEhz1GIC3oy4hkUF8xA1XSXmd9hOh/a5EA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.38.0.tgz} - id: registry.npmjs.org/@typescript-eslint/parser/5.38.0 + registry.npmjs.org/@typescript-eslint/parser/5.39.0_irgkl5vooow2ydyo6aokmferha: + resolution: {integrity: sha512-PhxLjrZnHShe431sBAGHaNe6BDdxAASDySgsBCGxcBecVCi8NQWxQZMcizNA4g0pN51bBAn/FUfkWG3SDVcGlA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.39.0.tgz} + id: registry.npmjs.org/@typescript-eslint/parser/5.39.0 name: '@typescript-eslint/parser' - version: 5.38.0 + version: 5.39.0 engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: eslint: ^6.0.0 || ^7.0.0 || ^8.0.0 @@ -1744,9 +1746,9 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.38.0 - '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.38.0 - '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.38.0_typescript@4.8.3 + '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.39.0 + '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.39.0 + '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.39.0_typescript@4.8.3 debug: registry.npmjs.org/debug/4.3.4 eslint: registry.npmjs.org/eslint/8.23.1 typescript: registry.npmjs.org/typescript/4.8.3 @@ -1754,21 +1756,21 @@ packages: - supports-color dev: true - registry.npmjs.org/@typescript-eslint/scope-manager/5.38.0: - resolution: {integrity: sha512-ByhHIuNyKD9giwkkLqzezZ9y5bALW8VNY6xXcP+VxoH4JBDKjU5WNnsiD4HJdglHECdV+lyaxhvQjTUbRboiTA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.38.0.tgz} + registry.npmjs.org/@typescript-eslint/scope-manager/5.39.0: + resolution: {integrity: sha512-/I13vAqmG3dyqMVSZPjsbuNQlYS082Y7OMkwhCfLXYsmlI0ca4nkL7wJ/4gjX70LD4P8Hnw1JywUVVAwepURBw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.39.0.tgz} name: '@typescript-eslint/scope-manager' - version: 5.38.0 + version: 5.39.0 engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dependencies: - '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.38.0 - '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys/5.38.0 + '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.39.0 + '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys/5.39.0 dev: true - registry.npmjs.org/@typescript-eslint/type-utils/5.38.0_irgkl5vooow2ydyo6aokmferha: - resolution: {integrity: sha512-iZq5USgybUcj/lfnbuelJ0j3K9dbs1I3RICAJY9NZZpDgBYXmuUlYQGzftpQA9wC8cKgtS6DASTvF3HrXwwozA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.38.0.tgz} - id: registry.npmjs.org/@typescript-eslint/type-utils/5.38.0 + registry.npmjs.org/@typescript-eslint/type-utils/5.39.0_irgkl5vooow2ydyo6aokmferha: + resolution: {integrity: sha512-KJHJkOothljQWzR3t/GunL0TPKY+fGJtnpl+pX+sJ0YiKTz3q2Zr87SGTmFqsCMFrLt5E0+o+S6eQY0FAXj9uA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.39.0.tgz} + id: registry.npmjs.org/@typescript-eslint/type-utils/5.39.0 name: '@typescript-eslint/type-utils' - version: 5.38.0 + version: 5.39.0 engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: eslint: '*' @@ -1777,8 +1779,8 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.38.0_typescript@4.8.3 - '@typescript-eslint/utils': registry.npmjs.org/@typescript-eslint/utils/5.38.0_irgkl5vooow2ydyo6aokmferha + '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.39.0_typescript@4.8.3 + '@typescript-eslint/utils': registry.npmjs.org/@typescript-eslint/utils/5.39.0_irgkl5vooow2ydyo6aokmferha debug: registry.npmjs.org/debug/4.3.4 eslint: registry.npmjs.org/eslint/8.23.1 tsutils: registry.npmjs.org/tsutils/3.21.0_typescript@4.8.3 @@ -1787,18 +1789,18 @@ packages: - supports-color dev: true - registry.npmjs.org/@typescript-eslint/types/5.38.0: - resolution: {integrity: sha512-HHu4yMjJ7i3Cb+8NUuRCdOGu2VMkfmKyIJsOr9PfkBVYLYrtMCK/Ap50Rpov+iKpxDTfnqvDbuPLgBE5FwUNfA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/types/-/types-5.38.0.tgz} + registry.npmjs.org/@typescript-eslint/types/5.39.0: + resolution: {integrity: sha512-gQMZrnfEBFXK38hYqt8Lkwt8f4U6yq+2H5VDSgP/qiTzC8Nw8JO3OuSUOQ2qW37S/dlwdkHDntkZM6SQhKyPhw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/types/-/types-5.39.0.tgz} name: '@typescript-eslint/types' - version: 5.38.0 + version: 5.39.0 engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dev: true - registry.npmjs.org/@typescript-eslint/typescript-estree/5.38.0_typescript@4.8.3: - resolution: {integrity: sha512-6P0RuphkR+UuV7Avv7MU3hFoWaGcrgOdi8eTe1NwhMp2/GjUJoODBTRWzlHpZh6lFOaPmSvgxGlROa0Sg5Zbyg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.38.0.tgz} - id: registry.npmjs.org/@typescript-eslint/typescript-estree/5.38.0 + registry.npmjs.org/@typescript-eslint/typescript-estree/5.39.0_typescript@4.8.3: + resolution: {integrity: sha512-qLFQP0f398sdnogJoLtd43pUgB18Q50QSA+BTE5h3sUxySzbWDpTSdgt4UyxNSozY/oDK2ta6HVAzvGgq8JYnA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.39.0.tgz} + id: registry.npmjs.org/@typescript-eslint/typescript-estree/5.39.0 name: '@typescript-eslint/typescript-estree' - version: 5.38.0 + version: 5.39.0 engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: typescript: '*' @@ -1806,31 +1808,31 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.38.0 - '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys/5.38.0 + '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.39.0 + '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys/5.39.0 debug: registry.npmjs.org/debug/4.3.4 globby: registry.npmjs.org/globby/11.1.0 is-glob: registry.npmjs.org/is-glob/4.0.3 - semver: registry.npmjs.org/semver/7.3.7 + semver: registry.npmjs.org/semver/7.3.8 tsutils: registry.npmjs.org/tsutils/3.21.0_typescript@4.8.3 typescript: registry.npmjs.org/typescript/4.8.3 transitivePeerDependencies: - supports-color dev: true - registry.npmjs.org/@typescript-eslint/utils/5.38.0_irgkl5vooow2ydyo6aokmferha: - resolution: {integrity: sha512-6sdeYaBgk9Fh7N2unEXGz+D+som2QCQGPAf1SxrkEr+Z32gMreQ0rparXTNGRRfYUWk/JzbGdcM8NSSd6oqnTA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.38.0.tgz} - id: registry.npmjs.org/@typescript-eslint/utils/5.38.0 + registry.npmjs.org/@typescript-eslint/utils/5.39.0_irgkl5vooow2ydyo6aokmferha: + resolution: {integrity: sha512-+DnY5jkpOpgj+EBtYPyHRjXampJfC0yUZZzfzLuUWVZvCuKqSdJVC8UhdWipIw7VKNTfwfAPiOWzYkAwuIhiAg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.39.0.tgz} + id: registry.npmjs.org/@typescript-eslint/utils/5.39.0 name: '@typescript-eslint/utils' - version: 5.38.0 + version: 5.39.0 engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: eslint: ^6.0.0 || ^7.0.0 || ^8.0.0 dependencies: '@types/json-schema': registry.npmjs.org/@types/json-schema/7.0.11 - '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.38.0 - '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.38.0 - '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.38.0_typescript@4.8.3 + '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.39.0 + '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.39.0 + '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.39.0_typescript@4.8.3 eslint: registry.npmjs.org/eslint/8.23.1 eslint-scope: registry.npmjs.org/eslint-scope/5.1.1 eslint-utils: registry.npmjs.org/eslint-utils/3.0.0_eslint@8.23.1 @@ -1839,13 +1841,13 @@ packages: - typescript dev: true - registry.npmjs.org/@typescript-eslint/visitor-keys/5.38.0: - resolution: {integrity: sha512-MxnrdIyArnTi+XyFLR+kt/uNAcdOnmT+879os7qDRI+EYySR4crXJq9BXPfRzzLGq0wgxkwidrCJ9WCAoacm1w==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.38.0.tgz} + registry.npmjs.org/@typescript-eslint/visitor-keys/5.39.0: + resolution: {integrity: sha512-yyE3RPwOG+XJBLrhvsxAidUgybJVQ/hG8BhiJo0k8JSAYfk/CshVcxf0HwP4Jt7WZZ6vLmxdo1p6EyN3tzFTkg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.39.0.tgz} name: '@typescript-eslint/visitor-keys' - version: 5.38.0 + version: 5.39.0 engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dependencies: - '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.38.0 + '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.39.0 eslint-visitor-keys: registry.npmjs.org/eslint-visitor-keys/3.3.0 dev: true @@ -1989,7 +1991,7 @@ packages: dependencies: call-bind: registry.npmjs.org/call-bind/1.0.2 define-properties: registry.npmjs.org/define-properties/1.1.4 - es-abstract: registry.npmjs.org/es-abstract/1.20.3 + es-abstract: registry.npmjs.org/es-abstract/1.20.4 get-intrinsic: registry.npmjs.org/get-intrinsic/1.1.3 is-string: registry.npmjs.org/is-string/1.0.7 dev: true @@ -2009,7 +2011,7 @@ packages: dependencies: call-bind: registry.npmjs.org/call-bind/1.0.2 define-properties: registry.npmjs.org/define-properties/1.1.4 - es-abstract: registry.npmjs.org/es-abstract/1.20.3 + es-abstract: registry.npmjs.org/es-abstract/1.20.4 es-shim-unscopables: registry.npmjs.org/es-shim-unscopables/1.0.0 dev: true @@ -2021,7 +2023,7 @@ packages: dependencies: call-bind: registry.npmjs.org/call-bind/1.0.2 define-properties: registry.npmjs.org/define-properties/1.1.4 - es-abstract: registry.npmjs.org/es-abstract/1.20.3 + es-abstract: registry.npmjs.org/es-abstract/1.20.4 es-shim-unscopables: registry.npmjs.org/es-shim-unscopables/1.0.0 dev: true @@ -3001,10 +3003,10 @@ packages: is-arrayish: registry.npmjs.org/is-arrayish/0.2.1 dev: true - registry.npmjs.org/es-abstract/1.20.3: - resolution: {integrity: sha512-AyrnaKVpMzljIdwjzrj+LxGmj8ik2LckwXacHqrJJ/jxz6dDDBcZ7I7nlHM0FvEW8MfbWJwOd+yT2XzYW49Frw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.3.tgz} + registry.npmjs.org/es-abstract/1.20.4: + resolution: {integrity: sha512-0UtvRN79eMe2L+UNEF1BwRe364sj/DXhQ/k5FmivgoSdpM90b8Jc0mDzKMGo7QS0BVbOP/bTwBKNnDc9rNzaPA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.4.tgz} name: es-abstract - version: 1.20.3 + version: 1.20.4 engines: {node: '>= 0.4'} dependencies: call-bind: registry.npmjs.org/call-bind/1.0.2 @@ -3394,6 +3396,32 @@ packages: string.prototype.matchall: registry.npmjs.org/string.prototype.matchall/4.0.7 dev: true + registry.npmjs.org/eslint-plugin-react/7.31.9_eslint@8.23.1: + resolution: {integrity: sha512-vrVJwusIw4L99lyfXjtCw8HWdloajsiYslMavogrBe2Gl8gr95TJsJnOMRasN4b4N24I3XuJf6aAV6MhyGmjqw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.31.9.tgz} + id: registry.npmjs.org/eslint-plugin-react/7.31.9 + name: eslint-plugin-react + version: 7.31.9 + engines: {node: '>=4'} + peerDependencies: + eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 + dependencies: + array-includes: registry.npmjs.org/array-includes/3.1.5 + array.prototype.flatmap: registry.npmjs.org/array.prototype.flatmap/1.3.0 + doctrine: registry.npmjs.org/doctrine/2.1.0 + eslint: registry.npmjs.org/eslint/8.23.1 + estraverse: registry.npmjs.org/estraverse/5.3.0 + jsx-ast-utils: registry.npmjs.org/jsx-ast-utils/3.3.3 + minimatch: registry.npmjs.org/minimatch/3.1.2 + object.entries: registry.npmjs.org/object.entries/1.1.5 + object.fromentries: registry.npmjs.org/object.fromentries/2.0.5 + object.hasown: registry.npmjs.org/object.hasown/1.1.1 + object.values: registry.npmjs.org/object.values/1.1.5 + prop-types: registry.npmjs.org/prop-types/15.8.1 + resolve: registry.npmjs.org/resolve/2.0.0-next.4 + semver: registry.npmjs.org/semver/6.3.0 + string.prototype.matchall: registry.npmjs.org/string.prototype.matchall/4.0.7 + dev: true + registry.npmjs.org/eslint-plugin-turbo/0.0.4_eslint@8.23.1: resolution: {integrity: sha512-dfmYE/iPvoJInQq+5E/0mj140y/rYwKtzZkn3uVK8+nvwC5zmWKQ6ehMWrL4bYBkGzSgpOndZM+jOXhPQ2m8Cg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/eslint-plugin-turbo/-/eslint-plugin-turbo-0.0.4.tgz} id: registry.npmjs.org/eslint-plugin-turbo/0.0.4 @@ -3943,7 +3971,7 @@ packages: dependencies: call-bind: registry.npmjs.org/call-bind/1.0.2 define-properties: registry.npmjs.org/define-properties/1.1.4 - es-abstract: registry.npmjs.org/es-abstract/1.20.3 + es-abstract: registry.npmjs.org/es-abstract/1.20.4 functions-have-names: registry.npmjs.org/functions-have-names/1.2.3 dev: true @@ -5273,7 +5301,7 @@ packages: dependencies: call-bind: registry.npmjs.org/call-bind/1.0.2 define-properties: registry.npmjs.org/define-properties/1.1.4 - es-abstract: registry.npmjs.org/es-abstract/1.20.3 + es-abstract: registry.npmjs.org/es-abstract/1.20.4 dev: true registry.npmjs.org/object.fromentries/2.0.5: @@ -5284,7 +5312,7 @@ packages: dependencies: call-bind: registry.npmjs.org/call-bind/1.0.2 define-properties: registry.npmjs.org/define-properties/1.1.4 - es-abstract: registry.npmjs.org/es-abstract/1.20.3 + es-abstract: registry.npmjs.org/es-abstract/1.20.4 dev: true registry.npmjs.org/object.hasown/1.1.1: @@ -5293,7 +5321,7 @@ packages: version: 1.1.1 dependencies: define-properties: registry.npmjs.org/define-properties/1.1.4 - es-abstract: registry.npmjs.org/es-abstract/1.20.3 + es-abstract: registry.npmjs.org/es-abstract/1.20.4 dev: true registry.npmjs.org/object.values/1.1.5: @@ -5304,7 +5332,7 @@ packages: dependencies: call-bind: registry.npmjs.org/call-bind/1.0.2 define-properties: registry.npmjs.org/define-properties/1.1.4 - es-abstract: registry.npmjs.org/es-abstract/1.20.3 + es-abstract: registry.npmjs.org/es-abstract/1.20.4 dev: true registry.npmjs.org/once/1.4.0: @@ -6195,6 +6223,16 @@ packages: lru-cache: registry.npmjs.org/lru-cache/6.0.0 dev: true + registry.npmjs.org/semver/7.3.8: + resolution: {integrity: sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/semver/-/semver-7.3.8.tgz} + name: semver + version: 7.3.8 + engines: {node: '>=10'} + hasBin: true + dependencies: + lru-cache: registry.npmjs.org/lru-cache/6.0.0 + dev: true + registry.npmjs.org/serialize-javascript/4.0.0: resolution: {integrity: sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz} name: serialize-javascript @@ -6472,7 +6510,7 @@ packages: dependencies: call-bind: registry.npmjs.org/call-bind/1.0.2 define-properties: registry.npmjs.org/define-properties/1.1.4 - es-abstract: registry.npmjs.org/es-abstract/1.20.3 + es-abstract: registry.npmjs.org/es-abstract/1.20.4 get-intrinsic: registry.npmjs.org/get-intrinsic/1.1.3 has-symbols: registry.npmjs.org/has-symbols/1.0.3 internal-slot: registry.npmjs.org/internal-slot/1.0.3 @@ -6487,7 +6525,7 @@ packages: dependencies: call-bind: registry.npmjs.org/call-bind/1.0.2 define-properties: registry.npmjs.org/define-properties/1.1.4 - es-abstract: registry.npmjs.org/es-abstract/1.20.3 + es-abstract: registry.npmjs.org/es-abstract/1.20.4 dev: true registry.npmjs.org/string.prototype.trimstart/1.0.5: @@ -6497,7 +6535,7 @@ packages: dependencies: call-bind: registry.npmjs.org/call-bind/1.0.2 define-properties: registry.npmjs.org/define-properties/1.1.4 - es-abstract: registry.npmjs.org/es-abstract/1.20.3 + es-abstract: registry.npmjs.org/es-abstract/1.20.4 dev: true registry.npmjs.org/strip-ansi/6.0.1: diff --git a/turbo.json b/turbo.json index ada06cd2..bc32f9df 100644 --- a/turbo.json +++ b/turbo.json @@ -2,7 +2,7 @@ "$schema": "https://turborepo.org/schema.json", "pipeline": { "build": { - "dependsOn": ["^build", "typecheck", "lint"], + "dependsOn": ["^build"], "outputs": ["dist/**"] }, "dev": { @@ -20,5 +20,5 @@ "outputs": [] } }, - "globalDependencies": ["$NODE_ENV"] + "globalEnv": ["NODE_ENV"] }