alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' into feat/interactive-minimap

Browse Source
This commit is contained in:
moklick
2022-10-31 12:28:37 +01:00
parent d057a1cd34 674127a3eb
commit 8323ee0c91
98 changed files with 817 additions and 527 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+1 -1
View File
@@ -91,7 +91,7 @@ function Flow() {
Before you can start developing please make sure that you have [pnpm](https://pnpm.io/) installed (`npm i -g pnpm`). Then install the dependencies using pnpm: `pnpm install`.
For local development, you can use `pnpm dev`.
Run `pnpm build` once and then you can use `pnpm dev` for local development.
## Testing
examples/vite-app/src/App/index.tsx
+6
View File
@@ -37,6 +37,7 @@ import UseKeyPress from '../examples/UseKeyPress';
import EdgeRouting from '../examples/EdgeRouting';
import CancelConnection from '../examples/CancelConnection';
import InteractiveMinimap from '../examples/InteractiveMinimap';
import UseOnSelectionChange from '../examples/UseOnSelectionChange';
interface IRoute {
name: string;
@@ -205,6 +206,11 @@ const routes: IRoute[] = [
path: '/update-node',
component: UpdateNode,
},
{
name: 'useOnSelectionChange',
path: '/use-on-selection-change',
component: UseOnSelectionChange,
},
{
name: 'useReactFlow',
path: '/usereactflow',
examples/vite-app/src/examples/UseOnSelectionChange/CustomNode.tsx
+36
View File
@@ -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<NodeProps> = ({ id }) => {
const [handleCount, setHandleCount] = useState(1);
const updateNodeInternals = useUpdateNodeInternals();
const handles = useMemo(
() =>
Array.from({ length: handleCount }, (x, i) => {
const handleId = `handle-${i}`;
return <Handle key={handleId} type="source" position={Position.Right} id={handleId} style={{ top: 10 * i }} />;
}),
[handleCount]
);
return (
<div style={nodeStyles}>
<Handle type="target" position={Position.Left} />
<div>output handle count: {handleCount}</div>
<button
onClick={() => {
setHandleCount((c) => c + 1);
updateNodeInternals(id);
}}
>
add handle
</button>
{handles}
</div>
);
};
export default memo(CustomNode);
examples/vite-app/src/examples/UseOnSelectionChange/index.tsx
+58
View File
@@ -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 (
<ReactFlow
nodes={nodes}
edges={edges}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
onConnect={onConnect}
/>
);
};
const WrappedFlow = () => (
<ReactFlowProvider>
<Flow />
<SelectionLogger />
</ReactFlowProvider>
);
export default WrappedFlow;
package.json
+2 -2
View File
@@ -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",
packages/background/CHANGELOG.md
+16
View File
@@ -1,5 +1,21 @@
# @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
packages/background/package.json
+4 -2
View File
@@ -1,6 +1,6 @@
{
"name": "@reactflow/background",
"version": "11.0.1",
"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",
packages/background/src/Background.tsx
+4 -4
View File
@@ -18,7 +18,7 @@ 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,
@@ -32,7 +32,7 @@ function Background({
className,
}: BackgroundProps) {
const ref = useRef<SVGSVGElement>(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}
>
<pattern
id={rfId}
id={patternId}
x={transform[0] % scaledGap[0]}
y={transform[1] % scaledGap[1]}
width={scaledGap[0]}
@@ -75,7 +75,7 @@ function Background({
<LinePattern dimensions={patternDimensions} color={patternColor} lineWidth={lineWidth} />
)}
</pattern>
<rect x="0" y="0" width="100%" height="100%" fill={`url(#${rfId})`} />
<rect x="0" y="0" width="100%" height="100%" fill={`url(#${patternId})`} />
</svg>
);
}
packages/background/src/types.ts
+2 -2
View File
@@ -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;
}
};
packages/controls/CHANGELOG.md
+15
View File
@@ -1,5 +1,20 @@
# @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
packages/controls/package.json
+4 -2
View File
@@ -1,6 +1,6 @@
{
"name": "@reactflow/controls",
"version": "11.0.1",
"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",
packages/controls/src/ControlButton.tsx
+4 -12
View File
@@ -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<PropsWithChildren<ControlButtonProps>> = ({
children,
className,
...rest
}) => (
<button
type="button"
className={cc(['react-flow__controls-button', className])}
{...rest}
>
const ControlButton: FC<PropsWithChildren<ControlButtonProps>> = ({ children, className, ...rest }) => (
<button type="button" className={cc(['react-flow__controls-button', className])} {...rest}>
{children}
</button>
);
packages/controls/src/Controls.tsx
+5 -3
View File
@@ -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;
packages/controls/src/types.ts
+4 -4
View File
@@ -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<HTMLDivElement> {
export type ControlProps = HTMLAttributes<HTMLDivElement> & {
showZoom?: boolean;
showFitView?: boolean;
showInteractive?: boolean;
@@ -11,6 +11,6 @@ export interface ControlProps extends HTMLAttributes<HTMLDivElement> {
onFitView?: () => void;
onInteractiveChange?: (interactiveStatus: boolean) => void;
position?: PanelPosition;
}
};
export type ControlButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
packages/core/CHANGELOG.md
+19
View File
@@ -1,5 +1,24 @@
# @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
packages/core/package.json
+4 -2
View File
@@ -1,6 +1,6 @@
{
"name": "@reactflow/core",
"version": "11.1.0",
"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"
packages/core/src/components/A11yDescriptions/index.tsx
+16 -9
View File
@@ -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 (
<div id={`${ARIA_LIVE_MESSAGE}-${rfId}`} aria-live="assertive" aria-atomic="true" style={ariaLiveStyle}>
{ariaLiveMessage}
</div>
);
}
function A11yDescriptions({ rfId, disableKeyboardA11y }: { rfId: string; disableKeyboardA11y: boolean }) {
return (
<>
<div id={`${ARIA_NODE_DESC_KEY}-${rfId}`} style={style}>
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.{' '}
</div>
<div id={`${ARIA_EDGE_DESC_KEY}-${rfId}`} style={style}>
Press enter or space to select an edge. You can then press delete to remove it or press escape to cancel.
</div>
<div id={`${ARIA_LIVE_MESSAGE}-${rfId}`} aria-live="assertive" aria-atomic="true" style={ariaLiveStyle}>
{ariaLiveMessage}
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.
</div>
{!disableKeyboardA11y && <AriaLiveMessage rfId={rfId} />}
</>
);
}
packages/core/src/components/Attribution/index.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import Panel from '../Panel';
import { PanelPosition, ProOptions } from '../../types';
import type { PanelPosition, ProOptions } from '../../types';
type AttributionProps = {
proOptions?: ProOptions;
packages/core/src/components/ConnectionLine/index.tsx
+2 -1
View File
@@ -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;
packages/core/src/components/Edges/BaseEdge.tsx
+10 -2
View File
@@ -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 && <path d={path} fill="none" strokeOpacity={0} strokeWidth={interactionWidth} />}
{interactionWidth && (
<path
d={path}
fill="none"
strokeOpacity={0}
strokeWidth={interactionWidth}
className="react-flow__edge-interaction"
/>
)}
{label ? (
<EdgeText
x={labelX}
packages/core/src/components/Edges/BezierEdge.tsx
+2 -1
View File
@@ -2,7 +2,8 @@ import { memo } from 'react';
import BaseEdge from './BaseEdge';
import { getBezierEdgeCenter } from './utils';
import { BezierEdgeProps, Position } from '../../types';
import { Position } from '../../types';
import type { BezierEdgeProps } from '../../types';
export interface GetBezierPathParams {
sourceX: number;
packages/core/src/components/Edges/EdgeAnchor.tsx
+1 -1
View File
@@ -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';
packages/core/src/components/Edges/EdgeText.tsx
+2 -1
View File
@@ -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';
packages/core/src/components/Edges/SimpleBezierEdge.tsx
+3 -1
View File
@@ -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;
packages/core/src/components/Edges/SmoothStepEdge.tsx
+2 -1
View File
@@ -1,8 +1,9 @@
import { memo } from 'react';
import { SmoothStepEdgeProps, Position, XYPosition } from '../../types';
import BaseEdge from './BaseEdge';
import { getEdgeCenter } from './utils';
import { Position } from '../../types';
import type { SmoothStepEdgeProps, XYPosition } from '../../types';
export interface GetSmoothStepPathParams {
sourceX: number;
packages/core/src/components/Edges/StepEdge.tsx
+1 -1
View File
@@ -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) => (
<SmoothStepEdge
packages/core/src/components/Edges/StraightEdge.tsx
+1 -1
View File
@@ -1,8 +1,8 @@
import { memo } from 'react';
import BaseEdge from './BaseEdge';
import { EdgeProps } from '../../types';
import { getEdgeCenter } from './utils';
import type { EdgeProps } from '../../types';
export type GetStraightPathParams = {
sourceX: number;
packages/core/src/components/Edges/utils.ts
+1 -1
View File
@@ -1,7 +1,7 @@
import { MouseEvent as ReactMouseEvent } from 'react';
import { StoreApi } from 'zustand';
import { Edge, MarkerType, ReactFlowState } from '../../types';
import type { Edge, MarkerType, ReactFlowState } from '../../types';
export const getMarkerEnd = (markerType?: MarkerType, markerEndId?: string): string => {
if (typeof markerEndId !== 'undefined' && markerEndId) {
packages/core/src/components/Edges/wrapEdge.tsx
+3 -2
View File
@@ -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<EdgeProps>) => {
const EdgeWrapper = ({
packages/core/src/components/Handle/handler.ts
+3 -2
View File
@@ -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;
packages/core/src/components/Handle/index.tsx
+2 -1
View File
@@ -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;
packages/core/src/components/Nodes/DefaultNode.tsx
+2 -1
View File
@@ -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,
packages/core/src/components/Nodes/InputNode.tsx
+2 -1
View File
@@ -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) => (
<>
packages/core/src/components/Nodes/OutputNode.tsx
+2 -1
View File
@@ -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) => (
<>
packages/core/src/components/Nodes/utils.ts
+2 -1
View File
@@ -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,
packages/core/src/components/Nodes/wrapNode.tsx
+3 -2
View File
@@ -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,8 +8,8 @@ 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<string, XYPosition> = {
ArrowUp: { x: 0, y: -1 },
packages/core/src/components/NodesSelection/index.tsx
+3 -2
View File
@@ -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;
packages/core/src/components/Panel/index.tsx
+12 -4
View File
@@ -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<HTMLDivElement> & {
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 (
<div className={cc(['react-flow__panel', className, ...positionClasses])} {...rest}>
<div
className={cc(['react-flow__panel', className, ...positionClasses])}
style={{ ...style, pointerEvents }}
{...rest}
>
{children}
</div>
);
packages/core/src/components/ReactFlowProvider/index.tsx
+3 -2
View File
@@ -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<PropsWithChildren> = ({ children }) => {
const storeRef = useRef<StoreApi<ReactFlowState> | null>(null);
packages/core/src/components/SelectionListener/index.tsx
+28 -16
View File
@@ -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<typeof selector>;
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 <SelectionListener onSelectionChange={onSelectionChange} />;
}
return null;
}
export default memo(SelectionListener);
export default Wrapper;
packages/core/src/components/StoreUpdater/index.tsx
+4 -5
View File
@@ -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,
@@ -44,8 +44,7 @@ type StoreUpdaterProps = Pick<
| 'onSelectionDragStop'
| 'noPanClassName'
| 'nodeOrigin'
| 'id'
>;
> & { rfId: string };
const selector = (s: ReactFlowState) => ({
setNodes: s.setNodes,
@@ -117,7 +116,7 @@ const StoreUpdater = ({
onSelectionDragStop,
noPanClassName,
nodeOrigin,
id,
rfId,
}: StoreUpdaterProps) => {
const {
setNodes,
@@ -169,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<Node[]>(nodes, setNodes);
useStoreUpdater<Edge[]>(edges, setEdges);
packages/core/src/components/UserSelection/index.tsx
+1 -1
View File
@@ -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;
packages/core/src/container/EdgeRenderer/MarkerDefinitions.tsx
+7 -5
View File
@@ -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,
packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx
+3 -1
View File
@@ -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<EdgeMarker, 'type'>;
packages/core/src/container/EdgeRenderer/index.tsx
+29 -29
View File
@@ -8,39 +8,39 @@ 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,
packages/core/src/container/EdgeRenderer/utils.ts
+5 -4
View File
@@ -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;
packages/core/src/container/FlowRenderer/Pane.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import { MouseEvent } from 'react';
import type { MouseEvent } from 'react';
import cc from 'classcat';
import { useStore } from '../../hooks/useStore';
packages/core/src/container/FlowRenderer/index.tsx
+3 -3
View File
@@ -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,
packages/core/src/container/GraphView/index.tsx
+28 -32
View File
@@ -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<ReactFlowProps, 'onSelectionChange' | 'nodes' | 'edges' | 'nodeTypes' | 'edgeTypes'> {
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<ReactFlowProps, 'onSelectionChange' | 'nodes' | 'edges' | 'nodeTypes' | 'edgeTypes'> &
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,
packages/core/src/container/NodeRenderer/index.tsx
+4 -2
View File
@@ -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,
packages/core/src/container/NodeRenderer/utils.ts
+2 -2
View File
@@ -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;
packages/core/src/container/ReactFlow/Wrapper.tsx
+1 -1
View File
@@ -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';
packages/core/src/container/ReactFlow/index.tsx
+18 -18
View File
@@ -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,
@@ -156,13 +154,14 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
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 (
<div
@@ -171,6 +170,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
ref={ref}
className={cc(['react-flow', className])}
data-testid="rf__wrapper"
id={id}
>
<Wrapper>
<GraphView
@@ -230,7 +230,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
noWheelClassName={noWheelClassName}
noPanClassName={noPanClassName}
elevateEdgesOnSelect={elevateEdgesOnSelect}
rfId={id}
rfId={rfId}
disableKeyboardA11y={disableKeyboardA11y}
nodeOrigin={nodeOrigin}
nodeExtent={nodeExtent}
@@ -273,12 +273,12 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
onSelectionDragStop={onSelectionDragStop}
noPanClassName={noPanClassName}
nodeOrigin={nodeOrigin}
id={id}
rfId={rfId}
/>
{onSelectionChange && <SelectionListener onSelectionChange={onSelectionChange} />}
<SelectionListener onSelectionChange={onSelectionChange} />
{children}
<Attribution proOptions={proOptions} position={attributionPosition} />
{!disableKeyboardA11y && <A11yDescriptions rfId={id} />}
<A11yDescriptions rfId={rfId} disableKeyboardA11y={disableKeyboardA11y} />
</Wrapper>
</div>
);
packages/core/src/container/ReactFlow/utils.ts
+1 -1
View File
@@ -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;
packages/core/src/container/Viewport/index.tsx
+2 -2
View File
@@ -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]})`;
packages/core/src/container/ZoomPane/index.tsx
+5 -3
View File
@@ -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,
packages/core/src/hooks/useDrag/index.ts
+3 -2
View File
@@ -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<HTMLDivElement, null, SubjectPosition>;
export type UseDragData = { dx: number; dy: number };
packages/core/src/hooks/useDrag/utils.ts
+2 -2
View File
@@ -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) {
packages/core/src/hooks/useEdges.ts
+1 -1
View File
@@ -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;
packages/core/src/hooks/useGlobalKeyHandler.ts
+1 -1
View File
@@ -3,7 +3,7 @@ import { useEffect } from 'react';
import { useStoreApi } from '../hooks/useStore';
import useKeyPress from './useKeyPress';
import { getConnectedEdges } from '../utils/graph';
import { KeyCode, NodeChange, Node } from '../types';
import type { KeyCode, NodeChange, Node } from '../types';
interface HookParams {
deleteKeyCode: KeyCode | null;
packages/core/src/hooks/useKeyPress.ts
+1 -1
View File
@@ -1,6 +1,6 @@
import { useState, useEffect, useRef, useMemo } from 'react';
import { KeyCode } from '../types';
import type { KeyCode } from '../types';
type Keys = Array<string>;
type PressedKeys = Set<string>;
packages/core/src/hooks/useNodes.ts
+1 -1
View File
@@ -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());
packages/core/src/hooks/useNodesEdgesState.ts
+3 -2
View File
@@ -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<ItemType, ChangesType> = (changes: ChangesType[], items: ItemType[]) => ItemType[];
type OnChange<ChangesType> = (changes: ChangesType[]) => void;
packages/core/src/hooks/useNodesInitialized.ts
+1 -1
View File
@@ -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) {
packages/core/src/hooks/useOnInitHandler.ts
+1 -1
View File
@@ -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();
packages/core/src/hooks/useReactFlow.ts
+1 -1
View File
@@ -2,7 +2,7 @@ import { useCallback, useMemo } from 'react';
import useViewportHelper from './useViewportHelper';
import { useStoreApi } from '../hooks/useStore';
import {
import type {
ReactFlowInstance,
Instance,
NodeAddChange,
packages/core/src/hooks/useResizeHandler.ts
+2 -1
View File
@@ -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';
packages/core/src/hooks/useStore.ts
+3 -2
View File
@@ -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';
packages/core/src/hooks/useUpdateNodeInternals.ts
+1 -1
View File
@@ -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();
packages/core/src/hooks/useUpdateNodePositions.ts
+1 -2
View File
@@ -2,8 +2,7 @@ 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();
packages/core/src/hooks/useViewport.ts
+1 -1
View File
@@ -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],
packages/core/src/hooks/useViewportHelper.ts
+1 -1
View File
@@ -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 = () => {};
packages/core/src/hooks/useVisibleEdges.ts
+1 -1
View File
@@ -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: [] }];
packages/core/src/hooks/useVisibleNodes.ts
+1 -2
View File
@@ -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(
packages/core/src/store/index.ts
+5 -6
View File
@@ -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<ReactFlowState>((set, get) => ({
packages/core/src/store/initialState.ts
+2 -1
View File
@@ -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],
packages/core/src/store/utils.ts
+2 -2
View File
@@ -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,
packages/core/src/styles/index.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import { CSSProperties } from 'react';
import type { CSSProperties } from 'react';
export const containerStyle: CSSProperties = {
position: 'absolute',
packages/core/src/styles/init.css
+5
View File
@@ -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;
}
packages/core/src/types/changes.ts
+3 -3
View File
@@ -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;
packages/core/src/types/component-props.ts
+22 -21
View File
@@ -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<HTMLDivElement> {
export type ReactFlowProps = HTMLAttributes<HTMLDivElement> & {
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<HTMLDivElement> {
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<HTMLDivElement> {
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<HTMLDivElement> {
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;
@@ -112,14 +121,6 @@ export interface ReactFlowProps extends HTMLAttributes<HTMLDivElement> {
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;
@@ -131,6 +132,6 @@ export interface ReactFlowProps extends HTMLAttributes<HTMLDivElement> {
proOptions?: ProOptions;
elevateEdgesOnSelect?: boolean;
disableKeyboardA11y?: boolean;
}
};
export type ReactFlowRefType = HTMLDivElement;
packages/core/src/types/edges.ts
+60 -79
View File
@@ -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<T = any> = {
@@ -13,12 +21,6 @@ type DefaultEdge<T = any> = {
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;
@@ -34,7 +36,7 @@ type DefaultEdge<T = any> = {
ariaLabel?: string;
interactionWidth?: number;
focusable?: boolean;
};
} & EdgeLabelOptions;
export type SmoothStepPathOptions = {
offset?: number;
@@ -62,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<T = any> = {
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<T = any> = Omit<Edge<T>, 'sourceHandle' | 'targetHandle'> & {
onClick?: EdgeMouseHandler;
@@ -130,30 +84,57 @@ export type WrapEdgeProps<T = any> = Omit<Edge<T>, '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;
isFocusable: boolean;
pathOptions?: BezierPathOptions | SmoothStepPathOptions;
};
export interface SmoothStepEdgeProps<T = any> extends EdgeProps<T> {
pathOptions?: SmoothStepPathOptions;
}
// props that get passed to a custom edge
export type EdgeProps<T = any> = Pick<
Edge<T>,
'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<T = any> extends EdgeProps<T> {
export type BaseEdgeProps = Pick<EdgeProps, 'style' | 'markerStart' | 'markerEnd' | 'interactionWidth'> &
EdgeLabelOptions & {
labelX: number;
labelY: number;
path: string;
};
export type SmoothStepEdgeProps<T = any> = EdgeProps<T> & {
pathOptions?: SmoothStepPathOptions;
};
export type BezierEdgeProps<T = any> = EdgeProps<T> & {
pathOptions?: BezierPathOptions;
}
export interface EdgeTextProps extends HTMLAttributes<SVGElement> {
x: number;
y: number;
label?: string | ReactNode;
labelStyle?: CSSProperties;
labelShowBg?: boolean;
labelBgStyle?: CSSProperties;
labelBgPadding?: [number, number];
labelBgBorderRadius?: number;
}
};
export type EdgeTextProps = HTMLAttributes<SVGElement> &
EdgeLabelOptions & {
x: number;
y: number;
};
export enum ConnectionLineType {
Bezier = 'default',
@@ -180,7 +161,7 @@ export type ConnectionLineComponent = ComponentType<ConnectionLineComponentProps
export type OnEdgeUpdateFunc<T = any> = (oldEdge: Edge<T>, newConnection: Connection) => void;
export interface EdgeMarker {
export type EdgeMarker = {
type: MarkerType;
color?: string;
width?: number;
@@ -188,7 +169,7 @@ export interface EdgeMarker {
markerUnits?: string;
orient?: string;
strokeWidth?: number;
}
};
export type EdgeMarkerType = string | EdgeMarker;
packages/core/src/types/general.ts
+11 -11
View File
@@ -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<NodeProps> };
export type NodeTypesWrapped = { [key: string]: MemoExoticComponent<ComponentType<WrapNodeProps>> };
@@ -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;
@@ -242,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;
};
packages/core/src/types/handles.ts
+1 -2
View File
@@ -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';
packages/core/src/types/instance.ts
+1 -3
View File
@@ -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<NodeData = any, EdgeData = any> = {
nodes: Node<NodeData>[];
packages/core/src/types/nodes.ts
+43 -58
View File
@@ -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<T = any> {
export type Node<T = any> = {
id: string;
position: XYPosition;
data: T;
type?: string;
style?: CSSProperties;
className?: string;
targetPosition?: Position;
sourcePosition?: Position;
targetPosition?: Position;
hidden?: boolean;
selected?: boolean;
dragging?: boolean;
@@ -39,64 +38,50 @@ export interface Node<T = any> {
handleBounds?: NodeHandleBounds;
isParent?: boolean;
};
}
// props that get passed to a custom node
export interface NodeProps<T = any> {
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<T = any> {
id: string;
type: string;
data: T;
selected: boolean;
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;
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<T = any> = Pick<
Node<T>,
'id' | 'data' | 'style' | 'className' | 'dragHandle' | 'sourcePosition' | 'targetPosition' | 'hidden' | 'ariaLabel'
> &
Required<Pick<Node<T>, '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<T = any> = Pick<
WrapNodeProps<T>,
'id' | 'data' | 'dragHandle' | 'type' | 'selected' | 'isConnectable' | 'xPos' | 'yPos' | 'zIndex'
> & {
dragging: boolean;
targetPosition?: Position;
sourcePosition?: Position;
};
export type NodeHandleBounds = {
source: HandleElement[] | null;
packages/core/src/utils/changes.ts
+1 -1
View File
@@ -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);
packages/core/src/utils/graph.ts
+2 -2
View File
@@ -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);
}
});
packages/core/src/utils/index.ts
+1 -1
View File
@@ -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,
packages/minimap/CHANGELOG.md
+15
View File
@@ -1,5 +1,20 @@
# @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
packages/minimap/package.json
+4 -2
View File
@@ -1,6 +1,6 @@
{
"name": "@reactflow/minimap",
"version": "11.0.1",
"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"
},
packages/minimap/src/MiniMap.tsx
+3 -2
View File
@@ -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;
packages/minimap/src/MiniMapNode.tsx
+2 -1
View File
@@ -1,4 +1,5 @@
import { memo, CSSProperties } from 'react';
import { memo } from 'react';
import type { CSSProperties } from 'react';
import cc from 'classcat';
interface MiniMapNodeProps {
packages/minimap/src/types.ts
+4 -4
View File
@@ -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<NodeData = any> = (node: Node<NodeData>) => string;
export interface MiniMapProps<NodeData = any> extends HTMLAttributes<SVGSVGElement> {
export type MiniMapProps<NodeData = any> = HTMLAttributes<SVGSVGElement> & {
nodeColor?: string | GetMiniMapNodeAttribute<NodeData>;
nodeStrokeColor?: string | GetMiniMapNodeAttribute<NodeData>;
nodeClassName?: string | GetMiniMapNodeAttribute<NodeData>;
@@ -12,4 +12,4 @@ export interface MiniMapProps<NodeData = any> extends HTMLAttributes<SVGSVGEleme
nodeStrokeWidth?: number;
maskColor?: string;
position?: PanelPosition;
}
};
packages/reactflow/CHANGELOG.md
+32
View File
@@ -1,5 +1,37 @@
# reactflow
## 11.1.2
Housekeeping release with some fixes and some cleanups for the types.
### 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
- Updated dependencies:
- @reactflow/core@11.1.2
- @reactflow/background@11.0.3
- @reactflow/controls@11.0.3
- @reactflow/minimap@11.0.3
## 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
- Updated dependencies:
- @reactflow/background@11.0.2
- @reactflow/core@11.1.1
- @reactflow/controls@11.0.2
- @reactflow/minimap@11.0.2
## 11.1.0
### Minor Changes
packages/reactflow/README.md
+30 -5
View File
@@ -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 (
<ReactFlow
nodes={nodes}
@@ -56,6 +80,7 @@ function Flow({ nodes, edges, onNodesChange, onEdgesChange, onConnect }) {
>
<MiniMap />
<Controls />
<Background />
</ReactFlow>
);
}
packages/reactflow/package.json
+4 -2
View File
@@ -1,6 +1,6 @@
{
"name": "reactflow",
"version": "11.1.0",
"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",
pnpm-lock.yaml
Generated
+132 -96
View File
@@ -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,8 +29,8 @@ 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.39.0_jdrczqv3ll7udvbunca43w7rz4
'@typescript-eslint/parser': registry.npmjs.org/@typescript-eslint/parser/5.39.0_irgkl5vooow2ydyo6aokmferha
@@ -40,7 +40,7 @@ importers:
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
@@ -655,16 +655,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
@@ -675,59 +675,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
@@ -749,15 +749,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
@@ -771,12 +771,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
@@ -794,17 +794,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
@@ -814,14 +814,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
@@ -835,37 +835,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
@@ -877,19 +877,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
@@ -1755,7 +1755,7 @@ packages:
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:
@@ -1842,7 +1842,7 @@ packages:
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:
@@ -2020,7 +2020,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
@@ -2040,7 +2040,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
@@ -2052,7 +2052,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
@@ -3032,10 +3032,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
@@ -3425,6 +3425,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
@@ -3974,7 +4000,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
@@ -5304,7 +5330,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:
@@ -5315,7 +5341,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:
@@ -5324,7 +5350,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:
@@ -5335,7 +5361,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:
@@ -6226,6 +6252,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
@@ -6503,7 +6539,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
@@ -6518,7 +6554,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:
@@ -6528,7 +6564,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: