@xyflow/react 12.5.6 → 12.6.1

package/dist/base.css

@@ -249,7 +249,7 @@ svg.react-flow__connectionline {
   }
 .react-flow__panel.top.center, .react-flow__panel.bottom.center {
       left: 50%;
-      transform: translateX(-50%);
+      transform: translateX(-15px) translateX(-50%);
     }
 .react-flow__panel.left {
     left: 0;
@@ -259,7 +259,7 @@ svg.react-flow__connectionline {
   }
 .react-flow__panel.left.center, .react-flow__panel.right.center {
       top: 50%;
-      transform: translateY(-50%);
+      transform: translateY(-15px) translateY(-50%);
     }
 .react-flow__attribution {
   font-size: 10px;

package/dist/esm/additional-components/NodeResizer/NodeResizeControl.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { ResizeControlProps, ResizeControlLineProps } from './types';
-declare function ResizeControl({ nodeId, position, variant, className, style, children, color, minWidth, minHeight, maxWidth, maxHeight, keepAspectRatio, shouldResize, onResizeStart, onResize, onResizeEnd, }: ResizeControlProps): import("react/jsx-runtime").JSX.Element;
+declare function ResizeControl({ nodeId, position, variant, className, style, children, color, minWidth, minHeight, maxWidth, maxHeight, keepAspectRatio, resizeDirection, shouldResize, onResizeStart, onResize, onResizeEnd, }: ResizeControlProps): import("react/jsx-runtime").JSX.Element;
 export declare function ResizeControlLine(props: ResizeControlLineProps): import("react/jsx-runtime").JSX.Element;
 /**
  * To create your own resizing UI, you can use the `NodeResizeControl` component where you can pass children (such as icons).

package/dist/esm/additional-components/NodeResizer/NodeResizeControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NodeResizeControl.d.ts","sourceRoot":"","sources":["../../../src/additional-components/NodeResizer/NodeResizeControl.tsx"],"names":[],"mappings":";AAmBA,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAE1E,iBAAS,aAAa,CAAC,EACrB,MAAM,EACN,QAAQ,EACR,OAAqC,EACrC,SAAS,EACT,KAAU,EACV,QAAQ,EACR,KAAK,EACL,QAAa,EACb,SAAc,EACd,QAA2B,EAC3B,SAA4B,EAC5B,eAAuB,EACvB,YAAY,EACZ,aAAa,EACb,QAAQ,EACR,WAAW,GACZ,EAAE,kBAAkB,2CAqKpB;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,2CAE9D;AAED;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,2DAAsB,CAAC"}
+{"version":3,"file":"NodeResizeControl.d.ts","sourceRoot":"","sources":["../../../src/additional-components/NodeResizer/NodeResizeControl.tsx"],"names":[],"mappings":";AAmBA,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAE1E,iBAAS,aAAa,CAAC,EACrB,MAAM,EACN,QAAQ,EACR,OAAqC,EACrC,SAAS,EACT,KAAU,EACV,QAAQ,EACR,KAAK,EACL,QAAa,EACb,SAAc,EACd,QAA2B,EAC3B,SAA4B,EAC5B,eAAuB,EACvB,eAAe,EACf,YAAY,EACZ,aAAa,EACb,QAAQ,EACR,WAAW,GACZ,EAAE,kBAAkB,2CAuKpB;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,2CAE9D;AAED;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,2DAAsB,CAAC"}

package/dist/esm/additional-components/NodeResizer/types.d.ts

@@ -1,5 +1,5 @@
 import type { CSSProperties, ReactNode } from 'react';
-import type { ControlPosition, ControlLinePosition, ResizeControlVariant, ShouldResize, OnResizeStart, OnResize, OnResizeEnd } from '@xyflow/system';
+import type { ControlPosition, ControlLinePosition, ResizeControlVariant, ResizeControlDirection, ShouldResize, OnResizeStart, OnResize, OnResizeEnd } from '@xyflow/system';
 /**
  * @expand
  */
@@ -74,6 +74,11 @@ export type ResizeControlProps = Pick<NodeResizerProps, 'nodeId' | 'color' | 'mi
      * @example ResizeControlVariant.Handle, ResizeControlVariant.Line
      */
     variant?: ResizeControlVariant;
+    /**
+     * The direction the user can resize the node.
+     * If not provided, the user can resize in any direction.
+     */
+    resizeDirection?: ResizeControlDirection;
     className?: string;
     style?: CSSProperties;
     children?: ReactNode;
@@ -81,7 +86,7 @@ export type ResizeControlProps = Pick<NodeResizerProps, 'nodeId' | 'color' | 'mi
 /**
  * @expand
  */
-export type ResizeControlLineProps = ResizeControlProps & {
+export type ResizeControlLineProps = Omit<ResizeControlProps, 'resizeDirection'> & {
     position?: ControlLinePosition;
 };
 //# sourceMappingURL=types.d.ts.map

package/dist/esm/additional-components/NodeResizer/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/additional-components/NodeResizer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,EACV,eAAe,EACf,mBAAmB,EACnB,oBAAoB,EACpB,YAAY,EACZ,aAAa,EACb,QAAQ,EACR,WAAW,EACZ,MAAM,gBAAgB,CAAC;AAExB;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,+BAA+B;IAC/B,WAAW,CAAC,EAAE,aAAa,CAAC;IAC5B,kCAAkC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,mDAAmD;IACnD,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,4CAA4C;IAC5C,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,0CAA0C;IAC1C,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,gBAAgB,EACd,QAAQ,GACR,OAAO,GACP,UAAU,GACV,WAAW,GACX,UAAU,GACV,WAAW,GACX,iBAAiB,GACjB,cAAc,GACd,eAAe,GACf,UAAU,GACV,aAAa,CAChB,GAAG;IACF;;;;OAIG;IACH,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B;;;;OAIG;IACH,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAAG,kBAAkB,GAAG;IACxD,QAAQ,CAAC,EAAE,mBAAmB,CAAC;CAChC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/additional-components/NodeResizer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,EACV,eAAe,EACf,mBAAmB,EACnB,oBAAoB,EACpB,sBAAsB,EACtB,YAAY,EACZ,aAAa,EACb,QAAQ,EACR,WAAW,EACZ,MAAM,gBAAgB,CAAC;AAExB;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,+BAA+B;IAC/B,WAAW,CAAC,EAAE,aAAa,CAAC;IAC5B,kCAAkC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,mDAAmD;IACnD,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,4CAA4C;IAC5C,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,0CAA0C;IAC1C,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,gBAAgB,EACd,QAAQ,GACR,OAAO,GACP,UAAU,GACV,WAAW,GACX,UAAU,GACV,WAAW,GACX,iBAAiB,GACjB,cAAc,GACd,eAAe,GACf,UAAU,GACV,aAAa,CAChB,GAAG;IACF;;;;OAIG;IACH,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B;;;;OAIG;IACH,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B;;;OAGG;IACH,eAAe,CAAC,EAAE,sBAAsB,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,kBAAkB,EAAE,iBAAiB,CAAC,GAAG;IACjF,QAAQ,CAAC,EAAE,mBAAmB,CAAC;CAChC,CAAC"}

package/dist/esm/components/BatchProvider/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/BatchProvider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAoC,MAAM,OAAO,CAAC;AAKnF,OAAO,EAAE,KAAK,EAAa,MAAM,SAAS,CAAC;AAC3C,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAU9C;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,EACxF,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;CACrB,2CAmEA;AAED,wBAAgB,eAAe;;;EAQ9B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/BatchProvider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAoC,MAAM,OAAO,CAAC;AAKnF,OAAO,EAAE,KAAK,EAAa,MAAM,SAAS,CAAC;AAC3C,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAU9C;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,EACxF,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;CACrB,2CAkEA;AAED,wBAAgB,eAAe;;;EAQ9B"}

package/dist/esm/components/ReactFlowProvider/index.d.ts

@@ -1,15 +1,46 @@
 import { type ReactNode } from 'react';
-import type { Node, Edge } from '../../types';
+import type { Node, Edge, FitViewOptions } from '../../types';
 import { CoordinateExtent, NodeOrigin } from '@xyflow/system';
 export type ReactFlowProviderProps = {
+    /** These nodes are used to initialize the flow. They are not dynamic. */
     initialNodes?: Node[];
+    /** These edges are used to initialize the flow. They are not dynamic. */
     initialEdges?: Edge[];
+    /** These nodes are used to initialize the flow. They are not dynamic. */
     defaultNodes?: Node[];
+    /** These edges are used to initialize the flow. They are not dynamic. */
     defaultEdges?: Edge[];
+    /** The initial width is necessary to be able to use fitView on the server */
     initialWidth?: number;
+    /** The initial height is necessary to be able to use fitView on the server */
     initialHeight?: number;
+    /** When `true`, the flow will be zoomed and panned to fit all the nodes initially provided. */
     fitView?: boolean;
+    /**
+     * You can provide an object of options to customize the initial fitView behavior.
+     */
+    initialFitViewOptions?: FitViewOptions;
+    /** Initial minimum zoom level */
+    initialMinZoom?: number;
+    /** Initial maximum zoom level */
+    initialMaxZoom?: number;
+    /**
+     * The origin of the node to use when placing it in the flow or looking up its `x` and `y`
+     * position. An origin of `[0, 0]` means that a node's top left corner will be placed at the `x`
+     * and `y` position.
+     * @default [0, 0]
+     * @example
+     * [0, 0] // default, top left
+     * [0.5, 0.5] // center
+     * [1, 1] // bottom right
+     */
     nodeOrigin?: NodeOrigin;
+    /**
+     * By default, nodes can be placed on an infinite flow. You can use this prop to set a boundary.
+     *
+     * The first pair of coordinates is the top left boundary and the second pair is the bottom right.
+     * @example [[-1000, -10000], [1000, 1000]]
+     */
     nodeExtent?: CoordinateExtent;
     children: ReactNode;
 };
@@ -47,5 +78,5 @@ export type ReactFlowProviderProps = {
  * your router. If you have multiple flows on the same page you will need to use a separate
  * `<ReactFlowProvider />` for each flow.
  */
-export declare function ReactFlowProvider({ initialNodes: nodes, initialEdges: edges, defaultNodes, defaultEdges, initialWidth: width, initialHeight: height, fitView, nodeOrigin, nodeExtent, children, }: ReactFlowProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ReactFlowProvider({ initialNodes: nodes, initialEdges: edges, defaultNodes, defaultEdges, initialWidth: width, initialHeight: height, initialMinZoom: minZoom, initialMaxZoom: maxZoom, initialFitViewOptions: fitViewOptions, fitView, nodeOrigin, nodeExtent, children, }: ReactFlowProviderProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/components/ReactFlowProvider/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ReactFlowProvider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKjD,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE9D,MAAM,MAAM,sBAAsB,GAAG;IACnC,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,YAAY,EAAE,KAAK,EACnB,YAAY,EAAE,KAAK,EACnB,YAAY,EACZ,YAAY,EACZ,YAAY,EAAE,KAAK,EACnB,aAAa,EAAE,MAAM,EACrB,OAAO,EACP,UAAU,EACV,UAAU,EACV,QAAQ,GACT,EAAE,sBAAsB,2CAoBxB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ReactFlowProvider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKjD,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE9D,MAAM,MAAM,sBAAsB,GAAG;IACnC,yEAAyE;IACzE,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,yEAAyE;IACzE,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,yEAAyE;IACzE,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,yEAAyE;IACzE,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,6EAA6E;IAC7E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8EAA8E;IAC9E,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,+FAA+F;IAC/F,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,qBAAqB,CAAC,EAAE,cAAc,CAAC;IACvC,iCAAiC;IACjC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iCAAiC;IACjC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,YAAY,EAAE,KAAK,EACnB,YAAY,EAAE,KAAK,EACnB,YAAY,EACZ,YAAY,EACZ,YAAY,EAAE,KAAK,EACnB,aAAa,EAAE,MAAM,EACrB,cAAc,EAAE,OAAO,EACvB,cAAc,EAAE,OAAO,EACvB,qBAAqB,EAAE,cAAc,EACrC,OAAO,EACP,UAAU,EACV,UAAU,EACV,QAAQ,GACT,EAAE,sBAAsB,2CAuBxB"}

package/dist/esm/container/ReactFlow/Wrapper.d.ts

@@ -1,7 +1,7 @@
 import { type ReactNode } from 'react';
-import type { Node, Edge } from '../../types';
+import type { Node, Edge, FitViewOptions } from '../../types';
 import { CoordinateExtent, NodeOrigin } from '@xyflow/system';
-export declare function Wrapper({ children, nodes, edges, defaultNodes, defaultEdges, width, height, fitView, nodeOrigin, nodeExtent, }: {
+export declare function Wrapper({ children, nodes, edges, defaultNodes, defaultEdges, width, height, fitView, fitViewOptions, minZoom, maxZoom, nodeOrigin, nodeExtent, }: {
     children: ReactNode;
     nodes?: Node[];
     edges?: Edge[];
@@ -10,6 +10,9 @@ export declare function Wrapper({ children, nodes, edges, defaultNodes, defaultE
     width?: number;
     height?: number;
     fitView?: boolean;
+    fitViewOptions?: FitViewOptions;
+    minZoom?: number;
+    maxZoom?: number;
     nodeOrigin?: NodeOrigin;
     nodeExtent?: CoordinateExtent;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/esm/container/ReactFlow/Wrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Wrapper.d.ts","sourceRoot":"","sources":["../../../src/container/ReactFlow/Wrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAInD,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE9D,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,KAAK,EACL,KAAK,EACL,YAAY,EACZ,YAAY,EACZ,KAAK,EACL,MAAM,EACN,OAAO,EACP,UAAU,EACV,UAAU,GACX,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,UAAU,CAAC,EAAE,gBAAgB,CAAC;CAC/B,2CA0BA"}
+{"version":3,"file":"Wrapper.d.ts","sourceRoot":"","sources":["../../../src/container/ReactFlow/Wrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAInD,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE9D,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,KAAK,EACL,KAAK,EACL,YAAY,EACZ,YAAY,EACZ,KAAK,EACL,MAAM,EACN,OAAO,EACP,cAAc,EACd,OAAO,EACP,OAAO,EACP,UAAU,EACV,UAAU,GACX,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,UAAU,CAAC,EAAE,gBAAgB,CAAC;CAC/B,2CA6BA"}

package/dist/esm/container/ReactFlow/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/container/ReactFlow/index.tsx"],"names":[],"mappings":";AAWA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AA+S9D;;;;;;;;;;;;;;;;;;;GAmBG;;AACH,wBAA0C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/container/ReactFlow/index.tsx"],"names":[],"mappings":";AAWA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAkT9D;;;;;;;;;;;;;;;;;;;GAmBG;;AACH,wBAA0C"}

package/dist/esm/index.js

@@ -135,12 +135,12 @@ const selector$m = (s) => {
     const selectedNodes = [];
     const selectedEdges = [];
     for (const [, node] of s.nodeLookup) {
-        if (node.selected && (s.elementsSelectable || node.selectable)) {
+        if (node.selected) {
             selectedNodes.push(node.internals.userNode);
         }
     }
     for (const [, edge] of s.edgeLookup) {
-        if (edge.selected && (s.elementsSelectable || edge.selectable)) {
+        if (edge.selected) {
             selectedEdges.push(edge);
         }
     }
@@ -685,8 +685,12 @@ function applyChange(change, element) {
                 element.measured.width = change.dimensions.width;
                 element.measured.height = change.dimensions.height;
                 if (change.setAttributes) {
-                    element.width = change.dimensions.width;
-                    element.height = change.dimensions.height;
+                    if (change.setAttributes === true || change.setAttributes === 'width') {
+                        element.width = change.dimensions.width;
+                    }
+                    if (change.setAttributes === true || change.setAttributes === 'height') {
+                        element.height = change.dimensions.height;
+                    }
                 }
             }
             if (typeof change.resizing === 'boolean') {
@@ -942,29 +946,26 @@ function BatchProvider({ children, }) {
         for (const payload of queueItems) {
             next = typeof payload === 'function' ? payload(next) : payload;
         }
+        const changes = getElementsDiffChanges({
+            items: next,
+            lookup: nodeLookup,
+        });
         if (hasDefaultNodes) {
             setNodes(next);
         }
-        else {
-            // When a controlled flow is used we need to collect the changes
-            const changes = getElementsDiffChanges({
-                items: next,
-                lookup: nodeLookup,
+        // We only want to fire onNodesChange if there are changes to the nodes
+        if (changes.length > 0) {
+            onNodesChange?.(changes);
+        }
+        else if (fitViewQueued) {
+            // If there are no changes to the nodes, we still need to call setNodes
+            // to trigger a re-render and fitView.
+            window.requestAnimationFrame(() => {
+                const { fitViewQueued, nodes, setNodes } = store.getState();
+                if (fitViewQueued) {
+                    setNodes(nodes);
+                }
             });
-            // We only want to fire onNodesChange if there are changes to the nodes
-            if (changes.length > 0) {
-                onNodesChange?.(changes);
-            }
-            else if (fitViewQueued) {
-                // If there are no changes to the nodes, we still need to call setNodes
-                // to trigger a re-render and fitView.
-                window.requestAnimationFrame(() => {
-                    const { fitViewQueued, nodes, setNodes } = store.getState();
-                    if (fitViewQueued) {
-                        setNodes(nodes);
-                    }
-                });
-            }
         }
     }, []);
     const nodeQueue = useQueue(nodeQueueHandler);
@@ -3066,7 +3067,7 @@ function GraphViewComponent({ nodeTypes, edgeTypes, onInit, onNodeClick, onEdgeC
 GraphViewComponent.displayName = 'GraphView';
 const GraphView = memo(GraphViewComponent);
 
-const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView, nodeOrigin, nodeExtent, } = {}) => {
+const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView, fitViewOptions, minZoom = 0.5, maxZoom = 2, nodeOrigin, nodeExtent, } = {}) => {
     const nodeLookup = new Map();
     const parentLookup = new Map();
     const connectionLookup = new Map();
@@ -3086,7 +3087,7 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
         const bounds = getInternalNodesBounds(nodeLookup, {
             filter: (node) => !!((node.width || node.initialWidth) && (node.height || node.initialHeight)),
         });
-        const { x, y, zoom } = getViewportForBounds(bounds, width, height, 0.5, 2, 0.1);
+        const { x, y, zoom } = getViewportForBounds(bounds, width, height, minZoom, maxZoom, fitViewOptions?.padding ?? 0.1);
         transform = [x, y, zoom];
     }
     return {
@@ -3106,8 +3107,8 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
         hasDefaultNodes: defaultNodes !== undefined,
         hasDefaultEdges: defaultEdges !== undefined,
         panZoom: null,
-        minZoom: 0.5,
-        maxZoom: 2,
+        minZoom,
+        maxZoom,
         translateExtent: infiniteExtent,
         nodeExtent: storeNodeExtent,
         nodesSelectionActive: false,
@@ -3132,7 +3133,7 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
         selectNodesOnDrag: true,
         multiSelectionActive: false,
         fitViewQueued: fitView ?? false,
-        fitViewOptions: undefined,
+        fitViewOptions,
         fitViewResolver: null,
         connection: { ...initialConnection },
         connectionClickStartHandle: null,
@@ -3150,7 +3151,7 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
     };
 };
 
-const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView, nodeOrigin, nodeExtent, }) => createWithEqualityFn((set, get) => {
+const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView, fitViewOptions, minZoom, maxZoom, nodeOrigin, nodeExtent, }) => createWithEqualityFn((set, get) => {
     async function resolveFitView() {
         const { nodeLookup, panZoom, fitViewOptions, fitViewResolver, width, height, minZoom, maxZoom } = get();
         if (!panZoom) {
@@ -3172,7 +3173,20 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
         set({ fitViewResolver: null });
     }
     return {
-        ...getInitialState({ nodes, edges, width, height, fitView, nodeOrigin, nodeExtent, defaultNodes, defaultEdges }),
+        ...getInitialState({
+            nodes,
+            edges,
+            width,
+            height,
+            fitView,
+            fitViewOptions,
+            minZoom,
+            maxZoom,
+            nodeOrigin,
+            nodeExtent,
+            defaultNodes,
+            defaultEdges,
+        }),
         setNodes: (nodes) => {
             const { nodeLookup, parentLookup, nodeOrigin, elevateNodesOnSelect, fitViewQueued } = get();
             /*
@@ -3363,7 +3377,10 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
             get().panZoom?.setClickDistance(clickDistance);
         },
         resetSelectedElements: () => {
-            const { edges, nodes, triggerNodeChanges, triggerEdgeChanges } = get();
+            const { edges, nodes, triggerNodeChanges, triggerEdgeChanges, elementsSelectable } = get();
+            if (!elementsSelectable) {
+                return;
+            }
             const nodeChanges = nodes.reduce((res, node) => (node.selected ? [...res, createSelectionChange(node.id, false)] : res), []);
             const edgeChanges = edges.reduce((res, edge) => (edge.selected ? [...res, createSelectionChange(edge.id, false)] : res), []);
             triggerNodeChanges(nodeChanges);
@@ -3435,7 +3452,7 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
  * your router. If you have multiple flows on the same page you will need to use a separate
  * `<ReactFlowProvider />` for each flow.
  */
-function ReactFlowProvider({ initialNodes: nodes, initialEdges: edges, defaultNodes, defaultEdges, initialWidth: width, initialHeight: height, fitView, nodeOrigin, nodeExtent, children, }) {
+function ReactFlowProvider({ initialNodes: nodes, initialEdges: edges, defaultNodes, defaultEdges, initialWidth: width, initialHeight: height, initialMinZoom: minZoom, initialMaxZoom: maxZoom, initialFitViewOptions: fitViewOptions, fitView, nodeOrigin, nodeExtent, children, }) {
     const [store] = useState(() => createStore({
         nodes,
         edges,
@@ -3444,13 +3461,16 @@ function ReactFlowProvider({ initialNodes: nodes, initialEdges: edges, defaultNo
         width,
         height,
         fitView,
+        minZoom,
+        maxZoom,
+        fitViewOptions,
         nodeOrigin,
         nodeExtent,
     }));
     return (jsx(Provider$1, { value: store, children: jsx(BatchProvider, { children: children }) }));
 }
 
-function Wrapper({ children, nodes, edges, defaultNodes, defaultEdges, width, height, fitView, nodeOrigin, nodeExtent, }) {
+function Wrapper({ children, nodes, edges, defaultNodes, defaultEdges, width, height, fitView, fitViewOptions, minZoom, maxZoom, nodeOrigin, nodeExtent, }) {
     const isWrapped = useContext(StoreContext);
     if (isWrapped) {
         /*
@@ -3459,7 +3479,7 @@ function Wrapper({ children, nodes, edges, defaultNodes, defaultEdges, width, he
          */
         return jsx(Fragment, { children: children });
     }
-    return (jsx(ReactFlowProvider, { initialNodes: nodes, initialEdges: edges, defaultNodes: defaultNodes, defaultEdges: defaultEdges, initialWidth: width, initialHeight: height, fitView: fitView, nodeOrigin: nodeOrigin, nodeExtent: nodeExtent, children: children }));
+    return (jsx(ReactFlowProvider, { initialNodes: nodes, initialEdges: edges, defaultNodes: defaultNodes, defaultEdges: defaultEdges, initialWidth: width, initialHeight: height, fitView: fitView, initialFitViewOptions: fitViewOptions, initialMinZoom: minZoom, initialMaxZoom: maxZoom, nodeOrigin: nodeOrigin, nodeExtent: nodeExtent, children: children }));
 }
 
 const wrapperStyle = {
@@ -3477,7 +3497,7 @@ function ReactFlow({ nodes, edges, defaultNodes, defaultEdges, className, nodeTy
         e.currentTarget.scrollTo({ top: 0, left: 0, behavior: 'instant' });
         onScroll?.(e);
     }, [onScroll]);
-    return (jsx("div", { "data-testid": "rf__wrapper", ...rest, onScroll: wrapperOnScroll, style: { ...style, ...wrapperStyle }, ref: ref, className: cc(['react-flow', className, colorModeClassName]), id: id, children: jsxs(Wrapper, { nodes: nodes, edges: edges, width: width, height: height, fitView: fitView, nodeOrigin: nodeOrigin, nodeExtent: nodeExtent, children: [jsx(GraphView, { onInit: onInit, onNodeClick: onNodeClick, onEdgeClick: onEdgeClick, onNodeMouseEnter: onNodeMouseEnter, onNodeMouseMove: onNodeMouseMove, onNodeMouseLeave: onNodeMouseLeave, onNodeContextMenu: onNodeContextMenu, onNodeDoubleClick: onNodeDoubleClick, nodeTypes: nodeTypes, edgeTypes: edgeTypes, connectionLineType: connectionLineType, connectionLineStyle: connectionLineStyle, connectionLineComponent: connectionLineComponent, connectionLineContainerStyle: connectionLineContainerStyle, selectionKeyCode: selectionKeyCode, selectionOnDrag: selectionOnDrag, selectionMode: selectionMode, deleteKeyCode: deleteKeyCode, multiSelectionKeyCode: multiSelectionKeyCode, panActivationKeyCode: panActivationKeyCode, zoomActivationKeyCode: zoomActivationKeyCode, onlyRenderVisibleElements: onlyRenderVisibleElements, defaultViewport: defaultViewport$1, translateExtent: translateExtent, minZoom: minZoom, maxZoom: maxZoom, preventScrolling: preventScrolling, zoomOnScroll: zoomOnScroll, zoomOnPinch: zoomOnPinch, zoomOnDoubleClick: zoomOnDoubleClick, panOnScroll: panOnScroll, panOnScrollSpeed: panOnScrollSpeed, panOnScrollMode: panOnScrollMode, panOnDrag: panOnDrag, onPaneClick: onPaneClick, onPaneMouseEnter: onPaneMouseEnter, onPaneMouseMove: onPaneMouseMove, onPaneMouseLeave: onPaneMouseLeave, onPaneScroll: onPaneScroll, onPaneContextMenu: onPaneContextMenu, paneClickDistance: paneClickDistance, nodeClickDistance: nodeClickDistance, onSelectionContextMenu: onSelectionContextMenu, onSelectionStart: onSelectionStart, onSelectionEnd: onSelectionEnd, onReconnect: onReconnect, onReconnectStart: onReconnectStart, onReconnectEnd: onReconnectEnd, onEdgeContextMenu: onEdgeContextMenu, onEdgeDoubleClick: onEdgeDoubleClick, onEdgeMouseEnter: onEdgeMouseEnter, onEdgeMouseMove: onEdgeMouseMove, onEdgeMouseLeave: onEdgeMouseLeave, reconnectRadius: reconnectRadius, defaultMarkerColor: defaultMarkerColor, noDragClassName: noDragClassName, noWheelClassName: noWheelClassName, noPanClassName: noPanClassName, rfId: rfId, disableKeyboardA11y: disableKeyboardA11y, nodeExtent: nodeExtent, viewport: viewport, onViewportChange: onViewportChange }), jsx(StoreUpdater, { nodes: nodes, edges: edges, defaultNodes: defaultNodes, defaultEdges: defaultEdges, onConnect: onConnect, onConnectStart: onConnectStart, onConnectEnd: onConnectEnd, onClickConnectStart: onClickConnectStart, onClickConnectEnd: onClickConnectEnd, nodesDraggable: nodesDraggable, nodesConnectable: nodesConnectable, nodesFocusable: nodesFocusable, edgesFocusable: edgesFocusable, edgesReconnectable: edgesReconnectable, elementsSelectable: elementsSelectable, elevateNodesOnSelect: elevateNodesOnSelect, elevateEdgesOnSelect: elevateEdgesOnSelect, minZoom: minZoom, maxZoom: maxZoom, nodeExtent: nodeExtent, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, snapToGrid: snapToGrid, snapGrid: snapGrid, connectionMode: connectionMode, translateExtent: translateExtent, connectOnClick: connectOnClick, defaultEdgeOptions: defaultEdgeOptions, fitView: fitView, fitViewOptions: fitViewOptions, onNodesDelete: onNodesDelete, onEdgesDelete: onEdgesDelete, onDelete: onDelete, onNodeDragStart: onNodeDragStart, onNodeDrag: onNodeDrag, onNodeDragStop: onNodeDragStop, onSelectionDrag: onSelectionDrag, onSelectionDragStart: onSelectionDragStart, onSelectionDragStop: onSelectionDragStop, onMove: onMove, onMoveStart: onMoveStart, onMoveEnd: onMoveEnd, noPanClassName: noPanClassName, nodeOrigin: nodeOrigin, rfId: rfId, autoPanOnConnect: autoPanOnConnect, autoPanOnNodeDrag: autoPanOnNodeDrag, autoPanSpeed: autoPanSpeed, onError: onError, connectionRadius: connectionRadius, isValidConnection: isValidConnection, selectNodesOnDrag: selectNodesOnDrag, nodeDragThreshold: nodeDragThreshold, onBeforeDelete: onBeforeDelete, paneClickDistance: paneClickDistance, debug: debug }), jsx(SelectionListener, { onSelectionChange: onSelectionChange }), children, jsx(Attribution, { proOptions: proOptions, position: attributionPosition }), jsx(A11yDescriptions, { rfId: rfId, disableKeyboardA11y: disableKeyboardA11y })] }) }));
+    return (jsx("div", { "data-testid": "rf__wrapper", ...rest, onScroll: wrapperOnScroll, style: { ...style, ...wrapperStyle }, ref: ref, className: cc(['react-flow', className, colorModeClassName]), id: id, children: jsxs(Wrapper, { nodes: nodes, edges: edges, width: width, height: height, fitView: fitView, fitViewOptions: fitViewOptions, minZoom: minZoom, maxZoom: maxZoom, nodeOrigin: nodeOrigin, nodeExtent: nodeExtent, children: [jsx(GraphView, { onInit: onInit, onNodeClick: onNodeClick, onEdgeClick: onEdgeClick, onNodeMouseEnter: onNodeMouseEnter, onNodeMouseMove: onNodeMouseMove, onNodeMouseLeave: onNodeMouseLeave, onNodeContextMenu: onNodeContextMenu, onNodeDoubleClick: onNodeDoubleClick, nodeTypes: nodeTypes, edgeTypes: edgeTypes, connectionLineType: connectionLineType, connectionLineStyle: connectionLineStyle, connectionLineComponent: connectionLineComponent, connectionLineContainerStyle: connectionLineContainerStyle, selectionKeyCode: selectionKeyCode, selectionOnDrag: selectionOnDrag, selectionMode: selectionMode, deleteKeyCode: deleteKeyCode, multiSelectionKeyCode: multiSelectionKeyCode, panActivationKeyCode: panActivationKeyCode, zoomActivationKeyCode: zoomActivationKeyCode, onlyRenderVisibleElements: onlyRenderVisibleElements, defaultViewport: defaultViewport$1, translateExtent: translateExtent, minZoom: minZoom, maxZoom: maxZoom, preventScrolling: preventScrolling, zoomOnScroll: zoomOnScroll, zoomOnPinch: zoomOnPinch, zoomOnDoubleClick: zoomOnDoubleClick, panOnScroll: panOnScroll, panOnScrollSpeed: panOnScrollSpeed, panOnScrollMode: panOnScrollMode, panOnDrag: panOnDrag, onPaneClick: onPaneClick, onPaneMouseEnter: onPaneMouseEnter, onPaneMouseMove: onPaneMouseMove, onPaneMouseLeave: onPaneMouseLeave, onPaneScroll: onPaneScroll, onPaneContextMenu: onPaneContextMenu, paneClickDistance: paneClickDistance, nodeClickDistance: nodeClickDistance, onSelectionContextMenu: onSelectionContextMenu, onSelectionStart: onSelectionStart, onSelectionEnd: onSelectionEnd, onReconnect: onReconnect, onReconnectStart: onReconnectStart, onReconnectEnd: onReconnectEnd, onEdgeContextMenu: onEdgeContextMenu, onEdgeDoubleClick: onEdgeDoubleClick, onEdgeMouseEnter: onEdgeMouseEnter, onEdgeMouseMove: onEdgeMouseMove, onEdgeMouseLeave: onEdgeMouseLeave, reconnectRadius: reconnectRadius, defaultMarkerColor: defaultMarkerColor, noDragClassName: noDragClassName, noWheelClassName: noWheelClassName, noPanClassName: noPanClassName, rfId: rfId, disableKeyboardA11y: disableKeyboardA11y, nodeExtent: nodeExtent, viewport: viewport, onViewportChange: onViewportChange }), jsx(StoreUpdater, { nodes: nodes, edges: edges, defaultNodes: defaultNodes, defaultEdges: defaultEdges, onConnect: onConnect, onConnectStart: onConnectStart, onConnectEnd: onConnectEnd, onClickConnectStart: onClickConnectStart, onClickConnectEnd: onClickConnectEnd, nodesDraggable: nodesDraggable, nodesConnectable: nodesConnectable, nodesFocusable: nodesFocusable, edgesFocusable: edgesFocusable, edgesReconnectable: edgesReconnectable, elementsSelectable: elementsSelectable, elevateNodesOnSelect: elevateNodesOnSelect, elevateEdgesOnSelect: elevateEdgesOnSelect, minZoom: minZoom, maxZoom: maxZoom, nodeExtent: nodeExtent, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, snapToGrid: snapToGrid, snapGrid: snapGrid, connectionMode: connectionMode, translateExtent: translateExtent, connectOnClick: connectOnClick, defaultEdgeOptions: defaultEdgeOptions, fitView: fitView, fitViewOptions: fitViewOptions, onNodesDelete: onNodesDelete, onEdgesDelete: onEdgesDelete, onDelete: onDelete, onNodeDragStart: onNodeDragStart, onNodeDrag: onNodeDrag, onNodeDragStop: onNodeDragStop, onSelectionDrag: onSelectionDrag, onSelectionDragStart: onSelectionDragStart, onSelectionDragStop: onSelectionDragStop, onMove: onMove, onMoveStart: onMoveStart, onMoveEnd: onMoveEnd, noPanClassName: noPanClassName, nodeOrigin: nodeOrigin, rfId: rfId, autoPanOnConnect: autoPanOnConnect, autoPanOnNodeDrag: autoPanOnNodeDrag, autoPanSpeed: autoPanSpeed, onError: onError, connectionRadius: connectionRadius, isValidConnection: isValidConnection, selectNodesOnDrag: selectNodesOnDrag, nodeDragThreshold: nodeDragThreshold, onBeforeDelete: onBeforeDelete, paneClickDistance: paneClickDistance, debug: debug }), jsx(SelectionListener, { onSelectionChange: onSelectionChange }), children, jsx(Attribution, { proOptions: proOptions, position: attributionPosition }), jsx(A11yDescriptions, { rfId: rfId, disableKeyboardA11y: disableKeyboardA11y })] }) }));
 }
 /**
  * The `<ReactFlow />` component is the heart of your React Flow application.
@@ -4482,7 +4502,7 @@ MiniMapComponent.displayName = 'MiniMap';
  */
 const MiniMap = memo(MiniMapComponent);
 
-function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle, className, style = {}, children, color, minWidth = 10, minHeight = 10, maxWidth = Number.MAX_VALUE, maxHeight = Number.MAX_VALUE, keepAspectRatio = false, shouldResize, onResizeStart, onResize, onResizeEnd, }) {
+function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle, className, style = {}, children, color, minWidth = 10, minHeight = 10, maxWidth = Number.MAX_VALUE, maxHeight = Number.MAX_VALUE, keepAspectRatio = false, resizeDirection, shouldResize, onResizeStart, onResize, onResizeEnd, }) {
     const contextNodeId = useNodeId();
     const id = typeof nodeId === 'string' ? nodeId : contextNodeId;
     const store = useStoreApi();
@@ -4548,11 +4568,12 @@ function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle
                         changes.push(positionChange);
                     }
                     if (change.width !== undefined && change.height !== undefined) {
+                        const setAttributes = !resizeDirection ? true : resizeDirection === 'horizontal' ? 'width' : 'height';
                         const dimensionChange = {
                             id,
                             type: 'dimensions',
                             resizing: true,
-                            setAttributes: true,
+                            setAttributes,
                             dimensions: {
                                 width: change.width,
                                 height: change.height,
@@ -4592,6 +4613,7 @@ function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle
                 maxHeight,
             },
             keepAspectRatio,
+            resizeDirection,
             onResizeStart,
             onResize,
             onResizeEnd,